Add your own coloured tags.
You are here: Home > Clarity / Clarified > Add your own coloured tags.
This is a template for adding coloured tags to your list.
.data.tags span a[href$="=TAGNAME"] { background: COLOUR }
You can also change studios and licensors in a similar manner. Here are templates for that. Studios:
.data.studio span a[href$="/STUDIONUM"] { background: COLOUR }
Licensors:
.data.licensor span a[href$="/LICENSORNUM"] { background: COLOUR }
Genres:
.data.genre span a[href$="genre=GENRENUM"] { background: COLOUR }
If you're already acquainted with CSS you should be good to go. But, if you're not and are absolutely lost, read on for in-depth explanations. Most of the information relating to tags also applies to studios, licensors, and genres. I will specify exceptions where needed.
These templates can be copy-pasted for every tag that you want to colour, with TAGNAME replaced by a tag's URL name/format. You set the colour by replacing COLOUR with a CSS colour. Directly below is an example that makes tags named "Romantic Comedy" the colour orange.
.data.tags span a[href$="=Romantic%20Comedy"] { background: #f2b40c }
And here are examples of studios, licensors, and genres being modified, where we replaced the STUDIONUM/LICENSORNUM/GENRENUM texts in the same manner.
/* Kyoto Animation */
.data.studio span a[href$="/2"] { background: #196619 }
/* Fanworks */
.data.studio span a[href$="/866"] { background: black }
/* Action */
.data.genre span a[href$="genre=1"] { background: rgba(255, 50, 100) }
As mentioned earlier, when putting the tag in your code it has to be the URL version of your tag. The easiest way to find the URL version of your tag is by hovering your mouse over your tag while on your anime/mangalist. In one of your screen corners (generally bottom left) it should display the URL, including the tag section, and you can copy it into the code as seen there. It will be after the tag= text.
Alternatively, you can run the text through a URL encoder. Just use your favourite search engine to find one.
For studios, licensors, and genres it's almost the same, except you will need to replace the STUDIONUM/LICENSORNUM/GENRENUM with an ID instead of a name. To find this ID number, hover over the link to the studio/licensor/genre or visit the URL.
You can also add a text color by adding in a little bit more code. Here are the templates.
.data.tags span a[href$="=TAGNAME"] { background: BGCOLOUR; color: TEXTCOLOUR !important }
.data.studio span a[href$="/STUDIONUM"] { background: BGCOLOUR; color: TEXTCOLOUR !important }
.data.licensor span a[href$="/LICENSORNUM"] { background: BGCOLOUR; color: TEXTCOLOUR !important }
.data.genre span a[href$="genre=GENRENUM"] { background: BGCOLOUR; color: TEXTCOLOUR !important }
The only difference between this and the earlier templates are the addition of ; color: __ !important. You could also not change the background at all, only changing the text colour, by simply removing the background: __; text. For example:
.data.tags span a[href*="=TAGNAME"] { color: TEXTCOLOUR !important }
.data.studio span a[href$="/STUDIONUM"] { color: TEXTCOLOUR !important }
.data.licensor span a[href$="/LICENSORNUM"] { color: TEXTCOLOUR !important }
.data.genre span a[href$="genre=GENRENUM"] { color: TEXTCOLOUR !important }
With that you should be able to colour your tags. I hope that helped! Read on for extra tips if you desire.
It's always a good idea to keep code as understandable as possible, since you might come back in 6 months and have no clue what any of it does otherwise!
Code can sometimes be self explanatory; For instance, tags have their name in the URL, which makes it reasonably easy. But for studios and licensors all you have is a little number that means nothing without finding it again. This is where comments can be useful! You may have noticed them in other code you've seen and further up in some of the demonstrations.
/* Kyoto Animation */
.data.studio span a[href$="/2"] { background: #196619 }
/* Fanworks */
.data.studio span a[href$="/866"] { background: black }
See the names above each code piece? They're the comments, and are defined by preceding a piece of text with /* and enclosing with */. Anything within those two marks will not affect any other code, so you can write whatever you want there or even put code you don't want enabled at this time. Just make sure you open and close each correctly, /* like this every time */ or you may accidentally comment out large chunks of code, which can be annoying. The CSS editor built into MAL has colouring that will grey out comments so it's easy to tell when you haven't closed something correctly.
If you have several tags you are colouring the same (maybe you have a bunch of genre tags or something), you can do this a lot easier by using commas. Instead of writing near-identical new lines for each and every tag, you can simply write the colour once. Just put commas in between the tag selectors. Here's an example of how the code would look.
.data.tags span a[href$="=TAGNAME"],
.data.tags span a[href$="=TAGNAME"],
.data.tags span a[href$="=TAGNAME"]
{ background: COLOUR }
If you use this method, make sure to not have a comma after the last selector. Notice how there are only commas between tag selectors, not after the last one. Same as in normal English, you don't end a list with another comma. Item 1, item 2, item 3. Apples, oranges, pears, and bananas. No end commas.
Please note that due to the selectors these templates use, they will not show up in the list preview. They will only show up on the live versions of lists when you view them outside of the MAL editor. While I understand this can be frustrating, it is a calculated trade-off. If you use selectors that display in the preview window it means either more complicated code or opening yourself up to issues with accidentally colouring tags you didn't intentionally select. I hope you can understand.