This is a custom layout for modern template lists. If you don't know how to install the codes, click here to view the Beginner's Tutorial. If there are problems: install the latest version, or check the Repair Thread for patches and updates (found here). All premade modern layouts can be found in the gallery by clicking here, and more ways to customize your list can be found here. I recently started to watch anime and because i wanted to experiment a bit with CSS precompilers, i decided it would be fun to create my own theme thingy. Of course this isn't much fun when i can't share it with anyone so i put everything on github and built it in a way so everyone can use it and customize it and have fun with it. I documented all the stuff (e.g. how to use your own banner) on my github page: https://github.com/GenericMale/MyAnimeListTheme  Features
Installation
Alternate versions and source codes Alternatively copy the entire css from one of the following sites: https://genericmale.github.io/MyAnimeListTheme/theme.css http://pasted.co/2a97ea04  For the traditional whole heart icons behind your scores as in the pic above (they were changed by the website to a heart outline) use this version: https://pastebin.com/raw/Uju0DZNC |
Shishio-kunMar 25, 2023 8:58 AM
| Nice, thanks for sharing! edit: thanks for backing up in the opening post, too! |
Shishio-kunApr 1, 2018 4:48 PM
GenericGoose said: Thank you so much but can i maybe ask you to update the backup? Problem is previously the CSS was referencing two assets which where also hosted on my github (the default header background and a font used for the MyAnimeList link) and those where included using a relative URL. So when using the backup those couldnt be loaded :( I changed it so those are not needed anymore and the css is now self-contained. Ah yes, absolutely. Good changes! For anyone randomly reading: you want to always backup the CSS all over because when a layout's source is lost the images, colors, fonts can be nearly or even perfectly replaced, but the written codes cannot be replaced. It's very hard to emulate a layout on screenshots alone. So you should always back up your CSS. I usually back up layouts for designers now due to seeing so many lost for a million reasons. Even Github could go down one day and all it's info be lost! |
| Thanks for this SO GOOD Theme! |
   |
| Thank you for this! |
 |
| Oh cool, done. I notice that the banner seems off, the "How much" thing. Anyways, thanks :D |
|
| Hey man I just used this style looks really good.Just one quick question the writings are all white is there a way to change the colour of the writings?Anyways gr8 job bro :D |
| @GenericGoose: Such success! People love your layout. Congrats and thanks for sharing :D |
GenericGoose said: hehe thx i guess it helped that you put it on top of the club page :D Your layout is clean, it's impressive :D |
| It's so clean and easy on the eyes. Thank you very much. Now trying to find a banner to fit it nicely ^^ |
 |
Hinata_Aries said: Need help! The images are blurry and I tried the solutions from here already. It's due to what I reported here https://myanimelist.net/forum/?topicid=1731403 You can repair a lot of covers for now but not all on yours https://myanimelist.net/forum/?topicid=1732077 |
| Updated the code in the OP so other users and ppl logged out could see the CSS again, and also to show covers again. Hope that's ok, as we have to for club member's sake |
| Does this theme works on manga list? |
JezuThePlumber said: Does this theme works on manga list? I dunno; install it and see what happens? Seems like it should. Worst case usually is it won't say All Manga but All Anime. |
Shishio-kun said: JezuThePlumber said: Does this theme works on manga list? I dunno; install it and see what happens? Seems like it should. Worst case usually is it won't say All Manga but All Anime. I've tried and it "works". I have no visual problems but the manga covers has a lower quality than the original one. Here you can see a capture: (Right click and open in a new tab to see the problem correctly) |
JezuThePlumber said: I believe this is due to your mangalist being private. The tool that generates high resolution cover images can only operate when your list is public. Your animelist is public but your mangalist is restricted.Shishio-kun said: I dunno; install it and see what happens? Seems like it should. Worst case usually is it won't say All Manga but All Anime. I've tried and it "works". I have no visual problems but the manga covers has a lower quality than the original one. Here you can see a capture: (Right click and open in a new tab to see the problem correctly) |
| Ye, now it works perfectly. Ty for the theme <3 |
| Help, my covers is not showing. |
keragamming said: Looks like you don't have images enabled in your list settings. This theme requires them, enabling them should fix the problem.Help, my covers is not showing.  |
Valerio_Lyndon said: keragamming said: Looks like you don't have images enabled in your list settings. This theme requires them, enabling them should fix the problem.Help, my covers is not showing. Thank you it is working! |
GenericGoose said: I think your images are fine now. It just takes a little while for the image script to pick up your list and generate the high resolution covers. How long does it usually take? |
 |
GenericGoose said: Just a few hours usually. But i noticed that you copied the css from the links provided at the bottom and those werent updated to the MAL changes. I fixed that now, so please copy the css again (only the imports on top have changed. those are responsible for the high quality image loading). Thank you very much! It's working now and I really like your theme! |
|
You need a backslash in the codes after each @ @\import "https://malcat-gen.appspot.com/series?template=.data.image a[href^="/$list/$id/"]:after{background-image:url($series_image)}"; @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkafter"; @\import "https://genericmale.github.io/MyAnimeListTheme/theme.css"; .list-menu-float { top: 150px } .header, .list-menu-float, .search-container, .stats, .list-stats, tbody:first-child { color: #ffffff; } |
| Can anyone help me? I'm using this layout and when I try to use advanced settings while in my list, it doesn't work and appears a message saying "myanimelist.net refused to establish connection". |
AlexMasterOtakuP said: Can anyone help me? I'm using this layout and when I try to use advanced settings while in my list, it doesn't work and appears a message saying "myanimelist.net refused to establish connection". MAL is having issues right now for everyone, but this should be cleared up soon its happened before :D |
Shishio-kun said: AlexMasterOtakuP said: Can anyone help me? I'm using this layout and when I try to use advanced settings while in my list, it doesn't work and appears a message saying "myanimelist.net refused to establish connection". MAL is having issues right now for everyone, but this should be cleared up soon its happened before :D I see. Thank you for the information. |
| Thank you for this I’ve been wondering for a while how people changed how their lists look like! |
 |
| Hi everyone. The question may look stupid for a CSS coder, but is there a way to make a very small change to this layout for myself ? By default, the heart (for the rating) has no background color, so scoring may be difficult to see depending on the anime cover (example below). https://imgur.com/jsXnsyx Is there any way to set a red background to these hearts to make it more readable ? Thank you a lot. |
Reply to Mayarra
Hi everyone.
The question may look stupid for a CSS coder, but is there a way to make a very small change to this layout for myself ?
By default, the heart (for the rating) has no background color, so scoring may be difficult to see depending on the anime cover (example below).
https://imgur.com/jsXnsyx
Is there any way to set a red background to these hearts to make it more readable ?
Thank you a lot.
The question may look stupid for a CSS coder, but is there a way to make a very small change to this layout for myself ?
By default, the heart (for the rating) has no background color, so scoring may be difficult to see depending on the anime cover (example below).
https://imgur.com/jsXnsyx
Is there any way to set a red background to these hearts to make it more readable ?
Thank you a lot.
@Mayarra Append this code to the end of the CSS code./* Change Heart icon style from outline to filled color */
.list-container .list-unit .list-table .list-item .list-table-data .data.score::before {
font-weight: bold;
} |
More topics from this board
» [CSS - CLASSIC] Wishes of the heart ~ XXXholic layout by HahaidoShishio-kun - Dec 27, 2015 |
8 |
by Valerio_Lyndon
»»
Apr 12, 7:34 PM |
|
» [CSS-MODERN] ⭐️ Takana_No_Hana's LayoutsShishio-kun - Jun 5, 2021 |
6 |
by NemuSanjou
»»
Apr 9, 7:21 PM |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1204 |
by blickrella
»»
Apr 9, 4:55 PM |
|
» [MODERN - CSS] ⭐ Sailor Moon layout by 5cmShishio-kun - Sep 7, 2020 |
34 |
by Y3337
»»
Mar 31, 11:45 PM |
|
» [BBCODE + VIDEO GUIDE] ⭐️ Full list of BBcodes and BBcode setups on MAL ( 1 2 3 4 )Shishio-kun - Feb 3, 2012 |
158 |
by KeyiOs
»»
Mar 28, 8:32 AM |