mimikwu said: hello ! apologies if this has been answered before, but how do i make it so that when i hover my mouse over a transparent row, it becomes opaque/darker ? for example on this users list. here is my css: thanks in advance ! You can add this to the bottom of ur code tbody.list-item:hover {
background: black !important;
} |
[  |
jery_js said: ahh perfect !! just what i wanted, thank you so much again + for the quick response (❁´◡`❁)mimikwu said: hello ! apologies if this has been answered before, but how do i make it so that when i hover my mouse over a transparent row, it becomes opaque/darker ? for example on this users list. here is my css: thanks in advance ! You can add this to the bottom of ur code tbody.list-item:hover {
background: black !important;
} |
 |
| Hi it's me again firstly thanks for bringing back to life the header banners I appreciate it a lot. There is just one little thing. I have installed the extension and everything is functioning perfect, but I felt that the gaps between every section were to big so I edited the code for it to be smaller. Everything went well, on the preview it shows up edited and with smaller gaps, but in the list itself it still has the big gaps. Is there anyway to change it or is it just that way that it will show up. |
ShaDedZzJan 3, 2022 7:25 PM
| @ShaDedZz when you edit anything below /*MALFOX ANIME START*/ you have to make sure to disable it otherwise it may overwrite your changes next time you visit your list. |
   My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
ShaggyZE said: @ShaDedZz when you edit anything below /*MALFOX ANIME START*/ you have to make sure to disable it otherwise it may overwrite your changes next time you visit your list. Thanks that worked! And just to make sure, do I have to keep it disabled or enabling it afterwards won't change anything. |
ShaDedZz said: ShaggyZE said: @ShaDedZz when you edit anything below /*MALFOX ANIME START*/ you have to make sure to disable it otherwise it may overwrite your changes next time you visit your list. Thanks that worked! And just to make sure, do I have to keep it disabled or enabling it afterwards won't change anything. you have to keep it disabled, at least until V.L. gives us an option to change the template via settings. enable it when you need to make updates then change the code again and disable it. |
ShaggyZEJan 13, 2022 4:47 AM
| My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
| I apologize in advance if this was asked before, but how do I remove the default image that comes with the list design? Here, I circled it in red for clarity: Here is my list style design code: @\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"; body { --avatar: url(https://i.imgur.com/NeBJgZd.jpg); } body { --banner: url(https://i.imgur.com/shTJv2H.jpg?1); } /*-S-T-A-R-T--------------------*\ | Review Tags R0.1 | \*------------------------------*/ /* Raise or lower this number to change how wide the box is. Make sure not to remove the "px" at the end. */ .data.tags { width: 240px; } .data.tags div:not(:empty){padding:2px 8px;background:var(--btn-bg);border-radius:8.5px}.data.tags span{display:inline;font-size:11px!important;cursor:text}.data.tags a:not(.edit){display:inline;padding:0;background:0 0;pointer-events:none} /*------------------------E-N-D-*/ |
 -[ ~♫~ ll Credit ]- |
LordSozin said: I apologize in advance if this was asked before, but how do I remove the default image that comes with the list design? Here, I circled it in red for clarity: Here is my list style design code: @\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"; body { --avatar: url(https://i.imgur.com/NeBJgZd.jpg); } body { --banner: url(https://i.imgur.com/shTJv2H.jpg?1); } /*-S-T-A-R-T--------------------*\ | Review Tags R0.1 | \*------------------------------*/ /* Raise or lower this number to change how wide the box is. Make sure not to remove the "px" at the end. */ .data.tags { width: 240px; } .data.tags div:not(:empty){padding:2px 8px;background:var(--btn-bg);border-radius:8.5px}.data.tags span{display:inline;font-size:11px!important;cursor:text}.data.tags a:not(.edit){display:inline;padding:0;background:0 0;pointer-events:none} /*------------------------E-N-D-*/ Try adding this to bottom of ur CSS code /* Remove Character Image */
#list-container #cover-image-container {
background: none !important;
} |
[ |
jery_js said: LordSozin said: I apologize in advance if this was asked before, but how do I remove the default image that comes with the list design? Here, I circled it in red for clarity: Here is my list style design code: @\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"; body { --avatar: url(https://i.imgur.com/NeBJgZd.jpg); } body { --banner: url(https://i.imgur.com/shTJv2H.jpg?1); } /*-S-T-A-R-T--------------------*\ | Review Tags R0.1 | \*------------------------------*/ /* Raise or lower this number to change how wide the box is. Make sure not to remove the "px" at the end. */ .data.tags { width: 240px; } .data.tags div:not(:empty){padding:2px 8px;background:var(--btn-bg);border-radius:8.5px}.data.tags span{display:inline;font-size:11px!important;cursor:text}.data.tags a:not(.edit){display:inline;padding:0;background:0 0;pointer-events:none} /*------------------------E-N-D-*/ Try adding this to bottom of ur CSS code /* Remove Character Image */
#list-container #cover-image-container {
background: none !important;
}It worked! Thank you for your assistance! |
-[ ~♫~ ll Credit ]- |
ShaDedZz said: Hi it's me again firstly thanks for bringing back to life the header banners I appreciate it a lot. There is just one little thing. I have installed the extension and everything is functioning perfect, but I felt that the gaps between every section were to big so I edited the code for it to be smaller. Everything went well, on the preview it shows up edited and with smaller gaps, but in the list itself it still has the big gaps. Is there anyway to change it or is it just that way that it will show up. You could just edit the template css inside userscript in tampermoney (or whatever extension you're using for that). If you do that the script won't auto update anymore but at least you can keep it on and it'll always use your edited css when updating headers. |
   |
T1PZ said: Is it normal that the tags don't show up in the manga list? If not, please help me I can't see the tags in my manga list... Make sure you checked Tags in List Settings -> Manga List Settings -> Show Columns. |
 |
| Any chance of we get an hentai censorship like in this one? https://myanimelist.net/forum/?topicid=1772180o |
 |
xNyan said: Any chance of we get an hentai censorship like in this one? https://myanimelist.net/forum/?topicid=1772180o ShaggyZE has been working on a universal hentai blocker for a while, we should have it released via a mass message this week! https://myanimelist.net/forum/?topicid=1989285#msg66087139 You can try the import at the top of your CSS to see if it censors the hentai and replaces the names with "Deleted" so ppl won't even know it was hentai! :D |
Shishio-kun said: xNyan said: Any chance of we get an hentai censorship like in this one? https://myanimelist.net/forum/?topicid=1772180o ShaggyZE has been working on a universal hentai blocker for a while, we should have it released via a mass message this week! https://myanimelist.net/forum/?topicid=1989285#msg66087139 You can try the import at the top of your CSS to see if it censors the hentai and replaces the names with "Deleted" so ppl won't even know it was hentai! :D Oh that's nice to hear! :) I'll check it out, thank you |
|
Hey I've got a problem with the MalFox script. A while ago it started showing an error but after a couple tries, but now no matter how many times i try it refuses to update the CSS of headers. I've tried with both the round and basic version and both show the same error. Is this something on my end that might be causing it or did some mal update cause the script to break? |
|
Qlarify said: Header doesn't work: "MalFox failed to update your Custom CSS with new header locations." Powish said: Hey I've got a problem with the MalFox script. A while ago it started showing an error but after a couple tries, but now no matter how many times i try it refuses to update the CSS of headers. I've tried with both the round and basic version and both show the same error. Is this something on my end that might be causing it or did some mal update cause the script to break? https://i.imgur.com/XQGmi4z.png Thanks for the bug reports. I have yet to duplicate this error, but I'm looking into it. That specific error message means the script was unable to detect the selected list style. I am not quite sure why that would be happening for you and not for me, unless MAL is A/B testing different CSS or my code is just extremely borked somehow. For now, I've updated it to make these error messages clearer and will investigate this further during my free time. |
| Hey, my cover images that show up when hovering over the anime is blurry. |
| @Qlarify @Powish I have been unable to reproduce the problem despite testing multiple browsers and userscript extensions. It might be due to another userscript or browser extension that you're running modifying the HTML or the base CSS? Could be tested by installing on a fresh browser or with extensions disabled to see if it prevents the error. Anyhow, perhaps this could be fixed with a workaround. If we bypass the style detection part of the code, the rest should (hopefully) still work. If you navigate to the Tampermonkey dashboard, you can edit the script from there. Or if you're already on your list, you can quickly access it from the running scripts tab. Once in the editing page, find lines 52 through 99 and delete them. Then, in the same place you just deleted from (line 52), add this new line: style = 1; You will probably have to change the number from 1 to another number. This number needs to match MyAnimeList's list style number you have active. You can find the style number you are using any time by going to your Style Settings and then clicking on the currently active style. In the URL bar, it will display the style number.  In your case, Powish, your style is 10. And Qlarify, your style is 1. Don't forget to save the modified script once this is done and then give it a go. I don't know for sure that this will work, but it bypasses the code that was outputting the reported error so if any other issues occur it should at least be a different error code. |
Selkar said: Hey, my cover images that show up when hovering over the anime is blurry. I couldn't figure out what you meant at first because it works fine in Firefox, but after switching to Chrome for testing I also see blurry images. The actual images being loaded are high resolution, but the resulting display is blurry and ugly. I don't know why this is happening now when it didn't used to, but I assume it's related to MAL's recent changes to image size. I cannot find a solid reason for this other than the usual reason of Chrome's webpage rendering being fucking awful lower quality than Firefox. I'm pretty sure it simply doesn't like downscaling higher resolution images into a smaller size. Try applying this code to the bottom of your CSS and see if it helps, it's the only fix that helped in my testing so far. /* Chrome blurry images fix */
.status-menu::after,
.data.image img,
.data.image a::before {
image-rendering: -webkit-optimize-contrast;
}It also applies to the user avatar since I noticed the same issue there. Please let me know if it works and I may roll this patch out to everyone using the theme. |
Valerio_Lyndon said: @Qlarify @Powish I have been unable to reproduce the problem despite testing multiple browsers and userscript extensions. It might be due to another userscript or browser extension that you're running modifying the HTML or the base CSS? Could be tested by installing on a fresh browser or with extensions disabled to see if it prevents the error. Anyhow, perhaps this could be fixed with a workaround. It worked. Ty sm 💖💘 |
|
Valerio_Lyndon said: Please let me know if it works and I may roll this patch out to everyone using the theme. Yeah it did work for me, thankss |
Powish said: It worked. Ty sm 💖💘 Glad to hear it. Thanks for your patience! Selkar said: Yeah it did work for me, thankss Awesome, thanks for telling me. |
| i had to use ".data.title a:before" to fix my blurry images, so you'll want to cover all possible uses of malscraper (〜￣△￣)〜 |
 |
| Thank you so much for sharing the code and also for the detailed explanation on how to edit! I'll be using this for both my anime and manga list (⌒▽⌒)☆ |
a simp for seiya since i was 7 years old, still going strong 21 years later   |
| hi !! any help with moving the status menu up?? i've been stuck with that for a while |
kome11037 said: hi !! any help with moving the status menu up?? i've been stuck with that for a while Do you intend to move the entire menu up, thus shrinking the banner? Or did you only wish to move a certain section, such as the category buttons or the smaller round buttons? Shrinking the banner section is simple enough, but moving individual buttons will be more difficult due to the design implications. |
Valerio_Lyndon said: kome11037 said: hi !! any help with moving the status menu up?? i've been stuck with that for a while Do you intend to move the entire menu up, thus shrinking the banner? Or did you only wish to move a certain section, such as the category buttons or the smaller round buttons? Shrinking the banner section is simple enough, but moving individual buttons will be more difficult due to the design implications. i was acutally able to fix it !! i just would like some help with some stuff, i went through all the comments here and couldn't find some that could help with this: 1. how can i change the home button, add button, etc so that they dont open when i hover over them (like just the circle icons stays) and how can i change the color when i hover over them 2. how can i remove the number that appears on the image 3. how can i remove the rated:pg13, the studio, and the start-end of watching an anime 4. how to change the font of the section with all anime, watched, etc and the font for the anime names 5. how to remove the bg of the scores 6. how to change the thickness of the avatar icon border and the size of the icon 7. how to center the info in the list, what i mean is this: https://i.imgur.com/t67tGBa.png as you can see in the image the picture of the anime appears closer to the top, it's not centered between the top and the bottom, how do i fix that? i think those are all my questions for now, sorry for the bother !! |
ranitagridulceMay 25, 2022 12:00 AM
kome11037 said: 1. how can i change the home button, add button, etc so that they dont open when i hover over them (like just the circle icons stays) and how can i change the color when i hover over them Forcing their width will do the job for the sizing. .header .header-title:hover,
.header .header-menu .list-menu .icon-menu,
.list-menu-float .icon-menu:not(.setting):hover,
.list-menu-float .icon-menu,
.stats a:hover {
width: 26px !important;
}There are a few ways to change their colour. The easiest is to change the variables, which I go over in the main post somewhat. Here's a list of the button variables with their default values listed. These won't affect the rest of the page. .header, .list-menu-float, .stats, tbody:first-of-type {
/* backgrounds */
--bg: #fff;
--btn-bg: #ebebeb;
--btn-bg-h: #323232;
--btn-head-bg-h: #1d439b;
/* text colour */
--text: #323232;
--btn-text-h: #fff;
}kome11037 said: 2. how can i remove the number that appears on the image 3. how can i remove the rated:pg13, the studio, and the start-end of watching an anime Disable the number, rated, studio, and start/end date columns in your list settings. kome11037 said: 4. how can i round the corner of the rectangles of the list Generally speaking you can round rectangles with the "border-radius" CSS property. You can find the correct selector using Inspect Element and add a border radius of various px. This won't necessarily work with every rectangle, but for 99% of them it should. For example, you can round the list rows with this selector: .list-item {
border-radius: 8px;
}This won't round the category colour on the left of each row, and border-radius doesn't work nicely with that bar without some tweaking (since it's so small by default the border-radius doesn't do much). But this would be some code that could round the bar as well: .data.status {
width: 8px !important; /* width should be at least as big as the border-radius */
background: none !important;
border-radius: 8px 0 0 8px;
border-left: 1px solid #000 !important;
}
/* by default the status bar using the background property for colour, so this code just re-adds the per-category colours but on the border property instead of the background */
.data.status.watching,
.data.status.reading {
border-color: var(--watching) !important;
} .list-table .data.status.completed {
border-color: var(--completed) !important;
} .data.status.onhold {
border-color: var(--onhold) !important;
} .data.status.dropped {
border-color: var(--dropped) !important;
} .data.status.plantowatch,
.data.status.plantoread {
border-color: var(--plantowatch) !important;
}kome11037 said: 5. how to change the font of the section with all anime, watched, etc and the font for the anime names You could add a font-family property onto the relevant sections/selectors (these can be found with Inspect Element, similar to earlier). Here's some code for the sections you mentioned. For the category titles/buttons: .status-menu .status-button {
font-family: "Lobster" !important;
}Only the anime names? For that: .data.title .link.sort {
font-family: "Helvetica Neue";
}You can put any font name you have installed and it should display correctly to you. But for fonts to display to other people visiting your list without having to install the fonts themselves, you will have to do some extra steps. Shishio has a video on this which I believe covers the bases: https://myanimelist.net/forum/?topicid=1792455 kome11037 said: 6. how to remove the shadow from the banner The shadow is controlled by a pseudo element which has a gradient background. We can simply remove the entire element: .cover-block::before {
display: none;
} |
Valerio_Lyndon said: kome11037 said: 1. how can i change the home button, add button, etc so that they dont open when i hover over them (like just the circle icons stays) and how can i change the color when i hover over them Forcing their width will do the job for the sizing. .header .header-title:hover,
.header .header-menu .list-menu .icon-menu,
.list-menu-float .icon-menu:not(.setting):hover,
.list-menu-float .icon-menu,
.stats a:hover {
width: 26px !important;
}There are a few ways to change their colour. The easiest is to change the variables, which I go over in the main post somewhat. Here's a list of the button variables with their default values listed. These won't affect the rest of the page. .header, .list-menu-float, .stats, tbody:first-of-type {
/* backgrounds */
--bg: #fff;
--btn-bg: #ebebeb;
--btn-bg-h: #323232;
--btn-head-bg-h: #1d439b;
/* text colour */
--text: #323232;
--btn-text-h: #fff;
}kome11037 said: 2. how can i remove the number that appears on the image 3. how can i remove the rated:pg13, the studio, and the start-end of watching an anime Disable the number, rated, studio, and start/end date columns in your list settings. kome11037 said: 4. how can i round the corner of the rectangles of the list Generally speaking you can round rectangles with the "border-radius" CSS property. You can find the correct selector using Inspect Element and add a border radius of various px. This won't necessarily work with every rectangle, but for 99% of them it should. For example, you can round the list rows with this selector: .list-item {
border-radius: 8px;
}This won't round the category colour on the left of each row, and border-radius doesn't work nicely with that bar without some tweaking (since it's so small by default the border-radius doesn't do much). But this would be some code that could round the bar as well: .data.status {
width: 8px !important; /* width should be at least as big as the border-radius */
background: none !important;
border-radius: 8px 0 0 8px;
border-left: 1px solid #000 !important;
}
/* by default the status bar using the background property for colour, so this code just re-adds the per-category colours but on the border property instead of the background */
.data.status.watching,
.data.status.reading {
border-color: var(--watching) !important;
} .list-table .data.status.completed {
border-color: var(--completed) !important;
} .data.status.onhold {
border-color: var(--onhold) !important;
} .data.status.dropped {
border-color: var(--dropped) !important;
} .data.status.plantowatch,
.data.status.plantoread {
border-color: var(--plantowatch) !important;
}kome11037 said: 5. how to change the font of the section with all anime, watched, etc and the font for the anime names You could add a font-family property onto the relevant sections/selectors (these can be found with Inspect Element, similar to earlier). Here's some code for the sections you mentioned. For the category titles/buttons: .status-menu .status-button {
font-family: "Lobster" !important;
}Only the anime names? For that: .data.title .link.sort {
font-family: "Helvetica Neue";
}You can put any font name you have installed and it should display correctly to you. But for fonts to display to other people visiting your list without having to install the fonts themselves, you will have to do some extra steps. Shishio has a video on this which I believe covers the bases: https://myanimelist.net/forum/?topicid=1792455 kome11037 said: 6. how to remove the shadow from the banner The shadow is controlled by a pseudo element which has a gradient background. We can simply remove the entire element: .cover-block::before {
display: none;
}thank you so much !! this definitely helped a lot, i've been able to customize my list a bit more, though, i still do have a few questions, i'll leave them here but please take your time ! i know you may be busy so please don't rush it. thanks again for all the hard work ! my questions: 1. how to remove the bg of the scores 2. how to change the thickness of the avatar icon border and the size of the icon 3. how to center (top and bottom) the info in the list, what i mean is this: https://i.imgur.com/t67tGBa.png as you can see in the image the picture of the anime appears closer to the top, it's not centered between the top and the bottom, how do i fix that? 4. another small issue i have is this https://i.imgur.com/jMIIZc7.png how do i leave some space between the image and the info rectangle? |
ranitagridulceMay 25, 2022 2:20 AM
| I looked around in the first page of thread and couldn't find anything about this so could someone send the code to change: 1. The colors on the tabs (while selected and hovering on) and beside list entries that indicate "Completed", "Currently Watching", etc. -> Marked with Red 2. The opacity (while not hovering over it) of the box for the list entries for each page ("Completed", "Currently Watching", etc.) -> Marked with Blue 3. The outer glow for all the list entries boxes for each page ("Completed", "Currently Watching", etc.) -> Marked with Green Would like to have different colors/opacities for each page since I have a different design on each. Sorry if this was already covered before. Feel free to leave any suggestions for myanimelist as well. |
LXYXNMay 25, 2022 6:22 AM
 |
LXYXN said: I looked around in the first page of thread and couldn't find anything about this so could someone send the code to change: 1. The colors on the tabs (while selected and hovering on) and beside list entries that indicate "Completed", "Currently Watching", etc. -> Marked with Red 2. The opacity (while not hovering over it) of the box for the list entries for each page ("Completed", "Currently Watching", etc.) -> Marked with Blue 3. The outer glow for all the list entries boxes for each page ("Completed", "Currently Watching", etc.) -> Marked with Green Would like to have different colors/opacities for each page since I have a different design on each. Sorry if this was already covered before. Feel free to leave any suggestions for myanimelist as well. hello !! okay i think i can help with the first one, replace whats at the top of your code with this; https://pastebin.com/ShWZHJvi let me know if it worked !! |
kome11037 said: hello !! okay i think i can help with the first one, replace what's at the top of your code with this; https://pastebin.com/ShWZHJvi let me know if it worked !! It worked for the most part. However, since the "status colours" section was only used to change just that I find myself unable to change the color of the "All Anime" Tab. I was wondering if there was a way to change the colour of the "All Anime" Tab as well so I tried messing around with some of the other hex colour codes in the pastebin link you gave like in "Generic Colours", "Button Colours" and "Header Colours" sections but it didnt alter the look of anything in my list. I thought there were no colour changes occuring since I didn't replace the top bit of my code but that part was essential to the list so I couldn't afford to change it. Thanks for your help with the Status Colours Part! |
|
kome11037 said: 1. how to remove the bg of the scores .data.score a {
background: none;
}kome11037 said: 2. how to change the thickness of the avatar icon border and the size of the icon This is a bit more complex of an answer since the avatar icon is actually comprised of 3 different elements and has two different states: its regular state, and the minimised state once you scroll down the page. Also, the header and icons are all positioned under the assumption of the default avatar size so they should be changed too. The main changes that need to be made are modifying the "width" and "height" properties of both the ".status-menu::after", ".btn-menu a.username", and "[data-owner="1"] .list-menu-float .icon-menu.profile" selectors (copied from the base theme code). The .status-menu::after selector is the one that actually displays the visuals so that one also contains the "border" property which we can change the thickness of as mentioned. Explaining in detail this entire process would take longer than just giving you a working code sample so here you are. You can modify the "avatar-base-size" and "avatar-border-size" variables at the top to change the values. Disclaimer though for anyone reading, this code won't work with the header line modification. kome11037 said: 3. how to center (top and bottom) the info in the list, what i mean is this: https://i.imgur.com/t67tGBa.png as you can see in the image the picture of the anime appears closer to the top, it's not centered between the top and the bottom, how do i fix that? I don't see this on your list anymore, but it appears that you had the horizontal tags mod installed. This mod mentions that it adds a bit of spacing at the bottom of rows to allow room for the tag row. You can either remove the bottom padding (not recommended), or add extra top padding to match. Example adding of padding: .list-item {
padding-top: 11px;
}Example removal of padding: .list-item {
padding-bottom: 0px;
}kome11037 said: 4. another small issue i have is this https://i.imgur.com/jMIIZc7.png how do i leave some space between the image and the info rectangle? The large images are controlled by the ".data.image a::before" selector. We can simply change the "left" value. If you make further modifications to list elements, you may need to modify this again later on since it is position relative to the small image and not the list row. /* adjust large image positions */
.data.image a::before {
left: -184px; /* default is 166px*/
}Thanks for looking into LXYXN's issues. Speaking of, I will respond to your questions after work tomorrow @LXYXN. |
Valerio_Lyndon said: Thanks for looking into LXYXN's issues. Speaking of, I will respond to your questions after work tomorrow @LXYXN. Looking forward to it ^^ |
|
| Here we are. LXYXN said: 1. The colors on the tabs (while selected and hovering on) and beside list entries that indicate "Completed", "Currently Watching", etc. -> Marked with Red kome already answered part of your question, but to answer your question about the All Anime tab we can target it directly with this code. This includes the text colour since you have that modification installed. Just change the "white" colour to any colour you want. .status-menu .status-button:nth-of-type(1):hover {
color: white !important;
}
.status-button:nth-child(1)::after {
background: white !important;
}LXYXN said: 2. The opacity (while not hovering over it) of the box for the list entries for each page ("Completed", "Currently Watching", etc.) -> Marked with Blue /* All Anime */
[data-query*='"status":7'] .list-item {
background: rgba(0,0,0,0.2) !important;
}
/* Watching */
[data-query*='"status":1'] .list-item {
background: rgba(0,0,0,0.2) !important;
}
/* Completed */
[data-query*='"status":2'] .list-item {
background: rgba(0,0,0,0.2) !important;
}
/* On Hold */
[data-query*='"status":3'] .list-item {
background: rgba(0,0,0,0.2) !important;
}
/* Dropped */
[data-query*='"status":4'] .list-item {
background: rgba(0,0,0,0.2) !important;
}
/* Planned */
[data-query*='"status":6'] .list-item {
background: rgba(0,0,0,0.2) !important;
}The opacity is the last number of each RGBA value. Fully transparent would be 0, fully opaque is 1. You can find RGBA editors through any search engine. LXYXN said: 3. The outer glow for all the list entries boxes for each page ("Completed", "Currently Watching", etc.) -> Marked with Green Would like to have different colors/opacities for each page since I have a different design on each. /* All Anime */
[data-query*='"status":7'] .list-table-data:hover {
background: black;
box-shadow: 1px 1px 15px 9px #F446F8;
}
/* Watching */
[data-query*='"status":1'] .list-table-data:hover {
background: black;
box-shadow: 1px 1px 15px 9px #F446F8;
}
/* Completed */
[data-query*='"status":2'] .list-table-data:hover {
background: black;
box-shadow: 1px 1px 15px 9px #F446F8;
}
/* On Hold */
[data-query*='"status":3'] .list-table-data:hover {
background: black;
box-shadow: 1px 1px 15px 9px #F446F8;
}
/* Dropped */
[data-query*='"status":4'] .list-table-data:hover {
background: black;
box-shadow: 1px 1px 15px 9px #F446F8;
}
/* Planned */
[data-query*='"status":6'] .list-table-data:hover {
background: black;
box-shadow: 1px 1px 15px 9px #F446F8;
}The background on hover is each instance of "black" here, under each "background" property. The box-shadow is the "#F446F8" at the end of each "box-shadow" property. This code also includes the background of the rows while hovered since they use the same CSS selector and I figured you may want that option to go with your earlier request. --- Side note on the technical part of this code, most CSS selectors can be changed from univeral to per-category by adding body[data-query*='"status":7'] to the beginning of the selector. You can see in the above code that all the per-category code is controlled with various data-query selectors with different numbers. 7 is all anime, 1 is watching, 2 is completed, 3 is on hold, 4 is dropped, and 6 is planned. I didn't forget 5, it just doesn't exist. |
Valerio_Lyndon said: .status-menu .status-button:nth-of-type(1):hover {
color: white !important;
}
.status-button:nth-child(1)::after {
background: white !important;
}The code worked in changing the color of the bar but I couldn't get it change the text color of the "All Anime" Tab.  The code for 2. and 3. functioned perfectly. TYSM! Valerio_Lyndon said: Side note on the technical part of this code - Appreciate the extra bit of info. It was quite insightful. Unfortunately my attempts to use that to edit the existing code to make slight changes to the color of some of the miscellaneous buttons, text and their hover color aren't going too well. It results in making the changes to all the pages instead one Individual page. Here's the attempt: Wasn't quite sure on what to include after the data query selector but I can see that I'm either missing something there or doing it completely wrong. Thanks again for all your help! |
|
LXYXN said: The code worked in changing the color of the bar but I couldn't get it change the text color of the "All Anime" Tab. Ah I see. The reason for that is two-fold: I forgot a selector which controls the colour while active (I only had the selector for mouse hover), and due to the code being placed above your other mods it was being overridden by the original header text mod. Replace your All Anime Tab section with this replacement code. It should fix both issues without you having to move the code down. But for debugging purposes, it's always good to try placing the code at the bottom to check for conflicts. /*-S-T-A-R-T--------------------*\
| All Anime Tab |
\*------------------------------*/
#status-menu .status-button.on:nth-of-type(1),
#status-menu .status-button:nth-of-type(1):hover {
color: #A53D7D !important;
}
.status-button:nth-child(1)::after {
background: #A53D7D !important;
}
/*------------------------E-N-D-*/LXYXN said: Valerio_Lyndon said: Side note on the technical part of this code - Appreciate the extra bit of info. It was quite insightful. Unfortunately my attempts to use that to edit the existing code to make slight changes to the color of some of the miscellaneous buttons, text and their hover color aren't going too well. It results in making the changes to all the pages instead one Individual page. Wasn't quite sure on what to include after the data query selector but I can see that I'm either missing something there or doing it completely wrong. You'll need to move the data-query section to the selector area, right before the curly brace. Curly brace sections contain the properties and values while the selectors before them define what the properties apply to. In this instance, you could simply replace the ":root" text, as it is one of the exceptions to the rule. The :root selector refers to the entire page, while the data-query selector refers to something inside the page. So the data-query would go after (or 'inside') the :root. This goes for only the "html", ":root", and "body" selectors, everything else will be placed after the data-query. And in this case, we can also just replace the original selector entirely since we're only replacing variables. For an example where it would be placed at the beginning, you could take the list row code found under your "list colors" section. This is the code I modified earlier when you asked about it.  If we take that ".list-table-data:hover" selectors (the list rows), we can turn it into a per-category code by duplicating it and adding the data-query text. /* All Anime */
[data-query*='"status":7'] .list-table-data:hover {
background: purple;
box-shadow: 1px 1px 15px 9px #F446F8;
}
/* Watching */
[data-query*='"status":1'] .list-table-data:hover {
background: white;
box-shadow: 1px 1px 15px 9px #F446F8;
} |
Valerio_Lyndon said: In this instance, you could simply replace the ":root" text, as it is one of the exceptions to the rule. The :root selector refers to the entire page, while the data-query selector refers to something inside the page. So the data-query would go after (or 'inside') the :root. This goes for only the "html", ":root", and "body" selectors, everything else will be placed after the data-query. And in this case, we can also just replace the original selector entirely since we're only replacing variables. Thanks Sensei o7 I'll try some personalizing using this info. |
|
| I have a question, I'm trying to have tags with description that also have background color but I cant get it to work :(? In the guide you did them seperate but is it possible to have both a hover description on tag + background color? Edit: NVM I got it working by placing the same code twice but one for color and one for description, perhaps there is a better way tho? |
delanodbJun 8, 2022 5:47 AM
| Ok so, I'm editing the favourite hearts icon what I'm trying to do is copy that code, edit the position, tags and content. Everything works but the the content is empty :(?? |
delanodb said: Ok so, I'm editing the favourite hearts icon what I'm trying to do is copy that code, edit the position, tags and content. Everything works but the the content is empty :(?? you can't copy that code without making adjustments for allowing it to be copied, you can remove the conflicting code which may end up being some odd amount of work and affect other tags that are not Fav or you can add :not([href*="=Favo"]):not([href*="=Diam"]) to each
.data.tags span a:not([href*="=Favo"])::before {
/* content: ""; */
/* top: 17px; */
left: 50%;
/* border-width: 5px; */
/* border-style: solid; */
border-color: transparent transparent var(--text-dim) transparent;
margin-left: -10px;
}
.data.tags span a:not([href*="=Favo"])::after, .data.tags span a:not([href*="=Favo"])::before {
position: absolute;
z-index: 5;
display: block;
/* opacity: 0; */
transition: all .15s ease;
pointer-events: none;
}
.data.tags span a[href*="=Diamond"]:before {
content: "O";
font-size: 20px;
}
.data.tags span a:not([href*="=Favo"])::after, .data.tags span a:not([href*="=Favo"])::before {
position: absolute;
z-index: 5;
display: block;
/* opacity: 0; */
transition: all .15s ease;
pointer-events: none;
}
|
| My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
ShaggyZE said: Hmmm, thanks for helping, I'm trying the code you posted here and its giving me some weird effect I saved it incase you want to see what it does Its the diamond tag on kenpuu denki berserk in my anime listdelanodb said: Ok so, I'm editing the favourite hearts icon what I'm trying to do is copy that code, edit the position, tags and content. Everything works but the the content is empty :(?? you can't copy that code without making adjustments for allowing it to be copied, you can remove the conflicting code which may end up being some odd amount of work and affect other tags that are not Fav or you can add :not([href*="=Favo"]):not([href*="=Diam"]) to each
.data.tags span a:not([href*="=Favo"])::before {
/* content: ""; */
/* top: 17px; */
left: 50%;
/* border-width: 5px; */
/* border-style: solid; */
border-color: transparent transparent var(--text-dim) transparent;
margin-left: -10px;
}
.data.tags span a:not([href*="=Favo"])::after, .data.tags span a:not([href*="=Favo"])::before {
position: absolute;
z-index: 5;
display: block;
/* opacity: 0; */
transition: all .15s ease;
pointer-events: none;
}
.data.tags span a[href*="=Diamond"]:before {
content: "O";
font-size: 20px;
}
.data.tags span a:not([href*="=Favo"])::after, .data.tags span a:not([href*="=Favo"])::before {
position: absolute;
z-index: 5;
display: block;
/* opacity: 0; */
transition: all .15s ease;
pointer-events: none;
}
|
| @delanodb I wouldn't use the code I posted, it's just an example of the conflict areas and by commenting out opacity: 0; you can now see the content (which was your problem) as I said if you do it that way it will cause some odd problems so it's better for you to add :not([href*="=Diam"]) to anywhere :not([href*="=Favo"]) is or wait for V.L to come up with a more elegant solution. |
| My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
delanodb said: So you wanted help changing the appearance, or changing what tag it applies to? Or both?Ok so, I'm editing the favourite hearts icon what I'm trying to do is copy that code, edit the position, tags and content. Everything works but the the content is empty :(?? I can help you make it look just about however you want, but I'll need to know how you want it to look and what troubles you're currently encountering. Right now it looks like you've figured out the positioning, but without seeing a code sample and/or image of the content problem you were having and a description of how it was supposed to be I can't really tell you much.  Generally speaking changing the "content" property is all you have to do to modify the icon. Just make sure to not remove the quotes. If the icon is positioned wrong then we may have to modify the line-height, text-align, font-size, or text-indent properties. If you wanted a longer text then we might have to change the width and border-radius. That's about all the info I can give without more detail.  |
Valerio_Lyndon said: delanodb said: So you wanted help changing the appearance, or changing what tag it applies to? Or both?Ok so, I'm editing the favourite hearts icon what I'm trying to do is copy that code, edit the position, tags and content. Everything works but the the content is empty :(?? I can help you make it look just about however you want, but I'll need to know how you want it to look and what troubles you're currently encountering. Right now it looks like you've figured out the positioning, but without seeing a code sample and/or image of the content problem you were having and a description of how it was supposed to be I can't really tell you much. Generally speaking changing the "content" property is all you have to do to modify the icon. Just make sure to not remove the quotes. If the icon is positioned wrong then we may have to modify the line-height, text-align, font-size, or text-indent properties. If you wanted a longer text then we might have to change the width and border-radius. That's about all the info I can give without more detail. Thanks for your reply <3 So I editid this in paint quickly to get the idea https://i.postimg.cc/qBZ4R5R3/Naamloos.png This is how I want to make it Edit: I was able to position a tag next to the favourite but it was more oval instead of a circle and it would not show any text or emoji in the center Edit 2: I got it working by kind of a workaround all tags had to start with Favo |
delanodbJun 9, 2022 4:44 AM
delanodb said: Ah I see. Glad you pretty much figured it out though andy ou've already figured out the copying/pasting to add new tags.Thanks for your reply <3 So I editid this in paint quickly to get the idea https://i.postimg.cc/qBZ4R5R3/Naamloos.png This is how I want to make it Edit: I was able to position a tag next to the favourite but it was more oval instead of a circle and it would not show any text or emoji in the center Edit 2: I got it working by kind of a workaround all tags had to start with Favo Normally you wouldn't have to prefix them all with "Favo", but that might actually be the most elegant solution in this case. This is because the Horizontal Tags mod changes how tags appear and has specific exclusions for the Favourite tag (or rather, tags beginning with Favo). The Tag Desc Basis mod also includes exclusions for the Favourite tag (quite a few of them). So, you could avoid prefixes entirely by modifying the other mods everywhere the "Favo" text appears. For example, changing: a:not([href*="=Favo"])::after a:not([href*="=Favo"]):not([href*="=Gem"]):not([href*="=King"])::after But the "Favo" text is repeated through the horizontal tags and tag desc basis mod quite a few times and this all gets very verbose and rather annoying to maintain quite quickly lol. Up to you if you want to go down that path. The other option as I mentioned would be to keep a prefix for all your repositioned tags. This prefix doesn't have to be "Favo" of course, it can be anything other tags won't start with. But maintaining one tag prefix instead of three is definitely easier. delanodb said: I have a question, I'm trying to have tags with description that also have background color but I cant get it to work :(? In the guide you did them seperate but is it possible to have both a hover description on tag + background color? Edit: NVM I got it working by placing the same code twice but one for color and one for description, perhaps there is a better way tho? Forgot to respond to this the other night. Sadly the descriptions and tag backgrounds/colours have to be separate selectors as they are being applied to different elements on the page. The only one you could combine into the same selector is the tag description's background or color (not the tag itself, but the desription popup). Of course, you can put this code next to each other to keep it organised. |
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 |