Jun
6th
2017
Stylish: Original Color Genre Tags · 7:09am Jun 6th, 2017
edit: The genres have new colors site-side now. "AU, crossover, EqG, tragedy, sad, human, mystery, thriller, second person, [slice-of-life,] and sci-fi" all still have blue.
This script is useful for if you want to change them to something else, or still want those un-colored genres to 'pop'. Say, if you wanted to make all tags you disliked black.
So I was thinking maybe I could fix the other disliked UI change while I was at it. Here you go:versicolor tags, using the old colors and borders (ripped from the New Story page…and pre-emptively re-applied thereto).
You may also be interested in re-greening the navbar (and shrinking, and removing the new allcaps) or DiscoPanda84’s Removing that rounded boundary.
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("fimfiction.net") {
ul.tags >li a, ul.story-tags > li a.tag-genre{
border: 1px solid rgba(0,0,0,0.15) !important;
}
ul.tags >li a[href*="g:second_person"], ul.story-tags >li a.tag-genre[href*="g:second_person"], span.story_category_second_person{
background-color: #02A1DB !important;
box-shadow: unset !important;
}
ul.tags > li a[href*="g:adventure"], ul.story-tags > li a.tag-genre[href*="g:adventure"], span.story_category_adventure{
background-color: #45C950 !important;
box-shadow: unset !important;
}
ul.tags > li a[href*="g:alternate_universe"], ul.story-tags > li a.tag-genre[href*="g:alternate_universe"], span.story_category_alternate_universe{
background-color: #888888 !important;
box-shadow: unset !important;
}
ul.tags > li a[href*="g:anthro"], ul.story-tags > li a.tag-genre[href*="g:anthro"], span.story_category_anthro{
background-color: #B5695A !important;
box-shadow: unset !important;
}
ul.tags > li a[href*="g:comedy"], ul.story-tags > li a.tag-genre[href*="g:comedy"], span.story_category_comedy{
background-color: #F59C00 !important;
box-shadow: unset !important;
}
ul.tags > li a[href*="g:crossover"], ul.story-tags > li a.tag-genre[href*="g:crossover"], span.story_category_crossover{
background-color: #47B8A0 !important;
box-shadow: unset !important;
}
ul.tags > li a[href*="g:dark"], ul.story-tags > li a.tag-genre[href*="g:dark"], span.story_category_dark{
background-color: #B93737 !important;
box-shadow: unset !important;
}
ul.tags > li a[href*="g:drama"], ul.story-tags > li a.tag-genre[href*="g:drama"], span.story_category_drama{
background-color: #EC50CA !important;
box-shadow: unset !important;
}
ul.tags > li a[href*="g:equestria_girls"], ul.story-tags > li a.tag-genre[href*="g:equestria_girls"], span.story_category_equestria_girls{
background-color: #4D3281 !important;
box-shadow: unset !important;
}
ul.tags > li a[href*="g:horror"], ul.story-tags > li a.tag-genre[href*="g:horror"], span.story_category_horror{
background-color: #6D232F !important;
box-shadow: unset !important;
}
ul.tags > li a[href*="g:human"], ul.story-tags > li a.tag-genre[href*="g:human"], span.story_category_human{
background-color: #B5835A !important;
box-shadow: unset !important;
}
ul.tags > li a[href*="g:mystery"], ul.story-tags > li a.tag-genre[href*="g:mystery"], span.story_category_mystery{
background-color: #444444 !important;
box-shadow: unset !important;
}
ul.tags > li a[href*="g:random"], ul.story-tags > li a.tag-genre[href*="g:random"], span.story_category_random{
background-color: #3F74CE !important;
box-shadow: unset !important;
}
ul.tags > li a[href*="g:romance"], ul.story-tags > li a.tag-genre[href*="g:romance"], span.story_category_romance{
background-color: #974BFF !important;
box-shadow: unset !important;
}
ul.tags > li a[href*="g:sad"], ul.story-tags > li a.tag-genre[href*="g:sad"]{
background-color: #BD42A7 !important;
box-shadow: unset !important;
}
ul.tags > li a[href*="g:scifi"], ul.story-tags > li a.tag-genre[href*="g:scifi"], span.story_category_scifi{
background-color: #5D63A5 !important;
box-shadow: unset !important;
}
ul.tags > li a[href*="g:slice_of_life"], ul.story-tags > li a.tag-genre[href*="g:slice_of_life"], span.story_category_slice_of_life{
background-color: #4B86FF !important;
box-shadow: unset !important;
}
ul.tags > li a[href*="g:thriller"], ul.story-tags > li a.tag-genre[href*="g:thriller"], span.story_category_thriller{
background-color: #D62B2B !important;
box-shadow: unset !important;
}
ul.tags > li a[href*="g:tragedy"], ul.story-tags > li a.tag-genre[href*="g:tragedy"], span.story_category_tragedy{
background-color: #FFB54B !important;
box-shadow: unset !important;
}
}
Thanks for doing this
I’m afraid I have to be the person asking the horrible (but probably expected) question - how does one take the script from this post and apply it to the site? Knowing nothing about coding and having never heard of Stylish before, that is.
Am I right in guessing I’d need to install a Chrome extension into which scripts could be pasted?
If you’d be able to give a few sentences of guidance, or point me in the direction to start googling, that’d be very much appreciated, or I’m a bit lost. Thanks!
...Sorry, I should have made more effort to sort it out myself before asking
Got it all working now.
(If anyone is unsure, download and install an extension called Stylish, go to their userstyles site, create a new style, paste the code into the script box and make up a name and description. Then install it.
Thanks very much, Cursed Quill!
Yeah, Stylish. Also for Firefox (which is what I tested it on.)
Only some of the original colors are restored, not all of them; AU, crossover, EqG, tragedy, sad, human, mystery, thriller, second person, and sci-fi are still the blue color on my end.
4562494
Yup. (Slice-of-life, too.) Updated header note to say so.
4562622
Slice of life was blue to begin with (and I think it looks to be a similar shade), so that one is okay.
Thank you very much for this!
I'm posting this all over so more people can see it.
Spread it around.
FimFic Character Tag Icons
https://userstyles.org/styles/143583/fimfic-character-tag-icons
The Tags are back, bitches!