| Hi, I really like your design, but my show cover image has a weird dark halo effect around it and I'm not sure what's causing this. The original image is not like this and I even tried using other images but it's still the same. This is the original image I use for the show cover. https://ibb.co/rHXSR25 This is a screenshot of my show cover https://ibb.co/7vymVRm |
skyfaller2 said: Hi, I really like your design, but my show cover image has a weird dark halo effect around it and I'm not sure what's causing this. The original image is not like this and I even tried using other images but it's still the same. This is the original image I use for the show cover. https://ibb.co/rHXSR25 This is a screenshot of my show cover https://ibb.co/7vymVRm This is an intended design choice, but to change it you can add this to the bottom of your CSS. /*------------------------------*\
|* Remove Banner Shadow *|
\* - - - - - - - - - - - - - - -*/
#cover-image-container::after { content: none; } |
Valerio_Lyndon said: Thank you skyfaller2 said: Hi, I really like your design, but my show cover image has a weird dark halo effect around it and I'm not sure what's causing this. The original image is not like this and I even tried using other images but it's still the same. This is the original image I use for the show cover. https://ibb.co/rHXSR25 This is a screenshot of my show cover https://ibb.co/7vymVRm This is an intended design choice, but to change it you can add this to the bottom of your CSS. /*------------------------------*\
|* Remove Banner Shadow *|
\* - - - - - - - - - - - - - - -*/
#cover-image-container::after { content: none; } |
Sakku-san said: After some months I come back here to update the cover and the only thing I could say is: Thanks for doing all this work!, this style is still MY FAVORITE after many years being here in MAL. Thank you, I'm very glad it's finding some favour. :) Sakku-san said: I also took some of the ideas I read from others commenting here, like renaming Top Rated Banners, and Silver and Bronze Ratings, and I have some questions/issues: 1. The Top Rated Custom Banners is a great idea which I also want to use for the worst animes I've watch using the colors of the Bronze Ratings for scores from 1-5 but after I added the Bronze code mentioned here the bar is not centered as gold and silver are (as you can see in my watching list) AND that bar doesn't appear at all if you sort the list by score. [EDIT] Solved by deleting: :not([data-query*='order":4']) as you suggested in other post. So, is there a way I can fix both problems and use Bronze Ratings with custom banners for 1, 2, 3, 4 and 5-scored anime? That would be awesome. To remove the banner on those scored 8 and add it to those scored 1-5, replace your "Bronze Ratings" mod with this new version. If you wanted to keep the rating banners for items rated 8 that could be arranged, but I assume you don't want them to be the same colour as those scored 1-5? Sakku-san said: 2. I also want to use the Score-Coloured Item Bars and rating colors in scores mentioned here but it just make all bars look white in my list and the score numbers are the same. I forgot to mention it in the previous post I think, but the score bars relied on another mod that coloured the score numbers. So you can either add that mod or use a modified version. Here's both options: |
Valerio_Lyndon said: To remove the banner on those scored 8 and add it to those scored 1-5, replace your "Bronze Ratings" mod with this new version. Thanks for the help! I changed bronze code to So now I have different text depending on the score given from 1-4 (I still have to choose which colors use for every score). Valerio_Lyndon said: If you wanted to keep the rating banners for items rated 8 that could be arranged, but I assume you don't want them to be the same colour as those scored 1-5? For now I want banners to show only with best (9 and 10) and worst (1-4) animes I've seen. Btw, I also tried to use the Per-Category Banner Mod with this img https://i.imgur.com/jxMl4st.png for 'Completed' but it doesn't show correctly. The same happens if I use it as normal banner without the mod. Why is that happening? I read that any size should work. |
   |
Sakku-san said: Btw, I also tried to use the Per-Category Banner Mod with this img https://i.imgur.com/jxMl4st.png for 'Completed' but it doesn't show correctly. The same happens if I use it as normal banner without the mod. Why is that happening? I read that any size should work. I assume the problem is with the image crop?  The default sizing of images is referred to in the CSS as "cover", which maintains the aspect ratio (width/height proportions) so as to not stretch the image, while fitting each side. For short but very wide image such as this, it will crop it heavily, and for text this will definitely look odd. But, for most images this makes sense. To change it, you can adjust the sizing to be either "contain" which will show the entire image, or a measurement unit such as "50%". Here's an example of that with the default image and the per-category images. All these code snippets can be added to the bottom of your CSS to apply. |
Valerio_Lyndon said: Sakku-san said: Btw, I also tried to use the Per-Category Banner Mod with this img https://i.imgur.com/jxMl4st.png for 'Completed' but it doesn't show correctly. The same happens if I use it as normal banner without the mod. Why is that happening? I read that any size should work. I assume the problem is with the image crop? The default sizing of images is referred to in the CSS as "cover", which maintains the aspect ratio (width/height proportions) so as to not stretch the image, while fitting each side. For short but very wide image such as this, it will crop it heavily, and for text this will definitely look odd. But, for most images this makes sense. To change it, you can adjust the sizing to be either "contain" which will show the entire image, or a measurement unit such as "50%". Here's an example of that with the default image and the per-category images. All these code snippets can be added to the bottom of your CSS to apply. Thanks for all the help!! |
| |
burnerfistah said: Really love this layout!! Just want to know how I can make the covers for the manga covers to be less dim and more defined? Idk if I make sense but want the covers to look more clear like how the covers look in the clarity layout. Also fix how the cover images look really blurry for some reason. Not too experienced with this customization so would appreciate any help :) Update: I was viewing my list on my brother's computer and noticed that my list looks fine on his computer. I'm not sure why it looks really blurry on mine though :/. When I go on your profile, the cover images look clear, but when I visit the profile of other people from this thread, some of their lists are also blurry for me. Any idea on what may be wrong? Sounds like the cover generator isn't working for you. Check the debugging steps or alternate solutions from the FAQ. They likely look clear when viewing my anime list because I switched to using one of the alternate solutions a while ago. As for them being dim, the brightness should be controlled by the theme variables near the top of the code which you seem to have found. If they seem too dim still, try raising it to 100%. |
All cover images are blurry?
| is there any way to make the list smaller? for example: change the number of animes in one line from 6 to 4, or just make the images smaller in generall. Thanks in advance. |
ohnewnewApr 13, 2021 11:35 AM
| Signature removed. Please follow the signature rules, as defined in the Site & Forum Guidelines. |
ohnewnew said: is there any way to make the list smaller? for example: change the number of animes in one line from 6 to 4, or just make the images smaller in generall. Thanks in advance. You can limit the number of anime in a single row with this mod (add to the bottom of your CSS). /*------------------------------*\
|* Limit Number of Columns *|
\* - - - - - - - - - - - - - - -*/
.list-table {
/* To adjust number of columns, change the first number inside the calc() function. Default (and maximum) is 8. */
max-width: calc( 5 * 224px );
}As for making the actual anime smaller, it's more difficult and can become quite complex quite fast. If we keep everything contained within the cover images, then certain text will quickly begin overlapping at smaller widths. If you just wanted the image smaller without affecting the texts that'd be possible, but may look odd. Or if we were to move text outside of the cover images or something else, then it starts getting into some deep levels of customization required and overwriting large parts of the list. Did you have a better description of what you were thinking of so that I can see about potentially helping? |
| the image background, doesn't it look a bit dark? Edit: ty for layout |
Find the "--bgDimness" variable in the theme settings (near the top of the CSS) and change its value. 0% will make the image fully bright. Higher values will dim the background further. |
Valerio_Lyndon said: ty, i'll try it👍Find the "--bgDimness" variable in the theme settings (near the top of the CSS) and change its value. 0% will make the image fully bright. Higher values will dim the background further. |
Prospectivee said: Hello, amazing theme I've been using it for awhile but I think the most recent update (v.1.6.0) changed something about properly adjusting the page length. I was running on (v.1.5.0) before I updated. Before, the page used to adjust to how many covers you had on the screen at once so it wouldn't allow you to scroll past the last cover you had on your screen. Now it looks like every page has a set length so that you can end up scrolling pretty far down. I only noticed this because I enabled stats to show for my page and sometimes it overlaps with the credits. It looks like it works fine when the page needs to load more covers like the completed tab, but when there's only a few (like my watching tab) then it seems to break a little bit. I checked a few other people with the same design and it looks like the same issue is there for them too. No rush to fix this it's just a minor issue I noticed. Thanks in advance! Thanks for the bug report! Looks like it was caused by a simple slip up on my part. I've released v1.6.1 which should fix this as well as a couple related issues I noticed during the fix. If you just wanted to apply a patch to fix it without updating the entire theme, feel free to see below. |
| whenever i do my code only my gold and silver ratings show up , why doesn't the bronze one show up. Also, is there a code that lets me like go from score 1 - 5 means bronze and then silver is 6 - 7, etc and is their code that lets me put stats button correctly because when i put mine this happens |
JayDaAnimeLordApr 3, 2021 2:41 PM
 "Hard work is worthless for those that don’t believe in themselves" - Naruto Uzumaki |
JayDaAnimeLord said: whenever i do my code only my gold and silver ratings show up , why doesn't the bronze one show up. Also, is there a code that lets me like go from score 1 - 5 means bronze and then silver is 6 - 7, etc and is their code that lets me put stats button correctly because when i put mine this happens You seem to have modified the top rated banners at one point, which is probably why What would normally be bronze banners (items rated 8) are coloured silver, items rated 9 are gold, and items rated 10 or 7 are not visible at all. To return it to default, find the top rated section as displayed here and replace it with the original version, also displayed here. To find the section quickly, you can CTRL+F to find and search for "Top Rated". If you wanted the 1-5/etc then it has to be done via adding and changing the actual CSS selectors in the code. Here's an example of that. You can use this code to replace the same section as before or as a modifiation at the bottom of the code. |
| what should i do for the stats button ? ^ |
"Hard work is worthless for those that don’t believe in themselves" - Naruto Uzumaki |
JayDaAnimeLord said: what should i do for the stats button ? ^ Ah, I missed that part of your post somehow. The stats button mod you're using was made for an old version and doesn't work with the new one. You'll need to replace the code with this updated version. |
| thank you , loving the layout |
"Hard work is worthless for those that don’t believe in themselves" - Naruto Uzumaki |
| Hi, great theme! Been fun fiddling around with the code as someone with basic knowledge. --Request I am using the single line titles mod, but was wondering if it would be possible to have it extend to normal height again once hovering over the anime. Example images below (although you probably get what I mean) Lastly, the info background has a very small gap on the left and right edges which lets the cover come through. This goes away when you hover over it (can also be seen in the images). Would it be possible to fix it so that there isn't a gap when not hovering? Thanks! |
undoApr 10, 2021 3:23 PM
aethrl said: Hi, great theme! Been fun fiddling around with the code as someone with basic knowledge. Glad you're having fun! aethrl said: I am using the single line titles mod, but was wondering if it would be possible to have it extend to normal height again once hovering over the anime. Replace the current single line mod with this new one: aethrl said: Lastly, the info background has a very small gap on the left and right edges which lets the cover come through. This goes away when you hover over it (can also be seen in the images). Would it be possible to fix it so that there isn't a gap when not hovering? This is an annoying byproduct of Chromium's rendering engine. It's really bad at calculations and transforms. You might be able to make it look more correct by adding this hacky solution that simply widens the title box by a tiny bit: .list-item:not(:hover) .data.title {
width: calc(100% + 2px);
left: -1px;
} |
Valerio_Lyndon said: aethrl said: Hi, great theme! Been fun fiddling around with the code as someone with basic knowledge. Glad you're having fun! aethrl said: I am using the single line titles mod, but was wondering if it would be possible to have it extend to normal height again once hovering over the anime. Replace the current single line mod with this new one: aethrl said: Lastly, the info background has a very small gap on the left and right edges which lets the cover come through. This goes away when you hover over it (can also be seen in the images). Would it be possible to fix it so that there isn't a gap when not hovering? This is an annoying byproduct of Chromium's rendering engine. It's really bad at calculations and transforms. You might be able to make it look more correct by adding this hacky solution that simply widens the title box by a tiny bit: .list-item:not(:hover) .data.title {
width: calc(100% + 2px);
left: -1px;
}Thank you so much! Works exactly like I hoped it would. |
| Hey again, I've got another request. Would it be possible to have the total times re-watched on the info box on hover? I would assume it's similar to the studio, rating, etc... code, but I wouldn't know how to do it myself. |
aethrl said: Hey again, I've got another request. Would it be possible to have the total times re-watched on the info box on hover? I would assume it's similar to the studio, rating, etc... code, but I wouldn't know how to do it myself. Unfortunately, the only place MAL lists the rewatches are in the "more info" section of each anime/manga. This section requires a click to load the info and doesn't have much that the CSS can hook onto, so it's basically stuck as it is. On this theme, the "Notes" button is what activates the more info section. If you want to reset the more info section so that you can see the rewatch count, you can use this code. |
Valerio_Lyndon said: aethrl said: Hey again, I've got another request. Would it be possible to have the total times re-watched on the info box on hover? I would assume it's similar to the studio, rating, etc... code, but I wouldn't know how to do it myself. Unfortunately, the only place MAL lists the rewatches are in the "more info" section of each anime/manga. This section requires a click to load the info and doesn't have much that the CSS can hook onto, so it's basically stuck as it is. On this theme, the "Notes" button is what activates the more info section. If you want to reset the more info section so that you can see the rewatch count, you can use this code. Thanks! I'll give this a try, but may end up using the tags to write how many times I've re-watched instead. Thanks again, keep up the good work. |
Hiya, it seems something has gone wrong with the "Current amount of episodes out" feature that you helped me with some time ago. I think it might be an issue with MAL-Sync itself but I'm not sure. Normally it shows the amount of episodes currently out and if you hover it says how long is left until the next episode - like the pink entry, but now that feature is missing entirely. Do you know if MAL-Sync would be affecting this? |
The extra "# Released" text can look a little cramped when the title extends above it, but it gives more info than option 2.
xMWJ said: Hiya, it seems something has gone wrong with the "Current amount of episodes out" feature that you helped me with some time ago. I think it might be an issue with MAL-Sync itself but I'm not sure. Normally it shows the amount of episodes currently out and if you hover it says how long is left until the next episode - like the pink entry, but now that feature is missing entirely. Do you know if MAL-Sync would be affecting this? Hmm, it might just be MALSync. I tested it out on my end and it was being rather finnicky. It seemed to work after I turned off and then back on the "Estimate Episode Number" feature in the MAL settings. The styling seems to still work okay, so unless you have a different version of MALSync than I installed off the Chrome store, then I'm thinking it's probably a weird bug on the extension side. Check your list with a blank preset, like here: link. If you still can't see the estimation while viewing your list from an unmodified presets, it's something that needs fixing with MALSync. |
Valerio_LyndonApr 27, 2021 1:21 PM
Valerio_Lyndon said: xMWJ said: Hiya, it seems something has gone wrong with the "Current amount of episodes out" feature that you helped me with some time ago. I think it might be an issue with MAL-Sync itself but I'm not sure. Normally it shows the amount of episodes currently out and if you hover it says how long is left until the next episode - like the pink entry, but now that feature is missing entirely. Do you know if MAL-Sync would be affecting this? Hmm, it might just be MALSync. I tested it out on my end and it was being rather finnicky. It seemed to work after I turned off and then back on the "Estimate Episode Number" feature in the MAL settings. The styling seems to still work okay, so unless you have a different version of MALSync than I installed off the Chrome store, then I'm thinking it's probably a weird bug on the extension side. Check your list with a blank preset, like here: [url=https://myanimelist.net/animelist/xMWJ?preview=7]link/url]. If you still can't see the estimation while viewing your list from an unmodified presets, it's something that needs fixing with MALSync. Thanks for looking into this! It seems to be back to normal for me at the time of posting, but I haven't been checking between when I last commented and now. Will keep an eye on the MALSync side if it happens again. |
| Hi, I'm really enjoying the theme but I've noticied something strange and I'm wordering if there's a fix around it. I renamed my top rated banners and I'm using custom glow for them, but either of them seem to be working when I sort my list by score. Instead I just see the regular ''Top Rated'' banner with no glow.   Thanks in advance :D |
| Hey again :v I have another request Is it possible for "orders" to add the "latest" and "earliest" options ?? Great layout btw👍👍 |
Valerio_Lyndon said: ODeivyd said: Having tags in that visual style is completely possible. Tags will automatically start on a new line when inputting them using commas "," in between them. Then it is a simple matter of adding the dot before each item using CSS. Tanks man! I loved the theme! one question: Is possible put my tags in topics? EX : https://imgur.com/a/JhjdUzz I wasn't 100% sure what you meant when I read your comment so I made some assumptions. If you meant something else, I'd love to know: 1. The exact input you intend to place inside the tag editing box and 2. The visual result you want. Hi, I need your help! So I came here to ask you, how do I fix this? (https://i.imgur.com/xKGOUhT.png) If you want to see "in person" I will leave the tag as it is, just go to: Manga> Completed> Mouse over: "Hitozuma Life" I would like to leave with this design: https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwOvdCd5iCZWgXn5ZWxiKU1g Here is the link to how your code is being used on my list: https://pastebin.com/LgGKJbdw Thanks in advance |
Coricot said: Hi, I'm really enjoying the theme but I've noticied something strange and I'm wordering if there's a fix around it. I renamed my top rated banners and I'm using custom glow for them, but either of them seem to be working when I sort my list by score. Instead I just see the regular ''Top Rated'' banner with no glow. https://i.imgur.com/nrCtzJM.png https://i.imgur.com/x5iE07w.png Thanks in advance :D I believe this is due to the mod you're using. It was made for an older version of the theme that didn't have score banners on the ordered list, and the code reflects this. To fix it, replace your current "Rename Top Rated Banners" code with this modified code. You can find it near the bottom of your CSS. Make sure to overwrite all of the code shown in the reference spoiler, but only that code and no more. |
iiwan said: Hey again :v I have another request Is it possible for "orders" to add the "latest" and "earliest" options ?? Great layout btw👍👍 Adding new functionality, such as sorting orders, is unfortunately out of CSS's capability. You would have to find a userscript¹ with that functionality, although I don't know of any to recommend you off the top of my head. ¹ Userscripts are JavaScript that can be run with a browser extension such as TamperMonkey |
Amethyst_Ero said: Hi, I need your help! So I came here to ask you, how do I fix this? (https://i.imgur.com/xKGOUhT.png) If you want to see "in person" I will leave the tag as it is, just go to: Manga> Completed> Mouse over: "Hitozuma Life" I would like to leave with this design: https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwOvdCd5iCZWgXn5ZWxiKU1g Here is the link to how your code is being used on my list: https://pastebin.com/LgGKJbdw Thanks in advance I'd remove the code from the previous post, it was made specifically for that other person that already had done many changes to their list. Once that's done, you can try out this code for full-width tags. If I am following correctly, it should do what you're asking. Thanks for the thoroughly worded question. |
Valerio_Lyndon said: Amethyst_Ero said: Hi, I need your help! So I came here to ask you, how do I fix this? (https://i.imgur.com/xKGOUhT.png) If you want to see "in person" I will leave the tag as it is, just go to: Manga> Completed> Mouse over: "Hitozuma Life" I would like to leave with this design: https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwOvdCd5iCZWgXn5ZWxiKU1g Here is the link to how your code is being used on my list: https://pastebin.com/LgGKJbdw Thanks in advance I'd remove the code from the previous post, it was made specifically for that other person that already had done many changes to their list. Once that's done, you can try out this code for full-width tags. If I am following correctly, it should do what you're asking. Thanks for the thoroughly worded question. THANK YOOOOOOOOOOOU SO MUCH <3 |
Shroud007 said: Hi! I have two question: 1) is there a way to show the title name only after hovering / show only the cover until the cursor is hovered over ? 2) is it possible to display the score in the upper right corner ? 1) To accomplish this, we can set the opacity to 0 while the item isn't hovered. Add one or all of these codes to the bottom of the CSS. 2) This is possible, but I'm not 100% sure if it will interfere with the "Completed"/"Current"/Etcetera text. Will have to try it out to be sure. I'm also not quite sure about the design you intend. Usually the edit/notes buttons are top right, so the score would have to either overlap them a bit, overlap the tags a bit, or go slightly out of the item's boundaries. If you could expand a bit on what you mean by this, I might be able to get some code written. |
Kuriru-kun said: this customization is good! lit af... but how do you change the background color into just like in the sample? The background colour controls (and other colours) can be found near the top of the code. The colours are HSL colour values, but without their surrounding parentheses. To get the correct values, simply strip away the surrounding parentheses and blurb. For instance, "hsl(244, 42%, 82%)" would simply become "244, 42%, 82%". For help picking an HSL colour you can use a website such as: https://www.w3schools.com/colors/colors_hsl.asp Or you can manually play with the numbers. If you wanted a specific colour, could you point to which one you meant? If you meant something else entirely, I'll need some more details. |
Shroud007 said: Valerio_Lyndon said: 1) To accomplish this, we can set the opacity to 0 while the item isn't hovered. Add one or all of these codes to the bottom of the CSS. 2) This is possible, but I'm not 100% sure if it will interfere with the "Completed"/"Current"/Etcetera text. Will have to try it out to be sure. I'm also not quite sure about the design you intend. Usually the edit/notes buttons are top right, so the score would have to either overlap them a bit, overlap the tags a bit, or go slightly out of the item's boundaries. If you could expand a bit on what you mean by this, I might be able to get some code written. Thanks a lot ! 2) Okay, by that I mean, is it possible that the score to be displayed only as a number in the lower right corner with no status (current, completed, etc) when mouse isn't hovered Something like this? |
Kuriru-kun said: thanks for the help in my background color the other day... Can I ask another thing? Its about my selection of animes its slightly darker tho... How can I change its brightness? Changing the "imageBrightness" variable near the top of the CSS should do what you want. For full brightness, set it to 100%. |
| Hi, it's me again. So I would like to know. How to change this: https://i.imgur.com/8lRT2Mf.png To this: https://i.imgur.com/NmSnZpS.png Because it bothers my eyes and it gets blurry to see properly. |
Amethyst_Ero said: Hi, it's me again. So I would like to know. How to change this: https://i.imgur.com/8lRT2Mf.png To this: https://i.imgur.com/NmSnZpS.png Because it bothers my eyes and it gets blurry to see properly. add this code to to the bottom of your list:
/*Quick search dark mode fix*/
body[data-owner="1"] #fancybox-frame { filter: none; }
|
   StoryGraph x Spotify x Instagram “Whether we die or not isn't really that big a deal." — Suzuya Juuzou |
ChipChippy said: I love the layout, had clarity before this, but wanted one with big covers and i find out you made this. Never used any other layouts. I modiefied it quite a bit, but don't have much CSS knowledge so I'm unsure how it all works together so I have one question, is it possible to create Top Rated banners but they only show up when a specific tag is added? It probably is but i can't figure it out. If you can help that would be lovely Did you mean something like this?  It is possibe, but does require some modifications of how the tags work. This means that the scrollbar on tags no longer works, so some vertical overflow may occur when you are using a lot of tags. It also removes the little tag icon next to the tag. This first code affects only the B-Tier tag. It can easily be applied to other tags by changing the selectors if you know how to do that. The second spoiler shows an example of that. Use only one of these. |
More topics from this board
» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )Shishio-kun - Apr 15, 2010 |
7920 |
by Shishio-kun
»»
12 hours ago |
|
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
381 |
by KabukiChouNights
»»
Sep 13, 10:56 AM |
|
» theme helpthreat - Jul 5 |
5 |
by Zaryf
»»
Aug 21, 5:46 AM |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1261 |
by KiranaStarr
»»
Aug 16, 5:48 PM |
|
» [CSS] ⭐️ Customize your List Cursor + Cursor FixesShishio-kun - Mar 8, 2021 |
30 |
by Shishio-kun
»»
Jul 28, 3:17 AM |