This is a custom layout for modern template lists. If you don't know how to install the codes, click here to view the Beginner's Tutorial. If there are problems: install the latest version, or check the Repair Thread for patches and updates (found here). All premade modern layouts can be found in the gallery by clicking here, and more ways to customize your list can be found here.     Introduction After a complete lack of creativity for the entirety of 2018, I'm quite happy to finally share my first original cover-style theme! I made this for myself over several dozen hours, but there's lots of built-in customization options so others can enjoy it too. I highly encourage you to check the options! I hope you have fun with the theme. :) Theme Specifications & Highlights:
      FAQ & Help  Cover images are low quality or won't display? The background is not the correct colour?I installed the theme, but it looks broken? The theme worked before but randomly broke?How do I uninstall a modification? Why are the add/edit pages so bright? Where can I find older versions of the theme? I have a question or issue that isn't covered here?If you have any feedback, I welcome replies. I don't respond to everything but I do read and appreciate it. Changelog • My Other List Designs • Source Code |
Valerio_LyndonOct 7, 2023 8:11 PM
| Great work, very easy to read and perfect for people who prefer dark layouts :D |
Shishio-kun said: Thank you! :) I don't expect this one to be as popular as Clarity but I put my all into it and I hope that shows. ^^Great work, very easy to read and perfect for people who prefer dark layouts :D |
| I installed it without changing anything or adding a banner for now, but wanted to leave a message to say I like this design a lot ! ♡♡ |
❝ They went looking for the gods, and died in lonely places ❞ |
Lumecyow said: Thank you, I'm glad you like it! :DI installed it without changing anything or adding a banner for now, but wanted to leave a message to say I like this design a lot ! ♡♡ |
Mstr said: Thanks for your interest! Yep, you can find it under "modifications" in the main post. :) This changes the image brightness (add to the bottom of the code):Hello ! I love your design but I would like to know if there was a way to make the anime pictures more seeable because I think its too grey ! /*------------------------------*\
\* - - - - User Options - - - - */
:root {
/*
* imageBrightness(Hov) / Changes lightness of cover images / Higher = Brighter.
* min value: 0% / max value: 100%
*/
--imageBrightness: 100%;
--imageBrightnessHov: 70%;
}Previous answer irrelevant. Check the top of the theme CSS for the "imageBrightness" and "infoBGOpacity" variables. |
Valerio_LyndonAug 2, 2020 3:03 PM
| Wow you did it again! It looks amazing, many congratulations for the work! can't wait to start fiddling with it >< Also nice touch with the Ultimate Madoka image ^^ But really though, very good job : ) |
 |
RadioactiveGhost said: Thank you, I'm very glad you like it! :D Been a while since I last saw you around. :) Although I must admit I just used the image because it's pretty, I haven't got around to watching Madoka yet. I'm a faker lol.Wow you did it again! It looks amazing, many congratulations for the work! can't wait to start fiddling with it >< Also nice touch with the Ultimate Madoka image ^^ But really though, very good job : ) |
This layout is a big success!  |
Valerio_Lyndon said: Thank you, I'm very glad you like it! :D Been a while since I last saw you around. :) Although I must admit I just used the image because it's pretty, I haven't got around to watching Madoka yet. I'm a faker lol. Ehehehe ^^ It's really amazing! Yeah, I mostly lurk around ><' Ahahaha I can't blame you though, she is very pretty! (though do watch Madoka!) I've been already fiddling around with the style : P (tell me what you think oo) I tried to find a way to make the cover image change when hovering over the links for the different parts of the list, but it seems it isn't possible with the way things are nested x) |
|
RadioactiveGhost said: Not to worry, it's on my watch list. :) Excellent colour and image choices, very lively - looks great! :D It's a shame, but yes that's correct.Ehehehe ^^ It's really amazing! Yeah, I mostly lurk around ><' Ahahaha I can't blame you though, she is very pretty! (though do watch Madoka!) I've been already fiddling around with the style : P (tell me what you think oo) I tried to find a way to make the cover image change when hovering over the links for the different parts of the list, but it seems it isn't possible with the way things are nested x) |
| Yay! eheh thanks! yeah... but it's good I think, the images are heavy enough as they are (I gotta optimize them) |
|
| Hey, i love this whole lay out but when i scroll it literally lags so hard, u reckon there's any way to fix this? |
Kazutano said: Oh, sorry to hear that! Unfortunately, I can't think of any way to reduce the lag other than make major changes to the theme's animations. The effects are somewhat heavy, but changing that would be to change the theme itself (not that I wouldn't be open to making a trimmed down version, but it would most certainly have a different feel to it). Your best bet is to position your mouse cursor on one of the empty spaces between list items when scrolling so that no animations are triggered, but this is a bit of a poor solution. Out of curiosity though. are you using smooth scrolling or regular "jump" scrolling (where it jumps from one location to the next)? I've not found there to be any noticeable lag when using jump scrolling, but with Firefox's smooth scrolling active, it becomes too much for Firefox to handle without the scrolling visibly stuttering.Hey, i love this whole lay out but when i scroll it literally lags so hard, u reckon there's any way to fix this? |
| Um well basically i smooth scroll, if smooth scroll means slowly using the roller on your mouse then thats what i do but i tried putting the mouse full left or full right(not on top of an anime listing) and it doesn't lag but im honestly kinda surprised it stutters this hard from such a simple looking effect, i honestly can't see tho how the coding could produce the stuttering and what i mean by that is like you coding sth wrong or whatever, i think you just used some heavy effects that may be unnecessary, not sure though, i can't tell. Overall you've done an amazing job tho im really happy with the design, if it wasnt for the stuttering it'd be a 10/10 layout imo. I'd recommend trying to play around with the effects a bit tho to see what's causing the stuttering, up to you though, take care ^~^ |
msharyxx said: Fixed, thanks for letting me know!hi i use solution of blurring img is worked but dragon ball still blur sorry for my bad eng https://imgur.com/w4rB6n0 |
why no icon?  |
| Hmm, that's quite odd. What browser are you using, and did you make any changes to the code? If you're still interested in using the theme, I would try re-installing the layout from scratch, as I can't see a reason for these issues. My best guess is some of the code was deleted by accident during the install. Even one missing bracket can cause massive issues sometimes. I have some other potential ideas for fixes, but I'd rather not resort to hacky solutions before confirming simpler steps. I see you're using my other theme, Clarity, do the icons work there and on the main MyAnimeList website? |
Valerio_Lyndon said: Hmm, that's quite odd. What browser are you using, and did you make any changes to the code? If you're still interested in using the theme, I would try re-installing the layout from scratch, as I can't see a reason for these issues. My best guess is some of the code was deleted by accident during the install. Even one missing bracket can cause massive issues sometimes. I have some other potential ideas for fixes, but I'd rather not resort to hacky solutions before confirming simpler steps. I see you're using my other theme, Clarity, do the icons work there and on the main MyAnimeList website? I use firefox, No missing code, I just copy and paste the code from github Yea.. I using the clarity theme for now hehe.. because no icon on this brink theme makes a little weird look |
tosuka said: I hate to be so unhelpful, but I haven't the foggiest as to what could be causing that isssue. I can't see any logic behind which elements are affected. And I can't reproduce it, since the code's working on my end. Aapologies for not being of more help... I'll let you know if I find anything that might relate to the issue though. I use firefox, No missing code, I just copy and paste the code from github Yea.. I using the clarity theme for now hehe.. because no icon on this brink theme makes a little weird look |
Valerio_Lyndon said: tosuka said: I hate to be so unhelpful, but I haven't the foggiest as to what could be causing that isssue. I can't see any logic behind which elements are affected. And I can't reproduce it, since the code's working on my end. Aapologies for not being of more help... I'll let you know if I find anything that might relate to the issue though. I use firefox, No missing code, I just copy and paste the code from github Yea.. I using the clarity theme for now hehe.. because no icon on this brink theme makes a little weird look no problem, I have fixed it, even though I don't know the way it was, lol you can see my list now |
tosuka said: Ah, fantastic! :D I'm happy to hear that.no problem, I have fixed it, even though I don't know the way it was, lol you can see my list now |
Tiglet_Piglet said: Here's the full image: https://danbooru.donmai.us/posts/1949384 :)I like your banner pic, could you redirect me to the image? |
Valerio_Lyndon said: Tiglet_Piglet said: Here's the full image: https://danbooru.donmai.us/posts/1949384 :)I like your banner pic, could you redirect me to the image? Danbooru 😍 :kreygasm |
| Can you add renders to the cover on this theme? |
 |
Jewcer said: Not by default, but you can with some modification. This code should do what you want, try it out and feel free to let me know if there's any issues I didn't catch. [Preview] Make sure to add it to the bottom of the code. :)Can you add renders to the cover on this theme? /*------------------------------*\
Character Render on Banner
\* - - - - - - - - - - - - - - -*/
#cover-image-container:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(URLHERE);
background-position: 90% center;
background-size: contain;
background-repeat: no-repeat;
}You can add a render by changing the "URLHERE" to the direct link to your image. For instance: background-image: url(https://i.imgur.com/ZdUrOiv.png); To change the position, change the background-position to what you will. The second value, "center", is not particularly important due to the background-size I've chosen, but the first value ("90%") will change the horizontal position. You can use "left", "right", "center", or any percentage. |
| I just wanted to say: OMG, THIS IS SO BEAUTIFUL LAYOUT, I'M GOING TO USE IT RGHT NOW! Amazing job. |
 |
Xenuss said: You can disable it by going into your list settings and unchecking "numbers". Save the settings and the numbers should be gone.Hi, i love your theme but i have a question is there a way to remove the anime number (#1,#2,#3 ecc) in the upper left corner of the overlay that i get with the cursor? example https://imgur.com/a/aYNRxOK |
| @ORA43 The bar changes colour depending on the active list. So on current it's orange, on completed it's purple, paused is green, so on and so forth. If you want to change the colours of each status, you can do so at the top of the code in the "variables" section (just find the "--current", "--completed", etc lines). This would also change the colours on the list items. If you're looking to only change the bar and nothing else, add this code to the bottom of your CSS and change the colour to whatever you want, same as you would the other theme colours. .list-block:before, #status-menu:before {
--accent: 0, 0%, 100% !important;
}.list-block:before, #status-menu:before {
background: #ffffff !important;
} |
Good job. Very beautiful this layout :3  |
| Wow, thanks for this. Great eye for design and gives the list an easy on the eyes, netflix-esque look. Super easy to change stuff with reading the notes in the code. |
   大好き "I just want to be an ancient demigod loli" |
JustaMAL said: Thank you, I'm happy you're enjoying it! :3Wow, thanks for this. Great eye for design and gives the list an easy on the eyes, netflix-esque look. Super easy to change stuff with reading the notes in the code. |
K-boss said: Sure, that's possible. Add this code below the mod header:Thanks for such a beautiful list design. However, is it possible to change the bottom info background (I mean, this thing) of the entries to colors that match the anime status (watching=green, completed=blue, on-hold=yellow...) /*------------------------------*\
|* - - Improve Readability - - *|
\* - - multi colour patch - - */
.data.watching ~ .title,
.data.reading ~ .title {
background: hsla(var(--current), 85%);
} .data.completed ~ .title {
background: hsla(var(--completed), 85%);
} .data.onhold ~ .title {
background: hsla(var(--paused), 85%);
} .data.dropped ~ .title {
background: hsla(var(--dropped), 85%);
} .data.plantowatch ~ .title,
.data.plantoread ~ .title {
background: hsla(var(--planned), 85%);
}Code outdated, please check the Modifications section on the main forum post for "Category-Coloured Info Backgrounds". If you want to change any of the colours, change the "var(--blah)" to a normal HSL value, i.e. "35, 49%, 46%". The fourth value found above (the "85%") is the transparency. HSL colour picker: https://www.w3schools.com/colors/colors_hsl.asp |
Valerio_LyndonAug 2, 2020 3:02 PM
| Tanks man! I loved the theme! one question: Is possible put my tags in topics? EX : https://imgur.com/a/JhjdUzz |
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. |
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. Sorry my bad english, was exactly this, thank you very much man! |
| Not to worry, the message got across in the end. :) Glad I could help. |
| Hey man, its me again. I noticed that my tags are with a character limit, this is due to MAL or is it due thema? If the thema is due, can I add more characters? |
ODeivyd said: That's on MAL. The limit appears to be 255 letters. As annoying as it can be, there isn't anything I can do about it. :( I could swear tags used to allow longer texts too. Anyhow, your best bet is to keep tags short and place further details within the comments. Comments allow for long-form content with a much less restrictive letter limit. Approximately 31000 letters if my testing is correct.Hey man, its me again. I noticed that my tags are with a character limit, this is due to MAL or is it due thema? If the thema is due, can I add more characters? |
Valerio_Lyndon said: Ok, so is possible, in place of the tags, to make the comments appearance is by placing the cursor on the image? Thanks for the attention anyway!ODeivyd said: That's on MAL. The limit appears to be 255 letters. As annoying as it can be, there isn't anything I can do about it. :( I could swear tags used to allow longer texts too. Anyhow, your best bet is to keep tags short and place further details within the comments. Comments allow for long-form content with a much less restrictive letter limit. Approximately 31000 letters if my testing is correct.Hey man, its me again. I noticed that my tags are with a character limit, this is due to MAL or is it due thema? If the thema is due, can I add more characters? |
ODeivydJun 13, 2019 6:24 AM
More topics from this board
Sticky: » 💚 [REPAIR STICKY] Repair/speed up a design + Request a layout fixShishio-kun - Nov 17, 2023 |
43 |
by NightmareTala
»»
Feb 7, 6:03 AM |
|
» [CSS - Modern] 🛠️ Tweaks for lists -- Horizontal tags, descriptions, category-coloured text, accent colour, and more.Valerio_Lyndon - Oct 24, 2019 |
34 |
by IridescentJaune
»»
Feb 7, 4:05 AM |
|
» ✳️[9-7-24] New even higher quality Cover Imports! + Fixes for Takana Grids and moreShishio-kun - Sep 7, 2024 |
28 |
by Shishio-kun
»»
Jan 13, 12:06 PM |
|
Sticky: » [ WEBSITES ~ EXTENSIONS ~ APPS ] All tools for MyAnimeListShishio-kun - Feb 8, 2023 |
47 |
by deg
»»
Jan 10, 10:11 AM |
|
» [GRAPHIC DESIGN] [VIDEO GUIDE] ⭐️ Make an About Me graphic in GIMP + 20 minutes of advanced tricks! ( 1 2 )Shishio-kun - Jan 10, 2019 |
78 |
by karmashizzle
»»
Jan 7, 3:04 PM |