Wikia

Community Central

Comments5

Custom Admin Highlighting

Noreplyz February 15, 2016 User blog:Noreplyz

This is the go to blog for highlighting admins in your wiki! If you feel like there is more to be covered, leave a message below!

Why highlight admins?

You will see that many wikis have admins that have bolded and coloured usernames, maybe with a picture or flashy text. It's important to highlight admins because they are often experienced with the wiki's topic and administration, so you can easily identify someone who can help you out. It's also helpful when reviewing WikiActivity or RecentChanges, because most admins will have trustworthy edits, and it's easier to spot them out! You can also change the theme of comments to better differentiate between moderators, admins and bureaucrats for larger wikis.

This blog post will delve into several methods you can use - from the easiest to the relatively easy - feel free to ask questions if you get stuck on any step.

Wikia Developers 'Highlight' Stylesheet

The Wikia Developers stylesheet, Highlight, is a good start to highlighting users with more rights. Adding the following code will highlight all VSTF members, Helpers, Wikia Staff and some bots. It will make it easier to see staff edits to articles like Javascript, as well as VSTF visits to clear out vandalism and spam.

  • Place this into a wiki's CSS file (MediaWiki:Common.css):
@import "http://dev.wikia.com/load.php?mode=articles&articles=Highlight/code.css&only=styles";
  • Or, place this into a wiki's JS file (MediaWiki:Common.js):
importArticles({
    type: "style",
    articles: [
        "w:c:dev:Highlight/code.css"
    ]
});

Highlighting the usernames

You can bold and/or colour your local administrators by adding some extra CSS.

To bold and colour just the usernames (when linked to a user page), use the following:

a[href="/wiki/User:Brainsbeer"],
a[href="/wiki/User:Dragonofelder"],
a[href="/wiki/User:Elfdemon101"],
a[href="/wiki/User:Frozen_Jese"],
a[href="/wiki/User:Gamerboy555"],
a[href="/wiki/User:OrangeStripes_Jr"],
a[href="/wiki/User:Noreplyz"],
a[href="/wiki/User:Gavalar"]
{ color: #008000 !important; font-weight:bold !important; }

The above will highlight just the admins with a green font color and bold it.

Nz Highlighting 1

It affects usernames everywhere, including Wiki Activity, Recent Changes and the Wiki Activity module on the right bar.

You can add extra CSS, such as adding a shadow, changing its hover effect or adding an image next to usernames.

  • To add a shadow, use this CSS in between the { squiggly brackets }. The following adds a blue (rgb 50, 50, 199) glow to your admins. Change the 3rd number to change the blur, or the rgba value for the colour:
a[href="/wiki/User:Noreplyz"],
a[href="/wiki/User:YogsBot"] {
    text-shadow:0px 0px 4px #1763aa;
}
  • To change the hover effect, such as making it glow, you'll need to have something like this. This will have a default blue font color, but when hovering it will glow light blue and bolded.
a[href="/wiki/User:Noreplyz"],
a[href="/wiki/User:YogsBot"]
{ color: #1763aa !important; }

a[href="/wiki/User:Noreplyz"]:hover,
a[href="/wiki/User:YogsBot"]:hover
{ font-weight:bold; text-shadow:0px 0px 4px #1763aa; }
  • To add an image, you'll have to make sure you have an appropriately sized image, then use this code.
a[href="/wiki/User:Noreplyz"],
a[href="/wiki/User:YogsBot"]
{ color: #1763aa !important; }

a[href="/wiki/User:Noreplyz"]:after,
a[href="/wiki/User:YogsBot"]:after
{
    margin-left:5px;
    content: url('http://vignette3.wikia.nocookie.net/noreply/images/1/1b/Admin.png/revision/latest/scale-to-width-down/15#.png');
}
Nz Highlighting 2

Left: bolded and underlined, center: text shadow, right: a little image.

Highlighting the comments

You might have comments turned on for your wiki, and your admins may want their comments highlighted as well. Don't fear - there's just a bit more code to copy before you can get it working.

/* This is for the main comment box */
.comments li[data-user="Noreplyz"] blockquote {
    background: #dff6ff !important;
    color:#007eac;
}
/* This is for the little triangle next to the avatar! */
.comments li[data-user="Noreplyz"] blockquote:after {
    border-color: transparent #dff6ff #dff6ff transparent !important;
}
/* This is to color all the text. */
.comments li[data-user="Noreplyz"] blockquote div {
    background: transparent !important;
    color:#007eac;
}
/* This is for those difficult to see links. */
.comments li[data-user="Noreplyz"] blockquote div a {
    color:#005979;
}

All four is generally needed to make sure the comment box looks nice. Here, I've gone for

  1. 007eac for my main text color,
  2. 005979 for my links and
  3. dff6ff for my background. This makes it look all awesome:
Nz Highlighting 3

All blue.


Still interested in sprucing up your wiki? Read more: Making Awesome Home Pages.

Around Wikia's network

Random Wiki