Forum Settings
Forums
Top
  >  
Forum
  >  
Shishio's Custom MyAnimeList
  >  
Shishio's Custom MyAnimeList D...
  >  
[CSS - Modern] 🍰 Clarity by V....
RecentWatchedIgnoredSearch Forum

[CSS - Modern] 🍰 Clarity by V.L

New
Reply Disabled for Non-Club Members
Pages (26) « First ... « 14 15 [16] 17 18 » ... Last »
Apr 26, 2021 12:31 AM
#751
Valerio_Lyndon
平沢唯

Offline
Dec 2016
2206
Leospars said:
I got this code from Shishio and he said I needed to ask you for the sizes. Help would be much appreciated. thanks in advance.

Not sure if you still need this, but the sizing would be 64x64 pixels, but since the ::after element is already set, you shouldn't have to worry too much about that. Just set the background-size to "cover" or "100% 100%" and it will do the work. If I'm misunderstanding, let me know.


Also, while that code will work fine, it will override the arrow effect on hover. This may be desired, but if not here is an alternative code you can try. This isn't a better code, just different. Feel free to use either. I've also provided an example of Shishio's code with the background-size set to cover.

Valerio_LyndonApr 26, 2021 12:55 AM
Install list designs without any CSS knowledge!
Support me on Ko-fi. • Check out my list designs.
What am I working on right now?
Apr 27, 2021 8:34 AM
#752
Leospars

Offline
Sep 2019
133
Valerio_Lyndon said:
Leospars said:
I got this code from Shishio and he said I needed to ask you for the sizes. Help would be much appreciated. thanks in advance.

Not sure if you still need this, but the sizing would be 64x64 pixels, but since the ::after element is already set, you shouldn't have to worry too much about that. Just set the background-size to "cover" or "100% 100%" and it will do the work. If I'm misunderstanding, let me know.


Also, while that code will work fine, it will override the arrow effect on hover. This may be desired, but if not here is an alternative code you can try. This isn't a better code, just different. Feel free to use either. I've also provided an example of Shishio's code with the background-size set to cover.


I see thanks. I'll keep the arrow.


Apr 28, 2021 2:48 AM
#753
Valerio_Lyndon
平沢唯

Offline
Dec 2016
2206
burnerfistah said:
do you know how I can resize images without losing quality? I noticed that alot of the times when I try to resize a large resolution of a wallpaper (1920*1080), into a smaller resolution (e.x. 720*480), the quality of the image dips and ends up not looking as good as it did in full resolution. Do you know a way to combat this?

Usually, if you are using a tool such as Photoshop or Photopea, then you can resize the image and save it as a PNG file. This will maintain as much of the quality as possible. It will still look worse when scaled up, of course, since the smaller resolution means there is less detail, but there won't be any (new) compression artifacts (ones already in the image will still be there). This will, however, produce a rather large file size in comparison to saving as a .JPG.

If you're sizing down wallpapers but then using them on large monitors then it's somewhat unavoidable that they will look worse than their high resolution counterparts. If you're doing this to reduce file size but still want the highest quality, it may be better to keep a high resolution but save as a .JPG with your desired amount of compression. If you're using online tools that provide JPG file downloads, they may be compressing the image quite a bit when processing the image.
Install list designs without any CSS knowledge!
Support me on Ko-fi. • Check out my list designs.
What am I working on right now?
May 16, 2021 1:21 PM
#754
Shishio-kun

Offline
Feb 2010
12631
Been working on customized versions of Clarity for that other thread, here, been meaning to do it for a couple years:
https://myanimelist.net/forum/?topicid=1640096&show=0#msg56466319
These are intended mainly for people who want to change the images on every category and have renders.

https://myanimelist.net/animelist/GetNortedsLayout?status=7
I was able to customize it easily for each page with your codes, great work!


What's the best way to add customized rows like this with this layout, please?

Update: I found a way with Light Clarity so I don't need help with it anymore, but if there's a better way already please let me know, however this seems to work well for light clarity. The last set is in the spoiler below


:root {
--bg: transparent !important;}


.link[href^="/anime/1488/"] ~ .add-edit-more .more a:after {
background-image: url(https://i.imgur.com/CckwsJe.jpg);
width: 1060px !important;
height: 72px !important;
position: absolute !important;
content: "";
top: -46px !important;
left: -113px !important;
display: block !important;
z-index: -1 !important;
}

.link ~ .add-edit-more .more a:after{
background: #fff;
width: 1060px !important;
height: 72px !important;
position: absolute !important;
content: "";
top: -46px !important;
left: -113px !important;
display: block !important;
z-index: -1 !important;
}



Saving this finished set here, I want to turn it into a customized row tutorial for most layouts including Clarity
https://myanimelist.net/forum/?topicid=1862823

Shishio-kunMay 17, 2021 7:42 PM
May 17, 2021 10:09 PM
#755
Valerio_Lyndon
平沢唯

Offline
Dec 2016
2206
Shishio-kun said:

What's the best way to add customized rows like this with this layout, please?

Update: I found a way with Light Clarity so I don't need help with it anymore, but if there's a better way already please let me know, however this seems to work well for light clarity. The last set is in the spoiler below

I think in the past I did it for one user using .data.title a::before, but add-edit-more is a lot more convenient for the vanilla Clarity code (this user had a lot of modifications). Other than removing duplicate properties, that looks pretty much exactly how I'd do it. :)
Install list designs without any CSS knowledge!
Support me on Ko-fi. • Check out my list designs.
What am I working on right now?
May 18, 2021 7:24 AM
#756
Shishio-kun

Offline
Feb 2010
12631
Valerio_Lyndon said:
Shishio-kun said:

What's the best way to add customized rows like this with this layout, please?

Update: I found a way with Light Clarity so I don't need help with it anymore, but if there's a better way already please let me know, however this seems to work well for light clarity. The last set is in the spoiler below

I think in the past I did it for one user using .data.title a::before, but add-edit-more is a lot more convenient for the vanilla Clarity code (this user had a lot of modifications). Other than removing duplicate properties, that looks pretty much exactly how I'd do it. :)



Excellent! I also want to do a Clarity newsletter in the future with the new features for it since its debut.
Shishio-kunMay 21, 2021 11:14 AM
May 18, 2021 3:02 PM
#757
Shishio-kun

Offline
Feb 2010
12631
May 20, 2021 7:56 AM
#758
Leospars

Offline
Sep 2019
133
Hey @Valerio_Lyndon thanks again for your help before. Is it possible to move around specific tags on a page, more specifically all the genre tags to horizontal tags . I tried using the href specification with the horizantal tags cde like i did for plan to watcch [status"=:6]

But it only worked for some parts. Despite using !important and placing at the bottom of the page some were crossed out when I checked google inspect.

Also, can I get to change the preview image border and list-table .list-table-data .data.status based on the tag Favourite and curve the data.status symbol for all rows.
and what's the name for the anime title on hover can't seem to find it for this here. .list-table .list-table-data .data.title:hover wasn't working not sure why maybe i type it in wrong.
Sorry for the trouble.
LeosparsMay 21, 2021 5:08 AM


May 21, 2021 11:14 AM
#759
Shishio-kun

Offline
Feb 2010
12631
https://myanimelist.net/forum/?topicid=1924490#msg63218881

Did you know there's a way to get the headers working in all browsers? I didn't see it in the OP

edit:
I've been told just now you provided the fix before, but maybe its not in the OP? D:
Shishio-kunMay 21, 2021 11:43 AM
May 23, 2021 2:44 AM
#760
Valerio_Lyndon
平沢唯

Offline
Dec 2016
2206
Shishio-kun said:
https://myanimelist.net/forum/?topicid=1924490#msg63218881

Did you know there's a way to get the headers working in all browsers? I didn't see it in the OP

edit:
I've been told just now you provided the fix before, but maybe its not in the OP? D:

I've got it in the notice but I've been too lazy and/or busy (depends on the week) to change the original instructions. Should probably do that tomorrow (today? whatever).

Valerio_Lyndon said:
Notice Mar 13th, 2021: Chrome has begun rolling out changes that break the default cover image and category header tools. The installation steps for these will be updated soon. To fix your current cover images or category headers, please see the spoilers below for the relevant fixes.

Install list designs without any CSS knowledge!
Support me on Ko-fi. • Check out my list designs.
What am I working on right now?
May 23, 2021 10:46 AM
#761
Shishio-kun

Offline
Feb 2010
12631
Valerio_Lyndon said:
Shishio-kun said:
https://myanimelist.net/forum/?topicid=1924490#msg63218881

Did you know there's a way to get the headers working in all browsers? I didn't see it in the OP

edit:
I've been told just now you provided the fix before, but maybe its not in the OP? D:

I've got it in the notice but I've been too lazy and/or busy (depends on the week) to change the original instructions. Should probably do that tomorrow (today? whatever).

Valerio_Lyndon said:


Oops I overlooked that notice since I figured it was for covers only :/ I won't make that mistake again
Shishio-kunMay 23, 2021 12:51 PM
May 23, 2021 1:31 PM
#762
JasperVsGames

Offline
May 2020
16
Hey, I was wondering if it is possible to keep the banner from moving up when srolling down my list?
May 23, 2021 9:12 PM
#763
Valerio_Lyndon
平沢唯

Offline
Dec 2016
2206
Leospars said:
Hey @Valerio_Lyndon thanks again for your help before. Is it possible to move around specific tags on a page, more specifically all the genre tags to horizontal tags .

Not with full functionality. The only way to get truly horizontal tags is to use the horizontal tags mod. You can move them without, but only to specific spots. So they will kind of "float" in the open if you position them so they don't overlap. Example:


The only way to have properly aligned horizontal tag generes while also having a review/comment section would be to use your tags for the genres and use CSS to add in a text review section separately.

Leospars said:
I tried using the href specification with the horizantal tags cde like i did for plan to watcch [status"=:6]


But it only worked for some parts. Despite using !important and placing at the bottom of the page some were crossed out when I checked google inspect.

Depending on what property you were trying to apply, it's possible there was another selector with higher priority (which is achieved through more specificity, basically just longer selectors). When I look in your code I'm not immediately seeing anything getting overwritten, so you'll have to show me what's actually going wrong and what's supposed to be happening.


Leospars said:
[can i] curve the data.status symbol for all rows.

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




Leospars said:
Also, can I get to change the preview image border and list-table .list-table-data .data.status based on the tag Favourite

The image border won't be possible. This is because CSS works top to bottom, never going backwards, and tags are found later in the code than the image. They're also found later in the code than the status, but you could probably fake the status with an additional ::before element, for instance:



Leospars said:
what's the name for the anime title on hover can't seem to find it for this here. .list-table .list-table-data .data.title:hover wasn't working not sure why maybe i type it in wrong.
Sorry for the trouble.

The title itself is either of:
.data.title .link.sort
.list-table .list-table-data .data.title .link

The ".list-table .list-table-data .data.title:hover" you have is selecting the entire title section, which includes the add-edit-more buttons, rewatching text, etcetera, which may or may not be what you want. You can see how the .data.title contains the .link.sort in the HTML editor (AKA inspect element).

What's your desired result with this code?
Install list designs without any CSS knowledge!
Support me on Ko-fi. • Check out my list designs.
What am I working on right now?
May 23, 2021 9:33 PM
#764
Valerio_Lyndon
平沢唯

Offline
Dec 2016
2206
JustJasper said:
Hey, I was wondering if it is possible to keep the banner from moving up when srolling down my list?

As in the entire thing, buttons and all? Give this a go.

Add to the bottom of your CSS.
/* Static header */

.header {
	position: fixed;
	top: 0;
	left: calc(50% - 530px);
}

.list-menu-float {
	position: fixed;
	top: 318px;
	left: calc(50% - 530px);
}

#status-menu {
	position: fixed;
	top: 318px;
}

.fixed .status-menu {
	padding: 0 0 0 173px;
}

.fixed .status-menu::after {
    top: -51px;
    width: 150px;
    height: 150px;
    box-shadow: 0 1px 2px var(--shadow);
}

.cover-block {
	position: fixed;
	top: 0;
}

.list-unit .list-status-title .stats {
	position: fixed;
	z-index: 1;
	top: 392px;
	right: calc(50% - 498px) !important;
}

.list-table > tbody:first-of-type {
	position: fixed;
	left: initial;
	top: 390px;
	right: calc(50% - 532px) !important;
	margin-top: 0;
}

#list-container {
	padding-top: 382px;
}
Install list designs without any CSS knowledge!
Support me on Ko-fi. • Check out my list designs.
What am I working on right now?
May 24, 2021 1:45 AM
#765
Leospars

Offline
Sep 2019
133
Valerio_Lyndon said:
Depending on what property you were trying to apply, it's possible there was another selector with higher priority (which is achieved through more specificity, basically just longer selectors). When I look in your code I'm not immediately seeing anything getting overwritten, so you'll have to show me what's actually going wrong and what's supposed to be happening.
Sorry about that I just noticed I didn't have any space between the "!important", since I used Note and used Find & Replace ";" with "!important;" resulted in
Sorry my bad. But I added the space and it works.

Valerio_Lyndon said:
Leospars said:
[can i] curve the data.status symbol for all rows.

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




Yeah that's it. Thanks alot. Thanks for the comments too. Could I get the row background to curve as well.

The box area behind it used for row tint.

Valerio_Lyndon said:
Leospars said:
Also, can I get to change the preview image border and list-table .list-table-data .data.status based on the tag Favourite

The image border won't be possible. This is because CSS works top to bottom, never going backwards, and tags are found later in the code than the image. They're also found later in the code than the status, but you could probably fake the status with an additional ::before element, for instance:



I tried this but it didn't come out right.


Valerio_Lyndon said:
Leospars said:
what's the name for the anime title on hover can't seem to find it for this here. .list-table .list-table-data .data.title:hover wasn't working not sure why maybe i type it in wrong.
Sorry for the trouble.


Valerio_Lyndon said:

The title itself is either of:
.data.title .link.sort
.list-table .list-table-data .data.title .link

The ".list-table .list-table-data .data.title:hover" you have is selecting the entire title section, which includes the add-edit-more buttons, rewatching text, etcetera, which may or may not be what you want. You can see how the .data.title contains the .link.sort in the HTML editor (AKA inspect element).

What's your desired result with this code?
Yh I tried those before too but they didn't seem to work. My aim was for genre tags, on my plan to watch list, which I got from MyAnimeList (MAL) Tags Updater to show whenever the cursor hovers over the anime title. I later on decided that at times I may want to switch between that and showing all the genre tags and only showing them on hover using a button of some sort but I think thats likely not possible without a stylus or something from greasy forks. Is it possible?
LeosparsMay 24, 2021 10:04 AM


May 24, 2021 6:27 AM
#766
JasperVsGames

Offline
May 2020
16
Valerio_Lyndon said:
JustJasper said:
Hey, I was wondering if it is possible to keep the banner from moving up when srolling down my list?

As in the entire thing, buttons and all? Give this a go.

Add to the bottom of your CSS.
/* Static header */

.header {
	position: fixed;
	top: 0;
	left: calc(50% - 530px);
}

.list-menu-float {
	position: fixed;
	top: 318px;
	left: calc(50% - 530px);
}

#status-menu {
	position: fixed;
	top: 318px;
}

.fixed .status-menu {
	padding: 0 0 0 173px;
}

.fixed .status-menu::after {
    top: -51px;
    width: 150px;
    height: 150px;
    box-shadow: 0 1px 2px var(--shadow);
}

.cover-block {
	position: fixed;
	top: 0;
}

.list-unit .list-status-title .stats {
	position: fixed;
	z-index: 1;
	top: 392px;
	right: calc(50% - 498px) !important;
}

.list-table > tbody:first-of-type {
	position: fixed;
	left: initial;
	top: 390px;
	right: calc(50% - 532px) !important;
	margin-top: 0;
}

#list-container {
	padding-top: 382px;
}


Thanks! Seems to work fine, no problems so far.
May 25, 2021 6:00 AM
#767
JasperVsGames

Offline
May 2020
16
I just finished one of my currently watching anime but now one of my completed anime is under ''currently watching'' in the All Anime tab. Got any idea how to fix this?
May 25, 2021 9:39 AM
#768
Shishio-kun

Offline
Feb 2010
12631
JustJasper said:
I just finished one of my currently watching anime but now one of my completed anime is under ''currently watching'' in the All Anime tab. Got any idea how to fix this?


Doesn't it take time to update? I think I read this before once
May 25, 2021 10:12 AM
#769
JasperVsGames

Offline
May 2020
16
Shishio-kun said:
JustJasper said:
I just finished one of my currently watching anime but now one of my completed anime is under ''currently watching'' in the All Anime tab. Got any idea how to fix this?


Doesn't it take time to update? I think I read this before once


I think you're right, it's fine now. I had no patience :)
Still weird it moved the first one in completed, and not the anime I just finished.
May 26, 2021 3:09 AM
#770
Valerio_Lyndon
平沢唯

Offline
Dec 2016
2206
Leospars said:
Sorry about that I just noticed I didn't have any space between the "!important", since I used Note and used Find & Replace ";" with "!important;" resulted in
Sorry my bad. But I added the space and it works.

Ah, I see. Well, good that it is no longer an issue.

Leospars said:
Yeah that's it. Thanks alot. Thanks for the comments too. Could I get the row background to curve as well.
https://i.imgur.com/j2DPKxv.png?1
The box area behind it used for row tint.

We can do that with another border-radius code.
.list-item {
  border-radius: 20px;
}


Leospars said:
I tried this but it didn't come out right.https://i.imgur.com/si4C9d7.png?1

Ah, most of this is due to using both codes at once. They were meant as alternate options, not addons for each other, but I didn't specify this. The positioning is a separate issue that can be solved by using !important on the transform property. So what I recommend doing is overwriting this code you currently have:

With this new code, which has the transform change and the duplicate code taken out:


Leospars said:
Yh I tried those before too but they didn't seem to work. My aim was for genre tags, on my plan to watch list, which I got from MyAnimeList (MAL) Tags Updater to show whenever the cursor hovers over the anime title. I later on decided that at times I may want to switch between that and showing all the genre tags and only showing them on hover using a button of some sort but I think thats likely not possible without a stylus or something from greasy forks. Is it possible?

Activating the tags on hover of the .data.title section is possible, but not specifically the title. Example below. The main problem with this code is that the .data.title section is actually quite large and extends far beyond the actual title of the anime. I counter-acted most of this with some pointer-events trickery.
.data.title:hover ~ .tags {
	opacity: var(--tagsopac-h);
}

/* Remove mouse interaction for everything *except* links to prevent the empty space triggering the hover effect */
.data.title {
	pointer-events: none;
}
.data.title a {
	pointer-events: auto;
}


Adding a new button with click functionality isn't possible, but having a button element on hover should be totally possible. My first thought would be to enable a list column you don't intend to use and then style that to look like a button. It could be selected similarly to the .data.title example above.
Valerio_LyndonMay 26, 2021 3:13 AM
Install list designs without any CSS knowledge!
Support me on Ko-fi. • Check out my list designs.
What am I working on right now?
May 26, 2021 8:55 AM
#771
CoconutLaCroix

Offline
Jan 2020
35
Adding transparency to the background of my list is giving me a bit of trouble. The list rows seem to be split in half vertically, such that while the bottom half of each row (below the title) becomes transparent as intended, the top half (above the title) remains fully opaque. How can I correct this?
May 26, 2021 10:37 PM
#772
Valerio_Lyndon
平沢唯

Offline
Dec 2016
2206
SkiCitrusSoda said:
Adding transparency to the background of my list is giving me a bit of trouble. The list rows seem to be split in half vertically, such that while the bottom half of each row (below the title) becomes transparent as intended, the top half (above the title) remains fully opaque. How can I correct this?

It's an artifact of how the rounded category header mod was made, it's usually not an issue. The easiest way to fix it is to use the transparent list row code from the original forum post:
/*-S-T-A-R-T--------------------*\
| Transparent List Rows          |
\*------------------------------*/

:root {
	/* Change colour here */
	--row-tint: var(--bg);
}

.list-item, .data.priority, .data.number, .data.status:before, .data.status:after {
	background: linear-gradient(var(--row-tint),var(--row-tint)), var(--background) no-repeat center / cover fixed transparent !important;
}

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


It can also be fixed by modifying the rounded category header mod, but that is a lot more involved so I figured I'd keep it easy. I'll look into removing this artifact in a new version of that mod though.
Install list designs without any CSS knowledge!
Support me on Ko-fi. • Check out my list designs.
What am I working on right now?
May 26, 2021 11:02 PM
#773
Leospars

Offline
Sep 2019
133
Valerio_Lyndon said:

Ah, most of this is due to using both codes at once. They were meant as alternate options, not addons for each other, but I didn't specify this. The positioning is a separate issue that can be solved by using !important on the transform property. So what I recommend doing is overwriting this code you currently have:

With this new code, which has the transform change and the duplicate code taken out:

Valerio_Lyndon said:
Activating the tags on hover of the .data.title section is possible, but not specifically the title. Example below. The main problem with this code is that the .data.title section is actually quite large and extends far beyond the actual title of the anime. I counter-acted most of this with some pointer-events trickery.
.data.title:hover ~ .tags {
	opacity: var(--tagsopac-h);
}

/* Remove mouse interaction for everything *except* links to prevent the empty space triggering the hover effect */
.data.title {
	pointer-events: none;
}
.data.title a {
	pointer-events: auto;
}

Thanks I see now. Nice.

Valerio_Lyndon said:
Adding a new button with click functionality isn't possible, but having a button element on hover should be totally possible. My first thought would be to enable a list column you don't intend to use and then style that to look like a button. It could be selected similarly to the .data.title example above.

Cool I think I'll try this. Though one of the hover/click that I'd want is for all tags to show but I don't think or at least I'm not sure if that possible for hover on a child/cousin element to affect the larger element ".list.table", because CSS doesn't work back and forth, only down. I don't know that much about CSS but is it possible?
LeosparsMay 26, 2021 11:11 PM


May 27, 2021 12:04 AM
#774
Valerio_Lyndon
平沢唯

Offline
Dec 2016
2206
Leospars said:
Cool I think I'll try this. Though one of the hover/click that I'd want is for all tags to show but I don't think or at least I'm not sure if that possible for hover on a child/cousin element to affect the larger element ".list.table", because CSS doesn't work back and forth, only down. I don't know that much about CSS but is it possible?
I see what you mean. You are correct, affecting the other list rows in that way would, unfortunately, be impossible. The only way would be to create a script (like the ones found on greasyfork).
Install list designs without any CSS knowledge!
Support me on Ko-fi. • Check out my list designs.
What am I working on right now?
May 27, 2021 5:51 AM
#775
CoconutLaCroix

Offline
Jan 2020
35
Valerio_Lyndon said:
SkiCitrusSoda said:
Adding transparency to the background of my list is giving me a bit of trouble. The list rows seem to be split in half vertically, such that while the bottom half of each row (below the title) becomes transparent as intended, the top half (above the title) remains fully opaque. How can I correct this?

It's an artifact of how the rounded category header mod was made, it's usually not an issue. The easiest way to fix it is to use the transparent list row code from the original forum post:
/*-S-T-A-R-T--------------------*\
| Transparent List Rows          |
\*------------------------------*/

:root {
	/* Change colour here */
	--row-tint: var(--bg);
}

.list-item, .data.priority, .data.number, .data.status:before, .data.status:after {
	background: linear-gradient(var(--row-tint),var(--row-tint)), var(--background) no-repeat center / cover fixed transparent !important;
}

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


It can also be fixed by modifying the rounded category header mod, but that is a lot more involved so I figured I'd keep it easy. I'll look into removing this artifact in a new version of that mod though.

That did the trick! Thank you!
May 28, 2021 2:37 AM
#776
Leguch

Offline
Mar 2018
1007
Is there a way to apply some kind of effect to the banner background? Let's say a sort of glitch effect.

🌺 Anime List 🌺
🌺 Cards Collection 🌺
🌺 Favourite Characters 🌺
🌺 Set by Megumi 🌺


May 28, 2021 2:41 AM
#777
Valerio_Lyndon
平沢唯

Offline
Dec 2016
2206
Leguch said:
Is there a way to apply some kind of effect to the banner background? Let's say a sort of glitch effect.

I don't think there would be a good way with pure CSS, but you could definitely use a GIF image if you find/create one with the effect you want. There are ways to layer multiple images if the GIF has transparency, or the effect could be combined with your regular banner to create a new GIF by using an image editor.
Install list designs without any CSS knowledge!
Support me on Ko-fi. • Check out my list designs.
What am I working on right now?
May 28, 2021 2:50 AM
#778
Leguch

Offline
Mar 2018
1007
Valerio_Lyndon said:
Leguch said:
Is there a way to apply some kind of effect to the banner background? Let's say a sort of glitch effect.

I don't think there would be a good way with pure CSS, but you could definitely use a GIF image if you find/create one with the effect you want. There are ways to layer multiple images if the GIF has transparency, or the effect could be combined with your regular banner to create a new GIF by using an image editor.


I see, I'll try that!

🌺 Anime List 🌺
🌺 Cards Collection 🌺
🌺 Favourite Characters 🌺
🌺 Set by Megumi 🌺


May 28, 2021 7:01 AM
#779
JasperVsGames

Offline
May 2020
16
Valerio_Lyndon said:
SkiCitrusSoda said:
Adding transparency to the background of my list is giving me a bit of trouble. The list rows seem to be split in half vertically, such that while the bottom half of each row (below the title) becomes transparent as intended, the top half (above the title) remains fully opaque. How can I correct this?

It's an artifact of how the rounded category header mod was made, it's usually not an issue. The easiest way to fix it is to use the transparent list row code from the original forum post:
/*-S-T-A-R-T--------------------*\
| Transparent List Rows          |
\*------------------------------*/

:root {
	/* Change colour here */
	--row-tint: var(--bg);
}

.list-item, .data.priority, .data.number, .data.status:before, .data.status:after {
	background: linear-gradient(var(--row-tint),var(--row-tint)), var(--background) no-repeat center / cover fixed transparent !important;
}

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


It can also be fixed by modifying the rounded category header mod, but that is a lot more involved so I figured I'd keep it easy. I'll look into removing this artifact in a new version of that mod though.


I have the same problem, but how do I change the color/level of transparency of the rows with this code?
May 28, 2021 10:53 AM
#780
Shishio-kun

Offline
Feb 2010
12631
I wonder if I can create advanced layered user/character name intro animations like this with Clarity's banner? 🤔Would probably take all the available selectors 😀


Will be looking into it later 😎
May 30, 2021 1:18 AM
#781
Valerio_Lyndon
平沢唯

Offline
Dec 2016
2206
Shishio-kun said:
I wonder if I can create advanced layered user/character name intro animations like this with Clarity's banner? 🤔Would probably take all the available selectors 😀


Will be looking into it later 😎

Should be totally possible! IIRC there are at least a few selectors open to use, or you could layer background-images on the same element.
Install list designs without any CSS knowledge!
Support me on Ko-fi. • Check out my list designs.
What am I working on right now?
May 30, 2021 1:18 AM
#782
Valerio_Lyndon
平沢唯

Offline
Dec 2016
2206
Will reply to JustJasper tomorrow since I need to write up a fix for the category mod.
Install list designs without any CSS knowledge!
Support me on Ko-fi. • Check out my list designs.
What am I working on right now?
May 30, 2021 8:12 AM
#783
JasperVsGames

Offline
May 2020
16
Valerio_Lyndon said:
Will reply to JustJasper tomorrow since I need to write up a fix for the category mod.


No worries, take your time :)
May 30, 2021 10:04 PM
#784
Valerio_Lyndon
平沢唯

Offline
Dec 2016
2206
JustJasper said:
Valerio_Lyndon said:
It's an artifact of how the rounded category header mod was made, it's usually not an issue. The easiest way to fix it is to use the transparent list row code from the original forum post:


It can also be fixed by modifying the rounded category header mod, but that is a lot more involved so I figured I'd keep it easy. I'll look into removing this artifact in a new version of that mod though.


I have the same problem, but how do I change the color/level of transparency of the rows with this code?

I see you may have already figured this out but, after the "--row-tint:" text, you can change the "var(--bg)" to any colour code. Example:
/*-S-T-A-R-T--------------------*\
| Transparent List Rows          |
\*------------------------------*/

:root {
	/* Change colour here */
	--row-tint: rgba(0, 0, 0, 0.5) ;
}

.list-item, .data.priority, .data.number, .data.status:before, .data.status:after {
	background: linear-gradient(var(--row-tint),var(--row-tint)), var(--background) no-repeat center / cover fixed transparent !important;
}

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

That said, you don't seem to have a background image set so it will probably still be an issue. The list row code relies on having a background image, and without one it will be the same as before.

To fully fix it, you can try this alternate category header code. Unfortunately it does slightly change the style, but this is unavoidable. You can see the difference here:



Install list designs without any CSS knowledge!
Support me on Ko-fi. • Check out my list designs.
What am I working on right now?
Jun 5, 2021 9:37 AM
#785
mistersunday

Offline
May 2014
255
mistersunday said:
Valerio_Lyndon said:

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!


Hey hey, thanks again for your help last time. It looks like I'm having the same issue again where the headers just randomly disappeared the same way they did last time. I checked another browser to make sure it wasn't my Google Chrome but they're gone on Safari too.

I made sure I had the relevant code for my list which hasn't changed from the last revisions made on this thread:


Is there something I can do to avoid this in the future? Or am I missing something in my code
Jun 5, 2021 10:50 AM
#786
mistersunday

Offline
May 2014
255
Okay I just checked my list and I see that the headers have reappeared so discard my last post! not sure what's been triggering this though
Jun 5, 2021 3:57 PM
#787
Paper2017

Offline
Mar 2019
19
Hi, you have helped me before in the past with making changes to my css and it was usually something small. Could I have some help with making this into a grid style. I love the clarity layout and do not want to have to fight customizing a different css layout just to add what I already have in my current one. I tried looking at other css layouts and I was struggling to customize them (partially because I've been using clarity for a long time) and kept giving up because I couldn't add some features.

If this is too much, I can deal without having it in grid style.

Thank you for reading my request.

Jun 6, 2021 1:08 AM
#788
Valerio_Lyndon
平沢唯

Offline
Dec 2016
2206
Paper2017 said:
Hi, you have helped me before in the past with making changes to my css and it was usually something small. Could I have some help with making this into a grid style. I love the clarity layout and do not want to have to fight customizing a different css layout just to add what I already have in my current one. I tried looking at other css layouts and I was struggling to customize them (partially because I've been using clarity for a long time) and kept giving up because I couldn't add some features.

If this is too much, I can deal without having it in grid style.

Thank you for reading my request.


The easiest way to do this is by ripping some code from a pre-existing grid-style theme. Otherwise, it becomes very similar to just creating a whole new design. I've done this before by taking Brink's layout:
[url=\https://pastebin.com/1JG85wrL][/url]

The code used for that is quite old so it should probably be updated, which I can do if you want to use it. But that option, or something similar, is what I would recommend. Creating a new grid style would probably take me 2-10 hours as compared with combining which takes, normally, 1 or less. If you wanted a grid from a different theme, that shouldn't be too hard either.
Install list designs without any CSS knowledge!
Support me on Ko-fi. • Check out my list designs.
What am I working on right now?
Jun 6, 2021 4:57 PM
#789
Paper2017

Offline
Mar 2019
19
Valerio_Lyndon said:

The easiest way to do this is by ripping some code from a pre-existing grid-style theme. Otherwise, it becomes very similar to just creating a whole new design. I've done this before by taking Brink's layout:
[url=\https://pastebin.com/1JG85wrL][/url]

The code used for that is quite old so it should probably be updated, which I can do if you want to use it. But that option, or something similar, is what I would recommend. Creating a new grid style would probably take me 2-10 hours as compared with combining which takes, normally, 1 or less. If you wanted a grid from a different theme, that shouldn't be too hard either.


I tried doing that before but all that happens is this...

I don't know if it is because my code is old and kind of a mess from all the times i've played around with it or if it is just me not copying the right stuff over.

Here is the layout I tried taking a grid style from:
https://pastebin.com/raw/vxDyRL67
Jun 6, 2021 11:13 PM
#790
Valerio_Lyndon
平沢唯

Offline
Dec 2016
2206
Paper2017 said:
Valerio_Lyndon said:

The easiest way to do this is by ripping some code from a pre-existing grid-style theme. Otherwise, it becomes very similar to just creating a whole new design. I've done this before by taking Brink's layout:
[url=\https://pastebin.com/1JG85wrL][/url]

The code used for that is quite old so it should probably be updated, which I can do if you want to use it. But that option, or something similar, is what I would recommend. Creating a new grid style would probably take me 2-10 hours as compared with combining which takes, normally, 1 or less. If you wanted a grid from a different theme, that shouldn't be too hard either.


I tried doing that before but all that happens is this...

I don't know if it is because my code is old and kind of a mess from all the times i've played around with it or if it is just me not copying the right stuff over.

Here is the layout I tried taking a grid style from:
https://pastebin.com/raw/vxDyRL67

If you pasted in new code without deleting anything first, that's probably the issue. List designs are coded under the assumption they will be applied on top of the default list. When applied on top of another list design, there are often conflicting codes used by both designers. So usually combining themes requires resetting some portion of the list to default, and then taking that portion from your other theme and applying it.

That's what I had to do here, in this code you can try. You'll need to overwrite your current code entirely. I recommend keeping a backup of your current code or applying this to a separate MAL style so that you can go back or reference the previous code as needed, especially as I have removed or disabled large areas of code, including your additions (disabled areas have comment markers before and after them with "DISABLED" written at the start /**/). This is because these additions will likely need tweaking or rewriting to work on this different grid style, as it works very differently from Clarity.

Code: https://controlc.com/cf5ba8dc


I didn't extensively test it, so if something is broken I can take another look.
Install list designs without any CSS knowledge!
Support me on Ko-fi. • Check out my list designs.
What am I working on right now?
Jun 7, 2021 3:45 PM
#791
Paper2017

Offline
Mar 2019
19

Thank you, it looks great. I probably won't find anything broken until I try to tweak it again. (which could range from days to months lol)

Edit: I noticed a couple things that were easy to fix. (ex. after hovering on an anime, the data tag box ended up being bigger than the list item making it act like it was still being hovered when it wasn't. Easy to fix though, all i did was change some of the heights and widths to auto)

Thanks again.
Paper2017Jun 7, 2021 4:38 PM
Jun 7, 2021 6:19 PM
#792
ShaDedZz

Offline
Jun 2020
9
Hello, I was wondering if you could help me with my category headers (Round).

My browser is: Opera GX

I've been reading most of the replies but still can't get a solution to it.
With the code that I have now, at the top of the list the gap or space for the header exists but there is no header.

My first code had the headers but it was going TOO slow, I was unable to navigate on the list freely, so I changed some things, now it lags less but it still bothers a lot and there are no headers.

Also only if it isn't a lot to ask could you also help me optimize it?
When I want to scroll niether way, the list it takes to long to respond and it lags a lot, same with the buttons, they don't react unless I stay still on them for like 10 seconds. Basically it's going pretty slow and I would like to know if theres any way to fix it.

PD: If you can't understand something make me know, as it is that my first language isn't English (It is Spanish, i'm from Chile) it may be difficult to understand what I am asking for.

Im using this one on the manga list to have the old code for now, so you can see whats wrong.
It goes very slow and I don't know why.



This one is the anime list were I changed some things but as I know little and nothing about CSS I couldn't do much.
It still goes a little slow but not as much tough.

Jun 7, 2021 7:07 PM
#793
Shishio-kun

Offline
Feb 2010
12631
ShaDedZz said:
Hello, I was wondering if you could help me with my category headers (Round).

My browser is: Opera GX

I've been reading most of the replies but still can't get a solution to it.
With the code that I have now, at the top of the list the gap or space for the header exists but there is no header.

My first code had the headers but it was going TOO slow, I was unable to navigate on the list freely, so I changed some things, now it lags less but it still bothers a lot and there are no headers.

Also only if it isn't a lot to ask could you also help me optimize it?
When I want to scroll niether way, the list it takes to long to respond and it lags a lot, same with the buttons, they don't react unless I stay still on them for like 10 seconds. Basically it's going pretty slow and I would like to know if theres any way to fix it.

PD: If you can't understand something make me know, as it is that my first language isn't English (It is Spanish, i'm from Chile) it may be difficult to understand what I am asking for.

Im using this one on the manga list to have the old code for now, so you can see whats wrong.
It goes very slow and I don't know why.



This one is the anime list were I changed some things but as I know little and nothing about CSS I couldn't do much.
It still goes a little slow but not as much tough.



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

replace with
@\import "https://malscraper.azurewebsites.net/covers/anime/SpaceCowboy/presets/dataimagelinkbefore";
@\import "https://malscraper.azurewebsites.net/covers/manga/DateYutaka/presets/dataimagelinkbefore";

change "SpaceCowboy" and "DateYukata" in the imports to your username. This would speed up the layout dramatically since the original malscraper import is very heavy


for the headers, afaik

@\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:162px;}[data-query*='\"status\":7']:not([data-query*='order']):not([data-query*='tag\"']):not([data-query*='\"s\"']) .list-item:nth-child($index) .status:before{content:'$content'}&user=ShaDedZz&list=anime";

the header code goes at the absolute top above everything else
Shishio-kunJun 7, 2021 7:13 PM
Jun 8, 2021 11:21 AM
#794
ShaDedZz

Offline
Jun 2020
9
Shishio-kun said:
ShaDedZz said:
Hello, I was wondering if you could help me with my category headers (Round).

My browser is: Opera GX

I've been reading most of the replies but still can't get a solution to it.
With the code that I have now, at the top of the list the gap or space for the header exists but there is no header.

My first code had the headers but it was going TOO slow, I was unable to navigate on the list freely, so I changed some things, now it lags less but it still bothers a lot and there are no headers.

Also only if it isn't a lot to ask could you also help me optimize it?
When I want to scroll niether way, the list it takes to long to respond and it lags a lot, same with the buttons, they don't react unless I stay still on them for like 10 seconds. Basically it's going pretty slow and I would like to know if theres any way to fix it.

PD: If you can't understand something make me know, as it is that my first language isn't English (It is Spanish, i'm from Chile) it may be difficult to understand what I am asking for.

Im using this one on the manga list to have the old code for now, so you can see whats wrong.
It goes very slow and I don't know why.



This one is the anime list were I changed some things but as I know little and nothing about CSS I couldn't do much.
It still goes a little slow but not as much tough.



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

replace with
@import "https://malscraper.azurewebsites.net/covers/anime/SpaceCowboy/presets/dataimagelinkbefore";
@import "https://malscraper.azurewebsites.net/covers/manga/DateYutaka/presets/dataimagelinkbefore";

change "SpaceCowboy" and "DateYukata" in the imports to your username. This would speed up the layout dramatically since the original malscraper import is very heavy


for the headers, afaik

@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:162px;}[data-query*='"status":7']:not([data-query*='order']):not([data-query*='tag"']):not([data-query*='"s"']) .list-item:nth-child($index) .status:before{content:'$content'}&user=ShaDedZz&list=anime";

the header code goes at the absolute top above everything else


Thanks! Everything is almost fine now, but the anime hover covers aren't working.

And a small detail the Home button, quick add button, anime list, manga list, history, export, etc. still lag a little but only when I'm on the All anime page, in the others it works fine.

Edit: They lag on the pages that have lots of entries I don't know if that can be fixed.
ShaDedZzJun 8, 2021 11:42 AM
Jun 8, 2021 11:41 AM
#795
ShaDedZz

Offline
Jun 2020
9
For some reason it cuts my code and the spoiler button, I've tried to edit it but couldn't so here.

Jun 8, 2021 12:25 PM
#796
Shishio-kun

Offline
Feb 2010
12631
@ShaDedZz
Delete this entire section. Something was broken here, I think



Replace it with the import for the same

@\import "https://valeriolyndon.github.io/MAL-Public-List-Designs/Clarity%20Theme/Theme%20-%20Compressed.css";

If you have almost 2000 PTW entries I guess the list is gonna lag- start your list on current and use that, move planned anime to another account, etc, import the entire CSS, there's a tutorial on this
Jun 8, 2021 1:27 PM
#797
ShaDedZz

Offline
Jun 2020
9
Shishio-kun said:
@ShaDedZz
Delete this entire section. Something was broken here, I think



Replace it with the import for the same

@\import "https://valeriolyndon.github.io/MAL-Public-List-Designs/Clarity%20Theme/Theme%20-%20Compressed.css";


If you have almost 2000 PTW entries I guess the list is gonna lag- start your list on current and use that, move planned anime to another account, etc, import the entire CSS, there's a tutorial on this


Thank you very much! Now it's all good :D
Jun 8, 2021 8:52 PM
#798
Legends_of_anime

Offline
Jul 2020
1183
Suddenly the stats button in my animelist stopped working. When I click on the "stats" button nothing shows up. Can someone please help???

This is my list CSS:

StoryGraph x Spotify x Instagram
“Whether we die or not isn't really that big a deal." — Suzuya Juuzou
Jun 12, 2021 6:07 PM
#799
Valerio_Lyndon
平沢唯

Offline
Dec 2016
2206
LEGENDS_OF_ANIME said:
Suddenly the stats button in my animelist stopped working. When I click on the "stats" button nothing shows up. Can someone please help???

This is my list CSS:

Seems to be an issue with the positioning. To fix it, you can either find the banner height code on line ~210:
.list-stats { top: calc(var(--banner-height) + 228px); }

And change it to this:
.list-stats { top: calc(var(--banner-height) + 98px); }

Or simply add this ^ second code to the bottom of your CSS.
Install list designs without any CSS knowledge!
Support me on Ko-fi. • Check out my list designs.
What am I working on right now?
Jun 14, 2021 9:30 AM
#800
Shishio-kun

Offline
Feb 2010
12631
JayDaAnimeLord said:
how do we make the preview images larger? -> for clarity list design as well or is it the same way ? do the banner images have a specific size?


Moved your post to here
Reply Disabled for Non-Club Members
Pages (26) « First ... « 14 15 [16] 17 18 » ... Last »
See All Discussions

More topics from this board

» theme help

threat - Jul 5

5 by Zaryf »»
Aug 21, 5:46 AM

» [CSS] ⭐️ Customize your List Cursor + Cursor Fixes

Shishio-kun - Mar 8, 2021

30 by Shishio-kun »»
Jul 28, 3:17 AM

» How To Have Different Banner/Cover image & Background Image For Manga & Anime Lists

YasminaRegina - Jul 25

2 by YasminaRegina »»
Jul 26, 1:02 AM

Sticky: » 💚 [REPAIR STICKY] Repair/speed up layouts + Request layout fixes ( 1 2 )

Shishio-kun - Nov 17, 2023

52 by LucaBalsa »»
Jul 6, 2:02 PM

» [CSS/BBCODE] ⭐️ How to view anyone's CSS or BBcodes (for lists, profiles, or clubs)!

Shishio-kun - Feb 6, 2012

37 by sunnysummerday »»
Jun 11, 7:44 PM

MoreTop Anime

  1. 1 Sousou no Frieren
  2. 2 Fullmetal Alchemist: Brotherhood
  3. 3 Steins;Gate
  4. 4 Shingeki no Kyojin Season 3 Part 2
  5. 5 Gintama: The Final

MoreTop Airing Anime

  1. 1 Kimetsu no Yaiba Movie: Mugen Jou-hen
  2. 2 One Piece
  3. 3 Kaoru Hana wa Rin to Saku
  4. 4 Grand Blue Season 2
  5. 5 Dandadan 2nd Season

MoreMost Popular Characters

  1. 1 Lamperouge, Lelouch
  2. 2 Monkey D., Luffy
  3. 3 Levi
  4. 4 Lawliet, L
  5. 5 Roronoa, Zoro
It’s time to ditch the text file.
Keep track of your anime easily by creating your own list.
Sign Up Login