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.  Introduction If you really liked 9anime's (old) website design then this is for you. I thought it would be a fun challenge and put a good deal of work into this theme to replicate the original websites quirks. Most of the page is very close to the original website and copies the behavioural quirks as well as possible without going beyond the bounds of CSS. The page features a cover style design with smooth transitions on hover to display information. I'm very happy with how everything turned out, hopefully you are too! Theme Specifications & Highlights:
  If you have any feedback, I welcome replies. I don't respond to everything but I do read and appreciate it. Changelog • My Other List Designs • Source Code |
Valerio_LyndonJan 7, 10:20 PM
| Using the import bit makes images a bit blurry in list design, this doesn't happen when using the source code directly for some reason. |
| p00p |
sothym said: Thank you for telling me about the issue! It's seemingly not a problem on Chrome so I didn't notice it until now. It took a bit of trial and error but I know what the issue was and can avoid the same mistake in the future. I have changed the forum post so that it shouldn't be a problem for anyone else. :)Using the import bit makes images a bit blurry in list design, this doesn't happen when using the source code directly for some reason. |
| any possible way to paste a background image to here: |
EucliwoodSamaMay 24, 2018 5:30 PM
| i give up this... T.T |
Yes, you need your code like this. I added background-attachment fixed which will keep it from scrolling away to black. Also you can use the waifux2 ap online to upscale the background pic's quality (it will get blurry on widest screens). http://waifu2x.booru.pics @import url(https://valeriolyndon.github.io/MAL-Public-List-Designs/9anime%20Theme/Theme%20-%20Compressed%20FI.css); @import url(https://malcat-gen.appspot.com/series?preset=dataimagelink); body:before { background-color: rgba(51, 51, 51,0.6); background-image: url(http://i.imgur.com/QL28kjB.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; content: ""; filter: blur(1px); height: 100%; left: 0; position: fixed; top: 0; width: 100%; will-change: transform; z-index: -1; } |
| Thank you very much for looking into the issue while I was away, @Shishio-kun. I didn't really think about any customization options when making this theme, sorry for all the trouble! For the sake of making this easier for everyone in the future I changed how the code works a bit. If you are using @import then it should be updated already, if not, you can go to the source code and override your current code with the new stuff (Revision 0.4). Now, you can add an image a couple of different ways, both of which should be pretty easy. The easiest way is to use MAL's built in background image system. Just enable it as you normally would, and it should work. You can use the section below to play with the positioning of the image too, but attachment and repeat will not do anything.  Alternatively, you can add in an image using CSS (don't use both of these methods). This will get around any size restrictions MAL has for images (MAL has a 1mb file size limit when uploading theme images, I believe). You can use this code and replace "URLHERE" with the direct link to whatever image you want to use. body { background-image: url(URLHERE) !important; }If you wanted the background blur effect then Shishio's code will work much better. Hopefully this fixes your issue. :) |
Valerio_LyndonMay 24, 2018 10:32 PM
| When I install the layout I have covers sinking down, even with the latest stuff and I think the right settings. Anyone know why? I can add a fix to the OP soon if not code: @\import "https://valeriolyndon.github.io/MAL-Public-List-Designs/9anime%20Theme/Theme%20-%20Compressed%20FI.css"; @\import "https://malcat-gen.appspot.com/series?preset=dataimagelink"; @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkafter";  |
Shishio-kun said: Wrong preset on MalScraper. I haven't added any code for that preset so it goes screwy. Use dataimagelink instead.When I install the layout I have covers sinking down, even with the latest stuff and I think the right settings. Anyone know why? I can add a fix to the OP soon if not code: @\import "https://valeriolyndon.github.io/MAL-Public-List-Designs/9anime%20Theme/Theme%20-%20Compressed%20FI.css"; @\import "https://malcat-gen.appspot.com/series?preset=dataimagelink"; @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkafter"; |
Valerio_Lyndon said: Shishio-kun said: Wrong preset on MalScraper. I haven't added any code for that preset so it goes screwy. Use dataimagelink instead.When I install the layout I have covers sinking down, even with the latest stuff and I think the right settings. Anyone know why? I can add a fix to the OP soon if not code: @\import "https://valeriolyndon.github.io/MAL-Public-List-Designs/9anime%20Theme/Theme%20-%20Compressed%20FI.css"; @\import "https://malcat-gen.appspot.com/series?preset=dataimagelink"; @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkafter"; damn I made a noob mistake! lol thanks |
I'm going through all the modern layouts and editing the topics to make sure we're all standardized and using the same @import formats so other users can see the layouts (this will hopefully cut down on issues later). I edited the code in the OP a bit to this, so other users and logged out ppl can see the CSS. I hope that's ok. I hate doing it but kinda have to do it for club member's sakes. Changed it to this: @\import "https://valeriolyndon.github.io/MAL-Public-List-Designs/9anime%20Theme/Theme%20-%20Compressed%20FI.css"; @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelink"; |
| still getting the blurry images issue.... |
 |
Slap said: still getting the blurry images issue.... I think the code you're using is outdated You need the solutions from here https://myanimelist.net/forum/?topicid=439897 look under How to fix missing or blurry preview pictures (covers, thumbnails, etc) your layout needs @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelink"; at the top I think |
Shishio-kun said: Slap said: still getting the blurry images issue.... I think the code you're using is outdated You need the solutions from here https://myanimelist.net/forum/?topicid=439897 look under How to fix missing or blurry preview pictures (covers, thumbnails, etc) your layout needs @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelink"; at the top I think Yea I sat down for like an hour doing all that and playing with codes and even waiting some minutes to see if they work and sadly they don’t. Gave up on it in the end. Lol Thanks for the reply though. The help is much appreciated. |
|
Slap said: Shishio-kun said: I think the code you're using is outdated You need the solutions from here https://myanimelist.net/forum/?topicid=439897 look under How to fix missing or blurry preview pictures (covers, thumbnails, etc) your layout needs @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelink"; at the top I think Yea I sat down for like an hour doing all that and playing with codes and even waiting some minutes to see if they work and sadly they don’t. Gave up on it in the end. Lol Thanks for the reply though. The help is much appreciated. OK, well when you want to fix the blurriness for the layout you had just now, all you should need to do is copy and paste this to the top of your current layout CSS. it's different from the one in this topic tho @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelink"; |
Shishio-kunDec 14, 2018 12:45 AM
Slap said: still getting the blurry images issue.... Slap said: Sorry it didn't work, not sure what's happening here. :/ On my end it works fine on both Chromium and Firefox so I can't directly test what's wrong. If you do want to give it another go at any point, I would try adding this code below everything else to see if it helps.Yea I sat down for like an hour doing all that and playing with codes and even waiting some minutes to see if they work and sadly they don’t. Gave up on it in the end. Lol Thanks for the reply though. The help is much appreciated. .data.image img { display: none !important; }If you wouldn't mind, I would love to know what browser & browser version you are using. If it's Chrome or Firefox I don't know that I could do anything more than I already am, but if it's something else it might be an issue I could reproduce and there-by fix. @Shishio-kun I don't think that's the issue, since both this post and the GitHub code all have the import fixes already built in. |
Valerio_LyndonDec 14, 2018 12:53 AM
| How to change anime title names to English names ? help appreciated. (https://i.postimg.cc/gJPzLwrj/Cdre.png) Thanks |
 |
adonix44 said: I can't personally fix this, and unfortunately MAL doesn't have this option built-in. However, you could try using this user-made script: "MAL English Titles". You will need to install a userscript manager before it will work. I recommend Violentmonkey, but there are several other extensions with the same functionality (Violentmonkey for: [Chrome] [Firefox]). Once you've got that, you should be able to click "Install this script" and it there should be a UI that gives you the option of adding it to your browser. How to change anime title names to English names ? help appreciated. (https://i.postimg.cc/gJPzLwrj/Cdre.png) Thanks I cannot vouch for how well the userscript works, but from a quick glance over and preliminary install it seems to do what you want. The code also looks to be safe, but be careful about installing scripts willy-nilly, since some can be potentially harmful. Take the same precautions with userscripts as you would with browser extensions. |
Thank you, I don't know anything about programming, so I like to find a layout like this. |
 |
| thank you, love this style since my classic one is broken can I change the code, that in the hover menu on the covers the "more"-tab is the preset view? for me it's more important than the tags didn't find a line in code for this |
  |
gremlyn said: I've had the same question in the past. It would be nice, but unfortunately, it's not really possible. The information that is displayed after clicking "more" is not actually loaded until you request it, meaning it's impossible to do with CSS. It might be possible with some Javascript (and a browser extension to run it), but I did not have any luck finding a premade script that does such. Nor do I know how to create one at the moment.thank you, love this style since my classic one is broken can I change the code, that in the hover menu on the covers the "more"-tab is the preset view? for me it's more important than the tags didn't find a line in code for this |
Hello I have been using this layout for a few weeks and recently the thumbnail pictures have all disappeared >.> They appear in the setup area but once you leave that they are just gone as the picture below shows |
 |
SoulResonanceMAL said: Hello I have been using this layout for a few weeks and recently the thumbnail pictures have all disappeared >.> They appear in the setup area but once you leave that they are just gone as the picture below shows https://i.imgur.com/iOGPxX7.png From what I hear the cover generator is having some issues again. These problems usually get fixed after a short while, but to fix it now you can add one or both of these to the top of your CSS (whichever you need). These will increase page times significantly, but they're the only other option. Animelist covers: @\import "https://dl.dropboxusercontent.com/s/ywsr2ctgmxgxt3v/animelist_dataimagelink.css"; Mangalist covers: @\import "https://dl.dropboxusercontent.com/s/xkier4ibskg0lny/mangalist_dataimagelink.css"; |
Animelist covers: @import "https://dl.dropboxusercontent.com/s/ywsr2ctgmxgxt3v/animelist_dataimagelink.css"; Mangalist covers: @import "https://dl.dropboxusercontent.com/s/xkier4ibskg0lny/mangalist_dataimagelink.css"; I am not getting any image in My list I Used These links but still no image can you help me see whats wrong |
DragonraihanOct 30, 2022 5:31 AM
 |
DragonraihanAnimeListMangaListMessage said: Animelist covers: @import "https://dl.dropboxusercontent.com/s/ywsr2ctgmxgxt3v/animelist_dataimagelink.css"; Mangalist covers: @import "https://dl.dropboxusercontent.com/s/xkier4ibskg0lny/mangalist_dataimagelink.css"; I am not getting any image in My list I Used These links but still no image can you help me see whats wrong You did not follow the installation correctly. You must enable the "Image" column in your settings.  With the images enabled, you shouldn't actually need those HD "import" codes. They only increase the fidelity at the cost of longer page loads, and are out-of-date now that newer solutions are available. If, and that is a fairly-sized "if", you find the regular images to be too low quality, then you should use these links instead. But they are not required and will only show with the "Image" column enabled, as mentioned previously. @\import "https://malscraper.azurewebsites.net/covers/anime/Dragonraihan/presets/dataimagelink"; @\import "https://malscraper.azurewebsites.net/covers/manga/Dragonraihan/presets/dataimagelink"; |
Valerio_Lyndon said: With the images enabled, you shouldn't actually need those HD "import" codes. They only increase the fidelity at the cost of longer page loads, and are out-of-date now that newer solutions are available. If, and that is a fairly-sized "if", you find the regular images to be too low quality, then you should use these links instead. But they are not required and will only show with the "Image" column enabled, as mentioned previously. @\import "https://malscraper.azurewebsites.net/covers/anime/Dragonraihan/presets/dataimagelink"; @\import "https://malscraper.azurewebsites.net/covers/manga/Dragonraihan/presets/dataimagelink"; Thanks For The Man That Worked |
|
| Hi there i am a relatively old MAL user and and i'm getting older i'm starting to squint my eyes and strain them to see the damn small cover images, when i was searching for a way to make them bigger this theme appeared, i enjoy the the simplistic design of it as ir reminds me of the 9anime site where i watch my anime. However i am not fond of the purple color palete for the list i tried messing around with the theme customizer but i could not find where or how to change the color to a more bluish color, also instead of having the space between the images so darn big that it makes the images go from 6 in a row to 5, is there a way to make it small ?? like a 4 or 6 pixels gap ?? Also if there is theme that does not require to follow the specific list settings i appreciate the recommendation. Sry for the trouble and happy festivities Regards ASilva |
Reply to Asilva
Hi there i am a relatively old MAL user and and i'm getting older i'm starting to squint my eyes and strain them to see the damn small cover images, when i was searching for a way to make them bigger this theme appeared, i enjoy the the simplistic design of it as ir reminds me of the 9anime site where i watch my anime. However i am not fond of the purple color palete for the list i tried messing around with the theme customizer but i could not find where or how to change the color to a more bluish color, also instead of having the space between the images so darn big that it makes the images go from 6 in a row to 5, is there a way to make it small ?? like a 4 or 6 pixels gap ??
Also if there is theme that does not require to follow the specific list settings i appreciate the recommendation.
Sry for the trouble and happy festivities
Regards ASilva
Also if there is theme that does not require to follow the specific list settings i appreciate the recommendation.
Sry for the trouble and happy festivities
Regards ASilva
Asilva said: i am not fond of the purple color palete for the list There are no quick colour controls in this theme as I built it long ago, but it would be possible to change the colours by finding the instance of CSS colours and replacing them if you have any inkling of how to work CSS. Or if you are still interested in the theme I could have that done by tomorrow I'm sure. Asilva said: instead of having the space between the images so darn big that it makes the images go from 6 in a row to 5, is there a way to make it small ?? This can be easily changed by editing the "47.5px" value the mod adds. You'll find it at the bottom of the CSS if you used the Customiser or you can edit it manually. Here's a code example that uses 6px: .list-item:not(:nth-of-type(5n+2)) { margin-left: 6px !important; }This keeps the items left-aligned since the text above is left-aligned as well so it probably looks best, but adjusting the spacing/centering is possible too. Edit: I added an option for this in the Customiser install. Asilva said: if there is theme that does not require to follow the specific list settings i appreciate the recommendation. If you're looking for specifically a grid theme there are a few others in this group such as: Endless Summer https://myanimelist.net/forum/?topicid=1544259 Brink https://myanimelist.net/forum/?topicid=1772180 If you're not bothered what style then there are quite a few other themes with good column choice including several others of mine. https://myanimelist.net/forum/?topicid=2077861 |
Valerio_LyndonJan 2, 9:54 PM
Reply to Valerio_Lyndon
Asilva said:
i am not fond of the purple color palete for the list
i am not fond of the purple color palete for the list
There are no quick colour controls in this theme as I built it long ago, but it would be possible to change the colours by finding the instance of CSS colours and replacing them if you have any inkling of how to work CSS. Or if you are still interested in the theme I could have that done by tomorrow I'm sure.
Asilva said:
instead of having the space between the images so darn big that it makes the images go from 6 in a row to 5, is there a way to make it small ??
instead of having the space between the images so darn big that it makes the images go from 6 in a row to 5, is there a way to make it small ??
This can be easily changed by editing the "47.5px" value the mod adds. You'll find it at the bottom of the CSS if you used the Customiser or you can edit it manually. Here's a code example that uses 6px:
.list-item:not(:nth-of-type(5n+2)) { margin-left: 6px !important; }This keeps the items left-aligned since the text above is left-aligned as well so it probably looks best, but adjusting the spacing/centering is possible too.
Edit: I added an option for this in the Customiser install.
Asilva said:
if there is theme that does not require to follow the specific list settings i appreciate the recommendation.
if there is theme that does not require to follow the specific list settings i appreciate the recommendation.
If you're looking for specifically a grid theme there are a few others in this group such as:
Endless Summer https://myanimelist.net/forum/?topicid=1544259
Brink https://myanimelist.net/forum/?topicid=1772180
If you're not bothered what style then there are quite a few other themes with good column choice including several others of mine. https://myanimelist.net/forum/?topicid=2077861
| @Valerio_Lyndon humm thanks for the reply, i myself have knoledge on how to work with HTML/CSS, in fact the only thing i am missing is understanding javascript. but i guess for this i kinda just need understanding of HTML and CSS. Also were do i get the raw CSS code ?? i kinda use Notepad++ or VSCode for HTML/CSS/JavaScript works so i might be able to apply the changes i want myself but for that need the HTML as well so i can see were the CSS selectors are being defined on the HTML. Also in the mean time i found another one of your themes and instaled it on my list. so far it is doing what i want exept there are some information that gets overlaped that could be fixed but thatsnot important, it also takes a bit of time loading the page. If not mistaken the theme i currently have is this one - https://myanimelist.net/forum/?topicid=1723114 |
Reply to Asilva
@Valerio_Lyndon
humm thanks for the reply, i myself have knoledge on how to work with HTML/CSS, in fact the only thing i am missing is understanding javascript. but i guess for this i kinda just need understanding of HTML and CSS.
Also were do i get the raw CSS code ?? i kinda use Notepad++ or VSCode for HTML/CSS/JavaScript works so i might be able to apply the changes i want myself but for that need the HTML as well so i can see were the CSS selectors are being defined on the HTML.
Also in the mean time i found another one of your themes and instaled it on my list. so far it is doing what i want exept there are some information that gets overlaped that could be fixed but thatsnot important, it also takes a bit of time loading the page.
If not mistaken the theme i currently have is this one - https://myanimelist.net/forum/?topicid=1723114
humm thanks for the reply, i myself have knoledge on how to work with HTML/CSS, in fact the only thing i am missing is understanding javascript. but i guess for this i kinda just need understanding of HTML and CSS.
Also were do i get the raw CSS code ?? i kinda use Notepad++ or VSCode for HTML/CSS/JavaScript works so i might be able to apply the changes i want myself but for that need the HTML as well so i can see were the CSS selectors are being defined on the HTML.
Also in the mean time i found another one of your themes and instaled it on my list. so far it is doing what i want exept there are some information that gets overlaped that could be fixed but thatsnot important, it also takes a bit of time loading the page.
If not mistaken the theme i currently have is this one - https://myanimelist.net/forum/?topicid=1723114
| @Asilva If you're looking for the readable (uncompressed) CSS then it's available through the manual install or the source code linked in the main post. The HTML can be seen on your anime or manga list using Inspect Element. You can modify the CSS live in the browser using MAL's editor or Firefox's "Style Editor" in the dev tools (same location as Inspect Element). |
Reply to Valerio_Lyndon
@Asilva If you're looking for the readable (uncompressed) CSS then it's available through the manual install or the source code linked in the main post.
The HTML can be seen on your anime or manga list using Inspect Element. You can modify the CSS live in the browser using MAL's editor or Firefox's "Style Editor" in the dev tools (same location as Inspect Element).
The HTML can be seen on your anime or manga list using Inspect Element. You can modify the CSS live in the browser using MAL's editor or Firefox's "Style Editor" in the dev tools (same location as Inspect Element).
| @Valerio_Lyndon humm ok thanks, this weekend if i dont have anything pressing to do i might try and do some changes. I am kinda used to creating HTML and CSS from scrath so this will be a nice chalange for me. Also do you recomend using firefox for this ?? i am a google chrome user so if firefox is better for this i might need to install it. Initialy i tought of using notepad++ or VSCode to make the changes on the CSS, but that way i have no way of seeing the changes on the spot. How do you usualy do it ?? Also is MAL Editor that place were we paste the CSS on the list style settings ? |
Reply to Asilva
@Valerio_Lyndon humm ok thanks, this weekend if i dont have anything pressing to do i might try and do some changes. I am kinda used to creating HTML and CSS from scrath so this will be a nice chalange for me.
Also do you recomend using firefox for this ?? i am a google chrome user so if firefox is better for this i might need to install it.
Initialy i tought of using notepad++ or VSCode to make the changes on the CSS, but that way i have no way of seeing the changes on the spot. How do you usualy do it ?? Also is MAL Editor that place were we paste the CSS on the list style settings ?
Also do you recomend using firefox for this ?? i am a google chrome user so if firefox is better for this i might need to install it.
Initialy i tought of using notepad++ or VSCode to make the changes on the CSS, but that way i have no way of seeing the changes on the spot. How do you usualy do it ?? Also is MAL Editor that place were we paste the CSS on the list style settings ?
| @Asilva I meant the list style settings, yeah; That's how I got started on MAL since it is an easy way to apply the CSS. The editor is just kind of... small and awkward lol. If you don't mind installing Firefox then yes, having their dev tools is a definite step up. Editing CSS in Chrome dev tools is a clunky and error-prone process, where-as on Firefox I jump between the "Inspector" and "Style Editor" tabs which make it relatively easy to edit CSS on the fly. I only use text editors for basic edits and file management because anything more complex requires testing it on the page, although I know some people like using VSCode because it has auto-complete. I guess what I'm saying is give Firefox a go but don't feel tied to it if you don't like it. If you are more methodical you might prefer writing larger chunks with VSCode (and a reference of the HTML of course), or you could try some Chrome extensions which allow live CSS editing (I used a few of these some years ago). |
Reply to Valerio_Lyndon
@Asilva I meant the list style settings, yeah; That's how I got started on MAL since it is an easy way to apply the CSS. The editor is just kind of... small and awkward lol. If you don't mind installing Firefox then yes, having their dev tools is a definite step up. Editing CSS in Chrome dev tools is a clunky and error-prone process, where-as on Firefox I jump between the "Inspector" and "Style Editor" tabs which make it relatively easy to edit CSS on the fly. I only use text editors for basic edits and file management because anything more complex requires testing it on the page, although I know some people like using VSCode because it has auto-complete.
I guess what I'm saying is give Firefox a go but don't feel tied to it if you don't like it. If you are more methodical you might prefer writing larger chunks with VSCode (and a reference of the HTML of course), or you could try some Chrome extensions which allow live CSS editing (I used a few of these some years ago).
I guess what I'm saying is give Firefox a go but don't feel tied to it if you don't like it. If you are more methodical you might prefer writing larger chunks with VSCode (and a reference of the HTML of course), or you could try some Chrome extensions which allow live CSS editing (I used a few of these some years ago).
| @Valerio_Lyndon Ok thanks for the explanation, right now my course started again since the festivities are over, and i'm am backlogged again with work making a personal website/portfolio using HTML/CSS/JavaScript witch is a lot hard then i was expecting. So i will try and test changing the CSS, when i have some free time. i already found the link for the source code of this list on your Git so no need to worry about that. If i feel like it i might give it a shot and try to come up with a style of my own, might be fun to do and i will train my CSS skills :) |
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 |