Must be a Club Member to Reply
Mar 5, 2012 11:51 PM

Joined: Feb 2010
Posts: 3211
This topic is part of our CSS Tutorials and Add-ons section:

This is intended for experienced users who want to find codes beyond what are featured in the premade layouts and tutorials here. There are many useful and commmon codes and selectors in those already.

There are basically two types of CSS codes most sought after here, selector codes and property codes. Selector codes are codes like body, .list_surround, .header_title and such that identify a section of your list layout. A property code is something like width, height, or background-color that customize one of those sections.

Its really hard for a lot of people to find these on their own, so give you a really easy way to get any selector for ANY section on your list, and a list of the most useful property codes on MAL so you won't have to ask, find, and take so much time to figure them out on your own.

Finding any CSS selector easily

1. First you must have to open or install Google Chrome. Don't worry you don't need to use Chrome from now on, you're just going to use it to get the code you want. Its a very lightweight browser most any computer or browser even old ones should be able to install. It won't affect disk space on your computer either.

Here is the official link for installing and updating Chrome:

2. Once Chrome is installed, go to this page (my alternate account): You'll notice how colorful it is. This is because every individual section and link and text you could want to customize has been individually customized with a different color to separate them.

3. Right click on the section you want to learn the selector for and choose "Inspect Element". Google Chrome has a nifty default add-on that lets you see the names of the selector. After you clicked Inspect Element, you'll see the code in the right hand menu under matched set rules (circled in the third pic below). You can copy it and repeat these steps all you want!

If you don't see Inspect Element in your Google Chrome, update Google Chrome from its official link (posted above).

Here's some visual examples of Step 3:

Say you want this section- the "Edit" button's CSS selector so you can customize it separate from everything else.

Right click it and choose Inspect Element from the right click menu. If you don't see it, you must update Google Chrome (go back to step 1).

Now circled is the selector code. You can copy it and use it in your CSS- its that easy!

-Extra Notes and FAQ-
Can I have this code?
This code is available in this thread, its the Version II:

Why is Bakemonogatari different? (Individual Anime/Manga Titles):
There are ways to individually target an anime title. You'll notice on the first line Bakemonogatari has its title individually selected in a couple ways, thats why its so different from the rest. I customized its More section too and filled it its categories. You can get the codes that I used this way as well, and apply them to other anime titles.

Also there's a whole tutorial I wrote on the subject here:

Where are .td1, .td2, .header_title, etc.?
.td1 (to customize every odd numbered row), .td2 (customize every even numbered row) and .header_title (top row of each category) were split into all their individual parts. So you will see the individual codes often before these codes they were split from. These take priority in Inspect Element. The same is true for other codes that select many parts at once, they have been split up. If you want to select less- say just select every row at a time rather than individual parts- then use the codes from the premade layouts and other tutorials.

Where are hover codes?
Hover is what you see when you put your cursor on something and it shows up different while the cursor is on it. It changes back when you remove the cursor. Just add :hover to any of these selectors, and you have your hover version for that selector.

Universal Selector?
Universal selector is *, it can be useful as a selector for a custom cursor and changing your link's style.

Cursor tutorial:

Replace username for some sections
Some sections use the username as part of the selector, you'll have to switch the username with your own.

The top bar
The top bar looks different to you if you're logged out, if you are the owner of the list, and if you aren't the the owner of the list but are logged in and viewing it.

Use !Important codes
You can clearly see every section is targeted and been customized, but when you use the same selector your customization (property codes) might not be taking affect for your layout. It because of conflict with the site's original CSS. Use !important on your property codes then.

This was covered in this tutorial:

Importing CSS to target some parts
At the moment, I can't find CSS to target some parts (the more link and individual category links under the menu bar). I know the code but it appears to be filtered out by the site and !important and other CSS tricks don't work. I however can target these parts by importing CSS from an external source. You can see how to import CSS from here:

List of all CSS property codes
These are things like height, color, and font-size that customize a section. Property codes are the same on all sites, while selectors vary from site to site. Of course Youtube won't have MAL_control_strip (MyAnimeList Control Strip), it will have YT_control_strip (Youtube Control Strip) or something for its own site. However both of those selectors will use the same property codes- height, width, color, etc.

Though you've encountered many property codes probably here already, this site has a full list. I know there are many but there are many customization options for backgrounds, fonts, positioning, and more! You can decorate your text so it blinks, change the time a transition takes places, all kinda of stuff. Plus best of all this site gives you examples you can play with and many pros learn from here!

I can't guarantee all property codes here will work on MAL, but most do. Also remember newer property codes (CSS3 era) aren't even visible in older browsers, however, fewer and fewer people use those browsers anymore so its not a huge concern.

How you can help!

Advanced users: theres some sections I can't seem to target without importing CSS, namely the individual links for the status_select section. I may have overlooked some other sections of the MAL list layout. If you know of any codes I can add to target those sections that would be helpful! They have to be ones that work without importing CSS from another site.
Modified by Shishio-kun, Nov 19, 2012 1:36 PM
Mar 7, 2012 4:50 PM

Joined: Jan 2010
Posts: 20
lol, this is great.

This code bellow is one that I like to use in order to make navigation easier.

tr:hover td.td1 a, tr:hover td.td1,
tr:hover td.td2 a, tr:hover td.td2{

It changes the color of the rows as you hover over then.

btw, "Hitagi is hot"... lol. ;)
Mar 11, 2012 6:52 PM

Joined: Feb 2010
Posts: 3211
Thanks, and yeah haha she is:

This threads been updated a little since I posted it- I found codes for one part I couldn't target. I still need codes for targeting the .status_selected links individually (that don't need to be imported).