[CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!)

Offline

Feb 2010

12643

MangaMan7 said:
Hi for a while I've had the quote on my list placed very far right after tinkering around a while back. Around what line of code do i adjust to move it more left for grid style 5?

I don't know what line of code you edited but try adding to the bottom to move it back in place

.cover-block::before {
left: -500px;}

Sep 15, 2020 10:22 AM

#103

MangaMan7

Offline

Nov 2016

11

Thanks for the help

Signature removed. Please follow the signature rules, as defined in the Site & Forum Guidelines.

Oct 11, 2020 7:50 AM

#104

Darkarden

Offline

Nov 2017

6

Hi. Preview doesn't work for me. How do I fix it?

Oct 11, 2020 12:48 PM

#105

Install list designs without any CSS knowledge!

平沢唯

Offline

Dec 2016

2206

@Waifuposter You can either wait for a bit to see if it fixes itself (it often does) or you can replace this line:

@\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkbefore";

With these new lines. Animelist support:

@\import "https://dl.dropboxusercontent.com/s/71mrsl1iz0z11p2/animelist_dataimagelinkbefore.css";

Mangalist support:

@\import "https://dl.dropboxusercontent.com/s/dpqglnr3slmgp7t/mangalist_dataimagelinkbefore.css";

This will increase page loading time, but should be more reliable. The original code is a better option though if it's working.

Oct 12, 2020 3:37 AM

#106

Darkarden

Offline

Nov 2017

6

@Valerio_Lyndon
Fixed it. Thank you.

Dec 6, 2020 2:21 PM

#107

removed-user

Offline

Jul 2018

561910

Hello! The picture at the bottom of my list isn't showing. I'm using Chrome on Mac.

https://pastebin.com/ij05LUXZ

Here's my code. My problem is that the image I refer to on line 78 does not show. Any help is appreciated.

Dec 6, 2020 2:48 PM

#108

Offline

Feb 2010

12643

CameronMZ said:
Hello! The picture at the bottom of my list isn't showing. I'm using Chrome on Mac.

https://pastebin.com/ij05LUXZ

Here's my code. My problem is that the image I refer to on line 78 does not show. Any help is appreciated.

Go to line 1700ish and remove this

background-image:url();

Dec 7, 2020 5:46 AM

#109

removed-user

Offline

Jul 2018

561910

Shishio-kun said:

CameronMZ said:
Hello! The picture at the bottom of my list isn't showing. I'm using Chrome on Mac.

https://pastebin.com/ij05LUXZ

Here's my code. My problem is that the image I refer to on line 78 does not show. Any help is appreciated.

Go to line 1700ish and remove this

background-image:url();

Thank you so much!!! The only issue I'm having now is that the picture I put doesn't fit right. I'm not sure how to edit the dimensions of the picture so that it works, since I'm not actually sure what it's supposed to be. You've already been so helpful, but if you can get this to work you'll be a god.

Dec 7, 2020 2:09 PM

#110

Offline

Feb 2010

12643

CameronMZ said:

Shishio-kun said:

Go to line 1700ish and remove this

background-image:url();

Thank you so much!!! The only issue I'm having now is that the picture I put doesn't fit right. I'm not sure how to edit the dimensions of the picture so that it works, since I'm not actually sure what it's supposed to be. You've already been so helpful, but if you can get this to work you'll be a god.

Try adding to the bottom

.list-unit .loading-space{
background-size: cover;
background-position: center center;
}

or

.list-unit .loading-space{
background-size: contain;
background-position: center center;
}

you can adjust the position by changing center to top left right or bottom, you have to play around to find whats best

Dec 8, 2020 5:42 AM

#111

removed-user

Offline

Jul 2018

561910

Shishio-kun said:

CameronMZ said:

Thank you so much!!! The only issue I'm having now is that the picture I put doesn't fit right. I'm not sure how to edit the dimensions of the picture so that it works, since I'm not actually sure what it's supposed to be. You've already been so helpful, but if you can get this to work you'll be a god.

Try adding to the bottom

.list-unit .loading-space{
background-size: cover;
background-position: center center;
}

or

.list-unit .loading-space{
background-size: contain;
background-position: center center;
}

you can adjust the position by changing center to top left right or bottom, you have to play around to find whats best

Shishio-senpai, god bless you, you magnificent genius

Dec 10, 2020 10:23 AM

#112

imperator69

Offline

Mar 2016

49

Hmmm the manga list background doesn't seems to work for me, everything else is fine tho.
Tried multiples mordern premades, always the same.

Edit : euuh just tried to load the page on Edge Navigator, and the wallpaper is showing for the manga list, so it's on chrome that the wallpaper is broken. But again is just the manga list, not the anime list which works fine..wtf

imperator69Dec 10, 2020 2:10 PM

Tachikoma saves the day !!!

Dec 10, 2020 2:10 PM

#113

Offline

Feb 2010

12643

imperator-sky said:
Hmmm the manga list background doesn't seems to work for me, everything else is fine tho.
Tried multiple mordern premade, always the same.

Edit : euuh just tried to load the page on Edge Navigator, and the wallpaper is showing for the manga list, so it's on chrome that the wallpaper is broken. But again is JUST the manga list, not the anime list which works fine..wtf

I see the manga list background in Chrome. So this might be a problem only in your Chrome browser, I would try another background for the manga list and see if that shows up.

Dec 10, 2020 2:23 PM

#114

imperator69

Offline

Mar 2016

49

Shishio-kun said:

imperator-sky said:
Hmmm the manga list background doesn't seems to work for me, everything else is fine tho.
Tried multiple mordern premade, always the same.

Edit : euuh just tried to load the page on Edge Navigator, and the wallpaper is showing for the manga list, so it's on chrome that the wallpaper is broken. But again is JUST the manga list, not the anime list which works fine..wtf

I see the manga list background in Chrome. So this might be a problem only in your Chrome browser, I would try another background for the manga list and see if that shows up.

Ahhhh finally found why, one of my chrome extension was activated just on the mangalist which killed the backdroung.

On another note, when i switch to my 4k monitor, everything is way too zoomed
https://i.imgur.com/upAIgYZ.jpg
I need to unzoom 75% on chrome to see it correctly.

Are theses layout configured for 1080p only ?

Tachikoma saves the day !!!

Dec 10, 2020 2:27 PM

#115

Offline

Feb 2010

12643

imperator-sky said:

Shishio-kun said:

I see the manga list background in Chrome. So this might be a problem only in your Chrome browser, I would try another background for the manga list and see if that shows up.

Ahhhh finally found why, one of my chrome extension was activated just on the mangalist which killed the backdroung.

On another note, when i switch to my 4k monitor, everything is way too zoomed
https://i.imgur.com/upAIgYZ.jpg
I need to unzoom 75% on chrome to see it correctly?

Are theses layout configured for 1080p only ?

I don't know, if you have to zoom out on 4k then you have to zoom out to use it, or try another layout that works for a 4k monitor.

Dec 11, 2020 8:18 AM

#116

imperator69

Offline

Mar 2016

49

Just finished customizing, thx for all the tuto.

Tachikoma saves the day !!!

Dec 11, 2020 1:36 PM

#117

Offline

Feb 2010

12643

imperator-sky said:
Just finished customizing, thx for all the tuto.

Awesome :D

Dec 13, 2020 3:38 PM

#118

ghostlyron

Offline

Oct 2020

100

hi, thanks so much for the tutorial! Really helped!
One question though. How do I change the text color of the title name, animation studio, rating, etc.

https://i.imgur.com/ugQhVWC.png

Dec 13, 2020 4:02 PM

#119

Offline

Feb 2010

12643

ghostlyron said:
hi, thanks so much for the tutorial! Really helped!
One question though. How do I change the text color of the title name, animation studio, rating, etc.

https://i.imgur.com/ugQhVWC.png

Add these codes to the bottom. They control colors on the layout you just change the color. I changed the darkened text you circled to red (the third line after text) so you want to change red to the color you like :D

:root {
--pbg: #efefef;
--bg: #fff;
--text: red;
--text-h: #787878;
--text-dim: #bababa;
--text-dim-h: #646464;
--text-dark: #111;
--icon: #323232;
--accent: #4065ba;
--btn-bg: #ebebeb;
--btn-bg-h: #323232;
--btn-head-bg-h: #1d439b;
--btn-text-h: #fff;
--bg-dark: #ddd;
--text-head: #9b9b9b;
--text-head-h: #787878;
--watching: #2db039;
--completed: #26448f;
--onhold: #f9d457;
--dropped: #a12f31;
--plantowatch: #c3c3c3;
--cover-bg: #323232;
--edit-btn: #d9d9d9;
--checkmark: #9696eb;
}

#efefef is probably a good color choice

Dec 13, 2020 4:08 PM

#120

ghostlyron

Offline

Oct 2020

100

thanks so much :D

Dec 16, 2020 9:13 AM

#121

alex-vrtrx

Offline

Jan 2018

38

Im so confused. Im using Clarity Style 1 and wanted to change to color so I could have some sort of dark mode but when I change the color values under

"/* TABLE COLORS*/
:root {
/* Generic Colours */
--pbg: rgba(239,239,239,1);
--bg: rgba(255,255,255,1);"

it literally changes nothing. Idk why, it just doesnt change anything. I wanted to use darkmode and incrcease the width of the colored strips which indicate if you are currently watching (green) or already completed (blue) an anime and which I highlightet in this screenshot: https://i.imgur.com/yVocn2W.png but since Im already stuck at changing the color I dont have much hope left to be able to achieve my other goal. Ive tried some suggestions I already read here but it changes nothing for me and I dont know why.
Edit: I would also like to change up the tags. I want to make them wider/longer so more can fit in it without making the whole listing for one anime bigger and currently after a "," it groups those words into a seperate bubble but since im using tags to specify my ratings it can look a bit awkward. I dont know if its even possible to remove the grouping of tags but if anyone knows something, please let me know!

alex-vrtrxDec 16, 2020 11:43 AM

Dec 16, 2020 2:51 PM

#122

Offline

Feb 2010

12643

alex-vrtrx said:
Im so confused. Im using Clarity Style 1 and wanted to change to color so I could have some sort of dark mode but when I change the color values under

"/* TABLE COLORS*/
:root {
/* Generic Colours */
--pbg: rgba(239,239,239,1);
--bg: rgba(255,255,255,1);"

it literally changes nothing. Idk why, it just doesnt change anything. I wanted to use darkmode and incrcease the width of the colored strips which indicate if you are currently watching (green) or already completed (blue) an anime and which I highlightet in this screenshot: https://i.imgur.com/yVocn2W.png but since Im already stuck at changing the color I dont have much hope left to be able to achieve my other goal. Ive tried some suggestions I already read here but it changes nothing for me and I dont know why.
Edit: I would also like to change up the tags. I want to make them wider/longer so more can fit in it without making the whole listing for one anime bigger and currently after a "," it groups those words into a seperate bubble but since im using tags to specify my ratings it can look a bit awkward. I dont know if its even possible to remove the grouping of tags but if anyone knows something, please let me know!

I fixed up your code for dark mode. Replace the whole CSS with this

@\import "https://fonts.googleapis.com/css?family=Oswald";
@\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkbefore";
@\import "https://valeriolyndon.github.io/MAL-Public-List-Designs/Clarity%20Theme/Theme%20-%20Compressed.css";
@\import "https://valeriolyndon.github.io/MAL-Public-List-Designs/Clarity%20Theme/Mod%20-%20Dark%20Mode%20Compressed.css";


/* BANNER BACKGROUND

To change background images: Delete what's in the parenthesis. Upload the new background to Imgur or a similar site, then copy the direct link (or Original GIF link if it's animated) and paste it into the parenthesis. Save.
*/
:root { --banner: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwHrDvBaZK9r7vt_HMGWQ0es) !important;}	
	
	
/* BANNER TEXT*/
:root { --name: "alex-vrtrx\a   Anime-List" !Important; }

/* BANNER AVATAR (BOTTOM LEFT PIC) */
:root { --avatar: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwJYIvCk6Nprp3DoXeIUBlpA) !important;}




/* BANNER CHARACTER (RIGHT PIC)*/
:root { --character: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwEYuuHLbqXYv7RGvb2rYxuA) !important; }


/* WALLPAPER
*/

body:before{
background-image: url(https://image.myanimelist.net/ui/BwOBRshyN1ZxRM2hlXvVKQ);
}
	
	


/* LEFT CHARACTER BY LIST */
footer:before {
	background-image: url(https://image.myanimelist.net/ui/BwOBRshyN1ZxRM2hlXvVKQ) !important;
}


/* RIGHT CHARACTER BY LIST */
footer:after {
	background-image: url(https://image.myanimelist.net/ui/BwOBRshyN1ZxRM2hlXvVKQ) !important;
}




/* TABLE COLORS*/
:root {
/* Generic Colours */
--bg-dark: #ddd;
--text: #323232;
--text-h: #787878;
--text-dim: #bababa;
--text-dim-h: #646464;
--text-dark: #111;
--icon: #323232;
--accent: #4065ba;

/* Button Colours */
--btn-bg: #ebebeb;
--btn-bg-h: #323232;
--btn-head-bg-h: #1d439b;
--btn-text-h: #fff;

/* Header Colours */
--text-head: #9b9b9b;
--text-head-h: #787878;

/* Status Colours */
--watching: #2db039;
--completed: #26448f;
--onhold: #f9d457;
--dropped: #a12f31;
--plantowatch: #c3c3c3;

/* Single-Use Colours */
--cover-bg: #323232;
--edit-btn: #d9d9d9;
--checkmark: #9696eb;
}



/* OTHER CODES*/

body:before {
width: 100%;
height: 100%;
display: block;
position: fixed;
	left: 0;
	top:0;
	content: "";
  
}




.cover-block { z-index: 25; }
.header { z-index: 30; }

footer:before, footer:after {
	content: "";
	position: fixed;
	top: 0;
	z-index: -1;
	
	width: calc(50% - 538px);
	min-width: 262px;
	height: 100%;
	background: transparent no-repeat center bottom / contain scroll;}

There was a bracket missing at the bottom, this can block codes you add (I fixed it in the CSS I posted above).

With the dark mode on this version you probably want to change the table text color, you do this under

/* TABLE COLORS*/
:root {
/* Generic Colours */
--bg-dark: #ddd;
--text: #323232;
--text-h: #787878;
--text-dim: #bababa;
--text-dim-h: #646464;
--text-dark: #111;
--icon: #323232;
--accent: #4065ba;

change the color after --text:

You might want to change the tag text color too, you have to add this to the bottom

.list-table .list-table-data .data.tags a {
 color: black !important;
}

If you still want to change it, the table color is controlled by this, add it to the bottom and change the RGBA color.
https://cssgenerator.org/rgba-and-hex-color-generator.html

.list-item {
    background: rgba(255,255,255,.5) !important;
}

And the background color is this, you also add it to the bottom and change to the color you want.

            
body {
	background-color: red !important;}

Or use these for both

/* THEME COLORS*/
:root {
--pbg: #161616;
--bg: #212121;
}

The code to increase the width of the colors on the left of each anime row, add it to the bottom and change the width

.list-table .list-table-data .data.status{
width: 50px !important;	
}

You can change the status colors on the left side of the list rows with the codes under

/* Status Colours */
--watching: #2db039;
--completed: #26448f;
--onhold: #f9d457;
--dropped: #a12f31;
--plantowatch: #c3c3c3;

for example

/* Status Colours */
--watching: red;
--completed: blue;
--onhold: green;
--dropped: orange;
--plantowatch: purple;

and so forth

The last issue about the tags is hard to understand here

to more can fit in it without making the whole listing for one anime bigger and currently after a "," it groups those words into a seperate bubble but since im using tags to specify my ratings it can look a bit awkward. I dont know if its even possible to remove the grouping of tags but if anyone knows something, please let me know!

but if you just want wider tags the code its this

.list-table .list-table-data .data.tags {
    width: 200px !important;
}

Shishio-kunDec 16, 2020 3:02 PM

Dec 16, 2020 4:32 PM

#123

alex-vrtrx

Offline

Jan 2018

38

Shishio-kun said:

alex-vrtrx said:
Im so confused. Im using Clarity Style 1 and wanted to change to color so I could have some sort of dark mode but when I change the color values under

"/* TABLE COLORS*/
:root {
/* Generic Colours */
--pbg: rgba(239,239,239,1);
--bg: rgba(255,255,255,1);"

it literally changes nothing. Idk why, it just doesnt change anything. I wanted to use darkmode and incrcease the width of the colored strips which indicate if you are currently watching (green) or already completed (blue) an anime and which I highlightet in this screenshot: https://i.imgur.com/yVocn2W.png but since Im already stuck at changing the color I dont have much hope left to be able to achieve my other goal. Ive tried some suggestions I already read here but it changes nothing for me and I dont know why.
Edit: I would also like to change up the tags. I want to make them wider/longer so more can fit in it without making the whole listing for one anime bigger and currently after a "," it groups those words into a seperate bubble but since im using tags to specify my ratings it can look a bit awkward. I dont know if its even possible to remove the grouping of tags but if anyone knows something, please let me know!

I fixed up your code for dark mode. Replace the whole CSS with this

@\import "https://fonts.googleapis.com/css?family=Oswald";
@\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkbefore";
@\import "https://valeriolyndon.github.io/MAL-Public-List-Designs/Clarity%20Theme/Theme%20-%20Compressed.css";
@\import "https://valeriolyndon.github.io/MAL-Public-List-Designs/Clarity%20Theme/Mod%20-%20Dark%20Mode%20Compressed.css";


/* BANNER BACKGROUND

To change background images: Delete what's in the parenthesis. Upload the new background to Imgur or a similar site, then copy the direct link (or Original GIF link if it's animated) and paste it into the parenthesis. Save.
*/
:root { --banner: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwHrDvBaZK9r7vt_HMGWQ0es) !important;}	
	
	
/* BANNER TEXT*/
:root { --name: "alex-vrtrx\a   Anime-List" !Important; }

/* BANNER AVATAR (BOTTOM LEFT PIC) */
:root { --avatar: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwJYIvCk6Nprp3DoXeIUBlpA) !important;}




/* BANNER CHARACTER (RIGHT PIC)*/
:root { --character: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwEYuuHLbqXYv7RGvb2rYxuA) !important; }


/* WALLPAPER
*/

body:before{
background-image: url(https://image.myanimelist.net/ui/BwOBRshyN1ZxRM2hlXvVKQ);
}
	
	


/* LEFT CHARACTER BY LIST */
footer:before {
	background-image: url(https://image.myanimelist.net/ui/BwOBRshyN1ZxRM2hlXvVKQ) !important;
}


/* RIGHT CHARACTER BY LIST */
footer:after {
	background-image: url(https://image.myanimelist.net/ui/BwOBRshyN1ZxRM2hlXvVKQ) !important;
}




/* TABLE COLORS*/
:root {
/* Generic Colours */
--bg-dark: #ddd;
--text: #323232;
--text-h: #787878;
--text-dim: #bababa;
--text-dim-h: #646464;
--text-dark: #111;
--icon: #323232;
--accent: #4065ba;

/* Button Colours */
--btn-bg: #ebebeb;
--btn-bg-h: #323232;
--btn-head-bg-h: #1d439b;
--btn-text-h: #fff;

/* Header Colours */
--text-head: #9b9b9b;
--text-head-h: #787878;

/* Status Colours */
--watching: #2db039;
--completed: #26448f;
--onhold: #f9d457;
--dropped: #a12f31;
--plantowatch: #c3c3c3;

/* Single-Use Colours */
--cover-bg: #323232;
--edit-btn: #d9d9d9;
--checkmark: #9696eb;
}



/* OTHER CODES*/

body:before {
width: 100%;
height: 100%;
display: block;
position: fixed;
	left: 0;
	top:0;
	content: "";
  
}




.cover-block { z-index: 25; }
.header { z-index: 30; }

footer:before, footer:after {
	content: "";
	position: fixed;
	top: 0;
	z-index: -1;
	
	width: calc(50% - 538px);
	min-width: 262px;
	height: 100%;
	background: transparent no-repeat center bottom / contain scroll;}

There was a bracket missing at the bottom, this can block codes you add (I fixed it in the CSS I posted above).

With the dark mode on this version you probably want to change the table text color, you do this under

/* TABLE COLORS*/
:root {
/* Generic Colours */
--bg-dark: #ddd;
--text: #323232;
--text-h: #787878;
--text-dim: #bababa;
--text-dim-h: #646464;
--text-dark: #111;
--icon: #323232;
--accent: #4065ba;

change the color after --text:

You might want to change the tag text color too, you have to add this to the bottom

.list-table .list-table-data .data.tags a {
 color: black !important;
}

If you still want to change it, the table color is controlled by this, add it to the bottom and change the RGBA color.
https://cssgenerator.org/rgba-and-hex-color-generator.html

.list-item {
    background: rgba(255,255,255,.5) !important;
}

And the background color is this, you also add it to the bottom and change to the color you want.

            
body {
	background-color: red !important;}

Or use these for both

/* THEME COLORS*/
:root {
--pbg: #161616;
--bg: #212121;
}

The code to increase the width of the colors on the left of each anime row, add it to the bottom and change the width

.list-table .list-table-data .data.status{
width: 50px !important;	
}

You can change the status colors on the left side of the list rows with the codes under

/* Status Colours */
--watching: #2db039;
--completed: #26448f;
--onhold: #f9d457;
--dropped: #a12f31;
--plantowatch: #c3c3c3;

for example

/* Status Colours */
--watching: red;
--completed: blue;
--onhold: green;
--dropped: orange;
--plantowatch: purple;

and so forth

The last issue about the tags is hard to understand here

to more can fit in it without making the whole listing for one anime bigger and currently after a "," it groups those words into a seperate bubble but since im using tags to specify my ratings it can look a bit awkward. I dont know if its even possible to remove the grouping of tags but if anyone knows something, please let me know!

but if you just want wider tags the code its this

.list-table .list-table-data .data.tags {
    width: 200px !important;
}

Thank you so much! I think im starting to understand a bit how it all works. I can look up names for certain elements with "Inspect Element" and foudn out, that its probably the best way to look what setting changes what and how certain elements are called. I still need some help if its okay with you: Ive came across the setting to make the image of the anime less round but I dont know the exact way to type the code for it.
Also I think the groupings of tags in different boxes is called "span" but I dont know how to remove those since I would prefer the tags of one anime to be in one box (if thats possible).
And just to be sure since I might not find this on my own tomorrow: How do I change the background color for the tags. Currently theyre white and the tags text black but what would I need to do to changethe background for tags for example to black so I can make the text inside them white?

My last question is a rather general one: Do you perhaps have a complete code where the code is as readable as those lines you provided earlier? Cause maybe Ill be able to change stuff myself this way since a lot of names for elements are self explanatory and then I wouldnt need to bother you.
Anyway, thank you for what you already did!

Dec 16, 2020 5:17 PM

#124

Offline

Feb 2010

12643

alex-vrtrx said:
Thank you so much! I think im starting to understand a bit how it all works. I can look up names for certain elements with "Inspect Element" and foudn out, that its probably the best way to look what setting changes what and how certain elements are called. I still need some help if its okay with you: Ive came across the setting to make the image of the anime less round but I dont know the exact way to type the code for it.

This controls the circular shape of the anime preview pics, it goes at the bottom of the CSS.

.data.image a
{
border-radius:30% !important;
}

Also I think the groupings of tags in different boxes is called "span" but I dont know how to remove those since I would prefer the tags of one anime to be in one box (if thats possible).

You want all tags in one separate color box if they are separated by commas, right?

.list-table .list-table-data .data.tags a{
background: transparent;
}

.list-table .list-table-data .data.tags {
background: red;
border-radius: 10% !important;
position: relative;
margin-top: 5px;
margin-bottom: 5px;
}

And just to be sure since I might not find this on my own tomorrow: How do I change the background color for the tags. Currently theyre white and the tags text black but what would I need to do to changethe background for tags for example to black so I can make the text inside them white?

This is to change the tags colors. The second set is to change the colors when you point to them.

.list-table .list-table-data .data.tags a {
color: black !important;
background: red;
}

.list-table .list-table-data .data.tags:hover a {
color: orange !important;
background: green;
}

My last question is a rather general one: Do you perhaps have a complete code where the code is as readable as those lines you provided earlier? Cause maybe Ill be able to change stuff myself this way since a lot of names for elements are self explanatory and then I wouldnt need to bother you.
Anyway, thank you for what you already did!

Are you asking how to make Clarity non-compressed? Use these to decompress CSS. You may need to use CTRL+C to copy it, because it can lag your right click with a long code like that.

http://cssunpacker.com/

https://www.html-code-generator.com/css/css-code-decompressor

And the latest Clarity codes are here. (you always want to use the latest since it's been updated)
https://valeriolyndon.github.io/MAL-Public-List-Designs/Clarity%20Theme/Theme%20-%20Compressed.css
https://valeriolyndon.github.io/MAL-Public-List-Designs/Clarity%20Theme/Mod%20-%20Dark%20Mode%20Compressed.css

If there's any more questions you should ask here because he knows the layout way better (he made it):
https://myanimelist.net/forum/?topicid=1723114

Shishio-kunDec 16, 2020 5:24 PM

Dec 17, 2020 7:50 AM

#125

alex-vrtrx

Offline

Jan 2018

38

You want all tags in one separate color box if they are separated by commas, right?

Yes! Thank you. Now I can atleast change the background for the tags so it looks like its in one box. Tags still get stacked upon each other after a comma though. Im gonna need to look into that or ask in the other thread.
Thank you for your help so far! Im slowly beginning to be able to change stuff myself thanks to you!
I didnt realize that it wasnt even your design so sorry for bothering you, Im gonna ask my questions on the other thread/post youve linked from now on.

Dec 26, 2020 12:35 AM

#126

Offline

Feb 2010

12643

Leaving this here to remind myself to add these to the layouts and/or OP later

fix avatar size

.list-table .list-table-header:after,
.cover-block::after {
background-size: cover !important;
background-position: center center;
}

fix cursor in Edge

* {
cursor: url(http://cur.cursors-4u.net/cursors/cur-11/cur1054.cur), auto !important;
}

renders on any list

/* BOTTOM RENDERS
Adjust the size with the width percentage and position with left or right percentage. */

/*ALL ANIME/MANGA L RENDER*/
body[data-query*='"status":7']:before {
background-image: url(https://imgur.com/tqCiDWz.png);
width: 50%;
left: -15%;
}
/*CURRENT L RENDER*/
body[data-query*='"status":1']:before {
background-image: url(http://imgur.com/gAgIkGM.png);
width: 50%;
left: -15%;
}
/*COMPLETED L RENDER*/
body[data-query*='"status":2']:before {
background-image: url(https://imgur.com/ctFCZtn.png);
width: 50%;
left: -15%;
}
/*ON HOLD L RENDER*/
body[data-query*='"status":3']:before {
background-image: url(https://imgur.com/pFOQFvK.png);
width: 50%;
left: -15%;
}
/*DROPPED L RENDER*/
body[data-query*='"status":4']:before {
background-image: url(https://imgur.com/Qi926ug.png);
width: 50%;
left: -15%;
}
/*PLANNED L RENDER*/
body[data-query*='"status":6']:before {
background-image: url(https://imgur.com/dyj3O7G.png);
width: 50%;
left: -15%;
}

/*CURRENT R RENDER*/
body[data-query*='"status":1']:after {
background-image: url(http://imgur.com/yewORJZ.png);
width: 50%;
right: -15%;
}
/*COMPLETED R RENDER*/
body[data-query*='"status":2']:after {
background-image: url(https://imgur.com/4ST8CD0.png);
width: 50%;
right: -15%;
}
/*ON HOLD R RENDER*/
body[data-query*='"status":3']:after {
background-image: url(https://imgur.com/UhX9YW6.png);
width: 50%;
right: -15%;
}
/*DROPPED R RENDER*/
body[data-query*='"status":4']:after {
background-image: url(https://imgur.com/qhDbEDQ.png);
width: 50%;
right: -15%;
}
/*PLANNED R RENDER*/
body[data-query*='"status":6']:after {
background-image: url(https://imgur.com/NSgLbpa.png);
width: 50%;
right: -15%;
}
/*ALL ANIME/MANGA R RENDER*/
body[data-query*='"status":7']:after {
background-image: url(https://imgur.com/pKH4nBd.png);
width: 50%;
right: -15%;
}

body:before,
body:after
{
background-color: transparent;
display: block !important;
height: 100% !important;
position: fixed !important;
content: "";
top: 0% !important;
z-index: 100 !important;
background-repeat: no-repeat;
background-position: center bottom;
pointer-events: none;
background-size: 100% !important;
}

move button text up
.status-menu-container .status-menu .status-button.all_anime{
font-size: 0;

}

.status-menu-container .status-menu .status-button.all_anime:before{
content: "All Anime";
font-size: 20px;
top: -30px;
position: relative;
width: 150px;
}

add two renders anywhere

/* BOTTOM RENDERS
Adjust the size with the width percentage and position with left or right percentage. */

/*L RENDER*/
body:before {
background-image: url(https://imgur.com/tqCiDWz.png);
width: 50%;
left: -15%;
}

/*R RENDER*/
body:after {
background-image: url(http://imgur.com/yewORJZ.png);
width: 50%;
right: -15%;
}

body:before,
body:after
{
background-color: transparent;
display: block !important;
height: 100% !important;
position: fixed !important;
content: "";
top: 0% !important;
z-index: 100 !important;
background-repeat: no-repeat;
background-position: center bottom;
pointer-events: none;
background-size: 100% !important;
}

Shishio-kunMar 3, 2021 4:29 AM

Jan 16, 2021 5:13 PM

#127

Yurito-san

Offline

Jan 2018

5

i have 2 questions.. awesome video btw!

1. How do i make the box with the anime darker or lighter? i mean inside the frame or borders under background with the titels "all anime, dropped, plan to watch, etc"?

https://imgur.com/eSaRegx

the circled area when scrolling down.

2. and also when highlighting an anime, how do i make that box darker or change the color?

https://imgur.com/n0Im5F2

Jan 19, 2021 7:58 AM

#128

Zoro333

Offline

Aug 2020

15

Hey can anyone help me fix this problem i am having.
Some of my anime pictures seem to be blurry
How do i fix this?

Jan 20, 2021 3:31 PM

#129

Offline

Feb 2010

12643

Zoro333 said:
Hey can anyone help me fix this problem i am having.
Some of my anime pictures seem to be blurry
How do i fix this?

Your layout is private, so I can't fix it or tell you what's wrong

See this topic and fix it
https://myanimelist.net/forum/?topicid=439897

Jan 20, 2021 3:34 PM

#130

Offline

Feb 2010

12643

Yurito97 said:
i have 2 questions.. awesome video btw!

1. How do i make the box with the anime darker or lighter? i mean inside the frame or borders under background with the titels "all anime, dropped, plan to watch, etc"?

https://imgur.com/eSaRegx

the circled area when scrolling down.

2. and also when highlighting an anime, how do i make that box darker or change the color?

https://imgur.com/n0Im5F2

Try messing with the anime manga container settings first. This is in your code some rows down from the top

/* ANIME/MANGA CONTAINER SETTINGS */

.list-unit {
background-color: rgba(0,0,0,.4) ;
}

.status-menu-container {
background-color: rgba(0,0,0,.4) ;
}

.list-table .list-table-data:hover {
background-color: rgba(0,0,0,.4) ;
}

These settings would be less transparent so a bit darker. You can use a RGBA generator to preview it
https://cssgenerator.org/rgba-and-hex-color-generator.html

/* ANIME/MANGA CONTAINER SETTINGS */

.list-unit {
background-color: rgba(0,0,0,.8) ;
}

.status-menu-container {
background-color: rgba(0,0,0,.8) ;
}

.list-table .list-table-data:hover {
background-color: rgba(0,0,0,.8) ;
}

Jan 23, 2021 9:30 AM

#131

Avngr

Offline

Feb 2019

5

Hey, i used the grid style list for a long time now. Today i realized thanks to a friend that if you hover over an anime you will have information like what watchstatus the anime has and the option do edit these.

But not the "more" tab/option you have on the classic list style right beside the edit button. "edit - more" like this.

is there a way to display this? i would like to have that feature because i got told thats the only place you can see re-watched xtimes for a show.

thanks in advance.

Jan 23, 2021 6:21 PM

#132

Install list designs without any CSS knowledge!

平沢唯

Offline

Dec 2016

2206

Avngr said:
Hey, i used the grid style list for a long time now. Today i realized thanks to a friend that if you hover over an anime you will have information like what watchstatus the anime has and the option do edit these.

But not the "more" tab/option you have on the classic list style right beside the edit button. "edit - more" like this.

is there a way to display this? i would like to have that feature because i got told thats the only place you can see re-watched xtimes for a show.

thanks in advance.

Add this to the bottom of the code, it should add the button back into the list. If there's an issue or overlap that I missed, let me know.

Jan 24, 2021 6:54 AM

#133

Offline

May 2008

920

So I went for another layout, however, the wallpaper I am using ya only see half in the finished one And the full wallpaper in the edit mode,
I also wanted to change the cursor, is that possible?

I only get a cursor that shows loading??

the layouts are amazing btw, just like the previous ive used

NightmareTalaJan 24, 2021 9:41 AM

Jan 26, 2021 3:56 PM

#134

Offline

Feb 2010

12643

Tala-Is-Eternal said:
So I went for another layout, however, the wallpaper I am using ya only see half in the finished one And the full wallpaper in the edit mode,
I also wanted to change the cursor, is that possible?

I only get a cursor that shows loading??

the layouts are amazing btw, just like the previous ive used

I don't know understand what you mean by the first thing

Are you using Edge? This fixes the loading cursor.
* {
cursor: url(http://cur.cursors-4u.net/cursors/cur-11/cur1054.cur), auto !important;
}

I think you can also replace the url link in that code with a new cursor. However, that might not be possible in Edge you have to see for yourself

Jan 28, 2021 6:58 AM

#135

Offline

May 2008

920

Shishio-kun said:

Tala-Is-Eternal said:
So I went for another layout, however, the wallpaper I am using ya only see half in the finished one And the full wallpaper in the edit mode,
I also wanted to change the cursor, is that possible?

I only get a cursor that shows loading??

the layouts are amazing btw, just like the previous ive used

I don't know understand what you mean by the first thing

Are you using Edge? This fixes the loading cursor.
* {
cursor: url(http://cur.cursors-4u.net/cursors/cur-11/cur1054.cur), auto !important;
}

I think you can also replace the url link in that code with a new cursor. However, that might not be possible in Edge you have to see for yourself

What I meant with the first part is, if ya look on my list, I only see 1 full character and the other one, only the top of the head.

No, I use either chrome or firefox.
Do I need to replace it with the current one? or need to put it at the end?

thanks a lot

Feb 12, 2021 5:31 PM

#136

Offline

Feb 2010

12643

note to self to add a wallpaper resolution tutorial

note to self to change this to an add on later for people who install the latest Clarity

Shishio-kunFeb 12, 2021 5:43 PM

Feb 12, 2021 5:40 PM

#137

Offline

Feb 2010

12643

Tala-Is-Eternal said:

Shishio-kun said:

Oh I didn't see this reply until now. Are you still looking for help?

I don't know understand what you mean by the first thing

Are you using Edge? This fixes the loading cursor.
* {
cursor: url(http://cur.cursors-4u.net/cursors/cur-11/cur1054.cur), auto !important;
}

I think you can also replace the url link in that code with a new cursor. However, that might not be possible in Edge you have to see for yourself

What I meant with the first part is, if ya look on my list, I only see 1 full character and the other one, only the top of the head.

No, I use either chrome or firefox.
Do I need to replace it with the current one? or need to put it at the end?

thanks a lot

I didn't see this reply until now, is still a problem for you?

You can add this code to make the wallpaper show both characters but its stretched a bit.

/* WALLPAPER */
body, body.ownlist
{
background-size: 100% 100% !important;
}

This also works and is an accurate resolution but it'll have white borders on the side.

/* WALLPAPER */
body, body.ownlist
{
background-size: contain !important;
}

Feb 14, 2021 7:06 AM

#138

Offline

May 2008

920

Shishio-kun said:

Tala-Is-Eternal said:

What I meant with the first part is, if ya look on my list, I only see 1 full character and the other one, only the top of the head.

No, I use either chrome or firefox.
Do I need to replace it with the current one? or need to put it at the end?

thanks a lot

I didn't see this reply until now, is still a problem for you?

You can add this code to make the wallpaper show both characters but its stretched a bit.

/* WALLPAPER */
body, body.ownlist
{
background-size: 100% 100% !important;
}

This also works and is an accurate resolution but it'll have white borders on the side.

/* WALLPAPER */
body, body.ownlist
{
background-size: contain !important;
}

I see. I give it a try when im onlinr..thanks a lot

Feb 14, 2021 10:09 PM

#139

Offline

Feb 2010

12643

reminder to add this to fix banner demands

.list-unit.watching .list-status-title:after,
.list-unit.reading .list-status-title:after,
.list-unit.completed .list-status-title:after,
.list-unit.onhold .list-status-title:after,
.list-unit.dropped .list-status-title:after,
.list-unit.plantowatch .list-status-title:after,
.list-unit.plantoread .list-status-title:after,
.list-unit.all_anime .list-status-title:after {

width: 100% !important;
height: 500px !important;
background-size: cover !important;

}

Shishio-kunMar 3, 2021 2:08 AM

Feb 20, 2021 6:11 AM

#140

Offline

May 2008

920

Thanks so much for it all,
The only part I still need to know, do I add it at the end of the full code, or do I need to add at the wallpaper section?

Feb 23, 2021 7:32 PM

#141

Nafbe

Offline

Sep 2018

1

Hello.
I'm having this problem where the anime miniatures covers are darker.

https://i.imgur.com/bIuaV60.jpg

https://i.imgur.com/b9iYJET.jpg

How can i fix it?

Feb 23, 2021 7:34 PM

#142

Install list designs without any CSS knowledge!

平沢唯

Offline

Dec 2016

2206

Fanbe said:
Hello.
I'm having this problem where the anime miniatures covers are darker.

https://i.imgur.com/bIuaV60.jpg

https://i.imgur.com/b9iYJET.jpg

How can i fix it?

The tool that is used for HD cover images is having some issues. These usually get fixed after a short while, but to fix it now you can add one or both of these to the top of your CSS (whichever you need). These will increase page times significantly, but they're the only other option.

Animelist covers:

@\import "https://dl.dropboxusercontent.com/s/71mrsl1iz0z11p2/animelist_dataimagelinkbefore.css";

Mangalist covers:

@\import "https://dl.dropboxusercontent.com/s/dpqglnr3slmgp7t/mangalist_dataimagelinkbefore.css";

Feb 23, 2021 7:46 PM

#143

Offline

Feb 2010

12643

Tala-Is-Eternal said:
Thanks so much for it all,
The only part I still need to know, do I add it at the end of the full code, or do I need to add at the wallpaper section?

Try adding it to the end and see if it works

Feb 26, 2021 2:18 AM

#144

Valer407

Offline

Oct 2020

1

Hi, i have problem with background size. After changing layout the bottom of the background is cut off a little. Link to screenshot with background before and after https://imgur.com/a/IFOA57h

Feb 28, 2021 1:49 AM

#145

Install list designs without any CSS knowledge!

平沢唯

Offline

Dec 2016

2206

Valer407 said:
Hi, i have problem with background size. After changing layout the bottom of the background is cut off a little. Link to screenshot with background before and after https://imgur.com/a/IFOA57h

This is due to the different screen sizes. While editing, the effective screen size is smaller horizontally so the image is positioned and sized a little differently. This is normal and expected if you wish the image to look good on most resolutions. You can see the same thing happen if you move your browser window around and resize it a bit. To get it a bit more how you wish you could try changing the background position or background size. Add this code to the bottom of your CSS to get started.

/* Adjust background positioning and sizing */
body.ownlist {
	background-position: center top;
	background-size: cover;
}

You can then change the values as you wish. The background position might be better suited positioned from the bottom instead of the top? This will crop the top more and the bottom less, the opposite of now. You can also try changing the background size to either "contain" (display all of the image but with some empty space) "100% 100%" (display all of the image with stretching) or any percentage or "px" numerical value: "100% 500px" "450px 300px". Keep in mind absolute values such as 500px will probably look odd on screens other than yours (i.e visitors to your list).

Mar 25, 2021 11:28 AM

#146

PMBF

Offline

Feb 2016

2238

hey,
Can someone help me? How can i fix this?

Thanks

--------------------- ✠ Anime List ✠ Manga List ✠ ---------------------

Mar 25, 2021 12:55 PM

#147

Offline

Feb 2010

12643

PMBF said:
hey,
Can someone help me? How can i fix this?

Thanks

add devidas's code to the bottom of your CSS
https://myanimelist.net/forum/?topicid=1892546#msg61831251

Mar 25, 2021 8:15 PM

#148

Install list designs without any CSS knowledge!

平沢唯

Offline

Dec 2016

2206

PMBF said:
hey,
Can someone help me? How can i fix this?

Thanks

Try adding this code to the bottom of your CSS. I can't confirm it works as I don't have the issue myself, but it has worked for some other people.

#qc-cmp2-container {display: none !important;}

Edit: Hadn't realized Shishio had already responded

Valerio_LyndonMar 25, 2021 11:10 PM