This tutorial is part of our CSS Tutorials and Add-ons section: http://myanimelist.net/forum/?topicid=419405 There's a lot of ways to customize your category link buttons (also called status menu or category menu). To make it easiest on everyone, I've split customization of the buttons into two sections- one for any level of user including beginners (put into a separate topic), and a section for experts to learn how to deep customization of the buttons. Premade category button menu codes (for all users, including beginners)  If you have zero to basic CSS knowledge, or even if you're an expert, you can use and customize the premade category menu customizations in this topic: http://myanimelist.net/forum/?topicid=1327757 The menus can be installed to any layout. You can change out the images used for the buttons with your own, move them around the page, and do other customizations with the notes in the codes. I also include a short tutorial on making your own images for the buttons. Advanced coding for the category menu (advanced users only) There are literally over one hundred individual selectors related to the category menu links. Rather than list them all and try to break them down for the beginners, I'll describe the different sets and add examples to get you started. People who want to customize the category menu without using premade codes above will find these useful for their own original customization. Paste the sets below into your CSS edit box to try them out. Because its very difficult to explain, please don't use these unless you're an advanced user with experience in customizing your CSS. Basic selectors for category link buttons (add images to the buttons here) Before/after versions (for 2 extra selectors per button and custom text) Padding around the links Even more specific coding for each button with "plus" version of selectors |
Shishio-kunApr 9, 2016 4:43 PM
| Here's CSS3-way to do this thing: #list_surround table:first-of-type td:nth-of-type(1){background: cyan;} #list_surround table:first-of-type td:nth-of-type(2){background: blue;} #list_surround table:first-of-type td:nth-of-type(3){background: purple;} #list_surround table:first-of-type td:nth-of-type(4){background: green;} #list_surround table:first-of-type td:nth-of-type(5){background: magenta;} #list_surround table:first-of-type td:nth-of-type(6){background: tan;} The code is much shorter, obvious and easier to type manually and to maintain as well. How it works: The drawback is that it its not supported by teh old browsers (most notably being IE, only 9 and above versions of which support it, the other browsers support it starting from: Chrome 1.0+, Opera 9.6+, Safari 3.1+, Firefox 3.6+) |
 |
| Is there some way to lessen the gap between my category links and the table? All the time when i want to use padding both elements move and i just want to have the category links moving more to the bottom. Screenshot in Spoiler: Hope someone can help me. |
  |
Lelouch_X said: Is there some way to lessen the gap between my category links and the table? All the time when i want to use padding both elements move and i just want to have the category links moving more to the bottom. Screenshot in Spoiler: Hope someone can help me. Discard your old links codes, and use this: /* CURRENTLY WATCHING/READING LINK AREA */ .status_selected, .status_not_selected { position: absolute; margin-top: 215px; left:0px; } /* COMPLETED LINK AREA */ .status_selected + .status_not_selected, .status_not_selected + .status_selected, .status_not_selected + .status_not_selected { position: absolute; margin-top:215px !important; left:180px; } /* ON HOLD LINK AREA */ .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected { position: absolute; margin-top:215px; left: 280px; } /* DROPPED LINK AREA */ .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { position: absolute; margin-top:215px; left: 370px; } /* PLANNED LINK AREA */ .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { position: absolute; margin-top:215px; left: 460px; } /* ALL ANIME/MANGA LINK AREA */ .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { position: absolute; margin-top:215px; left: 570px } |
| Thanks a lot! |
|
| how can i eliminate the spaces between the category links? http://myanimelist.net/animelist/uwinaako here is the code: |
uwinaako said: how can i eliminate the spaces between the category links? http://myanimelist.net/animelist/uwinaako you mean, to see the menu category like this: to do this, delete all the code you put in the spoiler, and add: div > table:first-of-type { bottom: 0px; left: 50%; margin-left: -459px; position: fixed; } also change this code, is arround line 200: .status_not_selected, .status_selected { border: 0px none currentColor !important; display: inline-block; height: auto !important; padding: 0px !important; text-align: center !important; width: 153px; } |
al_exsSep 1, 2012 6:09 PM
al_exs said: uwinaako said: how can i eliminate the spaces between the category links? http://myanimelist.net/animelist/uwinaako you mean, to see the menu category like this: to do this, delete all the code you put in the spoiler, and add: div > table:first-of-type { bottom: 0px; left: 50%; margin-left: -459px; position: fixed; } also change this code, is arround line 200: .status_not_selected, .status_selected { border: 0px none currentColor !important; display: inline-block; height: auto !important; padding: 0px !important; text-align: center !important; width: 153px; } this works but it's not fixing in the bottom. |
| @uwinaako For this part: div > table:first-of-type { you'll probably have to use @import, because MAL used to discard '<'s and probably it still is. If you remove it, then what shows up when you click 'more' near anime title will be f*cked.bottom: 0px; left: 50%; margin-left: -459px; position: fixed; } |
|
| i overwrite the original code with that one but it fixed this part http://i47.tinypic.com/2elvw2c.jpg instead of fixing the category links in the bottom. i'll try that import thing later. |
| Oh, yeah, I forgot that... MAL CSS box for me is just to import :/ |
| It would be easier to use ".status_selected:nth-of-type(b)" and ".status_not_selected:nth-of-type(b)" instead of the long old codes. It can still be combined with "a" this way ".status_selected:nth-of-type(b) a" and ".status_not_selected:nth-of-type(b) a", and since it can also be combined with "::after", "::before", ":active" and ":hover" it gives more flexibility than the old code. /* Currently Watching/Reading */ .status_selected:nth-of-type(1), .status_not_selected:nth-of-type(1) { ... } /* Completed */ .status_selected:nth-of-type(2), .status_not_selected:nth-of-type(2) { ... } /* On-hold */ .status_selected:nth-of-type(3), .status_not_selected:nth-of-type(3) { ... } /* Dropped */ .status_selected:nth-of-type(4), .status_not_selected:nth-of-type(4) { ... } /* Plan to Watch/Read */ .status_selected:nth-of-type(5), .status_not_selected:nth-of-type(5) { ... } /* All Anime/Manga */ .status_selected:nth-of-type(6), .status_not_selected:nth-of-type(6) { ... } Also it would make the code cleaner since this way one can put all the common settings under ".status_selected" and ".status_not_selected" just leaving the minor adjustments to be made using the specific codes above. I made am example of this using the code Shishio posted 1st post. |
 |
Igneel_Grandine said: Is there a way to remove the links completely? Sorry if it is obvious... There is a giant bold text that says "Removing a link", did you try that? |
AYtheguy17 said: How would I go about changing the default category from "all anime" to "currently watching" so that whenever I open my list it shows the currently watching category instead of the all anime one? go HERE and change "default status selected" |
| Hmm sorry but I don't understand how to remove one of the link. Even if I input the code : /* CURRENTLY WATCHING/READING LINK AREA */ .status_selected a, .status_not_selected a { display: none; } , it doesn't remove the currently watching link, and I don't know how that works ^^". I would like to remove the Dropped link area, thanks in advance. |
 |
Agonie-Latente said: Hmm sorry but I don't understand how to remove one of the link. Even if I input the code : /* CURRENTLY WATCHING/READING LINK AREA */ .status_selected a, .status_not_selected a { display: none; } , it doesn't remove the currently watching link, and I don't know how that works ^^". I would like to remove the Dropped link area, thanks in advance. This topic is really outdated now so its not so reliable- you can use this for dropped link removal .status_not_selected:nth-of-type(4), .status_selected:nth-of-type(4){ display: none !important; } |
Shishio-kun said: This topic is really outdated now so its not so reliable- you can use this for dropped link removal .status_not_selected:nth-of-type(4), .status_selected:nth-of-type(4){ display: none !important; } Thanks a lot! <3 |
|
| This topic has been updated a lot. If you know of anything I can add let me know here so I can consider how to add it. The linked topic on pre-made category menus will get finished later. |
More topics from this board
» theme helpthreat - Jul 5 |
5 |
by Zaryf
»»
Aug 21, 5:46 AM |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1261 |
by KiranaStarr
»»
Aug 16, 5:48 PM |
|
» [CSS] ⭐️ Customize your List Cursor + Cursor FixesShishio-kun - Mar 8, 2021 |
30 |
by Shishio-kun
»»
Jul 28, 3:17 AM |
|
» How To Have Different Banner/Cover image & Background Image For Manga & Anime ListsYasminaRegina - Jul 25 |
2 |
by YasminaRegina
»»
Jul 26, 1:02 AM |
|
Sticky: » 💚 [REPAIR STICKY] Repair/speed up layouts + Request layout fixes ( 1 2 )Shishio-kun - Nov 17, 2023 |
52 |
by LucaBalsa
»»
Jul 6, 2:02 PM |