From its default installation, the entire site run in a skin called "Monobook". It is the most stable wiki skin design ever produced and no wonder Wikipedia hold for it until this time. Actually there's several skin available such as Chick, Classic, MySkin, Nostalgia and Simple but just like Wikipedia, the monobook is much appealing to me.
I made some CSS tweak and try to see the extent of its customization process. As I said in my previous post, the application is a bit hard to customized and you must be carefull as any parameter change can be disastrous in some ways. So, if you want to know the process I have implemented within WIkipiniana, heres the process to guide you.
First in order skin won't be overwritten and in preparation for future updates in Mediawiki you have to make new skin.
1. Make a copy of MonoBook.php under skin folder; then rename MonoBook.php to desired file name (for my example "editskin.php").
2. make a copy of monobook folder and rename it to desired name(for my example "editskin")
3. open editskin.php then replace all MonoBook strings to editskin.
4. open LocalSettings.php then reset the $wgDefaultSkin to "editskin".
5. If you want to add source display at the bottom of any text entries follow this procedure.
//following revision to not display title for main page and for the rest it will display (included also the text "From Wikipiniana, the free Philippine Encyclopedia")
under editskin.php
6. I have added an adbanner to my sister site Filipiniana.net. This is to experiment
adding javascript within the CSS and PHP page of MediaWiki.
//following revision to display the banner
under editskin.php
//right after
//right before
main.css //found in editskin folder
//add this code before the globalWrapper class
#Header {
position:absolute;
margin-top:10px;
margin-left:100px;
background-image:url(../../Wikipiniana_ad.gif);
background-repeat:no-repeat;
cursor:pointer;
width:100%;
height:100px;
}
//replace the globalWrapper class to
#globalWrapper {
font-size: 127%;
position:absolute;
margin-top:120px;
width:100%;
}
7. If you want to change the color or image of your header, this can also be done thru the editskin.php. So to change the upper background simply copy paste new headbg.jpg in editskin folder
8. Since, I have allocated a header space inside a monobook skin, I want to create a rotating banner. This space can also be transformed into an ad banner in case you want to monitize your wiki site. But this time I'de like to rotate banner ad for Wiki.
//following revision to display looping banner (assuming you have done the display
for one already) under editskin.php
//change entire script
//to
//change from
//to
//then clear out the entire tag and change to
main.css //found in editskin folder
//change this code from
#Header {
position:absolute;
margin-top:10px;
margin-left:100px;
background-image:url(../../Wikipiniana_ad.gif);
background-repeat:no-repeat;
cursor:pointer;
width:100%;
height:100px;
}
//to
#Header1 {
position:absolute;
margin-top:10px;
background-position:center;
background-image:url(../../Wikipiniana_ad.gif);
background-repeat:no-repeat;
cursor:pointer;
width:100%;
height:100px;
}
//add following code right after the code above
#Header2 {
position:absolute;
margin-top:10px;
background-position:center;
background-image:url(../../828663-lg.jpg);
background-repeat:no-repeat;
cursor:pointer;
width:100%;
height:100px;
}
9. Adding adbox at the left side of the navigational bar
//adding advertisement box
under editskin.php
//copy these codes
//add the following codes inside the tag
function adv()
{
window.location="http://www.google.com";
}
main.css //found in editskin folder
//add these codes
#advertise {
position:absolute;
background-position:left;
background-image:url(../../Wiki_volunteers.png);
background-repeat:no-repeat;
border-collapse: collapse;
border: 1px solid #aaa;
padding: 0 .8em .3em .5em;
cursor:pointer;
width:128.5px;
height:128.5px;
}10. If you successfully done with these initial steps with me. It would be easy for you to start new revisions to your skin in the future.
RSS Feed (xml)
