User blog:JK55556/Customizing Your Wiki

This blog helps explain the many ways you can customize and design your wiki. This blog will help new founders customize their wiki and staff members looking to redesign their wiki.

So, you have your newly created wiki, and you have no idea what to do. Well, customizing and designing the wiki may be a good place to start! A wiki that has a "cool" design will attract more visitors and editors than a wiki that hasn't been customized.

1. The Theme Designer
The Theme Designer is a very powerful tool. You can completely change your wiki using the theme designer. The theme designer can be found under (or rather, over) "My Tools" in the toolbar near the bottom of your screen or in the admin dashboard.

The "Customize" Section
Once you enter the theme designer, it will automatically be in the "Customize" section. This section contains your background, header graphic, and all of the current wiki colors. Usually, the background and header graphic is a picture/collage of what the wiki is about. The colors of the wiki (header, buttons, links, toolbar, main) are usually related to the topic as well. You can also change the transparency of the main.

'''Tip: Make sure that the color scheme is "soft and soothing." No one wants to look at a wiki with bright neon colors that hurt the eyes.'''

The "Theme" Section
When you are in the process of creating a wiki, it asks you to choose a theme. Choosing the theme just gives you a default color scheme which you can customize later. You should only change the themes if you want to go back to a classic and plain color scheme.

The "Wordmark" Section
This section consists of your community name, wordmark, and favicon. The community name is the large text that appears on the header, to the right of the wordmark. The wordmark is the custom picture/text to the left of the header text. When you first create a wiki, the wordmark is just the wiki's name. The wordmark can be easily changed. Finally, we have the favicon, which is the small image that is on the browser tab. Community Central's favicon is FANDOM's logo, a heart with lines going through it. The favicon must be a 16x16 pixel .ico file.

Other
In the theme designer, you can also see the 10 previous revisions that administrators have made to the theme. You can undo these changes if you wish.

2. CSS
CSS is another great way to customize the wiki, and is used in most, if not all major wikis. CSS can be accesed through your admin dashboard.

Note that this section is geared towards staff members with very little CSS experience and people who want to learn about the powers of CSS. Advanced people, you probably have all of this stuff.

When I started my wiki on August 30, 2015, I really had no idea how to do anything, least of all, CSS. My wiki's CSS wasn't edited until April of the following year. Thanks to CSS, my wiki looks pretty good, but there is so much that I haven't learned about CSS, and there is so much more that I could do.

There is so much sample code throughout wikis, so half the time, you can just copy and paste and change some colors and settings. (don't exactly copy another wiki's hard work) I am going to share a few (well, just three) simple things that you can do with CSS. I'm not going to go into full detail on how to do this, but if you want to learn, just message me!
 * 1) Username colors/fonts - Usually, the only users that have the privilege of having their username colored and having the font changed are staff members. This is one of the first things that wikis do with their CSS.Blog_1.png
 * 2) Customizing usertags - Usertags appear on your profile section that contains the number of edits, favorite wikis, etc. You can change the colors and shape of a user group's usertags using CSS.Blog_3.png
 * 3) Adding usergroup next to name in messages - When you send a message, it just says your username above the message (Ex: JK55556). However, you can add the usergroup next to your name. For bureaucrats, it would say "Bureaucrat," administrators would have "Administrator" next to their name, and so on.

Those are just 3 simple CSS things that you can do. There are hundreds, if not thousands of things you can do with CSS. Check out some advanced and popular wikis for more ideas.

3. JS
JS (Javascript) is yet another way to customize your wiki. JS Scripts can be found on the FANDOM Open Source Library (Dev Wiki). There are many useful scripts that can enhance the wiki experience for you and other users. Some scripts will need to be put in Common.js, and some will need to be put in ImportJS. I am going to be focusing on ImportJS now, since it is easier to explain and easier to use.

The link to Import JS is as follows (bold means change words): wiki-name.wikia.com/wiki/MediaWiki:ImportJS

I am going to share some JS scripts that are installed on my wiki and have made positive changes to my wiki. Again, there is a lot more JS that you can do, those three are just a few important ones I wanted to share.
 * 1) WikiaNotification  - WikiaNotification allows you to send an announcement out to all the registered users on the wiki. The announcement displays on the bottom right corner of the screen. Once you've read the notification, you can click an "X," and it will go away until a new announcement is announced. This is useful because it helps you limit the number of highlighted forum threads on the wiki. To install this, add "dev:WikiaNotification/code.js" to your wiki's ImportJS. To edit/add the announcement, go to: wiki-name.wikia.com/wiki/Mediawiki:Custom-WikiaNotifications
 * 2) BlankBlogBugfix - Isn't it annoying when you type in a title for a blog and you click enter instead of OK? If you click enter after typing in the blog title, it publishes the blog instead of going to the editor. This script fixes that issue, so when you click enter, it goes to the editor and it doesn't publish it. To install this, add "dev:BlankBlogBugfix/code.js" to your wiki's ImportJSBlog_4.png.
 * 3) SeeMoreActivityButton - On most wikis, the "Recent Wiki Activity" module looks like the picture to the right. But you can't see any previous edits before those! This script adds a "SEE MORE" button that you can press to see previous edits. It also installs a small magnifying glass next to each page title so you can see what the user changed in the page. To install this script, add "dev:SeeMoreActivityButton/code.js" to your wiki's ImportJS.

Feedback
Now that you've finished the actual content of the blog, I'd like some feedback. Please comment below on the following things: Remember, feel free to message me about anything you may need help on with your wiki. I would be happy to help you!
 * What did you like and dislike about this blog?
 * What would you like me to write about next time?
 * Is there something I could have added/removed?
 * And of course, do you have any questions/comments?

About JK55556 (me)
I am the founder of one wiki, an administrator on a few more, and an editor on MANY more. I joined my first wiki in July 2015, and at the end of August, I founded my wiki, which is currently around 2,600 pages. Since I joined Wikia, I've met a lot of users and learned a lot about the community. I've learned so much about CSS, JS, and customizing your wiki. But, it took a long time to learn some stuff. I didn't know that editing a page to put an unrelated poll was wrong, and I almost got blocked for that. It took me 6 months of editing to learn how to make an infobox (I used tables before). It took me 6 months to edit the CSS and 1.5 years to edit the JS. Even now, I'm amazed about what other wikis can do with CSS and JS, and I'm hoping to learn from them.

Anyways, thanks for reading, and feel free to message me whenever you want about anything you want!

-JK55556