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

Shishio-kun said:

@itsmelemongee I think I found the issue after I thought of something, disregard my last post.

It seems to be something to do with the Airing section which is bugging out now for some reason. Please paste this code to your CSS at the bottom (it would be temporary), it should turn the airing sections red and make them visible at all times; when you point to them, do you see the glitch?

.list-table .list-table-data .data.title .content-status, .list-table .list-table-data .data.title .rereading, .list-table .list-table-data .data.title .rewatching {
background-color: red !important;
opacity: 1 !important;
}

Your CW should look something like this, and those red sections are bugging out for me in preview and on my own list although its not exactly what you're seeing. I want to make sure the glitch you're seeing is actually due to these red parts which are normally invisible (and shouldn't be there lol, so this needs to be patched later).



Then please delete that new code and paste this to the bottom- does it remove the glitch? If so then it's definitely these parts glitching out. (this code is also meant to be temporary)

.list-table .list-table-data .data.title .content-status, .list-table .list-table-data .data.title .rereading, .list-table .list-table-data .data.title .rewatching {
display: none !important
}

itsmelemongee said:


When hovering over the red parts the glitch appeared and the areas in which the red parts are seem to line up exactly with the areas where the glitch appears.
The other code actually did remove the glitch! :D
So that seems to be the problem
I'm not sure if i mentioned this or not, but the glitch didn't appear on every entry on the list and didn't appear at all on my completed or plan to watch lists (not that I noticed anyway), which would be explained by the error lying with the airing parts
If I haven't mentioned it then I'm sorry, I didn't realize it would be important :')

Shishio-kun said:


OK I'll patch this sometime in the near future to fix it (when I understand it better). The change should be sent automatically to everyone's layout :D

Endless_end said:
Hello! It's my first time using CSS and I need some help personalizing my list, I don't know if this is the correct forum to ask for it, but if anyone could help me I would be really glad!

So, I want to lower the first row of animes in order to see the whole cover image. Is there a way to do that? See the image below:



Thanks!

Shishio-kun said:


It says how under:
/*MOVE COVER PICS UP OR DOWN


in the CSS code. Check your code or the opening post for any future questions

Endless_end said:


Shishio-kun I'm really sorry. I was using an older version of the code. Just copied it again.

Either way, thank you so much. I really appreciate your work!!!

Shishio-kun said:


I checked your list and saw you weren't using the layout at all, so I figured you were using the new one not an old one

You can still use the old code if you want, and add extensions from the opening post to it for some of the features of the new version (like moving the cover pics down).

Endless_end said:

Ahh that's because I'm still working on getting it done before using it. I got the first code last year I think, but never had the time to customize it, that's what happened.

But thank you for the advice, I will do that!!

(I accidentally saw your last comment on Valerio_Lyndon profile, I hope you get better soon!)

itsmelemongee said:
Hello :D
I got a few questions about the clarity layout that I haven't found any answers to and couldn't figure out on my own (I'm using the dark one)



I numbered the image so my questions are hopefully easy to follow :-)

Okay so 1st, is there a way to remove that shadow? I tried playing around with the list colours but nothing seemed to get rid of it so I thought I'd just ask ^^

2nd: managed to solve this on my own :D

And lastly, can I make the actual list rows (maybe also the header) a little more transparent? I couldn't find this in the code, or maybe I overlooked it, I'm not sure.

I appreciate any help and I hope you're having a nice day/night/evening/afternoon or whatever time it is for you right now >u<

Shishio-kun said:


add

.cover-block:before {
background: transparent;
}

There's a Clarity theme with the transparent rows already, can you just use that and change the colors from there?

You also might be able to find what codes make them transparent in that layout and you can add them to yours, and you can put your layout and the transparent row layout in diffchecker and see the differences, one of those differences might show you what the transparent row codes are

Shishio-kun said:

@epicpunnyname
try adding this to your layout, underneath whatever imports are in your design. It fixes the Takana layout I tested it myself, and it might fix yours but it could also matter where you put it. I don't think other users can see it only the list user for now, still looking into things so more info later via a newsletter probably with a better solution unless the MAL devs use my fix hopefully they do



@font-face{
font-display:block;
font-family:'FontAwesome';
src:url(/fonts/fa6/fa-regular-400.woff2) format("woff2"),url(/fonts/fa6/fa-regular-400.ttf) format("truetype")}

-Shanigami- said:
Hey, I'm using one of the Wide-Banner Grid Layouts and the + button to add a new episode seems to have stopped working (doesn't do anything when I hover over it, and when I click it the edit window opens). Pretty sure it was working a week or so ago, and I haven't made any changes to my list in that time. Not sure what happened.

I tried going back to the original code (although I didn't make any changes other than adding the dark theme stuff and a few text colors) and it wasn't working there either.

Any ideas?

Shishio-kun said:

I'm guessing this whole layout needs to be updated and repaired with a patch, I have to get to it later this year

Arkitekt said:
Hi, I am using the Clarity Dark Window 6 Themes layout and I'm having difficulty centering the banner background image. Anyone have some code I could add in so I can center my banner background?

StephWeeb said:
Does anyone know if you are able to get the small colors next to an anime indicating if you are watching them, completed them etc a bit wider? Its kinda hard to see now and i would prefer just a few mm wider so its easier to see

Shishio-kun said:


Nice layout! :D

Yeah, the codes for this are these, you copy and paste them to the bottom of your CSS

/* STATUS COLORS IN FRONT OF ROW */
.list-table .list-table-data .data.status.reading, .list-table .list-table-data .data.status.watching{
width: 5px !important;

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


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


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


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


}
.list-table .list-table-data .data.status.plantowatch,.list-table .list-table-data .data.status.plantoread{
width: 5px !important;


}

all the codes for a list layout can be found here but its a bit overwhelming
https://myanimelist.net/forum/?topicid=1929120

Shishio-kun said:


So with yours, there's a few things you can do from what I see, add the code below to the bottom of your CSS and it will raise the banner image up a bit if that's what you mean by centering. You can change the 70% after background position to a different number until its set where you want. A higher percentage should raise and lower would lower it. The 0% on the left isn't going to change anything for now in this case so I don't think it needs to be adjusted.

.cover-block{
background-position: 0% 70% !important;
top: 0px;
left: 0px;
background-size: 100%;
}

The other numbers can affect the banner image too but I don't think you'll need to use them, the top and left amount can move it a bit with higher px amounts (like 20px) or negative px amounts (like -20px). And if you want to zoom in you can change the 100% after background size to a higher percentage.

AlexMasterOtakuP said:
I'm using Grid Style 1 and I was wondering if it is possible to have different category buttons pics depending on which category is being viewed at the moment.
E.g. while viewing all anime on my list, category buttons would be Gintama themed, while viewing dropped category, category buttons would be Berserk themed, and so on.
If it's possible, could someone help me doing so?

Pico-tan said:


Yes this is possible, if a bit clunky to do.
You can select the individual links based on which one is "active"

For example:
.status-button.all_anime.on + .status-button.watching
selects the watching button if you are on the all page and
.status-button.all_anime ~ .status-button.watching.on
selects the all button if you are on the watching page.

It does this by selecting each link in relation to the active one.
+ selects an element of the following type tht is place immediately after the first type (which means you have to stack them, e.g. a + b + c)
~ selects an element of the following typ that preceds the first type. I don't know for sure if it must be immediately preceding or not so this one might be a bit less clunky to write.

That is the short version, let me know if you need any more help understanding it :3

PS yes this also means you will have to write 18 different selectors to affect all the buttons

PPS you select the current pages button using .status-button.*inserrt current page*.on

Calipup said:
Is there a way to make the stats list "on" as default? Or permanent? Any way that'll make it be there without having to click.

.list-stats { display: block !important; }

.stats a:first-of-type { display: none !important; }

ShaggyZE said:

you can also hide the stats button if you want

Rejuvenated said:
Hi

Uh, so I'm using the Minimal Dashboard layout by 5cm (Dark Transparent Version) and I want to know if i can make the side panel look complete like it does on the white version

Dark Version (mine)
https://i.imgur.com/UBobuyw.png

White Version (original)
https://i.imgur.com/af1uOpP.png

linear-gradient(to right, #333 160px, rgba(5,5,5,.5) 160px)

Valerio_Lyndon said:

Find the background property on line 34:


Change the value to this:

Here's how it should look afterwards.

Rejuvenated said:
Hiya! Me again.

I've been screwing around with Valerio_Lyndon's "Clarity" layout, and I've been wondering if there's any way to make the anime cover images into rectangles like the ones on the default mal lists (preferably with rounded corners) instead of the circle ones. Thanks.

/* Small images */
.data.image a::after, .data.image img {
	border-radius: 0px;
}

/* Large images */
.data.image a::before {
	border-radius: 0px;
}

/* Small images */
.data.image,
.data.image a::after,
.data.image img {
	border-radius: 0px;
	width: 48px !important;
	height: 68px !important;
}

/* Large images */
.data.image a::before {
	border-radius: 0px;
}

Valerio_Lyndon said:

For corners it's a simple matter of changing the border-radius property. A lot of these simple properties can be found and altered by using Inspect Element.

If you want to change it back to a rectangle it will require changing the widths and heights of a few properties, so it takes a minute more if it's your first time. This code also changes the border-radius.

Here's code with both of those changes:

ParaNoClue said:
for the grid style one, how do i get rid of the banner? I want the "all anime" text to be close to the buttons on the top but i don't know how to do that

ColCasey said:
When I try the box shadow code (golden glow) it doesn't do anything. I tried pasting it exactly as it said but nothing happens.

Clarity (Dark Window, 6 Themes)

Exonymos said:
My Add episode button are not working any fix for it
Fixed see below for solution if you have same problem

.data.progress, .data.chapter, .data.volume, .data.genre, .data.tags, .data.magazine, .data.season, .data.studio, .data.licensor, .data.storage, .data.demographic, .data.rated{
    z-index: 5; !important
}

333anime said:
How can I change the banner avatar on each page, I tried doing it and it didn't work

Exonymos said:


Solution:

If you have the similar problem with links on your list then just add this code to your CSS



It should work as expected now, I added all the classes which didn't worked
If you have another class link not working just add the class in the code i provided