Community Central

User blog:Sannse/The Theme Thing


The Theme Thing

Sannse November 18, 2010 User blog:Sannse Google

Back in September we showed you some our designers' ideas on themes for the new Wikia. Moving around Wikia over the last few weeks, we've seen more of your ideas -- and they look great!

  • The Avatar Wiki by The 888th Avatar and others
  • Lostpedia by Jabrwocky7
  • Our Brant Wiki by Mistydemeo
  • Simpsons Wiki by Kingcjc and others
  • Gongjin's Campaign Memorials by Zantam03
  • Drama Island Wiki by Kgman04 and others

I've been making backgrounds for various wikis around Wikia -- Bleach Wiki and Winx Club Wiki are the two I'm most pleased with. If you are adding a theme to your wiki, here are some tips from what I've learned so far:

  • Keep the file size down. Remember that this image needs to be loaded with every page a visitor views, and on slower or older computers a large image can slow the page. The maximum size allowed by the Theme Designer is 100kb, but if you can use a smaller file, that's better still.
  • jpg. files tend to be best for photo-style or other more complex images. Simple images with fewer colours might be smaller saved as .png files
  • Consider removing complex parts of the background that won't be seen. I use a template that lets me position the background, and then I remove the part of the image that fits behind the content area. This saves on file size and gives a smoother view as the page loads.
  • Remember that those with bigger monitors will see more of the background than you. It's good to fade the edges of your image to match the underlying colour you choose.
  • The 200px either side of the content area is where your main focus should be -- faces and other key elements are best positioned to fit in this area. You'll get the best effect by fading out after this first 200px.

If you need help with a theme for your wiki, please let me know. Or why not hold a competition on your wiki? With the new Theme Designer, all you need to do is pick a few colours and a background... so give it a try!

We would also love to see themes you are proud of, so please feel free to post links in your comments.


I've uploaded the template I use as a .psd file. This has several layers so that you can position an image before hiding the guides and saving. You don't need to use this to make a background, but I find it useful in getting the positioning just right.