User blog:JoePlay/Creating Your Wiki’s Design

In my previous blog post, I described the process of requesting assistance from FANDOM staff to help with your wiki’s appearance. This time, I want to talk about customizing your wiki’s theme yourself.

I’ll start with the question: What exactly is the theme, and why would you want to customize it yourself? Simply put, your wiki’s theme is its overall appearance, from the background image and wordmark to smaller things like the color of buttons and text links. One main reason to do it yourself is knowing that you have control of many aspects of your wiki’s appearance and can change or tweak things whenever you want.

Key things to consider
First and foremost, you want to ensure that every visual detail of your wiki accurately and appropriately represents your community’s topic. Excluding temporary, seasonal updates to your theme – if you choose to do that – your wiki’s primary theme should make it obvious to visitors that the wiki is clearly focused on whatever your wiki’s topic is.

Many of your new visitors will arrive at your main page, so it is a very important part of your community’s theme. Be sure to showcase important and popular content, as well as easy navigation to that content. And don’t forget to set up your Mobile Main Page so that visitors on mobile devices receive an optimized experience.

Theme designer vs. custom CSS
The clear benefit of using the theme designer is its simplicity. The user interface makes it easy to create an impressive and unique appearance for your community. For choosing colors, the UI includes a collection of clickable swatches, but to get your colors just right, I fully encourage you to enter specific hex codes for your colors. These can be found using sites such as html-color-codes.info and w3schools.com.

If you want to take your customization beyond what the theme designer can do, CSS is a very capable tool. The level of detail in which CSS lets you tweak things is an alluring option, but proceed with caution, especially if you’re new to CSS. Keep in mind that any changes you make using this method may suddenly stop working due to updates made by FANDOM. Keep an eye on the Technical Updates forum for changes that might affect your customizations. Also note that any customizations you make must not violate FANDOM’s customization policy or Terms of Use.

Best practices
Use colors that compliment each other and avoid using clashing colors that distract the reader. Keep contrast in mind when choosing the color of text links so that they are easy to read. If you’re unsure about your contrast level, use a site like WebAIM.org to see if your choice of page color and link color passes the web standard. Similarly, if you decide to make your content area partially transparent, it should be subtle so that all of the text is easily readable on top of your background image, if you have one.

Don’t forget that the width of the content area is responsive, and displays at one of two widths depending on the size of the viewer’s screen or window. So when laying out your main page, try to avoid empty areas on larger screens and overlapping items on smaller screens. While editing your main page, click the Preview button and switch between Desktop and Desktop XL from the drop-down menu.

With all of these tips in mind, I hope that you feel empowered to give your community a visual design to be proud of.