Skip to content

Clarity

Jump to bottom
Valerio Lyndon edited this page Jan 7, 2024 · 13 revisions

Contents / Jump To

  1. Introduction
  2. Installation
  3. Further Modification
  4. Tips & Tricks

Introduction

The default list design didn't resonate with my aesthetics and I wished for a bit more flair than that small image banner provided. So, I started messing around and after a couple of months this is what became of the idea, albeit less refined than now. I've since improved the code to accomodate as much customization as possible. Without a doubt, this is the theme I have put the most work into. I hope you have fun with it!

Theme Specifications & Highlights:

  • Works on modern anime and manga lists.
  • Supports all list columns.
  • Light and dark themes.
  • Customisable cover image, character image, profile picture, and name text.
  • Modifications for anyone's needs: horizontal tags, section headers, colours, tag descriptions, and more. See "Further Modification" section.

Awards Awards

Installation

Step 1.

First up, list columns. Most items work, but "Notes" are disabled by default and there are some situations that can look strange. Here's what to be careful of.

Groupings (items that should be enabled together):

  • "Chapters" + "Volumes"
  • "Start/End Dates" + "Total Days Watched"

Recommendations (for best display, not required):

  • Enable "Type".
  • If using "Numbers", enable "Image".

Step 2.

Go to your theme editing page and find the custom CSS box underneath the "Add Custom CSS" header. Make sure it is empty, then copy-paste the code from this link into the box.

CODE

Step 3.

Append this section below the previous code block.

body { --avatar: url(URLHERE); }

Next, find your MyAnimeList avatar URL OR use a custom image URL. Then, paste the URL between the brackets of the url() text, overwriting where it says URLHERE.

See how to find your myanimelist avatar to easily use your MAL image, or image hosting tips for help hosting a custom image.

Step 4. (optional)

This step adds the name text to the top banner and if desired can be skipped without causing issues.

You will need to append this code to what you already have (just like you did with the last step) but change the text in between the quotes to your own desired name.

body { --name: "Yui\a   Hirasawa"; }

While personalizing, please take note of the following:

  • The spaces are important, as they make the name appear nicely positioned. If the spacing looks really bad try adding or removing spaces and see how it looks.
  • The "\a" is important. Without it the name will be a single line instead of two!

So, for someone named John Doe, they may want this:

body { --name: "John\a    Doe"; }

Step 5. (optional)

To change your list to dark mode, append the entire code block from the link below to your current CSS.

CODE

Further Modification

Unless otherwise instructed, add all extra code to the end of your CSS, below everything else.

Tips & Tricks

How to find your MyAnimeList avatar URL.

  1. Go to your profile.

  2. Right click your profile image and select "copy image address" (or similar, it may be worded differently in your browser!). The dialogue looks like this (left image: Chrome, right image: Firefox).

  1. That's it! The image URL should now be copied to your clipboard ready for pasting into the code. The URL should look very similar to this but with a different number string:
https://cdn.myanimelist.net/images/userimages/5889451.jpg
Clone this wiki locally