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. Originally made by 5cm with additional changes by Valerio_Lyndon and I. Thanks to both!  Source code: https://pastebin.com/raw/LiPD6TZR Change fonts If the font weight and size of the title, score, or tags bothers you, adjust it with these codes. The first codes controls the title, second codes control the score and last controls the tags. You can remove the font weight to bring back the bold font. Adjust the font size as you want. Change font types with this video https://www.youtube.com/watch?v=5IGsUjxjwnk .list-table .list-table-data .data.title .link
{
font-size: 12px !important;
font-weight: normal !important;}
.list-table .list-table-data .data.score,
.list-table .list-table-data .data.score a {
font-size: 14px !important;
font-weight: normal !important;}
.list-table-data .data.tags {
font-size: 12px !important;
font-weight: normal !important;}Dark transparent version I've added a dark version! :D  code: https://pastebin.com/raw/8byWWj2K Extended Table  Add this to the bottom, adjust the height and top until it suits your screen.
body::before,
body::after {
height: 850px;
}
footer {
top: 918px;
height: 173px;
}
Merge Dates and Days  https://myanimelist.net/forum/?topicid=1862835&show=50#msg63501797 Alternate Style by Svysel  https://myanimelist.net/forum/?topicid=1862835&show=50#msg63010303 |
Shishio-kunFeb 21, 2023 1:03 PM
| Hello, @Shishio-kun I was testing this layout but for some reason the font color was not normal The font color always varied according to which modern layout I use (classic, black with pink etc) I tried what you said to decrease the font thickness and go back to normal but it didn't work How do I solve it?  |
removed-userSep 27, 2020 5:14 PM
YEAHBARAUM said: Hello, @Shishio-kun I was testing this layout but for some reason the font color was not normal The font color always varied according to which modern layout I use (classic, black with pink etc) I tried what you said to decrease the font thickness and go back to normal but it didn't work How do I solve it? Well I think you need to have it on the default theme. Did you try that? Also, try this version of the code. |
soorya said: Hi, I copied the code and pasted it to the CSS editor, and it works great. But I am having issues with uploading a background to the layout. I tried uploading lots of different files from computers with JPEG, JPG, PNG extensions but none work for some reason. The layout works properly but the background is just plain white. I can't upload any background image from my computer. Please help. Thanks! If you're using MAL's built-in uploader, it won't work. This theme uses images that are then specified in the code. To change the background, you should first upload your image to an image hosting website such as Imgur. You can't use an image directly from your PC (if the address looks something like this: C:\Users\soorya\Desktop\image.png then it won't work ) Then you should copy the direct link to the image. You can do this by right clicking the image you just uploaded and selecting "copy image address" (or a similarly phrased option). Example:  Then, find this code near the top of your CSS:  You can replace the highlighted URL within the parentheses with your newly uploaded image URL. Once pasted in, it should look similar to before, with the URL ending in ".png" or ".jpg", etcetera. A direct link to an image almost always ends in a file extension like this. If it doesn't, it probably isn't a direct link. Example of replacing the image:  If you don't like the image being darkened, you can also remove the "opacity" link. Example of doing that (remove exactly as demonstrated here, including the comma):  |
| Added a dark version :D |
| Hey, @Shishio-kun Is there any way to make the list display more entries at a time, this feels too small. |
Cerber_Nov 13, 2020 3:10 PM
| Signature removed. Please follow the signature rules, as defined in the Site & Forum Guidelines. |
Cerber106 said: Hey, @Shishio-kun Is there any way to make the list display more entries at a time, this feels too small. Try adding this body::before, body::after { height: 900px; } footer { top: 918px; height: 173px; } |
| Thanks so much man, it worked! |
| Signature removed. Please follow the signature rules, as defined in the Site & Forum Guidelines. |
Cerber106 said: Thanks so much man, it worked! Awesome :D |
| Thank you so much for this topic it helped a lot!! https://myanimelist.net/forum/?topicid=1499052 I really hope that my problem isn't up there and that i didn't miss it stupidly... You see how the upper header is taking part from the background? so when i scroll down it makes it weird, and i couldn't figure out from the code how to just make my background still and not to have that header thing up :( i hope that my English is understandable and i appreciate every awesome layout you make!! and this the my code btw: |
dimsunshine said: Thank you so much for this topic it helped a lot!! https://myanimelist.net/forum/?topicid=1499052 I really hope that my problem isn't up there and that i didn't miss it stupidly... You see how the upper header is taking part from the background? so when i scroll down it makes it weird, and i couldn't figure out from the code how to just make my background still and not to have that header thing up :( i hope that my English is understandable and i appreciate every awesome layout you make!! and this the my code btw: Are you trying to make the entire background still or have the entire background scroll? |
@dimsunshine Near the top of your code, change the root part to this to keep the entire background still :root { --background: fixed center/cover url(https://image.myanimelist.net/ui/yCHrxjyj0lwjmGEXjAnOyIK0Zl517LA_Qh0gTHP1zwE), fixed center/cover url(https://image.myanimelist.net/ui/fkLITaJTefafxFKPGRzngptT3fPuBZGi-pCFvR6Hv0bP9iUgk11TEXbxH7SeaBxE); } |
| @Shishio-kun Literally i was about to scream when it worked yes thank you i'm grateful that you took from ur time thank you again!! You're truly a a savor |
dimsunshine said: @Shishio-kun Literally i was about to scream when it worked yes thank you i'm grateful that you took from ur time thank you again!! You're truly a a savor Awesome :D |
| How do i put my own header on? |
 |
| @Shishio-kun this code no longer works. im getting black rectangles on either side of my list |
 |
UnseenWords said: @Shishio-kun this code no longer works. im getting black rectangles on either side of my list I just installed it and it works fine, reinstall the source code. |
| @UnseenWords When you edited the root part like this it broke the layout. :root { @\import "https://imgur.com/a/EOkMIRI/presets/";@\import "https://imgur.com/a/EOkMIRI/presets/"; } Only replace the url in the parenthesis with a direct link, the second one is the background. :root { --background: fixed center/cover url(https://i.postimg.cc/JzHSb7Kg/opacity.png), fixed center/cover url(https://i.postimg.cc/Ytj7rMNQ/background.jpg) } |
| @UnseenWords ok what you're seeing is a different error from what I saw. Your layout looks fine on my PC right now in all browsers now though. What is the device and screen resolution you're using? |
| @shishio-kun chrome on a macbook air 2560 by 1600 res |
|
I don't know why it's doing that for you then, I would check your browser zoom. It seems weird the list would be that close up on a resolution that big. Also check Stylish or Stylish extensions if you use them, make sure they aren't altering the CSS in any way with scripts. Add this to the bottom too, and maybe try another wallpaper and see if the problem persists. body{ background-size: cover !important; } You can also check my layout, I'll use this layout for a short time, see if you can see the full wallpaper or the black parts on the sides. This would narrow down the problem a bit. I'm using a really big wallpaper https://myanimelist.net/animelist/Shishio-kun |
Shishio-kun said: I don't know why it's doing that for you then, I would check your browser zoom. It seems weird the list would be that close up on a resolution that big. Also check Stylish or Stylish extensions if you use them, make sure they aren't altering the CSS in any way with scripts. Add this to the bottom too, and maybe try another wallpaper and see if the problem persists. body{ background-size: cover !important; } You can also check my layout, I'll use this layout for a short time, see if you can see the full wallpaper or the black parts on the sides. This would narrow down the problem a bit. I'm using a really big wallpaper https://myanimelist.net/animelist/Shishio-kun yeah Imsee it on urs im going to have to try and another layout. :( really sorry for the waste of time, thanks for your help. ill keep trying later its just like 1am rn and my brain power is running out. thanks for the tips and time. |
|
What do you mean by header? That can have too many meanings. Can you provide a screenshot circling what you mean or describe it? |
Shishio-kun said: where am i supposed to put that code? Cerber106 said: Hey, @Shishio-kun Is there any way to make the list display more entries at a time, this feels too small. Try adding this body::before, body::after { height: 900px; } footer { top: 918px; height: 173px; } anywhere? or do i have to replace something with it |
| SEND ME DA FRIEND REQUEST AND COMMENT ON MY PROFILE <33 I LOVE YUKINO YUKINOSHITA, CHITOGE AND YUNO GASAI.. they changed my life.. every night b4 sleeping i think about them and pray that i meet a yukino/chitoge/yuno irl <33 i will stay virgin for them <33 i know they are out there and i will meet them <33 i love u yukino bbb |
theweaboopenguin said: Shishio-kun said: where am i supposed to put that code? Try adding this body::before, body::after { height: 900px; } footer { top: 918px; height: 173px; } anywhere? or do i have to replace something with it Copy and paste it to the bottom of your CSS where you pasted the layout. Add it to the bottom. |
| Hey, @Shishio-kun For some reason the tags section is a bit tighter then it used too be, Is there any way I can make it a bit wider so that the text isn't as vertical as it is now.  |
| Signature removed. Please follow the signature rules, as defined in the Site & Forum Guidelines. |
Cerber106 said: Hey, @Shishio-kun For some reason the tags section is a bit tighter then it used too be, Is there any way I can make it a bit wider so that the text isn't as vertical as it is now. https://i.imgur.com/8CgRcoi.png If you enabled any other list columns recently, this is probably the cause. Either way, with the width of the list on that theme and the amount of enabled columns, it's not very possible to get more space without changing the design somehow. One option could be to re-position the tags entirely: Another option might be to show more of the tags on hover. |
If I use the default source code, everything works fine: But if I add the bit you posted to make the list display more entries (and change the values slightly to match my personal taste), I get this see through footer that I don't want...  |
PiMaHaMar 17, 2021 12:10 PM
 |
PiMaHa said: If I use the default source code, everything works fine: But if I add the bit you posted to make the list display more entries (and change the values slightly to match my personal taste), I get this see through footer that I don't want... Use this instead, adjust the height and top px until it suits your screen body::before, body::after { height: 850px; } footer { top: 918px; height: 173px; } |
blissom said: Hello, when I paste the code, this happens: https://imgur.com/VZxzpUm not sure what went wrong on my end. This design is for modern lists. You're currently using classic. Switch to modern in your list settings and try again. https://myanimelist.net/ownlist/style |
blissom said: Valerio_Lyndon said: This design is for modern lists. You're currently using classic. Switch to modern in your list settings and try again. https://myanimelist.net/ownlist/style hi yes i noticed and switched it, but it still doesn't look exactly how I want it. sorry i'm still new to css so i can't tell if i'm not doing the obvious LOL What's not looking right? |
blissom said: Valerio_Lyndon said: This design is for modern lists. You're currently using classic. Switch to modern in your list settings and try again. https://myanimelist.net/ownlist/style hi yes i noticed and switched it, but it still doesn't look exactly how I want it. sorry i'm still new to css so i can't tell if i'm not doing the obvious LOL What's not looking right? |
| @blissom The list you have right now doesn't have the codes from the opening post in this Dashboard thread we're posting in now. Right now it has codes from a different layout, seems like an old Classic one. If you want this Dashboard layout, you need to paste the codes from the first post up above to the modern theme you're using. The codes are in the link next to "Source Code" in the opening post. The modern theme you're using is the one you have shaded the bubble next to Anime, on this page https://myanimelist.net/ownlist/style See #3 and maybe #2 under "Common fixes" for what I think the problem is https://myanimelist.net/forum/?topicid=439897 |
@Shishio-kun is it possible to remove  . These options sometimes get in the way of my wallpaper: ( List style, List settings, Logout, History ). If possible I'd even remove Quick Add. PS: If it's not possible to remove them, is it at least possible to make them transparent? |
Cerber_Mar 23, 2021 3:25 AM
| Signature removed. Please follow the signature rules, as defined in the Site & Forum Guidelines. |
Cerber106 said: @Shishio-kun is it possible to remove . These options sometimes get in the way of my wallpaper: ( List style, List settings, Logout, History ). If possible I'd even remove Quick Add. PS: If it's not possible to remove them, is it at least possible to make them transparent? Add all new code to the bottom. Transparent buttons: Remove buttons: |
| @Valerio_Lyndon Thank you so much! |
| Signature removed. Please follow the signature rules, as defined in the Site & Forum Guidelines. |
| Btw for anyone wondering on how to make the text wider ( In the "Tags" section ) if it breaks like it did for me. I found an answer from the forums, just had to look around for it. .list-table .list-table-data .data.tags { width: 200px !important; } This piece of code solved the job easily. You can also use what Valerio told me above if you prefer that kind of style. |
| Signature removed. Please follow the signature rules, as defined in the Site & Forum Guidelines. |
| note to self to update the OP with his codes later D: https://myanimelist.net/forum/?topicid=1862835#msg62456797 https://myanimelist.net/forum/?topicid=1862835#msg62459360 |
| Okay I used the code for the "dark transparent version" but it's not transparent. How to make it transparent like on the preview picture? |
 |
fuyuki said: Okay I used the code for the "dark transparent version" but it's not transparent. How to make it transparent like on the preview picture? Save your anime list to the default theme, add the code to there and use it https://myanimelist.net/ownlist/style On the dark blue and black theme you're using now, it won't be transparent with these codes |
Shishio-kun said: Oh I see, that makes sense. It works now, thanks a lot.fuyuki said: Okay I used the code for the "dark transparent version" but it's not transparent. How to make it transparent like on the preview picture? Save your anime list to the default theme, add the code to there and use it https://myanimelist.net/ownlist/style On the dark blue and black theme you're using now, it won't be transparent with these codes |
|
| Hi, it's me again. First of all: The design looks amazing, and I'm very happy with it. But I have two more questions: 1. At the bottom of my list, there's some whitespace. Is it possible to get rid of that?  2. Instead of using absolute pixel values for the height of the list, is it possible to use some type of relative values, so that the list takes up the same part/percentage of the screen no matter the screen size or resolution? |
|
Warduss123 said: Hey, the layout looks great but idk why those plus buttons appear on my manga list but not on the anime list That's how it's supposed to be! You can see the buttons missing if you check the images at the top of this thread. If you want to edit the number of watched episodes you can just click on it. |
PiMaHaApr 6, 2021 10:20 AM
|
More topics from this board
» [CSS - Modern] 🛠️ Tweaks for lists -- Horizontal tags, descriptions, category-coloured text, accent colour, and more.Valerio_Lyndon - Oct 24, 2019 |
21 |
by Shishio-kun
»»
Nov 28, 9:05 AM |
|
» [BBCode] Font Awesome Guidehideso - Dec 25, 2023 |
8 |
by Shishio-kun
»»
Nov 28, 8:34 AM |
|
Sticky: » 💚 [REPAIR STICKY] Repair/speed up a design + Request a layout fixShishio-kun - Nov 17, 2023 |
33 |
by Shishio-kun
»»
Nov 25, 11:42 PM |
|
» ✳️ Bunkasai 2024 List Design and Graphic Design contests are OPENShishio-kun - Nov 18 |
2 |
by Shishio-kun
»»
Nov 18, 5:01 AM |
|
Sticky: » [ SIGNATURES ~ PROFILES] All guides, generators, and templatesShishio-kun - Feb 16, 2023 |
29 |
by floral_sacrifice
»»
Nov 15, 10:24 AM |