-
-
Notifications
You must be signed in to change notification settings - Fork 36
Change theme images and colours.
You are here: Home > Clarity > Change theme images & colours.
Here is a list of code templates. Add these to the bottom of your CSS, then replace the URLHERE texts with a direct link to your image.
body { --banner: url(URLHERE); }
Alternatively, you can use this code to add a banner for each category:
/*-S-T-A-R-T--------------------*\
| Per-Category Banner Image |
\*------------------------------*/
/* All Anime */
[data-query*='"status":7'] { --banner: url(URLHERE); }
/* Watching/Reading */
[data-query*='"status":1'] { --banner: url(URLHERE); }
/* Completed */
[data-query*='"status":2'] { --banner: url(URLHERE); }
/* Onhold */
[data-query*='"status":3'] { --banner: url(URLHERE); }
/* Dropped */
[data-query*='"status":4'] { --banner: url(URLHERE); }
/* Planned */
[data-query*='"status":6'] { --banner: url(URLHERE); }
/*------------------------E-N-D-*/
body { --character: url(URLHERE); }
Alternatively, to remove the character image, you can se the entire URL section to none. As such:
body { --character: none; }
Alternatively, you can use this code to add a charcter for each category:
/*-S-T-A-R-T--------------------*\
| Per-Category Character Image |
\*------------------------------*/
/* All Anime */
[data-query*='"status":7'] { --character: url(URLHERE); }
/* Watching/Reading */
[data-query*='"status":1'] { --character: url(URLHERE); }
/* Completed */
[data-query*='"status":2'] { --character: url(URLHERE); }
/* Onhold */
[data-query*='"status":3'] { --character: url(URLHERE); }
/* Dropped */
[data-query*='"status":4'] { --character: url(URLHERE); }
/* Planned */
[data-query*='"status":6'] { --character: url(URLHERE); }
/*------------------------E-N-D-*/
body { --background: url(URLHERE); }
Alternatively, you can use this code to add a background for each category:
/*-S-T-A-R-T--------------------*\
| Per-Category Background Image |
\*------------------------------*/
/* All Anime */
body[data-query*='"status":7'] { --background: url(URLHERE); }
/* Watching/Reading */
body[data-query*='"status":1'] { --background: url(URLHERE); }
/* Completed */
body[data-query*='"status":2'] { --background: url(URLHERE); }
/* Onhold */
body[data-query*='"status":3'] { --background: url(URLHERE); }
/* Dropped */
body[data-query*='"status":4'] { --background: url(URLHERE); }
/* Planned */
body[data-query*='"status":6'] { --background: url(URLHERE); }
/*------------------------E-N-D-*/
To take it a step further and add a tint to the image, add this in addition to the previous code. Change the colour where it says "Change colour here".
| Background Tint |
\*------------------------------*/
body::before {
/* change colour here */
background: rgba(0, 0, 0, 0.8);
content: "";
z-index: -1;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/*------------------------E-N-D-*/
If you want to display your background imagery more, you can make your list items slightly transparent. This will allow the image below them to be seen. Here's the code for that, to be used in addition to the other CSS. Change the colour where it says "Change colour here".
/*-S-T-A-R-T--------------------*\
| Transparent List Rows |
\*------------------------------*/
:root {
/* Change colour here */
--row-tint: rgba(33,33,33,0.8);
}
.list-item, .data.priority, .data.number, .data.status:before, .data.status:after {
background: linear-gradient(var(--row-tint),var(--row-tint)), var(--background) no-repeat center / cover fixed transparent !important;
}
/*------------------------E-N-D-*/
To get started, choose the relevant code link and insert it anywhere below the main theme (or below dark mode if you have it).
Code - Light Colours | Code - Dark Colours
Once pasted into your CSS box, you can play with each colour as you wish. The colours provided are the default colours used in the theme, and can be used as a basis for further modification. If you do not want a colour to be changed, simply delete the relevant line and it will revert to its default. For help with CSS colours, see CSS Colour Help.
One of the best ways to get a feel for what each colour controls is to just start tweaking them and see what changes. But, for extra help, here's some explanations of each colour.
- --pbg: Page background.
- --bg: Content background (list entries, header, footer, header buttons, popups);
- --bg-dark: Mostly used for borders (search bar, user inputs).
- --text: Generic text colour, applies to almost all text on the list.
- --text-h: Generic text on hover.
- --text-dim: Lighter text (add/edit/more, type, column descriptors, start/end/days, etcetera). Also serves as border colour for filter menu.
- --text-dim-h: Lighter text on hover.
- --text-dark: Used for longer text chunks (filter menu, more info).
- --icon: Used for larger features to blend with text (filter menu).
- --accent: Used for occasional colour flares (header all anime button, entry names, discuss link).
- --banner-text: Name text on the banner;
- --banner-text-shadow: Shadow of the name text on the banner;
- --btn-bg: Background for secondary content (score, tags, search bar, etcetera).
- --btn-bg-h: Background for secondary content on hover. Also serves as a secondary colour for header buttons.
- --btn-head-bg-h: Background for header buttons on hover.
- --btn-text-h: Text colour for secondary content and header buttons on hover.
- --text-head: Text colour for header category buttons and search icon. Also serves as footer text colour.
- --text-head-h: Text colour for active header category button.
- --watching: Colour for respective category of header category buttons.
- --completed: Ditto.
- --onhold: Ditto.
- --dropped: Ditto.
- --plantowatch: Ditto.
- --cover-bg: The colour that is seen if the cover banner lacks an image.
- --edit-btn: Edit button for tags, seen on the right of each list entry.
- --checkmark: The checkmark on completed list entries.