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

This is a blog serves to list ways you can improve your interface using CSS and JS. The point of this is that anyone can take a solution 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 solution, or you can ask me.

Please note: solutions here will be periodically updated as bug fixes are made, or to accommodate new Wikia features. All solutions have a date in a comment to represent when it was last updated.

Further note: comments to this blog aren't bolded in my recent changes, so I'll likely miss most of the comments here. If you have a question, asking on my talk page will probably yield a much quicker response.

To enable these features:
 * For CSS solutions:
 * To enable a solution just for yourself when viewing in Oasis on one wiki, put the code in  on that wiki.
 * To enable a solution just for yourself when viewing in Monobook on one wiki, put the code in  on that wiki.
 * To enable a solution just for yourself on every wiki, put the code in  here on Community Central.
 * (Admins only) To enable a solution for every user on a wiki, put the code in  on that wiki. Make sure to enable Common.css for Oasis!
 * (Admins only) To enable a solution for every user on a wiki viewing pages in Oasis, put the code in  on that wiki.
 * (Admins only) To enable a solution for every user on a wiki viewing pages in Monobook, put the code in  on that wiki.
 * For JS solutions:
 * To enable a solution just for yourself on one wiki, put the code in  on that wiki.
 * To enable a solution just for yourself when viewing in Monobook on one wiki, put the code in  on that wiki.
 * To enable a solution just for yourself on every wiki, put the code in  here on Community Central.
 * (Admins only) To enable a solution for every user on a wiki, put the code in  on that wiki.
 * (Admins only) To enable a solution for every user on a wiki viewing pages in Oasis, put the code in  on that wiki.
 * (Admins only) To enable a solution for every user on a wiki viewing pages in Monobook, put the code in  on that wiki.
 * For Hybrid solutions:
 * To enable a solution just for yourself on one wiki, put the code in  and   on that wiki.
 * To enable a solution just for yourself when viewing in Monobook on one wiki, put the code in  and   on that wiki.
 * To enable a solution just for yourself on every wiki, put the code in  and   here on Community Central.
 * (Admins only) To enable a solution for every user on a wiki, put the code in  and   on that wiki. Make sure to enable Common.css for Oasis!
 * (Admins only) To enable a solution for every user on a wiki viewing pages in Oasis, put the code in  and   on that wiki.
 * (Admins only) To enable a solution for every user on a wiki viewing pages in Monobook, put the code in  and   on that wiki.
 * For Personal only solutions:
 * To enable a solution on one wiki, put the code in  or   on that wiki.
 * To enable a solution on every wiki, put the code in  or   here on Community Central.
 * Personal only solutions cannot be enabled for every user on a wiki (wiki-wide), because they would violate the ToU.

Common.css
CSS solution. - Updated 2/1/11.

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 - 2/1/11 */ @import url("http://YOURWIKI.wikia.com/index.php?title=MediaWiki:Common.css&usemsgcache=yes&ctype=text/css&smaxage=86400&action=raw&maxage=86400");

Solution from Ciencia Al Poder on Forum:Common.css.

"Read more" headings
CSS solution. - Updated 2/1/11.

Don't like those annoying "Read more" headings at the bottom of your pages? You can disable them using the following CSS code.

/* remove related pages area - 2/1/11 */ .RelatedPagesModule {display:none;}

Solution from Sovq on Forum:Category and Related Article Image Sources.

Category galleries
CSS solution. - Updated 2/1/11.

Those category galleries can be a pain. This CSS will remove them.

/* remove category galleries - 2/1/11 */ .category-gallery {display:none;}

Solution from ??? on ???. I honestly can't remember where I first saw this, but I know it works. If anyone can find a source, that'd be great!

Wide tables
CSS solution. - Updated 2/1/11.

Those expansion buttons that truncate wide tables can be pretty annoying. You can disable them with the following CSS.

/* show large tables normally - 2/1/11 */ .WikiaWideTablesWrapper canvas {display:none;} .WikiaWideTablesWrapper img.sprite.popout {display:none;} .WikiaWideTablesWrapper > .table {overflow:visible;}

Solution from Monchoman45 on Forum:Large tables.

Customizing
If you want to show wide tables but also have the expansion button available, you can remove.

Image attribution
CSS solution. - Updated 2/1/11.

Some people dislike the "added by ..." text underneath pictures with. You can remove that with this CSS.

/* remove image attribution - 2/1/11 */ .WikiaArticle .picture-attribution {display:none;}

Solution from Sovq on Forum:Remove "Added by..." under photos.

Right-align the toolbar links
CSS solution. - Updated 2/2/11.

Kind of annoying that Wikia decided to left align the toolbar with their new fix. Nothing is where you think it is. This CSS will right align the toolbar links. When using this code, newly added tools will go into the "more" menu until you refresh the page. After that, they will display normally.

/* Changes Wikia's new left-aligned toolbar back to right-aligned - 2/2/11 */ .WikiaFooter .toolbar .tools { float: right; }   left:  auto !important; right: 108px !important; } .tools-menu { left: auto !important; right: 188px !important; }
 * 1) my-tools-menu {

Solution from Rappy 4187 on Forum:Fix for the new left-aligned toolbar.

Left-align the side rail
CSS Solution. - Updated 3/15/11.

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 - 3/15/11 */ .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;}

Solution from Monchoman45 on Forum:Layout changed.

Contributions in user navigation
JS solution. - Updated 2/1/11.

Isn't it annoying to have to go to  every time you want to check your contribs? This JS will put a link to your contributions in your user navigation menu (next to the log out button).

/* add contribs to user menu - 2/1/11 */

function UserContribsMenuItem { $('ul.AccountNavigation li:first-child ul.subnav li:first-child').after('Contributions'); } addOnloadHook(UserContribsMenuItem);

Solution from Fandyllic on Forum:Add Contributions back to account drop menu.

History in the edit button menu
JS solution. - Updated 3/8/11.

Ever click the edit button dropdown menu looking for history, only to remember it's actually in the MyTools bar all the way at the bottom of the page? No longer. This script will put a history link in the menu under the edit button for all pages:

/* add history to the dropdown menu for pages - 3/8/11 */ function HistoryDropdownMenuItem { if ($('ul.wikia-menu-button').length === 0) { $('#WikiaPageHeader a.wikia-button').removeClass('wikia-button').wrap('').wrap(''); $('ul.wikia-menu-button').append(''); }		$('ul.wikia-menu-button ul').append('History'); } addOnloadHook(HistoryDropdownMenuItem);

Solution from Rappy 4187 and Monchoman45 on Forum:History button for User pages.

Change Wiki Activity to Recent Changes
JS solution. - Updated 2/1/11.

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 - 2/1/11 */ function WikiActivity2RecentChanges { $('a.wikia-button[data-id$="wikiactivity"]').replaceWith('Recent Changes'); } addOnloadHook(WikiActivity2RecentChanges);

Solution from Fandyllic on Forum:Make your Wiki Activity button say and do Recent Changes.

Upload photo on the main page
JS solution. - Updated 3/8/11.

/* add upload photo button to main page - 3/8/11 */ function UploadOnMainPage { $('.mainpage #WikiaPageHeader div:first').append(' <a class="uploadimage" title="Upload a new image to this wiki" href="/wiki/Special:Upload"><img height="0" width="0" class="sprite photo" src="' + wgBlankImgUrl + '"></a><a class="uploadimage" title="Special:Upload" href="/wiki/Special:Upload">Upload Image</a> '); }

addOnloadHook(UploadOnMainPage);

Solution from Rappy 4187 on User:Rappy 4187/global.js.

Fully expand content
JS solution. PERSONAL JS ONLY!! Wiki-wide use violates ToU. - Updated 2/1/11.

Isn't it kind of annoying that the content area is so small? This JS will create a button that lets you expand it. Note that doing so temporarily hides the side rail, which is a violation of the ToU if used in a wiki-wide JS file. 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 - 2/1/11 */ function CreateContentResizeButton { var headerWidth = $('header#WikiaPageHeader.WikiaPageHeader details').width; var contentWidth = $('article#WikiaMainContent.WikiaMainContent').width; var catlinksWidth = $('div#catlinks.catlinks').width; if(contentWidth < 1000) { $('section article header ul.wikia-menu-button').after('<a onclick="ExpandContent(' + headerWidth + ', ' + contentWidth + ', ' + catlinksWidth + ');" data-id="resizeButton" style="color:#fff;" title="Expands the content area. Note that this will hide the side rail."> Expand <--> </a></ul>'); $('section article header a.wikia-button').after('<a onclick="ExpandContent(' + headerWidth + ', ' + contentWidth + ', ' + catlinksWidth + ');" data-id="resizeButton" style="color:#fff;" title="Expands the content area. Note that this will hide the side rail."> Expand <--> </a></ul>'); $('section article header a.view-source').after('<a onclick="ExpandContent(' + headerWidth + ', ' + 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(wgCanonicalNamespace == 'User_blog') { $('section article div#WikiaUserPagesHeader a.wikia-button').after('<a onclick="ExpandContent(' + headerWidth + ', ' + contentWidth + ', ' + catlinksWidth + ');" data-id="resizeButton" style="color:#fff;" title="Expands the content area. Note that this will hide the side rail."> Expand <--> </a></ul>'); }	} } addOnloadHook(CreateContentResizeButton); function ExpandContent(headerWidth, contentWidth, catlinksWidth) { $('header#WikiaPageHeader.WikiaPageHeader details').css({"width": '980px'}); $('article#WikiaMainContent.WikiaMainContent').css({"width": '1000px'}); $('div#catlinks.catlinks').css({"width": '1000px'}); $('div#WikiaRail.WikiaRail').css({"display": 'none'}); $('ul#resizeButton').replaceWith('<a onclick="CompressContent(' + headerWidth + ', ' + 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></ul>'); }

function CompressContent(headerWidth, contentWidth, catlinksWidth) { $('header#WikiaPageHeader.WikiaPageHeader details').css({"width": headerWidth}); $('article#WikiaMainContent.WikiaMainContent').css({"width": contentWidth}); $('div#catlinks.catlinks').css({"width": catlinksWidth}); $('div#WikiaRail.WikiaRail').css({"display": 'block'}); $('ul#resizeButton').replaceWith('<a onclick="ExpandContent(' + headerWidth + ', ' + contentWidth + ', ' + catlinksWidth + ');" data-id="resizeButton" style="color:#fff;" title="Expands the content area. Note that this will hide the side rail."> Expand <--> </a></ul>'); }

Solution from Monchoman45 on Forum:Increase content area width.

Note: Currently working on a solution that can be implemented wiki-wide without violating the ToU.

Customizing
You can use CSS to customize this button if you want, but it will automatically change with the rest of the buttons on your wiki. To refer to this button, use.

Buttons for changing your skin
JS solution. - Updated 2/1/11.

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 - 2/1/11 */ function CreateSkinChangeButtons { //Oasis buttons $('section header 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 $('div#p-cactions.portlet div.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>'); //Vector buttons $('div#p-namespaces.vectorTabs').after(' <li id="ca-nstab-main"><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"><a href="/index.php?title='+ encodeURIComponent(wgPageName) +'&useskin=monobook" title="Change to Monobook [m]" id="skinChangeButton" accesskey="m"> Monobook </a></li></ul> '); } addOnloadHook(CreateSkinChangeButtons);

Solution from Monchoman45 on Forum:Vector skin and MediaWiki 1.16.

Note: Currently, Vector is not affected by JS on Wikia. However, this JS has been tested to work in Vector, so if Wikia ever decides to support the skin, the tabs will show up.

Customizing

 * Oasis:
 * Buttons can be referred to with  for customizing with CSS.
 * Monobook:
 * Tabs can be referred to with  for customizing with CSS.
 * Vector:
 * Tabs can be referred to with  for customizing with CSS.

Remove image popups
JS solution. - Updated 3/30/11.

Image popups are a nuisance if you just want to go to the file page. This'll fix that.

/* kill image popups - 8/1/11 */ 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);

Solution from Rappy 4187 on Forum:Image pop-ups.

Add a clock to the header
JS solution. - Updated 2/1/11.

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 - 2/1/11 // ============================================================ //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 ); } }

Solution from Bulbapedia on Monobook.js.

Customizing
The clock can be referred to with  for customizing in CSS.

Collapsible tables
JS solution. - Updated 2/1/11.

Ever wonder how people get their tables to collapse? Here's how to do that.

/** Test if an element has a certain class ************************************** * * Description: Uses regular expressions and caching for better performance. * Maintainers: User:Mike Dillon, User:R. Koot, User:SG */

var hasClass = (function {	var reCache = {};	return function (element, className) {		return (reCache[className] ? reCache[className] : (reCache[className] = new RegExp("(?:\\s|^)" + className + "(?:\\s|$)"))).test(element.className); }; });

/** Collapsible tables (From wikipedia:MediaWiki:Common.js ****************************** * * Description: Allows tables to be collapsed, showing only the header. See *               NavFrame. *  Maintainers: User:R. Koot */ var autoCollapse = 2; var collapseCaption = "hide"; var expandCaption = "show"; function collapseTable( tableIndex ) {    var Button = document.getElementById( "collapseButton" + tableIndex );    var Table = document.getElementById( "collapsibleTable" + tableIndex );    if ( !Table || !Button ) {        return false;    }    var Rows = Table.rows;    if ( Button.firstChild.data == collapseCaption ) {        for ( var i = 1; i < Rows.length; i++ ) {            Rows[i].style.display = "none";        }        Button.firstChild.data = expandCaption;    } else {        for ( var i = 1; i < Rows.length; i++ ) {            Rows[i].style.display = Rows[0].style.display; }       Button.firstChild.data = collapseCaption; } } function createCollapseButtons {   var tableIndex = 0; var NavigationBoxes = new Object; var Tables = document.getElementsByTagName( "table" ); for ( var i = 0; i < Tables.length; i++ ) { if ( hasClass( Tables[i], "collapsible" ) ) { /* only add button and increment count if there is a header row to work with */ var HeaderRow = Tables[i].getElementsByTagName( "tr" )[0]; if (!HeaderRow) continue; var Header = HeaderRow.getElementsByTagName( "th" )[0]; if (!Header) continue; NavigationBoxes[ tableIndex ] = Tables[i]; Tables[i].setAttribute( "id", "collapsibleTable" + tableIndex ); var Button    = document.createElement( "span" ); var ButtonLink = document.createElement( "a" ); var ButtonText = document.createTextNode( collapseCaption ); Button.className = "collapseButton"; //Styles are declared in Common.css ButtonLink.style.color = Header.style.color; ButtonLink.setAttribute( "id", "collapseButton" + tableIndex ); addHandler( ButtonLink, "click", new Function( "evt", "collapseTable(" + tableIndex + " ); return killEvt( evt );") ); ButtonLink.appendChild( ButtonText ); Button.appendChild( document.createTextNode( "[" ) ); Button.appendChild( ButtonLink ); Button.appendChild( document.createTextNode( "]" ) ); Header.insertBefore( Button, Header.childNodes[0] ); tableIndex++; }   }    for ( var i = 0;  i < tableIndex; i++ ) { if ( hasClass( NavigationBoxes[i], "collapsed" ) || ( tableIndex >= autoCollapse && hasClass( NavigationBoxes[i], "autocollapse" ) ) ) { collapseTable( i ); }        else if ( hasClass( NavigationBoxes[i], "innercollapse" ) ) { var element = NavigationBoxes[i]; while (element = element.parentNode) { if ( hasClass( element, "outercollapse" ) ) { collapseTable ( i ); break; }           }        }    } } addOnloadHook( createCollapseButtons );

This solution is considered "public knowledge". It's been on Wikipedia for a while.

Shrink the side rail
Hybrid solution. PERSONAL FILES ONLY!! Wiki-wide use violates ToU. - Updated 2/1/11.

That side rail is really pretty fat - it could stand to lose a few pounds. This CSS and JS code will shrink the rail by 33%, and increase the content width to fill the new space. It also removes some button text, which probably violates the ToU, so personal code only.

CSS code: /* shrink the side rail - 2/1/11 */ .WikiaSpotlight {width:195px !important;} .WikiaRail .module p {line-height:15px !important;} .WikiaSpotlight {width:195px !important;} section.WikiaPagesOnWikiModule.module {width:200px; padding-top:10px;} .tally em {font-size:20pt;} section.WikiaActivityModule.module {width:200px;} section.LatestPhotosModule.module {width:200px;} section.WikiaBlogListingBox.module {width:200px;} section.LatestPhotosModule .carousel-container {width:171px; height:68px; margin-top:25px;} section.LatestPhotosModule ul li img {width:54px; height:56px;} section.LatestPhotosModule ul li a {width:54px; height:56px;} section.LatestPhotosModule ul .see-all a {padding-top:10px; font-size:11px; width:54px;} section.LatestPhotosModule ul .add-more a {padding-top:10px; font-size:11px; width:54px;} section.LatestPhotosModule ul li {width:53px; height:55px;} .LatestPhotosModule .wikia-button {margin-top:20px;} .tally span.fixedwidth {text-align:center; margin-top:5px; font-size:10px; margin-left:2px; width:62px;} section#WikiaSpotlightsModule.module {width:194px;} div#WikiaRail section a.wikia-button {width:62px; font-size:11px;} .LatestPhotosModule .empty-photos a {margin-top:-30px; margin-left:45px; margin-right:-45px;}
 * 1) WikiaSpotlightsModule ul li .highlight img {width:70px !important;}
 * 2) WikiaSpotlightsModule ul li .highlight img {height:70px !important;}
 * 1) WikiaSpotlightsModule ul li em {font-size:11px !important;}
 * 2) WikiaSpotlightsModule ul li p {font-size:11px !important;}
 * 3) WikiaSpotlightsModule ul li a {font-size:11px !important;}
 * 1) WikiaSpotlightsModule ul li .highlight img {width:70px !important;}
 * 2) WikiaSpotlightsModule ul li .highlight img {height:70px !important;}
 * 1) WikiaSpotlightsModule .WikiaSpotlight {margin-top:10px; margin-bottom:10px;}

JS code: /* shrink the side rail to add content space when rail is present - 2/1/11 */ /* only works with proper css - see Forum:Why not get rid of the right sidebar altogether? */ function ShrinkRail { if( $('article#WikiaMainContent.WikiaMainContent').width < 1000 ) { $('header#WikiaPageHeader.WikiaPageHeader details').css({"width": '750px'}); $('article#WikiaMainContent.WikiaMainContent').css({"width": '760px'}); $('div#catlinks.catlinks').css({"width": '718px'}); $('div#WikiaRail.WikiaRail').css({"width": '220px'}); $('form#WikiaSearch').css({"width": '218px'}); $('form#WikiaSearch input[type="text"]').css({"width": '210px'}); $('div#WikiaRail a.wikia-button.upphotos').replaceWith('<a href="/wiki/Special:Upload" title="Add a Photo" class="wikia-button upphotos" style="width:30px; margin-top:0;"> <img src="http://images1.wikia.nocookie.net/__cb32790/common/skins/common/blank.gif" height="0" width="0" class="sprite photo" style="margin:0;"> </a>'); $('div#WikiaRail a.wikia-button.createpage').replaceWith('<a href="/wiki/Special:CreatePage" title="Create a new page on this wiki" class="wikia-button createpage" style="width:25px; margin-top:0;"> <img src="http://images1.wikia.nocookie.net/__cb32790/common/skins/common/blank.gif" height="0" width="0" class="sprite new" style="margin:0;"> </a>'); $('div#WikiaRail a.wikia-button[href="/wiki/Special:CreateBlogPage"]').replaceWith('<a href="/wiki/Special:CreateBlogPage" title="Create blog post" class="wikia-button" style="width:25px"><img src="http://images1.wikia.nocookie.net/__cb32790/common/skins/common/blank.gif" height="0" width="0" class="sprite blog" style="margin-left:4px;"></a>'); } } addOnloadHook(ShrinkRail);

Solution from Monchoman45 on Forum:Why not get rid of the right sidebar altogether?

That's it
Thanks for reading, and Happy Wiki-ing! If you have any questions, concerns, or problems with any of these solutions, you can ask me or whoever the solution came from.