[CSS - Modern] 🍰 Clarified by V.L — a responsive table-based design (100 - ) - Forums

Mar 25, 4:19 PM

Offline

Aug 2019

871

Reply to Shishio-kun

@EnderVsqz626

You do have banners and backgrounds on each category already, so I'm not sure why you're asking (for someone else?)

The code for this is already in your layout.

/*==============================*\
  !MODS
\*------------------------------*/
/*------------------------------*\
|*  Per-Category Images v1.0.3  *|
\* - - - - - - - - - - - - - - -*/

.ownlist[data-query*='"status":7'] {
	/* All Anime */
	--background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwACAqc00BVqxx9ooY1Zq004);
	--banner-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwDVt7D1O24ULFoIycalWzPk);
} .ownlist[data-query*='"status":1'] {
	/* Current */
	--background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwAlbDq3efgv9ahHUgkrKJbQ);
	--banner-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwKy6x5JJ7hAQU55RxbUW3Ps);
} .ownlist[data-query*='"status":2'] {
	/* Completed */
	--background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwGgdJUJomk8kXclUsAzkELE);
	--banner-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwNG2BhKBENTQR0q99gLB1pM);
} .ownlist[data-query*='"status":3'] {
	/* Paused */
	--background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwPWEfKHGVwkRANzNI16Ef8E);
	--banner-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwLgPoQZQsi-fQM1s3otXz58);
} .ownlist[data-query*='"status":4'] {
	/* Dropped */
	--background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwCi5kjk_mnR8GLqoLKLwwmo);
	--banner-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwOYdvQDXXIKyJx9CRKmFVXg);
} .ownlist[data-query*='"status":6'] {
	/* Planned */
	--background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwODeGDXU2h9-bC-Fh5Sj-gI);
	--banner-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwKSC7B1oGtM9Ikh1UGOYu_Eci-elHWwtugkxGKd5Vq3X);
}

Otherwise it's going to be something like this
https://myanimelist.net/forum/?topicid=1911634
depends on the layout, you have to link the list in question you should always do this

Or for Clarity layouts I have more per banner/background codes here
https://pastebin.com/raw/7m8fhwYX

@Shishio-kun Thank you
Now the same Clarity code works in Clarified?

Because my clarity was an example to see if you can do the same in Clarified, if you can everything okidoki

https://imgur.com/Y1yqQay.png
https://i.imgur.com/MmsHI57.png

Mar 25, 4:35 PM

#102

Shishio-kun

Online

Feb 2010

12037

@EnderVsqz626 OK, for Clarified it would be this


/*CURRENTLY WATCHING WALLPAPER
To change background images: Delete what's in the parenthesis. Upload the new background to Imgur or a similar site, then copy the direct link (or Original GIF link if it's animated) and paste it into the parenthesis. Save. 
*/
body[data-query*='"status":1'] {
background-image: url(https://i.imgur.com/wWFNGHr.jpg) !important;
}
/*COMPLETED WALLPAPER*/
body[data-query*='"status":2'] {
background-image: url(https://i.imgur.com/lDzDDe7.jpg) !important;
}
/*ON HOLD WALLPAPER*/
body[data-query*='"status":3'] {
background-image: url(https://i.imgur.com/E3EzRRD.jpg) !important;
}
/*DROPPED WALLPAPER*/
body[data-query*='"status":4'] {
background-image: url(https://i.imgur.com/2lvLCq7.jpg) !important;
}
/*PLANNED WALLPAPER*/
body[data-query*='"status":6'] {
background-image: url(https://i.imgur.com/oVpAs9w.jpg) !important;
}
/*ALL ANIME/MANGA WALLPAPER*/
body[data-query*='"status":7'] {
background-image: url(https://i.imgur.com/vwVXHGS.jpg) !important;
}


body[data-query*='"status":1'],
body[data-query*='"status":2'],
body[data-query*='"status":3'],
body[data-query*='"status":4'],
body[data-query*='"status":6'],
body[data-query*='"status":7'] {
  background-attachment: fixed !important;
  background-position: 50% 50%;
  background-repeat: no-repeat !important;
  background-size: cover;
 
}


/*CURRENT BANNER*/
[data-query*='"status":1'] .header::before {
background-image: url(https://i.imgur.com/wWFNGHr.jpg) !important;
}
/*COMPLETED*/
[data-query*='"status":2'] .header::before {
background-image: url(https://i.imgur.com/lDzDDe7.jpg) !important;
}
/*ON HOLD*/
[data-query*='"status":3'] .header::before {
background-image: url(https://i.imgur.com/E3EzRRD.jpg) !important;
}
/*DROPPED*/
[data-query*='"status":4'] .header::before {
background-image: url(https://i.imgur.com/2lvLCq7.jpg) !important;
}
/*PLANNED*/
[data-query*='"status":6'] .header::before {
background-image: url(https://i.imgur.com/oVpAs9w.jpg) !important;
}
/*ALL ANIME/MANGA*/
[data-query*='"status":7'] .header::before {
background-image: url(https://i.imgur.com/vwVXHGS.jpg) !important;
}

Mar 27, 4:42 PM

#103

EnderVsqz626

Offline

Aug 2019

871

Reply to Shishio-kun

@EnderVsqz626 OK, for Clarified it would be this


/*CURRENTLY WATCHING WALLPAPER
To change background images: Delete what's in the parenthesis. Upload the new background to Imgur or a similar site, then copy the direct link (or Original GIF link if it's animated) and paste it into the parenthesis. Save. 
*/
body[data-query*='"status":1'] {
background-image: url(https://i.imgur.com/wWFNGHr.jpg) !important;
}
/*COMPLETED WALLPAPER*/
body[data-query*='"status":2'] {
background-image: url(https://i.imgur.com/lDzDDe7.jpg) !important;
}
/*ON HOLD WALLPAPER*/
body[data-query*='"status":3'] {
background-image: url(https://i.imgur.com/E3EzRRD.jpg) !important;
}
/*DROPPED WALLPAPER*/
body[data-query*='"status":4'] {
background-image: url(https://i.imgur.com/2lvLCq7.jpg) !important;
}
/*PLANNED WALLPAPER*/
body[data-query*='"status":6'] {
background-image: url(https://i.imgur.com/oVpAs9w.jpg) !important;
}
/*ALL ANIME/MANGA WALLPAPER*/
body[data-query*='"status":7'] {
background-image: url(https://i.imgur.com/vwVXHGS.jpg) !important;
}


body[data-query*='"status":1'],
body[data-query*='"status":2'],
body[data-query*='"status":3'],
body[data-query*='"status":4'],
body[data-query*='"status":6'],
body[data-query*='"status":7'] {
  background-attachment: fixed !important;
  background-position: 50% 50%;
  background-repeat: no-repeat !important;
  background-size: cover;
 
}


/*CURRENT BANNER*/
[data-query*='"status":1'] .header::before {
background-image: url(https://i.imgur.com/wWFNGHr.jpg) !important;
}
/*COMPLETED*/
[data-query*='"status":2'] .header::before {
background-image: url(https://i.imgur.com/lDzDDe7.jpg) !important;
}
/*ON HOLD*/
[data-query*='"status":3'] .header::before {
background-image: url(https://i.imgur.com/E3EzRRD.jpg) !important;
}
/*DROPPED*/
[data-query*='"status":4'] .header::before {
background-image: url(https://i.imgur.com/2lvLCq7.jpg) !important;
}
/*PLANNED*/
[data-query*='"status":6'] .header::before {
background-image: url(https://i.imgur.com/oVpAs9w.jpg) !important;
}
/*ALL ANIME/MANGA*/
[data-query*='"status":7'] .header::before {
background-image: url(https://i.imgur.com/vwVXHGS.jpg) !important;
}

@Shishio-kun
First of all thanks for the help. The code works I have banner and background in each category.

I am testing the list at the moment but now I have a slight problem and I want to make it transparent, I have this here ⬇️

But it is not working I don't know if. There is a conflict between the transparency mods and the emojis mods (I say this because the original list does not have the emojis mods).

https://imgur.com/Y1yqQay.png
https://i.imgur.com/MmsHI57.png

Mar 27, 5:16 PM

#104

Shishio-kun

Online

Feb 2010

12037

Reply to EnderVsqz626

@Shishio-kun
First of all thanks for the help. The code works I have banner and background in each category.

I am testing the list at the moment but now I have a slight problem and I want to make it transparent, I have this here ⬇️

But it is not working I don't know if. There is a conflict between the transparency mods and the emojis mods (I say this because the original list does not have the emojis mods).

@EnderVsqz626

keep in mind, idk this layout at all

Under root near the top under light specific variables the row colors are controlled by content background and highlight so you could change them to transparent and that seems to let the row mod take over

/*light-specific variables*/
--page-background: var(--neutral);
--content-background: transparent;
--content-highlight: transparent;

And then these parts need their own separate background colors since they're transparent now

#status-menu:not(.fixed) .status-menu, .list-table-header{
background: rgba(33,33,33,0.8) !important;
}

That seems to let the mods take over

Content highlight can also be another color besides transparent

Honestly, it'd be best to start fresh and get the rows correct from the start then add each mod one at a time and see what breaks it.

Mar 27, 6:08 PM

#105

EnderVsqz626

Offline

Aug 2019

871

Reply to Shishio-kun

@EnderVsqz626

keep in mind, idk this layout at all

Under root near the top under light specific variables the row colors are controlled by content background and highlight so you could change them to transparent and that seems to let the row mod take over

/*light-specific variables*/
--page-background: var(--neutral);
--content-background: transparent;
--content-highlight: transparent;

And then these parts need their own separate background colors since they're transparent now

#status-menu:not(.fixed) .status-menu, .list-table-header{
background: rgba(33,33,33,0.8) !important;
}

That seems to let the mods take over

Content highlight can also be another color besides transparent

Honestly, it'd be best to start fresh and get the rows correct from the start then add each mod one at a time and see what breaks it.

@Shishio-kun
ready brother the problem was that instead of transparent there was this:
/*light-specific variables*/
--page-background: var(--neutral);
--content-background: #212121;
--content-highlight: #2b2b2b;

now the only thing left to “fix” would be that this photo is transparent hehehehehehehe

Clarified is very nice, but I'm a mess when it comes to Css 🥺😓
as I can notice this issue is born from Clarity which I already have in the manga list, but I wanted to see how this Clarified one was

https://imgur.com/Y1yqQay.png
https://i.imgur.com/MmsHI57.png

Mar 27, 6:43 PM

#106

Shishio-kun

Online

Feb 2010

12037

Reply to EnderVsqz626

@Shishio-kun
ready brother the problem was that instead of transparent there was this:
/*light-specific variables*/
--page-background: var(--neutral);
--content-background: #212121;
--content-highlight: #2b2b2b;

now the only thing left to “fix” would be that this photo is transparent hehehehehehehe

Clarified is very nice, but I'm a mess when it comes to Css 🥺😓
as I can notice this issue is born from Clarity which I already have in the manga list, but I wanted to see how this Clarified one was

@EnderVsqz626

oh lol that's where the menu went I thought it just vanished by design xD

color it with these:

#status-menu, #status-menu.fixed .search-container{
background: rgba(33,33,33,0.8) !important;
}

Mar 28, 2:12 PM

#107

EnderVsqz626

Offline

Aug 2019

871

Reply to Shishio-kun

@EnderVsqz626

oh lol that's where the menu went I thought it just vanished by design xD

color it with these:

#status-menu, #status-menu.fixed .search-container{
background: rgba(33,33,33,0.8) !important;
}

@Shishio-kun Already the topic is fine, brother

just a little thing I noticed is that the avatar has no border (since just the part of the code that takes care of the border its color linked to var(--content-background); which is transparent at this time 🤣🤣🤣🤣)
and the border should be alternated with the different colors of Category-colored

another mini details that I would like to do is to put a background to the genres and tags (since I am putting it one by one of a different color as that some is lost 😓) thanks for the help given

https://imgur.com/Y1yqQay.png
https://i.imgur.com/MmsHI57.png

Mar 28, 2:44 PM

#108

karmashizzle

Offline

Apr 2014

306

Reply to EnderVsqz626

@Shishio-kun Already the topic is fine, brother

just a little thing I noticed is that the avatar has no border (since just the part of the code that takes care of the border its color linked to var(--content-background); which is transparent at this time 🤣🤣🤣🤣)
and the border should be alternated with the different colors of Category-colored

another mini details that I would like to do is to put a background to the genres and tags (since I am putting it one by one of a different color as that some is lost 😓) thanks for the help given

re-add this part to fix it

A

M

S

Mar 28, 2:58 PM

#109

Shishio-kun

Online

Feb 2010

12037

Reply to EnderVsqz626

@Shishio-kun Already the topic is fine, brother

just a little thing I noticed is that the avatar has no border (since just the part of the code that takes care of the border its color linked to var(--content-background); which is transparent at this time 🤣🤣🤣🤣)
and the border should be alternated with the different colors of Category-colored

another mini details that I would like to do is to put a background to the genres and tags (since I am putting it one by one of a different color as that some is lost 😓) thanks for the help given

EnderVsqz626 said:
another mini details that I would like to do is to put a background to the genres and tags (since I am putting it one by one of a different color as that some is lost 😓) thanks for the help given

You can get codes to change the wallpaper per tag from reading here

https://myanimelist.net/forum/?topicid=1911634

9 hours ago

#110

EnderVsqz626

Offline

Aug 2019

871

Is it normal for the icons to look like this?
This is the case both horizontally and vertically on mobile phones.

By the way @shishio-kun I achieved what I wanted to put shadow in the tags and genres. You can see it is that image that

https://imgur.com/Y1yqQay.png
https://i.imgur.com/MmsHI57.png

2 hours ago

#111

Valerio_Lyndon

平沢唯

Offline

Dec 2016

2203

Reply to EnderVsqz626

Is it normal for the icons to look like this?
This is the case both horizontally and vertically on mobile phones.

By the way @shishio-kun I achieved what I wanted to put shadow in the tags and genres. You can see it is that image that

@EnderVsqz626 Depends what you consider normal. It doesn't happen on Firefox for Android so it seems like more of a Chromium bug. I've seen weird font sizes happen often on mobile though. At any rate, none of my designs are tested on or built for mobile so some issues are probably normal.

Install list designs without any CSS knowledge!

Support me on Ko-fi. • Check out my list designs.

What am I working on right now?

1 hour ago

#112

Shishio-kun

Online

Feb 2010

12037

@EnderVsqz626
One of the things we can do is remove the big eye text and big NONE text on smaller screens (phones). You'd add this to the bottom, and all screens under 1500px won't have the eye or NONE text. On bigger screens it'll appear normal but I don't know what your non-phone screen size is??

And it's not really possible to test what your view is so I'm guessing lol + not sure how you'd prefer it to look but those are two obvious things I imagine youd want gone

@media (max-width: 1500px){
.data.status:is(.watching, .reading)::after {
display: none;
}

.data:is(.demographic, .licensor, .studio, .genre):empty::after {
display: none;
}
}

Shishio-kun26 minutes ago

» [CSS Modern] ⭐️ NieR Automata Menu Layout - Killingdyl ( 1 2 ) killingdyl - Apr 22, 2017	51	by Mula_Niilista »» Mar 24, 11:20 PM
» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page ) Shishio-kun - Apr 15, 2010	7894	by Shishio-kun »» Mar 21, 11:59 AM
» [CSS] ⭐️ Customize your List Cursor + Cursor Fixes Shishio-kun - Mar 8, 2021	18	by Shishio-kun »» Mar 19, 5:45 PM
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page ) Valerio_Lyndon - Apr 19, 2018	1255	by Shishio-kun »» Mar 19, 11:21 AM
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page ) Shishio-kun - Jul 21, 2017	380	by cosmicskye »» Mar 12, 8:35 AM

[CSS - Modern] 🍰 Clarified by V.L — a responsive table-based design

More topics from this board

» [CSS Modern] ⭐️ NieR Automata Menu Layout - Killingdyl ( 1 2 )

» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )

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

» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )

» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )

MoreTop Anime

MoreTop Airing Anime

MoreMost Popular Characters