Forum Settings
Forums
Must be a Club Member to Reply 
#1
May 1, 2018 9:38 AM

Offline
Joined: Apr 2014
Posts: 29
This is a custom layout for modern template lists. If you don't know how to install the codes, use the Beginner's Tutorial: click here.

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.


Sorry me for my bad English.
Source Code on GitHub
Unfortunately I have not tested this style in other browsers except Google Chrome

Preview



List Settings

On the List page, do the following. https://myanimelist.net/editprofile.php?go=listpreferences

Anime List



Manga List



After setting the list, go to the list Style Design page and move the slider from classic to modern.
Go to your list style editing page, and turn off these options.
https://myanimelist.net/ownlist/style/theme/1


On the same page, in the Add Custom CSS field, paste the code shown below.
Also, you will automatically receive all updates and fixes, using this import.

Layout Code
@\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkafter";
@\import "https://murakumo-jp.github.io/MyAnimeList-CSS/Eorzea_Collection/Eorzea_Collection.css";


Image Сhanges

If you want to change the images in CSS then paste this after the code and replace the links to your.
I recommend images with resolutions of 1053px250

.list-container .cover-block {
    background-image: url("Your images") !important;
}

Background Image

body {
    background-image: url(Your images) !important;
}


Edit Color

:root{
	--color: #Your color;
}
Modified by MurakumoJP, Apr 3, 2:18 PM
 
#2
May 2, 2018 12:35 PM

Offline
Joined: Feb 2010
Posts: 5963
Wow beautiful! One of my favorite yet. Thanks for sharing here with us in its own topic- I've featured it on the front page, added it to the modern list gallery, and added the links to the start tutorial at the top. I'm sure many people will be using this soon!

Thanks again!
 
#3
May 2, 2018 12:56 PM

Offline
Joined: Apr 2014
Posts: 29
Shishio-kun said:
Wow beautiful! One of my favorite yet. Thanks for sharing here with us in its own topic- I've featured it on the front page, added it to the modern list gallery, and added the links to the start tutorial at the top. I'm sure many people will be using this soon!

Thanks again!
Thank you, if there are any errors with CSS, I will be glad to listen to them and correct.
 
#4
May 5, 2018 5:09 PM

Offline
Joined: May 2012
Posts: 613
MurakumoJP said:
Shishio-kun said:
Wow beautiful! One of my favorite yet. Thanks for sharing here with us in its own topic- I've featured it on the front page, added it to the modern list gallery, and added the links to the start tutorial at the top. I'm sure many people will be using this soon!

Thanks again!
Thank you, if there are any errors with CSS, I will be glad to listen to them and correct.


Thanks a lot. It's an awesome layout and i'm using it already.

There was just one thing i tried to change and it was that green bar behind the list. I'm not THAT found of green so i tried to find that bar in the code, but i couldn't find it so i gave up.

Either way i liked this layout a lot.
Modified by KaeUBW, May 6, 2018 3:51 AM
Signature removed <----- that was totally BS. MAL mods nowadays...sigh.
 
#5
May 6, 2018 12:50 AM

Offline
Joined: Dec 2016
Posts: 731
Kaetokiha said:
MurakumoJP said:
Thank you, if there are any errors with CSS, I will be glad to listen to them and correct.


Thanks a lot. It's an awesome layout and i'm using it already.

There was just one thing i tried to change and it was that green bad behind the list. I'm not THAT found of green so i tried to found that bar in the code, but i coudln't find it so i gave up.

Either way i liked this layout a lot.
You might not have turned off the background image in your settings:

Try turning that off and saving. If it is still an issue try adding this to the bottom of your custom CSS box.
body { background-image: none !important }
 
#6
May 6, 2018 3:22 AM

Offline
Joined: Apr 2014
Posts: 29
Kaetokiha said:
MurakumoJP said:
Thank you, if there are any errors with CSS, I will be glad to listen to them and correct.


Thanks a lot. It's an awesome layout and i'm using it already.

There was just one thing i tried to change and it was that green bad behind the list. I'm not THAT found of green so i tried to found that bar in the code, but i coudln't find it so i gave up.

Either way i liked this layout a lot.
Thank for reporting this error, I have made corrections in CSS and more such error should not be.
 
#7
May 6, 2018 4:20 AM

Offline
Joined: May 2012
Posts: 613
Valerio_Lyndon said:
You might not have turned off the background image in your settings:

Try turning that off and saving. If it is still an issue try adding this to the bottom of your custom CSS box.
body { background-image: none !important }


I had disabled that option in the settings already.

I used the code you posted and it worked perfectly.

Thanks.

MurakumoJP said:
Thank for reporting this error, I have made corrections in CSS and more such error should not be.


I updated my list with the new code and that green bar disappeared. I thought that bard was intentional.
Thanks.

I noticed something else too. I was using the entire code on GitHub and not simply this code....
@import url('https://murakumo-jp.github.io/MyAnimeList-CSS/Eorzea_Collection/Eorzea_Collection.css');
because when i used this code above the covers of the animes got really pixelate.

Because i was trying to remove that green bar before, i already now that this line of the GitHub code is what makes the covers show the way they should.
@charset "UTF-8";
@import url('https://malcat-gen.appspot.com/series?template=.data.image a[href^="/$list/$id/"]::after{background-image:url($series_image)}');

Signature removed <----- that was totally BS. MAL mods nowadays...sigh.
 
#8
May 6, 2018 4:57 AM

Offline
Joined: Apr 2014
Posts: 29
Kaetokiha said:
I updated my list with the new code and that green bar disappeared. I thought that bard was intentional.
Thanks.

I noticed something else too. I was using the entire code on GitHub and not simply this code....
@import url('https://murakumo-jp.github.io/MyAnimeList-CSS/Eorzea_Collection/Eorzea_Collection.css');
because when i used this code above the covers of the animes got really pixelate.

Because i was trying to remove that green bar before, i already now that this line of the GitHub code is what makes the covers show the way they should.
@charset "UTF-8";
@import url('https://malcat-gen.appspot.com/series?template=.data.image a[href^="/$list/$id/"]::after{background-image:url($series_image)}');

The cover of the catfish is updated with a slight delay.
 
#9
May 6, 2018 5:13 AM

Offline
Joined: May 2012
Posts: 613
MurakumoJP said:
Kaetokiha said:
I updated my list with the new code and that green bar disappeared. I thought that bard was intentional.
Thanks.

I noticed something else too. I was using the entire code on GitHub and not simply this code....
@import url('https://murakumo-jp.github.io/MyAnimeList-CSS/Eorzea_Collection/Eorzea_Collection.css');
because when i used this code above the covers of the animes got really pixelate.

Because i was trying to remove that green bar before, i already now that this line of the GitHub code is what makes the covers show the way they should.
@charset "UTF-8";
@import url('https://malcat-gen.appspot.com/series?template=.data.image a[href^="/$list/$id/"]::after{background-image:url($series_image)}');

The cover of the catfish is updated with a slight delay.


No it's not a simple delay, i let the page there and the cover will stay bad like that forever.

You can take a look at my list if you want to see. I took away that line of code so you can see how the covers are appearing.

Edit: I took a look at your list and it also shows the covers wrongly. So i put the code back at my list...now you can compare our lists.
You have Boku no Hero and Darling in the Franxx too so just take a look how different the image on my list and yours look.
Modified by KaeUBW, May 6, 2018 5:20 AM
Signature removed <----- that was totally BS. MAL mods nowadays...sigh.
 
May 6, 2018 5:21 AM

Offline
Joined: Apr 2014
Posts: 29
Kaetokiha said:
MurakumoJP said:
The cover of the catfish is updated with a slight delay.


No it's not a simple delay, i let the page there and the cover will stay bad like that forever.

You can take a look at my list if you want to see. I took away that line of code so you can see how the covers are appearing.
Need to use this code separately from the main CSS.
I understand, thanks. )))
and excuse me for bad english.
 
May 6, 2018 5:39 AM

Offline
Joined: May 2012
Posts: 613
MurakumoJP said:
Kaetokiha said:


No it's not a simple delay, i let the page there and the cover will stay bad like that forever.

You can take a look at my list if you want to see. I took away that line of code so you can see how the covers are appearing.
Need to use this code separately from the main CSS.
I understand, thanks. )))
and excuse me for bad english.


No problem i was just reporting what i found. I'm adding that code and everything is looking fine, thanks.
Signature removed <----- that was totally BS. MAL mods nowadays...sigh.
 
May 6, 2018 8:44 AM

Offline
Joined: Feb 2010
Posts: 5963
@MurakumoJP

I love the affinity thing on the banner! Great customization. I never noticed this was even on the list at all before O_o
 
May 26, 2018 11:10 AM

Offline
Joined: Aug 2013
Posts: 9
I tried to fixe the blurry images using this topic https://myanimelist.net/forum/?topicid=443333 , but none worked =x
 
Aug 20, 2018 8:21 PM

Offline
Joined: Feb 2010
Posts: 5963
OK 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 with everyone! I hate doing it but kinda have to do it for club member's sakes.

Changed it to this:

@\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkafter";
@\import "https://murakumo-jp.github.io/MyAnimeList-CSS/Eorzea_Collection/Eorzea_Collection.css";



Also added "Layout Code" for more consistency between topics
 
Aug 20, 2018 8:21 PM

Offline
Joined: Feb 2010
Posts: 5963
Habura said:
I tried to fixe the blurry images using this topic https://myanimelist.net/forum/?topicid=443333 , but none worked =x


Install the latest version in the OP and it should work fine again
 
Aug 21, 2018 3:15 PM

Offline
Joined: Aug 2013
Posts: 9
Sorry for the trouble, but I already fixed =D
 
Aug 22, 2018 8:04 AM

Offline
Joined: Apr 2014
Posts: 29
Shishio-kun said:
OK 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 with everyone! I hate doing it but kinda have to do it for club member's sakes.

Changed it to this:

@\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkafter";
@\import "https://murakumo-jp.github.io/MyAnimeList-CSS/Eorzea_Collection/Eorzea_Collection.css";



Also added "Layout Code" for more consistency between topics

Thank you, I wanted to make edits on this topic but was busy with other cases.
 
Aug 31, 2018 6:05 PM

Offline
Joined: Aug 2013
Posts: 9
I notice something, I don't know if this is a problem of the CCS or Myanimelist, but when you visualize someone list with this Layout, and you click in animelist or mangalist inside the list, you are redirected to your own list. I tested in your list Murakumo and happened the same thing.
Any ideas? Or I'm missing something? =x
 
Sep 2, 2018 5:02 AM

Offline
Joined: Apr 2014
Posts: 29
Habura said:
I notice something, I don't know if this is a problem of the CCS or Myanimelist, but when you visualize someone list with this Layout, and you click in animelist or mangalist inside the list, you are redirected to your own list. I tested in your list Murakumo and happened the same thing.
Any ideas? Or I'm missing something? =x

Hello, To go to someone else's manga list with this layout click the button above.
Modified by MurakumoJP, Sep 2, 2018 5:09 AM
 
Sep 2, 2018 6:22 AM

Offline
Joined: Aug 2013
Posts: 9
Thanks :D
 
Sep 24, 2018 10:39 AM

Offline
Joined: Apr 2014
Posts: 268
Hello~
I've had some trouble with this layout and it doesn't seem to be just me.
The thing is that the list seems to repeat after a certain point (in my edited AND unedited version. Only the "completed" section seems to be affected)
I see the same issue in OP's list.
So the list just gets crazy long because it just restarts a few times.
I'm using firefox.

Help would be appreciated~


爆ぜろリアル!
弾けろシナプス!
バニッシュメント・ディス・ワールド !


 
Sep 24, 2018 12:16 PM

Offline
Joined: Apr 2014
Posts: 29
UkePaChan said:
Hello~
I've had some trouble with this layout and it doesn't seem to be just me.
The thing is that the list seems to repeat after a certain point (in my edited AND unedited version. Only the "completed" section seems to be affected)
I see the same issue in OP's list.
So the list just gets crazy long because it just restarts a few times.
I'm using firefox.

Help would be appreciated~

Hello.
This very strange, there was no such error before.
There may be a problem with the site.
 
Oct 1, 2018 10:22 AM

Offline
Joined: Aug 2016
Posts: 218
Shishio-kun said:
Habura said:
I tried to fixe the blurry images using this topic https://myanimelist.net/forum/?topicid=443333 , but none worked =x


Install the latest version in the OP and it should work fine again


Strange, i still have problems with blurry images
rest is working and looking great
 
Oct 1, 2018 2:15 PM

Offline
Joined: Feb 2010
Posts: 5963
anemonespotte said:
Shishio-kun said:


Install the latest version in the OP and it should work fine again


Strange, i still have problems with blurry images
rest is working and looking great


Hard to give a solution without seeing the layout on your list

Some of the codes in the OP got reset a bit, but I just fixed them back, so maybe try them again and let us see how it looks to determine what you could
 
Oct 2, 2018 4:20 AM

Offline
Joined: Aug 2016
Posts: 218
Shishio-kun said:


Hard to give a solution without seeing the layout on your list

Some of the codes in the OP got reset a bit, but I just fixed them back, so maybe try them again and let us see how it looks to determine what you could


No idea what you did, but putting those new import codes back and now is working all fine :)
 
Nov 26, 2018 5:43 AM

Offline
Joined: Jun 2014
Posts: 26
Shishio-kun said:
OK 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 with everyone! I hate doing it but kinda have to do it for club member's sakes.

Changed it to this:

@\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkafter";
@\import "https://murakumo-jp.github.io/MyAnimeList-CSS/Eorzea_Collection/Eorzea_Collection.css";



Also added "Layout Code" for more consistency between topics


Thanks a lot for that fix!!
 
Nov 28, 2018 9:19 AM

Offline
Joined: Sep 2012
Posts: 83
Thanks for layout, I really like it.
 
Jan 19, 8:05 PM

Offline
Joined: Aug 2013
Posts: 9
I don't know why but sometimes when I am scrolling my list, specifically the "completed" section, the scroll bar starts to get really big and then the anime starts to repeat o_O
 
Jan 20, 6:12 AM

Offline
Joined: Nov 2017
Posts: 2
Habura said:
I don't know why but sometimes when I am scrolling my list, specifically the "completed" section, the scroll bar starts to get really big and then the anime starts to repeat o_O


I've got the same problem
 
Jan 22, 8:50 AM

Offline
Joined: Apr 2014
Posts: 29
Habura said:
I don't know why but sometimes when I am scrolling my list, specifically the "completed" section, the scroll bar starts to get really big and then the anime starts to repeat o_O

This problem is the site and not the style.
 
Jan 25, 11:53 AM

Offline
Joined: Nov 2018
Posts: 446
@Shishio-kun

Hi! i have a question do you know how to fix the blurry images in my manga list

https://myanimelist.net/mangalist/BenRyan?

btw it's working fine in anime list.

Thanks
 
Jan 25, 2:21 PM

Offline
Joined: Feb 2010
Posts: 5963
BenRyan said:
@Shishio-kun

Hi! i have a question do you know how to fix the blurry images in my manga list

https://myanimelist.net/mangalist/BenRyan?

btw it's working fine in anime list.

Thanks


Try stuff on
https://myanimelist.net/forum/?topicid=439897
 
Feb 3, 12:51 PM

Offline
Joined: May 2015
Posts: 8
Hey, i cant change the principal image.

 
Feb 15, 7:38 AM

Offline
Joined: Jan 2017
Posts: 2
Nice
Simple to edit
But what is this thing that I dont have on the left?
https://i.imgur.com/TSdjfp2.png
https://i.imgur.com/Wid2sA2.png

Did i make something wrong?
 
Feb 15, 8:46 PM

Offline
Joined: Dec 2016
Posts: 731
MHeroine-X said:
Nice
Simple to edit
But what is this thing that I dont have on the left?
https://i.imgur.com/TSdjfp2.png
https://i.imgur.com/Wid2sA2.png

Did i make something wrong?
Nothing wrong. :) That gear icon only displays when there is a notice on the list, such as a few months ago after MAL came back online or some other edge case scenarios. Under normal use it won't be there.
 
Apr 3, 2:27 PM
Offline
Joined: Aug 2016
Posts: 6
@Shishio-kun
@MurakumoJP

There two problems...
The first is the blurry images https://puu.sh/D9Es2.png

And the second... idk why but only me can see the layout... when i try to see my animelist without being logged in, the website shows the default theme lol
https://puu.sh/D9EsU.png

well, im sure i did everything right...
https://puu.sh/D9Etm.png
https://puu.sh/D9EqH.png
https://puu.sh/D9Eub.png

@import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkafter";
@import "https://murakumo-jp.github.io/MyAnimeList-CSS/Eorzea_Collection/Eorzea_Collection.css";
.list-container .cover-block {
background-image: url("https://i.imgur.com/U6iWyNM.jpg") !important;
}
Modified by SilverEyes_, Apr 3, 2:31 PM
 
Apr 3, 2:46 PM

Offline
Joined: Feb 2010
Posts: 5963
SilverEyes_ said:
@Shishio-kun
@MurakumoJP

There two problems...
The first is the blurry images https://puu.sh/D9Es2.png

And the second... idk why but only me can see the layout... when i try to see my animelist without being logged in, the website shows the default theme lol
https://puu.sh/D9EsU.png

well, im sure i did everything right...
https://puu.sh/D9Etm.png
https://puu.sh/D9EqH.png
https://puu.sh/D9Eub.png

@import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkafter";
@import "https://murakumo-jp.github.io/MyAnimeList-CSS/Eorzea_Collection/Eorzea_Collection.css";
.list-container .cover-block {
background-image: url("https://i.imgur.com/U6iWyNM.jpg") !important;
}


You probably need a backslash after @ in the lines that say @import

so like

@\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkafter";
@\import "https://murakumo-jp.github.io/MyAnimeList-CSS/Eorzea_Collection/Eorzea_Collection.css";

.list-container .cover-block {
background-image: url("https://i.imgur.com/U6iWyNM.jpg") !important;
}


This info is under "Fix broken layouts" on the front page, please check there first for any new questions since a lot of them are covered there
 
Apr 3, 3:32 PM
Offline
Joined: Aug 2016
Posts: 6
Shishio-kun said:
SilverEyes_ said:
@Shishio-kun
@MurakumoJP

There two problems...
The first is the blurry images https://puu.sh/D9Es2.png

And the second... idk why but only me can see the layout... when i try to see my animelist without being logged in, the website shows the default theme lol
https://puu.sh/D9EsU.png

well, im sure i did everything right...
https://puu.sh/D9Etm.png
https://puu.sh/D9EqH.png
https://puu.sh/D9Eub.png

@import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkafter";
@import "https://murakumo-jp.github.io/MyAnimeList-CSS/Eorzea_Collection/Eorzea_Collection.css";
.list-container .cover-block {
background-image: url("https://i.imgur.com/U6iWyNM.jpg") !important;
}


You probably need a backslash after @ in the lines that say @import

so like

@\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkafter";
@\import "https://murakumo-jp.github.io/MyAnimeList-CSS/Eorzea_Collection/Eorzea_Collection.css";

.list-container .cover-block {
background-image: url("https://i.imgur.com/U6iWyNM.jpg") !important;
}


This info is under "Fix broken layouts" on the front page, please check there first for any new questions since a lot of them are covered there



Thx, it's all perfect now <3 https://myanimelist.net/animelist/SilverEyes_
 
Apr 3, 4:40 PM

Offline
Joined: Feb 2010
Posts: 5963
SilverEyes_ said:
Shishio-kun said:


You probably need a backslash after @ in the lines that say @import

so like

@\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkafter";
@\import "https://murakumo-jp.github.io/MyAnimeList-CSS/Eorzea_Collection/Eorzea_Collection.css";

.list-container .cover-block {
background-image: url("https://i.imgur.com/U6iWyNM.jpg") !important;
}


This info is under "Fix broken layouts" on the front page, please check there first for any new questions since a lot of them are covered there



Thx, it's all perfect now <3 https://myanimelist.net/animelist/SilverEyes_


yay :D
 
Jul 8, 1:22 AM

Offline
Joined: Jun 2019
Posts: 19
sry im new to this css.can I use this as my manga list?
 
Jul 8, 8:17 PM

Offline
Joined: Feb 2010
Posts: 5963
jotaku20 said:
sry im new to this css.can I use this as my manga list?


Yes I believe you can; there's recommended manga settings in the OP
 
Jul 10, 11:03 PM

Offline
Joined: Jun 2019
Posts: 19
Shishio-kun said:
jotaku20 said:
sry im new to this css.can I use this as my manga list?


Yes I believe you can; there's recommended manga settings in the OP

thx i done it
 
Top