[CSS - CLASSIC] Highlighting your list's individual anime/manga titles based on their rating or recommendation
This topic is part of our CSS Tutorials and Add-ons section: http://myanimelist.net/forum/?topicid=419405 My anime titles are colored depending on their rating!  Might be me personally but I think a good idea for anime lists is some titles should be colored or styled according to the list owners score or recommendation, like if you go to my list now, I have highly rated titles I recommend in gold, and titles I hated in red, and everything else in blue. This way I can tell people "Check out titles I mark in gold!" when I link them to my list or if we have similar tastes (and for passerby). I have my own process for doing this, which I'll explain to you. btw I think it would be cool if there was a program like Hahaido's or U5's CSS generators to create coding for highlighting titles on your list automatically and do similar things. Tho I don't know if there is any kind of demand for such a generator lol. Try it out! Pretty much everyone on this site has seen Bleach or has it planned, and this code will turn the title Bleach on your list to a gold color. You can add it to the bottom of your CSS edit box and see it change the color of the Bleach title on your list for yourself. .animetitle[href*="anime/269/"] { color: gold !important; } With this tutorial I can show you how to easily write your own CSS to change a lot more titles on your list to one particular color, rather than changing them all at once with the usual .animetitle code. How to do it! 1. Choose color and what it will highlight. Simply that, for now, stick to one color you're going to choose and what its going to highlight, whether its titles rated 8-10 in gold, recommended titles in green, action titles in red and so forth. But just one color for now. You can also use a 2. Copy and paste this into a new Notepad Preferably Notepad. You might have to change this to a CSS document later, which notepad is simple and easy to explain how to change into. .animetitle[href*="anime//"] { color: !important; } visual example: 3. Insert the color you want to change this set of titles too, after color but leave a space before !important. For me, I chose gold, so I will insert gold in it for my example: 4. Copy and paste the code you created from step 3 multiple times in the same Notepad. Simple as that! visual example: 5. Manually insert title numbers (easier than it sounds). Go through your list and find the first anime title you want this color for. When you hover your cursor over it, you'll see a number in the link for it (see the example, pointed out in red). full page  close up  Go back to your Notepad and insert that number after anime/ in the first code in your Notepad (see below).  Now go back to your list and find the next title number, and insert that number after anime/ in the second code in your notepad and so forth until you have coded all the titles you wanted to highlight for this particular color! This manual process won't take to long if you picked something short and easy like (all titles rated 7-10 in gold), unless you have an extremely long list. It took only like five minutes for my list since I went with "recommended anime titles in gold" and there were only like 30-40 of them from my list total. 6. Clean the bottom of your Notepad Now that you're done inserting all those numbers, you should delete all the leftover unused codes from your notepad that didn't get a title number put in. 7. Copy and paste the finished code into your CSS or (preferably) import it! You can post this Notepad code your wrote to the bottom of your CSS, or import it via this tutorial: http://myanimelist.net/forum/?topicid=411779 It should take effect after saving, like in the example at the top of the post! Tip: I think its best to only put in a couple extra title colors on the list since when there are too many colors they start to become difficult to differentiate. Having problems? If you finished all the steps and its not working, post back here with the broken code or post your broken code here so I can look it over and see if there are any errors. My highlighting idea is something I borrowed from WoW (to match my list theme) and how it highlights item by color to indicate rarity- I like this on my list but I would also like to mark them with icons too tho I haven't gotten around to it yet! |
Shishio-kunSep 1, 2016 9:22 PM
| Oh, good, I just seen something like that... but now I'm too lazy to do this LOL.. |
| Oh god, this will take forever for me! |
   |
| This is really useful! Can I just suggest that it's a lot quicker and cleaner to put commas after each entry, instead of copying and pasting the entire code: .animetitle[href*="anime/269/"], .animetitle[href*="anime/270/"], etc. { color: gold !important; } Tbh I can't see your visual examples for some reason, so correct me if that's what you're doing. But it really shouldn't take that long. |
 |
Doomcat55 said: This is really useful! Can I just suggest that it's a lot quicker and cleaner to put commas after each entry, instead of copying and pasting the entire code: .animetitle[href*="anime/269/"], .animetitle[href*="anime/270/"], etc. { color: gold !important; } Tbh I can't see your visual examples for some reason, so correct me if that's what you're doing. But it really shouldn't take that long. MAL had an internal error that scrambled the BBcode but I fixed it. I probably considered your method when I wrote this 3 years ago. Your method is cleaner but not faster or easier as it has slightly more steps, and understand I try to keep tutorials most simple and less error-prone as possible. Also your method offers much more possibility of error, and its more time-consuming when one needs to update colors of a single title later: you still need to add the title individually again and choose the new color. But with the original method, you would simply find and go back to it and change it, rather than add another entry. Finally another flaw of your method is you end up with more CSS if you don't count selectors perfectly, so it may actually not be cleaner unless you take time to carefully clear them which is more inconvenient later than simply mass paste/mass delete superfluous Bleach's. This also creates more error chance, multiple selectors in one selector is very prone to user error from my exp But either way is fine if you know how to do them and there isn't much a time difference between them |
Shishio-kunAug 16, 2015 2:36 AM
Master_denverous said: I tried to follow all the steps above but why is that it's not working for me? Did I miss something important steps? Please help me I just want to highlights some anime titles. Please check this I didn't test the codes you posted but it seems you don't have any particular title set to be highlighted in the CSS. In the tutorial, I have an example with Bleach. You have to put in some titles as I have in the OP |
| how about this? still not working... |
You didn't put the coloring titles code on the bottom which is pointed out in the instructions. You put them in the middle of the body selector's CSS. So you have to put them on the bottom first. It's crucial that every part of the instructions be followed to the letter cuz one little misplaced code can break the whole thing. Also you are using a modern type CSS layout on your list. This tutorial is for classic CSS layouts, so it probably won't work for modern. atm I don't know what the equivalent for animetitle is on the modern CSS, it would be nice if someone looked it up and posted it here so I could make a modern version of the tutorial sometime. |
More topics from this board
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2023 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
356 |
by CLModerno
»»
7 hours ago |
|
» [HALL OF LEGENDS] Hacker09, MyAnimeList's #1 coder!Shishio-kun - Dec 10, 2023 |
9 |
by hacker09
»»
May 2, 9:29 PM |
|
» [CSS - MODERN] Add side renders to list layouts (including for each category!)Shishio-kun - May 15, 2021 |
2 |
by karmashizzle
»»
May 1, 1:57 PM |
|
Sticky: » 💚 [REPAIR STICKY] Repair/speed up a design + Request a layout fixShishio-kun - Nov 17, 2023 |
1 |
by Zelathis
»»
Apr 29, 7:49 AM |
|
» [CSS - MODERN] ⭐️ All ways to customize individual anime and individual list rows (mark your favorites!)Shishio-kun - Sep 4, 2020 |
8 |
by takkun_
»»
Apr 28, 9:25 PM |