This is a blog serves to list CSS and JS modifications for improving your wiki experience. The point of this is that anyone can take a code off of this page, and implement it. You don't need to know anything about CSS or JS, or programming in general. If you have any problems with anything here, you can ask whoever provided the code, or you can ask me.
| A guide to using code pages |
|---|
|
Latest stuff[]
Here's a few customizations for the new user profiles.
By Rappy 4187[]
CSS code. Personal use only.
Makes profiles look more or less the way they were before.
/* Restoring old profile look */
.WikiaUserPagesHeader {
background: transparent !important;
}
.UserProfileMasthead {
min-height: 165px;
}
.UserProfileMasthead .masthead-info {
background: transparent;
-moz-box-shadow: none;
}
.UserProfileMasthead .masthead-info h1 {
font-size: 24px;
line-height: 26px;
}
.UserProfileMasthead .masthead-info hgroup {
background: transparent !important;
color: black;
overflow: visible;
height: auto;
padding: 8px;
}
.UserProfileMasthead .masthead-info > div {
padding: 5px 8px;
}
.UserProfileMasthead .tally {
margin-bottom: 0;
}
.masthead-info li.zero { display: none; }
.WikiaUserPagesHeader .tabs {
border-bottom: medium none;
padding-left: 5px;
}
.WikiaUserPagesHeader .tabs .selected {
-moz-box-shadow: -3px 7px 7px 0 #4E4E4E;
}
.tabs li a {
-moz-border-radius-topleft: 5px !important;
-moz-border-radius-topright: 5px !important;
}
.UserProfileMasthead .masthead-info:before {
border: none !important;
}
.UserProfileMasthead .masthead-avatar {
line-height: 148px;
text-align: center;
}
.UserProfileMasthead .masthead-avatar .avatar {
vertical-align: middle;
}
.UserProfileMasthead .masthead-avatar:hover span {
display: block;
line-height: 16px;
text-align: right;
}
By TK-999[]
CSS code. Personal use only.
Restyles the masthead.
.UserProfileRailModule_TopWikis,
.last-action,
.WikiaActivityModule.module.UserProfileRailModule_RecentActivity,
.module.AchievementsModule.UserProfileAchievementsModule,
.module.UserProfileRailModule_TopPages,
.links,
.details {display:none !important;}
.masthead-info {
width:500px;
}
.masthead-info hgroup:first-of-type {
height:30px;
width:450px;
}
JS code. Personal use only.
Adds a button for collapsing the header.
if (wgCanonicalNamespace == 'User' || wgCanonicalNamespace == 'User_talk') {
$('<span class="button" onclick="hideBar()">Hide</span>').insertAfter('.UserProfileActionButton');
$('<span class="button" onclick="showBar()">Show</span>').insertAfter('.UserProfileActionButton');
}
function hideBar() {
$('#UserProfileMasthead').hide();
}
function showBar() {
$('#UserProfileMasthead').show();
}
By Monchoman45[]
CSS code. Personal use only.
Compress the header significantly and remove facebook/twitter/website links.
/* profiles header */
.UserProfileActionButton {margin-right:10px;}
.UserProfileMasthead .masthead-avatar {width:100px; left:10px;}
.UserProfileMasthead .masthead-avatar .avatar {max-width:100px;}
.UserProfileMasthead .masthead-info {margin-left:110px;}
.UserProfileMasthead .masthead-info::before {content:none;}
.UserProfileMasthead .masthead-info > div {padding:10px 15px;}
.UserProfileMasthead .masthead-info hgroup {height:inherit;}
.UserProfileMasthead .links, .UserProfileMasthead hgroup h2 {display:none;}
.UserProfileMasthead .masthead-info hgroup h1 {
font-size:25px;
line-height:25px;
}
.UserProfileMasthead .wikis {
position:absolute;
bottom:0;
}
.UserProfileMasthead .wikis span:after {content:":";}
.UserProfileMasthead .wikis span,
.UserProfileMasthead .wikis ul {width:auto;}
.UserProfileMasthead .wikis li {
display:inline;
margin-left:10px;
}
.UserProfileMasthead .details {
position:absolute;
top:50px;
width:auto;
margin-right:10px;
margin-left:-50px;
}
.UserProfileMasthead .details li {
display:inline;
margin-left:10px;
white-space:nowrap;
}
Classics[]
Code that's stood the test of time, is often requested, or is something that's totally cool.
Common.css[]
CSS code.
Did you know that MediaWiki:Common.css doesn't affect Oasis? There's a fix for that. Add this code to the top of MediaWiki:Wikia.css on your wiki, and change "YOURWIKI" in the URL to your wiki:
/* import Common.css so it serves its function */
@import url("http://YOURWIKI.wikia.com/index.php?title=MediaWiki:Common.css&usemsgcache=yes&ctype=text/css&smaxage=86400&action=raw&maxage=86400");
Code from Ciencia Al Poder on Forum:Common.css.
Wide tables[]
CSS code.
Those expansion buttons that truncate wide tables can be pretty annoying. You can disable them with the following CSS.
/* show large tables normally */
.WikiaWideTablesWrapper canvas {display:none;}
.WikiaWideTablesWrapper img.sprite.popout {display:none;}
.WikiaWideTablesWrapper > .table {overflow:visible;}
Code from Monchoman45 on Forum:Large tables.
Image attribution[]
CSS code.
The "added by ..." text underneath pictures with |thumb is a licensing violation. You can remove that with this CSS.
/* remove image attribution */
.WikiaArticle .picture-attribution {display:none;}
Code from Sovq on Forum:Remove "Added by..." under photos.
Blog comment highlights[]
CSS code.
Staff have comment highlighting here on central. You can adapt that for use in highlighting admin comments on your wiki with this CSS. Note that this only highlights one person, you need to use it multiple times to highlight multiple people.
.comments li[data-user="USERNAME"] blockquote {
background:#COLOR !important;
}
.comments li[data-user="USERNAME"] blockquote:after {
border-color:transparent #COLOR #COLOR transparent !important;
}
.comments li[data-user="USERNAME"] blockquote div {
background:transparent !important;
}
Code from MediaWiki:Wikia.css. Not sure if staff got it from someone else.
Left-align the side rail[]
CSS Code. Personal use only.
Some people like their tools on the left. This CSS will put the sidebar on the left side, instead of the right.
/* left align the side rail */
.WikiaRail {float:left !important; padding-right:0px !important;}
.WikiaMainContent {float:right !important; padding-right: 10px;}
.oasis-one-column .WikiaMainContent {float:right !important; padding-right:0 !important;}
Code from Monchoman45 on Forum:Layout changed.
Collapsible tables[]
JS code.
Using this, you can add class="mw-collapsible" to your tables that will allow you to hide them.
importScriptPage('ShowHide/code.js', 'dev');
Code from ShowHide on Dev wiki.
Automatically refreshing RecentChanges[]
JS code.
This will refresh your RecentChanges automatically, for maximum stalking ability.
importScriptPage('AjaxRC/code.js', 'dev');
Code from AjaxRC on Dev wiki.
Countdown timer[]
JS code.
This will let you use countdown timers on your wiki, following the syntax described here.
importScriptPage('Countdown/code.js', 'dev');
Code from Countdown on Dev wiki.
Chat hacks[]
JS code. Personal use only.
This will enable some chat improvements, such as pings. It also comes with a set of commands, which you can see a list of by typing /help in chat.
importScriptPage('User:Monchoman45/ChatHacks.js', 'c');
Code from User:Monchoman45/ChatHacks.js.
Change Wiki Activity to Recent Changes[]
JS code. Personal use only.
Experienced Wiki users might prefer Recent Changes over Wiki Activity. To change your Wiki Activity button to Recent changes, add this to your global.js:
/* change wiki activity to recent changes */
function WikiActivity2RecentChanges() {
$('.wikia-button[data-id$="wikiactivity"]').replaceWith('<a data-id="recentchanges" class="wikia-button secondary" accesskey="g" title="Special:RecentChanges" href="/wiki/Special:RecentChanges"><img height="0" width="0" class="sprite activity" src="http://images1.wikia.nocookie.net/common/skins/common/blank.gif">Recent Changes</a>');
}
addOnloadHook(WikiActivity2RecentChanges);
Code from Fandyllic on Forum:Make your Wiki Activity button say and do Recent Changes.
Fully expand content[]
JS code. Personal use only.
Isn't it kind of annoying that the content area is so small? This JS will create a button that lets you expand it. You can click the button again to show the rail, and return the content to its normal width.
/* add a button that increases the content size and hides the rail */
function CreateContentResizeButton() {
var contentWidth = $('#WikiaMainContent').width();
var catlinksWidth = $('#catlinks').width();
var html = '<ul class="wikia-menu-button" id="resizeButton" style="margin-left:10px"><a onclick="ExpandContent(' + contentWidth + ', ' + catlinksWidth + ');" data-id="resizeButton" style="color:#fff;" title="Expands the content area. Note that this will hide the side rail."> Expand <--> </a></ul>';
if(contentWidth < 1000) {
if($('#WikiHeader .wikia-menu-button').length > 0) {$('#WikiHeader .wikia-menu-button').after(html);}
if($('#WikiHeader .wikia-button').length > 0) {$('#WikiHeader .wikia-button').after(html);}
if($('#WikiHeader .view-source').length > 0) {$('#WikiHeader .view-source').after(html);}
if(wgCanonicalNamespace == 'User_blog') {$('#WikiaUserPagesHeader .wikia-button').after(html);}
}
}
addOnloadHook(CreateContentResizeButton);
function ExpandContent(contentWidth, catlinksWidth) {
document.getElementById('WikiaMainContent').style.width = '1000px';
document.getElementById('catlinks').style.width = '1000px';
document.getElementById('WikiaRail').style.display = 'none';
$('#resizeButton a').replaceWith('<a onclick="CompressContent(' + contentWidth + ', ' + catlinksWidth + ');" data-id="resizeButton" style="color:#fff;" title="Compress the content area back to its original width, and restore the side rail."> Compress >--< </a>');
}
function CompressContent(contentWidth, catlinksWidth) {
document.getElementById('WikiaMainContent').style.width = contentWidth;
document.getElementById('catlinks').style.width = catlinksWidth;
document.getElementById('WikiaRail').style.display = 'block';
$('#resizeButton a').replaceWith('<a onclick="ExpandContent(' + contentWidth + ', ' + catlinksWidth + ');" data-id="resizeButton" style="color:#fff;" title="Expands the content area. Note that this will hide the side rail."> Expand <--> </a>');
}
Code from Monchoman45 on Forum:Increase content area width.
Buttons for changing your skin[]
JS code.
If you're one of those people who switches between Oasis and Monobook frequently, you probably hate going to preferences to change your skin. This JS puts buttons for changing your view on a page in the header. They don't change your preferences, but they do temporarily change the view.
/* skin change buttons */
function CreateSkinChangeButtons() {
//Oasis buttons
$('div.buttons a:first-child').before('<a style="margin:0 3px 3px 0" href="/index.php?title='+ encodeURIComponent(wgPageName) +'&useskin=monobook" title="Change to Monobook" accesskey="b" class="wikia-button secondary" id="skinChangeButton" data-id="monobookbutton">Monobook</a><a style="margin:0 42px 3px 0" href="/index.php?title='+ encodeURIComponent(wgPageName) +'&useskin=vector" title="Change to Vector" accesskey="v" class="wikia-button secondary" id="skinChangeButton" data-id="vectorbutton">Vector</a>');
//Monobook buttons
$('#p-cactions .pBody ul li:nth-last-child(1)').after('<li id="ca-nstab-main" class="skinChangeTab" style="margin:0 3px 0 36px"><a href="/index.php?title='+ encodeURIComponent(wgPageName) +'&useskin=wikia" title="Change to Oasis [o]" id="skinChangeButton" accesskey="o">Oasis</a></li><li id="ca-nstab-main" class="skinChangeTab"><a href="/index.php?title='+ encodeURIComponent(wgPageName) +'&useskin=vector" title="Change to Vector [v]" id="skinChangeButton" accesskey="o">Vector</a></li>');
}
addOnloadHook(CreateSkinChangeButtons);
Code from Monchoman45 on Forum:Vector skin and MediaWiki 1.16.
Remove image popups[]
JS code. Personal use only.
Image popups are a nuisance if you just want to go to the file page. This'll fix that.
/* kill image popups */
window.wgEnableImageLightboxExt = false;
function changeimagelinks() {
$('#WikiaArticle, .LatestPhotosModule, #article-comments').unbind('click.lightbox');
var a = document.getElementsByTagName('a');
for(var t = 0; t < a.length; ++t) {
var a2 = a[t];
var img = a2.getElementsByTagName('img');
if(img[0] != null) {
if (a2.href.indexOf('images.wikia.com') != -1) {
var link = wgServer + '/wiki/File:' + a2.href.substring(a2.href.lastIndexOf('/') + 1);
a2.setAttribute('href',link);
}
}
}
}
addOnloadHook(changeimagelinks);
Code from Rappy 4187 on Forum:Image pop-ups.
Add a clock to the header[]
JS code.
If you don't run on UTC time, figuring out when something happened with the Wikia timestamps can be a pain. This JS will add a clock to the header in Oasis and Monobook.
// ============================================================
// displayTimer
// ============================================================
//Add a clock to the WikiHeader
//Modified from work by Patrick Westerhoff [poke]:
//http://bulbapedia.bulbagarden.net/wiki/MediaWiki:Monobook.js
hookEvent( 'load', displayTimer );
function displayTimer ()
{
if ( typeof( timerDisplay ) !== 'undefined' && timerDisplay === false )
return;
var date;
if (skin == 'oasis')
{
var timerParent = document.getElementById( 'WikiHeader' ).getElementsByTagName( 'div' )[0];
}
if (skin == 'monobook')
{
var timerParent = document.getElementById( 'p-personal' ).getElementsByTagName( 'ul' )[0];
}
var timerLink = document.createElement( 'a' );
var timerObj = document.createElement( 'li' );
timerLink.href = '/wiki/' + wgPageName + '?action=purge';
timerLink.title = 'Purge the server cache and update the contents of this page.'
timerObj.id = 'displayTimer';
timerObj.style.textTransform = 'none';
timerObj.style.fontWeight = 'bold';
timerObj.style.fontSize = '100%';
timerObj.appendChild( timerLink );
timerParent.insertBefore( timerObj, timerParent.firstChild );
if (skin == 'oasis')
{
$('#displayTimer').css({'position': "inherit", 'right': "0px", 'top': "-28px"});
}
var month = new Array(12);
month[0] = "Jan";
month[1] = "Feb";
month[2] = "Mar";
month[3] = "Apr";
month[4] = "May";
month[5] = "Jun";
month[6] = "Jul";
month[7] = "Aug";
month[8] = "Sep";
month[9] = "Oct";
month[10] = "Nov";
month[11] = "Dec";
function actualizeUTC ()
{
timerDate = new Date();
timerLink.innerHTML = ( timerDate.getUTCDate() < 10 ? '0' : '' ) + timerDate.getUTCDate() + ' '
+ ( timerDate.getUTCMonth() < 10 ? '' : '' ) + month[timerDate.getUTCMonth()] + ' '
+ ( timerDate.getUTCFullYear() < 10 ? '0' : '' ) + timerDate.getUTCFullYear() + ' '
+ ( timerDate.getUTCHours() < 10 ? '0' : '' ) + timerDate.getUTCHours() + ':'
+ ( timerDate.getUTCMinutes() < 10 ? '0' : '' ) + timerDate.getUTCMinutes() + ':'
+ ( timerDate.getUTCSeconds() < 10 ? '0' : '' ) + timerDate.getUTCSeconds() + ' (UTC)';
}
function actualizeCustom ()
{
timerDate = new Date();
timerDate.setMinutes ( timerDate.getMinutes() + timerDate.getTimezoneOffset() + timerTimezone * 60 );
timerLink.innerHTML = ( timerDate.getDate() < 10 ? '0' : '' ) + timerDate.getDate() + ' '
+ ( timerDate.getMonth() < 10 ? '' : '' ) + month[timerDate.getMonth()] + ' '
+ ( timerDate.getFullYear() < 10 ? '0' : '' ) + timerDate.getFullYear() + ' '
+ ( timerDate.getHours() < 10 ? '0' : '' ) + timerDate.getHours() + ':'
+ ( timerDate.getMinutes() < 10 ? '0' : '' ) + timerDate.getMinutes() + ':'
+ ( timerDate.getSeconds() < 10 ? '0' : '' ) + timerDate.getSeconds()
+ ' (UTC' + ( timerTimezone < 0 ? '' : '+' ) + timerTimezone + ')';
}
// start
if ( typeof( timerTimezone ) !== 'number' )
{
actualizeUTC();
setInterval( actualizeUTC, 1000 );
}
else
{
actualizeCustom();
setInterval( actualizeCustom, 1000 );
}
}
Code from Bulbapedia on Monobook.js.
That's it[]
Thanks for reading, and Happy Wiki-ing! If you have any questions, concerns, or problems with any of the code, you can ask me or whoever the code came from.