FANDOM


I noticed some people are struggling with CSS and coding here and other wikis.

I've seen this done before, but I just decided that I wanted to make a blog post helping with CSS and other forms of coding.

I will update this blog if I remember any other CSS skills or learn new ones.

A really helpful website for testing out code can be found here.

IntroEdit

First things first, you have to make the MediaWiki:Wikia.css page for your wiki. You must be an administrator for you to be able to edit MediaWiki pages, as they are protected by default ([edit=sysop] (indefinite) protection) and their protection level cannot be changed.

Other functions on the wiki may require different pages, like MediaWiki:Chat.css.

CSS strictly requires the use of braces ({}). Braces must always be placed at the end of a section of coding, or else the coding afterwards will be broken.

Custom CSSEdit

Custom code can be applied to only your user wiki-wide. This will be found in your global.css. Note that the changes made in your global.css appear for you only. Do not panic if you see custom tabber overrides or toolbar code on every wiki, as this is the function of your global.css.

  • Global.css can also be used for code that would break Wikia's ToU (Terms of Use) if normally used in a wiki's public CSS.

Colouring NamesEdit

There are several different methods that can be used for custom colouring of usernames, however, this is the one that I use:

/* Username Colouring */
a[href$=":TheAquuaHybrid"],
a[href$="/TheAquuaHybrid"]{
    color:Teal !important;

This code is used for primary colouring of usernames. Note that the "!important" code is not required to be used in any CSS in this section.

If a user has a space in their name while using this method of code, replace it with an underscore (_).

GradientsEdit

If you wish to give a name multiple colours, or a gradient, then your code should look something like the following:

/* Username Colouring */
a[href$=":TheAquuaHybrid"],
a[href$="/TheAquuaHybrid"]{
    color:Teal !important;
    background: -webkit-linear-gradient(#00FF80, #2EFEC8, #58FAF4);
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent;
}

Backgrounds of gradients can be many different things. For example:

-radial-gradient();

can be used instead of:

-webkit-linear-gradient();

Note that, in between the parentheses, at least two different colour codes (hexadecimal or colour names) must be used in order to make the username a gradient.

deg
left
right

can also be used in the parentheses to make the username a gradient with colours lined up. This was demonstrated in NightmareIris' previously coloured username.

Other code can be added to coloured usernames, for example:

    font-weight: bold !important;
    font-size:110%;
    font-family:'Trebuchet MS';

This code will make someone's username bold, a bit bigger than usual, and in the Trebuchet MS font.

Once completed, the code may look something like this, but, of course, with usernames and colour codes changed:

a[href$=":TheAquuaHybrid"],
a[href$="/TheAquuaHybrid"]{
    color:Teal !important;
    font-weight: bold !important;
    font-size:110%;
    font-family:'Trebuchet MS';
    background: -webkit-linear-gradient(#00FF80, #2EFEC8, #58FAF4);
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent;
}


Coloured Usernames on ChatEdit

Usernames can also be coloured on a wiki's Chat. If you thought the previous username colouring applied for chat, well, read this section.

Most of the code is the same except for the beginning part, for example:

}   body.ChatWindow #WikiaPage > .Chat li[data-user="TheAquuaHybrid"] .username {
    color:Teal;
    font-weight:bold;
    font-size:110%;
    font-family:'Trebuchet MS';
    background: -webkit-linear-gradient(#0B3B39, #088A85, #01DFD7, #58FAF4);
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent;

The code for colouring chat usernames is essentially the same code but with the following section replaced:

a[href$=":Exampleusername"],
a[href$="/Exampleusername"]{

with:

}   body.ChatWindow #WikiaPage > .Chat li[data-user="Exampleusername"] .username {


Rail UsernamesEdit

The same form of code can also be used to customize usernames on the "rail", or sidebar of a wiki's chat. However, this:

> .Chat

is removed, while:

#WikiaPage

is replaced with:

#Rail

Following these guidelines, code for a username on a wiki chat's sidebar and in the chat should look like the following, but, of course, with usernames and colour codes changed:

}   body.ChatWindow #WikiaPage > .Chat li[data-user="TheAquuaHybrid"] .username {
    color:Teal;
    font-weight:bold;
    font-size:110%;
    font-family:'Trebuchet MS';
    background: -webkit-linear-gradient(#0B3B39, #088A85, #01DFD7, #58FAF4);
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent;
}   body.ChatWindow #Rail li[data-user="TheAquuaHybrid"] .username {
    color:Teal;
    font-weight:bold;
    font-size:110%;
    font-family:'Trebuchet MS';
    background: -webkit-linear-gradient(#0B3B39, #088A85, #01DFD7, #58FAF4);
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent;
}

If you want to be able to see your own username on your rail, add this code in your personal css above any normal gradient:

.ChatHeader .User .username {

User TagsEdit

User tags are small boxes stating the user's position on their profile/message wall/blog post section/contributions. These can also be customized, however, are one of the much more time-consuming sections of coding.

First, MediaWiki:Monobook.css must be created. Since Monobook.css is a section of Special:Allmessages, no coding is required to be added; you only need to correctly name the page and select "Publish".

Then, MediaWiki:Common.js must be created. This is the time-consuming part of the user tag coding process. Several other functions will be located here, and this page will be addressed later in this post.

Common.js is also a page in Allmessages; it comes with the following code:

/* Any JavaScript here will be loaded for all users on every page load. */

Removing this will have absolutely no impact on the code later in the page.

The following code then must be placed after that message:

importArticles({
   type: "script",
   articles: [
       'w:c:dev:UserTags/code.js',
   ]
});

After this is placed, the tags' code can be modified. This is done with the following code:

window.UserTagsJS = {
        modules: {},
        tags: {
                tagname1: {u:'DisplayText'},
                tagname2: {u:'Displaytext'},
        }
};

and so on.

These tags can be applied to certain users with the following code:

UserTagsJS.modules.custom = {
        'Username': ['tagname1'],
        'Username': ['tagname2'],
};

and also so on.

Possible tag names include (these can be customized as well as the display text):

  • founder
  • bureaucrat
  • sysop*
  • threadmoderator
  • rollback
  • chatmoderator
  • blocked

*Note that the tag for the Admin user group is called "sysop", not "admin".

Customizing/colouring TagsEdit

The customization of message wall user tags brings us back to MediaWiki:Wikia.css. The code for colouring tags is also very similar to colouring usernames.

  • Unlike most methods of colouring and against what the code editor says, when customizing message wall user tags requires the usage of "!important".
    • The lack of this message results in the tag being the default tag colour for the wiki.

Tags have several different sections (for this example I will use the "bureaucrat" usergroup):

  • .tag.usergroup-bureaucrat { shows what tag you're customizing.
  • background-color: white !important; shows the background, or main colour, of the tag.
  • color: black !important; shows what the colour of the text in the middle of the tag will be.
  • border: 2px black solid; is the colour of the border surrounding the tag.
  • border-radius: 1; is how far the border of the tag (mentioned above) will extend.

Finished code for a tag should look somewhat like this, but, of course, with the colour codes, sizes, and usergroup- code changed:

/* Tags */
a.tag {
        color: inherit;
}
.tag.usergroup-bureaucrat {
    background-color: #FFBF00 !important;
    color: black !important;
    border: 2px #F3F781 solid;
    border-radius: 1;
}

FiltersEdit

Filters can be used to remove specified tags from other specified user groups. For example:

UserTagsJS.modules.metafilter = {
        'inactive': ['sysop', 'bureaucrat'], 
        'sysop': ['bureaucrat'],
        'chatmoderator': ['sysop', ['patroller', 'rollback']]
};

This code will:

  • remove the "INACTIVE" tag from admins and bureaucrats
  • remove the "ADMIN" tag from bureaucrats
  • remove the "CHAT MODERATOR" tag from admins, patrollers, and rollbacks

Tabber OverridesEdit

Tabber overrides are used to customize the default tabber colours. This code is very complicated and has many different parts. They are also coded in wikia.css.

I am actually not sure what all of these parts mean but I think I can figure some out.

  • .tabberlive .tabbertab { is the entire tabber setup.
  • ul.tabbernav { is specifically the bottom of the tabber setup and the font style for the tabbers.
  • ul.tabbernav li a:link is the font colour of the tabber when hovered on (or possibly the same as ul.tabbernav li a:visited, not sure).
  • ul.tabbernav li a:visited is the font colour of the tabber when not active.
  • ul.tabbernav li.tabberactive a, ul.tabbernave li a:hover, ul.tabbernav li a { is the font colour of the active tabber and the main colours of the tabber.
  • ul.tabbernav li a[disabled="disabled"] is the border of disabled tabbers. (unconfirmed)
  • ul.tabbernav li.tabberactive a { is the small border that is found at the bottom of a tabber when active.

Tabber overrides can also be used in your wikia.css.

This example uses RGB codes (which can be found in html color codes websites along with hexadecimal colour codes):

/* tabber overrides*/
.tabberlive .tabbertab {
border: 2px #8904B1 solid !important;
border-top:0 !important;
background-color: black !important;
}

ul.tabbernav {
 border-bottom: 2px #8904B1 solid !important;
 font: bold 14px Arial, sans-serif !important;
}

ul.tabbernav li a:link { color: #A4A4A4!important; }
ul.tabbernav li a:visited { color: #A4A4A4!important; }

ul.tabbernav li.tabberactive a, ul.tabbernav li a:hover, ul.tabbernav li a {
color: #FFFFFF !important; 
border: 2px #8904B1 solid !important;  
background-image: -moz-linear-gradient(
    center bottom,
    rgb(95,4,180) 0%,
    rgb(25,0,51) 100%) !important; 
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(95,4,180)),
    color-stop(1, rgb(25,0,51))) !important; 
}

ul.tabbernav li a[disabled="disabled"] { font-weight: normal !important;  color: #8904B1 !important; outline-style: none !important; }

ul.tabbernav li.tabberactive a {
border-bottom: 2px solid #BDBDBD !important; 
}
/* end of tabber overrides*/

Message Wall User TagsEdit

Message wall user tags display the user's rank, or simply what they are tagged with on message walls or forum posts.

This code is relatively simple:

        'u:dev:MessageWallUserTags/code.js',

must be added to importArticles at the beginning of common.js.

After that is applied, the tags can be customized ("Username1", "Username2", "Title", and hexadecimal codes can be changed):

window.MessageWallUserTags = {
    tagColor: '#FFFFFF',
    glow: true,
    glowSize: '22px',
    glowColor: '#3104B4',
    users: {
        'Username1': 'Title',
        'Username2': 'Title',
    }
};

This code will result in tags very similar to this wiki's tags.

Custom CursorsEdit

Custom cursors are fairly easier to code than most of this content. You just need an image (maximum 125 x 125px; this wiki's is 35 x 35px) and a few lines of code.

If done correctly, the code should look something like this (with image url replaced with desired image [MUST end in file type; jpg, png]):

/* custom cursors */
body {
    cursor:url("http://site.com/image.png"),auto;
}
a:active {
    cursor:url("http://site.com/image.png"),pointer;
}
a:hover {
    cursor:url("http://site.com/image.png"),pointer;
}
p:hover {
    cursor:url("http://site.com/image.png"),text;
}
/* end of custom cursors */

Link Fade on HoverEdit

This feature in CSS allows links to fade into another colour when hovered over or clicked. This code is also very simple to follow.

The following example makes links fade from light blue to darker blue (keep in mind that the colour codes and times can be replaced):

/* link fade */
a {
  color:#65C3F9; background:transparent;
  -o-transition:color .4s ease-out, background 2s ease-in;
  -ms-transition:color .4s ease-out, background 2s ease-in;
  -moz-transition:color .4s ease-out, background 2s ease-in;
  -webkit-transition:color .4s ease-out, background 2s ease-in;
  /* override with proper CSS property */
  transition:color .4s ease-out, background 2s ease-in;
}
a:hover {
color:#0080FF;
text-shadow:0 0 1px #C7F7F6;
/* link fade ends */

*Note that text-shadow:0 0 1px #C7F7F6 is simply a glow applied to the text.

Custom Toolbar [GLOBAL]Edit

This CSS applies GLOBALLY, or throughout Wikia. The only way to remove it on one wiki is to remove it from your global.css.

This CSS CAN ONLY BE USED IN YOUR global.css. It is NOT allowed to be used wiki-wide. See w:c:dev:ToolbarStyle for more info.

This is also a fairly easy customization to install. The following code can be pasted in your global.css (with hexadecimal codes and font changed, of course):

.WikiaBarWrapper {
    background: #58FAF4 !important;
    background: -moz-linear-gradient(top, #58FAF4 25%, #04B4AE 50%, #0B4C5F 75%) !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(25%,#3264af), color-stop(50%,#00327d), color-stop(75%,#00194b)) !important;
    background: -webkit-linear-gradient(top, #58FAF4 25%,#04B4AE 50%,#0B4C5F 75%) !important;
    background: -o-linear-gradient(top, #58FAF4 25%,#04B4AE 50%,#0B4C5F 75%) !important;
    background: -ms-linear-gradient(top, #58FAF4 25%,#04B4AE 50%,#0B4C5F 75%) !important;
    background: linear-gradient(to bottom, #58FAF4 25%,#04B4AE 50%,#0B4C5F 75%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3264af', endColorstr='#00194b',GradientType=0 ) !important;
}
.WikiaBarWrapper .toolbar .tools > li > a {
       color: #0ff;
       font-weight: 700;
       font-family:Trebuchet MS;
}

This code will result in a toolbar with a light-teal top--fading to darker teal, and the Trebuchet MS font as the text on the toolbar.

Custom Chatmod IconsEdit

For this code, you will need to create the MediaWiki:Chat.css page.

In order to remove the existing chat mod star and allow for them to be replaced, the following code must be added (with links replaced):

.User.chat-mod .username:after{
    background-image:none;
}
.User.chat-mod .username:after {
    content: url("http://site.com/image.png");
    float:right;
}

After this is applied, custom icons can be added to specific users (also with links changed to the desired image*):

.Rail #user-Exampleusername .username:after, .Rail #priv-user-Exampleusername .username:after {
content: url("http://site.com/image.png");
float:right;
}

Just like custom gradients on your own rail, you can have chatmod stars only to yourself. Just paste this code in your personal css above the other content for a chatmod star:

.ChatHeader .User .username:after {

*The ideal, possibly even required size for custom stars is 16 x 16 px.


This code is absolutely free-to use, which is why the blog was made. If you have any questions about other code features, please do not hesitate to ask.

Also, please; do tell me if I made mistakes writing this. I wrote this during the span of about three hours; I was really tired, and I was dividing my attention three ways.

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.