[CSS - CLASSIC] How to rename a part of your list layout or add custom text to any part without text

Jan 19, 2013 2:43 PM

Offline

Feb 2010

12786

This topic is part of our CSS Tutorials and Add-ons section:
http://myanimelist.net/forum/?topicid=419405

You can rename any text on your list to another with this trick! In the shot below, I've replaced the header part that normally says "Tags" with "Reviews" (circled).

Here's how! btw never use this to change any text on your list to something misleading, or to rewrite the original text in the Copyright section. Doing so can possibly (or in the case of changing the copyright, will) violate Terms of Use on the site. This trick is only to personalize your list, not to make it misleading or misrepresenting in any way.

Step 1: Find the selector!
You can do this if have the exact selector of the part you want to change. The selector is the code that defines what you want to change, like how body is the selector for the main background or .header_cw is the selector for the currently watching header. It can be hard to find the selector for a particular part you want to change- but heres some tips:

Look in premade layouts! Many of the easier premade layouts label sections in the code to find selectors easily. However no CSS has all the possible selector codes for the anime list layouts. You might have to find and add certain selectors on your own.

If you can't find a selector code for a part of a layout you want to change the name of add text to, then you can ask in this topic. I have the tools to find the anime list selectors quite easily.

If you want to find the selector on your own you can use my tutorial on finding any CSS code. Basically you use Firebug on this layout which has many selectors already mapped out and color coded for easy finding. Firebug will tell you the selector name of any of the individual parts quite easily, and you can identify them by the color marked to each one.

Step 2: Make a :before version of that selector.
This is easy to do once you have the selector, just add :before to the end of it!

If the selector is, say, .table_header:nth-of-type(6), which is the selector for most (but not all) people's Tags header. The before version would simply be:

.table_header:nth-of-type(6):before

Step 3: Clear the text on the original selector and add custom text
Now add codes to the original selector to remove the text from it. Don't remove the original selector completely. Use the code font-size: 0; to remove the text.

Also add content: ""; and font-size: 12px !important; to the before version.

.table_header:nth-of-type(6){
font-size: 0;}

.table_header:nth-of-type(6):before{
content: "";
font-size: 12px !important;}

Anything you place in the quotations will become the new text! For example, using this code

.table_header:nth-of-type(6){
font-size: 0;}

.table_header:nth-of-type(6):before{
content: "Reviews";
font-size: 12px !important;}

on this layout below, replaces "Tags" with "Reviews". See before and after code shots!

before the code

after!

If you have any questions you can ask in this topic.

Shishio-kunSep 1, 2016 9:22 PM

Jul 10, 2015 11:26 AM

Shishio-kun

Offline

Feb 2010

12786

Category links:

.status_not_selected a[href*="status=1"], .status_selected a[href*="status=1"]{
font-size: 0;
}

.status_not_selected a[href*="status=1"]:after, .status_selected a[href*="status=1"]:after{
font-size: 15px;
content:"your text";
}

anime titles:

td a[href="/anime/269/Bleach"]{
font-size: 0;
}

td a[href="/anime/269/Bleach"]:before{
font-size: 15px;
content:"your text";
}

I tried both with your CSS they stay clickable. The number for the anime can be found in the URL for the anime. if the name isn't pastable in the CSS edit box use imports or try cutting down to just the number and the slash after it

Oct 18, 2015 1:21 PM

Blazeblue2010

Offline

Apr 2014

Hi, can you help me with changing the position of the text please? I would like to move the header Watching, completed, etc) to the center but i cant work out how to do that.

See All Discussions

» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page ) Shishio-kun - Apr 15, 2010	7925	by Kiara »» 5 hours ago
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page ) Shishio-kun - Jul 21, 2017	386	by Shishio-kun »» 10 hours ago
Sticky: » [ BBCODE ] All 2023 BBcodes, Guides, and Templates ( 1 2 ) Shishio-kun - Feb 16, 2023	64	by NightmareTala »» Oct 5, 1:08 PM
Sticky: » [ SIGNATURES ~ PROFILES] All guides, generators, and templates Shishio-kun - Feb 16, 2023	35	by iluvmozu »» Oct 4, 11:41 PM
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page ) Valerio_Lyndon - Apr 19, 2018	1262	by Shishio-kun »» Sep 22, 4:35 AM

[CSS - CLASSIC] How to rename a part of your list layout or add custom text to any part without text

More topics from this board

» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )

» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )

Sticky: » [ BBCODE ] All 2023 BBcodes, Guides, and Templates ( 1 2 )

Sticky: » [ SIGNATURES ~ PROFILES] All guides, generators, and templates

» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )

MoreTop Anime

MoreTop Airing Anime

MoreMost Popular Characters