[CSS - Modern] 🍰 Clarity by V.L

Offline

Jul 2018

561912

Firstly, thanks alot for this CSS, I love it.

Problem:
I've been using Dark mode clarity with a few of the additions and tweaks listed like the Category headers for around a few months now, but it seems to no longer show up. I cleared CSS, followed all the steps again, and checked the Repair Sticky but the problem persists. Would be glad if someone can help me.

removed-userAug 23, 2021 9:13 AM

Aug 23, 2021 12:24 PM

#904

ShaDedZz

Offline

Jun 2020

9

Hi, I have the same problem as some of the users above, my category headers round aren't working, this has been happening for like 3 week

Here is my code

.

Aug 25, 2021 5:49 AM

#905

Neop60

Offline

Apr 2021

4

Hi ValerioLydon
do u know a way to resize the character render? mine appears too small so I'd like to resize it nvm, I figured out a way to adjust

do u think it possible to add character render on the top banner? like the very top banner

regarding the character render part, do u think I can add more then 2 character renders? on each side?

thx in advance!

Neop60Aug 25, 2021 9:22 PM

Sep 2, 2021 7:08 PM

#906

Leospars

Offline

Sep 2019

133

How can I get the row to expand as well to prevent the title from over-lapping with the edit - more

.data:hover .link.sort{
  max-height: 32px;
  white-space: pre-wrap;
  text-overflow: none;
}

Also I've been usin this for a while now and has been working fine but recently the smaller images appear squashed on hover.

/*-----------------------
((Anime, ID_Number))
-----------------------*/
.data.image a[href^="/anime/ID_Number/"]:before{background-image:url(Preview_image) !important}

.data.image a[href*="/ID_Number"]::after {
	background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0)),
		url(Preview_image);
	background-position: center;background-size: cover;background-repeat: no-repeat;opacity: 1;color: #fff;
}
.data.image a[href*="/ID_Number"]:hover::after {
	background-image:  linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),
	url(Preview_image);
	color: #fff;
}
	
/*-----------------------
((Black Clover, 34572))
-----------------------*/
.data.image a[href^="/anime/34572/"]:before{background-image:url(https://i.imgur.com/vd5lehl.png) !important}

.data.image a[href*="/34572"]::after {
	background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0)),
		url(https://i.imgur.com/vd5lehl.png);
	background-position: center;background-size: cover;background-repeat: no-repeat;opacity: 1;color: transparent;
}
.data.image a[href*="/34572"]:hover::after {
	background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),
	url(https://i.imgur.com/vd5lehl.png);
	color: #fff;
}

LeosparsSep 3, 2021 6:39 AM

Sep 7, 2021 12:31 PM

#907

Offline

Jul 2018

561912

Hi!! I'm having trouble resizing the side renders on my list. Kaguya is sized perfectly, fills up the space nicely. But Miyuki is a bit too small. I tried messing with some of the numbers but I must have made a mistake because it didn't change the size, only the position, so I just reverted it back to its original position. Any help appreciated :))

https://imgur.com/a/CsivgCq

Sep 7, 2021 4:52 PM

#908

Offline

May 2010

1235

Camchop04 said:
Hi!! I'm having trouble resizing the side renders on my list. Kaguya is sized perfectly, fills up the space nicely. But Miyuki is a bit too small. I tried messing with some of the numbers but I must have made a mistake because it didn't change the size, only the position, so I just reverted it back to its original position. Any help appreciated :))

https://imgur.com/a/CsivgCq

change

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;
}

to

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

or if you want more control over them seperately.

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

ShaggyZESep 7, 2021 5:32 PM

My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox)
[API CSS] MAL-Scraper-API Cover/CSS Generator

Sep 8, 2021 7:02 AM

#909

Offline

Jul 2018

561912

Thank you so much, this totally fixed the size issue!! However, now I have a problem where Miyuki's arm and leg is cropped off. https://imgur.com/a/EqrCaKS I adjusted his position because I wanted his arm to be more visible, so I changed:

/* Right Render */
footer:after {
	left: calc(100% - (50% - 538px));

to:

/* Right Render */
footer:after {
	left: calc(100% - (47% - 538px));

---------------------------
Also, a secondary issue that I'm not sure if you or someone else knows how to fix, but the categories on the all anime page aren't showing. I have this at the top of my code:

@\import "https://malcat-gen.appspot.com/headers?template=[data-query*='\"status\":7']:not([data-query*='order']):not([data-query*='tag\"']):not([data-query*='\"s\"']) .list-item:nth-child($index){margin-top:48px;}[data-query*='\"status\":7']:not([data-query*='order']):not([data-query*='tag\"']):not([data-query*='\"s\"']) .list-item:nth-child($index):before{content:'$content'}&user=Camchop04&list=anime";

and this at the bottom:

/*-S-T-A-R-T--------------------*\
| Category Headers (Basic) R0.3  |
\*------------------------------*/
[data-query*='"status":7']:not([data-query*=order]):not([data-query*='tag"']):not([data-query*='"s"']) .list-item:nth-child(2){margin-top:32px}[data-query*='"status":7']:not([data-query*=order]):not([data-query*='tag"']):not([data-query*='"s"']) .list-item:before{position:absolute;top:-40px;left:0;display:block;width:100%;height:32px;color:var(--text-head);font:20px/32px Oswald;text-align:center;letter-spacing:1px;text-transform:uppercase;pointer-events:none}
/*------------------------E-N-D-*/

removed-userSep 8, 2021 7:10 AM

Sep 8, 2021 8:27 AM

#910

Offline

May 2010

1235

Camchop04 said:
Thank you so much, this totally fixed the size issue!! However, now I have a problem where Miyuki's arm and leg is cropped off. https://imgur.com/a/EqrCaKS I adjusted his position because I wanted his arm to be more visible, so I changed:

/* Right Render */
footer:after {
	left: calc(100% - (50% - 538px));

to:

/* Right Render */
footer:after {
	left: calc(100% - (47% - 538px));

---------------------------
Also, a secondary issue that I'm not sure if you or someone else knows how to fix, but the categories on the all anime page aren't showing. I have this at the top of my code:

@\import "https://malcat-gen.appspot.com/headers?template=[data-query*='\"status\":7']:not([data-query*='order']):not([data-query*='tag\"']):not([data-query*='\"s\"']) .list-item:nth-child($index){margin-top:48px;}[data-query*='\"status\":7']:not([data-query*='order']):not([data-query*='tag\"']):not([data-query*='\"s\"']) .list-item:nth-child($index):before{content:'$content'}&user=Camchop04&list=anime";

and this at the bottom:

/*-S-T-A-R-T--------------------*\
| Category Headers (Basic) R0.3  |
\*------------------------------*/
[data-query*='"status":7']:not([data-query*=order]):not([data-query*='tag"']):not([data-query*='"s"']) .list-item:nth-child(2){margin-top:32px}[data-query*='"status":7']:not([data-query*=order]):not([data-query*='tag"']):not([data-query*='"s"']) .list-item:before{position:absolute;top:-40px;left:0;display:block;width:100%;height:32px;color:var(--text-head);font:20px/32px Oswald;text-align:center;letter-spacing:1px;text-transform:uppercase;pointer-events:none}
/*------------------------E-N-D-*/

not sure about the categories as I've never messed with that, but looks like there is an error with https://malcat-gen.appspot.com/

you can lower the width and add a second percentage for the height for more control in my case I set width to 100% and height to 95% in order to show his other arm and still have his head around the same spot as hers, but you will probably need to adjust it for your resolution.

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

/* Left Render */
footer:before {
	right: calc(100% - (50% - 538px));
	
	background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwAZeJvgyuunDcF7BHUFmL0A);
	background-position: left bottom;
}

/* Right Render */
footer:after {
	left: calc(100% - (50% - 538px));
	
	background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwDKPhMZ_xTWXVv2oWPjYHkQ);
	background-position: right bottom;
}

ShaggyZESep 8, 2021 8:51 AM

My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox)
[API CSS] MAL-Scraper-API Cover/CSS Generator

Sep 8, 2021 9:36 AM

#911

Offline

Jul 2018

561912

THANK YOU SO MUCH! @ShaggyZe !!! The resizing totally worked, I got it exactly how I want it now, fits perfectly on my laptop screen.

@Valerio_Lyndon I'm hoping you know how to fix the category headers not being present on the all anime page. I used the MalCat thing, this at the top of my code and this at the bottom of my code. Here's my entire code at a PasteBin link.

Sep 11, 2021 2:35 PM

#912

Powish

Offline

Jan 2021

18

I'm guessing there still isn't a fix for category headers not working?

Sep 15, 2021 7:16 PM

#913

TheAceAttorney

Offline

Dec 2020

493

I have a few questions:

How would I go about making a favorites tag like this? (I.e., the hearts implement)

How do I change the font? Can I download a font on my laptop and utilize that one somehow?

Thank you for your time.

"Did you forget already? In my word the color "red" doesn't exist. These must be...my tears. Ever since I woke up from my coma...I think I've been waiting for this very moment. You'd do well to remember this, Maya. The only time a lawyer can cry is when it's all over."
(Ace Attorney T&T: Bridge to the Turnabout)
"I'm my worst critic." (Kendrick Lamar)

Sep 15, 2021 10:31 PM

#914

Pingu_the_weeb

Offline

Apr 2021

10

Hi.
I wanted to add tags of genre and demographics, but instead on the right, it adds on the left side.Pls, help!!
Thank you

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

Sep 16, 2021 5:37 PM

#915

Online

Feb 2010

12625

Pingu_the_weeb said:
Hi.
I wanted to add tags of genre and demographics, but instead on the right, it adds on the left side.Pls, help!!
Thank you

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

For the time being, here's a little patch to move them in a better place for now (they'll go near the title since I don't know where to put them or how to make more room), but there might be changes in the future, and you might have to delete the patch then. We'll surely use a mass-update message to let you know of any changes which you might need to make :D

/* CLARITY PATCH */

.list-table .list-table-data .data.genre {
position: absolute;
margin-top: 60px;
margin-left: 80px;
text-align: left;
color: var(--text-dim) !important;
}

.list-table .list-table-data .data.genre a{
color: var(--text-dim) !important;
  font-size: 0.9em;
}
.list-table .list-table-data .data.genre a:hover{
color:var(--text-dim-h) !important
}


.list-table .list-table-data .data.demographic {
margin-top: 58px;
margin-left: 80px;
  position: absolute;
}


.list-table .list-table-data a[href*="&demographic"] {
position: absolute;
margin-top: -65px;
margin-left: 0px;
text-align: left;
color: var(--text-dim) !important;
}

.list-table .list-table-data a[href*="&demographic"]  a{
color: var(--text-dim) !important;
}
      
.list-table .list-table-data a[href*="&demographic"]  a:hover{
color:var(--text-dim-h) !important
}

Sep 16, 2021 6:51 PM

#916

✨ a lil bean ✨

Offline

Feb 2011

18420

That patch is actually better than nothing (or having to change the design!), thanks a lot for the share ♥

ღ HiScore ღ LoScore ღ Auction

ღ Turn-Ins ღ AWCc

ᓚᘏᗢ

Sep 17, 2021 6:09 AM

#917

Offline

Jul 2018

561912

TheAceAttorney said:
How would I go about making a favourites tag like this? (I.e., the hearts implement)

First, add this code if you want the hearts on the left, or this code if you want the hearts on the right. DO NOT ADD BOTH.

Now, any tag called "Favourite" or "Favorite" will display at the side of the list entry as a heart. So you can tag your anime accordingly.

TheAceAttorney said:
How do I change the font? Can I download a font on my laptop and utilize that one somehow?

@Shishio-kun, being the god that he is, made this incredible video that will explain everything. Make sure to send him your thanks, this guy is not the hero we deserved but the one we needed. Seriously, he does so much for these forums it's insane.

Here's the link to the video :)

Sep 17, 2021 6:34 AM

#918

Offline

Jul 2018

561912

Neop60 said:
Hi ValerioLydon
do u know a way to resize the character render? mine appears too small so I'd like to resize it nvm, I figured out a way to adjust

do u think it possible to add character render on the top banner? like the very top banner

regarding the character render part, do u think I can add more then 2 character renders? on each side?

thx in advance!

Not Valerio, so my answer is not going to be nearly as helpful (if at all), but you should be able to add a character render on the very top banner using this code:

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

As for adding more than one render to the banner, I genuinely don't know how to do that. Someone with actual CSS knowledge probably would though. Sorry!!

Sep 17, 2021 6:58 AM

#919

Offline

Jul 2018

561912

So I'm using this code for the premiered/studio section of my list:

/*-S-T-A-R-T--------------------*\
| Combine Premier/Studio Sections |
\*------------------------------*/

.data.season {
	width: 120px;
	height: 32px;
	margin-top: 8px;
	
	-webkit-align-self: flex-start;
	-moz-align-self: flex-start;
	align-self: flex-start;
}
.data.studio {
	margin-top: 45px !important;
	margin-left: -120px;
	
	-webkit-order: 20;
	-moz-order: 20;
	order: 20;
}

.data.studio:empty:before, .data.licensor:empty:before {
	content: "Unknown Studio";
	
	display: block;
	padding: 1px;
	
	color: #777;
	font-size: 10px;
	line-height: 15px;
	white-space: pre;
}

/*------------------------E-N-D-*/

I'm wondering how I can center the text so that it doesn't look so...funky? Like how in the image, Blend S looks much more normal than B Gata H Kei or Blood+

Sep 17, 2021 5:47 PM

#920

✨ a lil bean ✨

Offline

Feb 2011

18420

Camchop04 said:
I'm wondering how I can center the text so that it doesn't look so...funky? Like how in the image, Blend S looks much more normal than B Gata H Kei or Blood+

That will be dependent on the number of tags, actually. Since the more tags, the more space it will need. Since your tags are vertical, it will stretch so all of them fit, thus making that space bigger ... You might want to give Horizontal Tags a try ;D

or probably making the tags size smaller

SheyCroixSep 18, 2021 6:23 PM

ღ HiScore ღ LoScore ღ Auction

ღ Turn-Ins ღ AWCc

ᓚᘏᗢ

Sep 18, 2021 11:47 AM

#921

TheAceAttorney

Offline

Dec 2020

493

Camchop04

Thanks, this helped.

EDIT: Can I still have descriptive tags tagged as favorite or no?

TheAceAttorneySep 18, 2021 1:33 PM

"Did you forget already? In my word the color "red" doesn't exist. These must be...my tears. Ever since I woke up from my coma...I think I've been waiting for this very moment. You'd do well to remember this, Maya. The only time a lawyer can cry is when it's all over."
(Ace Attorney T&T: Bridge to the Turnabout)
"I'm my worst critic." (Kendrick Lamar)

Sep 19, 2021 4:04 AM

#922

gwendal738

BL Connoisseur

Offline

Oct 2008

524

Hi there, thank you so much for this patch! My list works well and looks nice with it!

Is there any way to change the font color of the genres/demographics though? Some of the entries look a bit cluttered if it's just one color. It would be nice if we could set those to another color to make them stand out from the series title and the edit/more buttons.

Thank you very much in advance!

「 I am forever your most devoted believer. 」

Sep 19, 2021 6:19 AM

#923

Offline

Jul 2020

1183

gwendal738 said:
Is there any way to change the font color of the genres/demographics though? Some of the entries look a bit cluttered if it's just one color. It would be nice if we could set those to another color to make them stand out from the series title and the edit/more buttons.

You can set specific colors for them if you want to.

StoryGraph x Spotify x Instagram
“Whether we die or not isn't really that big a deal." — Suzuya Juuzou

Sep 19, 2021 6:42 AM

#924

gwendal738

BL Connoisseur

Offline

Oct 2008

524

LEGENDS_OF_ANIME said:

gwendal738 said:
Is there any way to change the font color of the genres/demographics though? Some of the entries look a bit cluttered if it's just one color. It would be nice if we could set those to another color to make them stand out from the series title and the edit/more buttons.

You can set specific colors for them if you want to.

Would you happen to know how/where in the code to modify it? I must admit I'm not very good at all this coding stuff ^^;;; I pretty much just copy-paste whatever is on there.

「 I am forever your most devoted believer. 」

Sep 19, 2021 5:30 PM

#925

Anime list | My Profile| Send Me A Massage

Offline

May 2010

1235

gwendal738 said:

LEGENDS_OF_ANIME said:

You can set specific colors for them if you want to.

Would you happen to know how/where in the code to modify it? I must admit I'm not very good at all this coding stuff ^^;;; I pretty much just copy-paste whatever is on there.

looking at V.L's colored tags/studio/producer and Shishio-kun's patch something like this should work

.data.genre span a[href*="genre=4"] { color: COLOUR !important }
.data.demographic span a[href*="demographic=27"] { color: COLOUR !important }

Note that genre 4 = Comedy and demographic 27 = Shounen (I'm not going to list all of them, but you can hover your mouse over them or click them to get the number from the url, I also have them listed in a blog post https://myanimelist.net/blog.php?eid=869111)

also you may need to remove !important from these codes depending on where you paste it

.list-table .list-table-data .data.genre a{ color: var(--text-dim) !important; font-size: 0.9em;}
.list-table .list-table-data a[href*="&demographic"] {position: absolute;margin-top: -65px;margin-left: 0px;text-align: left; color: var(--text-dim) !important; }

ShaggyZESep 19, 2021 5:57 PM

My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox)
[API CSS] MAL-Scraper-API Cover/CSS Generator

Sep 19, 2021 10:35 PM

#926

gwendal738

BL Connoisseur

Offline

Oct 2008

524

ShaggyZE said:

gwendal738 said:

Would you happen to know how/where in the code to modify it? I must admit I'm not very good at all this coding stuff ^^;;; I pretty much just copy-paste whatever is on there.

looking at V.L's colored tags/studio/producer and Shishio-kun's patch something like this should work

.data.genre span a[href*="genre=4"] { color: COLOUR !important }
.data.demographic span a[href*="demographic=27"] { color: COLOUR !important }

Note that genre 4 = Comedy and demographic 27 = Shounen (I'm not going to list all of them, but you can hover your mouse over them or click them to get the number from the url, I also have them listed in a blog post https://myanimelist.net/blog.php?eid=869111)

also you may need to remove !important from these codes depending on where you paste it

.list-table .list-table-data .data.genre a{ color: var(--text-dim) !important; font-size: 0.9em;}
.list-table .list-table-data a[href*="&demographic"] {position: absolute;margin-top: -65px;margin-left: 0px;text-align: left; color: var(--text-dim) !important; }

Thank you so much!!! I'll try it out now! I'll experiment and do trial & error :D

「 I am forever your most devoted believer. 」

Sep 24, 2021 10:15 PM

#927

Aceladi

Offline

Apr 2021

18

Dark Theme
@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";
body { --avatar: url(Your Profile Link); }
body { --name: "Your Name"; }

'Copy Past Whole Code'
:Simple

"ᴡʜᴇɴ ᴛʜᴇ ᴡᴏʀʟᴅ ꜱʜᴏᴠᴇꜱ ʏᴏᴜ ᴀʀᴏᴜɴᴅ, ʏᴏᴜ ᴊᴜꜱᴛ ɢᴏᴛᴛᴀ ꜱᴛᴀɴᴅ ᴜᴘ ᴀɴᴅ ꜱʜᴏᴠᴇ ʙᴀᴄᴋ. ɪᴛ’ꜱ ɴᴏᴛ ʟɪᴋᴇ ꜱᴏᴍᴇʙᴏᴅʏ’ꜱ ɢᴏɴɴᴀ ꜱᴀᴠᴇ ʏᴏᴜ ɪꜰ ʏᴏᴜ ꜱᴛᴀʀᴛ ʙᴀʙʙʟɪɴɢ ᴇxᴄᴜꜱᴇꜱ."

- ʀᴏʀᴏɴᴏᴀ ᴢᴏʀᴏ.

Sep 30, 2021 8:30 AM

#928

Black_D-44

Offline

Jan 2018

9

Curve as in round off the edges? Something like this?

Hi Val.

I have no idea what I'm doing wrong, it doesn't matter how much I try I can't get this thing to work. I tried everything but the reality is that I know little to nothing about CSS, so I prefer to ask for your help
Also, I don't know if MALCat is broken because of Chrome (again) or because of MAL's update.

I'll leave my code in case is needed:

Black_D-44Sep 30, 2021 8:35 AM

Sep 30, 2021 9:25 AM

#929

Daisy-Sensei

Offline

Sep 2012

725

@gwendal738 Thanks to your post, i added the genres,, and they look good,
now i am working around fixing other matter in my profile,,

Oct 4, 2021 11:03 AM

#930

Offline

Jul 2018

561912

SheyCroix said:

Camchop04 said:
I'm wondering how I can center the text so that it doesn't look so...funky? Like how in the image, Blend S looks much more normal than B Gata H Kei or Blood+

That will be dependent on the number of tags, actually. Since the more tags, the more space it will need. Since your tags are vertical, it will stretch so all of them fit, thus making that space bigger ... You might want to give Horizontal Tags a try ;D

or probably making the tags size smaller

There's no way to reposition the text so that it's vertically centred depending on the size of the space?

Oct 4, 2021 2:53 PM

#931

✨ a lil bean ✨

Offline

Feb 2011

18420

Camchop04 said:

SheyCroix said:

That will be dependent on the number of tags, actually. Since the more tags, the more space it will need. Since your tags are vertical, it will stretch so all of them fit, thus making that space bigger ... You might want to give Horizontal Tags a try ;D

or probably making the tags size smaller

There's no way to reposition the text so that it's vertically centred depending on the size of the space?

I'm unsure of that bit, my bad. You should prob wait to see if @Valerio_Lyndon, @Shishio-kun or any of the other members can help =/

ღ HiScore ღ LoScore ღ Auction

ღ Turn-Ins ღ AWCc

ᓚᘏᗢ

Oct 4, 2021 8:23 PM

#932

Offline

May 2010

1235

Camchop04 said:

I'm wondering how I can center the text so that it doesn't look so...funky? Like how in the image, Blend S looks much more normal than B Gata H Kei or Blood+

I agree with @SheyCroix because the solution you want doesn't seem to change anything

.data.season, .data.studio {
vertical-align: middle;
}

the problem you have is they should all be the same height to make them normal but the amount of tags you have for some is making the area larger, I'm not sure of a way to add a newline say every 4 tags, and cause the tags to show beside themselves, but something like this will work if you don't want to do horizontal tags.

.list-table-data .data.tags {
    max-height: 70px;
    overflow-y: scroll;
}

you can also style the scroll bars, but not sure if it's supported by all browsers or just chrome.

ShaggyZEOct 4, 2021 11:08 PM

My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox)
[API CSS] MAL-Scraper-API Cover/CSS Generator

Oct 5, 2021 7:00 AM

#933

✨ a lil bean ✨

Offline

Feb 2011

18420

Alternatively, just switch to horizontal tags. I have too many and that's what works for me...

ღ HiScore ღ LoScore ღ Auction

ღ Turn-Ins ღ AWCc

ᓚᘏᗢ

Oct 6, 2021 11:10 AM

#934

Epiccgaymer

Offline

Mar 2020

1059

Today the genres and demographics decided to do this:

Does anyone have any idea why that could have happened?
Thanks in advance for any advice.

Oct 6, 2021 12:17 PM

#935

Offline

May 2010

1235

@epicpunnyname V.L was on earlier and fixed them, meaning your @Shishio-kun Clarity Patch is now breaking them, so just remove it.
personally I decided to make mine horizontal.

My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox)
[API CSS] MAL-Scraper-API Cover/CSS Generator

Oct 6, 2021 12:19 PM

#936

Epiccgaymer

Offline

Mar 2020

1059

ShaggyZE said:
@epicpunnyname V.L. was on earlier and fixed them, meaning your shishio-kun Clarity Patch is now breaking them, so just remove it, personally I decided to make mine horizontal.

So just get rid of them for now and just wait to see if someone will make another patch?

Oct 6, 2021 12:21 PM

#937

Offline

May 2010

1235

epicpunnyname said:

ShaggyZE said:
@epicpunnyname V.L. was on earlier and fixed them, meaning your shishio-kun Clarity Patch is now breaking them, so just remove it, personally I decided to make mine horizontal.

So just get rid of them for now and just wait to see if someone will make another patch?

no, just delete the Clarity Patch at the bottom of your CSS

My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox)
[API CSS] MAL-Scraper-API Cover/CSS Generator

Oct 6, 2021 12:25 PM

#938

Epiccgaymer

Offline

Mar 2020

1059

ShaggyZE said:

epicpunnyname said:

So just get rid of them for now and just wait to see if someone will make another patch?

no, just delete the Clarity Patch at the bottom of your CSS

Ok, sorry for misunderstanding

Oct 6, 2021 6:55 PM

#939

Offline

Jul 2020

1183

@ShaggyZE Is there any way to get the code of clarity before patch??? I fixed my genres and demographics and quite liked the look of them. So is there any way to get the code for clarity before this patch??

StoryGraph x Spotify x Instagram
“Whether we die or not isn't really that big a deal." — Suzuya Juuzou

Oct 6, 2021 7:02 PM

#940

Online

Feb 2010

12625

@LEGENDS_OF_ANIME
I would look at the older versions of Clarity in the Github history

https://github.com/ValerioLyndon/MAL-Public-List-Designs/commits/master/Clarity%20Theme/Theme.css

This looks like the last one...?
https://raw.githubusercontent.com/ValerioLyndon/MAL-Public-List-Designs/c228845d700f46bd2d3434fc6c7ad35d87d9b311/Clarity%20Theme/Theme.css

Shishio-kunOct 6, 2021 7:09 PM

Oct 6, 2021 7:05 PM

#941

Offline

Jul 2020

1183

Shishio-kun said:

@LEGENDS_OF_ANIME
I would look at the older versions of Clarity in the Github history

https://github.com/ValerioLyndon/MAL-Public-List-Designs/commits/master/Clarity%20Theme/Theme.css

You probably want 25.2

K, thanks. (your new pfp is awesome btw, much better than the pervious one I think)

StoryGraph x Spotify x Instagram
“Whether we die or not isn't really that big a deal." — Suzuya Juuzou

Oct 6, 2021 7:10 PM

#942

Online

Feb 2010

12625

LEGENDS_OF_ANIME said:

Shishio-kun said:

@LEGENDS_OF_ANIME
I would look at the older versions of Clarity in the Github history

https://github.com/ValerioLyndon/MAL-Public-List-Designs/commits/master/Clarity%20Theme/Theme.css

You probably want 25.2

K, thanks. (your new pfp is awesome btw, much better than the pervious one I think)

Thanks! It's Happy Chaos from Guilty Gear who is That Man if you played it in the past (I think he is? I stopped with story mode 10 years ago lol...) I hope he's good :D

btw I think this is the Clarity you want (last one, looks like it)
https://raw.githubusercontent.com/ValerioLyndon/MAL-Public-List-Designs/c228845d700f46bd2d3434fc6c7ad35d87d9b311/Clarity%20Theme/Theme.css

Oct 6, 2021 7:29 PM

#943

Offline

Jul 2020

1183

Shishio-kun said:

LEGENDS_OF_ANIME said:

K, thanks. (your new pfp is awesome btw, much better than the pervious one I think)

Thanks! It's Happy Chaos from Guilty Gear who is That Man if you played it in the past (I think he is? I stopped with story mode 10 years ago lol...) I hope he's good :D

btw I think this is the Clarity you want (last one, looks like it)
https://raw.githubusercontent.com/ValerioLyndon/MAL-Public-List-Designs/c228845d700f46bd2d3434fc6c7ad35d87d9b311/Clarity%20Theme/Theme.css

Thanks forr helping. I was was finding it too but you got it first. Also, I am learning HTML and CSS right now. And if you have any tips on what I should practice more or anything I would really appreciate if you could tell me. (I dunno why my English suddenly broke)

StoryGraph x Spotify x Instagram
“Whether we die or not isn't really that big a deal." — Suzuya Juuzou

Oct 6, 2021 8:35 PM

#944

Online

Feb 2010

12625

LEGENDS_OF_ANIME said:

Shishio-kun said:

Thanks! It's Happy Chaos from Guilty Gear who is That Man if you played it in the past (I think he is? I stopped with story mode 10 years ago lol...) I hope he's good :D

btw I think this is the Clarity you want (last one, looks like it)
https://raw.githubusercontent.com/ValerioLyndon/MAL-Public-List-Designs/c228845d700f46bd2d3434fc6c7ad35d87d9b311/Clarity%20Theme/Theme.css

Thanks forr helping. I was was finding it too but you got it first. Also, I am learning HTML and CSS right now. And if you have any tips on what I should practice more or anything I would really appreciate if you could tell me. (I dunno why my English suddenly broke)

Definitely see the whole video and be able to design a layout in full. I think being able to do that would give you good fundamentals and imagination.
https://myanimelist.net/forum/?topicid=1788327

Then go to W3schools and look at the tutorials there in a large variety of skills including HTML and CSS, really really good site with free tutorials and examples which make everything clear.
https://www.w3schools.com/

W3schools was enough to make webpages 10 years ago, not sure about now :/

Try to make some fun things, new layouts, web pages, and enter contests with your skills to have something to show for it so you can stay motivated and progress. I used to make anime webpages for fun, it was cool (but designing websites for people turned me off to the profession).

You can show off lists and webpages you design here :D

Classes would help more tho, esp since you'd make cool stuff and see some progress. And also look into Drupal and RubyOnRails in the distant future, very useful skills and can make big $$$. My friend designed a gigantic university website with Drupal and made thousands of dollars on that alone iirc. I think he might have made over 10k on that but I don't pry lol. He comes to me and Hahaido for help sometimes, since we have some skills he doesn't.

Shishio-kunOct 6, 2021 8:42 PM

Oct 7, 2021 9:42 PM

#945

Install list designs without any CSS knowledge!

平沢唯

Offline

Dec 2016

2206

Black_D-44 said:
Curve as in round off the edges? Something like this?
https://i.imgur.com/s1zyKWw.png

Did you need help with this part of your post? You didn't pose an actual question for me to answer. If you were having trouble with the posted code not working, then it's probably because it was made for someone else's list and has a bunch of tweaks related to their list, primarily the colours. It's helpful to quote the original response you got the code from so I can see the context.

You could try this alternate version.

.list-item {
	border-radius: 20px;
}

#list-container .data.status {
	/* increase width so that the rounding effect will work */
	width: 18px !important;
	/* remove background and replace it with a left-border so that it visually remains the same as before despite us increasing the width */
	background: none !important;
	border-left: 2px solid var(--accent) !important;
	/* round edges using border-radius */
	border-radius: 20px 0 0 20px;
	/* turn off mouse interaction to avoid any potential issues increasing the width might cause */
	pointer-events: none;
}
/* add back category-specific colours */
#list-container .data.status.watching,
#list-container .data.status.reading {
	border-color: var(--watching) !important;
}
#list-container .data.status.completed {
	border-color: var(--completed) !important;
}
#list-container .data.status.onhold {
	border-color: var(--onhold) !important;
}
#list-container .data.status.dropped {
	border-color: var(--dropped) !important;
}
#list-container .data.status.plantowatch,
#list-container .data.status.plantoread {
	border-color: var(--plantowatch) !important;
}

Oct 7, 2021 10:12 PM

#946

Install list designs without any CSS knowledge!

平沢唯

Offline

Dec 2016

2206

Neop60 said:
regarding the character render part, do u think I can add more then 2 character renders? on each side?

You can use a series of background images to layer up characters. Here's some code for that. To add or remove a character, you can copy-paste one of the background lines. Here's the bare-bones code.

/* Multiple Character Renders */
#list-container #cover-image-container {
	width: 100%;
	background:
		/* backgrounds listed first are placed "above" later backgrounds */
		
		/* First background */
		url(URLHERE) no-repeat right center / contain,
		/* Second background */
		url(URLHERE) no-repeat center center/contain,
		/* Last background - MAKE SURE THIS LINE ENDS IN A SEMI-COLON, NOT A COMMA */
		url(URLHERE) no-repeat left center/contain;
}

And here's a working example of the code in use.

Oct 7, 2021 10:50 PM

#947

Install list designs without any CSS knowledge!

平沢唯

Offline

Dec 2016

2206

Leospars said:
How can I get the row to expand as well to prevent the title from over-lapping with the edit - more

.data:hover .link.sort{
  max-height: 32px;
  white-space: pre-wrap;
  text-overflow: none;
}

The row can expand on hover by simply increasing its height (and z-index, to prevent layering issues). But this will be activated on hover of the row, not hover of the title as that isn't possible.

Then a bunch of items need to be re-aligned to the bottom of the element so that they don't overlap with the title.

.list-item:hover .list-table-data {
	--differential: 32px;
	min-height: calc(64px + var(--differential));
}

.list-item:hover .data.title {
	padding-top: calc(48px + var(--differential)) !important;
	padding-bottom: 16px !important;
}

.data.title .link.sort {
	top: calc(50% - 8px);
}

.data:hover .link.sort {
  max-height: 32px;
  white-space: pre-wrap;
  text-overflow: none;
}

.list-table .list-table-data .data.genre {
	left: 80px;
	bottom: 1px;
	margin: 0;
}

I think that's probably the best you can do if you wish to continue with the simple overflow solution you provided.

Personally though, I would recommend using the alternative overflow solution I've given some other people: https://myanimelist.net/forum/?topicid=1723114&show=400#msg59468531

Leospars said:
Also I've been usin this for a while now and has been working fine but recently the smaller images appear squashed on hover.

I don't quite get what the problem is here, when I visit your list or use this code the images appear normal, hovering or not. If you're still having an issue you'll have to describe it in more detail for me to be able to assist.

Oct 7, 2021 11:00 PM

#948

Install list designs without any CSS knowledge!

平沢唯

Offline

Dec 2016

2206

Camchop04 said:
https://i.imgur.com/JeP7UMn.png

So I'm using this code for the premiered/studio section of my list:

The reason it wasn't centered was to allow room for multiple studios, since it's not possible to detect how many studios are there and centre both the premier and studio in sync. If you wanted them to appear more centered, we can centre it as if it only has one studio. This means that when there are more than one studio it will appear further down than usual. This is unavoidable. There is only so much that styles can do without having further access to the webpage.

This is what it may look like if you have few tags and many studios:

Here's a preview of how it normally looks and replacement code for you to overwrite the current "Combine Premier" section with (if you choose to use this).

Oct 7, 2021 11:14 PM

#949

Leospars

Offline

Sep 2019

133

Valerio_Lyndon said:

Leospars said:
How can I get the row to expand as well to prevent the title from over-lapping with the edit - more

.data:hover .link.sort{
  max-height: 32px;
  white-space: pre-wrap;
  text-overflow: none;
}

The row can expand on hover by simply increasing its height (and z-index, to prevent layering issues). But this will be activated on hover of the row, not hover of the title as that isn't possible.

Then a bunch of items need to be re-aligned to the bottom of the element so that they don't overlap with the title.

I think that's probably the best you can do if you wish to continue with the simple overflow solution you provided.

Personally though, I would recommend using the alternative overflow solution I've given some other people: https://myanimelist.net/forum/?topicid=1723114&show=400#msg59468531

Leospars said:
Also I've been usin this for a while now and has been working fine but recently the smaller images appear squashed on hover.

I don't quite get what the problem is here, when I visit your list or use this code the images appear normal, hovering or not. If you're still having an issue you'll have to describe it in more detail for me to be able to assist.

Thanks for the solutions to the overflow. Also oval images is no longer a problem, not sure what caused it at the time but it's fine now.

LeosparsOct 9, 2021 12:42 AM

Oct 7, 2021 11:26 PM

#950