Aired March 22, 2013
This webinar covers how to update Mediawiki messages and use CSS to give your wiki extra design details and customizations. Watch to learn how to provide further design detail and unique characteristics to your wiki
Slides & Transcript
Welcome to the March Webinar - Advanced Customizations for your wiki
Today we will be talking about a couple of ways to customize your wiki beyond the theme designer. We will overview general customizations, and then look specifically at Mediawiki messages and using CSS. At the end we will be taking questions, so feel free to submit them at any time via the gotomeeting software.
We know how important it is for a wiki to have a unique identity - a look that matches the content you are chronicling. To support you in this endeavor, we’ve created the theme designer tool which allows you to easily adjust the background, wordmark, page, button and link colors. We also allow some customizations using CSS. What area’s can this be applied to? Well I think it’s best to look at an example.
Here you can see a screenshot of the Bioshock Wiki. They have created a custom background, wordmark and main page. One the main page here, you can also see that a specific color has been applied to borders, background, around templates as well as other subtleties.
Now you can see a screenshot from a page on the Vampires Diaries Wiki. The community there has adjusted link color, and templates have been customized to match the wiki’s theme. The quote box contains a red border, as do elements of the infobox.
Hi all, I’m Tim Quievryn (also known as User:DaNASCAT on Wikia) and I’ve been editing wikis since 2004. For the past couple of years I’ve been a member of the community support team, with a special focus on technical issues. In my time on wikis, I have seen just about every type of customization that could exist. Today I’m going to share with you some of my knowledge and experience with differing types of customizations, and also give you some advice on what has worked well and what hasn’t worked well.
The base software Wikia is run on is called MediaWiki and it is also one of the default namespaces that exists on each wiki. This namespace defines the text you see on your wiki’s interface, which includes button labels, product names, and any text you see within a feature. This includes the word edit on the edit button, the words message wall on your message wall, then term follow on each page, and much, much more.
Each message has a default term that is associated with it. These are all listed on a special page on your wiki called Special:Allmessages. You can access this page from the admin dashboard, on the advanced tab and then the System messages link. Or you can go directly to Special:Allmessages. On this page is a list of hundreds of system messages. From there, you can find and see the value of each message individually.
Here is a close up look at Special:Allmessages. The left column is the name of the message, and the right column contains the default message text that is designated for that message.
If the name of the the message is a red link, that means that the message has not been customized locally and your wiki will pull in the default value for the message from Wikia’s codebase.
If however, the name of the message is blue, and the default message column contains two colored boxes, yellow on top of green, that means the message has been customized for you specific wiki. The top yellow box contains the default text, while the bottom green box contains the adjusted, customized text. Here in this example you can see that the message, “Oasis-activity-header” has been changed from “Recent Wiki Activity” to “Recent Edits”
So how do you figure out which message applies to what you see on your wiki? There’s a good shortcut that exists. Append the URL parameter ?uselang=qqx to the end of a page url. This will tell the page to display the name of the MediaWiki messages that make up the interface of that specific page. Here is an example from the Habbo Wiki. You can see on the edit button, it states “oasis-view-edit”. This means that button label is controlled by MediaWiki:Oasis-view-edit. This is super helpful when you are trying to determine which message controls which text.
How do you adjust one of these messages? First you need to be an admin on your wiki. If you are an admin, then all you need to do is find the corresponding message page, and click edit. Remember this will be a page in the Mediawiki namespace, with the url corresponding the name of the message. As you can see here, to adjust the the Recent Wiki Activity message I went to the url ending in Mediawiki:Oasis-activity-header.
From there, you add the new custom text just like you would on any normal edit page before saving. A quick way to get there is from the Special:Allmessages page.
Before you adjust a message, I recommend chatting with your other admins, so that there is agreement on the wording.
Here you can see an example from the Harry Potter Wiki. When you have a new talk page message there, it says you have a new owl to match the Harry Potter storyline, where scrolled messages are delivered by owls.
Common messages to adjust are: Welcome messages, Community Corner, Chat headlines, and User masthead titles. When adjusting a MediaWiki message, keep in mind the following:
- Editing is in source mode, so any adjustments must be done using wiki text.
- Think about word length - you want to make sure it fits correctly in the provided space
- Use words everyone understands - it can be fun to adjust the terms to match your topic, but you want to make sure even new community members or visitors to your wiki understand what the button, link, or icon will do.
- Don’t go overboard. A number of customizations add a unique touch to your wiki, but having too many will lead to confusion even for your wiki’s most experienced editors.
Here you can see a couple of examples of customizations wikis have done to their chat and page count. Updating messages is a great way to add a add a little personality to your wiki and provide deeper integration of your topic into your wiki. Changes take place immediately, so feel free to test out different terms over a period of time.
MediaWiki messages are great for changing text and titles of pages and buttons on your wiki, but how do you change the aesthetic elements of your wiki? We’re going to move now into Visual Design customizations you can implement.
As Sarah mentioned earlier, the theme designer is a great place to start with your initial design. It allows you to easily customize the background, wordmark, page elements and more. Once you have mastered the theme designer, there may be more detailed elements you would like to define. To do this, you can use the web markup language CSS.
CSS stands for Cascading Style Sheets and interacts with HTML to allow you to stylize text, images and the layout on your wiki. HTML is the structure of a page while CSS defines the look of the page. Modifying your wiki’s CSS is a way to create unique designs for areas not touched in the theme designer.
CSS is a complex language, and has lots of intricacies so today we are going to cover basics and please feel free to send in questions.
Before we dive into the details of CSS, I want to first cover some basic concepts to keep in mind while designing your wiki.
- Focus on readability - people come to your wiki to view the content your community has added - if they can’t read the page, they won’t be able to enjoy.
- Think holistically - think of your wiki as a whole, and consider each design element a piece of the whole - do the elements work well together? are they in contrast? A wiki generally looks better when all of the design elements work together, not against each other
- Remember space - padding and white space are there for a reason - so the page doesn’t feel crowded & overwhelming. Try not to take over this space with your design.
These are wider level concepts you can apply to the color, transparency, and overall design on your wiki.
With all of this in mind, let’s dive into applying CSS. On Wikia, you can set up your own personal CSS which will apply to all wikis you visit.
If you are an admin, you can edit your wiki’s CSS page at Mediawiki:Wikia.css. This will apply any CSS changes for the Wikia skin on your wiki. We are now going to focus on modifying this page and tips for the best way to do so.
As with all languages, CSS has a particular syntax that must be followed. This syntax is listed on the style sheet, which is the Mediawiki:Wikia.css page. This page is read by your browser when a page on your wiki is loaded, and tells the browser how to style specifically defined elements.
So what does your browser read? It reads the rules that are defined on the page. This includes selectors and declarations, as shown here.
- A selector - specifies the html elements you are referring to
- A declaration - contains a property and a value - this lets you say what you want to be styled and how
In this slide, the selector is an H1 Headline, and the declaration includes the property color, which defines the text color, with a value of blue, and a property of font size, with the value of 12 pt. This will mean that whenever there is a h1 header on this wiki, it will be displayed as blue text in 12 pt font.
So lets look now at selectors. Selectors can be any HTML element - a paragraph, a header, links, images, bulleted or numbered lists - or essentially anything that exists within structure of a web page. Each selector uses a specific HTML tag, which you need to know in order to use. The table here shows common HTML tags you will see on used on wikis.
Remember, in the CSS syntax you do not include the greater than and less than signs from the HTML tags, just the text within those symbols.
A declaration is what defines how the selector will appear - may be the color, size, alignment or a number of other characteristics.
Here is a chart of common declarations you will see on CSS pages. Background color, which applies to the background of the element, color which applies to the font color, float which tells the element where to appear on the page, text-alignment, color and other text characteristics as well as border width and padding. There are many other declarations you will see, but these are among the most common.
To get started you need to go to your wiki’s Wikia.css page. I recommend choosing just a couple of elements to start with, and adding complexity as you become more experienced with CSS. To start, research what the HTML codes are for your selectors, as well as choose what declaration you plan to make. You can look up what declarations are possible at http://w3schools.com, where you can see all of the possible CSS values and test for yourself.
Since this affects the whole wiki, it’s good to chat with your fellow admins about what will be defined here. Remember, what you change on this page affects how the wiki looks to everyone, so it is important that your community is on board with this change.
There is a basic pattern you need to follow in order for your browser to understand the CSS you are defining - if there’s an error, say a typo, your browser will skip applying whatever you defined there.
- What is the syntax? Selector, an open curly parentheses, and then a property with a value.
- After each property there is a colon, and after the value a semi-colon. This separates each declaration from each other.
- After this, you can move onto defining another property & value. It is helpful to put each property with its corresponding value on the same line, then the next property on the following line.
- Once you have completed the declarations for a selector, you add a close parentheses and can move on to the next selector.
Here you see the p selector, which means we are defining the style for a paragraph. The declarations state the background will be green, the text will align to the center and be font size 12pt.
Here we added another selector with corresponding declarations. You can see we are now adding CSS for both paragraphs and h2 headers.
As I mentioned, when you define CSS for an HTML element, the CSS is applied to all cases of that element. So if you state that all h2 headers are blue, then they will appear as blue on all pages on your wiki. Could be a user page, your main page or an article page. Many wikis though like to define different designs depending on the type of page or location within the wiki. This is all possible in CSS, just you need to dig deeper.
If there is a distinct feature you would like to apply CSS to, you use something called an element ID. This allows you to specifically call out this element on your css page, and modify the characteristic of just that element. On your wiki this might include notification bubbles, the wordmark, navigation or the search box.
- In the screenshot here we are using a developer tool to look at what element id is being used to color the wikia notification bubble
- The text inside the green box shows the element ID as .WikiaNotifications
- Below the element id is the corresponding background color, which defines the color as red - which you can see is the background color of the bubble
- If you were to want to adjust this for your wiki, you would go to the css page, add .WikiaNotifications using the CSS syntax we just showed, and declare the bubble background color as something different.
So now suppose you want to set a specific style to a group of elements, but not your entire wiki, what can you do? In this case you would create a CSS class. A class can include any html elements, and allows you to apply designs to just that class rather than the entire wiki.
So say you want to define just the styling within an infobox, you create a class on your CSS page called infobox, which states how you want the infobox to be stylized. This could include border, colors, font size, etc. This means that this style will only applied to the the infobox, and no other part of your wiki. This solves the problem of not having CSS appear wiki wide, but only on elements you specifically call out.
Wikis generally create classes for templates, particularly infoboxes and user boxes, galleries, polls, links, tables, and much more.
To create a class, go to your Wikia.css page, and follow the same syntax as all CSS definitions, but in this case, you need to place a period before the name of the class. This tells your browser that a class name rather than just a regular HTML element is being defined.
Class names can be anything, but if you use more than one word make sure to use an underscore between the words, or it will think you have two classes. We strongly suggest you use the most commonly used name for the feature the class is referring to. So rather than me calling a class Tim’s fabulous template, use the name infobox as you see here.
In the example you can see that we have created a class for infobox which will have a background color of white, a 2px border, and font size of 14pt.
Now suppose you wanted to define the style of bulleted lists within the infobox, you can do that by adding a specific line class for infobox bulleted lists. Here you can see how that is done.
Below the first infobox class syntax we’ve demonstrated you can see we still used .infobox, but added the ul HTML element, which stands for bulleted lists after it. This tells the browser that when a bulleted list is inside an infobox to color the text red. Bulleted lists outside of infoboxes will remain as normal or whatever general css is being applied.
Ok now that we have overviewed the basics, let’s look at CSS in action on a wiki. Here is a screenshot from the recipes wiki, showing the top of their Wikia.css page, when you are viewing the page.
The page is broken into sections, with different headers noting what CSS is in that area. This is called commenting, and is done by adding a /* at the start of the comment, and a */ at the end of your comment. This tells the browser that this area includes comments, and to ignore the text there. Adding comments like this helps to keep the page organized and easy to see clearly what css has been applied.
Here is a screenshot of the same page in edit mode. You can see it is defaulted to source mode, and all of the same syntax is there for you to customize.
Across Wikia you will see CSS in all shapes, sizes and colors. Looking at other wikis is a great way to get inspired as well as learn how others are using CSS. So what should you do if you see a customization you like and you want to learn what CSS is controlling it? You can use tools built into your browser to see what is being applied.
Here for example is an infobox on Zeldapedia. To learn what CSS they use, right click on the infobox, and choose “Inspect Element” from the menu displayed. Here we are using chrome, but you can access this is firefox and other modern browsers as well.
Here is what will appear when you click Inspect Element - it is basically a window into what HTML and CSS is being applied to the page. On the left you can see the html for the page, and on the right the CSS applied to that specific html element.
Here you can see I selected the html that included infobox class, and on the right the css for the infobox appears listing the all of the properties and values.
Within inspect element you can make adjustments to the css and get a visual preview of those adjustments, without touching the live code. This a good way to test changes to the current CSS and to learn what declarations control what parts.
Here on the left is the current infobox with corresponding CSS. On the right I adjusted the background color by switching the background color value to the html color code for fuscia. You can see the background then changed to this color. If you are looking for a specific color, check out our help page on colors.
On this slide I adjusted both the width and the color associated with the border for the infobox.
And lastly here, I floated the infobox to the left rather than the right.
Using the inspect tool is a great way to figure out what adjustments you might want to make, preview them, then you can take that to your CSS page, save it and to make it live.
- Remember readers other than yourselves - Just because you like the color blue doesn’t mean every user does. Having every single part of your wiki blue is both hard to read and very polarizing. Try to use a healthy mix of light complementary colors.
- Prioritize padding and space. A good amount of whitespace - 5-10px between table rows - goes a long way to making a page flow better.
- Try not to load too many images through CSS, especially high-definition ones. It is a slow and ineffective way to add visuals to your wiki.
- Remember the power of simplicity & subtlety - the web is a busy, distracting space, and have a clean, basic yet carefully designed wiki can help users to focus on the most important part - your content!
- File:Templates Overview
- File:Wikia Mobile Apps & Skin
- File:Videos on your wiki
- File:Templates 101 Tips for editing & creating templates on Wikia
- File:Best Practices for Structuring your Wiki Categories, Namespaces and Navigation
- File:Social Media & Your Wiki
- File:SEO Tips and Tricks
- File:Wikia Webinars - Introducing the Message Wall & Wiki Navigation
- File:Managing your wiki - review of tools & special pages
- File:Mainpages 101 - How to make a great mainpage for your wiki
- File:Keeping The Peace - Best practices for handling conflict on your wiki
- File:Tips for Designing & Promoting Your Wiki
- File:Intro to CSS & Your Wiki Webinar
- File:What is your copyright - A webinar focused on content licensing with Creative Commons.wmv
- File:Community Guidelines Webinar
- File:Wikia Copyright Basics Webinar
- File:Tips & Tools for Community Discussions
- File:Wikia Webinars - Admin Tools & Tips
Appears on these pages
Wikia Webinars are monthly presentations provided by the Community Support team to provide live...
Below are some helpful videos for Wikia trainings, tips, and tricks. Be sure to check out Wikia...