New
Feb 20, 2023 9:31 AM
#1
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
| 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 List of Premade Layouts and links: http://myanimelist.net/forum/?topicid=1499058 Repair a broken layout: https://myanimelist.net/forum/?topicid=439897 Youtube Link: https://www.youtube.com/watch?v=FeYbQEpf0l0 How to add/change backgrounds and preview pics on the modern list style Youtube Link: https://www.youtube.com/watch?v=oFbSBAiNPGA 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
| Frequently Asked Questions and Help Apply a premade layout to Modern CSS Step 1: Find List Style Design Just click this link for step 1: http://myanimelist.net/ownlist/style Make sure your list to Modern Style by clicking this button (it may already set). Move on to step 2 afterwards. Step 2: Set and save a default theme Click the bubble under the default theme you want for your anime or manga list. When done, click the Save button uner all the themes. Step 3: Click on the default theme you want to add a layout too. Click the default layout you just selected in step 2 to begin this process of installing a premade layout over it (or, for advanced users, to start customizing the default layout). It will take you to the page where you can customize CSS. Step 4: Go to the section I circled and add the codes for any MODERN-style premade layout you want. CSS for layouts (and other CSS changes) go in the Add Custom CSS section (classic style premade layouts will NOT work here btw). You can view our modern premade layouts and get their codes from here: http://myanimelist.net/forum/?topicid=1499058 If you're a beginner and want to customize your layout more intricately later, I strongly recommend using a Starter Layout first. They have notes built in to make them easy to customize and will teach you CSS basics. Step 5: Save, and finish! Simply scroll down the page past the CSS edit box, and click the save button circled here at the bottom of the page when done. Now you should have the codes or layout you want in, and can start customizing it if you want! Use the next post for that. Remove the default banner Go to the styling page for the type of layout you're using: http://myanimelist.net/ownlist/style And choose the option to remove the cover pic circled here. How to add thumbnails (cover pics) to the modern style MAL comes with its own default cover (thumbnail) style in the modern list design. You can set it by checking Image on this page: http://myanimelist.net/editprofile.php?go=listpreferences Ways to add bigger preview pics are covered in extended tutorials in post #4 below. 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 If MAL says the background image is too large, you'll have to change the background within the premade layout code itself. Don't worry this is very easy and how we did it for years. Here's how: Find BACKGROUND IMAGE, WALLPAPER, or body{, or add this to the bottom of your CSS: body{
background-image: url() !important;
background-size: cover;
background-position: center top;
background-attachment: fixed;
}and go to background-image: url( I've circled it here: Example: http://i.imgur.com/jFOxtpK.png Delete everything within the parenthesis following that (the parenthesis might already be empty. Now upload the wallpaper you want to use to a site like Imgur and get the direct link (circled below). Example: http://i.imgur.com/U9RhJKQ.png Copy and paste that into the parenthesis. It would look like this now: Example: http://i.imgur.com/ayv9ayz.png Then save it with the button circled in the example. It should make the uploaded wallpaper appear on your list. For the cover image, you can use this code: .cover-block .image-container {
background-image: url(https://i.postimg.cc/76f59X5G/989.png);
background-repeat: no-repeat;
background-position: center 10px;
background-size: contain;
height: 500px;
}
#cover-image{
visibility: hidden;
}
.cover-block .image-container.hide {
display: block;
}How to make your wallpaper cover the entire screen on all resolutions Add this to the bottom of your custom CSS: body { background-size: cover !important; } How to change the manga list Simply go back to the http://myanimelist.net/ownlist/style and repeat step 1 with the layout you've chosen for the manga list. How to switch to classic layouts You'll have to switch to the classic CSS template but you can get all the classic CSS layouts here along with tutorials on how to: http://myanimelist.net/forum/?topicid=318587 |
Shishio-kunMay 1, 2023 2:18 PM
Feb 21, 2023 7:45 AM
#4
| Customizing Background, Cursor, and Side Character These are advanced customizations, for the basics like changing wallpaper see the posts above. Custom Cursors https://myanimelist.net/forum/?topicid=1903808 Different wallpapers on each category page and Change the background when clicking on a tag https://myanimelist.net/forum/?topicid=1911634 Adding background images to rows https://myanimelist.net/forum/?topicid=1862823 Add backgrounds to individual parts of your layout https://myanimelist.net/forum/?topicid=1929120 Custom Renders on any layout https://myanimelist.net/forum/?topicid=1923115 Anime Assistant reads your tags https://myanimelist.net/forum/?topicid=1922650 for Takana grid style layouts |
Shishio-kunMay 1, 2023 2:20 PM
Feb 21, 2023 7:46 AM
#5
| Customizing Preview Pics Fixing Preview Pics: https://myanimelist.net/forum/?topicid=439897 How to add thumbnails (cover pics) to the modern style MAL comes with its own default cover (thumbnail) style in the modern list design. You can set it by checking Image on this page: http://myanimelist.net/editprofile.php?go=listpreferences Big Preview Pics on any layout https://myanimelist.net/forum/?topicid=1751705 Big Preview Pics and/or Tags on hover https://myanimelist.net/forum/?topicid=1751661 Changing Individual Preview Pics (Default Layouts) https://myanimelist.net/forum/?topicid=1862442 Changing Individual Preview Pics (Custom layouts) https://myanimelist.net/forum/?topicid=1923123 Highlight and Marking Individual Preview Pics https://myanimelist.net/forum/?topicid=1862823 |
Shishio-kunMay 1, 2023 2:20 PM
Feb 21, 2023 7:46 AM
#6
| Add Music and Animations for your list Add a music player https://myanimelist.net/forum/?topicid=1923093 Add an animated intro to your modern list https://myanimelist.net/forum/?topicid=1562009 Animated Scrollbars https://myanimelist.net/forum/?topicid=1912057 Add Particle Sparkles https://myanimelist.net/forum/?topicid=1911907 Add Cherry Blossoms https://myanimelist.net/forum/?topicid=1911984 Add Snow https://myanimelist.net/forum/?topicid=1911957 |
Shishio-kunMay 1, 2023 2:19 PM
Feb 21, 2023 7:47 AM
#7
| Customizing the Header and Tables Adding background images to rows https://myanimelist.net/forum/?topicid=1862823#msg63177687 Adding glows or colors to rows https://myanimelist.net/forum/?topicid=1862823#msg63177687 Add highlighting rows to your list layout (alternate codes) https://myanimelist.net/forum/?topicid=1567153 Custom Text on Rows https://myanimelist.net/forum/?topicid=1862826 Reposition your list layout https://myanimelist.net/forum/?topicid=1563080 Change default header text to custom text https://myanimelist.net/forum/?topicid=1930157 Add Headers to the modern list style https://myanimelist.net/forum/?topicid=1533551 Category-coloured header bars. https://myanimelist.net/forum/?topicid=1807962 Change the accent colour https://myanimelist.net/forum/?topicid=1807962 Move and customize individual parts of your layout https://myanimelist.net/forum/?topicid=1929120 |
Shishio-kunMay 1, 2023 2:19 PM
Feb 21, 2023 7:48 AM
#8
| Customizing Titles, Fonts, Scores, List Text, and Tags Change any Text Colors on your list https://myanimelist.net/forum/?topicid=1920541 Change Fonts Styles (video) https://myanimelist.net/forum/?topicid=1792455 Youtube Link: https://www.youtube.com/watch?v=5IGsUjxjwnk Text shadow effects https://myanimelist.net/forum/?topicid=2083139 Mark individual titles with icons https://myanimelist.net/forum/?topicid=1862823 Custom Text on Rows https://myanimelist.net/forum/?topicid=1862826 Color-Coded List Titles https://myanimelist.net/forum/?topicid=1807962 Widen tags https://myanimelist.net/forum/?topicid=1862308 Extending tags (mini-reviews) https://myanimelist.net/forum/?topicid=1862826 Customizing tags with colors, font-size, and backgrounds https://myanimelist.net/forum/?topicid=1862308 Color-Coded Tags (one method) https://myanimelist.net/forum/?topicid=1628610 Color-Coded Tags (another method) https://myanimelist.net/forum/?topicid=1826886 Ordering tags (individual scores) https://myanimelist.net/forum/?topicid=1862828 Tag Descriptions https://myanimelist.net/forum/?topicid=1807962 Convert Tags to Notes https://myanimelist.net/forum/?topicid=1807962 Decimal Scores https://myanimelist.net/forum/?topicid=1931627 Add score descriptors on hover https://myanimelist.net/forum/?topicid=1807962 Move and customize individual text of your layout https://myanimelist.net/forum/?topicid=1929120 Anime information CSS generator/tag updater — Javascript Bookmarklet by Valerio_Lyndon/BurntJello https://myanimelist.net/forum/?topicid=1905478 This tool can generate CSS or update your tags with information not usually available on lists, such as:
This allows you to do many things, such as:
|
Shishio-kunMay 1, 2023 2:19 PM
Feb 21, 2023 7:48 AM
#9
| CSS Hosting and Viewing Tutorials Custom CSS hosting (Dropbox method) Hosting CSS and layout files: https://myanimelist.net/forum/?topicid=1911384 Generating Preview Pics and hosting the CSS file: https://myanimelist.net/forum/?topicid=1905344 Custom CSS hosting (Onedrive method) https://myanimelist.net/forum/?topicid=1825686 How to view anyone's CSS https://myanimelist.net/forum/?topicid=399507 |
Shishio-kunMay 1, 2023 2:19 PM
Feb 21, 2023 7:49 AM
#10
| 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
#11
| Retro List Tutorials will be moved here |
Shishio-kunJan 1, 2024 11:37 AM
Mar 21, 2023 12:05 PM
#12
| A new CSS tutorial was added, regarding text shadow templates: https://myanimelist.net/forum/?topicid=2083139 |
Sep 26, 2023 3:59 PM
#13
| 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
#14
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.
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
#15
| @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
#16
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
#17
| 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
#18
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
#19
| 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
#20
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
#21
| 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
#22
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.
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
#23
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.
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
#24
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:
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.
/* 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
#25
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:
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.
/* 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
#26
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.
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
#27
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!
/* 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 customizeShishio-kun - Jun 3, 2021 |
16 |
by Cakeski
»»
May 30, 6:43 AM |
|
Sticky: » [ LIST LAYOUTS ] All premade CSS layouts for listsShishio-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 |