Community Central

READ MORE

Community Central
Don't have an account?
Register
Register
Community Central
Community Central
37,725
pages

User:Dantman/Tricks

< User:Dantman
Edit

Article[]

CSS[]

These apply to pages such as:

Include other CSS files[]

This one is quite a simple thing to do. But it's overlooked by people. If you want another CSS file included into the current one then just use: 

@import "/index.php?title=PAGENAME&action=raw&ctype=text/css";

or 

@import "/index.php?title=PAGENAME&action=raw&ctype=text/css&templates=expand";

Where PAGENAME is the name of the page you want to include. Note that this will include a page from the local wikia you are on. If you want to include from another wikia place http:// and it's domain before the /index.php. See #Reduce your includes while splitting the code for information on the second one.

This is very handy when you are doing a project which spans multiple Wikia such as the Wikia Anime Project or you just want to include your own user .css to work across multiple wikia.

Note that some browsers don't like it when you have a @import inside of another @import. So if you're doing this on an actual project then it's good to use this method and the one at #Include other CSS files using JS at the same time to support more browsers.

JS[]

These apply to pages such as:

Include other JS files[]

I didn't exactly come up with this one but I didn't know about this before other people showed me it. So to stop anyone else from beating themselves up for not knowing how this works here's how to include another JS page. 

document.write('<script type="text/javascript" src="'
		+ '/index.php?title=PAGENAME'
		+ '&action=raw&ctype=text/javascript&dontcountme=s"></script>');

or 

document.write('<script type="text/javascript" src="'
		+ '/index.php?title=PAGENAME'
		+ '&action=raw&ctype=text/javascript&dontcountme=s&templates=expand"></script>');

Where PAGENAME is the name of the page you want to include. Note that this will include a page from the local wikia you are on. If you want to include from another wikia place http:// and it's domain before the /index.php. See #Reduce your includes while splitting the code for information on the second one.

Include other CSS files using JS[]

This one is more of a modification on the one before. Some browsers don't like it when you have a @import inside of another @import so it's also good to use JS to include the CSS at the same time. 

document.write('<style type="text/css">/*<![CDATA[*/@import "'
		+ '/index.php?title=PAGENAME'
		+ '&action=raw&ctype=text/css";/*]]>*/</style>');

or 

document.write('<style type="text/css">/*<![CDATA[*/@import "'
		+ '/index.php?title=PAGENAME'
		+ '&action=raw&ctype=text/css&templates=expand";/*]]>*/</style>');

Where PAGENAME is the name of the page you want to include. Note that this will include a page from the local wikia you are on. If you want to include from another wikia place http:// and it's domain before the /index.php. See #Reduce your includes while splitting the code for information on the second one.

Namespace and Group information[]

Sometimes it's handy to know what namespaces and groups are on a Wikia. Unfortunately there is no built in system which lists these. So in these cases it's good to have an admin build a Namespaces.js and Groups.js file so that you can use this information inside of other scripts. Note that these files are in a format which is good for using a for loop to create switch statements which match that of those on Special:Prefixindex and Special:Listusers.

Information on how to generate the arrays and code examples can be found at Anime:MediaWiki:Namespaces.js and Anime:MediaWiki:Groups.js. (Hopefully this trend will catch on and you'll have these on most wikia you come by.)

Searchswitch[]

The searchswitch is a special addition to the Search portlet. When used it adds a extra box above the search box in the sidebar. This box modifies the search box to whatever you pick. There's still the normal Search listed there. But there are a number of other options to:

  • Article: This works a little like a creationbox. You can type in an article name and then hit view to go to that page, or you can hit edit to go strait to the editpage for that article. (The code for this was borrowed from User:Splarka/tricks)
  • Editcount: Plain and simply this is like going to Special:Editcount just enter a username in the box and hit go, you'll then be sent to the editcount for the person.
  • PageIndex: This works just like both Special:Allpages and Special:Prefixindex. The nice thing about it is you can use the dropdown box to select a namespace such as the main namespace and then hitting submit gives you a list of all the articles in that namespace. The Starting At option sends you to Allpages and gives a listing of every article starting with the one you listed and going on to a limit. The Starting With option sends you to Prefixindex and gives you a list of all the articles which start with the text you entered.
  • Listusers: Listusers works just like going to Special:Listusers. You can just submit for a list of all users (A new feature is also in place so that now only active users are listed there.) You can enter in a username to get information on a user such as what status tags such as Jonin they may have. Or you can use the dropdown box to find a list of all the Jonin(sysop), Kage(bureaucrat), or Tokubetsu Jonin(rollback) there are on the wiki.
  • Contribs: Simply enter a username here and you will be sent to the contribs page of a user. Works similar to Editcount.

Please note that to use these features you must be on a Wikia which is using the trick at #Namespace and Group information. Though if you are not, you can optionally create those two pages at Special:Mypage/namespaces.js and Special:Mypage/groups.js and use overrideNamespaces and overrideGroups to direct the system to use your personal files instead of using the default ones for the trick.

If you are already using the #Include other CSS and JS files by function trick then you can simply include this system by using the code: 

includeJS( 'MediaWiki:Searchswitch.js', 'en.anime' );
includeCSS( 'MediaWiki:Searchswitch.css', 'en.anime' );

or you could replace the includeCSS in your JS file with this inside of your CSS page (or you can use both): 

@import "http://en.anime.wikia.com/index.php?title=MediaWiki:Searchswitch.css&action=raw&ctype=text/css";

Though do note that if you are on a wikia which styles the sidebar you'll half to apply the same style to #p-switch.

Borrow things from the Wikia Anime Project[]

I experiment with new things to make it easier to use a Wiki on the Wikia Anime Project. It's actually possible to include these things when you travel outside of the project using a little code in your own CSS and JS.

Note: There are 2 important things which including things from the WAP does. Firstly it includes the functions used at #Include other CSS and JS files by function so after you include code from the project, any other code you include from other places will be able to use the includeJS and includeCSS functions. Another system that is included is the #Searchswitch so if you are not on a project which uses the #Namespace and Group information trick you must either have the project admins create this page or you could create those two pages at Special:Mypage/namespaces.js and Special:Mypage/groups.js and then uncomment the 2 lines which override the location and change MYUSERNAME to whatever your username actually is. If you're wondering what cancelAnime is. It's a variable that tells the WAP's javascript and such to not include other files and systems which are specially made for things such as styling things in the WAP. This also stops the global Anime:MediaWiki:Anime-Monobook-Accesstips.js from being included to.

Inside of your monobook.js: 

//Stuff to include WAP Stuff into here.//
var cancelAnime = true;
//var overrideNamespaces = 'User:MYUSERNAME/namespaces.js';
//var overrideGroups = 'User:MYUSERNAME/groups.js';
document.write('<script type="text/javascript" src="'
             + 'http://en.anime.wikia.com/index.php?title=MediaWiki:Anime-Common.js'
             + '&action=raw&ctype=text/javascript&dontcountme=s&templates=expand"></script>');

Inside of your monobook.css: 

@import "http://en.anime.wikia.com/index.php?title=MediaWiki:Searchswitch.css&action=raw&ctype=text/css";

For an example of this in use you can see my User:Dantman/monobook.js and User:Dantman/monobook.css.

For sanitys sake please only use this trick in your userspace outside of the WAP. Don't use this trick to borrow things from the WAP for your own project. If you want to do that then it's better to ask me for help copying the code to your wikia.

Tab System / Status & Stress Changer / Wikiswitch[]

One of the big things I've been using is a system for adding special tabs to the top bar amongst a bunch of other things. I've finally set it up in a way which a normal user can use.

I started off with what was at User:Essjay/monobook.js and User:Essjay/monobook.css but it's been significantly altered from what he originally had. Sysop functions can be set to only work on certain Wikia. Buttons and menus can be told to show up or not. IP options only show up on anons not normal users. The status changer can be customized and there's a new stress changer. The old addli functions have been completely replaced by the more robust PortletMenu functions. And that system has been modified so that it can create menus and also so that it can create separators to. The diff link has been moved under the history menu. When something such as the diff is active it's link shows up when it's in a menu. I've also setup a very special wikiswitch system which lets you switch between multiple wikia. Not just to homepages, but to the mirroring page on the other wiki. A My editcount link can be placed in the personal menu. You can jump strait to your userpage or usertalkpage on another wiki. In a tools menu you can add a SiteNotice menu with options for dismissing and undismissing the notice.

First off, I'm going to have to note that this code relies heavily on things in the WAP. So if you want to use this outside of the WAP you'll have to follow #Borrow things from the Wikia Anime Project.

Firstly here's the basic code which includes the files. Nothing much will happen though without customizing any options. 

includeJS( 'MediaWiki:Verify.js', 'en.anime' );
includeJS( 'MediaWiki:Basictabs.js', 'en.anime' );
includeJS( 'MediaWiki:Wikiswitch.js', 'en.anime' );
includeJS( 'MediaWiki:Statuschanger.js', 'en.anime' );

If you are outside of the Wikia Anime Project you'll also need this in your monobook.css or else the tabs will go insane: 

@import "http://en.anime.wikia.com/index.php?title=MediaWiki:Tabs.css&action=raw&ctype=text/css";

There are a bunch of tabs which can be enabled or disabled, here's a set of variables defaulted to false(off) which you can toggle on to make something appear, note that everything I'm listing should be above the code I just gave you: 

var addDiff = false;//Adds Diff link in a menu under History.
var addPurge = false;//Adds a Purge link after Watch
var addMyEditcount = false;//Adds a My editcount link in the personal bar.
var addUserMenu = false;//Adds a User menu with various functions while in a Userpage area.
var addWikiTools = false;//Adds the empty WikiTools menu.
var addSiteNotice2WikiTools = false;//Adds a sitenotice menu to WikiTools.
var addWikiSwitchMenu = false;//Adds the wikiswitch menu.
var addUserSwitchMenu = false;//Adds a wikiswitch for your userpages.
var addTalkSwitchMenu = false;//Adds a wikiswitch for your usertalkpages.
var addWikiSwitchPageClone = false;//Adds a Clone button to wikiswitch tabs.
var addWikiSwitchPageDiff = true;//Adds a Diff button to wikiswitch tabs.

If you are a sysop on any wikia it's possible to make the sysop only buttons show up (by default they're off). If you list the domains which you are a sysop at in an array in the sysopAt variable, when you are at that wikia the sysop options will show up. (The reason it's not a simple variable only, is so that you can include the code in your future global user preferences or just use includes to bring your styles and scripts everywhere you go.)

Staff Tip: Just a little tip for the staff who have sysop functions on every wiki. If you set isSysop to true it will override sysopAt and sysop options will always be on.

Here's an example, this would be for me I'm a sysop on The Gaiapedia, and the 3 Wikia currently in the WAP so I'd list: 

var sysopAt = new Array(
	'gaia.wikia.com',
	'en.anime.wikia.com',
	'naruto.wikia.com',
	'inuyasha.wikia.com'
);

Next is the wikiswitch. It's off by default, but if you enabled addWikiSwitchMenu, addUserSwitchMenu, or addTalkSwitchMenu then you'll have to customize the variable wikiaDomainList with the list of wiki which you want to show up under the wikia tab.

Here's an example listing which just has central on it: 

wikiaDomainList = new Array(
	{ id: 'central', domain: 'www.wikia.com', projectNS: 'Wikia', name: 'Central', title: 'Wikia Central', mainpage: 'Wikia', interwiki: 'w:' }
);

The mainpage parameter is optional, it's simply used when a wiki has a mainpage other than Main_Page. domain is the domain at which the wikia is, it's what will be used to convert links. projectNS is the name of the project namespace for that wikia, setting this will alter the link when you are in the project namespace. This means that while you are at say, the Animepedia which has a Project namespace of Animepedia in it's Animepedia:Rules and you decided to go to central which has a Project namespace of Wikia, instead of ending up on the nonexistant Animepedia:Rules on central you'd end up at Wikia:Rules. The same goes for the mainpage parameter, when you set it if you're on Wikia with a mainpage of Wikia, and you go to another wikia with a different mainpage you'll be directed to the correct page. Name is the name which will show up in the menu, and Wikia Central is the title that will show up when you hover over it (It's good to keep shorter names in the menu). interwiki is also optional. This is currently only used in conjunction with the WikiSwitchPageClone system. If you do not set interwiki to an interwiki link (e.g.: Anime:) then the software will try to build one using w:c: and the id parameter.

Using the wikiswitch system you'll have 3 different menus that will come up if you enable them. The Wikia menu which will list the wikia which you have listed, for each one you will have a link which will go to the parallel page on the other Wikia, and a submenu with 4 links. A link to the view page of your current page, one strait to the edit page (Useful for copying things across multiple wikia), A link to the Mainpage on that wikia and the recentchanges. The other 2 optional menus are a menu with links to your userpages and user talkpages on the listed other wikia, those show up when you hover over your username or my talk link in the personal menu.

If addWikiSwitchPageClone is set to true, then in each wiki menu you will also be given a clone option with a auto option in the submenu. If you use the auto link you will be given a confirmation making sure that you actually intend to copy the page. If you confirm this then you will be sent to the editpage of the page you are on. On that page a edit summary will automatically be made and the page will be saved but due to a little alteration trick instead of the page being saved on the current wiki, it will be saved onto the wiki you selected previously in the menu. Essentially this means that the current page you are on will be cloned to another wiki. A nice thing to note with this is that you fortunately don't need to have the scripts working on the other wiki, so you can also use this tool to copy the code you use to reference to your main .js and .css (Note that You won't need to do this once the Global user .js and .css is setup.) If you wish to clone a page in a safer manner then just use the clone itself, instead of directly saving the page it will bring you to a preview of the new page on the other wiki. Additionally if you set addWikiSwitchPageDiff to true, then a diff link will be placed below the clone link and you can use that to check the difference between the content on that wiki, and the content on the current wiki.

The last thing to explain is the Status Changer and Stress Changer. The system again was copied from what Essjay had and it's been improved. The stress changer was one I came up with after finding stress meters on wikimedia commons and having a little run in issue with some trouble on a project with user miscommunication.

Important Note: For sanity's sake, coding sake, and plain etiquette It's best to make a status changer only on the one wikia you are active the most on. Doing it elsewhere isn't nice because a new edit shows up in the recentchanges every time you change your status. It's also more polite to wait off on adding things like this or some fancy userpage until after you've been around here for awhile. That aside, onto the explanation.

The variables we'll be looking at are For the status changer: statusChangeAt, statusSubpage, statusScheme, and statusTypes. And for the stress changer stressChangeAt, stressSubpage, stressScheme, and stressTypes.

statusChangeAt and stressChangeAt work just like sysopAt. Just set it to an array with the domains of where you have a statuschanger and stress changer setup. If you want to know how these are setup you'll need a Status page in your userspace, and a status template in your userpage. Look at Anime:User:Dantman/Status and Anime:User:Dantman/Status/Template. Though note that I take things a step further than Essjay's old one I and split between images and text.

First we'll look at the defining variables: My recommendation is that you set your status stuff at these locations (Note that these are part of your userspace, User:Yourname is automatically placed before these): 

var statusSubpage = "/Status";
var statusScheme = "/Status/Template";
var stressSubpage = "/Stress";
var stressScheme = "/Stress/Template";

Delete or edit whatever you need or don't need.

The last thing is the most important. Defining the different statuses and stress levels.

For this we use statusTypes and stressTypes each object you place in the arrays will show up as an item in the status changing menu. Wherever you place a null you will be given a separator.

Here's an example which has Active, Working, Busy, Out, Hiding, and Away: 

var statusTypes = new Array(
	{ id: 'in', name: 'Active', title: 'Active' },
	null,
	{ id: 'work', name: 'Working', title: 'Working' },
	{ id: 'busy', name: 'Busy', title: 'Busy' },
	{ id: 'out', name: 'Out', title: 'Out For The Moment' },
	{ id: 'hide', name: 'Hiding', title: 'Hiding' },
	null,
	{ id: 'away', name: 'Away', title: 'Away' }
);

Remember that id is what will be pasted into the first parameter for your template. Name is what you'll see, and title is what will show up when you hover over the option.

The stress types works exactly the same, Here's an example using a listing of the options which you can get status guages from commons for: 

var stressTypes = new Array(
	{ id: 'unknown', name: 'Unknown', title: 'Unknown' },
	{ id: 'fine', name: '1-Fine', title: 'Just Fine' },
	{ id: 'tense', name: '2-Tense', title: 'A Bit Tense' },
	{ id: 'stressed', name: '3-Stressed', title: 'Pretty Stressed' },
	{ id: 'quit', name: '4-Quit', title: 'I quit/I need a vacation' },
	{ id: 'run', name: '5-Run', title: 'Run for cover' },
	null,
	{ id: 'polluted', name: 'S-Polluted', title: '-1 (= 2^32 - 1), overflowed' },
	{ id: 'insane', name: 'S-Insane', title: 'Became Insane' }
);

And lastly, here's how to add that stuff to the menu.

We use a function defined as: 

addStatusButtonsToMenu( Menu, asSelfmenu, addStatus, addStress )
  • Menu is the PortletMenu object for the Menu you want the tab to be added to. You can use PageMenu to make it show up in the tabs. ToolMenu is for the Toolbox. It's possible to use UserMenu, but that's not advisable because this appends to the end, and if you do that then any submenus will go off the screen.
  • asSelfmenu can be set to true or false. If it's set to true then Self will be created as a menu under the menu you gave and My Status and My Stress (Whatever you have enabled) will be submenus of Self. If you set this to false then My Status and My Stress will just be added to the given Menu. It's better to set this to false if you only have one of the types of changers.
  • addStatus and addStress just tell the function what to add to the menu. Generally this allows you to place the menus in different locations or turn of menus for nonexistant things.

Note that you can't just call this function because things aren't created until after the page has loaded, so you have to place it inside of a function for an Onload Hook. Heres an example bit of code which will add a My Status and My Stress menu as a Submenu of a Self Tab in the Tab bar: 

addOnloadHook(function() {addStatusButtonsToMenu( PageMenu, true, true, true );});

You can see my setup at Anime:User:Dantman/monobook.js.

If you're having a massive amount of issues, you can ask me for help setting things up in your userspace.

CSS or JS[]

Include other CSS and JS files by function[]

This is quite simply an addition to #Include other JS files and #Include other CSS files using JS this is basically code which takes those methods and changes them into simple to use functions. 

function includeJS( page, onWikia, expand ) {
	document.write('<script type="text/javascript" src="'
			+ ( onWikia ? 'http://'+onWikia+'.wikia.com' : '' )
			+ '/index.php?title=' + page
			+ '&action=raw&ctype=text/javascript&dontcountme=s'+( expand == false ? '' : '&templates=expand' )+'"></script>');
}
function includeJSCode( code ) {
	document.write('<script type="text/javascript">'
			+ code
			+ '</script>');
}
function includeCSS( page, onWikia, expand ) {
	document.write('<style type="text/css">/*<![CDATA[*/@import "'
			+ ( onWikia ? 'http://'+onWikia+'.wikia.com' : '' )
			+ '/index.php?title=' + page
			+ '&action=raw&ctype=text/css'+( expand == false ? '' : '&templates=expand' )
			+ '";/*]]>*/</style>');
}
function includeCSSCode( code ) {
	document.write('<style type="text/css">/*<![CDATA[*/'
			+ code
			+ '";/*]]>*/</style>');
}

If you include this into the MediaWiki:Common.js file on a wikia then you can easily include other things elsewhere.

If you want to include MediaWiki:Example.css in a local wiki you would use: 

includeCSS( 'MediaWiki:Example.css' );

To include MediaWiki:Example.js which we could say is only on central then you'd use: 

includeJS( 'MediaWiki:Example.js', 'www' );

You could even include some actual js code using: (This is useful when you want code to execute after some included code runs) 

includeJSCode( 'alert(\'something\');' );

And if you want to add some CSS styling: 

includeCSSCode( 'body { background: black; };' );

See #Reduce your includes while splitting the code for information on the expand parameter, by default these functions expand the templates, but you can set the 3rd parameter to false to stop this from happening (use null on the 2nd parameter if you're doing this for a local wiki).

Reduce your includes while splitting the code[]

At times when you're on a project you may notice that you're accumulating a lot of .js or .css inside of your project and it can become hard to organize. It is possible to use the tricks I've shown to split all that stuff up into other files and just include them into the main stuff. But then that means the reader's browsers need to load more files. But there is one way to split up all your .css and/or .js into different article pages and yet still make the browser load only a few pages. We can do this using MediaWiki's template system. Though this technique actually only reduces the number of files you half to include with the above techniques, it doesn't replace them. In fact this technique doesn't work without including a file using the above methods first. This technique also only works locally. You can't include files from other wikia using this tecnique. Though you can use this to make it so that you only need to include one file from a remote wikia.

It's a simple case of splitting up what you have at say MediaWiki:Common.css into other files such as MediaWiki:Forum.css and MediaWiki:Misc.css.

Then back at your MediaWiki:Common.css instead of using the techniques I listed above you use the old template tricks of {{MediaWiki:Forum.css}} and {{MediaWiki:Misc.css}}. For a good organized formatting you could use: 

/*<big>'''[[MediaWiki:Forum.css]]'''</big>*/
{{MediaWiki:Forum.css}}
/*<big>'''[[MediaWiki:Misc.css]]'''</big>*/
{{MediaWiki:Misc.css}}

But here's the big question now. Since when we include another CSS we use the &action=raw parameter which stops wikitext from doing anything. The trick applies in using &templates=expand with that. When you do that you still get a code output, but at the same time templates are expanded with their code so suddenly a number of .css files can be combined into one. This is already shown in the above examples. Just use the second example which has &templates=expand already inside of it. Or you can use the .js functions which by default tell the system to expand the templates.

For an example of this system see Anime:MediaWiki:Anime-Common.css which is included by all the Wikia in the Wikia Anime Project. You can see Anime:MediaWiki:Common.css, Anime:MediaWiki:Common.js, and Anime:MediaWiki:Anime-Common.js to understand how the files are included.

Community content is available under CC-BY-SA unless otherwise noted.