User blog:Monchoman45/Improving your interface with CSS/JS

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.

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') { $('Hide ').insertAfter('.UserProfileActionButton'); $('Show ').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  doesn't affect Oasis? There's a fix for that. Add this code to the top of  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  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  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('AjaxRC/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  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('Recent Changes'); } 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 = ' Expand <--> '; 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(' Compress >--< '); }

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(' Expand <--> '); }

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('MonobookVector</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.