Add to the bottom of your CSS. /* ============================
Always Visible Status Colour */
.data.status { opacity: 1; }Add to the bottom of your CSS. Choose either one: |
xMWJ said: Is it possible to adjust the position of the "+" episode button? I'm using MAL-Sync to get the current number of aired episodes, but it overlaps the "+" button in your theme(still works) so I would like to just place the button above that text. Add one of these (not both) to the bottom of your CSS: |
The extra "# Released" text can look a little cramped when the title extends above it, but it gives more info than option 2.
Valerio_Lyndon said: xMWJ said: Is it possible to adjust the position of the "+" episode button? I'm using MAL-Sync to get the current number of aired episodes, but it overlaps the "+" button in your theme(still works) so I would like to just place the button above that text. Add one of these (not both) to the bottom of your CSS: Perfect, just what I was after! |
EdgyWeebLord said: Thanks for the design, I love it. Recently I noticed that the image covers have become blurred (see my list for example), and I suspect that's because the scraper is returning a low res image. Example: This: https://cdn.myanimelist.net/r/96x136/images/anime/8/65409.webp?s=dd8284178df39f0bb5627b6ea2aa2f03 Instead of this: https://cdn.myanimelist.net/images/anime/8/65409.jpg Is there a way to change this? Thanks in advance! Unfortunately there seem to be have been issues with the cover generator we've been using as of late. I think a lot of it is the MAL developers changing how things work, which break the app. Right now though, it looks like it's down entirely, which will definitely break some things. When I visit their website, it isn't in operation. I am unsure when/if this will be rectified as the generator is maintained by an anonymous user we have no contact with. The only solution right now would be to use my alternative cover lists which are provided under "All Cover Images Are Blurry" in the main FAQ for this theme, or in my cover image blog post. Edit: It seems to be back up now, should hopefully be fixed. |
Valerio_LyndonOct 3, 2020 5:59 PM
J_acob said: Thanks for the template! Although I seem to be having a little trouble altering the script. After altering the "Hide Hentai Covers" Mod I managed to get it to say what I wanted. By no means have I got any experience with scripting so if there's an explanation for what I'm about to ask please try to keep it as simple as possible, thanks! I was wondering if I'm able to alter to script to allow this Mod to work on more than one tag at once. For example, instead of the script only placing a warning on anime with the Hentai tag, it would also place a warning on anime with a Music tag (music generally clogs my list so I want to make it easily skippable using a warning). There are a couple of ways to do this, but the easiest would be to paste in a second version of the Hentai Covers mod and then replace all the references relating to the "Hentai" tag to whatever new tag you wanted. Here's a version with some unnecessary stuff trimmed out for you to copy-paste for each new tag. Once pasted, you just need to find and replace the references to "Hentai". You can also change the "Explicit Content" to anything else, which will modify the subtitle. Here's an image of where each of those is in the code. There's 5 total places you'll need to modify the tag, and one subtitle. |
Jasion18 said: Hi, the layout is awesome! However, when I switch lists from the anime list to the manga list or vice-versa; the covers become blurry (when I access each one manually, that is, directly from my profile; this doesn't happen. Do you know if there's anything I can do to solve this situation? Hm, that is odd! I'd find this line near the top of the CSS: @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelink"; And replacing it with these two lines: @\import "https://malscraper.azurewebsites.net/covers/anime/Jasion18/presets/dataimagelink"; @\import "https://malscraper.azurewebsites.net/covers/manga/Jasion18/presets/dataimagelink"; See if that helps. If it doesn't, then I think the only way to fix it would be the "Solution for any other problem." under "All cover images are blurry?" in the FAQ, but that comes with a few other downsides so I am not sure it's worth it for this. |
Vaanaattori said: Just wondering is there a way to customize "top rated" to have different title for gold and silver separately? Add this to the bottom of your CSS: /*------------------------------*\
|* Rename Top Rated Banners *|
\* - - - - - - - - - - - - - - -*/
/* Change labels here - do not remove the surrounding double quotes "" */
body:not([data-query*="order\":4"]) .data .score-10::after {
/* Rated 10 */
content: "MASTERPIECE";
}
body:not([data-query*="order\":4"]) .data .score-9::after {
/* Rated 9 */
content: "EXCELLENT";
}
/* some minor restyling */
body:not([data-query*="order\":4"]) .data .score-label::after {
left: 93px;
width: auto;
padding: 0 8px;
transform: translateX(-50%);
} |
| Hi Valerio! This is an awesome layout and I keep coming back to it, even after trying out new ones. I think I already asked this but I can't find it anywhere, so sorry if it's a double question. I'd like to know if it's possible to shorten the titles through the ellipsis css, meaning they fade out after one line? The asymmetry of the boxes is making my OCD restless. :( I'd really appreciate any help. Thank you! |
 |
slayra said: Hi Valerio! This is an awesome layout and I keep coming back to it, even after trying out new ones. I think I already asked this but I can't find it anywhere, so sorry if it's a double question. I'd like to know if it's possible to shorten the titles through the ellipsis css, meaning they fade out after one line? The asymmetry of the boxes is making my OCD restless. :( I'd really appreciate any help. Thank you! Glad you're enjoying it. :) That's definitely doable. Make sure to add new code to the bottom of your CSS. Here's the code for single line titles. Or, as an alternative option, fixed height titles. |
Valerio_Lyndon said: slayra said: Hi Valerio! This is an awesome layout and I keep coming back to it, even after trying out new ones. I think I already asked this but I can't find it anywhere, so sorry if it's a double question. I'd like to know if it's possible to shorten the titles through the ellipsis css, meaning they fade out after one line? The asymmetry of the boxes is making my OCD restless. :( I'd really appreciate any help. Thank you! Glad you're enjoying it. :) That's definitely doable. Make sure to add new code to the bottom of your CSS. Here's the code for single line titles. Or, as an alternative option, fixed height titles. Valerio_Lyndon said: slayra said: Hi Valerio! This is an awesome layout and I keep coming back to it, even after trying out new ones. I think I already asked this but I can't find it anywhere, so sorry if it's a double question. I'd like to know if it's possible to shorten the titles through the ellipsis css, meaning they fade out after one line? The asymmetry of the boxes is making my OCD restless. :( I'd really appreciate any help. Thank you! Glad you're enjoying it. :) That's definitely doable. Make sure to add new code to the bottom of your CSS. Here's the code for single line titles. Or, as an alternative option, fixed height titles. Oh thank you so much! This is amazing! <3 |
|
| If I were to try to get that sidebar from this theme into another theme, what part of the CSS would I need to copy over? |
NinjaAizakku said: If I were to try to get that sidebar from this theme into another theme, what part of the CSS would I need to copy over? That's a bit of a tricky question. There's a section in this theme's uncompressed code that is listed as "USER MENU", which contains most of the styling for the sidebar. But, when copying across themes, often times you have to delete lines from the other theme and tweak some other parts of the code to get it looking right. And sometimes there are compromises that have to be made where something just doesn't fit with the other theme. That in mind, what theme are you trying to copy the sidebar into? |
Valerio_LyndonNov 22, 2020 11:06 PM
QuackAttack said: I was fiddling around with the color values for the "top rated banners" and I was wondering if it was possible to create a third BRONZE rating for anime rated 8/10... Here are the values for the banners now just for reference: --goldRating: 38, 40%, 57%;); --silverRating: 196, 6%, 66%;} Moving your question here. The easiest way would be to add this to the very bottom of your CSS. It will add banners for bronze entries. |
Valerio_Lyndon said: NinjaAizakku said: If I were to try to get that sidebar from this theme into another theme, what part of the CSS would I need to copy over? That's a bit of a tricky question. There's a section in this theme's uncompressed code that is listed as "USER MENU", which contains most of the styling for the sidebar. But, when copying across themes, often times you have to delete lines from the other theme and tweak some other parts of the code to get it looking right. And sometimes there are compromises that have to be made where something just doesn't fit with the other theme. That in mind, what theme are you trying to copy the sidebar into? I'm trying to copy the sidebar into my list which is a slightly modified (colours and wallpaper) version of this theme: https://myanimelist.net/forum/?topicid=1501171 https://controlc.com/b9fafdda |
NinjaAizakku said: Valerio_Lyndon said: That's a bit of a tricky question. There's a section in this theme's uncompressed code that is listed as "USER MENU", which contains most of the styling for the sidebar. But, when copying across themes, often times you have to delete lines from the other theme and tweak some other parts of the code to get it looking right. And sometimes there are compromises that have to be made where something just doesn't fit with the other theme. That in mind, what theme are you trying to copy the sidebar into? I'm trying to copy the sidebar into my list which is a slightly modified (colours and wallpaper) version of this theme: https://myanimelist.net/forum/?topicid=1501171 https://controlc.com/b9fafdda Thanks, that makes it easy. Here's the code for the sidebar, add it to the bottom of your current CSS. This should work without issue, but if it doesn't just let me know. |
Valerio_Lyndon said: NinjaAizakku said: I'm trying to copy the sidebar into my list which is a slightly modified (colours and wallpaper) version of this theme: https://myanimelist.net/forum/?topicid=1501171 https://controlc.com/b9fafdda Thanks, that makes it easy. Here's the code for the sidebar, add it to the bottom of your current CSS. This should work without issue, but if it doesn't just let me know. Thank you so much! It works perfectly! Now my list looks so much better! |
| When I sort my list on Score(descending) all the ''Top Rated'' tags disappear, but when it's sorted on Score(ascending) or not sorted at all they are fine. Got any idea how to fix this? |
JustJasper said: When I sort my list on Score(descending) all the ''Top Rated'' tags disappear, but when it's sorted on Score(ascending) or not sorted at all they are fine. Got any idea how to fix this? Thanks for pointing this out. The scores not displaying while sorted by score was an intentional decision, although I am unsure about it now that I am revisiting. I might remove that in future versions. The inconsistency between ascending/descending was unintended. I see you're using the uncompressed version of the theme, so to change this behaviour I recommend going into the CSS and modifying the original code. Specifically, go to line ~1597. Here, you can do one of two things: To make the banners display while sorted, remove all instances of the highlighted phrase. Or, to make the banners not display while sorted by ascending score, replace all instances of the highlighted phrase: With this new phrase: I know this explanation is a bit more technical than most that I give, but it will make the code easier to maintain later. |
Valerio_Lyndon said: JustJasper said: When I sort my list on Score(descending) all the ''Top Rated'' tags disappear, but when it's sorted on Score(ascending) or not sorted at all they are fine. Got any idea how to fix this? Thanks for pointing this out. The scores not displaying while sorted by score was an intentional decision, although I am unsure about it now that I am revisiting. I might remove that in future versions. The inconsistency between ascending/descending was unintended. I see you're using the uncompressed version of the theme, so to change this behaviour I recommend going into the CSS and modifying the original code. Specifically, go to line ~1597. Here, you can do one of two things: To make the banners display while sorted, remove all instances of the highlighted phrase. Or, to make the banners not display while sorted by ascending score, replace all instances of the highlighted phrase: With this new phrase: I know this explanation is a bit more technical than most that I give, but it will make the code easier to maintain later. Thanks a lot! It works now. |
| Hi, Merry Christmas He asks you are there any way to put the grades with decimal? Example: 8.5, 9.5 |
| Responded to the above comment by Ender in profile comments as that was where it was originally asked. I am not going to bother pasting it here as the code will probably not work for anyone else, since it's so specific to their list with all the modifications it has. |
| Responding to a query from the How to Fix Broken Layouts thread. Milength said: Hey, my top rated banners are glitched in my Currently Watching section, any ideas on how to fix it? I take it you're referring to the floating banner off to the side? This was a bug with the initial implementation of the banners, and has since been fixed in later versions. To apply this patch to your older version, add this to the bottom of the CSS: |
Valerio_Lyndon said: Responding to a query from the How to Fix Broken Layouts thread. Milength said: Hey, my top rated banners are glitched in my Currently Watching section, any ideas on how to fix it? I take it you're referring to the floating banner off to the side? This was a bug with the initial implementation of the banners, and has since been fixed in later versions. To apply this patch to your older version, add this to the bottom of the CSS: Yes, that was the problem. The fix worked, thanks. |
DaViZZ said: Can someone explain me how to put banner on top of animes like in the picture, I have been trying out stuff a lot but I still haven't found out how to do it. Banners as in the "Top Rated" banner on top (left image), or the censored banner in the middle (right image)?   If you're referring to the "Top Rated" banner, it is automatically applied to anything you score 9 or 10. If you wanted manual control over this though, it might be possible, but I'll have to write some new code for it. If you're referring to the censored banner, you have to install the "Hide Hentai Covers" mod from the main forum post and then add the tag "Hentai" to any item on your list. If you're referring to something else, I'll need some more explanation or an image. |
ZekkenFuwa said: Awesome theme as always, is there a way to disable the tags system and make it look like it's a mini review each time a mouse hovers over an anime? Would love to bring back the deleted comma, instead of going to the next line. The tag logo should also disappear. Is there a way to do that? https://i.imgur.com/JAzAv38.png Give this a go, it should do as requested. Add to the bottom of your code. If you want to change the text alignment from left to right, then you can change it right near the top of this snippet. Just find the "text-align: left;" and change it to see the "text-align: right;". |
Valerio_Lyndon said: ZekkenFuwa said: Awesome theme as always, is there a way to disable the tags system and make it look like it's a mini review each time a mouse hovers over an anime? Would love to bring back the deleted comma, instead of going to the next line. The tag logo should also disappear. Is there a way to do that? https://i.imgur.com/JAzAv38.png Give this a go, it should do as requested. Add to the bottom of your code. If you want to change the text alignment from left to right, then you can change it right near the top of this snippet. Just find the "text-align: left;" and change it to see the "text-align: right;". Thank you so much!! |
| Is there a way of limiting the number of columns at all? It would do wonders for some backgounds if possible. |
 |
Leonnaki said: Try this, it should work. Add to the bottom of your CSS. I set the columns to 5 here (down from a max of 8), but you can change them by following the directions seen in this code.Is there a way of limiting the number of columns at all? It would do wonders for some backgounds if possible. /*------------------------------*\
|* 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 );
} |
Valerio_Lyndon said: Leonnaki said: Try this, it should work. Add to the bottom of your CSS. I set the columns to 5 here (down from a max of 8), but you can change them by following the directions seen in this code.Is there a way of limiting the number of columns at all? It would do wonders for some backgounds if possible. /*------------------------------*\
|* 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 );
}Amazing, it works perfectly! Thank you so much <3 |
|
lil_glizzy22 said: Hii, Is there any way for the banner to stay in place and then the list going over it? Try this out. Add to the bottom of your CSS. This should hopefully do what you wanted. Note for other people: This is made for Glizzy's list and will need some further editing to work on default Brink. |
| Hello, I love this style and think it's the best one I've found so far. But i do have a small problem that bugs me, the icon in the search bar is replaced with the letters "fl". Is there anyway I can fix this? |
Lennyzard said: Hello, I love this style and think it's the best one I've found so far. But i do have a small problem that bugs me, the icon in the search bar is replaced with the letters "fl". Is there anyway I can fix this? Hm, the icon uses a font that MAL loads by default and appears fine when I view your list. Seems like the font file isn't loading right for you when you visit the page or it is trying to use the wrong font. Out of curiosity, do the Filter and Order icons look fine? They use the same font, so should be affected in the same way.  If you can see the other icons fine, you can try adding this to the bottom of your code: /* Search Icon Fix 1 */
#status-menu .search-container #search-box::after {
font-family: FontAwesome;
}For a fix that should definitely rectify this, you can use this. I don't know why this would need to be applied if the other icons look fine, but if it solves your issue I ain't gonna complain. The only problem with this fix is that it will be much harder to apply custom colours to the icon later on (it won't be affected by the variables and will have to be manually modified). /* Search Icon Fix 2 */
#status-menu .search-container #search-box::after {
content: "";
height: 100%;
background: url(https://i.imgur.com/sNiU4Q3.png) 5px 9px / auto no-repeat;
}If the other icons are broken too, then the issue may go deeper and we could either try and find the root cause or just apply similar fixes to the rest of the icons. |
| Hey, this is really the Layout I've ever seen on this site. I'm serious. I love the simple but impactful design so much!!! I just have 2 questions. Is it possible to change the status color depending on how you rated the Anime, like how its possible with the score? Here an example (photoshopped): Is it possible to group the Anime in "ALL" depending on their status (Current, Completed, Paused...) Here is an example (photoshopped): |
Valerio_Lyndon said: Lennyzard said: Hello, I love this style and think it's the best one I've found so far. But i do have a small problem that bugs me, the icon in the search bar is replaced with the letters "fl". Is there anyway I can fix this? Hm, the icon uses a font that MAL loads by default and appears fine when I view your list. Seems like the font file isn't loading right for you when you visit the page or it is trying to use the wrong font. Out of curiosity, do the Filter and Order icons look fine? They use the same font, so should be affected in the same way. If you can see the other icons fine, you can try adding this to the bottom of your code: /* Search Icon Fix 1 */
#status-menu .search-container #search-box::after {
font-family: FontAwesome;
}For a fix that should definitely rectify this, you can use this. I don't know why this would need to be applied if the other icons look fine, but if it solves your issue I ain't gonna complain. The only problem with this fix is that it will be much harder to apply custom colours to the icon later on (it won't be affected by the variables and will have to be manually modified). /* Search Icon Fix 2 */
#status-menu .search-container #search-box::after {
content: "";
height: 100%;
background: url(https://i.imgur.com/sNiU4Q3.png) 5px 9px / auto no-repeat;
}If the other icons are broken too, then the issue may go deeper and we could either try and find the root cause or just apply similar fixes to the rest of the icons. Thanks a lot, that helped fix the issue. Love your work, keep it up and have a good day. |
ByeByeBoy said: Hey, this is really the Layout I've ever seen on this site. I'm serious. I love the simple but impactful design so much!!! I just have 2 questions. Is it possible to change the status color depending on how you rated the Anime, like how its possible with the score? Here an example (photoshopped): Is it possible to group the Anime in "ALL" depending on their status (Current, Completed, Paused...) Here is an example (photoshopped): Thanks for the detailed examples. This should do it. I'm pretty sure it will work without issue, just add to the bottom of the code. |
| Wow, thank you so much!! Is my second example not doable? If not its not a problem :3 |
ByeByeBoy said: Wow, thank you so much!! Is my second example not doable? If not its not a problem :3 Ah, I totally forgot to write that part of my response. Unfortunately it's not, but I wish it was! |
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. 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. 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. Thanks in advance for your answers |
KuroijiFeb 23, 2021 2:13 PM
   |
More topics from this board
» [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 |
|
» How To Have Different Banner/Cover image & Background Image For Manga & Anime ListsYasminaRegina - Jul 25 |
2 |
by YasminaRegina
»»
Jul 26, 1:02 AM |