| is there a way to put custom cursor to clarity list? is that I would like to put one. I have Clarity on my manga list and I would like to put a cursor. |
EnderVsqz626Jul 10, 2021 10:52 AM
EnderVsqz626 said: is there a way to put custom cursor to clarity list? is that I would like to put one. I have Clarity on my manga list and I would like to put a cursor. Here's the code, just put it at the bottom of your CSS and replace "CURSOR_URL_HERE" with the direct link of your cursor image.
/*--------------------------------*\
| Custom Cursor |
\*--------------------------------*/
/*Lower the size under 32px wide and high if its too large.
https://myanimelist.net/forum/?topicid=1903808*/
body *, :not(*) {
cursor: url(CURSOR_URL_HERE), auto !important;
}
|
   StoryGraph x Spotify x Instagram “Whether we die or not isn't really that big a deal." — Suzuya Juuzou |
Daisy-Sensei said: i got it now =D, thanks, the run gonna take a long time,, is it bad to lower the delay? note even when i lower delay its still slow, but i dont mind, i will keep the window open, and testing around it, i can see that i can resume later as well, thank you again, like ur modern style, also gonna update mine to latest version after i finish genres import... Best of luck ~ Happy Anime Alright, awesome. Any delay value is fine. The longer the value, say 3000-9000, will probably guarantee fewer errors. But a lower value like 500-1000 might actually end up faster overall. |
LEGENDS_OF_ANIME said: EnderVsqz626 said: is there a way to put custom cursor to clarity list? is that I would like to put one. I have Clarity on my manga list and I would like to put a cursor. Here's the code, just put it at the bottom of your CSS and replace "CURSOR_URL_HERE" with the direct link of your cursor image.
/*--------------------------------*\
| Custom Cursor |
\*--------------------------------*/
/*Lower the size under 32px wide and high if its too large.
https://myanimelist.net/forum/?topicid=1903808*/
body *, :not(*) {
cursor: url(CURSOR_URL_HERE), auto !important;
}
hello thanks for the CSS but it didn't work for me, I already put a 32x32 PNG on it and nothing that works. you have to fill where it says Body? /*--------------------------------*\ | Custom Cursor | \*--------------------------------*/ /*Lower the size under 32px wide and high if its too large. https://myanimelist.net/forum/?topicid=1903808*/ body *, :not(*) { cursor: url(https://i.imgur.com/M48nUJu.png), auto !important; } |
EnderVsqz626 said: hello thanks for the CSS but it didn't work for me, I already put a 32x32 PNG on it and nothing that works. you have to fill where it says Body? /*--------------------------------*\ | Custom Cursor | \*--------------------------------*/ /*Lower the size under 32px wide and high if its too large. https://myanimelist.net/forum/?topicid=1903808*/ body *, :not(*) { cursor: url(https://i.imgur.com/M48nUJu.png), auto !important; } I don't know it didn't work for you. I checked your code and I think the image was too big. Try it again, and make sure you delete your previous custom cursor code and put this at the bottom of your CSS. If it still doesn't work then tell it here again and someone will probably solve. For now try this again with this code, I has the same image you wanted.
/*--------------------------------*\
| Custom Cursor |
\*--------------------------------*/
/*Lower the size under 32px wide and high if its too large.
https://myanimelist.net/forum/?topicid=1903808*/
body *, :not(*) {
cursor: url(https://i.imgur.com/M48nUJu.png), auto !important;
}
|
StoryGraph x Spotify x Instagram “Whether we die or not isn't really that big a deal." — Suzuya Juuzou |
Tone_ZR said: What I was saying was more or less this:  It is clickable, but it is separated by putting the ",". I wanted to leave it like this:  But leaving it this way, it is not possible to click on the tag and go towards all the tags, if there is one that is the same. In short: I wanted it to be clickable, but also to be in the form of a review (large). Ah, I see. That's possible, it just requires us to modify the "Review Tags" modification. Here's one option for that. I had to make a few changes, but it comes down to the removal of pointer-events and some styling changes. The styling changes have exceptions [Image] for the Favourite and MV tags so that they don't break how those look, which you will have to add more or less of if you change those tags later. Tone_ZR said: About the hearts I managed to arrange it this way: I would also like to know if this is possible with all tags, in the sense of: "MV = Movie" and put an icon of some clapperboard or something like that. Glad you figured it out. :) To style other tags in a similar manner, you can copy-paste the favourite code and then modify it as you did for the first one. You can also change the "♥" text for something else or add/change other styling too, of course. Here's an example of that code with either an icon or a background-image. Here's your code with these changes applied, for reference: https://pastebin.com/raw/CQVN8kUs |
EnderVsqz626 said: Legends' code should be working, I believe this is due to some faulty code found earlier in your CSS. If you see on line 497, right above where you pasted the new code, there is a missing curly bracket. If you add a closing bracket there "}" it should fix the problem and enable future code to work. LEGENDS_OF_ANIME said: Here's the code, just put it at the bottom of your CSS and replace "CURSOR_URL_HERE" with the direct link of your cursor image.
/*--------------------------------*\
| Custom Cursor |
\*--------------------------------*/
/*Lower the size under 32px wide and high if its too large.
https://myanimelist.net/forum/?topicid=1903808*/
body *, :not(*) {
cursor: url(CURSOR_URL_HERE), auto !important;
}
hello thanks for the CSS but it didn't work for me, I already put a 32x32 PNG on it and nothing that works. you have to fill where it says Body? /*--------------------------------*\ | Custom Cursor | \*--------------------------------*/ /*Lower the size under 32px wide and high if its too large. https://myanimelist.net/forum/?topicid=1903808*/ body *, :not(*) { cursor: url(https://i.imgur.com/M48nUJu.png), auto !important; }  |
Valerio_Lyndon said: Thank you very much. It worked the way I wanted it.Tone_ZR said: What I was saying was more or less this: It is clickable, but it is separated by putting the ",". I wanted to leave it like this: But leaving it this way, it is not possible to click on the tag and go towards all the tags, if there is one that is the same. In short: I wanted it to be clickable, but also to be in the form of a review (large). Ah, I see. That's possible, it just requires us to modify the "Review Tags" modification. Here's one option for that. I had to make a few changes, but it comes down to the removal of pointer-events and some styling changes. The styling changes have exceptions [Image] for the Favourite and MV tags so that they don't break how those look, which you will have to add more or less of if you change those tags later. Tone_ZR said: About the hearts I managed to arrange it this way: I would also like to know if this is possible with all tags, in the sense of: "MV = Movie" and put an icon of some clapperboard or something like that. Glad you figured it out. :) To style other tags in a similar manner, you can copy-paste the favourite code and then modify it as you did for the first one. You can also change the "♥" text for something else or add/change other styling too, of course. Here's an example of that code with either an icon or a background-image. Here's your code with these changes applied, for reference: https://pastebin.com/raw/CQVN8kUs I had done it manually yesterday and it looked like this: |
Valerio_Lyndon said: Legends' code should be working, I believe this is due to some faulty code found earlier in your CSS. If you see on line 497, right above where you pasted the new code, there is a missing curly bracket. If you add a closing bracket there "}" it should fix the problem and enable future code to work. How do you find out if there's a bracket missing or problems similar to this??? |
StoryGraph x Spotify x Instagram “Whether we die or not isn't really that big a deal." — Suzuya Juuzou |
Valerio_Lyndon said: EnderVsqz626 said: Legends' code should be working, I believe this is due to some faulty code found earlier in your CSS. If you see on line 497, right above where you pasted the new code, there is a missing curly bracket. If you add a closing bracket there "}" it should fix the problem and enable future code to work. hello thanks for the CSS but it didn't work for me, I already put a 32x32 PNG on it and nothing that works. you have to fill where it says Body? /*--------------------------------*\ | Custom Cursor | \*--------------------------------*/ /*Lower the size under 32px wide and high if its too large. https://myanimelist.net/forum/?topicid=1903808*/ body *, :not(*) { cursor: url(https://i.imgur.com/M48nUJu.png), auto !important; } ready indeed was that. Thanks I made the correction and it worked |
LEGENDS_OF_ANIME said: Valerio_Lyndon said: Legends' code should be working, I believe this is due to some faulty code found earlier in your CSS. If you see on line 497, right above where you pasted the new code, there is a missing curly bracket. If you add a closing bracket there "}" it should fix the problem and enable future code to work. How do you find out if there's a bracket missing or problems similar to this??? you can see your code with Inspect Element in Firefox, that Shishio told me a few days ago when I tried to find help to place a cursor by anime categories for the Blink list design. I think Valerio used that same (Inspect Element in Firefox) to see my Code and verify the problems |
EnderVsqz626 said: you can see your code with Inspect Element in Firefox, that Shishio told me a few days ago when I tried to find help to place a cursor by anime categories for the Blink list design. I think Valerio used that same (Inspect Element in Firefox) to see my Code and verify the problems I know that I can use inspect element. What I meant to ask is how would I how which line had an error. Is there a way to find the problems or do I have to look manually always??? |
StoryGraph x Spotify x Instagram “Whether we die or not isn't really that big a deal." — Suzuya Juuzou |
LEGENDS_OF_ANIME said: EnderVsqz626 said: you can see your code with Inspect Element in Firefox, that Shishio told me a few days ago when I tried to find help to place a cursor by anime categories for the Blink list design. I think Valerio used that same (Inspect Element in Firefox) to see my Code and verify the problems I know that I can use inspect element. What I meant to ask is how would I how which line had an error. Is there a way to find the problems or do I have to look manually always??? I couldn't tell you since I don't know how to use the inspect element because I don't have Firefox on my PC. but I imagine that he would have realized it quickly (I don't know how but I think it was like that) I have never modified my Clarity list, this is the first modification on my part that I make to Clarity, since that list was a copy and paste of a friend (which I liked how it was left and I asked for it) |
Tone_ZR said: Thank you very much. It worked the way I wanted it. I had done it manually yesterday and it looked like this: Awesome. :) Ah, you used an emoji! I always forget about those for some reason, but that's a great solution. |
LEGENDS_OF_ANIME said: Valerio_Lyndon said: Legends' code should be working, I believe this is due to some faulty code found earlier in your CSS. If you see on line 497, right above where you pasted the new code, there is a missing curly bracket. If you add a closing bracket there "}" it should fix the problem and enable future code to work. How do you find out if there's a bracket missing or problems similar to this??? Good question. When Ender said it wasn't working but the code looked correct, the first thing I did was test to see if the code worked on its own to check if the problem was with the code itself or with the implementation of the code (in this case, it obviously turned out to be with the implementation). The way I tested this was going onto Ender's list and adding a new stylesheet with Inspect Element and pasting the code. [Image] Since the code is on its own stylesheet, it isn't affected by the other CSS in the same way as when it is pasted at the bottom of the same one. When this worked, I figured it had to be one of two things: a problem occuring when the new code was added, such as improper copy-pasting, or a problem with the old code, such as a missing curly bracket "}" or parentheses ")". So I removed the separate stylesheet I had added and instead added the code to the bottom of Ender's main CSS file. This confirmed my suspicion, so at that point it's just a question of finding the problem. There are a few ways to do this. One is just eye balling it, looking for any formatting errors, but this can take a while. Something I often keep a lookout for is incorrect syntax highlighting. Most CSS editors highlight the code in certain colours based on what it thinks each piece is. When there is a missing bracket it will throw this out of whack. [Image] The other way to find it is really just knowing the code and what it does. Since I'm familiar with MAL's code and most of this theme and its modifications are written by me, I usually will be able to tell what parts of it are currently being applied to the list and what aren't by skimming it through. A missing bracket will usually break everything after it, so If the code is being applied correctly then I should scroll down, and if it is broken and not being applied correctly, I need to scroll up until I find the problem. |
Valerio_LyndonJul 13, 2021 1:32 PM
Valerio_Lyndon said: Good question. When Ender said it wasn't working but the code looked correct, the first thing I did was test to see if the code worked on its own to check if the problem was with the code itself or with the implementation of the code (in this case, it obviously turned out to be with the implementation). The way I tested this was going onto Ender's list and adding a new stylesheet with Inspect Element and pasting the code. [Image] Since the code is on its own stylesheet, it isn't affected by the other CSS in the same way as when it is pasted at the bottom of the same one. When this worked, I figured it had to be one of two things: a problem occuring when the new code was added, such as improper copy-pasting, or a problem with the old code, such as a missing curly bracket "}" or parentheses ")". So I removed the separate stylesheet I had added and instead added the code to the bottom of Ender's main CSS file. This confirmed my suspicion, so at that point it's just a question of finding the problem. There are a few ways to do this. One is just eye balling it, looking for any formatting errors, but this can take a while. Something I often keep a lookout for is incorrect syntax highlighting. Most CSS editors highlight the code in certain colours based on what it thinks each piece is. When there is a missing bracket it will throw this out of whack. [Image] The other way to find it is really just knowing the code and what it does. Since I'm familiar with MAL's code and most of this theme and its modifications are written by me, I usually will be able to tell what parts of it are currently being applied to the list and what aren't by skimming it through. A missing bracket will usually break everything after it, so If the code is being applied correctly then I should scroll down, and if it is broken and not being applied correctly, I need to scroll up until I find the problem. Thanks a LOT for talking your time and giving me such a big explanation. I didn't know a lot of this and I can already tell it will really help me in the future. --__-- though, I am just a 15 year old brat who's just messing with some code and trying to understand it. I still haven't learned CSS but I do intend to. (btw, are you still making that CSS guide of yours???) |
StoryGraph x Spotify x Instagram “Whether we die or not isn't really that big a deal." — Suzuya Juuzou |
LEGENDS_OF_ANIME said: (btw, are you still making that CSS guide of yours???) I'm sorry to say other projects or hobbies have generally been taking precedence. LEGENDS_OF_ANIME said: though, I am just a 15 year old brat who's just messing with some code and trying to understand it. I still haven't learned CSS but I do intend to. Judging by your responses on this thread you've learned quite a bit. :) Trust me, once you have the format down the rest is mostly learning by repetition. |
I need some help. I ran into this problem pretty long ago but just ignored it, but now I want to style the tags a bit and it's bothering me a lot. For example, this is one of my tags -
.data.tags span a[href*="=Art%2FAnimation"] { background: url(https://i.imgur.com/sv4ksFO.gif) ; color: white !important }
I just typed "%2F" in place of a space which is called "ASCII Encoding" I think. The sign for "|" is "%7C". But when I only use this as the tag in the CSS, it doesn't work
.data.tags span a[href*="=%7C"] { background: BGCOLOUR; color: #00000 !important }
I even tried only typing "|" but that doesn't work too. I am sorry that I am so bad at explaining but I hope someone gets what problem I have. Also just a side question but will my list load time increase if I put all my CSS into dropbox or something and use it all as one import code in my list??? |
Legends_of_animeJul 14, 2021 9:03 AM
StoryGraph x Spotify x Instagram “Whether we die or not isn't really that big a deal." — Suzuya Juuzou |
LEGENDS_OF_ANIME said: I need some help. I ran into this problem pretty long ago but just ignored it, but now I want to style the tags a bit and it's bothering me a lot. For example, this is one of my tags -
.data.tags span a[href*="=Art%2FAnimation"] { background: url(https://i.imgur.com/sv4ksFO.gif) ; color: white !important }
I just typed "%2F" in place of a space which is called "ASCII Encoding" I think. The sign for "|" is "%7C". But when I only use this as the tag in the CSS, it doesn't work
.data.tags span a[href*="=%7C"] { background: BGCOLOUR; color: #00000 !important }
I even tried only typing "|" but that doesn't work too. I am sorry that I am so bad at explaining but I hope someone gets what problem I have. Also just a side question but will my list load time increase if I put all my CSS into dropbox or something and use it all as one import code in my list??? I hate to be unhelpful but the %7C should be working. I loaded it onto my list and it's working alright: https://myanimelist.net/mangalist/Valerio_Lyndon If you're using %2F for space, perhaps try using %20 instead and see if that fixes it?  If you aren't able to select a tag easily, you can always check its value in the HTML. This will be what the CSS is targeting, so as long as the CSS matches the HTML it will be fine. For example:  --- Putting code into an import should usually be the same or unnoticeably similar to having it outside of one. The only times I think you would notice a difference might be if MAL or the imported host (Dropbox, in this case) were inherently slow or having a slow day. But I believe Dropbox is usually pretty fast, so it shouldn't affect anything negatively. |
Valerio_LyndonJul 15, 2021 1:13 AM
I am so mad............... I literally typed sooooooooo many things but then I just FUCKING CLOSE CHROME BY MISTAKE AND IT'S ALL GONE NOW. Anyway, I will keep it short this time. The maing thing is that it's working now. I copied the HTML value using firefox and it's working but I am pretty sure I typed the same thing. Thanks for keeping the tag in your list, you can delete that now. And I wanna ask 2 more questions, first one being that when I went to anime list using firefox I saw that a lot of things were different. My "days" section even overlapped the edit button. So do I have to check if my list is okay or not in both chrome and firefox when making changes??? or is there a way to fix this?? The second question is, when I went to your anime list I saw that some of your tags were grouped together and some were separated.  Could you tell me how I can do that, cuz I was wanting something exactly like that. I found this code is your CSS which I think does that grouping thing but I just couldn't figure out which value meant what and how it works. So if you're not busy then could you give me a quick guide??? |
StoryGraph x Spotify x Instagram “Whether we die or not isn't really that big a deal." — Suzuya Juuzou |
LEGENDS_OF_ANIME said: I am so mad............... I literally typed sooooooooo many things but then I just FUCKING CLOSE CHROME BY MISTAKE AND IT'S ALL GONE NOW. … I went to anime list using firefox I saw that a lot of things were different. My "days" section even overlapped the edit button. So do I have to check if my list is okay or not in both chrome and firefox when making changes??? or is there a way to fix this?? Ah, the amount of times I've done that. I write posts up in a text editor that autosaves my work now lol. Firefox has about 3% market share, so as much as I don't like saying it (as part of that 3%), supporting Firefox isn't that important. Anyhow, Firefox and Chrome will generally display the same. But in the case they don't, you can ignore minor issues like that if if it's going to be too annoying to fix. But, if you decide you really want to fix it, you can write code that will only run on Firefox by wrapping it in a @-moz-document rule. Example code below. LEGENDS_OF_ANIME said: The second question is, when I went to your anime list I saw that some of your tags were grouped together and some were separated. https://i.imgur.com/qepP2nF.png Could you tell me how I can do that, cuz I was wanting something exactly like that. I found this code is your CSS which I think does that grouping thing but I just couldn't figure out which value meant what and how it works. … So if you're not busy then could you give me a quick guide??? I have a write-up on the Grouped Tags in the original post, although it's buried a couple of spoiler menus deep. Hopefully it helps. |
| I fucked up big time... my whole list is messed up and idk what to do. So I was trying that new javascript booklet tool and I wanted to change all the titles on my list to English titles... I guess I must've messed up somewhere along the way. I copied the following code into my list that I got from using the booklet tool after generating code for the titles on my list: I obviously deleted the code but it seems my list has not changed. This is what my list used to look like: I can't seem to fit all of this in one message so I'll include my list's current code in the next post. |
mistersundayJul 16, 2021 1:19 PM
| This is what my current code looks like after deleting the tool's code: Is there any way to get my old list back? Or do I need to start from scratch? |
mistersundayJul 16, 2021 1:22 PM
mistersunday said: This is what my current code looks like after deleting the tool's code: Is there any way to get my old list back? Or do I need to start from scratch? Is this how it used to be? https://pastebin.com/raw/q8Rq1LKD Also try it after removing /* "Clarity" Modification by Valerio Lyndon / Hover Image / Revision 0.2 */ .data.image{overflow:visible}.data.image a:before{content:"";position:absolute;top:50%;left:-166px;z-index:50;width:150px;height:0;background:center/cover no-repeat var(--bg-dark);border-radius:8px;box-shadow:0 0 2px #000;opacity:0;pointer-events:none;transition:all .3s ease}.list-item:hover .data.image a:before{top:calc(50% - 100px);height:200px;opacity:1}.data.image a:after,.data.image img{border-radius:50%} .cover-block { z-index: 25; } .header { z-index: 30; } footer:before, footer:after { content: ""; position: fixed; top: 0; z-index: -1; width: calc(50% - 538px); min-width: 262px; height: 100%; background: transparent no-repeat center bottom / contain scroll; } /* Left Render */ footer:before { right: calc(100% - (50% - 538px)); background-position: left bottom; } /* Right Render */ footer:after { left: calc(100% - (50% - 538px)); background-position: right bottom; } |
Shishio-kun said: mistersunday said: This is what my current code looks like after deleting the tool's code: Is there any way to get my old list back? Or do I need to start from scratch? Is this how it used to be? https://pastebin.com/raw/q8Rq1LKD Also try it after removing /* "Clarity" Modification by Valerio Lyndon / Hover Image / Revision 0.2 */ .data.image{overflow:visible}.data.image a:before{content:"";position:absolute;top:50%;left:-166px;z-index:50;width:150px;height:0;background:center/cover no-repeat var(--bg-dark);border-radius:8px;box-shadow:0 0 2px #000;opacity:0;pointer-events:none;transition:all .3s ease}.list-item:hover .data.image a:before{top:calc(50% - 100px);height:200px;opacity:1}.data.image a:after,.data.image img{border-radius:50%} .cover-block { z-index: 25; } .header { z-index: 30; } footer:before, footer:after { content: ""; position: fixed; top: 0; z-index: -1; width: calc(50% - 538px); min-width: 262px; height: 100%; background: transparent no-repeat center bottom / contain scroll; } /* Left Render */ footer:before { right: calc(100% - (50% - 538px)); background-position: left bottom; } /* Right Render */ footer:after { left: calc(100% - (50% - 538px)); background-position: right bottom; } Thank you that helped! The only issue I'm seeing is that the headers aren't formatted how they used to be? Do I just need to modify this code? It looks like they're there but they don't seem like actual headers |
mistersunday said: Shishio-kun said: Is this how it used to be? https://pastebin.com/raw/q8Rq1LKD Also try it after removing /* "Clarity" Modification by Valerio Lyndon / Hover Image / Revision 0.2 */ .data.image{overflow:visible}.data.image a:before{content:"";position:absolute;top:50%;left:-166px;z-index:50;width:150px;height:0;background:center/cover no-repeat var(--bg-dark);border-radius:8px;box-shadow:0 0 2px #000;opacity:0;pointer-events:none;transition:all .3s ease}.list-item:hover .data.image a:before{top:calc(50% - 100px);height:200px;opacity:1}.data.image a:after,.data.image img{border-radius:50%} .cover-block { z-index: 25; } .header { z-index: 30; } footer:before, footer:after { content: ""; position: fixed; top: 0; z-index: -1; width: calc(50% - 538px); min-width: 262px; height: 100%; background: transparent no-repeat center bottom / contain scroll; } /* Left Render */ footer:before { right: calc(100% - (50% - 538px)); background-position: left bottom; } /* Right Render */ footer:after { left: calc(100% - (50% - 538px)); background-position: right bottom; } Thank you that helped! The only issue I'm seeing is that the headers aren't formatted how they used to be? Do I just need to modify this code? It looks like they're there but they don't seem like actual headers Click this link and try these codes at the bottom, otherwise you need to add the mod from the opening post again (under popular/requested user changes). The rounded headers is probably what it was https://valeriolyndon.github.io/MAL-Public-List-Designs/Clarity%20Theme/Mod%20-%20Category%20Headers%20Round%20Compressed.css |
Shishio-kun said: mistersunday said: Thank you that helped! The only issue I'm seeing is that the headers aren't formatted how they used to be? Do I just need to modify this code? It looks like they're there but they don't seem like actual headers Click this link and try these codes at the bottom, otherwise you need to add the mod from the opening post again (under popular/requested user changes). The rounded headers is probably what it was https://valeriolyndon.github.io/MAL-Public-List-Designs/Clarity%20Theme/Mod%20-%20Category%20Headers%20Round%20Compressed.css Thank you so much! this worked and I was able to modify the headers to match my previous format. The only other question I have left is regarding the opacity of my list. I forgot how to modify the opacity of the list boxes, I think I had it at 80 or 90% opacity beforehand but I completely forgot how to do it. I think the header boxes were at the same opacity level too. Thanks again you guys are life savers! |
mistersunday said: Shishio-kun said: Click this link and try these codes at the bottom, otherwise you need to add the mod from the opening post again (under popular/requested user changes). The rounded headers is probably what it was https://valeriolyndon.github.io/MAL-Public-List-Designs/Clarity%20Theme/Mod%20-%20Category%20Headers%20Round%20Compressed.css Thank you so much! this worked and I was able to modify the headers to match my previous format. The only other question I have left is regarding the opacity of my list. I forgot how to modify the opacity of the list boxes, I think I had it at 80 or 90% opacity beforehand but I completely forgot how to do it. I think the header boxes were at the same opacity level too. Thanks again you guys are life savers! Not sure how he does it here but it must be something like this /*------------------------------* | List colors (CLARITY LIGHT) | status menu container is the color of the header under the banner when there is transparency on your tables, and the last codes control the rows on hover and the glow around them. Make a new box shadow here https://html-css-js.com/css/generator/box-shadow/ Leave root alone, but you may want to adjust the color for data number's circle and status menu container (the header containing category links) *------------------------------*/ :root { --bg: rgba(255,255,255,.8) !important; } |
Shishio-kun said: mistersunday said: Thank you so much! this worked and I was able to modify the headers to match my previous format. The only other question I have left is regarding the opacity of my list. I forgot how to modify the opacity of the list boxes, I think I had it at 80 or 90% opacity beforehand but I completely forgot how to do it. I think the header boxes were at the same opacity level too. Thanks again you guys are life savers! Not sure how he does it here but it must be something like this /*------------------------------* | List colors (CLARITY LIGHT) | status menu container is the color of the header under the banner when there is transparency on your tables, and the last codes control the rows on hover and the glow around them. Make a new box shadow here https://html-css-js.com/css/generator/box-shadow/ Leave root alone, but you may want to adjust the color for data number's circle and status menu container (the header containing category links) *------------------------------*/ :root { --bg: rgba(255,255,255,.8) !important; } Thank you!! |
mistersunday said: Shishio-kun said: Not sure how he does it here but it must be something like this /*------------------------------* | List colors (CLARITY LIGHT) | status menu container is the color of the header under the banner when there is transparency on your tables, and the last codes control the rows on hover and the glow around them. Make a new box shadow here https://html-css-js.com/css/generator/box-shadow/ Leave root alone, but you may want to adjust the color for data number's circle and status menu container (the header containing category links) *------------------------------*/ :root { --bg: rgba(255,255,255,.8) !important; } Thank you!! Awesome :D If you want to try the tool again, you should Dropbox the CSS and import it https://myanimelist.net/forum/?topicid=1499059#msg63378306 first link |
| Thanks so much for helping them @Shishio-kun and sorry for the trouble @mistersunday I'm currently working on making the forum post clearer and perhaps add some precautions into the tool so that mistakes like this are harder to make. |
| Moving this post here since its about Clarity Mark_016 said: i need suggestion, how to changes this (circled in red) into "quotes" like this Btw, Here's My Layout. Thanks before |
| can i got a little help here? my code was really messed up, can you tidy up it? but don't change any customize i made (if something needs to be fixed, i will be glad with it :D) Awesome layout Btw.... |
Mark_016Jul 25, 2021 5:56 PM
       ~Originally Modified and Edited by Mark_016~ |
hrxshi said: is there a way to automatically highlight my top rated anime/manga? for example all my 9-10 rated entries are automatically highlighted in some manner Here's some code you could use. Add to the bottom of your CSS. As it is now, it will add some coloured shadows around each entry. But if you want to change the colours or the styling for each score, you can do that by modifying the first part of the code where all the ".score-#" and "box-shadow" codes are. You could use a border instead for cleaner lines or modify the shadows to your liking. Box shadow and border CSS reference: https://www.w3schools.com/cssref/css3_pr_box-shadow.asp https://www.w3schools.com/css/css_border_shorthand.asp |
| I already asked a solution for this but I'm just gonna rephrase it cuz the previous post didn't seem to make sense I think. SO, what I want to know is, is there a way to target the score of a specific anime. For example, not .score-10 cuz it would target all the entries with a score of 10 but rather a way I can target the score of a SPECIFIC entry in my list. So, if this is possible then please help me with it, I'm hopeless so this man here needs help. |
StoryGraph x Spotify x Instagram “Whether we die or not isn't really that big a deal." — Suzuya Juuzou |
Valerio_Lyndon said: thanks so much, exactly what i was looking forhrxshi said: is there a way to automatically highlight my top rated anime/manga? for example all my 9-10 rated entries are automatically highlighted in some manner Here's some code you could use. Add to the bottom of your CSS. As it is now, it will add some coloured shadows around each entry. But if you want to change the colours or the styling for each score, you can do that by modifying the first part of the code where all the ".score-#" and "box-shadow" codes are. You could use a border instead for cleaner lines or modify the shadows to your liking. Box shadow and border CSS reference: https://www.w3schools.com/cssref/css3_pr_box-shadow.asp https://www.w3schools.com/css/css_border_shorthand.asp |
 |
Valerio_Lyndon said: hrxshi said: is there a way to automatically highlight my top rated anime/manga? for example all my 9-10 rated entries are automatically highlighted in some manner Here's some code you could use. Add to the bottom of your CSS. As it is now, it will add some coloured shadows around each entry. But if you want to change the colours or the styling for each score, you can do that by modifying the first part of the code where all the ".score-#" and "box-shadow" codes are. You could use a border instead for cleaner lines or modify the shadows to your liking. Box shadow and border CSS reference: https://www.w3schools.com/cssref/css3_pr_box-shadow.asp https://www.w3schools.com/css/css_border_shorthand.asp It broke in my list for some reason. Can you tell me the fix?? [ IMAGE ] |
StoryGraph x Spotify x Instagram “Whether we die or not isn't really that big a deal." — Suzuya Juuzou |
LEGENDS_OF_ANIME said: Valerio_Lyndon said: Here's some code you could use. Add to the bottom of your CSS. As it is now, it will add some coloured shadows around each entry. But if you want to change the colours or the styling for each score, you can do that by modifying the first part of the code where all the ".score-#" and "box-shadow" codes are. You could use a border instead for cleaner lines or modify the shadows to your liking. Box shadow and border CSS reference: https://www.w3schools.com/cssref/css3_pr_box-shadow.asp https://www.w3schools.com/css/css_border_shorthand.asp It broke in my list for some reason. Can you tell me the fix?? [ IMAGE ] Ah, it doesn't play nicely with the score descriptors you have. You'll need to change the score descriptors mod code. Unfortunately this does mean some minor style tweaks, primarily the overlayed scores not being as perfectly aligned like before. Replace the old codes as shown in the spoiler below with the new codes. LEGENDS_OF_ANIME said: SO, what I want to know is, is there a way to target the score of a specific anime. For example, not .score-10 cuz it would target all the entries with a score of 10 but rather a way I can target the score of a SPECIFIC entry in my list. So, if this is possible then please help me with it, I'm hopeless so this man here needs help. This requires adding a tag to the desired entries and then repositioning that tag via CSS. The code will vary depending on the list, but for your list you could add something like this: With this code, any ".5" tag you add will be repositioned over the score like this image here:   This code can also be used for ".1", ".3", etcetera. Keep in mind that any time something about your list changes, you will have to modify the "left" value of these tags so that they are positioned correctly once again. It may not be how you were imagining, but the styling options are limited since we're positioning one element (the ".5" tag) over top of the scores, which vary in width (10 is wider than 8, for instance). You could potentially try other styling such as widening the score box to make room for the .5, but as I say the choices are limited. |
Mark_016 said: i need suggestion, how to changes this (circled in red) into "quotes" like this Btw, Here's My Layout. Thanks before The text can be modified by changing its various "properties" that make up its styling. For example, this code resets much of the name styling to be more friendly for quotes. Use one of the spoiler codes, not both. One controls the styling for all category pages at once, the other has different styling for each page. [Image] For the quote text itself, you'll just have to make sure you input it correctly. CSS doesn't allow line breaks or un-escaped double quotes. This is because these would break the CSS formatting. So line breaks become: \a (with a space after) And double quotes become: \" Here's an example: body {
--name: "\"This is a quote.\a And this is a new line within that quote.\"\a - Valerio";
}And if you need it, here's a per-category name control (in this case, it would control all the quotes). Mark_016 said: can i got a little help here? my code was really messed up, can you tidy up it? but don't change any customize i made (if something needs to be fixed, i will be glad with it :D) Awesome layout Btw.... So you just want the code to be more readable? This is usually best done yourself, so that you know where each part is for when you may need to modify it later. As long as you back up the code before you start, and preview each change as you go, it's perfectly okay to start modifying things yourself. The formatting of CSS is pretty forgiving as long as you don't delete any of the curly brackets or parentheses. As for keeping things labelled, anything in between /* and */ marks are comments and don't affect the rest of the code. So it's safe to delete or write anything as long as it is between those two marks (they are displayed as a different colour in the editor so you can easily tell). If you really want I can give it a pass to make it more uniform but I decided to ask first. |
Valerio_Lyndon said: Ah, it doesn't play nicely with the score descriptors you have. You'll need to change the score descriptors mod code. Unfortunately this does mean some minor style tweaks, primarily the overlayed scores not being as perfectly aligned like before. Replace the old codes as shown in the spoiler below with the new codes. LEGENDS_OF_ANIME said: SO, what I want to know is, is there a way to target the score of a specific anime. For example, not .score-10 cuz it would target all the entries with a score of 10 but rather a way I can target the score of a SPECIFIC entry in my list. So, if this is possible then please help me with it, I'm hopeless so this man here needs help. This requires adding a tag to the desired entries and then repositioning that tag via CSS. The code will vary depending on the list, but for your list you could add something like this: With this code, any ".5" tag you add will be repositioned over the score like this image here: This code can also be used for ".1", ".3", etcetera. Keep in mind that any time something about your list changes, you will have to modify the "left" value of these tags so that they are positioned correctly once again. It may not be how you were imagining, but the styling options are limited since we're positioning one element (the ".5" tag) over top of the scores, which vary in width (10 is wider than 8, for instance). You could potentially try other styling such as widening the score box to make room for the .5, but as I say the choices are limited. Thanks a lot for helping. It really helped a lot. But................ I really don't wanna but there's two more things I wanna ask for. I am really sorry for asking for so much help but I just can't figure how to do them and it's bothering me. Is there a way to create a border like that around the rows based on the current status of the entry??? (Ex. If I am currently watching an anime then the border color around it would be green)  And the other thing is, in my CSS there's a problem. If you see line 100 of my CSS then you will see there's the same code repeated 2 times but when I delete one of them it totally breaks my list banner. My banner just disappears somewhere. So I was thinking if you could tell me what the cause of this was cuz I just couldn't find a reason (I don't have any good knowledge of CSS, I'm sorry.) Here's my list CSS: URL |
StoryGraph x Spotify x Instagram “Whether we die or not isn't really that big a deal." — Suzuya Juuzou |
Valerio_Lyndon said: Mark_016 said: can i got a little help here? my code was really messed up, can you tidy up it? but don't change any customize i made (if something needs to be fixed, i will be glad with it :D) Awesome layout Btw.... So you just want the code to be more readable? This is usually best done yourself, so that you know where each part is for when you may need to modify it later. As long as you back up the code before you start, and preview each change as you go, it's perfectly okay to start modifying things yourself. The formatting of CSS is pretty forgiving as long as you don't delete any of the curly brackets or parentheses. As for keeping things labelled, anything in between /* and */ marks are comments and don't affect the rest of the code. So it's safe to delete or write anything as long as it is between those two marks (they are displayed as a different colour in the editor so you can easily tell). If you really want I can give it a pass to make it more uniform but I decided to ask first. thanks for your reply. I made some unusual css code (e.g gif images in licensor and studio) which I don't know is right or wrong. that's why I'm asking whether the code is correct or not? and is the order correct? |
~Originally Modified and Edited by Mark_016~ |
Mark_016 said: So you just want the code to be more readable? This is usually best done yourself, so that you know where each part is for when you may need to modify it later. As long as you back up the code before you start, and preview each change as you go, it's perfectly okay to start modifying things yourself. The formatting of CSS is pretty forgiving as long as you don't delete any of the curly brackets or parentheses. As for keeping things labelled, anything in between /* and */ marks are comments and don't affect the rest of the code. So it's safe to delete or write anything as long as it is between those two marks (they are displayed as a different colour in the editor so you can easily tell). If you really want I can give it a pass to make it more uniform but I decided to ask first. thanks for your reply. I made some unusual css code (e.g gif images in licensor and studio) which I don't know is right or wrong. that's why I'm asking whether the code is correct or not? and is the order correct?[/quote] The nice thing about CSS is basically if it works as desired then it's as correct as it needs to be. I did glance through the code and it all looked fine. The order will only matter in so far as what code is going to overwrite other code (further down code has precedence over earlier code). So as long as everything is applying to the page properly, the order is most likely correct. |
LEGENDS_OF_ANIME said: Thanks a lot for helping. It really helped a lot. But................ I really don't wanna but there's two more things I wanna ask for. I am really sorry for asking for so much help but I just can't figure how to do them and it's bothering me. Not to worry :) LEGENDS_OF_ANIME said: Is there a way to create a border like that around the rows based on the current status of the entry??? (Ex. If I am currently watching an anime then the border color around it would be green) https://i.imgur.com/Aqeiy1Y.png You could use something like this. It adds a new element inside of the status bar. There are other ways to do this, but this is the easiest. .data.status::before {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: var(--listWidth);
height: 100%;
pointer-events: none;
}
.data.status.watching::before,
.data.status.reading::before {
box-shadow: 0 0 0 1px var(--watching);
}
.data.status.completed::before {
box-shadow: 0 0 0 1px var(--completed);
}
.data.status.onhold::before {
box-shadow: 0 0 0 1px var(--onhold);
}
.data.status.dropped::before {
box-shadow: 0 0 0 1px var(--dropped);
}
.data.status.plantowatch::before,
.data.status.plantoread::before {
box-shadow: 0 0 0 1px var(--plantowatch);
}LEGENDS_OF_ANIME said: And the other thing is, in my CSS there's a problem. If you see line 100 of my CSS then you will see there's the same code repeated 2 times but when I delete one of them it totally breaks my list banner. My banner just disappears somewhere. So I was thinking if you could tell me what the cause of this was cuz I just couldn't find a reason (I don't have any good knowledge of CSS, I'm sorry.) Here's my list CSS: URL The problem looks to be this stray bracket on line 95. Deleting that should fix any issues.  |
Thanks a lot. Everything worked out perfectly. I have been asking a lot of questions lately so I wasn't sure if I should ask for help AGAIN. But thanks for helping me out. I won't do much changes in my list for some time so you can rest in peace now. |
Legends_of_animeJul 30, 2021 3:55 AM
StoryGraph x Spotify x Instagram “Whether we die or not isn't really that big a deal." — Suzuya Juuzou |
Valerio_Lyndon said: Mark_016 said: So you just want the code to be more readable? This is usually best done yourself, so that you know where each part is for when you may need to modify it later. As long as you back up the code before you start, and preview each change as you go, it's perfectly okay to start modifying things yourself. The formatting of CSS is pretty forgiving as long as you don't delete any of the curly brackets or parentheses. As for keeping things labelled, anything in between /* and */ marks are comments and don't affect the rest of the code. So it's safe to delete or write anything as long as it is between those two marks (they are displayed as a different colour in the editor so you can easily tell). If you really want I can give it a pass to make it more uniform but I decided to ask first. The nice thing about CSS is basically if it works as desired then it's as correct as it needs to be. I did glance through the code and it all looked fine. The order will only matter in so far as what code is going to overwrite other code (further down code has precedence over earlier code). So as long as everything is applying to the page properly, the order is most likely correct. so, it doesn't need to be fix anymore? |
~Originally Modified and Edited by Mark_016~ |
Mark_016 said: so, it doesn't need to be fix anymore? If nothing is broken then nothing needs to be fixed. The main benefits to improving code further are reducing the space it takes up and improving its readability. These are both nice to have, but not required. |
LEGENDS_OF_ANIME said: Thanks a lot. Everything worked out perfectly. I have been asking a lot of questions lately so I wasn't sure if I should ask for help AGAIN. But thanks for helping me out. I won't do much changes in my list for some time so you can rest in peace now. Glad it works. :) And no worries lol. |
Valerio_Lyndon said: Mark_016 said: so, it doesn't need to be fix anymore? If nothing is broken then nothing needs to be fixed. The main benefits to improving code further are reducing the space it takes up and improving its readability. These are both nice to have, but not required. thanks for the advise, dude. once again, your layout was really awesome :D :D |
~Originally Modified and Edited by Mark_016~ |
| So a couple days ago category headers just stopped working without me making any changes to the css. Is there any way to fix it or is it a problem with the malcat or mal itself? |
   |
Powish said: So a couple days ago category headers just stopped working without me making any changes to the css. Is there any way to fix it or is it a problem with the malcat or mal itself? I have the same problem i think problem is on mal |
 |
More topics from this board
» theme helpthreat - Jul 5 |
5 |
by Zaryf
»»
Aug 21, 5:46 AM |
|
» [CSS] ⭐️ Customize your List Cursor + Cursor FixesShishio-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 ListsYasminaRegina - 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 |