The Daily Edit/2007/05/Featured Wikia Design
Wikia - creating communities
Featured Wikia Design
- By Leon (full credits), 25 May 2007
Creatures Wiki is known for its well-made site design. Here are a few of the interesting bits of customization the Creatures community has performed on their wiki.
How the CSS works
CSS code can be put in several places to affect the display of a Wikia. The core stylesheet (main.css) that is part of the MediaWiki software determines the default look of the site. Specific design details can be customized on a particular wiki by editing MediaWiki:Common.css, which affects all users of the site, no matter what skin they are using.
Details inherited from main.css and Common.css can, in turn, be affected by changes to the skin stylesheets. Monobook is the default skin for Wikia installations, and MediaWiki:Monobook.css is the most common place for admins to add customization. They can also customize Classic.css, Nostalgia.css, Cologneblue.css or Myskin.css.
Users who wish to customize their own view of the site or add personal features, without changing the look for everyone, can copy CSS code into their user stylesheet (User:USERNAME/monobook.css, or the CSS file for any other skin). This is also a great place to test and refine design ideas before transferring them to a sitewide stylesheet.
For more information and ideas, see Help:User style. You can learn more about CSS options and syntax at one of the many CSS tutorial pages on the web.
Changing the bullet image
The image used for bullets in unordered lists usually look like this: 
However, you can change this with CSS. Creatures Wiki has done this and turned it into an egg (
). What's more, the egg changes color when you hover your pointer over it. Here's the code:
/* Change bullet markers to eggs */
ul { list-style-image: url(URL of bullet image); }
ul li:hover { list-style-image: url(URL of hover bullet image); }
.portlet ul { list-style-image: url(URL of bullet image in sidebar); }
.portlet ul li:hover { list-style-image: url(URL of hover bullet image in sidebar); }
To find the image URL, go to the Image description page, then click on the link below the displayed image. It will read something like: ImageName.png‎ (4KB, MIME type: image/png). This takes you to a page with just the image; copy the URL from your browser's address bar and paste into your CSS code.
Changing the MediaWiki button in the footer
The 'Powered by MediaWiki' button can be changed to a different image. Here's how you can do this:
/* Change powered by image in footer */
#f-poweredbyico img { visibility: hidden !important; }
#f-poweredbyico { background: url(URL of 'powered by' image); top: 0px; }
Adding an extra button in the footer
Just now we learned how to change a button in the footer. This is how you add a new one:
/* Extra button at bottom left of footer */
#footer { background-color: white; background: url(URL of extra button image);
clear: right;
background-repeat: no-repeat; background-position: 3px 2px; padding-bottom: 1.24em; padding-left: 102px;}
JavaScript
JavaScript code can either be put into MediaWiki:Common.js, MediaWiki:Monobook.js or another skin's JS file. User JS can be put into User:USERNAME/monobook.js or another skin's user JS file.
Embedding Java applets
Creatures Wiki has embedded a Java chat applet in one of the pages. They also have a script so that users who navigate away from the chat page (possibly by accident) get a warning message. Here's the code:
function confirmexit() {
return "EXIT WARNING MESSAGE";
}
function appletonlode() {
var replace = document.getElementById("AppletReplace");
if (null != replace) {
replace.innerHTML='APPLET CODE';
if (window.attachEvent) window.attachEvent("onbeforeunload",confirmexit);
else window.onbeforeunload = confirmexit;
}
}
if (window.addEventListener) window.addEventListener("load",appletonload,false);
else if (window.attachEvent) window.attachEvent("onload",appletonload);
You can put the applet into a page by entering:
<div id="AppletReplace">TEXT FOR NON-JS USERS</div>
 JR Chat |
 Trying to leave |
