❓ Ask for help here + See Frequently Asked Questions

JohnnyNumbuh28 said:

The thing is ive tried those 2 and it affects the anime list too and I want it to affect only the manga list.

SaintZeph said:
hey guys, so this is myanimelist. my question is whether or not there's a code i can add to the css that'll allow me to see when i started/ended an anime. thanks in advance x

ShaggyZE said:

You can go to list preferences to enable start/end dates
https://myanimelist.net/editprofile.php?go=listpreferences

granoucada said:
Hello i have little problem, with renders. When I choose an image without background on google and I go through imgur to have the Bbcode, the background of the image remains while I only want the cropped image of the characters that I want to keep. I tried to crop the image on various tools like paint or photoshop but the background is either full black or white.
Do you know how to do this because the base image that was provided to me in the code works fine I would like to change it to one that I like more.

JohnnyNumbuh28 said:
Hey recently ive installed the new version of grid style 5 which and i have a problem at the manga list.To be more specific the sign + which I use when ive read a chapter and update the manga,well the thing is that the sign + is showing on the left side and right renders.Ive made a screenshot which will show the problem.I hope it will be found a fix for this soon.
https://i.imgur.com/28XlWcb.png

Shishio-kun said:


It was probably deliberately made like that so the + can be clicked always, and the layout isn't intended to have the renders cover the list so I can't send a change out for it or else it can negatively impact everyone else's layout (the layout was made for wider screens and intended to have the renders removed or moved if they covered the list too much).

But you could probably move the + behind the renders with more z index for the renders

Go to

/*ALL ANIME/MANGA RENDERS*/

and add a z-index code to each set of codes, probably
z-index: 10000 !important;
would move them in front of the + buttons.

The codes might all have to be moved to the bottom too if they aren't working, so that they override everything else.

JohnnyNumbuh28 said:

It didnt work the code you said to add,anyway heres the link with the codes from my list https://www.dropbox.com/s/rhwyeee0j0q2w3f/Grid%20Style%205.css?dl=0 and I hope by this way theres going to be a fix.

ShaggyZE said:

he doesn't need your CSS, anyone can right click and view the source of your list...
also you could just change the resolution of your pc so it all fits, zoom out or change the width of your list.
https://dl.dropboxusercontent.com/s/s3o3280b31mtf59/chrome_2021-08-23_03-53-59.png

you have z-index:10000!important on the .data.progress span and no z-index on the renders which is the opposite of what you seemed to want or what Shishio-kun said to do (you also didn't move the code to the bottom) ie the 12 renders below /*ALL ANIME/MANGA RENDERS*/
what exactly are you trying to have on top cause if you want the renders to cover the + you won't be able to click on them, but if you want them hidden then change data.progress to -10000 or whatever.
or add z-index:10001!important or z-index:-10001!important to all 12 of the renders the difference is the - sign as one is a way lower number then the other and this decides what order things are layered on top of each other in relation to every other z-index in the code.
so you will have to fine tune the number as you don't want them to be behind everything either.
https://www.w3schools.com/cssref/pr_pos_z-index.asp

JohnnyNumbuh28 said:

It didnt work the code you said to add,anyway heres the link with the codes from my list https://www.dropbox.com/s/rhwyeee0j0q2w3f/Grid%20Style%205.css?dl=0 and I hope by this way theres going to be a fix.

Shishio-kun said:


I don't see the codes added, and I don't see the renders at the bottom so you need to try again

go to



/*ALL ANIME/MANGA RENDERS*/
[data-query*='"status":7'] footer:before {
left: -1%;
width: 15% !important;
background-size: contain !important;
background-image: url(https://i.imgur.com/w5IeBGv.png);
background-position: left bottom !important;
}
[data-query*='"status":7'] footer:after {
right: -1%;
width: 12% !important;
background-size: contain !important;;
background-image: url(https://i.imgur.com/LrL0ycI.png);
background-position: right bottom !important;
}
/*CURRENT RENDERS*/
[data-query*='"status":1'] footer:before {
left: -1%;
width: 22% !important;
background-size: contain !important;
background-image: url(https://i.imgur.com/MhczozY.png);
background-position: left bottom !important;
}
[data-query*='"status":1'] footer:after {
right: -1%;
width: 17% !important;
background-size: contain !important;;
background-image: url(https://i.imgur.com/5L5ayKH.png);
background-position: right bottom !important;
}
/*COMPLETED RENDERS*/
[data-query*='"status":2'] footer:before {
left: -1%;
width: 19% !important;
background-size: contain !important;
background-image: url(https://i.imgur.com/WtD36qb.png);
background-position: left bottom !important;
}
[data-query*='"status":2'] footer:after {
right: -1%;
width: 21% !important;
background-size: contain !important;;
background-image: url(https://i.imgur.com/PVDpSgo.png);
background-position: right bottom !important;
}
/*ON HOLD RENDERS*/
[data-query*='"status":3'] footer:before {
left: -1%;
width: 16% !important;
background-size: contain !important;
background-image: url(https://i.imgur.com/BFpT37n.png);
background-position: left bottom !important;
}
[data-query*='"status":3'] footer:after {
right: -1%;
width: 17% !important;
background-size: contain !important;;
background-image: url(https://i.imgur.com/2eqput0.png);
background-position: right bottom !important;
}
/*DROPPED RENDERS*/
[data-query*='"status":4'] footer:before {
left: -1%;
width: 21% !important;
background-size: contain !important;
background-image: url(https://i.imgur.com/FsynBim.png);
background-position: left bottom !important;
}
[data-query*='"status":4'] footer:after {
right: -1%;
width: 22% !important;
background-size: contain !important;;
background-image: url(https://i.imgur.com/fbscwan.png);
background-position: right bottom !important;
}
/*PLANNED RENDERS*/
[data-query*='"status":6'] footer:before {
left: -1%;
width: 18% !important;
background-size: contain !important;
background-image: url(https://i.imgur.com/yMXvHxQ.png);
background-position: left bottom !important;
}
[data-query*='"status":6'] footer:after {
right: -1%;
width: 16% !important;
background-size: contain !important;;
background-image: url(https://i.imgur.com/cLu1Gff.png);
background-position: right bottom !important;
}


copy or cut all these codes

paste them to the bottom of the layout CSS

in these codes you just pasted, go to each
}

add this line before it

z-index: 10001 !important

save


btw I am not seeing this problem on grid style 5 even when I zoom in my list, so you might be using an outdated version, and you should update to the latest version
https://pastebin.com/raw/v6eZPMdM
and that should fix it

JohnnyNumbuh28 said:

Im not using an old version im using the new and I reinstalled it again and it still showing and nothing changed with adding that z-index to the codes

Shishio-kun said:


The codes aren't there in the codes on your layout, this is your CSS from what I see

anime:
https://pastebin.com/raw/1JdxwEZJ
manga:
https://pastebin.com/raw/G4hzvZWz



Maybe you're adding codes to the wrong layout here. Add to the layout which you shaded the bubble next to anime or manga and save
https://myanimelist.net/ownlist/style

Shishio-kun said:
@JohnnyNumbuh28
OK I sent a fix to all layouts that changes the positioning of the layout and it should fix your issue. But if anyone later finds their layout was broken by it, I have to change it back. However I don't think this small change I made will break anyone's design. In that case you'd have to add the change to your own code, it is:


footer {
z-index: 10000 !important;
}

#copyright {
text-align: center;
position: relative !important;
z-index: 10001 !important;
}

and remember you need to add it to the correct layout code, add to the layout which you shaded the bubble next to anime or manga and save
https://myanimelist.net/ownlist/style

Shishio-kun said:
@JohnnyNumbuh28
OK I sent a fix to all layouts that changes the positioning of the layout and it should fix your issue. But if anyone later finds their layout was broken by it, I have to change it back. However I don't think this small change I made will break anyone's design. In that case you'd have to add the change to your own code, it is:


footer {
z-index: 10000 !important;
}

#copyright {
text-align: center;
position: relative !important;
z-index: 10001 !important;
}

and remember you need to add it to the correct layout code, add to the layout which you shaded the bubble next to anime or manga and save
https://myanimelist.net/ownlist/style

JohnnyNumbuh28 said:

First of all ive did what you said add those and after Ive seen it wasnt fixed Ive restored to the way before adding those codes mentioned by you

Shishio-kun said:


For future problems, if we ask you to put some codes in, you should leave them on your list for a while so we can look at why they are not working, and also to confirm they are on the right list. Otherwise it's going to make communication and fixing the problem a lot more difficult

Tewence said:
hi, is there a way to make my list sorted with score and priority in descending order by default?

ShaggyZE said:
@mutsurhea nope, no one has done it before afaik because it might require at least a little bit of HTML + CSS to curve the area the covers scroll in though it would be easiest in javascript as a userscript, the problem is only those with it installed would see your list as intended so it wouldn't really be worth it.

also, CSS has variables, but since we can't use JS on MAL without third-party intervention they act more like constants that can change something with various events like data-query or mouse hover, and CSS does have calc, transform, and radius so it's not so hard to curve things, but not sure if CSS alone would be enough.

you could make a site in any language of your choice to retrieve your list, get HQ images, do the math, edit the images, then import
the site with the images in order already rendered, but I'm sure I don't have to tell you how long it would take to program something like that.

ShaggyZE said:
no, I did mention it, but not fully, that's only possible with html + css and/or javascript, you can do a google search to show examples on how they basically inject several html divs and when a user scrolls past to load it then the css will do something like load images and since the MAL list doesn't have those divs you'd have to make a javascript userscript to inject the needed html so it could be done but only you or people with that script installed would see it as intended or javascript itself can get the position as well, but imo it wouldn't be worth it since it would require a lot of programming and most would just see your default list.

a better question though is why not just use a custom list that displays one poster at a time, on line hover? that you mentioned, like mine with @import malscraper and make the covers whatever size you want or one of the grid style layouts, so your not messing with mal's small low res covers, I'm assuming it is just to tinker with the css, but you can still start with one and combine things and make it how you want. (within the capability of css that is)

Shishio-kun said:
@ShaggyZE what are you trying to do?

ShaggyZE said:
@mutsurhea I see, well you can still use

and have it replace mals small covers so you can make them bigger there without distortion.

Edit:
though it looks like you already tried that and appears to still loads the small ones, maybe try animetitlebefore or one of the other presets https://malscraper.azurewebsites.net/covers, @Shishio-kun would know more about how to do this on your list than I do

ShaggyZE said:
he's trying to replace the small covers on his list with HQ ones and make them bigger

mutsurhea said:

now i understand what you're trying to say, but im like: isn't that what has already been done???

---

also, unrelated to the previous ventures, i has this idea - how does it look?

Y'know when mobile vertical video is converted to 16:9 for youtube or something and they put a duplicate blur on the sides?

I wonder if that could be made to be alright.


[this is just a quick mock-up i made quickly in Gimp. if i were doing it for real, i'd tune it better]

mutsurhea said:
I want big posters, big!

But if you just naively scale them up big then the distance between lines of titles increases
Further lowering the density of images.

also, unrelated to the previous ventures, i has this idea - how does it look?

Y'know when mobile vertical video is converted to 16:9 for youtube or something and they put a duplicate blur on the sides?

I wonder if that could be made to be alright.


[this is just a quick mock-up i made quickly in Gimp. if i were doing it for real, i'd tune it better]

meixi said:
Hello, I would like some help for some things.

1. I have a custom font (.tss) I would like to add onto every place where there is font on my profile, but I'm pretty sure that we can only link externally to other fonts (can't upload fonts to this site) and only to Google fonts. Please correct me if I'm wrong. Also Google doesn't permit uploading your own font. Please help me....
2. I would like to know how to remove the blue vertical line on the left side of the anime, if that's possible.
3. The page is looking really busy, I think adding a border around the header image would help. Does anyone know how to do this? Also, any suggestions to help make the page less busy would be greatly appreciated (I refuse to decrease the opacity of the list).
4. I'm using Opera browser and all the layout/fonts are good but they get scrambled when I use other browsers. What can I do about this?
5. Also in the table some text is layered. I don't know how to fix this.

My page is https://myanimelist.net/animelist/meixi
The code is a bit all over the place as I just copied and lightly edited a template, then pasted some add ons to the bottom.
Thank you very much.

ItsCheckPoint said:
hi guys I need some help. I'm using https://murakumo-jp.github.io/MyAnimeList-CSS/AzurBlur/ this modern layout and i'm trying to change a cover/preview pic on my list with this tutorial: https://myanimelist.net/forum/?topicid=1923123 I followed it and its not working for me. Maybe im unable to add this with my actual layout?

example:

@import "https://malscraper.azurewebsites.net/covers/anime/ItsCheckPoint/presets/dataimagelinkafter";
@import "https://murakumo-jp.github.io/MyAnimeList-CSS/AzurBlur/Style_min.css";
:root {--body-bg: url("https://i.imgur.com/Xpx0GfO.jpg");
/* Menu */
--char-img: url("https://imgur.com/oVRhBM2.png");
--char-width: 354px;
--char-height: 354px;
/* Sort Menu */
--Sort-img: url("https://imgur.com/rz1eCuL.jpg");
.data.image a[href^="/anime/36833/"]:after{background-image:url(https://i.imgur.com/hjwR53d.jpg)};
}

I'm doing something wrong?

Shishio-kun said:


So for the first thing, did you see the font video/topic?
https://myanimelist.net/forum/?topicid=1792455

I have a way to install any font to your layout via Dropbox there

Shishio-kun said:

@meixi

Check if I have an answer for your other problems here first with any of the guides listed, it is where the fonts guide was found
https://myanimelist.net/forum/?topicid=1499059

You can also learn to edit your list with Inspect Element and probably solve some of these issues
https://myanimelist.net/forum/?topicid=1780591

I use it extensively in these videos too
https://myanimelist.net/forum/?topicid=1499059#msg63378307

Check the Fixes guide for any solutions to broken stuff
https://myanimelist.net/forum/?topicid=439897


If you go thru those guides and theres anything left you still can't fix, post back

meixi said:
I've looked through all the links you recommended and there's nothing about switching out the look of the list. If you can tell me how to do this then that would be greatly appreciated.

/* COVER POSITION */
.data.image a:after{
	position: fixed;
	top: 550px;
	left: 320px;
}

/* COVER POSITION */
.data.image a:after{
	position: fixed;
	top: 300px;
	left: 200px;
}

2. I would like to know how to remove the blue vertical line on the left side of the anime, if that's possible.

3. The page is looking really busy, I think adding a border around the header image would help. Does anyone know how to do this? Also, any suggestions to help make the page less busy would be greatly appreciated (I refuse to decrease the opacity of the list).

4. I'm using Opera browser and all the layout/fonts are good but they get scrambled when I use other browsers. What can I do about this?

5. Also in the table some text is layered. I don't know how to fix this.

6. I would definitely like to keep everything else on my page the same, but just to change the look of the table. Are you able to help me with this?

7. Also, the buttons here are looking different sizes, do you know how to fix this? Link is here:
https://imgur.com/8GME1RT

_Suki_chan_ said:
Hey!
I don't know much about CSS and list design
but When i copy pest any css to my list
then my chrome start working slow
Is this something css problem or anything?
how can i fix this?

_Suki_chan_ said:
Hey!
I don't know much about CSS and list design
but When i copy pest any css to my list
then my chrome start working slow
Is this something css problem or anything?
how can i fix this?