Community Central


A User's Guide To: Prettifying Wikia!

Hello, Wikians! It's been a long time since I've updated the A User's Guide To: series, so this is my attempt at revitalizing it. Without further ado, let's continue on, shall we?

CSS editor focusing bug screenshot2

An example of CSS

Now, everyone wants to see a pretty wiki. Compare, for example, Community Central to something like w:c:special. The latter, which is an unpopulated and unedited wiki, is very much dull and drab. When visitors see this, they assume the wiki is one of two things:

  1. An empty wiki.
  2. A community wiki.

New editors and readers will be instantly turned away upon seeing dull themes like this. However, thanks to movements by Wikia to make it more and more customizable, you don't have to deal with dull things! In this blog, I'm going to attempt to explain how to make your wiki beautiful -- how to "prettify" it.

Let's start off simple.

When designing wikis, it's important to understand the basics. There are three main ways to redesign your wiki. They are:

  • Theme Designer
  • CSS Edits
  • On-page formatting

Most wikis can look absolutely grand with just Theme Designer and Page Formatting. Monster Hunter Fanon was designed almost exclusively with Theme Designer, but relies heavily on formatting to achieve the desired feel. As Theme Designer is a simple tool available for any administrator (or admin) to use, we'll go over that first.

Theme Designer

Theme designer

Theme designer, in its full glory!

Theme Designer is a unique Wikia tool that allows admins to quickly and easily configure basic colors for their wiki. Such colors include text color, link color, content space (the space text and other things are in) color, and finally, background design. Backgrounds can be colors or images, if using Theme Designer.

The background is what affects the wiki the most. A wiki with a dull or incredibly violent background is going to distract or repel users; softer backgrounds with just a little going on in them are best.

To upload a background image, go to Theme Designer > Customize and choose Background. From there, you can upload a .jpg, .gif, or .png file to use as your background. You can also choose the way it is displayed. Best results come from using backgrounds that look OK on big screens as well as small screens. Remember that too much going on will repel and distract viewers; too little going on will look dull and the viewer will grow bored.

Next, you can change your Wordmark. A Wordmark is a custom image designed to contain a link to the homepage of your wiki and introduce, with one simple image, what your wiki is.

When choosing a wordmark, make sure it's relevant. For instance, if your Wiki was about Windows XP, you might have the Bliss picture with "Windows XP" in a monospaced font. That's an example of a relevant wordmark. The user should be able to look at it and say "Oh, this wiki's about that! Cool!".

To upload a wordmark through Theme Designer, go to Theme Designer > Wordmark and choose Choose File. This is the button underneath the "Graphic Wordmark" heading. It's worth noting that you can use this window to make a text wordmark as well, which serves as a typical text link.

Next off, we have content color. The content color needs to contrast slightly with the background color, but it's best to have its color set to something relatively similar to your background color. However, depending on your wiki's theme and other elements in its design, this is not always the case, as can be seen on Classic Cars Wiki. Make sure users know where the content space is, and what's in it. To modify it, go to Theme Designer > Customize and find the relevant space under the Page heading. The color you want to change is "Main", and you'll note that there's a slider for transparency beneath it.

Finally, font color and highlight color. Your font should be something cool, interesting, but also somewhat widely used. So don't use monospace-sans or something unless your wiki is about computers, but at the same time, don't try using "Rosewood Big Bold Sans Serif" or a similarly obscure or client-only font unless you're willing to license the font and have it on your wiki, which is very seldom done. Finally, font should stick out against its background, so don't have black against blue or blue against green; it's much better to have blue against white or white against blue or something similar. Make sure that you can read it yourself without straining.

Highlight colors are what determines the basic color for your navigation and some other things on your wiki; these highlight colors are on Theme Designer as "buttons", "links", and "header". The header space is of questionable use, since it serves no visible purpose, but I digress. These colors, when changed, can vastly change the look of your wiki. To change them, go to Theme Designer > Customize and change things under the Page heading.

If you don't know how to go to theme designer, it's simple: look on the bottom bar, full of useful links. If you're an admin, hovering over "My Tools" will reveal Theme Designer as a clickable link to access the page. From here, change what your wiki looks and feels like!

Now, something a bit more difficult.

This would be increasingly hard to fit into one blog, so I'll cut it off here with a link to my future blog on formatting when it's written: [[]]

Here's for the fun part!

Well, darn! Already ended. In the future, there will be a CSS writing blog. For now, settle with this little thing.

Well, I hope you've found this blog somewhat informative and I hope in the future you continue to read thus far. Have fun, and happy editing!

* note that this blog is in no way slandering or defaming special wiki

Around Wikia's network

Random Wiki