The Daily Edit/2007/07/Featured Wikia Design
Wikia - creating communities
Featured Wikia Design
- By Muppets101 (full credits), 31 July 2007
Truth in Numbers: The Wikipedia Story is known for its well-made site design. Here are a few of the interesting bits of customization that Object Adjective has performed on the 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.
Tabs on the top section of pages
One of the things you first see when you look at Wiki Documentary is the tab article, discussion, edit, history, move, and watch. Using CSS this can be added to any wiki in the MediaWiki:Monobook.css or MediaWiki:Common.css (which applies to all skins). Copy and paste the code below, colors and style can also be customized.
/* Main Tabs on Top */
#p-cactions {position: absolute; top: 20px; left: 180px; z-index: 100; margin: 0 !important; padding: 0 !important; background: #fff; height: 23px;}
#p-cactions:after {content: "."; height: 1px; clear: both; visibility: hidden;}
#p-cactions ul {margin: 0 !important; background: #fff;}
#p-cactions ul li {border: 0; padding: 0 !important; margin: 0 1px 0 0 !important; float: left;}
#p-cactions ul li a {color: #fff; padding: 8px 20px !important; margin: 0 !important; background: #676767; }
#p-cactions ul li a:hover {background: #112E43; color: #fff;}
#ca-edit a, .new a {font-weight: bold !important; color: #fff;}
.new a {color: #000 !important;}
.new a:hover {color: #fff !important;}
#p-cactions .selected {border: 0 !important;}
#p-cactions .selected a {font-weight: bold !important; color: #676767 !important; background: #fff; padding: 8px 20px !important;}
#p-cactions .selected a:hover {background: #fff !important;}
Dotted border and highlighted titles on sidebar
One of the most customized MediaWiki pages is the sidebar, Wiki Documentary does a nice job of giving the sidebar a distinct look. You can do this to on the wiki you operate by copy and pasting this code to your MediaWiki:Monobook.css or MediaWiki:Common.css (Which applies to all skins).
/* Navigation Left Side */
#p-navigation {margin-top: 70px; margin-left: 8px;}
* html #p-navigation {margin-left: 4px;} /* hack for IE6 */
#p-participate, #p-search, #p-tb, #p-wikicities-nav {margin-left: 8px;}
* html #p-participate, * html #p-search, * html #p-tb, * html #p-wikicities-nav {margin-left: 4px;}
#p-navigation .pBody, #p-participate .pBody, #p-search .pBody, #p-tb .pBody, #p-wikicities-nav .pBody {border: 1px dotted #112e43; border-width: 1px;}
#p-navigation h5, #p-participate h5, #p-search h5, #p-tb h5, #p-wikicities-nav h5 {background: #112e43; color: #fff; padding: 2px 2px 2px 10px; width: 100%; display: block; margin-bottom: 1px;}
Mailing List
A Mailing List is a neat feature to have a group discussion with other members of wikis. You can have one by inserting this code below. Add this code to MediaWiki:Monobook.js or MediaWiki:Common.js (Which Applies to all skins).
// Mailing List =================================================================//
function getMail(){
if(document.getElementById('mailinglist')){
var theform = document.getElementById('mailinglist');
theform.innerHTML = '<form method="post" action="http://www.ymlp.com/subscribe.php?Ferrisito"><table border="0"><tr><td colspan="2">Fill out your e-mail address <br> to receive our newsletter!</td></tr><tr><td><input type="text" name="YMLP0" size="20"></td><td><input id="submit" type="submit" value="Submit"></td></tr><tr><td colspan="2"><input type="radio" name="action" value="subscribe" checked> Subscribe<input type="radio" name="action" value="unsubscribe"> Unsubscribe</td></tr></table></form>';
}
}
function preload(){
links(); initG1();
}
And add this code to MediaWiki:Monobook.css or MediaWiki:Common.css (Which Applies to all skins).
#mailinglist {margin: 30px auto; width: 300px; padding: 24px 12px 24px 12px; border: 1px dashed #909090}
#mailinglist table {margin: 0 auto;}
#mailinglist #submit {background: #676767; color: #fff; border: 2px solid #ccc;}
And there you have it. Now to insert the mailing list on a page add <div id="mailinglist"></div> and you have a mailing list!
