FANDOM


The following is a tutorial on how to make the Monobook.css file on a Wiki look like Vector.css, the default skin used by Wikipedia. Code is modified from Uncyclopedia.

This can only be done by an administrator.

To do this, open up the MediaWiki:Monobook.css URL to your wiki.

For best results, set your viewer preferences to Monobook before adjusting the site's look and feel. Make sure that Wikia.css uses an @import code sequence so that Monobook and Common.css are read properly by Wikia.css.

Background

First step is to give your wiki the same background-image as Wikipedia's Vector:


/*--Vector background--*/

body {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABOCAYAAADhG3wwAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/
oL2nkwAAAAlwSFlzAAAOnAAADusBZ+q87AAAAAd0SU1FB9sEBwoNJFhAx38AAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAQklEQVQY09WOyw3AUAjDnOy/
s3vifdoJekEgEyuoFuDnQ6R4A6FE6j6P2CTcFqFZPr2f1/bxSSU0DvVV4xAMzTR4ACK0I33zxUTtAAAAAElFTkSuQmCC)!important; 
background-repeat:repeat-x!important; 
background:#f6f6f6;
margin:0;}

/*--End Vector background--*/

This long Base-64 code for the background-image translates into a simple PNG file. Make sure in the code above to remove the line break between wD/ and oL2n, as well as the one between jDnOy/ and s3vifdoJekEgE. This will replicate the background look for Vector.

Colors and margins

This code moves the site logo down a few pixels, and sets the link colors properly.


/*--Move down logo a bit; questionable--*/
 
#p-logo a, #p-logo a:hover {width:160px!important; background-position:50% 70%!important;}
 
#firstHeading {padding-top:0; padding-bottom:0; font-size:26px; line-height:31px;}
 
a {color: #0645ad;}
a:visited {color: #0b0080;}

.bluelinks a {color:#0645ad!important;} 
.bluelinks a:visited {color: #0b0080!important;}
 
#content {margin:79px 0 0 160px!important; border: 1px #a7d7f9; border-style: solid none solid solid; 
font-size:13px; position:relative; padding:0.5em;}

textarea, #wpSummary {border:solid 1px #aaa; margin-bottom:8px;}

/*--End move down logo--*/

Circular bullets

Another well-noticed feature by many who converted from Monobook to Vector is that the teal squares are gone. Instead, little circular bullets are used for bullet lists. This code will force Monobook to use circular bullets like Vector does.


/*--Use dots instead of squares--*/
 
ul {list-style-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAKCAYAAAB8OZQwAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAOnAAADusBZ+
q87AAAAAd0SU1FB9sGEQcDKb8YXjwAAAAdaVRYdENvbW1lbnQAAAAAAENyZWF0ZWQgd2l0aCBHSU1QZC5lBwAAADpJREFUCNe9y7EJwEAMBMF54cJUgxsyyl2USvvED6rAmxzscvzEcr+
JB4lGXUM4G0McMr7LpAM1QqM201IIq3IeJ9MAAAAASUVORK5CYII=); list-style-type:square;}

After both plus signs in the code above are line breaks. Delete these before inserting into your Monobook.css file.

User icon

Users of the Vector skin get to have a user icon. This code forces Monobook to do that too.


/*--Top Top Menu - Personal--*/
 
/*--User Icon--*/
 
li#pt-userpage, li#pt-anonuserpage, li#pt-login {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAALCAMAAABxsOwq
AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAGBQTFRF////
R2uZMmGd5rp2boqvMFyS9unUTXWr5KQ/N2mn/Pr42Jg14Zstl6a80K93XXiVooVQ57VnpLnW4a1a36ZMr7Cwgpm5PXGw78mO+O/
g1t7n5Orxk6zMvMne7/Dw6+zt5K6gdAAAAAF0Uk5TAEDm2GYAAABdSURBVHheHcpFAgMxEANBDZhhmQP//2Uc90V1EICrLuti0YqnyORrbLSrWPHJ/ukn8bkzbrnVD/
MwpjQOb+B2hyvbQe7BTiG8ZmYqUOLglA0rCrcJxpiCz049/f4A9ZID96SyhDEAAAAASUVORK5CYII=");}
 
#p-personal {z-index:2; margin-top:4px;}
#p-personal a {font-size:12px;}
#p-personal a:hover{background:transparent!important;}
#p-personal a:hover {text-decoration:underline !important;}
#utcdate a {font-size: 15px;}

/*--End User Icon--*/

After sOwq, there is a line break separating it from AAAAGXRFWHRTb. Delete the line break. There is another after //// and before R2uZMmGd5. Delete that when entering this code. Another line break to delete is between mO+O/ and glt7n. A fourth is the break separating VD/ and MwpjQOb.

Cactions

Those little tabs dubbed "Article," "Discussion," "Follow," "Protect," "Rename," "Delete," "History," and "Edit" / "View Source" are called "cactions." They have undergone more visual style change than pretty much any other single element in design from Monobook to Vector. Therefore, the code to make them look different is more complex than the code for almost any other item that requires a change.

 
/*--P-Cactions--*/
 
#p-cactions {border-radius:0!important;}
 
#p-cactions {width:100%; font-size:13px; z-index:2; margin:0; padding:0; position:absolute; top: 0; left: 0;}
 
#p-cactions .pBody {background-image:none; margin:41px 242px 0 160px;}
 
#p-cactions ul {font-size: 100% !important; position:relative; background-color:transparent; padding:0; height:43px;}
 
#p-cactions ul li, #p-cactions ul li a {border-radius:0!important; -webkit-border-radius:0!important;}
 
#p-cactions ul li, #p-cactions ul li a {border-radius-topleft:0!important; border-radius-topright:0!important; 
-webkit-border-radius-topleft:0!important; -webkit-border-radius-topright:0!important;}
 
#p-cactions ul li, #p-cactions ul .selected {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAoCAYAAAA/
tpB3AAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOnAAADusBZ+q87AAAAAd0SU1FB9sEBwk2Joi69zI
AAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAARElEQVQI112MORLAIAwDN/7/i2OQUmDMkEajmzfTARBTUMwQ5iFkNuAKfr1TWVKbLcnlDe9tysXGSfv5/M3bk3vWVxJ8HpI/
xiyd0aAAAAAASUVORK5CYII=) repeat-x!important;
padding:17px 1px 7px 1px!important; border:1px #a7d7f9; border-style:none; z-index:1!important; background-color:#eaf4f8; float:right; margin:0 0 0 -1px;}

#p-cactions .pBody ul li:first-child, #ca-talk {float:left!important;}
 
/*--override margining used to force 1px borders on other tabs--*/
 
#p-cactions .pBody ul li:first-child {margin:0!important;}
 
#p-cactions ul li a, #p-cactions ul.selected a {cursor:pointer; color:#0645ad; background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAoCAYAAAA/
tpB3AAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sFHgU6HYxvmdsAAAAwSURBVAjXY/j///9/
JgYGBjSCgYmBgeEfKus/LuIfYdY/XGLYlCCIv1gU/0WVgLAAaU0pC9bG9mQAAAAASUVORK5CYII=) 0 -1px repeat-x; 
text-transform:none; padding:17px 6px 8px 6px!important;}
 
#p-cactions ul li.new a {color:#a55858!important;}
 
#p-cactions ul li.selected a {color:#333333; background-color:#fff!important; padding:17px 6px 8px 6px!important;}
 
#p-cactions ul li a:hover {text-decoration:underline; background-color:transparent;}
 
#p-cactions ul li.selected {background-color:white!important; cursor:pointer;}
#p-cactions ul li.selected a:hover {text-decoration:none;}
 
/*--End P-Cactions--*/

Beware of line breaks:

  1. After AAAA/ and before t3BpA
  2. After i69zI and before AAAAZd
  3. After J8HpI/ and before xiyd0
  1. After CAYAAAA/ and before tpB3AAAAAXNS
  2. After j///9/ and before JgYGB

Dropdowns

For some odd reason, the cactions are dependent on these. So dropdowns get edited too.

 
/*--Dropdowns--*/

.vector-cactions > a {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAoCAIAAACw1AcgAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAOnAAADusBZ+
q87AAAAAd0SU1FB9sGFRAcELtM+ggAAAAdaVRYdENvbW1lbnQAAAAAAENyZWF0ZWQgd2l0aCBHSU1QZC5lBwAAADtJREFUCNdVjcENADEMwgz77+w+
mt61DxRigUCtWKQwkhLr8YdPzvmVBipWr8zct28ljZt7b32dzfPvLLNRIzGl0umkAAAAAElFTkSuQmCC) 0 -1px repeat-x!important;}
 
/*--legacy delete dropdown--*/
 
#delete-dropdown {margin-top:15px; border:solid 1px; border-color:#a7d7f9 #ccc #ccc #ccc!important; padding-bottom:14px;}
#delete-dropdown a {margin:-7px 0 0 0!important; padding:0!important;}
#delete-dropdown a:hover {text-decoration:underline!important;}
 
#p-cactions ul li .dropdown a, #p-cactions ul.selected .dropdown a {padding:0!important;}
 
.ca-dropdown {position:relative;}
 
.d-dropdown {position:relative; margin-right:-7px !important;}
.dropdown {position:absolute; display:none; z-index:50; top:38px; left:0; border:solid 1px; padding:7px; border-color:#a7d7f9 #ccc #ccc #ccc; 
opacity:.9; background:#fff;}
.dropdownn {position:absolute; display:none; z-index:50; top:-8px; left:100%; border:solid 1px; padding:7px; border-color:#ccc; background:#fff;}
.ca-dropdown:hover > .dropdown, 
.d-dropdown:hover > .dropdownn {display:block;}
.dropdown span {float:none!important; display:block; padding:6px; border:none;}
 
/*--End Dropdowns--*/

Watch out for the line break between DusBZ+ and q87; as well as the one between +w+ and mt61.

Ca-nstab

This code is optional for those who want rounded borders for a lot of things.

 
#ca-nstab-mediawiki {border-radius-topleft:0!important; border-radius-topright:0!important; -webkit-border-radius-topleft:0!important; 
-webkit-border-radius-topright:0!important;}

Side menu

These mods alter the side menu's appearance to look like Vector's side menu.

 
/*--Side Menu--*/
 
#p-navigation {margin-top:-3px;}

/*--Sizing, prevent overflow--*/

.generated-sidebar, #p-tb, #p-lang {margin-bottom:4px; padding-left:5px; font-size:13px; width:145px;}

.portlet h5 {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIwAAAABCAMAAAA7MLYKAAAAGXRFWHRTb2Z0d2
FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAEtQTFRF29vb2tra4ODg6urq5OTk4uLi6+
vr7e3t7Ozs8PDw5+fn4+Pj4eHh3d3d39/f6Ojo5eXl6enp8fHx8/Pz8vLy7+/v3Nzc2dnZ2NjYnErj7QAAAD1JREFUeNq0wQUBACAMALDj7hf6JyUFGxzEnYhC9GaNPG1xVffGDErk/
iCigLl1XV2xM49lfAxEaSM+AQYA9HMKuv4liFQAAAAASUVORK5CYII=); 
background-position:center bottom; background-repeat:no-repeat; background-color:transparent; display:block; margin:19px 0 10px 8px; 
padding:0 0 12px 8px; color:#444444; text-transform:none; font-size:12px;}

.portlet .pBody {background-color: transparent; border: 0px !important; padding: 0 0 2px 15px; margin: -3px 0 0 0; font-size: 100%;}
.portlet .pBody ul {list-style-type: none; list-style-image: none; margin-left: 0; padding: 0;} 
.portlet .pBody ul li {line-height:14px; padding:0 0 6px 0; margin:0}

/*--Collapsible Menus--*/

.collapsible_pile #p-navigation {margin-top:18px !important; margin-bottom:0!important;}
.collapsible_pile #p-navigation h5 {display:none!important;}
.collapsible_pile .visible h5, .collapsible_pile .hidden h5 {background-position:center top; margin:0; padding:8px 0 5px 24px; cursor:pointer;}
.collapsible_pile .visible .pBody, .collapsible_pile .hidden .pBody {padding:0 0 0 26px; margin:0;} 
.collapsible_pile .hidden h5 {color:#0645ad;}
.collapsible_pile .hidden h5:hover {text-decoration:underline;}

/*--End Collapsible Menus--*/

/*--Arrows--*/

.collapsible_pile .visible {background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAFCAYAAACTphZWAAAAAXNSR0IArs4c6
QAAAAlwSFlzAAAO6wAADpwBEbNupAAAAAd0SU1FB9sGDg0pGmpOMR0AAAAdaVRYdENvbW1lbnQAAAAAAENyZWF0ZWQgd2l0aCBHSU1QZC5lBwAAAE9JREFUCNd9yzENg
DAARNFH6gIBGGCuAwx161ZDSOiKAQzUBhMkTVpuvLy/pJR2ZBzmO5FDrbXFGG+s2GawlHIF+Ak+COF9B0EHOzwIOggPO/8lOmDjOrAAAAAASUVORK5CYII=) no-repeat 14px 13px;}

/*--End arrows--*/
 
.collapsible_pile .hidden {background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACpr
HcmAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAOnAAADusBZ+q87AAAAAd0SU1FB9sGDg4fNUrFI2gAAAAdaVRYdENvbW1lbnQAAAAAAENyZWF0ZWQgd2l0aCBHSU1QZC5lBwAAAFR
JREFUGNNjYEAClZWVxgx4ABMavwGfBnTFPvg0MGERw6mBCYeNWDWw4PGPD5T2JWQyAwMDwxYGBoYGYpyxhYGBoaG9vf0sIcVYFWJTjFMhBiAUgwB5exk8MN/
AIQAAAABJRU5ErkJggg==) no-repeat 14px 10px;}
 
/*--End Side Menu--*/

Watch out for a line break after ccll and before PAAAAEtQ. There is another one after Li6+ and before vr7e3t. There is a third one after Erk/ and before iCigL11XV2. Delete these line breaks. Look for other line breaks and delete these as well.

Search box mods

This code alters the search bar to put it on top as opposed to being in the side menu. As always, watch for line breaks in the base-64 URL codes and delete them.


/*--Search Tool Mods--*/
 
#p-search h5 {display: none;}
 
/*--move to top--*/
 
#p-search {position:absolute; top:50px; right:8px; width:auto; float:right; text-align:right; margin:0; z-index:51!important; border-radius:0!important;}
 
#p-search .pBody {background-image:none; background-color:#fff; padding:0; margin:0; border:1px solid #aaa!important; overflow:hidden; 
background:#ffffff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAXCAIAAABF+
LJYAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAOnAAADusBZ+
q87AAAAAd0SU1FB9sGEgoDAOfH+u0AAAAdaVRYdENvbW1lbnQAAAAAAENyZWF0ZWQgd2l0aCBHSU1QZC5lBwAAAC1
JREFUCNddyrENACAQgEBg/3m/1cIYE9sDZiYgIDEk9Zjm365LrGPvM11hCRs3BQUqlYAYAgAAAABJRU5ErkJggg==) repeat-x top;}
 
#p-search form {padding:0; margin:0; width:224px; height:22px; position:relative; background:transparent;}
#searchInput {width:190px; height:22px; border:none!important; padding:0 0 0 3px; margin:0; position:absolute; top:0px; left:0px; font-size:13px; 
-webkit-appearance:none; background:transparent; border-radius:0!important;}
 
/*--This next section will remove inappropriate webkit garbage--*/
 
#searchInput:focus {outline:none;}
#searchInput::-webkit-search-cancel-button {display:none;}
#searchGoButton {border:none; background: #fff; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAANCAAAAAC4Qt
CeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFn
ZVJlYWR5ccllPAAAAAJ0Uk5TAP9bkSK1AAAAaklEQVQI12P4///u3NrauXf/AwHD//05YLAfxLmbl7/
n48c9+Xn3gZxJYDGg/BQgpyznC4jzJacMmVOMrgxowMFPnw5CDIAZnbMLxAFaWl09txrEY/gPAe87gTwY5//
PmTmr4Jz/f699BgAmIHmp1XxJagAAAABJRU5ErkJggg==); 
background-position:0 2px; width:80px; height:25px; position:absolute; top:2px; right:0; background-repeat:no-repeat; margin:0 -60px 0 0!important; 
padding:0 0 0 20px!important; font-size:12px; line-height:12px; font-family:monospace; cursor:pointer;}

#mw-searchButton {display:none!important;}
 
#p-search div {border-radius:0!important;}
 
/*--End Search Tool Mods--*/

Footer mods

Copy-pasting these codes will make the footer data behave more like in Vector.

 
/*--Footer Mods--*/
 
/* make footers rest against the end of the #content instead of the sidebar */
 
#column-one {margin-bottom:-1800px;}
 
#spotlight_container{padding-left:185px; padding-right:25px;}
 
#footer {background:none!important; border:none!important; margin-left:160px; margin-top: 0; font-size:12px;}
 
/*--Move icons to side--*/
 
#f-poweredbyico {margin-top:10px; float:right;}
#f-copyrightico {margin-top:10px; float:right;}
#f-list {float:left; padding:5px 0 0 0; margin:0 0 15px 0; width:80%;}
#f-list li {display: block; text-align:left;}
#privacy, #about, #contact{float:left; padding:0!important;} 
#contact, #advertise. #hosting {padding-top:6px!important;}
#lastmod {padding-bottom:6px;}
#credits, #privacy, #about, #disclaimer, #contact, #advertise {float: left;}
#hosting {padding-top:5px; clear:both;}
 
/*--End Footer Mods--*/

Preferences mods

Even the Preferences section is radically affected by this shift, so these mods address that. As always, remember to remove all line breaks inside of base-64 codes when copy-pasting.


/*Preference Mods--*/
 
#preftoc li {font-size:12px; background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIj
AAAAAXNSR0IArs4c6QAAAAlwSFlzAAAOnAAADusBZ+
q87AAAAAd0SU1FB9sGFBESOd4DQrgAAAAdaVRYdENvbW1lbnQAAAAAAENyZWF0ZWQgd2l0a
CBHSU1QZC5lBwAAACxJREFUCNdtjEEKADAMwsT//
7hodhuD9SAJBNTMGHDby9eTWJKTfG3b9gEYOC7iTaKZLXJDAAAAAElFTkSuQmCC) no-repeat right bottom; 
border-style:none; margin:0!important; padding:5px 3px 1px 3px!important; height:22px;}
 
#preftoc li.selected {font-weight:400; background:#fbfbfb url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIj
AAAAAXNSR0IArs4c6QAAAAlwSFlzAAAOnAAADusBZ+
q87AAAAAd0SU1FB9sGFBESOd4DQrgAAAAdaVRYdENvbW1lbnQAAAAAAENyZWF0ZWQgd2l0aCBHSU1QZC5lBwAAACxJREFUCNdtjEEKADAMwsT//
7hodhuD9SAJBNTMGHDby9eTWJKTfG3b9gEYOC7iTaKZLXJDAAAAAElFTkSuQmCC) no-repeat right bottom; border-style:none;}
 
#preftoc li a {padding:2px 3px 0 3px!important; margin:0!important; color:#0645ad;}
#preftoc li a:hover {text-decoration:underline;}
#preftoc li.selected a {padding:1px 3px 0px 3px!important; color:#000;}
#preftoc li.selected a:hover {text-decoration: none;}
#preftoc > li.selected {top: 1px;}
#preftoc {background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIj
AAAAAXNSR0IArs4c6QAAAAlwSFlzAAAOnAAADusBZ+
q87AAAAAd0SU1FB9sGFBESOd4DQrgAAAAdaVRYdENvbW1lbnQAAAAAAENyZWF0ZWQgd2l0aCBHSU1QZC5lBwAAACxJREFUCNdtjEEKADAMwsT//
7hodhuD9SAJBNTMGHDby9eTWJKTfG3b9gEYOC7iTaKZLXJDAAAAAElFTkSuQmCC) no-repeat left bottom; height:28px; padding-left:1px;}
 
/--Preferences content, field sets in general--*/

#preferences fieldset {width:98%;}
fieldset {border-width:1px 0 1px 0!important; border-color:#ccc!important;}
fieldset legend {color: #555; font-weight:normal !important;}
 
#preferences {border-color: #ccc; background: #fafafa !important;}
.htmlform-tip {font-size: smaller; color: #777;}
 
/*--End Preference Mods--*/

Spare padding

This is the final step to getting everything settled. Cactions may end up in the wrong spots if this is not applied.


/*--Spare padding--*/
 
#column-one {padding-left:7px; width:147px;}
#p-logo a {margin-left:7px;}
#content {margin-left:176px!important; padding:1.8em!important;}
#p-cactions .pBody {margin-left:176px!important; margin-right:252px!important;}
#p-search {right:16px;}
#firstHeading {margin-top:9px;}
#p-personal {top:.3em;}
 
/*--End spare paddings--*/
Community content is available under CC-BY-SA unless otherwise noted.