HowTo:Reskin Uncyclopedia
Uncyclopedia has a long history of modifying our Main Page and/or site logo. These modifications are called reskins. In this guide you will be learning the necessary skills to undertake the creation of a reskin of your own, with the super good magical powers of Uncyclopedia! While many reskins are created around holidays, not all reskins need to be on a specific date, they can be saved for a rainy day when things are going particularly slow, like ROT13.
For examples of past reskins visit the reskin archive.
Step One: Decide On A Theme[edit | edit source]
The starting point of every reskin is deciding on a theme. Every part of the reskin should be designed to compliment your theme: there are boxes on the regular Main Page that display featured content, but when you make a reskin you can change those boxes so the content matches the theme. For example, the theme of the Winter 2020 reskin was a potato holiday, so the entire Main Page was designed around potatoes.
Step Two: Super Good Magical Powers[edit | edit source]
Create your reskin in your userspace. You don't have to make it from scratch, unless you want to make something truly unique: the easiest way to get started is by simply visiting the Main Page and copy-pasting the source code, or the source code of a past reskin. No matter which route you choose, knowledge of CSS is required, as the current Main Page uses CSS styling.
Step Three: The Fun Part[edit | edit source]
There's not much left to do now, just edit away! Enlisting collaborators will make the process easier and more fun, with an outcome the will reflect the structure of the original Uncyclopedia Main Page. Later, when you're finished, consider moving your reskin to the Babel: namespace. Before you can actually put it on the front page, you have to ask an administrator because they are the only ones who can edit the front page and/or the site logo.
Congratulations you've completed a reskin!
How it All Works[edit | edit source]
NOTE: The next section of this HowTo is for advanced users. If you didn't understand the instructions above, then don't bother reading this bit.
On AAAAAAAA day, Uncyclopedia saw its first ever CSS reskin. You probably didn't notice much of a change, but there was one. Splarka used a little JavaScript hack to change the logo to this for the day by using this handy bit of JavaScript:
if((document.title.indexOf("AAAAAAAAA!") == 0)||(document.title.indexOf("Babel:Aa - ") == 0)) {
document.write('<style type="text/css">/*<![CDATA[*/ @import "/index.php?title=User:Splaka/aaaa.css&action=raw&ctype=text/css"; /*]]>*/</style>');
}
and this:
(
function()
{
var xPathResult = document.evaluate (
'.//text()[normalize-space(.) != ""]',
document.body,
null,
XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
null
);
var textNode;
for (var i = 0, l = xPathResult.snapshotLength; i < l; i++)
{
textNode = xPathResult.snapshotItem(i);
textNode.data = textNode.data.replace(/[a-zA-Z0-9]/g, 'A');
}
}
)()
;
When {{Aa:}} was put on the main page (when admins reskin the main page, they don't use the source code of the reskin, they use it like a template), the Main Page started using aaaa.css (now a redlink) in addition to Monobook.css (Uncyclopedia.css since the MediaWiki 1.5 upgrade).
Other good examples of reskins for anniversaries are, Plain Text Day and Nintendorulez's unbanning.
Now, the system has changed. Now the skin's CSS is (generally) kept at MediaWiki:Skin/Name_Space:Page_Name.css, so for the Wookieepedia reskinning, the bit in the Javascript looked like this (obviously, since then more have been added):
/* New reskin parser Instructions:
1) Add the page title and namespace exactly ("Name space:Page name") as new skin, use
spaces *NOT* underscores: ("Main Page": "", should be first line). The next parameter
is optionally an existing "MediaWiki:Skin/"-prefixed file (in which case you can skip
step 2).
2) Create MediaWiki:Skin/Name_Space:Page_Name.css and place reskin CSS content there.
*/
skin = {
"Main Page": "",
"Babel:Gbs": ""
}
var re = RegExp("(.*) - Uncyclopedia");
var matches = re.exec(document.title);
var skinName;
if (matches) {
if (skin[matches[1]] != undefined) {
skinName = (skin[matches[1]].length > 0) ? skin[matches[1]] : matches[1] + '.css';
document.write('<style type="text/css">/*<![CDATA[*/ @import "/index.php?title=MediaWiki:Skin/' + skinName + '&action=raw&ctype=text/css"; /*]]>*/</style>');
}
}
So the CSS for the page would be at MediaWiki:Skin/Babel:Gbs.css.
This makes all site-wide css files editable only to to administrators. However, a regular user can use the above code to build a .css for a reskin in their userspace. For example:
if(document.title.indexOf("User:You/Blah") == 0) {
document.write('<style type="text/css">/*<![CDATA[*/ @import "/index.php?title=User:You/blah.css&action=raw&ctype=text/css"; /*]]>*/</style>');
}
Then you simply need to create User:You/Blah and User:You/blah.css with the appropriate code. Once complete you can ask an administrator to apply it (by copying it to MediaWiki:Skin/pagename.css) to all users for that one page.
Links[edit | edit source]
