Mirfak said: Apologies, that's my fault, the provided code is incorrect. I must have missed it when I last updated the forum post. This code (lines 63-64 of your CSS):I've been following the modifications and everything has been going well, but I'm just encountering a problem with the transparent item list part. … When I add this code, it makes the entire list items transparent. However, when I try to change the rgba it still doesn't make any changes to it at all. I have no idea if I missed a step or did something wrong, but would definitely appreciate some help with this. /* Background Image */
body { background-image: url(URLHERE) !important; }Should actually be this: /* Background Image */
body { --background: url(URLHERE); }You'll just need to remove the offending code and replace it with the new one. Hopefully that fixes it. :) I like your picture choices! |
| @Valerio_Lyndon : Thank you for your theme. I use it for my lists. ^_^ AnimeList : https://myanimelist.net/animelist/PergoPugnare?status=2 MangaList : https://myanimelist.net/mangalist/PergoPugnare?status=2 |
| @valerio_lyndon Thanks so much for the theme and the explanation of how to do it. I had been struggling with doing customisation before but this was really clear and easy to follow :) |
  🔥 🔥 🔥 . 阿良々木 暦, 傷 物 語 . 🔥 🔥 🔥 Build a man a fire and you'll warm him for a night but set a man on fire and you'll warm him for the rest of his life... - H E N D Y - |
| I'm glad to hear it, I try my best! :) |
| I've done a decent amount of customization with your theme and this is what it looks like right now: https://i.imgur.com/J7dDype.png The only other thing I really wanted to do was instead of having the glowing dot to represent the anime's status, but instead to make the image itself have a border with the appropriate color. I can think of two ways of doing this: making the dot have the same dimensions / location as the image and just make it transparent with a border, or by just giving the image a border itself. Unfortunately I don't know a lot of css so I'm having a little trouble moving forward. Here is my custom css I've added after the import so far:
:root {
/* Generic Colours */
--pbg: #ffa1d6;
--bg: #fff;
--bg-dark: #ddd;
--text: #000;
--text-h: #787878;
--text-dim: #000;
--text-dim-h: #787878;
--text-dark: #000;
--icon: #000;
--accent: #4065ba;
/* Button Colours */
--btn-bg: #ffa1d6;
--btn-bg-h: #323232;
--btn-head-bg-h: #1d439b;
--btn-text-h: #fff;
/* Header Colours */
--text-head: #9b9b9b;
--text-head-h: #787878;
/* Status Colours */
--watching: #2db039;
--completed: #26448f;
--onhold: #f1c83e;
--dropped: #a12f31;
--plantowatch: #c3c3c3;
/* Single-Use Colours */
--cover-bg: #323232;
--edit-btn: #d9d9d9;
--checkmark: #ffa1d6;
}
.list-item {
background: #ffc7e7 !important;
/*border: solid 1px #000 !important;*/
border-radius: 10px !important;
box-shadow: 0px 0px 3px 0px #333 !important;
}
.status.watching,
.status.reading { box-shadow: 0px 0px 3px 0px var(--watching), 0px 0px 3px 0px var(--watching) !important; }
.status.completed { box-shadow: 0px 0px 3px 0px var(--completed), 0px 0px 3px 0px var(--completed) !important; }
.status.onhold { box-shadow: 0px 0px 3px 0px var(--onhold), 0px 0px 3px 0px var(--onhold) !important; }
.status.dropped { box-shadow: 0px 0px 3px 0px var(--dropped), 0px 0px 3px 0px var(--dropped) !important; }
.status.plantowatch,
.status.plantoread { box-shadow: 0px 0px 3px 0px var(--plantowatch), 0px 0px 3px 0px var(--plantowatch) !important; }
.data.status {
width: 0.6% !important;
padding-bottom: 0.6% !important;
border-radius: 50% !important;
left: 0.9% !important;
position: relative !important;
}
#footer-block {
background: var(--pbg) !important;
}
#footer-block:before {
height: 0px !important;
}
#copyright {
color: #fff !important;
}
.cover-block:before {
height: 0px !important;
}
.status-menu:after {
box-shadow: 0px 0px 5px 0px #333 !important;
}
.status-menu-container:after {
height: 0px !important;
}
.data.image {
padding-left: 1% !important;
}
|
qrmp00 said: You were on the right track, that's how I would do it as well. Here's an example of some functioning code. I added the border directly to the image since doing so generally reduces rendering issues as compared to overlaying the second element. https://i.imgur.com/J7dDype.png The only other thing I really wanted to do was instead of having the glowing dot to represent the anime's status, but instead to make the image itself have a border with the appropriate color. I can think of two ways of doing this: making the dot have the same dimensions / location as the image and just make it transparent with a border, or by just giving the image a border itself. Unfortunately I don't know a lot of css so I'm having a little trouble moving forward.  .data.image {
width: auto;
height: auto;
}
.data.image a {
border: 2px solid var(--bg);
}
.status.watching + .image a,
.status.reading + .image a {
border-color: var(--watching);
} .status.completed + .image a {
border-color: var(--completed);
} .status.onhold + .image a {
border-color: var(--onhold);
} .status.dropped + .image a {
border-color: var(--dropped);
} .status.plantowatch + .image a,
.status.plantoread + .image a {
border-color: var(--plantowatch);
}.data.status {
display: none !important;
}If the code doesn't work when you add it, removing the curly bracket you have on line 95 should fix it.  Thanks for asking such a clear question. :) |
Valerio_LyndonJan 21, 2020 10:31 PM
| Thanks, it seems to be working. I was reading about the + selector and how it works. It made me wonder if I could instead highlight the entire .data-item section instead, but it seems you can't really access parent elements through css. Any ideas? I'm happy with the current result so don't really worry about it, I was just asking if you knew something that was pretty simple. |
qrmp00Jan 22, 2020 7:30 AM
qrmp00 said: Nah, you can't really access anything "upward" or "backwards", unfortunately. CSS is processed sequentially, from top to bottom. I believe this is for optimized speed, but it means that we can't effect any changes on items the processor has already passed over. It's kind of a shame, but comes with the territory. It makes some sense when you consider that most use-cases of CSS are also cases where you have access to the HTML, so CSS-only is a niche use-case.Thanks, it seems to be working. I was reading about the + selector and how it works. It made me wonder if I could instead highlight the entire .data-item section instead, but it seems you can't really access parent elements through css. Any ideas? |
| Hey, can you please tell me how were you able to put a banner at the top and make the fixed navbar work with it? Since in the default list the fixed nav is activated after a few pixels from the top. I tried looking at your code but couldn't put my finger on it. |
 |
YairPeretz said: If the navbar is affixing at an incorrect height, it's usually only an issue while modifying the theme. Once you save the changes on the style and reload the page, it should affix at the correct position. This is because the position at which it becomes affixed is calculated on page load and does not change until the page is loaded again.Hey, can you please tell me how were you able to put a banner at the top and make the fixed navbar work with it? Since in the default list the fixed nav is activated after a few pixels from the top. I tried looking at your code but couldn't put my finger on it. |
Valerio_Lyndon said: YairPeretz said: If the navbar is affixing at an incorrect height, it's usually only an issue while modifying the theme. Once you save the changes on the style and reload the page, it should affix at the correct position. This is because the position at which it becomes affixed is calculated on page load and does not change until the page is loaded again.Hey, can you please tell me how were you able to put a banner at the top and make the fixed navbar work with it? Since in the default list the fixed nav is activated after a few pixels from the top. I tried looking at your code but couldn't put my finger on it. Oh, that explains it. I only tried changing it while on Inspect Element. Thanks a lot for the help. ^^ |
|
| [quote=YairPeretz message=59092150] Valerio_Lyndon said: Glad to help. I was wondering the same thing when I started modifying the list, I remember asking about in the help thread way back. :)Oh, that explains it. I only tried changing it while on Inspect Element. Thanks a lot for the help. ^^ |
| Hey is there any way to remove the black shadow on the banner image? |
bunnyg1rl said: Add this to the bottom of your CSS.Hey is there any way to remove the black shadow on the banner image? /* Remove banner shadow */
.cover-block::before { content: none; } |
Valerio_Lyndon said: bunnyg1rl said: Add this to the bottom of your CSS.Hey is there any way to remove the black shadow on the banner image? /* Remove banner shadow */
.cover-block::before { content: none; }thanks a lot! |
| Hey, I followed the directions you've provided to adjust my anime list to my liking and everything looks great and how I want it to be. The only thing I have trouble with is the edit box itself. I can't figure out which section in the code is responsible for its color and the text in the box. Every background line I tried to tweak didn't work for the box. I would like to adjust the dark grey parts and the text color to match with the rest outside of the box. Could you please let me know which part of the code affects the edit box? |
Slothicans said: The edit box is actually a separate page, it's just embedded within the list. The way that webpages are embedded makes it impossible for the CSS on the list to directly affect the embedded one.Hey, I followed the directions you've provided to adjust my anime list to my liking and everything looks great and how I want it to be. The only thing I have trouble with is the edit box itself. I can't figure out which section in the code is responsible for its color and the text in the box. Every background line I tried to tweak didn't work for the box. I would like to adjust the dark grey parts and the text color to match with the rest outside of the box. Could you please let me know which part of the code affects the edit box? If you know how to create CSS, it's possible to modify it using a browser extension such as Stylus [C] [F], with a userstyle that targets the edit webpage and some new CSS.  Here's a Regex that targets the edit page (and the add page). https://myanimelist.net/ownlist/anime/.*(add|edit).*hideLayout |
Valerio_Lyndon said: If you know how to create CSS, it's possible to modify it using a browser extension such as Stylus Ah. I'm an absolute noob when it comes to CSS and coding in general. I think I'll just leave the box as it is then. Thank you for the theme and the continued support you give! :) |
| Hey, I'm trying to add round category headers but it's not working. |
 |
| Works fine when I visit your list. Are you viewing your unordered All Anime list while testing the code? If they don't appear even after visiting that page, could you perhaps tell me the browser you're using? If you're using Brave, try setting "All cookies allowed" or lowering your "Shield" for MAL:   Thanks for including your code! |
Valerio_Lyndon said: Works fine when I visit your list. Are you viewing your unordered All Anime list while testing the code? If they don't appear even after visiting that page, could you perhaps tell me the browser you're using? If you're using Brave, try setting "All cookies allowed" or lowering your "Shield" for MAL: Thanks for including your code! That solved the problem, thanks. |
|
| Hey I had some ideas and am wondering if you could help me make them? 1. Display "No Tags" when an anime doesn't have any tags set. Similar to how you do it with Studios and Seasons. 2. Display a symbol (an X or -) when there's no start and/or end date set. How I thought it could look:  Thank you. |
Maloween candy:      Bonus:  x1 |
LeafyWrath said: Sure thing! You can add the empty tag text by placing this at the bottom of your CSS:Hey I had some ideas and am wondering if you could help me make them? 1. Display "No Tags" when an anime doesn't have any tags set. Similar to how you do it with Studios and Seasons. 2. Display a symbol (an X or -) when there's no start and/or end date set. How I thought it could look: Thank you. /*-S-T-A-R-T--------------------*\
| Add "No Tags" Text |
\*------------------------------*/
.data.tags div:empty::before {
content: "No Tags.";
display: block;
color: var(--text-dim);
}
/*------------------------E-N-D-*/Although, you'll have to remove the "RINGO IS WAIFU" text, as that would break the code below it. If you want to keep it, wrap it with comment marks. I.E: /* "RINGO IS WAIFU" */ As to the start/end dates, the only reason I hadn't added such functionality before was because I didn't think of how. Well, I thought of how, so it's been added to the base theme and should be on your list when you next check it. :) |
| Thank you! This is exactly what I was looking for, and everything worked! Edit: Is it possible to make it check for tags, and if it only has the "Favourite" tag it displays "no tags"?  |
LeafyWrathMar 27, 2020 2:42 AM
| Maloween candy: Bonus: x1 |
CameronMZ said: I can't reproduce this issue in any of the browsers I tried, so I'm not sure I'll be able to replicate this for debugging. But I can try, in which case I'll need to know what browser you're using. And if you're using Firefox, please check the spoiler below.I have two issues with my layout. 1) The render at the top of Mina Ashido blinks in and out of existence when I move my mouse in and out of the banner area, or when I hover over her. 2) The two renders on the left and right are too far to the left and right, and are getting cropped off the sides of the screen. CameronMZ said: You could try either tweaking the "left" and "right" values for each render yourself to allow overlapping the list, or simply add this to the bottom of your CSS. This will position the renders above your list, at the bottom corners of the screen. Image below.2) The two renders on the left and right are too far to the left and right, and are getting cropped off the sides of the screen. /*-S-T-A-R-T--------------------*\
| Character Renders Positioning |
\*------------------------------*/
footer:before, footer:after {
min-width: 200px;
z-index: 1;
}
/* Left Render */
footer:before {
right: auto;
left: 0;
}
/* Right Render */
footer:after {
left: auto;
right: 0;
}
/*------------------------E-N-D-*/ |
| Hi. How about making the titles that are too long, so they are not entirely shown, show entirely on hower? |
 |
Valerio_Lyndon said: CameronMZ said: I can't reproduce this issue in any of the browsers I tried, so I'm not sure I'll be able to replicate this for debugging. But I can try, in which case I'll need to know what browser you're using. And if you're using Firefox, please check the spoiler below.I have two issues with my layout. 1) The render at the top of Mina Ashido blinks in and out of existence when I move my mouse in and out of the banner area, or when I hover over her. 2) The two renders on the left and right are too far to the left and right, and are getting cropped off the sides of the screen. CameronMZ said: You could try either tweaking the "left" and "right" values for each render yourself to allow overlapping the list, or simply add this to the bottom of your CSS. This will position the renders above your list, at the bottom corners of the screen. Image below.2) The two renders on the left and right are too far to the left and right, and are getting cropped off the sides of the screen. /*-S-T-A-R-T--------------------*\
| Character Renders Positioning |
\*------------------------------*/
footer:before, footer:after {
min-width: 200px;
z-index: 1;
}
/* Left Render */
footer:before {
right: auto;
left: 0;
}
/* Right Render */
footer:after {
left: auto;
right: 0;
}
/*------------------------E-N-D-*/Thanks, that solved the second issue!! Still have no clue where to start on the first one, though. I'm using Safari. |
FiliCZ said: It's doable, but not in a way that is satisfactory enough for me to add it to the base theme. An example of how it could look:How about making the titles that are too long, so they are not entirely shown, show entirely on hower?  And the code for that: /*-S-T-A-R-T--------------------*\
| Overflow Titles on Hover |
\*------------------------------*/
.data.title .link.sort {
display: block;
height: 16px;
border-radius: 3px;
padding: 0;
margin-right: 8px;
overflow: hidden;
white-space: normal;
transition: none !important;
} .data.title .link.sort:hover {
z-index: 1;
height: auto;
padding: 2px 4px;
background: var(--btn-bg);
margin: 8px 0 0 -4px;
transform: translateY(-50%);
}
/*------------------------E-N-D-*/ |
The girls on the side are cute as hell 😍 |
CameronMZ said: The render at the top of Mina Ashido blinks in and out of existence when I move my mouse in and out of the banner area, or when I hover over her. CameronMZ said: I'm taking blind shots in the dark here, but you could try adding this patch to the bottom of your CSS and seeing if it helps. Use one at a time, do not use multiple at once.I'm using Safari. This disables the name text in the top banner, but you don't seem to be using that anyway. /*-S-T-A-R-T--------------------*\
| Safari Flicker Patch Opt1 |
\*------------------------------*/
.cover-block {
background:
linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,0) 50px),
var(--character) no-repeat calc(50% + 400px) center / contain,
var(--banner) no-repeat center / cover scroll var(--cover-bg);
}
#list-container #cover-image-container { display: none !important; }
.cover-block::before { content: none; }
/*------------------------E-N-D-*/This removes the shadow and the name. /*-S-T-A-R-T--------------------*\
| Safari Flicker Patch Opt2 |
\*------------------------------*/
.cover-block {
background:
var(--character) no-repeat calc(50% + 400px) center / contain,
var(--banner) no-repeat center / cover scroll var(--cover-bg);
}
#list-container #cover-image-container { display: none !important; }
.cover-block::before { content: none; }
/*------------------------E-N-D-*/This also removes the shadow and the name, but with some differences on the technical side. /*-S-T-A-R-T--------------------*\
| Safari Flicker Patch Opt3 |
\*------------------------------*/
#cover-image-container::after,
.cover-block::before {
content: none;
display: none;
transform: none;
}
/*------------------------E-N-D-*/If none of those help, and you want to troubleshoot further, you could reinstall the layout (on a different style) one piece at a time, starting with the base, and checking where the flickering begins to occur. If it occurs even with nothing installed except the base theme, then I don't really have any new tactics. But if it started to act up when one of the mods is installed, and goes away when that mod is no longer installed, that would narrow down the problem by a lot. Other than that, all you could do is edit the character image into the banner image using an external program such as Photoshop/Photopea or GIMP (an imperfect solution, but it would probably fix it). If I think of anything else or find something out, I'll post another message. |
Valerio_LyndonMar 31, 2020 1:16 AM
Yeah that look's good, but for some reason for me it doesn't cover the type and it's visible over the title. Also it would by good if the "..." in long titles still appear so I knew I have to hover on it, but that would probably be harder |
|
| Haha thanks, I love my girls! |
@CameronMZ 😎 new MAL  |
FiliCZ said: Ah yep, that's my bad for putting it together too quickly and not testing on Chrome. This version should work better. Make sure to remove the previous version before adding this new one.Yeah that look's good, but for some reason for me it doesn't cover the type and it's visible over the title. Also it would by good if the "..." in long titles still appear so I knew I have to hover on it, but that would probably be harder /*-S-T-A-R-T--------------------*\
| Overflow Titles on Hover R2.0 |
\*------------------------------*/
.data.title .link.sort {
display: block;
height: 16px;
border-radius: 3px;
overflow: hidden;
transition: none !important;
} .data.title .link.sort:hover {
top: 24px;
z-index: 2;
height: auto;
padding: 2px 4px;
background: var(--btn-bg);
margin: 0 8px 0 -4px;
white-space: normal;
transform: translateY(-50%);
}
/*------------------------E-N-D-*/ |
| @Valerio_Lyndon do you have to use the default theme on the modern list setup? Is it possible to change the color for the anime titles, i.e when hovering over them or having them changed in general? |
 |
Rainful said: Any of the themes will work. :)do you have to use the default theme on the modern list setup? Rainful said: It is! Add this to your CSS anywhere below the @import statements. You can then change the "#416abe", which is its current colour value, to any other CSS colour (color picker: here).Is it possible to change the color for the anime titles, i.e when hovering over them or having them changed in general? /* Anime Title Hover Colour */
.list-item { --accent: #416abe ; } |
Valerio_Lyndon said: Rainful said: Any of the themes will work. :)do you have to use the default theme on the modern list setup? Rainful said: It is! Add this to your CSS anywhere below the @import statements. You can then change the "#416abe", which is its current colour value, to any other CSS colour (color picker: here).Is it possible to change the color for the anime titles, i.e when hovering over them or having them changed in general? /* Anime Title Hover Colour */
.list-item { --accent: #416abe ; }Thank u, it worked :D |
|
OMG I HAD NO CLUE YOU COULD EVEN DO THAT PLEASE TEACH ME OH WISE ONE |
| Having an issue where I can't put in an avatar it shows up blank https://pastebin.com/Jd2vveC9 |
| I see dead people |
I go over it here. You'll need to install Stylus to Chrome, then the characters theme, then upload your renders to the character renders to the theme page :D https://www.youtube.com/watch?v=BpQMdtj_tQ8 |
Chro0oIsAWeeb said: Looks like you're trying to use a link to a file on your PC.Having an issue where I can't put in an avatar it shows up blank file:///C:/Users/USER/Desktop/Rem/wuOyc4W_d.jpg Unfortunately, these aren't valid URLs, as they aren't available on the web. The "file:///" is simply telling your browser to search your local file system, and won't work for CSS. What you'll need to do is upload that image to an image hosting website (such as Imgur) and copy the URL from there. To do so:
EDIT: looks like MAL is having some issues displaying images right now, so I apologize if some the images are not visible. |
Valerio_LyndonApr 13, 2020 3:23 PM
Valerio_Lyndon said: Thanks that fixed it!Chro0oIsAWeeb said: Looks like you're trying to use a link to a file on your PC.Having an issue where I can't put in an avatar it shows up blank file:///C:/Users/USER/Desktop/Rem/wuOyc4W_d.jpg Unfortunately, these aren't valid URLs, as they aren't available on the web. The "file:///" is simply telling your browser to search your local file system, and won't work for CSS. What you'll need to do is upload that image to an image hosting website (such as Imgur) and copy the URL from there. To do so:
EDIT: looks like MAL is having some issues displaying images right now, so I apologize if some the images are not visible. |
| I see dead people |
| Would it be possible to make the sort menu's "hitbox" bigger or something? Or maybe just wait longer before it collapses, because I often accidentally get off with the cursor before I reach the most left one and it disappears. |
|
FiliCZ said: Sorry about that. That's definitely an issue that can happen with the design. To change the hitbox, use this code (place at the bottom of your CSS):Would it be possible to make the sort menu's "hitbox" bigger or something? Or maybe just wait longer before it collapses, because I often accidentally get off with the cursor before I reach the most left one and it disappears. /* =======================
Increase Sort-by Hitbox */
.list-table-header {
/* Change Padding Here */
--sortby-padding: 20px;
right: calc(var(--sortby-padding) * -1);
top: calc((var(--sortby-padding) * -1) + 2px);
padding: var(--sortby-padding)calc(var(--sortby-padding) + 15px);
}If you want to tweak it a bit, you can increase or decrease the "20px" to something else, for instance "28px". |
Valerio_Lyndon said: FiliCZ said: Sorry about that. That's definitely an issue that can happen with the design. To change the hitbox, use this code (place at the bottom of your CSS):Would it be possible to make the sort menu's "hitbox" bigger or something? Or maybe just wait longer before it collapses, because I often accidentally get off with the cursor before I reach the most left one and it disappears. /* =======================
Increase Sort-by Hitbox */
.list-table-header {
/* Change Padding Here */
--sortby-padding: 20px;
right: calc(var(--sortby-padding) * -1);
top: calc((var(--sortby-padding) * -1) + 2px);
padding: var(--sortby-padding)calc(var(--sortby-padding) + 15px);
}If you want to tweak it a bit, you can increase or decrease the "20px" to something else, for instance "28px". Yes, that's perfect. Thanks. |
|
| I like this layout a lot thanks for making it. I'm currently in the process of adding it to my anime and manga list however i need a little help with it. I can't seem to find the code to where i can change the banner at the top. Also, My profile pic does not seem to fit in the circle box... I wanna add in a custom banner and profile pic for each list. Do you know what the exact dimensions they have to be in order for them to fit. |
MasukoApr 20, 2020 4:10 PM
    "If you smile when you see a butterfly ,you have happiness In your eyes" |
Masuko-Senpai said: By default, the avatar retains its default dimensions and is placed centered horizontally and top-most vertically. To change this, you can either modify its placement by adding this to the bottom of your CSS:Also, My profile pic does not seem to fit in the circle box /* Avatar Positioning */
.status-menu::after { background-position: center top; }Or, modify its sizing by adding one of these. The "Contain" one will size the image down so you can see all of it, but there will be some blank space. The "Stretch" one will stretch the image to fill out the entire space. /* Avatar Sizing - Contain */
.status-menu::after { background-size: contain; }/* Avatar Sizing - Stretch */
.status-menu::after { background-size: 100% 100%; }Masuko-Senpai said: There's some code you can insert to change banner or character images under the "Further Modification" section in the main post. It's under the first spoiler, "Change theme images". You can also find code for a per-section/category banner image there as well. But, you can't find per-category avatar code. So, here's the CSS you can use for per-category banners and avatars. Add it to the bottom of your CSS. Then, replace each "URLHERE" with the URLs to your images. I can't seem to find the code to where i can change the banner at the top. … I wanna add in a custom banner and profile pic for each list. /*-S-T-A-R-T--------------------*\
| Per-Category Banner Image |
\*------------------------------*/
/* All Anime */
[data-query*='status":7'] { --banner: url(URLHERE); }
/* Watching/Reading */
[data-query*='status":1'] { --banner: url(URLHERE); }
/* Completed */
[data-query*='status":2'] { --banner: url(URLHERE); }
/* Onhold */
[data-query*='status":3'] { --banner: url(URLHERE); }
/* Dropped */
[data-query*='status":4'] { --banner: url(URLHERE); }
/* Planned */
[data-query*='status":6'] { --banner: url(URLHERE); }
/*------------------------E-N-D-*/
/*-S-T-A-R-T--------------------*\
| Per-Category Avatar Image |
\*------------------------------*/
/* All Anime */
[data-query*='status":7'] { --avatar: url(URLHERE); }
/* Watching/Reading */
[data-query*='status":1'] { --avatar: url(URLHERE); }
/* Completed */
[data-query*='status":2'] { --avatar: url(URLHERE); }
/* Onhold */
[data-query*='status":3'] { --avatar: url(URLHERE); }
/* Dropped */
[data-query*='status":4'] { --avatar: url(URLHERE); }
/* Planned */
[data-query*='status":6'] { --avatar: url(URLHERE); }
/*------------------------E-N-D-*/And if you need it: Masuko-Senpai said: The avatar is 150x150 pixels, but any square image will fit apppropriately and we went over the stretching/positioning options earlier in this post.Do you know what the exact dimensions they have to be in order for them to fit. The banner will accept any dimension and resolution image, it doesn't really matter. But if you're concerned about it, you can crop images down to a 10:3 width/height ratio. This is because any vertical imagery above a 10:3 ratio image will never be shown. So, if your image was 1920x1080, it would have around 500 pixels vertically that are never going to be seen. A 10:3 ratio image, at 1080p, comes out to 1920x576. You can figure out aspect ratios by using [this website]. Just put a 10:3 ratio on the left side, and a new width or height on the right, and it'll calculate it for you. Character images can, once again, be any size. But, the ideal size is 318 pixels vertically, assuming the page is not zoomed in at all. The width does not matter. That said, I really wouldn't worry much about sizing your images perfectly on your monitor. The banner height is not dynamic, where-as the width is, so on some monitors it will be 1280 pixels, and on others it can get up to 3840 pixels wide. All the while, the height will always be 318 pixels. So you have one person who might require a 1920x318 image to fit perfectly, and someone else a 1280x318. These are quite different numbers, and there is going to be some cropping on someone's monitor. So as long as it looks fine to you, I wouldn't worry. And as for resizing it down (for instance, sizing your character render down to 318 pixels vertically), it's great for optimization, but then what if someone on a 4K monitor zooms in their page to see better? That 318 pixel picture will now be in a size closer to 500 or 600, most likely. So if your images are a bit big, it's not the end of the world. |
Valerio_LyndonApr 20, 2020 7:18 PM
Hey, one more thing. When I'm scrolled all the way up the character render is covered by the navbar, but I don't really want to make her smaller. Would it be possible to change her size depending on how far I'm scrolled so she's always shown entirely with her head just below the navbar? |
|
More topics from this board
» theme helpthreat - Jul 5 |
5 |
by Zaryf
»»
Aug 21, 5:46 AM |
|
» [CSS] ⭐️ Customize your List Cursor + Cursor FixesShishio-kun - Mar 8, 2021 |
30 |
by Shishio-kun
»»
Jul 28, 3:17 AM |
|
» How To Have Different Banner/Cover image & Background Image For Manga & Anime ListsYasminaRegina - Jul 25 |
2 |
by YasminaRegina
»»
Jul 26, 1:02 AM |
|
Sticky: » 💚 [REPAIR STICKY] Repair/speed up layouts + Request layout fixes ( 1 2 )Shishio-kun - Nov 17, 2023 |
52 |
by LucaBalsa
»»
Jul 6, 2:02 PM |
|
» [CSS/BBCODE] ⭐️ How to view anyone's CSS or BBcodes (for lists, profiles, or clubs)!Shishio-kun - Feb 6, 2012 |
37 |
by sunnysummerday
»»
Jun 11, 7:44 PM |