Forum Settings
Forums
Must be a Club Member to Reply 
#1
Apr 19, 2018 1:18 AM

Offline
Joined: Dec 2016
Posts: 731
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 Sticky for patches and updates (found here).

All premade modern layouts can be found in the gallery by clicking 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:
  • Works on modern anime and mangalists.
  • Lots of information packed into a small space!
  • Won't change to a new design a month after you painstakingly copy the old design to a MAL theme (I promise!).


Installation
1 Change your anime list display options in your profile at myanimelist.net/editprofile.php?go=listpreferences to match these settings:


2 Go to your list style editing page, found at myanimelist.net/ownlist/style/theme/1, and turn off these options:


3 On the same page as the last step, find the CSS box underneath the "Add Custom CSS" header. Make sure it is empty, then copy-paste the code from the link below into the box.
Source Code


Further Instructions & Modifications




FAQ & Help

Cover images for recently added anime are blurry?
The generator I make use of has a 12 hour cooldown before the data refreshes. Try waiting 24 hours and seeing if the problem persists.

All cover images are blurry?
You may have a private list. The cover generator requires a publicly accessible list to do its magic. If your list is public and it still isn't working, the generator may be broken or your code incorrect. If the main generator is broken or you wish to keep your list private, you can use the alternative option in the spoiler below. Please note that the below solution is far inferior to the main generator, so I only recommend using it if you are 100% sure you need it.


Final Notes
If you have issues, feedback, a question, or anything else, I welcome replies! I may not respond to everything but I do read and appreciate it. :3

Links
ChangelogMy Other List DesignsSource Code
Modified by Valerio_Lyndon, Jul 10, 3:17 PM
 
#2
May 23, 2018 9:41 PM

Offline
Joined: Jun 2017
Posts: 88
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
 
#3
May 23, 2018 11:18 PM

Offline
Joined: Dec 2016
Posts: 731
sothym said:
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.
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. :)
 
#4
May 24, 2018 3:38 PM
Offline
Joined: Jan 2017
Posts: 8
any possible way to paste a background image to here:
Modified by TowelieM3st3R, May 24, 2018 5:30 PM
 
#5
May 24, 2018 5:32 PM
Offline
Joined: Jan 2017
Posts: 8
i give up this... T.T

 
#6
May 24, 2018 5:49 PM

Offline
Joined: Feb 2010
Posts: 5969
TowelieM3st3R said:
any possible way to paste a background image to here:


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;
}
 
#7
May 24, 2018 6:21 PM

Offline
Joined: Dec 2016
Posts: 731
Thank you very much for looking into the issue while I was away, @Shishio-kun.

TowelieM3st3R said:
any possible way to paste a background image to here:
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. :)
Modified by Valerio_Lyndon, May 24, 2018 10:32 PM
 
#8
Aug 20, 2018 8:42 PM

Offline
Joined: Feb 2010
Posts: 5969
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";

 
#9
Aug 20, 2018 8:45 PM

Offline
Joined: Dec 2016
Posts: 731
Shishio-kun said:
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";

Wrong preset on MalScraper. I haven't added any code for that preset so it goes screwy. Use dataimagelink instead.
 
Aug 20, 2018 8:46 PM

Offline
Joined: Feb 2010
Posts: 5969
Valerio_Lyndon said:
Shishio-kun said:
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";

Wrong preset on MalScraper. I haven't added any code for that preset so it goes screwy. Use dataimagelink instead.


damn I made a noob mistake! lol thanks
 
Aug 20, 2018 8:48 PM

Offline
Joined: Feb 2010
Posts: 5969

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";
 
Dec 13, 2018 7:32 AM
Mr. Yazawa

Offline
Joined: Jan 2017
Posts: 136
still getting the blurry images issue....
 
Dec 13, 2018 4:33 PM

Offline
Joined: Feb 2010
Posts: 5969
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
 
Dec 13, 2018 6:09 PM
Mr. Yazawa

Offline
Joined: Jan 2017
Posts: 136
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.
 
Dec 13, 2018 6:35 PM

Offline
Joined: Feb 2010
Posts: 5969
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";

Modified by Shishio-kun, Dec 14, 2018 12:45 AM
 
Dec 14, 2018 12:29 AM

Offline
Joined: Dec 2016
Posts: 731
Slap said:
still getting the blurry images issue....
Slap said:
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.
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.
.data.image img { display: none !important; }
What this should do is remove the low resolution covers entirely. If you can see the high rez covers properly after adding this then it must be an issue with the theme and browser interacting. In this case, I could probably fix it for you and everyone else by changing how I position the covers. If, instead, there are no covers at all, then it's a problem with the generator not loading the high rez images which is a whole separate issue (could be your browser blocking the request or various other reasons).

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.
Modified by Valerio_Lyndon, Dec 14, 2018 12:53 AM
 
Apr 12, 6:52 PM
Offline
Joined: Apr 2017
Posts: 42
How to change anime title names to English names ? help appreciated. (https://i.postimg.cc/gJPzLwrj/Cdre.png)
Thanks
 
Apr 12, 7:29 PM

Offline
Joined: Dec 2016
Posts: 731
adonix44 said:
How to change anime title names to English names ? help appreciated. (https://i.postimg.cc/gJPzLwrj/Cdre.png)
Thanks
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.

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.
 
Top