Forum Settings
Forums
New
Feb 20, 2023 9:31 AM
#1

Online
Feb 2010
12304
Every way to customize your list layouts can be found here!!

If you are looking for premade layouts for your list, check this thread instead. For older tutorials to customize the classic list style, click here.
See the stickies for all ways to customize MyAnimeList.

If you need help or want to make a request, you can ask in this thread but please check our repair thread for common solutions.



Table of Contents

How to install premade layouts and make changes (go to post)
With video guides, I'll show you how to install layouts and make the most common changes.


Frequently Asked Questions and Help (go to post)


More on changing Backgrounds, Cursor, and Side Characters (go to post)
Includes resources/sites for wallpapers, custom cursors, and character renders


Customizing Preview Pics (go to post)


Add Music and Animations for your list (go to post)


Customizing the Header and Tables (go to post)


Customizing Anime/manga Titles, Fonts, Scores, List Text, and Tags (go to post)
Includes a video guide and resources for fonts


CSS Hosting and Viewing Tutorials (go to post)


How to make your own Original Layouts (go to post)
With video guides





Adding new features to your list with JavaScript
JavaScript will allow you to add new features like changing the default sorting, adding streaming links or English titles, and adding decimal scoring. Unlike with CSS, users won't be able to see these features you add. See all the scripts here:
https://myanimelist.net/forum/?topicid=2075638


Shishio-kunApr 10, 2023 6:21 PM
Reply Disabled for Non-Club Members
Feb 20, 2023 11:16 AM
#2

Online
Feb 2010
12304
Installing premade layouts

Start here if new! With these videos you'll quickly learn how to install custom CSS layouts to your lists. I link you to all the layouts below too!

If you don't want to see the videos, text tutorial alternatives are included in the next post.


How to install a modern-style premade layout







How to add/change backgrounds and preview pics on the modern list style






Making an original theme out of select premade layouts (video)





Valerio_Lyndon's Layout Installer
Makes it a lot easier for you with lots of options to customize designs!

https://myanimelist.net/forum/?topicid=2036380



Shishio-kunFeb 22, 2023 10:55 AM
Feb 21, 2023 7:43 AM
#3

Online
Feb 2010
12304
Frequently Asked Questions and Help


Apply a premade layout to Modern CSS



Remove the default banner



How to add thumbnails (cover pics) to the modern style


How to upload or change the background or banner


How to add a background if MAL says your background or cover image is too large, or if the uploader doesn't work



How to make your wallpaper cover the entire screen on all resolutions



How to change the manga list



How to switch to classic layouts
Shishio-kunMay 1, 2023 2:18 PM
Feb 21, 2023 7:45 AM
#4

Online
Feb 2010
12304
Customizing Background, Cursor, and Side Character











Shishio-kunMay 1, 2023 2:20 PM
Feb 21, 2023 7:46 AM
#5

Online
Feb 2010
12304
Customizing Preview Pics











Shishio-kunMay 1, 2023 2:20 PM
Feb 21, 2023 7:46 AM
#6

Online
Feb 2010
12304
Add Music and Animations for your list












Shishio-kunMay 1, 2023 2:19 PM
Feb 21, 2023 7:47 AM
#7

Online
Feb 2010
12304
Customizing the Header and Tables









Shishio-kunMay 1, 2023 2:19 PM
Feb 21, 2023 7:48 AM
#8

Online
Feb 2010
12304
Customizing Titles, Fonts, Scores, List Text, and Tags











Shishio-kunMay 1, 2023 2:19 PM
Feb 21, 2023 7:48 AM
#9

Online
Feb 2010
12304
CSS Hosting and Viewing Tutorials











Shishio-kunMay 1, 2023 2:19 PM
Feb 21, 2023 7:49 AM

Online
Feb 2010
12304
How to make your own Original Layouts

Making your own original list layout (video)
https://myanimelist.net/forum/?topicid=1788327

Youtube Link: https://www.youtube.com/watch?v=8besPyPQlzQ





All CSS Codes/Find any code (video)
https://myanimelist.net/forum/?topicid=1781239

https://www.youtube.com/watch?v=bI13AHX3jFw





Use Inspect Element to customize your CSS live and find any code (video)
https://myanimelist.net/forum/?topicid=1780591

Youtube Link: https://youtu.be/cTGbVutdqfc


Shishio-kunFeb 21, 2023 8:38 AM
Mar 21, 2023 12:04 PM

Online
Feb 2010
12304
Retro List Tutorials will be moved here
Shishio-kunJan 1, 2024 11:37 AM
Mar 21, 2023 12:05 PM

Online
Feb 2010
12304
A new CSS tutorial was added, regarding text shadow templates:

https://myanimelist.net/forum/?topicid=2083139



Sep 26, 2023 3:59 PM
Offline
Mar 2014
1
A short snippet which moves the edit buttons in the tags column of modern-style lists.
It makes the edit buttons right aligned in their own space within the cell, as they are on classic-style lists.
This can make modern-style lists with tags much less bulky.

.list-table .list-table-data .data.tags {
    text-align: left;
    position: relative;
}
.list-table .list-table-data .data.tags .edit {
    position: absolute;
    width: fit-content;
    height: fit-content;
    right: 6px;
    top: 0;
    bottom: 0;
    margin: auto 0;
}
.list-table .list-table-data .data.tags div {
    float: left;
    max-width: 92px;
}
Sep 26, 2023 7:42 PM

Online
Feb 2010
12304
Reply to Abcow
A short snippet which moves the edit buttons in the tags column of modern-style lists.
It makes the edit buttons right aligned in their own space within the cell, as they are on classic-style lists.
This can make modern-style lists with tags much less bulky.

.list-table .list-table-data .data.tags {
    text-align: left;
    position: relative;
}
.list-table .list-table-data .data.tags .edit {
    position: absolute;
    width: fit-content;
    height: fit-content;
    right: 6px;
    top: 0;
    bottom: 0;
    margin: auto 0;
}
.list-table .list-table-data .data.tags div {
    float: left;
    max-width: 92px;
}
@Abcow

Thank you, we could probably use separate topics on customizing individual parts of the list, so users wouldn't have to first go thru my huge wall of codes from this topic haha
https://myanimelist.net/forum/?topicid=1929120

I can see this sticky being divided up more into what part of the list it's customizing
Nov 27, 2023 1:22 PM
Offline
Aug 2022
1
@Shishio-kun Hello, I would like to know how I can leave all my tags in a single bar like this example:
Nov 28, 2023 12:35 AM

Online
Feb 2010
12304
Reply to ArthurQualquer
@Shishio-kun Hello, I would like to know how I can leave all my tags in a single bar like this example:
@otazinhoArthur For this kinda thing you should always link to the example so I can lift the solution for there, looking at a screenshot all I can do is guess. You should also look in the topic for the layout, it might have come up already, and it's best to ask there since it's specific layout setting

They get separated in the first place because of commas, so you can try to take them out, but to make it one bar from what I see someone can add codes like this 😊

.list-table .list-table-data .data.tags {
    border-radius: 8.5px;
    background: var(--btn-bg);
}

.data.tags {
background: none;
}


If there's anything else though about that you need to ask in the topic for that layout since it's very specific to that template


Shishio-kunNov 28, 2023 3:07 AM
Mar 4, 2024 9:53 PM
Offline
May 2022
1
The tags in this layout are separated by commas, this is quite annoying, is there any way to remove it?
Mar 6, 2024 6:25 PM
平沢唯

Offline
Dec 2016
2206
Reply to Takeshi_The_Goat
The tags in this layout are separated by commas, this is quite annoying, is there any way to remove it?
@Takeshii_67 This thread is a general tutorial thread, it is not related to any specific layout. I also can't see your list to check what you're using because it's private. Removing the commas is a relatively trivial task, but to give you working code it would help to know what layout you're referring to. Can you share the thread or the code for whatever layout you're using?
Aug 15, 2024 6:44 PM
Offline
Mar 2023
1
Hello, is there a way to use different banners on each category page just like the backgrounds? Btw ty for all of the help with the css!
Aug 15, 2024 7:38 PM

Online
Feb 2010
12304
Reply to Ianixx
Hello, is there a way to use different banners on each category page just like the backgrounds? Btw ty for all of the help with the css!
@Ianixx
For your layout, there's Grid Styles 2-5 with multiple banners (you are using Grid Style 1)

https://myanimelist.net/forum/?topicid=1640096


You can also add these above the /*MOVE COVER PICS UP OR DOWN header and change the backgrounds from there
/*ALL ANIME/MANGA BANNER BACKGROUND*/
.list-unit.all_anime .list-status-title:after {
background-image: url(http://i.imgur.com/W6iKnWb.png);
background-size: cover !important;
height: 500px !important;
}
/*CURRENTLY WATCHING BANNER BACKGROUND*/
.list-unit.watching .list-status-title:after,
.list-unit.reading .list-status-title:after  {
background-image: url(http://i.imgur.com/W6iKnWb.png);
background-size: cover !important;
height: 500px !important;
}
/*COMPLETED BANNER BACKGROUND*/
.list-unit.completed .list-status-title:after {
background-image: url(http://i.imgur.com/W6iKnWb.png);
background-size: cover !important;
height: 500px !important;
}
/*ON-HOLD BANNER BACKGROUND*/
.list-unit.onhold .list-status-title:after {
background-image: url(http://i.imgur.com/pPc1BRS.png);
background-size: cover !important;
height: 500px !important;
}
/*DROPPED BANNER BACKGROUND*/
.list-unit.dropped .list-status-title:after {
background-image: url(http://i.imgur.com/XAbWBod.png);
background-size: cover !important;
height: 500px !important;
}
/*PLAN TO BANNER BACKGROUND*/
.list-unit.plantowatch .list-status-title:after,
.list-unit.plantoread .list-status-title:after  {
background-image: url(https://i.imgur.com/uDF1ZIt.jpg);
background-size: cover !important;
height: 500px !important;
} 



For other layouts there's a thread linked here on changing backgrounds in post 4
https://myanimelist.net/forum/?topicid=1911634
Apr 14, 1:11 PM

Offline
Nov 2021
11
Hey, sorry to bother.

I was doing a css template to my List, and I just can't seem to find the css class that identifies that i'm logged into mal, but not on my list.
If anyone could help me, I thank you here in advance.

Apr 14, 1:24 PM

Online
Feb 2010
12304
Reply to DShr11mp19
Hey, sorry to bother.

I was doing a css template to my List, and I just can't seem to find the css class that identifies that i'm logged into mal, but not on my list.
If anyone could help me, I thank you here in advance.
DShr11mp19 said:
I just can't seem to find the css class that identifies that i'm logged into mal, but not on my list.


What do you mean by this, "not on your list"? We can only control list CSS

Are you referring to username stuff? I think the header codes might have what you're looking for
https://myanimelist.net/forum/?topicid=1929120
Apr 14, 7:55 PM
平沢唯

Offline
Dec 2016
2206
Reply to DShr11mp19
Hey, sorry to bother.

I was doing a css template to my List, and I just can't seem to find the css class that identifies that i'm logged into mal, but not on my list.
If anyone could help me, I thank you here in advance.
@DShr11mp19 I think you're looking for the "data-owner" attribute on the <body> tag. You can select it using a CSS attribute selector:
/* List owner view */
body[data-owner="1"] {}

/* Non-owner view */
body[data-owner=""] {}


The [data-owner] attribute only checks login state though. If you want to detect specifically people that are logged in but aren't the list owner, like you said, you would be best served using the :has() selector to detect when the user menu is on the page. Keep in mind some older browsers don't support this yet.
/* Non-owner view (logged in) */
body[data-owner=""]:has(.list-menu-float) {}
/* Non-owner view (logged out) */
body[data-owner=""]:not(:has(.list-menu-float)) {}
Apr 14, 9:11 PM

Online
Feb 2010
12304
Reply to Valerio_Lyndon
@DShr11mp19 I think you're looking for the "data-owner" attribute on the <body> tag. You can select it using a CSS attribute selector:
/* List owner view */
body[data-owner="1"] {}

/* Non-owner view */
body[data-owner=""] {}


The [data-owner] attribute only checks login state though. If you want to detect specifically people that are logged in but aren't the list owner, like you said, you would be best served using the :has() selector to detect when the user menu is on the page. Keep in mind some older browsers don't support this yet.
/* Non-owner view (logged in) */
body[data-owner=""]:has(.list-menu-float) {}
/* Non-owner view (logged out) */
body[data-owner=""]:not(:has(.list-menu-float)) {}
@Valerio_Lyndon

WOW V.L. is amazing!!! @ _ @'

Apr 15, 10:37 AM

Offline
Nov 2021
11
Reply to Valerio_Lyndon
@DShr11mp19 I think you're looking for the "data-owner" attribute on the <body> tag. You can select it using a CSS attribute selector:
/* List owner view */
body[data-owner="1"] {}

/* Non-owner view */
body[data-owner=""] {}


The [data-owner] attribute only checks login state though. If you want to detect specifically people that are logged in but aren't the list owner, like you said, you would be best served using the :has() selector to detect when the user menu is on the page. Keep in mind some older browsers don't support this yet.
/* Non-owner view (logged in) */
body[data-owner=""]:has(.list-menu-float) {}
/* Non-owner view (logged out) */
body[data-owner=""]:not(:has(.list-menu-float)) {}
@Valerio_Lyndon THX!

Well, it works, but it's like you said, :has and :not are not supported in a minority of browsers, so i normally don't even think about them.
But in the end I might just use them so thank you!

Apr 15, 10:43 AM

Offline
Nov 2021
11
Reply to Shishio-kun
DShr11mp19 said:
I just can't seem to find the css class that identifies that i'm logged into mal, but not on my list.


What do you mean by this, "not on your list"? We can only control list CSS

Are you referring to username stuff? I think the header codes might have what you're looking for
https://myanimelist.net/forum/?topicid=1929120
@Shishio-kun sorry for replying only one day later, but if there is any room for changing the whole list system I would suggest adding a new state to data-owner just like Valerio_Lyndon mention to me.

/* List owner view */
body[data-owner="1"] {}

/* Non-owner view */
body[data-owner=""] {} could be annonymous

and [data-owner="0"] could be a new state for a logged user in someone else's list.


But thanks anyways!

Apr 15, 11:42 AM

Online
Feb 2010
12304
Reply to DShr11mp19
@Shishio-kun sorry for replying only one day later, but if there is any room for changing the whole list system I would suggest adding a new state to data-owner just like Valerio_Lyndon mention to me.

/* List owner view */
body[data-owner="1"] {}

/* Non-owner view */
body[data-owner=""] {} could be annonymous

and [data-owner="0"] could be a new state for a logged user in someone else's list.


But thanks anyways!
@DShr11mp19 I can't control what the developers put on the list unfortunately ":D
Reply Disabled for Non-Club Members

More topics from this board

» [CSS/BBCODE] ⭐️ How to view anyone's CSS or BBcodes (for lists, profiles, or clubs)!

Shishio-kun - Feb 6, 2012

37 by sunnysummerday »»
Jun 11, 7:44 PM

» [NEWSLETTER] ✳️ Newly-updated layouts with animations and decimal scores you can customize

Shishio-kun - Jun 3, 2021

16 by Cakeski »»
May 30, 6:43 AM

Sticky: » [ LIST LAYOUTS ] All premade CSS layouts for lists

Shishio-kun - Feb 20, 2023

32 by Zyvox_ »»
May 21, 9:36 PM

» [CSS - Modern] 🍰 Clarified by V.L — a responsive table-based design ( 1 2 3 )

Valerio_Lyndon - Aug 1, 2022

119 by Shishio-kun »»
May 20, 5:49 PM

» [CSS - Modern] ⭐️ Brink by V.L -- Cover-style theme! ( 1 2 3 4 5 ... Last Page )

Valerio_Lyndon - Mar 16, 2019

450 by Shishio-kun »»
May 20, 5:46 PM
It’s time to ditch the text file.
Keep track of your anime easily by creating your own list.
Sign Up Login