User blog:Godisme/Improving your Wiki experience with some CSS and JS

Hey everyone, I was helping out some people earlier with some CSS and JS and I figured I would write a blog about this. Now that we disabled the Rich Text Editor here, a lot of scripts could come in handy for many of you. Below you will find an assortment of scripts that you may find helpful in your daily editing.

CSS, JS, Local and Global
The first thing you need to know about these is what css and js are. CSS, an abbreviation for cascading style sheets, is a set of codes that changes the layout and look of a webpage. CSS defines color, whether or not something looks rounded, is transparent or anything like that. If you use Chrome or have the Firebug extension for Firefox, right clicking on anything and hitting inspect element will show you the css classes that go into making up your webpage.

JS, short for Javascript, is a coding language used mainly on the internet. JS allows you to add or change functionality. Anything from changing where a button leads to changing the entire interface is possible with JS.

With CSS and JS, you also have different pages where you can place it. There are six main pages where CSS and JS can be placed.


 * Wikia.css is your own local css for the wikia or main skin. Anything you place there will only affect this wiki.
 * Monobook.css is your own local css for the monobook skin. Like above, it only affects this wiki.
 * Global.css is your global css file. Any css placed here will affect you on any wiki you go to and will affect both skins.

The same holds true for the js pages. Just replace .css with .js

Now that you understand that, its time for the actual scripts.

=JS=

Auto Refresh
If you are like me, you like to see what is happening on the wiki. I can't be bothered to actually refresh my page every time I want to see what is going on. That is where this script comes in handy. AjaxRC is a js script that will automatically refresh selected pages on a set interval.

How to use
AjaxRC is neatly bundled up for you at the Wikia Developer's wiki. To use it place the following in one of you js pages. For me, I have it in my global.js page. AjaxRCRefreshText = 'Auto-refresh'; ajaxPages = ["Special:RecentChanges","Special:Watchlist","Special:Log","Special:Contributions"]; AjaxRCRefreshHoverText = 'Automatically refresh the page'; importScriptPage('AjaxRC/code.js', 'dev'); var ajaxRefresh = 30000;

You can change the text, ajax pages and refresh time to whatever you want. Anything that is updated all the time can be automatically refreshed.

Recent Changes
For me, Recent Changes is the most important page on the wiki. I already have it set to auto refresh but I also like to make navigating to it easier. There are two js scripts to do that. Note: These are for global or wikia.js files only. It will have no effect in monobook.

How to use
This first one is what I currently use. It changes that big old worthless contribute button on pages to a recent changes button. Add the following to your js $(function { $('.WikiHeaderRestyle div.buttons nav').replaceWith('  Recent Changes '); });

Some of you may actually like the contribute button. If you do, but still want to add easier navigation to Recent Changes, you can try the following function AddRecentChanges { $('div.buttons').css({'width': '310px'}); $('a[data-id="wikiactivity"]').after('Recent Changes'); } addOnloadHook(AddRecentChanges);

That will add a recent changes button into the contribute menu.

Fixing up undo
Undoing an edit takes a lot of page loads. I have a pretty bad internet connection so that it troublesome. I have to load the diff, load the undo screen, delete the auto undo message, type in a summary and then click publish. I have two scripts to speed this up.

How to use
This first script I just got working how I wanted to thanks to Grunny, a staff member. What this will do is add a button next to the undo button that says AJAX Undo. Clicking that will undo the edit without having to load any more pages. importScriptPage( 'AjaxUndo/code.js', 'dev' );

Then, when I actually want to use an edit summary while undoing an edit, I have a script to get rid of that auto undo message that sits in the summary box function removeUndoSummary { if(window.location.href.indexOf('&undo=') != -1) {document.getElementById('wpSummary').value = '';} }	addOnloadHook(removeUndoSummary);

Chat Functionality
Chat is rather basic. It lacks many functions that could be used to make chat much easier to use. Monchoman45 wrote up a bunch of scripts to remedy that. With this script, entering chat from the sidebar button will load a bunch of scripts. The chat will open in a new tab, rather than a new window, you will get two buttons to change your status to away and to clear the chat window and a bunch of / commands like /me.

How to use
importScriptPage('User:Monchoman45/ChatHacks.js', 'community');

The main reason I use these is because it also imports all my other code into chat.

Shrink the Siderail
The wikia sidebar is gigantic. There is no reason it needs to be that big. Let's shrink it. Note: you also need the corresponding CSS listed below for this to work.

How to use
Remember, you also need the CSS 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('  '); $('div#WikiaRail a.wikia-button.createpage').replaceWith('  '); $('div#WikiaRail a.wikia-button[href="/wiki/Special:CreateBlogPage"]').replaceWith(''); } } addOnloadHook(ShrinkRail);

Image Popups
Ever notice that when you click an image, it gets larger but to actually get to the file page, you have to click twice? Yeah, I like to fix that problem.

How to use
$(function changeimagelinks {   if (window.skin == 'oasis') {        var article = $('#WikiaArticle, .LatestPhotosModule, #article-comments');    }    else {        var article = $('#bodyContent');    }    article.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);            }        }    } }); =CSS=

New Categories
In what I think is one of the worst moves wikia has ever made, they changed it so that a non existent categ evory is blue linked just like one that does exist. This makes people think that even if they misspell the category or add a made up one, they got it right. Luckily, css is you friend here.

How to use
In any of your css files, place this. .newcategory {color:#c20;}

This will return those categories back to red so you can see that it needs to be made.

Font in the editor
I really hated that when they changed the editor, they changed the font used. The old font looked much better.

How to use
CSS is here to save the day again.
 * 1) wpTextbox1 {font-family:monospace}

That returns the font back to monospace.

Hiding interface elements
There are way too many useless things on a wikia page. Here is how to hide some of the more useless ones, the likes, the random wiki and the random page buttons.

How to use
.likes { display: none; } a.wikia-button[data-id$="randompage"] { display: none; } display: none; }
 * 1) WikiaRandomWiki {

Most everything can be hidden this way.

Highlights
In order to make checking over things as fast as possible, I highlighted certain names in colors so I could easily see that it was an admin or committee member who edited something and I can look past that edit and on to another.

How to use
This will highlight all bleach wiki admins and committee members by their sig color for fast identification. Add any name you want, just follow the format. a[href="/wiki/User:Yyp"] { color:#00bb00 !important; } a[href="/wiki/User:Salubri"] { color:#00A86B !important; } a[href="/wiki/User:Arrancar109"] { color:teal !important; } a[href="/wiki/User:Nwang2011"] { color:#3B9C9C !important; } a[href="/wiki/User:Godisme"] { color:purple !important; } a[href="/wiki/User:SunXia"] { color:Goldenrod !important; } a[href="/wiki/User:Lemursrule"] { color:#00FF00 !important; }

IRC Chat
I am on IRC 24/7. I find it a much superior means of communicating than chat. I also like the formatting alot better. The code below will format chat like IRC. Note: you need to have the Chat hacks I listed above in order for these to work.

How to use
@import url("http://community.wikia.com/index.php?title=User:Godisme/Chat.css&action=raw&ctype=text/css");

That will save a ton of room in the chat, move timestamps to the left and wrap names in <>.

Shrink the Siderail Cont.
I listed above how to shrink the siderail. Here is the css needed to make it work.

How to use
.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;}

=Monobook= Most of the above code is to fix problems in the wikia skin. However, one way to fix almost all the problems with wikia is to switch to the monobook skin in Special:Preferences. I designed a monobook theme for this wiki that is very nice and there is a lot more space in the monobook skin. If you are on other wikis and they don't have a monobook theme, request one for yourself at Monobook wiki. We are happy to make monobook themes for anyone.

Well, that is all there is to that. Any of the scripts above will fix up your interface nicely and help you make Bleach Wiki the best wiki it can be. I get most of my js from Rappy or Monchoman45. I do alot of the css myself. If you would like something to improve your interface but don't see it above, feel free to ask those two or me, we are happy to help.