Skip to content
Valerio Lyndon edited this page Aug 30, 2022 · 2 revisions

Contents / Jump To

  1. Introduction
  2. Installation
  3. Further Modification

Preview

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

Step 1.

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

list settings

Step 2.

Go to your style page and disable the cover and background image options.

How-to

Step 3.

On the same page as step 2, find the "Add Custom CSS" box. Choose one of these links and add the entire CSS from it into your Custom CSS box.

Compressed Code - Recommended! | Uncompressed Code - Use if you want to tinker with the code

Tip: Use CTRL+A to select all of the CSS at once.

Further Modification

Adding a background image.

While not mentioned in the instructions above, you can actually add a background image easily using MAL's built in system. Enable the background image setting, upload your desired image, and save the settings. Easy as that!

How-to

If you wish to, you can also change the positioning of the image (default is center center). Please note that attachment and repeat options will not have any effect.

Adding a gap between list items.

Preview

This is a pretty easy one, it's only one line of code! Slap this at the bottom of your custom CSS box and it will add a gap between the items on your list as seen in the image above.

.list-item:not(:nth-of-type(5n+2)) { margin-left: 47.5px !important; }