| God bless you this is the kind of background I was looking for |
 |
| @Valerio_Lyndon Hi :)! I must say that theme is awesome, beautiful and total custom to my own taste, so thanks for all. I was wondering if is possible changer color of anime title in the list? How? |
  What do I like? Well, myself, of course! I'm the flower of Olympia, after all! |
@FaustoW Add this code to the bottom of your CSS. You can then tweak the two colour values to anything you want./* Titles */
.list-table .list-table-data .title .link:hover {
color: #ffffff !important;
}
/* Titles on Hover */
.list-table .list-table-data .title .link:hover {
color: #aaaaff !important;
}For help with colours: [Colour Picker] For help with modifying code, check out Shishio's videos here in the club. |
| @Valerio_Lyndon Thanks, works perfectly :)! |
What do I like? Well, myself, of course! I'm the flower of Olympia, after all! |
| @Valerio_Lyndon Hi there. I'm a bit captivated with this design and I'm interested in trying it out by direct installation. Would you mind sharing the source code via other methods? It's that the one linked in the first few steps it's a mess and kinda want to avoid having to edit it all by hand haha ^^; (for example, the one linked is all in the same line which is hard for doing personal tweaks). (Same for dark mode) Thanks for sharing that design. |
SheyCroixMay 30, 2019 9:32 AM
| @SheyCroix Glad you like it. :) You can find readable versions [here]. |
| Hello, I tried adding a custom banner to the design, but the one already in there overrides it, any help? ^^; |
| @Yuki-Chan276 I see you've fixed it by using the multi-banner code, that's good. It was code priority that was the issue. You have the dark mode CSS below all your other code, so it's overwrites will take precedence over everything else. You can find a guide to what order everything is intended to be placed in the Help section of the original post, under "The layout is broken". This could be fixed by placing the dark mode further up in the code (directly after the main theme code) or changing the priority of the code using various work-arounds (this would be easier for this one issue). For instance, if you were to change ":root" to "body", then your custom banner would have higher priority and therefore take precedence over the dark mode banner (this goes for all code that starts with ":root"). You could also use "html body" if that was still not enough. Another option would be to add an "important" statement directly before the semi-colon. Here's an example that uses both of those fixes (but you would probably only need one): html body { --banner: url(http://i.imgur.com/c1UTBP3.jpg) !important; } |
Valerio_LyndonJun 2, 2019 3:37 PM
| @SheyCroix Sorry for any confusion caused, I should have just linked directly to the theme. There are two versions for each piece of CSS in that version I linked, "compressed" and normal. So, "theme" is non-compressed, multi-line, where-as "compressed" is one line. Direct link to the non-compressed here: [Link] |
Valerio_Lyndon said: @Yuki-Chan276 I see you've fixed it by using the multi-banner code, that's good. It was code priority that was the issue. You have the dark mode CSS below all your other code, so it's overwrites will take precedence over everything else. You can find a guide to what order everything is intended to be placed in the Help section of the original post, under "The layout is broken". This could be fixed by placing the dark mode further up in the code (directly after the main theme code) or changing the priority of the code using various work-arounds (this would be easier for this one issue). For instance, if you were to change ":root" to "body", then your custom banner would have higher priority and therefore take precedence over the dark mode banner (this goes for all code that starts with ":root"). You could also use "html body" if that was still not enough. Another option would be to add an "important" statement directly before the semi-colon. Here's an example that uses both of those fixes (but you would probably only need one): html body { --banner: url(http://i.imgur.com/c1UTBP3.jpg) !important; } Ohh, thank you for explaining it. I'll let it be like this, but thanks for the great insight~ Edit: Is there a way to remove the blue checkmarks on the completed list? (or otherwise colour them grey?) So, I edited the code to the readable one, a few messages up in this thread, and now I can't get rid of the character render on the top... ^^; Added the character removal line, didn't work. Added !important to the line as well, still didn't work... |
Yuki-Jun 3, 2019 2:39 AM
Valerio_Lyndon said: @SheyCroix Sorry for any confusion caused, I should have just linked directly to the theme. There are two versions for each piece of CSS in that version I linked, "compressed" and normal. So, "theme" is non-compressed, multi-line, where-as "compressed" is one line. Direct link to the non-compressed here: [Link] Don't apologize. It was my fault for not checking the rest. BUT! many thanks for the explanation and linking to that one. Will use it to rewrite everything so it's more easy to read later on. Many thanks for it, the theme and the help! Really digging out this one haha. Keep up the good word out there! |
@Yuki-Chan276 The checkmark colour can be changed by modifying the "--checkmark" value. For example:body { --checkmark: #888; }Or it can be removed by using this code: .data.progress span:only-of-type:after, .data.chapter span:only-of-type:after, .data.volume span:only-of-type:after {
content: none;
}Hmm, it definitely should work, as long as it's placed below the primary code and dark mode. It definitely definitely should work with an !important mark. Could be that some CSS got broken somewhere, maybe a missing curly brace. Another possibility is you might have hit the character limit for custom CSS (it does exist, surprisingly), although I hope that isn't it. I'd have to see the code that was causing the issue to be sure. |
Valerio_Lyndon said: @Yuki-Chan276 The checkmark colour can be changed by modifying the "--checkmark" value. For example: body { --checkmark: #888; }Or it can be removed by using this code: .data.progress span:only-of-type:after, .data.chapter span:only-of-type:after, .data.volume span:only-of-type:after {
content: none;
}Hmm, it definitely should work, as long as it's placed below the primary code and dark mode. It definitely definitely should work with an !important mark. Could be that some CSS got broken somewhere, maybe a missing curly brace. Another possibility is you might have hit the character limit for custom CSS (it does exist, surprisingly), although I hope that isn't it. I'd have to see the code that was causing the issue to be sure. As evidenced by @SheyCroix I had lots of double code ^^; She went over it and it's fixed now. I'll try removing the checkmark. Thanks a lot. Edit: Didn't seem to work ^^; |
Yuki-Jun 4, 2019 11:16 AM
| hi, i love this style, i think i put all the css code well, but no one but me can see it. i mean, i click on my list and see this style with no problem but no one else can. Do you know what the problem is? |
 |
davidgvidal said: Oh! Sorry for the trouble there, looks like some formatting got buggered on the main forum post. It's a glitch with MAL, but one I'd managed to avoid up to this point. :/ hi, i love this style, i think i put all the css code well, but no one but me can see it. i mean, i click on my list and see this style with no problem but no one else can. Do you know what the problem is? Anyhow, replace your four "@import" lines with these corrected ones (the only difference is these have backslashes at the start): @\import "https://valeriolyndon.github.io/MAL-Public-List-Designs/Clarity%20Theme/Theme%20-%20Compressed.css"; @\import "https://valeriolyndon.github.io/MAL-Public-List-Designs/Clarity%20Theme/Mod%20-%20Dark%20Mode%20Compressed.css"; @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkbefore"; @\import "https://valeriolyndon.github.io/MAL-Public-List-Designs/Clarity%20Theme/Mod%20-%20Hover%20Image%20Compressed.css"; |
Valerio_Lyndon said: davidgvidal said: Oh! Sorry for the trouble there, looks like some formatting got buggered on the main forum post. It's a glitch with MAL, but one I'd managed to avoid up to this point. :/ hi, i love this style, i think i put all the css code well, but no one but me can see it. i mean, i click on my list and see this style with no problem but no one else can. Do you know what the problem is? Anyhow, replace your four "@import" lines with these corrected ones (the only difference is these have backslashes at the start): @\import "https://valeriolyndon.github.io/MAL-Public-List-Designs/Clarity%20Theme/Theme%20-%20Compressed.css"; @\import "https://valeriolyndon.github.io/MAL-Public-List-Designs/Clarity%20Theme/Mod%20-%20Dark%20Mode%20Compressed.css"; @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkbefore"; @\import "https://valeriolyndon.github.io/MAL-Public-List-Designs/Clarity%20Theme/Mod%20-%20Hover%20Image%20Compressed.css"; Thank you for the help, just checked and it worked fine! |
|
Yuki-Chan276 said: I'd have to see the CSS to know what the issue is. :) Make sure to place any new code at the bottom, too.Edit: Didn't seem to work ^^; |
Valerio_Lyndon said: Yuki-Chan276 said: I'd have to see the CSS to know what the issue is. :) Make sure to place any new code at the bottom, too.Edit: Didn't seem to work ^^; Here it is |
@Yuki-Chan276 Ah, alright, it was a missing closing mark in the code as I thought. But, a quote mark rather than a bracket. The offending area is at the bottom of the code, seen here:#copyright:after{
content:"\a List Design Created by Valerio Lyndon.; }
:root .data.progress span:only-of-type:after, .data.chapter span:only-of-type:after, .data.volume span:only-of-type:after {
content: none; !important
}#copyright:after{
content:"\a List Design Created by Valerio Lyndon.";}
:root .data.progress span:only-of-type:after, .data.chapter span:only-of-type:after, .data.volume span:only-of-type:after {
content: none !important;
} |
Valerio_Lyndon said: @Yuki-Chan276 Ah, alright, it was a missing closing mark in the code as I thought. But, a quote mark rather than a bracket. The offending area is at the bottom of the code, seen here: #copyright:after{
content:"\a List Design Created by Valerio Lyndon.; }
:root .data.progress span:only-of-type:after, .data.chapter span:only-of-type:after, .data.volume span:only-of-type:after {
content: none; !important
}#copyright:after{
content:"\a List Design Created by Valerio Lyndon.";}
:root .data.progress span:only-of-type:after, .data.chapter span:only-of-type:after, .data.volume span:only-of-type:after {
content: none !important;
}Thank you so much for everything~ This is everything that I wanted ^^ |
| Hey, I have problems with category headers. I want to use basic style but neither basic or rounded works. Not even after some time. Anyway, nice work! It's my new favorite list design ^^ Thank you so much for help! <3 |
LeeKaoriJun 8, 2019 1:57 AM
LeeKaori said: Oh, I'm sorry about that! Fixed up the issue, thanks for pointing it out. I see you're using the basic version; Delete the category header import line at the top of your code and replace it with this fixed version:Hey, I have problems with category headers. I want to use basic style but neither basic or rounded works. Not even after some time. Anyway, nice work! It's my new favorite list design ^^ @\import "https://malcat-gen.appspot.com/headers?template=[data-query*='status\":7'] .list-item:nth-child($index){margin-top:48px;}[data-query*='status\":7'] .list-item:nth-child($index):before{content:'$content'}"; |
| Hi, I was trying to make a background image depending on the active page, but it doesn't seem to fill the entire page with the image. Honestly, I didn't understand what OP meant with "You still need to install one of the code blocks from the "Adding a background image" section for this code to work." BTW: Those backgrounds are just for testing. Here is the code: |
DooMWhiteJun 9, 2019 7:19 PM
 In most cases, the MAL Average Scores don't mean anything, here is a question: were the works made before 2000 all shit? Why are they so damn scarce in the Top 50? Think about how MAL is quite literally a filtered amount of the Anime fanbase. Here's a timeline of the Top 15 in which you can check that, almost always, the scores are affected by the freshness, popularity and other factors that have nothing to do with quality. |
DooMWhite said: Sorry for the confusion, that part of the post is a tad confusing. I'm working on a slight rewrite of the forum post to hopefully address some problems such as this. You'll need to add a piece of code from the "Adding a background image" section. There are two code snippets there to choose from that I will also place here to save time. The raw image:Hi, I was trying to make a background image depending on the active page, but it doesn't seem to fill the entire page with the image. Honestly, I didn't understand what OP meant with "You still need to install one of the code blocks from the "Adding a background image" section for this code to work." body {
background-image: var(--background) !important;
}body {
background-image:
linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
var(--background) !important;
}You can pick either version and add it to the bottom of your CSS, it should enable the background image. On the tint, you can play around with the two "background: rgba(0,0,0,0.5);" for a different colour or transparency. The "0.5" at the end of each is the transparency, while the first 3 are generic RGB colour values. See any RGB colour picker for reference. Hopefully this helps. |
Valerio_Lyndon said: DooMWhite said: Sorry for the confusion, that part of the post is a tad confusing. I'm working on a slight rewrite of the forum post to hopefully address some problems such as this. You'll need to add a piece of code from the "Adding a background image" section. There are two code snippets there to choose from that I will also place here to save time. The raw image:Hi, I was trying to make a background image depending on the active page, but it doesn't seem to fill the entire page with the image. Honestly, I didn't understand what OP meant with "You still need to install one of the code blocks from the "Adding a background image" section for this code to work." body {
background-image: var(--background) !important;
}body {
background-image:
linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
var(--background) !important;
}You can pick either version and add it to the bottom of your CSS, it should enable the background image. On the tint, you can play around with the two "background: rgba(0,0,0,0.5);" for a different colour or transparency. The "0.5" at the end of each is the transparency, while the first 3 are generic RGB colour values. See any RGB colour picker for reference. Hopefully this helps. Thanks, mate. Yeah, but that part I almost had gotten it if I had removed the --background: url(URLHERE); honestly. BTW: Is there any way to change the font color or that kind of stuff? I can't read the letters when I use the search method. |
DooMWhiteJun 10, 2019 12:10 PM
In most cases, the MAL Average Scores don't mean anything, here is a question: were the works made before 2000 all shit? Why are they so damn scarce in the Top 50? Think about how MAL is quite literally a filtered amount of the Anime fanbase. Here's a timeline of the Top 15 in which you can check that, almost always, the scores are affected by the freshness, popularity and other factors that have nothing to do with quality. |
DooMWhite said: Ah, that's a bug with the theme. Not sure how I missed that one! I just pushed an update to fix it, next time you go to your list it should be a readable colour. :)BTW: Is there any way to change the font color or that kind of stuff? I can't read the letters when I use the search method. |
Valerio_Lyndon said: DooMWhite said: Ah, that's a bug with the theme. Not sure how I missed that one! I just pushed an update to fix it, next time you go to your list it should be a readable colour. :)BTW: Is there any way to change the font color or that kind of stuff? I can't read the letters when I use the search method. Well, ty for your attention. |
In most cases, the MAL Average Scores don't mean anything, here is a question: were the works made before 2000 all shit? Why are they so damn scarce in the Top 50? Think about how MAL is quite literally a filtered amount of the Anime fanbase. Here's a timeline of the Top 15 in which you can check that, almost always, the scores are affected by the freshness, popularity and other factors that have nothing to do with quality. |
| Thanks for such amazing layout! |
Fr0stFlame said: I'd recommend searching up the "transparent_background" tag on Danbooru: [Link] (NSFM, includes a lot of lewd images). You can also combine this with a character or any of Danbooru's other tags, for instance "rem_(re:zero)", to fine-tune your results. To filter out some (but probably not all) of the lewder results, you can add "rating:safe" to your search. Keep in mind you can only search two tags at a time though. If you wanted to get around that limit you could try using a different "booru" website that does not have the two tag limitation, although these sites have a smaller database than Danbooru. For instance, Yande.re: [Link] (also NSFM). For help with searching on booru websites: [Link].Do you have any recommendation as to a specific site to find character images on without a backdrop?? You can also search "anime render" or something like "rem rezero render" on Google or DeviantArt, which will turn up some decent results too. Keep in mind, these results are more likely to have watermarks placed on them that will need removing using an image editing program. |
| The album in the OP is real good and has a lot of views. I was able to use the screenshots from it in a video to demonstrate design :D |
Shishio-kun said: Glad it was of help :D Didn't even realize I could see the views on the albums haha.The album in the OP is real good and has a lot of views. I was able to use the screenshots from it in a video to demonstrate design :D |
| Hiho, Great job @Valerio_Lyndon I have a question, if u could tell me how to move status bar with all the options further down? I just want to make more space for the banner image, so all the waifus can be seen clearly. :P |
Raideroz-nimJun 19, 2019 7:17 PM
 |
Raideroz said: Add this to the bottom of your CSS. Then just modify the top-most number as you wish. The default is 318px. Make sure not to delete the "px" at the end, it is required.Hiho, Great job @Valerio_Lyndon. I have a question, if u could tell me how to move status bar with all the options further down? I just want to make more space for the banner image, so all the waifus can be seen clearly. :P /* ====================
Change Banner Height */
:root { --banner-height: 318px; }
.cover-block { height: var(--banner-height); }
.header { margin-top: calc(var(--banner-height) - 36px); }
.list-stats { top: calc(var(--banner-height) + 98px); }I like the images you've chosen, by the way. :3 |
Valerio_Lyndon said: Raideroz said: Add this to the bottom of your CSS. Then just modify the top-most number as you wish. The default is 318px. Make sure not to delete the "px" at the end, it is required.Hiho, Great job @Valerio_Lyndon. I have a question, if u could tell me how to move status bar with all the options further down? I just want to make more space for the banner image, so all the waifus can be seen clearly. :P /* ====================
Change Banner Height */
:root { --banner-height: 318px; }
.cover-block { height: var(--banner-height); }
.header { margin-top: calc(var(--banner-height) - 36px); }
.list-stats { top: calc(var(--banner-height) + 98px); }I like the images you've chosen, by the way. :3 Thank u very much. I tried to choose the best I could, and it took me some time. :D Btw. Do u know how to change the size of the banner image? No matter what I load only resolution's changing and I think it would be even better if image would be just smaller. |
|
In what way are you looking to change it? You can change the method of sizing the banner with background-size. Seen here:.cover-block {
background-size: contain;
}Or here: .cover-block {
background-size: 80% auto;
}If you meant something else, I'll need a bit of help understanding. :) |
Valerio_Lyndon said: In what way are you looking to change it? You can change the method of sizing the banner with background-size. Seen here: .cover-block {
background-size: contain;
}Or here: .cover-block {
background-size: 80% auto;
}If you meant something else, I'll need a bit of help understanding. :) No, u actually understood me perfectly. M so grateful, thank u very much once again. I can't imagine how much hard work you had to put into it and u still answer every question. All the best for u, my friend. |
|
| Rofl I actually made it, though not without sacrifices. Sayonara 17yo Shinobu ;( |
|
| henlo @Valerio_Lyndon may I ask how can I make character renders act as a 'back to top' button? currently heres my configuration: |
  |
| @alaneCN CSS is limited to what the basic list layout can already do, so by normal methods this is impossible. However, if we are to use non-CSS methods, we can still achieve this. If you have a userscript extension such as Violentmonkey ([C] [F]), then this is possible to achieve client-side — in other words, for you only. No visitors would be able to see the effect. The "hitbox" does not perfectly trace the renders, instead it turns each side of the list into a button that, when clicked, will return you to the top of the page. Tested on most recent versions of Chrome and Firefox. Seems to work fine, but let me know if it doesn't work since I'm a novice at Javascript and it's very possible my code is trash. |
| It works just as you described it, thanks~ and im not too worried over visitors and such in that regard, as long as I can get back to the top after reviewing my series for the umpteenth time im all set- I really love this format and what it can do, so this helps a lot! |
| |
| Hi again @Valerio_Lyndon. I need some help in changing some colors. I might be overlooking something simple but Idk where to find it. It's about the edit box. Seems I changed a color I didn't have to and now that area looks weird. It would help if you could hint me as to what I have to fix to make it fit with the dark theme. Here's the code. Thanks in advance. |
SheyCroixJun 30, 2019 7:25 PM
SheyCroix said: Hmm, looks like the filter effect was changed or you're using a dark mode userstyle for MAL itself. Depending on which of those is the case, one of these code snippets may help. Try adding the first to the bottom of the code. If that doesn't help, try the second. First:Hi again @Valerio_Lyndon. I need some help in changing some colors. I might be overlooking something simple but Idk where to find it. It's about the edit box. Seems I changed a color I didn't have to and now that area looks weird. It would help if you could hint me as to what I have to fix to make it fit with the dark theme. Here's the code. Thanks in advance. #fancybox-frame {
filter: invert(87.8%) hue-rotate(197deg);
}#fancybox-frame {
filter: none;
}If neither of these fix the issue, I'd have to take a look at your actual CSS. Knowing what browser you're using could also assist in debugging. |
Valerio_LyndonJun 30, 2019 11:52 PM
Valerio_Lyndon said: Hmm, looks like the filter effect was changed or you're using a dark mode userstyle for MAL itself. Depending on which of those is the case, one of these code snippets may help. Try adding the first to the bottom of the code. If that doesn't help, try the second. First: #fancybox-frame {
filter: invert(87.8%) hue-rotate(197deg);
}#fancybox-frame {
filter: none;
}If neither of these fix the issue, I'd have to take a look at your actual CSS. Knowing what browser you're using could also assist in debugging. I do employ the use of a dark theme user-style for MAL. The second one helped to solve the problem. The CSS code was shared there, with my previous post. (If you could remove it from your quote, I would appreciate it =D, tho feel free to look over it.) Once again, thanks for the help and for creating this theme. It's good, so I'm glad I discovered it via another friend who had posted on this thread. |
SheyCroix said: Oh, I am blind aren't I! Apologies, haha, glad the issue was solved. I've removed the code link from the quote. :)I do employ the use of a dark theme user-style for MAL. The second one helped to solve the problem. The CSS code was shared there, with my previous post. (If you could remove it from your quote, I would appreciate it =D, tho feel free to look over it.) Once again, thanks for the help and for creating this theme. It's good, so I'm glad I discovered it via another friend who had posted on this thread. |
| After setting this layout next anime I add are moving bottom one to Plan to watch even though they're completed. Have I done something wrong? EDIT// And btw. is there a way to make those tags look more bland? Like filter or something  |
sNw0wJul 2, 2019 11:08 AM
| The above appears properly to me, tho it's related to a problem I came to mention. Hi, yet again @Valerio_Lyndon ^^; It's regarding the headers for each section. As seen in that pic above, they are not displaying properly. On my side, tho, it's different. It's more related when doing searches or going with tag links. Adding pics below for example. |
SheyCroixJul 2, 2019 12:03 PM
| @sNw0w That is expected behaviour, and is mentioned in the spoiler where the install is found. The position of the headers is controlled by a third-party app which only refreshes every few hours or so. I see you've already switched to transparent tags with coloured text which looks quite nice. :) If you're still not happy with them, I would probably recommend using more pastel colours or experimenting with partial transparency on the background or the text (both support transparency) [Colour Picker]. You could also dim the entire tag (background and text) with an opacity change: .data.tags span a {
opacity: 0.5;
} |
Valerio_LyndonJul 2, 2019 4:12 PM
More topics from this board
» [CSS - Modern] 🛠️ Tweaks for lists -- Horizontal tags, descriptions, category-coloured text, accent colour, and more.Valerio_Lyndon - Oct 24, 2019 |
21 |
by Shishio-kun
»»
Nov 28, 9:05 AM |
|
» [BBCode] Font Awesome Guidehideso - Dec 25, 2023 |
8 |
by Shishio-kun
»»
Nov 28, 8:34 AM |
|
Sticky: » 💚 [REPAIR STICKY] Repair/speed up a design + Request a layout fixShishio-kun - Nov 17, 2023 |
33 |
by Shishio-kun
»»
Nov 25, 11:42 PM |
|
» ✳️ Bunkasai 2024 List Design and Graphic Design contests are OPENShishio-kun - Nov 18 |
2 |
by Shishio-kun
»»
Nov 18, 5:01 AM |
|
Sticky: » [ SIGNATURES ~ PROFILES] All guides, generators, and templatesShishio-kun - Feb 16, 2023 |
29 |
by floral_sacrifice
»»
Nov 15, 10:24 AM |