Community Central


CSS For Individual Pages

I recently found a process that allows CSS to be incorporated on individual pages. It is relatively easy to do (I figured it out, how hard can it be?), but administrator or greater user rights are required.

Step 1: Create a MediaWiki PageEdit

You'll need to make a MediaWiki page that is NOT already being used by the system. It can be called anything, but for organization purposes, it best be named after the function the CSS is supposed to achieve. On this MediaWiki page, you write your CSS script enclosed in HTML:

<style type="text/css">
element {
property: value;

Once you've written CSS to your heart's content, you can publish the page.

Step 2: Apply CSS to Target PageEdit

Next, go to the page you want the CSS applied to. If you want the CSS applied to the entire page, type the following:


Obviously, replace the text between the tags with the name of the MediaWiki page you made with the CSS in step 1. Do not include a namespace. Publish the page, and the CSS should affect all the contents of the page.

Unfortunately, the code affects the ENTIRE page. Putting the section on another page and enclosing the <verbatim></verbatim> tags in <noinclude></noinclude> tags, then using wiki markup {{ }} to add the CSS to the original page does not produce a different result. Because of this, I don't doubt the functionality of this trick is reduced, but at least it could be useful for some things, eh?

Side note, I suppose replacing the <style type="text/css"> tag on the MediaWiki page could also be replaced with <style type="text/js"> to incorporate Javascript into a single page. This just made less appeal to me because I don't know JS, and I'm sure anybody who knows JS would be able to figure that out anyways.

Hope this was helpful! It opened up several opportunities for me...

Ad blocker interference detected!

Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.