❓ Ask for help here + See Frequently Asked Questions

beniporag said:
Hey guys, so I'm using clarity style 1, but I want to invert the colors so that it's on "dark mode" if you catch my drift. I've been trying to change the table colors but I don't see any change. Would you guys mind helping me out on this? Thanks!

-CHAR- said:
Hello! How do I change the filter wallpaper? I noticed that one is already set but it is not in line with my style (https://imgur.com/Z8u3JBr). How can I set another image?
example: https://dwgkfo5b3odmw.cloudfront.net/img/manga_series_header/580-SJMangaHeaders_ChainsawMan_2000x800.jpg
Thank you in advance!

Shishio-kun said:


You should post this in the topic for the layout, I'm sure he will get back to you and he knows the layout way better than I do
https://myanimelist.net/forum/?topicid=1723114

slayra said:
Hi all,

I'm trying to do some minor code changes to the normal layout but something keeps happening to certain rows the text seems to be misaligned. How do I get these titles in the center?



My list: https://myanimelist.net/animelist/slayra

Thank you!

Shishio-kun said:


Your image is broken

Is this what you're trying to do?


Add this


.list-table .list-table-data .data.title {
text-align: center !important;
padding-left: 112px !important;
}

Shishio-kun said:


Your image is broken

Is this what you're trying to do?


Add this


.list-table .list-table-data .data.title {
text-align: center !important;
padding-left: 112px !important;
}

Shishio-kun said:
@slayra


Unfortunately I'm no good at centering text on the default list. You could use this

.list-table .list-table-data .data.title {
height: 30px;
display: flex;
align-items: center;}


but then Ani kuri is thrown off because of all the studios on the right.


A better solution would be to move each uncentered title down manually, but you have to write a new entry for every anime. The number after href is the anime's number when you point to it on your list. These anime are from your completed list btw


/* Bishoujo Senshi Sailor Moon S: Kaguya-hime no Koibito */
.data.title a[href*="/997"]{
padding-top: 20px !important;
color: green;
display: block;
}


/* Death March kara Hajimaru Isekai Kyousoukyoku */
.data.title a[href*="/34497"]{
padding-top: 20px !important;
color: green;
display: block;
}


/* Fate/Grand Order: Zettai Majuu Sensen Babylonia */
.data.title a[href*="/38084"]{
padding-top: 20px !important;
color: green;
display: block;
}


/* Fate/Grand Order: Zettai Majuu Sensen Babylonia - Initium Iter */
.data.title a[href*="/40206"]{
padding-top: 20px !important;
color: green;
display: block;
}


This centered four entries and they have green text so you can see where they are (you remove the green later).

You add a new entry and center it by adding this code to your CSS

.data.title a[href*="/"]{
padding-top: 20px !important;
color: green;
display: block;
}

And after the slash, add the number that appears for the anime when you point to it.
https://i.imgur.com/SVzJpYY.png
https://i.imgur.com/BUVBARf.png
In the example pics I show you how I centered the Bleach title with the code and number



That's the best solution I have and I'm running low on time now and can't look into it any further for quite a while

Would you happen to have a better solution than this? @valerio_lyndon

slayra said:


I still want the titles on the left, just want the ones that for some reason aren't centered in the row to be centered. :/ Not sure how to explain better, sorry. :(

Thank you for the help!

Shishio-kun said:
Unfortunately I'm no good at centering text on the default list.
…
Would you happen to have a better solution than this? @valerio_lyndon

.add-edit-more { display: none; }

Valerio_Lyndon said:

Most of the titles seem to be centered already, it's just the occasional one that hits the exact wrong width that gets buggered. What is causing the problem, at least when I view it, is the add-edit-more section. Try adding this code to the bottom of your CSS:


Going into a bit more detail, the add/edit/more section is currently invisible due to "visiblity: hidden" being applied, but is still affecting the positioning of other elements as "visibility" is only a visual change. By adding "display: none" it removes the section from the page flow entirely, both visibly and to other elements.

Leospars said:
Is it possible to have a image hover on link in the About me Section??
The same way how its done on lists.
I'm tryna do it for characters extended.

Valerio_Lyndon said:

Most of the titles seem to be centered already, it's just the occasional one that hits the exact wrong width that gets buggered. What is causing the problem, at least when I view it, is the add-edit-more section. Try adding this code to the bottom of your CSS:


Going into a bit more detail, the add/edit/more section is currently invisible due to "visiblity: hidden" being applied, but is still affecting the positioning of other elements as "visibility" is only a visual change. By adding "display: none" it removes the section from the page flow entirely, both visibly and to other elements.

Leospars said:
I'm using the website https://anime-bingo.aikats.us to add some images to my profile and noticed some images aren't very sharp(more prickly). Rem, Kagura and Misaka. Does anyone know the reason for this or how I can fix it

Shishio-kun said:


I'd have to see the exact image on the site but I'm assuming they use low quality images which came up when you used it. It's hard to fix low quality images, you could use Waifu2X to remove some of the low quality effects and make it sharper but that won't make it perfect.

They seem fine now, so try again?

I'd have to see the exact image on the site but I'm assuming they use low quality images

They seem fine now, so try again?

Leospars said:


https://i.redd.it/64rr8epkhgs41.jpg
https://pbs.twimg.com/media/ESuUHaXU4AECtUy.jpg
https://static.zerochan.net/Kagura.%28Gin.Tama%29.full.2294850.png


I didn't use the ones form the website, though I know they come out fine, I liked the other images better.
Also I noticed that while on the site as you zoom the image quality would stay the same and high maybe because it's directly linked to the image. But after saving image you'd see the quality difference from a distance.

Shishio-kun said:


OK now I see what you're doing.

Maybe the pic of Rem is too big to start. Try starting with a smaller one and see how the quality turns out? Here's two you can try




You can resize images with Imgur btw
https://imgur.com/

Leospars said:


Thanks. It worked

Leospars said:

Thanks Again :) Misaka picture works well too 👍 Imgur solved most of them.
Though even a large picture like: this is coming out prickly and its the largest image I found.

Leospars said:
That worked is it because its smaller. I checked and saw that the bars size is 150: 200px, 3:4 resolution and the default images from anilist that fit well with no distortion are 230 by 300+. What's the best sizes I can use? And would I be able to get the full image for that Black Clover image without the distortion.

Leospars said:
This might be a dumb question but I think I might have seen it somewhere before where an image in the about me section glows on hover. Though I'm not sure if its possible and its probably only available in CSS😓

Rafaeleh said:
I am trying to make a background image stay at the same position relative to a element when scrolling down.

I thought that the "position: sticky;" element would work but for some reason it doesn't. I think it isn't even recognized as a element name in the editor if i am not mistaken.

Shishio-kun said:

Did you already solve this problem?

Shishio-kun said:

Do you know how to make a :before type of code and add backgrounds to it?

Shishio-kun said:

Later if this doesn't work I would recommend asking for help in the Clarity topic too since hes much more familiar with the layout
https://myanimelist.net/forum/?topicid=1723114

Rafaeleh said:

No, not yet ... 😕


Yea, i managed to do that but also didn't work 😓


Ok, thanks i will ask there if anyone knows 👍


I explained very poorly, so this is what i am trying to do with the ice image :

Shishio-kun said:
@Rafaeleh I think you want something like this (goes on the bottom). I used a random icicle graphic I found online, but you can put your own background image in adjust the position with the top code. Does that work? D:

.status-menu-container:before{
background: url(https://i.imgur.com/07Uhi1P.png);
background-size: contain;
top: -10px;
}


.status-menu-container.fixed:before{
position: fixed;
background: url(https://i.imgur.com/07Uhi1P.png);
background-size: contain;
top: -10px;

}

.status-menu-container:after{
    top:-25px;
    height: 64px;
    background: url(https://i.imgur.com/rcDaW21.png);
    background-size: cover;
  }

Leospars said:
How to change order of columns saw it posted here

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

but not answered. I'm tryna put tags in the centre and maybe try a dropdown on hover.
I can move the header itself but I have only been able to move individual tags.

xnl said:
Hi there! Thank you for you huge help to the community during all the years, tutorials and customization techniques. I have a question.

Currently the Premiered column does nothing in terms of applying a filter. I would like to make it clickable and make it apply such filter: https://myanimelist.net/animelist/mylistname?status=6&order=-14

I know it is impossible to add a custom url but maybe you have any workaround for this?

[url=https://myanimelist.net/animelist/xnl?status=1&order=-14]sort premiere by starting date (sort of)[/url]

xnl said:
Hi there! Thank you for you huge help to the community during all the years, tutorials and customization techniques. I have a question.

Currently the Premiered column does nothing in terms of applying a filter. I would like to make it clickable and make it apply such filter: https://myanimelist.net/animelist/mylistname?status=6&order=-14

I know it is impossible to add a custom url but maybe you have any workaround for this?

.list-table .list-table-data .data.airing-started {display: none;}
.list-table .list-table-data .data.airing-finished {display: none;}

.list-table .list-table-header .header-title.finished {display:none;}

.list-table .list-table-header .header-title.started:nth-child(7) {display: none;}

.list-table .list-table-header .header-title.started .link.sort {font-size: 0;}
.list-table .list-table-header .header-title.started .link.sort:before {content: "Premiered"; font-size: 11px;}

.list-table .list-table-header .header-title.started:nth-child(8) {width: 120px; background-image: none;}

Shishio-kun said:

If you mean to sort by starting premiere year, this is possible:


sort premiere by starting date (sort of)



You can use that on your About Me and then go straight to the page you want with premiere sorting.

Also, it is possible with CSS to add a menu to each category on your list that opens up and would have two links to sort the list according to premiere dates. But this might take a long time to code with a lot of back and forth, and I have to ask for help with it since I don't know a particular CSS code on the modern list, and also the menu would be tied to a specific anime on each category and won't work anymore when you move it off the category. So I don't recommend it, and you have to be sure you will use it because it could be really time-consuming for volunteers

xnl said:


Hey, thank you for your reply! I was in the process of writing my workaround and didn't see your post. Refer to my previous reply, it is quite an easy "hack" to do the sorting by season via altering the "Premiere" header to "Air Date". Check my animelist page to see it working, if you are interested.

keroroslayer said:
I also have a q.qs bout my list:

- how to remove the background wallpaper ONLY from manga list
- how to edit manga list if it is visible in changing the style but NOT visible in edit your style...it is called "keroroslayers style"

THANKS

MeltyFork said:
Me and my friends followed your layout videos and first I just wanted to say thanks for making a really good and comprehensive guide to making the custom layout. However, all of my friends and I have this issue where the custom cursor didn't load and there is a constant loading icon next to the default windows cursor. I tried removing the custom cursor to see if that was the issue, but it wasn't. I'm not sure if you have a solution to fix this or not, but if you do me and my friends would appreciate it a lot! Thank you!