Forum Settings
Forums
#1
Mar 10, 2018 1:02 PM
Offline
Joined: Feb 2018
Posts: 11
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.

I recently started to watch anime and because i wanted to experiment a bit with CSS precompilers, i decided it would be fun to create my own theme thingy.

Of course this isn't much fun when i can't share it with anyone so i put everything on github and built it in a way so everyone can use it and customize it and have fun with it.

I documented all the stuff (e.g. how to use your own banner) on my github page: https://github.com/GenericMale/MyAnimeListTheme



Features

  • Responsive
  • Tested on Chrome, Firefox, IE11, Edge
  • Support for custom headers using the MAL background selector
  • All controls still in place and fully functional (with the exception of the More button)
  • Shows Title, Status (Watched, Planned etc), Episodes, Big Images, User Score, Season, Type (TV, Movie etc), Rating (PG-13, R etc)
  • Additionally supports sorting by Aired Dates, Watched Dates, Storage, Priority


Installation

  1. In your MAL Account Settings open the Tab List Style Design, select Modern, click on the Default Theme and hit Save.
  2. Go to the Lists tab and decide on which information to show. At least Episodes and Image is required. Optional but highly recommended is Score, Premiered, Type and Rating. Additionally the following fields will just give you additional sort options but the data is not shown in this theme: Aired Dates, Start/End Dates, Storage and Priority. Don't forget to click the Save button!
  3. Go to List Style Design again and click on the preview image of the Default Theme.
  4. On the left side expand Add Custom CSS and paste in the following code:
    @\import "https://malcat-gen.appspot.com/series?template=.data.image a[href^="/$list/$id/"]:after{background-image:url($series_image)}";
    @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkafter";
    @\import "https://genericmale.github.io/MyAnimeListTheme/theme.css";
    
    .list-menu-float {
      top: 150px
    }
    
    .header, .list-menu-float, .search-container, .stats, .list-stats, tbody:first-child {
      color: #ffffff;
    }
    

  5. Select "No" next to "Show cover image" or upload a custom banner using the Cover Image selector and change the 150px in the css to the height of your image (to align the profile icons). The banner is the part that is shown above the list.
  6. (optional) When using a bright banner, you might wanna change the button icons and the text from #ffffff (white) to a darker color in the css to make them more visible.
  7. (optional) Use a custom background image by expanding "Background Image" and upoading your own image. The background image will be shown behind the list.
  8. Click preview and check how it will look and when you are happy with it, click save and enjoy your fancy new MAL page.


Alternatively copy the entire css from one of the following sites:
https://genericmale.github.io/MyAnimeListTheme/theme.css
http://pasted.co/2a97ea04

Modified by Shishio-kun, Jul 11, 6:37 PM
 
#2
Mar 12, 2018 9:18 PM

Offline
Joined: Feb 2010
Posts: 5975
Nice, thanks for sharing!

edit: thanks for backing up in the opening post, too!
Modified by Shishio-kun, Apr 1, 2018 4:48 PM
 
#3
Mar 30, 2018 1:19 PM
Offline
Joined: Feb 2018
Posts: 11
Thank you so much but can i maybe ask you to update the backup?
Problem is previously the CSS was referencing two assets which where also hosted on my github (the default header background and a font used for the MyAnimeList link) and those where included using a relative URL.
So when using the backup those couldnt be loaded :(

I changed it so those are not needed anymore and the css is now self-contained.
 
#4
Mar 30, 2018 5:30 PM

Offline
Joined: Feb 2010
Posts: 5975
GenericGoose said:
Thank you so much but can i maybe ask you to update the backup?
Problem is previously the CSS was referencing two assets which where also hosted on my github (the default header background and a font used for the MyAnimeList link) and those where included using a relative URL.
So when using the backup those couldnt be loaded :(

I changed it so those are not needed anymore and the css is now self-contained.


Ah yes, absolutely. Good changes!

For anyone randomly reading: you want to always backup the CSS all over because when a layout's source is lost the images, colors, fonts can be nearly or even perfectly replaced, but the written codes cannot be replaced. It's very hard to emulate a layout on screenshots alone. So you should always back up your CSS. I usually back up layouts for designers now due to seeing so many lost for a million reasons. Even Github could go down one day and all it's info be lost!
 
#5
Apr 1, 2018 5:09 AM
Offline
Joined: Feb 2018
Posts: 11
I changed the css output to make it more readable and put the stuff that most people might wanna change to the top and dropped the inline font.
The backup is now part of my original post so you don't have to update it for me :D
thx!
 
#6
Apr 1, 2018 9:22 AM

Offline
Joined: Jun 2014
Posts: 26
Thanks for this SO GOOD Theme!
 
#7
Apr 1, 2018 2:13 PM
Offline
Joined: Feb 2018
Posts: 11
oh thx i'm glad you like it.

i changed the style a bit when you move your mouse over the covers.
instead of increasing the cover size it's now adding a shadow.
i would be interested if you like this better or not.
imho it's a bit more in tune with the rest of the theme this way.

you will get my changes automatically when you use the @import as in my original post. if you dont want this, copy the entire css from the links at the end ;)
 
#8
Apr 1, 2018 11:45 PM

Offline
Joined: Feb 2013
Posts: 2
Thank you for this!



 
#9
Apr 2, 2018 3:50 AM
Offline
Joined: Feb 2018
Posts: 11
You're welcome! :D
One small thing: I would suggest to choose "No" for "Show cover image" on the theme settings (or upload your own banner).
The default MAL image doesnt work so well with this theme.
I changed the installation instructions to point this out.
 
Apr 2, 2018 11:23 PM

Offline
Joined: Feb 2013
Posts: 2
Oh cool, done. I notice that the banner seems off, the "How much" thing. Anyways, thanks :D



 
Apr 7, 2018 9:31 PM

Offline
Joined: Feb 2018
Posts: 16
Hey man I just used this style looks really good.Just one quick question the writings are all white is there a way to change the colour of the writings?Anyways gr8 job bro :D
 
Apr 8, 2018 2:56 AM
Offline
Joined: Feb 2018
Posts: 11
Hey! I'm glad you like it :)

Which text do you mean exactly?

For the text and the buttons in the header theres a description on how to do it in my original post:

6. When using a bright banner, you might wanna change the button icons and the text from #ffffff (white) to a darker color in the css to make them more visible.

So for example to make the buttons and the text grey you can use:

.header, .list-menu-float, .search-container, .stats, .list-stats, tbody:first-child {
  color: #aaaaaa;
}



Changing also all other text colors is more work.
Modified by GenericGoose, Apr 8, 2018 2:44 PM
 
Apr 8, 2018 10:58 AM

Offline
Joined: Feb 2010
Posts: 5975
@GenericGoose: Such success! People love your layout. Congrats and thanks for sharing :D
 
Apr 8, 2018 3:20 PM
Offline
Joined: Feb 2018
Posts: 11
hehe thx i guess it helped that you put it on top of the club page :D
 
Apr 9, 2018 8:30 PM

Offline
Joined: Nov 2009
Posts: 1630
GenericGoose said:
hehe thx i guess it helped that you put it on top of the club page :D

Your layout is clean, it's impressive :D
 
Apr 17, 2018 8:27 AM

Offline
Joined: May 2015
Posts: 20
It's so clean and easy on the eyes. Thank you very much. Now trying to find a banner to fit it nicely ^^


 
May 27, 2018 3:02 PM
Offline
Joined: Apr 2016
Posts: 5
Need help! The images are blurry and I tried the solutions from here already.
 
May 27, 2018 3:52 PM

Offline
Joined: Feb 2010
Posts: 5975
Hinata_Aries said:
Need help! The images are blurry and I tried the solutions from here already.


It's due to what I reported here
https://myanimelist.net/forum/?topicid=1731403

You can repair a lot of covers for now but not all on yours
https://myanimelist.net/forum/?topicid=1732077
 
May 27, 2018 5:06 PM
Offline
Joined: Apr 2016
Posts: 5
Thanks! I'll give it a try later.
 
Aug 20, 2018 9:12 PM

Offline
Joined: Feb 2010
Posts: 5975
Updated the code in the OP so other users and ppl logged out could see the CSS again, and also to show covers again. Hope that's ok, as we have to for club member's sake
 
Aug 27, 2018 4:42 PM
Offline
Joined: Feb 2018
Posts: 11
Thank you so much for updating it!!!
 
Nov 11, 2018 2:13 PM

Offline
Joined: Apr 2016
Posts: 8
Does this theme works on manga list?
あの日見た花の名前を僕達はまだ知らない。
 
Nov 11, 2018 3:42 PM

Offline
Joined: Feb 2010
Posts: 5975
JezuThePlumber said:
Does this theme works on manga list?


I dunno; install it and see what happens? Seems like it should. Worst case usually is it won't say All Manga but All Anime.
 
Nov 12, 2018 2:23 AM

Offline
Joined: Apr 2016
Posts: 8
Shishio-kun said:
JezuThePlumber said:
Does this theme works on manga list?


I dunno; install it and see what happens? Seems like it should. Worst case usually is it won't say All Manga but All Anime.


I've tried and it "works". I have no visual problems but the manga covers has a lower quality than the original one.

Here you can see a capture:

(Right click and open in a new tab to see the problem correctly)
あの日見た花の名前を僕達はまだ知らない。
 
Nov 12, 2018 7:06 PM

Offline
Joined: Dec 2016
Posts: 733
JezuThePlumber said:
Shishio-kun said:


I dunno; install it and see what happens? Seems like it should. Worst case usually is it won't say All Manga but All Anime.


I've tried and it "works". I have no visual problems but the manga covers has a lower quality than the original one.

Here you can see a capture:

(Right click and open in a new tab to see the problem correctly)
I believe this is due to your mangalist being private. The tool that generates high resolution cover images can only operate when your list is public. Your animelist is public but your mangalist is restricted.
 
Nov 13, 2018 4:15 AM

Offline
Joined: Apr 2016
Posts: 8
Ye, now it works perfectly.
Ty for the theme <3
あの日見た花の名前を僕達はまだ知らない。
 
Feb 16, 3:54 PM

Offline
Joined: Oct 2013
Posts: 10202
Help, my covers is not showing.
 
Feb 16, 4:08 PM

Offline
Joined: Dec 2016
Posts: 733
keragamming said:
Help, my covers is not showing.
Looks like you don't have images enabled in your list settings. This theme requires them, enabling them should fix the problem.
 
Feb 16, 4:39 PM

Offline
Joined: Oct 2013
Posts: 10202
Valerio_Lyndon said:
keragamming said:
Help, my covers is not showing.
Looks like you don't have images enabled in your list settings. This theme requires them, enabling them should fix the problem.


Thank you it is working!
 
Feb 21, 1:30 PM
Offline
Joined: Feb 2018
Posts: 11
I think your images are fine now. It just takes a little while for the image script to pick up your list and generate the high resolution covers.
 
Mar 3, 3:59 AM

Offline
Joined: Jun 2014
Posts: 1459
GenericGoose said:
I think your images are fine now. It just takes a little while for the image script to pick up your list and generate the high resolution covers.


How long does it usually take?
 
Mar 3, 4:50 AM
Offline
Joined: Feb 2018
Posts: 11
TheRay28 said:
GenericGoose said:
I think your images are fine now. It just takes a little while for the image script to pick up your list and generate the high resolution covers.


How long does it usually take?


Just a few hours usually.
But i noticed that you copied the css from the links provided at the bottom and those werent updated to the MAL changes. I fixed that now, so please copy the css again (only the imports on top have changed. those are responsible for the high quality image loading).
 
Mar 3, 4:52 AM

Offline
Joined: Jun 2014
Posts: 1459
GenericGoose said:
Just a few hours usually.
But i noticed that you copied the css from the links provided at the bottom and those werent updated to the MAL changes. I fixed that now, so please copy the css again (only the imports on top have changed. those are responsible for the high quality image loading).


Thank you very much! It's working now and I really like your theme!
 
Mar 3, 5:07 AM
Offline
Joined: Feb 2018
Posts: 11
TheRay28 said:
GenericGoose said:
Just a few hours usually.
But i noticed that you copied the css from the links provided at the bottom and those werent updated to the MAL changes. I fixed that now, so please copy the css again (only the imports on top have changed. those are responsible for the high quality image loading).


Thank you very much! It's working now and I really like your theme!


Thx!
Just one little thing: I would suggest you to set "Show cover image" to No (as explained in point 5 in the Installation instructions) ;)
 
Jul 11, 6:02 PM
Offline
Joined: Nov 2017
Posts: 2
Hi, other people cannot see this in my profile, how do i fix?
 
Jul 11, 6:37 PM

Offline
Joined: Feb 2010
Posts: 5975
Thedoc_tv said:
Hi, other people cannot see this in my profile, how do i fix?


You need a backslash in the codes after each @

@\import "https://malcat-gen.appspot.com/series?template=.data.image a[href^="/$list/$id/"]:after{background-image:url($series_image)}";
@\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkafter";
@\import "https://genericmale.github.io/MyAnimeListTheme/theme.css";

.list-menu-float {
top: 150px
}

.header, .list-menu-float, .search-container, .stats, .list-stats, tbody:first-child {
color: #ffffff;
}
 
Jul 12, 3:01 AM
Offline
Joined: Nov 2017
Posts: 2
Shishio-kun said:
Thedoc_tv said:
Hi, other people cannot see this in my profile, how do i fix?


You need a backslash in the codes after each @

@\import "https://malcat-gen.appspot.com/series?template=.data.image a[href^="/$list/$id/"]:after{background-image:url($series_image)}";
@\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkafter";
@\import "https://genericmale.github.io/MyAnimeListTheme/theme.css";

.list-menu-float {
top: 150px
}

.header, .list-menu-float, .search-container, .stats, .list-stats, tbody:first-child {
color: #ffffff;
}
Thanks you!
 
Top