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
| 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
| 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
| Customizing Background, Cursor, and Side Character |
Shishio-kunMay 1, 2023 2:20 PM
| Customizing Preview Pics |
Shishio-kunMay 1, 2023 2:20 PM
| Add Music and Animations for your list |
Shishio-kunMay 1, 2023 2:19 PM
| Customizing the Header and Tables |
Shishio-kunMay 1, 2023 2:19 PM
| Customizing Titles, Fonts, Scores, List Text, and Tags |
Shishio-kunMay 1, 2023 2:19 PM
| CSS Hosting and Viewing Tutorials |
Shishio-kunMay 1, 2023 2:19 PM
| 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
| Retro List Tutorials will be moved here |
Shishio-kunJan 1, 11:37 AM
| A new CSS tutorial was added, regarding text shadow templates: https://myanimelist.net/forum/?topicid=2083139   |
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 |
@Shishio-kun Hello, I would like to know how I can leave all my tags in a single bar like this example:  |
Reply to Rolinhaaaa
@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
Reply to Takeshii_67
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? |
More topics from this board
» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )Shishio-kun - Apr 15, 2010 |
7817 |
by hideso
»»
8 hours ago |
|
» [CSS- MODERN] ⭐ Minimal Dashboard layout by 5cm ~ Compact and convenient! ( 1 2 3 )Shishio-kun - Sep 4, 2020 |
121 |
by Pokitaru
»»
Apr 21, 3:25 AM |
|
» [CSS-MODERN] Change list text/font colors on any list layoutShishio-kun - May 4, 2021 |
3 |
by hideso
»»
Apr 20, 4:33 PM |
|
» [CSS] [VIDEO GUIDE] ⭐️ How to change fonts on a list layoutShishio-kun - Jul 15, 2019 |
17 |
by hideso
»»
Apr 20, 4:03 PM |
|
» [CSS][Modern] ☀️ Endless Summer Layout by Cateinya ( 1 2 3 4 5 ... Last Page )Cateinya - Aug 18, 2016 |
309 |
by hideso
»»
Apr 20, 3:56 PM |