[CSS - Modern] 🍰 Clarity by V.L

Offline

Jul 2020

1183

Valerio_Lyndon said:

It's possible with some Javascript tools that I recently took over maintaining. Check out this thread for installation: [Link]. Pardon any messiness of that thread, as it's still a bit WIP. But it's the best thing to link right now as I will be updating that with all the info I have in case you need to use this script more in the future.......

I am sorry, I said that it was not possible (I mixed it with something else)

oh my goodness thank you so much, you're great, I'm gonna go and implement this onto my list right now.

.................wow, never thought I actually would be of any help to anyone. I am happy I was able to help (--__-- why am I talking so formally, that's not me)

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

Mar 15, 2021 6:35 AM

#704

Offline

Jul 2020

1183

Valerio_Lyndon !!!!!!!!!!!!!!!

HEEEEEEEEEEEELP!!!!!!!!!!!!!!!!!!!!!!!!!!

WHAT IS HAPPENING TO MY LIST?????? WHY ISN'T THE IMGUR IMAGES THAT I UPLOAED NOT WORKING SUDDENLY?????????

I AM PANICKING !!!!!!!!!!!!!!!!!

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

Mar 15, 2021 10:19 AM

#705

Offline

May 2014

255

Valerio_Lyndon said:

mistersunday said:
I need help with my headers. So I used to have headers on my list but they randomly disappeared today. When I mean headers I'm referring to the titles in the "All Anime" section that differentiate the anime on your list.

Unfortunately I couldn't find pictures of what they looked like before they were deleted. So I just took a screenshot of someone else's headers as an example:

I have the categories as tabs but I also want them as headers throughout my list. I also have the status bars but those aren't always very clear.

Can someone help me?

I'm using Google Chrome and here's my code for reference:

This is a recent issue due to an update Google Chrome is rolling out. I've added info to the main post about this which I will also go over here.

The way to fix this is to add your username and list type to the header import. In your case, you should replace this line:

@import url(https://malcat-gen.appspot.com/headers);

With this new one:

@\import "https://malcat-gen.appspot.com/headers?user=mistersunday&list=anime";

You can see we added this text: "?user=mistersunday&list=anime". If you're wondering about the other formatting changes, they're unrelated and fix an issue from two years ago that will allow other people to see the headers as well.

Not that this will break headers on your mangalist. If you need headers for your mangalist, you will have to split your anime/mangalist over two themes; You can use identical code except for the separate header import (and cover image import if using that too). Once you have a second style setup for your mangalist, simply change the "list=anime" text we added to "list=manga".

Note to other users: this exact fix will not work for you. This is a specific reply to mistersunday. For a more generalized guide on fixing the headers, please see the main forum post or simply reinstall the mod following any new instructions.

Awesome thank you! It looks like this worked, the only issue still left is the spacing, the headers appear as they used to but the spacing for all the headers (other than the Currently Watching one) is off. This is what I mean:

Thanks again for your help!!

Mar 15, 2021 10:09 PM

#706

Install list designs without any CSS knowledge!

平沢唯

Offline

Dec 2016

2206

LEGENDS_OF_ANIME said:
Valerio_Lyndon !!!!!!!!!!!!!!!

HEEEEEEEEEEEELP!!!!!!!!!!!!!!!!!!!!!!!!!!

WHAT IS HAPPENING TO MY LIST?????? WHY ISN'T THE IMGUR IMAGES THAT I UPLOAED NOT WORKING SUDDENLY?????????

I AM PANICKING !!!!!!!!!!!!!!!!!

You grabbed MonsieurAlarm's CSS, yeah? If there are left-over images from there, it's possible Monsieur is clearing out his Imgur. If you hosted them, did you upload them with an account or while signed out? If you uploaded the images while signed out it's possible, though unlikely, that they got deleted for some reason.

Mar 16, 2021 12:38 AM

#707

Install list designs without any CSS knowledge!

平沢唯

Offline

Dec 2016

2206

mistersunday said:
Awesome thank you! It looks like this worked, the only issue still left is the spacing, the headers appear as they used to but the spacing for all the headers (other than the Currently Watching one) is off. This is what I mean:

Thanks again for your help!!

Did it have it before? You need to add a CSS template to the header tool which will add some spacing to each entry. Here's an example of a template that will add some padding:

[data-query*='status\":7'] .list-item:nth-child($index) .data.status:before{content:\"$content\"}[data-query*='status\":7'] .list-item:nth-child($index){margin-top: 82px;}

And here is it applied to the malcat import which you can use to overwrite the current one.

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

For more tweaking, you can read what documentation there is on the tool in the original thread.

Mar 16, 2021 7:49 AM

#708

Offline

Jul 2020

1183

Valerio_Lyndon said:

LEGENDS_OF_ANIME said:
Valerio_Lyndon !!!!!!!!!!!!!!!

HEEEEEEEEEEEELP!!!!!!!!!!!!!!!!!!!!!!!!!!

WHAT IS HAPPENING TO MY LIST?????? WHY ISN'T THE IMGUR IMAGES THAT I UPLOAED NOT WORKING SUDDENLY?????????

I AM PANICKING !!!!!!!!!!!!!!!!!

You grabbed MonsieurAlarm's CSS, yeah? If there are left-over images from there, it's possible Monsieur is clearing out his Imgur. If you hosted them, did you upload them with an account or while signed out? If you uploaded the images while signed out it's possible, though unlikely, that they got deleted for some reason.

i did grab his css but a lot of images i uploaded aren't working such as the banners and a lot of row backgrounds. Right now even if i upload new images in my imgur account and link them, they still show that error. HOW CAN I SOLVE ?????

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

Mar 16, 2021 9:56 AM

#709

Cyrose

Offline

Feb 2020

488

Hi, I would like to ask is there a code for set different profile pictures to shown when you select currently watching.on./completed/ dropped./on Hold.on / so on? 😃 would be cool to ad different pictures to each list. I would really appreciate it.

Mar 16, 2021 4:18 PM

#710

Offline

May 2014

255

Valerio_Lyndon said:

mistersunday said:
Awesome thank you! It looks like this worked, the only issue still left is the spacing, the headers appear as they used to but the spacing for all the headers (other than the Currently Watching one) is off. This is what I mean:

Thanks again for your help!!

Did it have it before? You need to add a CSS template to the header tool which will add some spacing to each entry. Here's an example of a template that will add some padding:

[data-query*='status\":7'] .list-item:nth-child($index) .data.status:before{content:\"$content\"}[data-query*='status\":7'] .list-item:nth-child($index){margin-top: 82px;}

And here is it applied to the malcat import which you can use to overwrite the current one.

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

For more tweaking, you can read what documentation there is on the tool in the original thread.

I was missing that second part of the code, thank you so much!

Mar 16, 2021 7:20 PM

#711

Offline

Jul 2020

1183

2Fujiwara2 said:
Hi, I would like to ask is there a code for set different profile pictures to shown when you select currently watching.on./completed/ dropped./on Hold.on / so on? 😃 would be cool to ad different pictures to each list. I would really appreciate it.

Here you go. This is taken from my list, so you have to change the urls. i use the same profile picture so my links are the same.

/*------------------------------*\
|           AVATAR               |
\*------------------------------*/
[data-query*="status\":7"] { --avatar: url(https://cdn.myanimelist.net/images/userimages/9987589.jpg?t=1611402600); }
/* Watching */
[data-query*="status\":1"] { --avatar: url(https://cdn.myanimelist.net/images/userimages/9987589.jpg?t=1611402600); }
/* Completed */
[data-query*="status\":2"] { --avatar: url(https://cdn.myanimelist.net/images/userimages/9987589.jpg?t=1611402600); }
/* Onhold */
[data-query*="status\":3"] { --avatar: url(https://cdn.myanimelist.net/images/userimages/9987589.jpg?t=1611402600); }
/* Dropped */
[data-query*="status\":4"] { --avatar: url(https://cdn.myanimelist.net/images/userimages/9987589.jpg?t=1611402600); }
/* Planned */
[data-query*="status\":6"] { --avatar: url(https://cdn.myanimelist.net/images/userimages/9987589.jpg?t=1611402600); }

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

Mar 16, 2021 10:46 PM

#712

Cyrose

Offline

Feb 2020

488

[quote=LEGENDS_OF_ANIME message=62355819]

2Fujiwara2 said:
Hi, I would like to ask is there a code for set different profile pictures to shown when you select currently watching.on./completed/ dropped./on Hold.on / so on? 😃 would be cool to ad different pictures to each list. I would really appreciate it.

Here you go. This is taken from my list, so you have to change the urls. i use the same profile picture so my links are the same.

#_# Thank you So Much!!

💕💕💕

Mar 17, 2021 12:24 AM

#713

Install list designs without any CSS knowledge!

平沢唯

Offline

Dec 2016

2206

LEGENDS_OF_ANIME said:

Valerio_Lyndon said:

You grabbed MonsieurAlarm's CSS, yeah? If there are left-over images from there, it's possible Monsieur is clearing out his Imgur. If you hosted them, did you upload them with an account or while signed out? If you uploaded the images while signed out it's possible, though unlikely, that they got deleted for some reason.

i did grab his css but a lot of images i uploaded aren't working such as the banners and a lot of row backgrounds. Right now even if i upload new images in my imgur account and link them, they still show that error. HOW CAN I SOLVE ?????

I've never seen Imgur randomly delete images, so this is quite curious. From your description, you've made no changes to your image URLs and they broke on their own, and I don't think it would be a code problem. That said, it couldn't hurt for you to paste your CSS here for me to take a look. Due to an annoying feature MAL has with image URLs, I can't see the actual image URLs without you sharing the code. The code can either be put in a pastebin or inside of a [spoiler] tag.

And if all else fails, there's always the surefire (hopefully, anyway) solution of using another image host if Imgur is proving problematic for you. It's a bit of a non-solution, but would work. Some alternatives are PostImage, imgbb, and Catbox.

Thanks very much for helping out 2Fujiwara by the way!

Mar 17, 2021 1:22 AM

#714

Offline

Jul 2020

1183

Valerio_Lyndon said:

I've never seen Imgur randomly delete images, so this is quite curious. From your description, you've made no changes to your image URLs and they broke on their own, and I don't think it would be a code problem. That said, it couldn't hurt for you to paste your CSS here for me to take a look. Due to an annoying feature MAL has with image URLs, I can't see the actual image URLs without you sharing the code. The code can either be put in a pastebin or inside of a [spoiler] tag.

And if all else fails, there's always the surefire (hopefully, anyway) solution of using another image host if Imgur is proving problematic for you. It's a bit of a non-solution, but would work. Some alternatives are PostImage, imgbb, and Catbox.

I AM SOOOOOOOOO SORRY THAT AN MORON LIKE ME WAS ASKING FOR YOUR HELP. When I copy and pasted my CSS here to give it to you, I noticed that I had pasted my CSS 2 times for some reason (How did I not reach the CSS limit??? WHAT EVEN IS THE LIMIT). that was causing the all the problems and just like you said, a lot of MonsieurAlarm's row backgrounds weren't working maybe because he was clearing his Imgur. I AM SOOOOOOOOOO SORRY FOR BEING A MORON. I FEEL LIKE I AM MOSRE OF AN IDIOT THAN MINETA. 😭😭😭😭😭

Thanks very much for helping out 2Fujiwara by the way!

FOR AN IDIOT LIKE ME IT'S MY GREATEST PLEASURE TO BE ABLE TO HELP YOU AND THE OTHERS!!!!!!!!!!!!!!!!!!!!!!!!!!

Anyway, thanks bro for all your help, I will think a 100 times before asking for idiotic help again (I don't know if you are a boy or a girl so I am gonna call you "bro" for now)

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

Mar 17, 2021 2:32 AM

#715

Offline

Jul 2020

1183

I found something very interesting and wanted to share it. I don't know if a lot of people know about this already but the thing is that YOU CAN LITERALLY PUT ANYTHING as your location and because I am an idiot and quite childish who wants to follow his heart, I did this 😅😅😅

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

Mar 17, 2021 8:22 PM

#716

Install list designs without any CSS knowledge!

平沢唯

Offline

Dec 2016

2206

LEGENDS_OF_ANIME said:
FOR AN IDIOT LIKE ME IT'S MY GREATEST PLEASURE TO BE ABLE TO HELP YOU AND THE OTHERS!!!!!!!!!!!!!!!!!!!!!!!!!!

Anyway, thanks bro for all your help, I will think a 100 times before asking for idiotic help again (I don't know if you are a boy or a girl so I am gonna call you "bro" for now)

Not to worry lol, it happens. Speaking from experience, double-pasting code can be one of the harder problems to notice. I'm glad the problem was resolved though!

Mar 18, 2021 7:23 AM

#717

JustMeowMeow

Offline

Apr 2015

33

Hi!
1. I am wondering how to remove the dark circle around the heart, so only the heart stays.

I use this one:

Is making the width and hight 0px will resolve it or there is another way?

2. How to change the color of this arrow? I prefer not to be white, but in some more suitable for the theme color.

JustMeowMeowMar 18, 2021 7:36 AM

Mar 18, 2021 8:41 AM

#718

Offline

Jul 2020

1183

Yamashita_Sora said:

2. How to change the color of this arrow? I prefer not to be white, but in some more suitable for the theme color.

here's the code. Just change the color code to change the arrow color. You can change the transparency too by changing the ".5" part of the background. I don't use the heart thing so I don't know about it

Edit: after typing this I went to your list. Isn't the back circle already gone? I can't see any black circle.

.data.image a:after {
    background: rgba(0,0,0,.5);
    color: #fff;
}

If you want the color to match with your anime status then use this (watching/completed/on hold/dropped/plan to watch)

.data.image a:after {
    background: rgba(0,0,0,.5);
    color: var(--item-category);
}

Legends_of_animeMar 18, 2021 8:52 AM

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

Mar 18, 2021 11:02 AM

#719

JustMeowMeow

Offline

Apr 2015

33

LEGENDS_OF_ANIME said:

Yamashita_Sora said:

2. How to change the color of this arrow? I prefer not to be white, but in some more suitable for the theme color.

here's the code. Just change the color code to change the arrow color. You can change the transparency too by changing the ".5" part of the background. I don't use the heart thing so I don't know about it

Edit: after typing this I went to your list. Isn't the back circle already gone? I can't see any black circle.

.data.image a:after {
    background: rgba(0,0,0,.5);
    color: #fff;
}

If you want the color to match with your anime status then use this (watching/completed/on hold/dropped/plan to watch)

.data.image a:after {
    background: rgba(0,0,0,.5);
    color: var(--item-category);
}

Thanks! The arrow now looks better. :)

For the hearts - I put 0px for hight and width and the circle disappeared. Don't know if it's write or wrong, but for now is working and as I see there's no bad side effects. :P

Sorry! I really don't know what I am doing. I just change or put things here and there on a whim. XD

Mar 18, 2021 12:23 PM

#720

Offline

Jul 2020

1183

Yamashita_Sora said:

For the hearts - I put 0px for hight and width and the circle disappeared. Don't know if it's write or wrong, but for now is working and as I see there's no bad side effects. :P

Sorry! I really don't know what I am doing. I just change or put things here and there on a whim. XD

As long as it works nothing else matters. I don't know all about CSS too. But I am on my way to learning it just by testing things here and there.

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

Mar 20, 2021 9:23 PM

#721

Offline

Jul 2020

1183

Is it possible to make a row longer?

I want to make the row longer and align the titles to the left but everything else should stay where they are or align to the right. Tell me if you know how to do it, I need it for someone I know.

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

Mar 22, 2021 1:19 AM

#722

Install list designs without any CSS knowledge!

平沢唯

Offline

Dec 2016

2206

LEGENDS_OF_ANIME said:
Is it possible to make a row longer?

I want to make the row longer and align the titles to the left but everything else should stay where they are or align to the right. Tell me if you know how to do it, I need it for someone I know.

For the list/row width, something like this could be used.

If the titles needed changes more than just left-alignment (such as multi-row, etc) then some other changes would need to be done, with some minor style adjustments to the surrounding elements (airing text, add/edit/more buttons, etc). I can help with that if needed.

LEGENDS_OF_ANIME said:
As long as it works nothing else matters. I don't know all about CSS too. But I am on my way to learning it just by testing things here and there.

That's the spirit. CSS is pretty risk-free to tinker with.

Thanks again for the help. I'm finding I have less and less time for responses here.

Mar 22, 2021 10:41 PM

#723

Offline

Jul 2020

1183

Valerio_Lyndon said:

LEGENDS_OF_ANIME said:
Is it possible to make a row longer?

I want to make the row longer and align the titles to the left but everything else should stay where they are or align to the right. Tell me if you know how to do it, I need it for someone I know.

For the list/row width, something like this could be used.

If the titles needed changes more than just left-alignment (such as multi-row, etc) then some other changes would need to be done, with some minor style adjustments to the surrounding elements (airing text, add/edit/more buttons, etc). I can help with that if needed.

LEGENDS_OF_ANIME said:
As long as it works nothing else matters. I don't know all about CSS too. But I am on my way to learning it just by testing things here and there.

That's the spirit. CSS is pretty risk-free to tinker with.

Thanks again for the help. I'm finding I have less and less time for responses here.

Thanks, It worked perfectly. I repositioned the edit button too. Also, I know you are very busy but can you give me your social media contact?

I want to learn CSS but it seems kinda hard to me. I can make changes to things but I can't create something by myself without totally messing it up.
So, when you have time and if you feel like it I want you to teach me some things.

Thanks for helping me always. see you later, bye.

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

Mar 23, 2021 12:29 AM

#724

Install list designs without any CSS knowledge!

平沢唯

Offline

Dec 2016

2206

LEGENDS_OF_ANIME said:
Thanks, It worked perfectly. I repositioned the edit button too. Also, I know you are very busy but can you give me your social media contact?

I want to learn CSS but it seems kinda hard to me. I can make changes to things but I can't create something by myself without totally messing it up.
So, when you have time and if you feel like it I want you to teach me some things.

Thanks for helping me always. see you later, bye.

I don't maintain much social media honestly. MyAnimeList will generally prove to be the fastest way to reach me, but I also have a Discord that I cam use if some of the features it provides are needed. ValerioLyndon#1186

Quite understandable, some things can be hard to grasp the first time 'round. I can give some pointers or guidance where you're having difficulty, just let me know what you're having problems with. Although if you've got Inspect Element figured out, then Google and StackOverflow can help answer a lot of the basic questions in regards to specific techniques.

Funnily enough I just restarted work on a CSS guide I've been putting off for ages right before you asked this.

Mar 30, 2021 4:14 AM

#725

SunBro26

Offline

Jul 2019

340

Hello, I wanted to ask if it was possible to change the color of the stats text (The whole "TV: XXX OVA: YYY" thing in the list), because my background color is a mix of light blue and white and the text is a really faded shade of grey and it just becomes hard to read it. So, is there any line of code I could add to change it? I can pick out the color hex myself. Thanks in advance!

Mar 30, 2021 4:27 AM

#726

Offline

Jul 2020

1183

SunBro26 said:
Hello, I wanted to ask if it was possible to change the color of the stats text (The whole "TV: XXX OVA: YYY" thing in the list), because my background color is a mix of light blue and white and the text is a really faded shade of grey and it just becomes hard to read it. So, is there any line of code I could add to change it? I can pick out the color hex myself. Thanks in advance!

You can just change the color code to get the color of text you want. (change the #fff)

.list-stats {
    color: #fff !important
}

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

Mar 30, 2021 4:55 AM

#727

SunBro26

Offline

Jul 2019

340

LEGENDS_OF_ANIME said:

SunBro26 said:
Hello, I wanted to ask if it was possible to change the color of the stats text (The whole "TV: XXX OVA: YYY" thing in the list), because my background color is a mix of light blue and white and the text is a really faded shade of grey and it just becomes hard to read it. So, is there any line of code I could add to change it? I can pick out the color hex myself. Thanks in advance!

You can just change the color code to get the color of text you want. (change the #fff)

.list-stats {
    color: #fff !important
}

Works perfectly. Thanks again.

Mar 31, 2021 5:40 PM

#728

Offline

Sep 2019

133

Hey @Valerio_Lyndon thanks a lot for this before to align the background image from the top going down

/* Reposition body background */
body, .list-item, .data.priority, .data.number, .data.status:before, .data.status:after {
	background-position: center top !important;
}

If it isn't too much trouble could I get the one for aligning the banner image top to bottom instead of centered too. Thanks.

LeosparsMar 31, 2021 6:47 PM

Apr 3, 2021 2:55 PM

#729

Install list designs without any CSS knowledge!

平沢唯

Offline

Dec 2016

2206

Leospars said:
Hey @Valerio_Lyndon thanks a lot for this before to align the background image from the top going down

/* Reposition body background */
body, .list-item, .data.priority, .data.number, .data.status:before, .data.status:after {
	background-position: center top !important;
}

If it isn't too much trouble could I get the one for aligning the banner image top to bottom instead of centered too. Thanks.

It can be done in a similar manner to the body. Using the correct selector with a background-position property. If "top" doesn't look correct you can try using a percent such as 20% or 30%.

/* Reposition banner background */
.cover-block {
	background-position: center top ;
}

Apr 5, 2021 1:55 AM

#730

Offline

Sep 2019

133

Thanks again. Recently I was trying to change the background position for each individual status in the case where I have differently sized images so I tried

/*Watching*/
[data-query*='status":1']
body, .list-item, .data.priority, .data.number, .data.status:before, .data.status:after {
	background-position: center top !important;
}

but it only seems to change the background image in .list-item, the section for each anime title but the body remined the same. Help is much appreciated🙏.

Apr 5, 2021 8:41 AM

#731

ClayFish

Offline

Jan 2021

2

Hey I was just wondering, is there a way to change the color that the text on top of the banner is showing. I tried but I can't get it.

Apr 5, 2021 9:22 AM

#732

Offline

Jul 2020

1183

SogekioVic said:
Hey I was just wondering, is there a way to change the color that the text on top of the banner is showing. I tried but I can't get it.

Just add this code to the bottom of your list and change the "#fff" with the color code you want, DONE

#cover-image-container:after {
    color: #fff;
    text-shadow: 1px 4px 7px #fff;
}

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

Apr 5, 2021 9:45 AM

#733

ClayFish

Offline

Jan 2021

2

I have been looking for a solution for this. Thank you so much.

Apr 5, 2021 7:19 PM

#734

Offline

May 2014

255

Hii again,

I've noticed lately that some of the preview images for the anime on my list don't render? I've looked at other friends' lists (that also use Clarity) and all their preview images work.

I also tried Safari instead of Google Chrome but it didn't change anything. I've noticed it's always the same anime that don't render an image and the same ones that do.

Here are images of an anime with a preview image that doesn't render and one that does:

Thanks again for all your help!

Apr 5, 2021 7:30 PM

#735

Offline

Jul 2020

1183

mistersunday said:
Hii again,

I've noticed lately that some of the preview images for the anime on my list don't render? I've looked at other friends' lists (that also use Clarity) and all their preview images work.

I also tried Safari instead of Google Chrome but it didn't change anything. I've noticed it's always the same anime that don't render an image and the same ones that do.

Here are images of an anime with a preview image that doesn't render and one that does:

Thanks again for all your help!

You are using the cover image generator import of another user. So, it's only showing the cover images for the anime he has on his list.

to fix it, you just have to give your MAL username instead of his. Use this code below

https://malscraper.azurewebsites.net/covers/anime/mistersunday/presets/dataimagelinkbefore

It should have fixed your problem and have a nice day

(send me a friend request, i want more friends)

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

Apr 5, 2021 7:33 PM

#736

Offline

May 2014

255

LEGENDS_OF_ANIME said:

mistersunday said:
Hii again,

I've noticed lately that some of the preview images for the anime on my list don't render? I've looked at other friends' lists (that also use Clarity) and all their preview images work.

I also tried Safari instead of Google Chrome but it didn't change anything. I've noticed it's always the same anime that don't render an image and the same ones that do.

Here are images of an anime with a preview image that doesn't render and one that does:

Thanks again for all your help!

You are using the cover image generator import of another user. So, it's only showing the cover images for the anime he has on his list.

to fix it, you just have to give your MAL username instead of his. Use this code below

https://malscraper.azurewebsites.net/covers/anime/mistersunday/presets/dataimagelinkbefore

It should have fixed your problem and have a nice day

(send me a friend request, i want more friends)

Omg thank you!! this had been bothering me for the past 2 weeks! hahah

And yeah def I accepted it!

Apr 9, 2021 11:25 PM

#737

Install list designs without any CSS knowledge!

平沢唯

Offline

Dec 2016

2206

Leospars said:
Recently I was trying to change the background position for each individual status in the case where I have differently sized images so I tried

/*Watching*/
[data-query*='status":1']
body, .list-item, .data.priority, .data.number, .data.status:before, .data.status:after {
	background-position: center top !important;
}

but it only seems to change the background image in .list-item, the section for each anime title but the body remined the same. Help is much appreciated🙏.

Ah yeah, that can seem a bit tricky at first. You've got the right idea with the data-query on the selector. The main problem is each comma is its own individual selector, so they all need the data-query text. Also, the data-query is a modifier of the "body" (this can be seen if you take a look through Inspect Element), so it is in a different position on that selector. Here's an example of your code with the changes.

/* Watching */
body[data-query*='status":1'],
[data-query*='status":1'] .list-item,
[data-query*='status":1'] .data.priority,
[data-query*='status":1'] .data.number,
[data-query*='status":1'] .data.status:before,
[data-query*='status":1'] .data.status:after {
	background-position: center top !important;
}

You can either copy-paste that 6 times for each category, like in this example.

Or, you could try my preferred option of using variables. It results in much cleaner code.

Apr 11, 2021 7:37 AM

#738

almondtofu_

Offline

Nov 2020

10

I apply the css and it was working for like 4 hours and when I open now I cant see it anymore

Apr 11, 2021 8:23 AM

#739

Offline

Jul 2020

1183

imnth123 said:
I apply the css and it was working for like 4 hours and when I open now I cant see it anymore

what are you talking about? please tell that what is it that you can't see

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

Apr 11, 2021 10:05 PM

#740

almondtofu_

Offline

Nov 2020

10

[quote=LEGENDS_OF_ANIME message=62729217]

imnth123 said:
I apply the css and it was working for like 4 hours and when I open now I cant see it anymore

wait a sec it works now sorry for the inconvenience

almondtofu_Apr 11, 2021 10:26 PM

Apr 13, 2021 5:01 PM

#741

Offline

Sep 2019

133

Valerio_Lyndon said:

Leospars said:
Recently I was trying to change the background position for each individual status in the case where I have differently sized images so I tried

/*Watching*/
[data-query*='status":1']
body, .list-item, .data.priority, .data.number, .data.status:before, .data.status:after {
	background-position: center top !important;
}

but it only seems to change the background image in .list-item, the section for each anime title but the body remined the same. Help is much appreciated🙏.

Ah yeah, that can seem a bit tricky at first. You've got the right idea with the data-query on the selector. The main problem is each comma is its own individual selector, so they all need the data-query text. Also, the data-query is a modifier of the "body" (this can be seen if you take a look through Inspect Element), so it is in a different position on that selector. Here's an example of your code with the changes.

/* Watching */
body[data-query*='status":1'],
[data-query*='status":1'] .list-item,
[data-query*='status":1'] .data.priority,
[data-query*='status":1'] .data.number,
[data-query*='status":1'] .data.status:before,
[data-query*='status":1'] .data.status:after {
	background-position: center top !important;
}

You can either copy-paste that 6 times for each category, like in this example.

Or, you could try my preferred option of using variables. It results in much cleaner code.

Thanks I'll use the variable.

Apr 15, 2021 10:34 AM

#742

taniiiii

Offline

Aug 2019

1

Is it possible to change the color of individual score buttons based on their score? For example:

.score-1::before {
content: "Appalling";
--btn-bg: #242424; <---- something like this?
}
.score-2::before {
content: "Horrid";
--btn-bg: #ea484d;
}

etc.

And I don't mean the color of the box that appears when you hover over a score. I mean the actual button that displays the number which is there when you load the page.

taniiiiiApr 15, 2021 12:36 PM

Apr 16, 2021 3:31 AM

#743

L3noX

Offline

Jan 2021

15

i have a problem there all working but but when i add CSS code for anime headers i can't see them.

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

[data-query*='"status":7'] .list-item:nth-child(2) { margin-top: 32px; }

[data-query*='"status":7'] .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: right;
letter-spacing: 1px;
text-transform: uppercase;

pointer-events: none;
}

Thanks for help <3

L3noXApr 16, 2021 3:38 AM

Apr 17, 2021 1:48 PM

#744

Install list designs without any CSS knowledge!

平沢唯

Offline

Dec 2016

2206

L3noX said:
i have a problem there all working but but when i add CSS code for anime headers i can't see them.

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

[data-query*='"status":7'] .list-item:nth-child(2) { margin-top: 32px; }

[data-query*='"status":7'] .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: right;
letter-spacing: 1px;
text-transform: uppercase;

pointer-events: none;
}

Thanks for help <3

Works fine when I apply it to your list. Have you tried the fix listed on the main post relating to Chrome issues? Here's the import code with the fix applied for you to try it. Put at the top of the CSS.

@\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'}&list=anime&user=L3noX";

Here's the other code to go at the bottom of the CSS:
[code]

Apr 17, 2021 1:57 PM

#745

L3noX

Offline

Jan 2021

15

Thanks it's working now <3

Apr 17, 2021 1:59 PM

#746

Install list designs without any CSS knowledge!

平沢唯

Offline

Dec 2016

2206

taniiiii said:
Is it possible to change the color of individual score buttons based on their score? For example:

.score-1::before {
content: "Appalling";
--btn-bg: #242424; <---- something like this?
}
.score-2::before {
content: "Horrid";
--btn-bg: #ea484d;
}

etc.

And I don't mean the color of the box that appears when you hover over a score. I mean the actual button that displays the number which is there when you load the page.

It's possible. You need to reset the styling of the main score box and then apply it to the inner score-label box so that we can apply the per-score styling we want. Here's code for that. I have no idea how this will play with other mods.

Apr 18, 2021 4:47 PM

#747

burnerfistah

Offline

Jun 2020

10

Hello I had a question for how the code for large covers worked. A few months ago there was this issue for the code for large covers not working because of a change in Chrome so it caused the following code to not work for me:

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

I used this instead and everything was fine:

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

The problem is that now, I noticed that some new anime I watch doesn't get a large cover and it stays blank. I wanted to know how I can add a cover for them. I tried switching back to the first code and everything seems fine. The problem is that my list seems significantly laggier and my friends who have bigger lists and tried this, their lists are also much laggier. Wanted to know a fix for this.

Thanks in advance!

Apr 21, 2021 9:45 AM

#748

Shishio-kun

Offline

Feb 2010

12630

burnerfistah said:
Hello I had a question for how the code for large covers worked. A few months ago there was this issue for the code for large covers not working because of a change in Chrome so it caused the following code to not work for me:

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

I used this instead and everything was fine:

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

The problem is that now, I noticed that some new anime I watch doesn't get a large cover and it stays blank. I wanted to know how I can add a cover for them. I tried switching back to the first code and everything seems fine. The problem is that my list seems significantly laggier and my friends who have bigger lists and tried this, their lists are also much laggier. Wanted to know a fix for this.

Thanks in advance!

As far as I know, you can use this instead for the full database, so the covers will be there, but it takes time to load it all. But I noticed that after the first load, I don't get any lag.
@\import "https://malscraper.azurewebsites.net/covers/all/anime/presets/dataimagelinkbefore";

You can use this an alternative which is much faster and smoother, but it takes a day sometimes for new anime to be updated
@\import "https://malscraper.azurewebsites.net/covers/anime/USERNAME/presets/dataimagelinkbefore";

So you have to choose one or the other. There's no way I've seen to get a cover import that is updated immediately.

But you can generate your own preview pics, and this would give you all your preview pics every time but you have to manually update it. So this way you don't have to wait for the newly added anime to update on its own. Maybe that's what you'd prefer?
https://myanimelist.net/forum/?topicid=1905344

Apr 21, 2021 2:11 PM

#749