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.  Very easy to customize with the notes in the code! :D Latest Source Codes For anime lists: https://pastebin.com/raw/SwDNvLjD For manga lists: https://pastebin.com/raw/gVDG08FE For anime and manga list sharing the same code: https://pastebin.com/raw/HsLAFS7h When you are finished installing the layout, you can speed up the layout load time by going to line 5 and replacing the usernames SpaceCowboy and Dateyutaka with your own username. Save, and you should still have preview pics but loading much faster. Backup Source code |
Shishio-kunJun 26, 2023 2:43 PM
hi!! i hope this is okay and i'm not being stupid. i really love this layout but it keeps doing this when i install it  adds the F005 etc. and the lines are in the back are also misplaced is there a fix for this?? thank u :) |
blithels said: hi!! i hope this is okay and i'm not being stupid. i really love this layout but it keeps doing this when i install it adds the F005 etc. and the lines are in the back are also misplaced is there a fix for this?? thank u :) New source codes should be fixed now |
| Thanks a lot for this great list! I tweaked it a bit here and there, and I'm very happy with the result! https://myanimelist.net/animelist/lifeiscrazy |
lifeiscrazyJan 7, 2022 1:07 PM
lifeiscrazy said: Thanks a lot for this great list! I tweaked it a bit here and there, and I'm very happy with the result! https://myanimelist.net/animelist/lifeiscrazy It is really nice, screencapped! Maybe we could have different color variations in the future in the OP |
Shishio-kun said: lifeiscrazy said: Thanks a lot for this great list! I tweaked it a bit here and there, and I'm very happy with the result! https://myanimelist.net/animelist/lifeiscrazy It is really nice, screencapped! Maybe we could have different color variations in the future in the OP Thanks, good idea!! :) I like changing up the layouts slightly! Maybe I should try my hand at making one from scratch... sometime :D |
| Hey, is there a way to change the color of all anime, completed, plan to watch... when it rolls down, not when you hover over it? I really can't find it in the code the original dark blue, purplish color isn't the best for the background I'd like to use. |
 |
Tamagami_ said: Hey, is there a way to change the color of all anime, completed, plan to watch... when it rolls down, not when you hover over it? I really can't find it in the code the original dark blue, purplish color isn't the best for the background I'd like to use. https://htmlcolorcodes.com .status-menu-container .status-menu .status-button {
color: rgba(150,150,150,.7) !important;
} |
Avngr said: i wanted to use this as a base for my list and i run into 2 problems. and im sure its ez to fix but im just not as good with css. 1. the font is different To fix the font, you'll need to change the formatting of the font import. Find this text near the top of the CSS:  Add a backslash after the "@" so that it looks like this: @\import "https://fonts.googleapis.com/css?family=Open+Sans:400,700,800"; Avngr said: edit: i just noticed that in the private window the hover to show the cover images also does not work. This is mainly another import formatting issue, but not solely. The best solution here is to replace this line:  With these two lines. This should allow all users to see the cover images. @\import "https://malscraper.azurewebsites.net/covers/all/anime/presets/datatitlebefore"; @\import "https://malscraper.azurewebsites.net/covers/all/manga/presets/datatitlebefore"; If you don't use the mangalist, you can skip the second line if you want. You can tell which is for which list because one line says "anime" and the other says "manga". Avngr said: 2. the position of my username is different/back to the default one. I just used the top pixel comment to adjust it as you can see in the 1st screenshot. also tried the position: fixed but that did nothing. The name positioning is because, by necessity, the logged-out username display is controlled by a different HMTL element than the logged-in username. To fix it, you'll have to reposition this other element: .header a.username {
position: relative;
top: 200px;
left: 30px;
}Avngr said: also is there a way to add an option to sort by name/title? you can click on score, type and progress to sort by that but not go back to name. Since it exists on the default list, yes, we can add it back. It just requires a bit of tweaking to other styles so that there is room for it to display. .list-table-header .header-title {
padding-top: 16px;
}
.list-table .list-table-header .header-title.title {
visibility: visible;
padding-left: 0;
}Avngr said: and lastly, i use dark reader to make mal into darkmode but that also gets rid of the background in the anime/manga lists. is there a fix for that? Can't comment on this as I don't use it, but unless it has a toggle for specific websites or webpages, probably not. The people I've talked to in the past who use that extension ended up disabling it. |
lifeiscrazy said: Thanks a lot for this great list! I tweaked it a bit here and there, and I'm very happy with the result! https://myanimelist.net/animelist/lifeiscrazy I really like what you did here, great colours! And I see you've updated the design to support some of the new features too. Do you mind if I use some of your CSS to update the theme for other people? I won't take your specific colours or image. |
| @Valerio_Lyndon I did want to make an easy-to-recolor version of this before, and have some premade colors, like we did with the basic designs* and the Classic Square layouts which were all heavily used https://myanimelist.net/forum/?topicid=1501171 https://myanimelist.net/forum/?topicid=1198609 And I also wanted to have a PSD silhouette anyone could put into Photopea and replace with their own pics to make them own image for the layout Anyways it'd be awesome to have recoloring in your version of this! * Also the basic designs were used a lot, or at least had a lot of hits, its just no one talked about them since there were virtually no problems with them (and people didn't say thanks in club very much ":D) |
Valerio_Lyndon said: lifeiscrazy said: Thanks a lot for this great list! I tweaked it a bit here and there, and I'm very happy with the result! https://myanimelist.net/animelist/lifeiscrazy I really like what you did here, great colours! And I see you've updated the design to support some of the new features too. Do you mind if I use some of your CSS to update the theme for other people? I won't take your specific colours or image. Hey! Yeah, sure you can :) At first I thought about just hiding the icons.. but in the end I actually didn't mind them but wanted to change them up haha. I tried to do all my changes in separate codes so I could have the original list code if it ever got updates or something. But I think I changed/removed some of the original code too because it messed stuff up XD |
lifeiscrazy said: Valerio_Lyndon said: Do you mind if I use some of your CSS to update the theme for other people? I won't take your specific colours or image. Hey! Yeah, sure you can :) At first I thought about just hiding the icons.. but in the end I actually didn't mind them but wanted to change them up haha. I tried to do all my changes in separate codes so I could have the original list code if it ever got updates or something. But I think I changed/removed some of the original code too because it messed stuff up XD Thanks! I added in some of your codes with some tweaks to the version I'm maintaining. Keeping the codes separate makes a lot of sense, but yes it can be a bit much at times over-riding so much other stuff lol. |
Shishio-kun said: I did want to make an easy-to-recolor version of this before, and have some premade colors, like we did with the basic designs* and the Classic Square layouts which were all heavily used https://myanimelist.net/forum/?topicid=1501171 https://myanimelist.net/forum/?topicid=1198609 And I also wanted to have a PSD silhouette anyone could put into Photopea and replace with their own pics to make them own image for the layout Anyways it'd be awesome to have recoloring in your version of this! * Also the basic designs were used a lot, or at least had a lot of hits, its just no one talked about them since there were virtually no problems with them (and people didn't say thanks in club very much ":D) A PSD is a great idea! I would do it myself, but the tutorial part is harder to do. I should have a recolour section ready soon as well. It'll be in mod form as to keep the original code intact. |
Valerio_LyndonSep 11, 2022 1:59 AM
| Here's all the codes for easy recolouring: You can also find it on the Theme Customiser, along with updated code that doesn't require a cover generator and supports all the new MAL features.  |
Valerio_LyndonJul 24, 2023 4:30 PM
SkyIsDVRK said: Thanks for this cool and clean layout! Just replaced the picture on the right part. Here's my list: https://myanimelist.net/animelist/SkyIsDVRK Nice, glad you like it!! :D |
xnavix said: Hi, i just installed your amazing template and ran into a little problem i was hoping you could help me with. The currently watching option is overlaping with score and type, and i am not sure how to fix it. There is also missing the score and if i may have another request for the button where you choose all anime, currently watching etc. to be moved left and up next to the top of the list? thank you. I think the reason is it's not made for all those columns, so you'd have to cut some out or we'd have to edit it to support more |
| Thanks a bunch for this list! I modified it, and I'm very happy with how the result came out! https://myanimelist.net/animelist/gabitzxa |
 |
Gabitzxa said: Great choice of images and colours!Thanks a bunch for this list! I modified it, and I'm very happy with how the result came out! https://myanimelist.net/animelist/gabitzxa |
Gabitzxa said: Thanks a bunch for this list! I modified it, and I'm very happy with how the result came out! https://myanimelist.net/animelist/gabitzxa Very cool!! 😃 |
Shishio-kun said: Appriciate it! i coudn't do it without your base "template"Gabitzxa said: Thanks a bunch for this list! I modified it, and I'm very happy with how the result came out! https://myanimelist.net/animelist/gabitzxa Very cool!! 😃 Valerio_Lyndon said: I mean hanako kun is pretty cool so ya, it will only be a matter of time until i will decide to change my theme agianGabitzxa said: Great choice of images and colours!Thanks a bunch for this list! I modified it, and I'm very happy with how the result came out! https://myanimelist.net/animelist/gabitzxa |
|
P1kus3ru said: I've been using this list for years and have just updated it today to the newer source code. https://myanimelist.net/animelist/P1kus3ru There is just one thing that is a bit troublesome is the time it takes to load after you try to sort or switch the status. I guess it's because the whole list has to be refetched which takes a bit. I don't mind it that much but my friend told me he finds it annoying that it takes slower to filter than other lists. There isn't anything to fix this right? It's the MALscraper import for big preview pics slowing it down. See the repair sticky (it has a green heart), part B, there's way to replace the MALscraper import with a more personalized one using your username that will be much faster. There's a couple other tips on speeding on layouts in part H, but the main thing is replacing the malscraper with one using your username |
| Opening post was also updated with new source codes that should be easy to edit if you want to speed them up |
Reply to Shiba4
I really like the layout and have replaced the MALscraper import with my personalized one (replaced username) but the preview pictures aren't showing. Is there something else I might be missing? https://myanimelist.net/animelist/Shiba4
@Shiba4 For some reason, despite the cover images not requiring the "Image" column to be ticked, the CSS is written to block cover images until the "Image" column is enabled. To fix this, find this code near line 33... And delete the ".data.image ~ " text from the start of that line. Once done, it should look like this:  That should allow the images to display. Save your changes and check your list. The other solution would probably be to enable images in your list settings, which is a good debugging step for cover images on any list layout. It just isn't required for this one, provided you follow the steps above. |
Reply to Valerio_Lyndon
@Shiba4 For some reason, despite the cover images not requiring the "Image" column to be ticked, the CSS is written to block cover images until the "Image" column is enabled. To fix this, find this code near line 33...
And delete the ".data.image ~ " text from the start of that line. Once done, it should look like this:
That should allow the images to display. Save your changes and check your list.
The other solution would probably be to enable images in your list settings, which is a good debugging step for cover images on any list layout. It just isn't required for this one, provided you follow the steps above.
And delete the ".data.image ~ " text from the start of that line. Once done, it should look like this:
That should allow the images to display. Save your changes and check your list.
The other solution would probably be to enable images in your list settings, which is a good debugging step for cover images on any list layout. It just isn't required for this one, provided you follow the steps above.
| @Valerio_Lyndon Thank you, it worked! Love the layout! |
| I really like the design and minimalism of this but I was wondering is there a way I can move my username and the dropdown box for selecting currently watching, completed, etc. to the other side at the top? Picture for reference of where im talking about https://i.imgur.com/d1ZZik5.png I tried my best to go though and edit things I thought might change it but im not good at all this coding and couldn't find a way. Also when you select currently watching it gets overlapped by the score and progress https://i.imgur.com/aUYGQBS.png Any help would be much appreciated :) |
Reply to Y3337
I really like the design and minimalism of this but I was wondering is there a way I can move my username and the dropdown box for selecting currently watching, completed, etc. to the other side at the top? Picture for reference of where im talking about https://i.imgur.com/d1ZZik5.png I tried my best to go though and edit things I thought might change it but im not good at all this coding and couldn't find a way. Also when you select currently watching it gets overlapped by the score and progress https://i.imgur.com/aUYGQBS.png Any help would be much appreciated :)
The easiest way to move it would be to override the "top" and "left" properties on each relevant element. Here's some code that can be put at the bottom that does that. I used some custom variables (the "--" prepended properties) to avoid repeating our new positions 3 times, which also means it's easier for you to tweak. :root {
--custom-offset-x: -200px;
--custom-offset-y: -360px;
}
.header {
left: calc(50% - 240px + var(--custom-offset-x));
top: calc(100px + var(--custom-offset-y));
transform: translateX(-100%);
}
#status-menu {
left: calc(50% - 300px + var(--custom-offset-x));
top: calc(495px + var(--custom-offset-y));
transform: translateX(-100%);
}
.list-menu-float {
left: calc(50% - 240px + var(--custom-offset-x));
top: calc(450px + var(--custom-offset-y));
transform: translateX(-100%);
}Keep in mind this will not display correct at very small screen widths (it will go off screen), but for most people it will be fine. There are better ways to do this, but they're more complex so I figured we should go with the quickest way for now. We can definitely look at other options if you want though. The text overlap has a couple of different fixes you can apply, depending on which way you prefer. One option is to move the list down a bit, which is fool-proof but loses some of the original charm. .list-table {
padding-top: 20px;
} The other option is to change the text to be shorter, which would be my preferred solution. I've done that by setting the font-size of the regular text to 0 and then adding new text with the ::before selector. :is(.watching,.reading) .list-status-title .text {
font-size: 0;
}
.list-status-title .text::before {
font-size: 25px;
cursor: text;
}
.watching .list-status-title .text::before {
content: "Watching";
}
.reading .list-status-title .text::before {
content: "Reading";
} I love the Frieren theming! Great use of that image. |
Reply to Valerio_Lyndon
The easiest way to move it would be to override the "top" and "left" properties on each relevant element. Here's some code that can be put at the bottom that does that. I used some custom variables (the "--" prepended properties) to avoid repeating our new positions 3 times, which also means it's easier for you to tweak.
Keep in mind this will not display correct at very small screen widths (it will go off screen), but for most people it will be fine. There are better ways to do this, but they're more complex so I figured we should go with the quickest way for now. We can definitely look at other options if you want though.
The text overlap has a couple of different fixes you can apply, depending on which way you prefer. One option is to move the list down a bit, which is fool-proof but loses some of the original charm.
The other option is to change the text to be shorter, which would be my preferred solution. I've done that by setting the font-size of the regular text to 0 and then adding new text with the ::before selector.
I love the Frieren theming! Great use of that image.
:root {
--custom-offset-x: -200px;
--custom-offset-y: -360px;
}
.header {
left: calc(50% - 240px + var(--custom-offset-x));
top: calc(100px + var(--custom-offset-y));
transform: translateX(-100%);
}
#status-menu {
left: calc(50% - 300px + var(--custom-offset-x));
top: calc(495px + var(--custom-offset-y));
transform: translateX(-100%);
}
.list-menu-float {
left: calc(50% - 240px + var(--custom-offset-x));
top: calc(450px + var(--custom-offset-y));
transform: translateX(-100%);
}Keep in mind this will not display correct at very small screen widths (it will go off screen), but for most people it will be fine. There are better ways to do this, but they're more complex so I figured we should go with the quickest way for now. We can definitely look at other options if you want though.
The text overlap has a couple of different fixes you can apply, depending on which way you prefer. One option is to move the list down a bit, which is fool-proof but loses some of the original charm.
.list-table {
padding-top: 20px;
}The other option is to change the text to be shorter, which would be my preferred solution. I've done that by setting the font-size of the regular text to 0 and then adding new text with the ::before selector.
:is(.watching,.reading) .list-status-title .text {
font-size: 0;
}
.list-status-title .text::before {
font-size: 25px;
cursor: text;
}
.watching .list-status-title .text::before {
content: "Watching";
}
.reading .list-status-title .text::before {
content: "Reading";
}I love the Frieren theming! Great use of that image.
| @Valerio_Lyndon This is exactly what I was looking for!! Thank you so much for your awesome skills and knowledge. Valerio_Lyndon said: I love the Frieren theming! Great use of that image. Again thank you! The second I saw the image I knew what had to be done and this template fit perfectly. Your theme customizer is so easy to work with and done so well I cant thank you enough for how much fun it is to customize the themes you have on there. I have like 6 different saved themes all done through that website. Thank you again I cant wait to see more of what you make ＜(´⌯ ̫ ⌯`)＞ |
Y3337Mar 31, 11:49 PM
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 |
7812 |
by mtsRhea
»»
Apr 21, 5:25 AM |
|
» [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 |