Skip to content

Clarified

Jump to bottom
Valerio Lyndon edited this page Jan 8, 2024 · 15 revisions

Contents / Jump To

  1. Introduction
  2. Installation
  3. Further Modification

Preview

Introduction

This design is the culmination of all my experience from creating my other themes, and is meant to fully replace the default list theme with no compromises. What this means is all list columns should work as flawlessly as CSS allows, and features have only been added, not removed. If I had continued changing the design of Clarity, this would be what it became.

Theme Specifications & Highlights:

  • Works on modern anime and manga lists.
  • Supports all list columns.
  • Light and dark themes.
  • Extreme attention to detail on every millimetre of the design.
  • Completely customisable images with modifications to add even more.

Installation

Step 1.

Copy the theme code from either of these links:

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.

Show this step as an image

Step 2.

Go to your style page and add the code you copied from that link to your "Add Custom CSS" box.

Show this step as an image

Further Modification

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

Change Theme

You can change theme colours and images by using pre-defined codes, modifying them yourself, or a combination of both!

The pre-defined themes right now are:

Let's find out how to use them! All the colour and image controls are at the bottom of the CSS, clearly marked by the !THEME text:

/*=========
  !THEME
  =========*/

To replace the theme entirely with one of the ones already mentioned, simply delete everything between this THEME marker and the USER marker:

/*=========
  !USER
  =========*/

Don't delete the markers themselves, just what's between. You can then paste the new theme where the old one was.

To change any of the images or colours yourself, find the line that sounds like what you want and change its value. The colour variables accept any CSS Colour, while the images support any CSS image value such as none or url(https://example.com/image.png). Here's a list of the most common variables you may want to change:

  • background for the background image.
  • auxiliary-background for the second background image that gets layered over the first.
  • cover for the cover image.

Here's an example of some custom values:

:root {
	--background: url(https://files.catbox.moe/m0v1f6.webp);
	--auxiliary-background: none;
	--cover: url(https://i.imgur.com/RAelPvJ.jpg);
}

Image Hosting Tips

Add Avatar

Adds a banner to the category bar, similar to Clarity.

Installation:

  1. Append this code: [Code]
  2. Find the url(https://i.imgur.com/0IaceDs.gif) text within the newly pasted code. Change the URL inside of the parentheses to your desired image. Be sure to not delete the url() text.

Image Hosting Tips

Add Character to Banner

Adds a character to the banner for some extra life.

Installation (one character):

  1. Append this code: [Code]
  2. Find the url(https://i.imgur.com/JmxfBcB.png) text within the newly pasted code. Change the URL inside of the parentheses to your desired image. Be sure to not delete the url() text.

Image Hosting Tips

Installation (one character per category):

  1. Append this code: [Code]
  2. Find the variables for each category within the newly pasted code. Each category and render is clearly labelled with the character code right after the category:
/* everything */
--mod-character: url(https://i.imgur.com/Z4bKk1O.png) calc(50% - 510px) 10% / auto 140% no-repeat;
  1. Change the variable as desired. This variable represents a normal CSS background property.
  • The url() text can be set to any valid image URL you've hosted or none if you don't want any.
  • The text after the URL and before the slash (calc(50% - 510px) 10%) are the X & Y positions of the image.
  • the text after the slash (auto 140%) and before no-repeat is the size.

Image Hosting Tips

Add Character Renders

Add a character on one or both sides of your list.

Installation (two renders):

  1. Append this code: [Code]
  2. Find the two url(URLHERE) texts within the newly pasted code. One will be below a "Left Render" label, the other below a "Right Render". Change one or both of the URL inside of the parentheses to your desired image(s). Be sure to not delete the url() text.

Image Hosting Tips

If you wish to tweak the sizing or positioning of the renders, change the background-position and background-size values nearby each URL text. The position is a simple X and Y alignment or position, and the size is either a "px" pixel size or "%" percent size. More info on both of these CSS properties can be found online: background-position / background-size.

Installation (two renders per category):

  1. Append this code: [Code]
  2. Find the two url() or none texts for each category within the newly pasted code. Each category and render is clearly labelled with the render codes right after:
/* completed */
--mod-render-left: none right bottom / contain;
--mod-render-right: none left bottom / contain;
  1. Change the left and/or right variables as desired. These variables represent a normal CSS background property.
  • The "none" text can be changed to a CSS url: url(https://example.com/image.png)
  • The left bottom/right bottom are the position of the image relative to the render container.
  • the contain is the size.

Image Hosting Tips

Highlight Favourites

Highlight your favourite items with a coloured border and heart. This mod requires the use of Tags.

Installation:

Append this code: [Code]

By default, this will highlight any item that has a "Favourite" tag. If you wish to change this to a different tag, find and replace the Favourite text within the code. There are two instances you will have to change. Example before: [href$="=Favourite"], example after: [href$="=MyNewTag"]. Be sure that the tag is in URL format.

Need help with URL formatting?

To change the icon, font the content: "♥"; text. You can change the heart icon to any other character or emoji you want, but be sure to not remove the surrounding double-quotes.

Review-style Tags

Converts the tag area into a singular box, better-suited for mini reviews. Remember that the tag area is still limited to 255 characters at most.

Installation:

Append this code: [Code]

Emoji Genres

Adds emoji to your genres for easier identification!

Installation:

Append this code: [Code]

Customisation:

If you want to change the emojis or even write text instead, the code is labelled for each genre. Just find the --gicon: "✌️" and change the emoji inside of the double quotes to whatever you want. Don't remove the double quotes though!

Expandable Cover Images

Expands cover images upon mouse hover. This gives you an easier way to view them!

Installation:

Append this code: [Code]

Category-coloured Header Buttons

Add some more colour to your list!

Installation:

Append this code: [Code]

It will inherit the category colours from the rest of the list. If you wish to change these colours, you can change the category variables by adding this other code. Change the hsl() colour values to any valid CSS colour.

/**
 * Colour Tweaks
 */

body {
	--all-items: hsl(311, 40%, 51%) ;
	--current: hsl(125, 70%, 29.7%) ;
	--completed: hsl(223, 40%, 51.2%) ;
	--onhold: hsl(46, 60%, 32.45%) ;
	--dropped: hsl(359, 55%, 51.25%) ;
	--planned: hsl(0, 0%, 43.72%) ;
}

/* END of Colour Tweaks */

Need help getting a CSS colour?

Category-coloured List Accents

Changes link colours and other accents on list items to take after their respective categories.

Installation:

Append this code: [Code]

Switch Tag & Genre Locations

Swaps the tags & genres from their left & right positions to right & left. :)

Installation:

Append this code: [Code]

Blur Hentai

Enables you to blurs hentai by manually adding tags.

This mod will not display in the list preview. View your main list page to see it in action.

If using the Review Tags mod, be sure to place all "Hentai" tags at the end of each tag section or else there will be trailing commas in some areas.

Installation:

Append this code: [Code]

Customisation:

To change which tag gets blurred, replace all 3 instances of Hentai to your desired tag name.

You will need the URL-formatted version of the tag name. For help, see: here.

You can also change the text from "Sensitive Content" by changing the text between the double quotes.

Change Header Height

Increase or decrease the header/banner height as desired.

Installation:

  1. Append this code: [Code]
  2. Find the height: 400px; within the mod.
  3. Change the 400 number to any number you want. Do not remove the px at the end or the value will not be valid.

Change List Width

Increase or decrease the list width. Be aware that low values should not be used with many list columns enabled or there may be overflow issues.

Installation:

  1. Append this code: [Code]
  2. Find the --list-width: 1060px; text near the top of the mod.
  3. Change the 1060 number to any number you want. Do not remove the px at the end or the value will not be valid.
Clone this wiki locally