Valerio_Lyndon said: YoshePlays said: First of all, thank you so much for dedicating this much time to the community, I can imagine how much of a hassle it would be to cater to the mass amounts of support request from people. It can be interesting! YoshePlays said: 1. It appears that the long reviews which use CSS aren't displayed anymore. 2. For series that are made by an unknown studio, it overflows into a new line. 3. Would tag descriptions like this be possible? https://i.imgur.com/CpeGxdK.png Good catches. This new version should fix those issues and add descriptions. Use it to replace what you added previously. Here's a comparison of the changes: [Comparison]. I found this, I want to do the same thing but it also moved the Studios to the bottom row? Before : https://prnt.sc/hGZ4ubU05W1K After: https://prnt.sc/57ClqyRyUjva https://prnt.sc/enqiDDBTUqTr Does this code still work? Edit: Also found this post with code https://myanimelist.net/forum/?topicid=1723114&show=650#msg62088213 This one is preferable if it still works somehow seems easier to position it anywhere, but the same thing happens https://prnt.sc/a740vW8MpKJv https://prnt.sc/H4N6KjK0jPuf Edit 2: Atleast I fixed the studio placement now I just hade to /* */ some code oops. Edit 3: I fixed it but the only thing I cant get working is the background not being transparent before you hover (only when you hover it shows a color) https://prnt.sc/Fle94rFHSRoP Edit 4: I fixed everything and it's working now :o Never knew I was gonna learn css on mal, anyway thanks for this amazing custom list design !! |
delanodbJun 12, 2022 3:29 PM
delanodb said: Edit 4: I fixed everything and it's working now :o Never knew I was gonna learn css on mal, anyway thanks for this amazing custom list design !! You figured everything out then? Nice! Poking around with the code yourself is a great way to learn CSS, glad you're having a successful time of it. Loving the colours of your list btw. If you need anything else just let me know. |
delanodb said: Edit 4: I fixed everything and it's working now :o Never knew I was gonna learn css on mal, anyway thanks for this amazing custom list design !! Looks real nice now. Was checking the progress of your list in the past few days. Liking the colors as well. And yeah CSS is super fun, especially when you can make happen what you envision. @delanodb thanks ^–^ |
GodOfRoarJun 15, 2022 3:14 AM
matolcsim said: delanodb said: Edit 4: I fixed everything and it's working now :o Never knew I was gonna learn css on mal, anyway thanks for this amazing custom list design !! Looks real nice now. Was checking the progress of your list in the past few days. Liking the colors as well. And yeah CSS is super fun, especially when you can make happen what you envision. I really like your list too ^^ |
| All line numbers are approximate as they will change as you change the code. You can use CTRL+F to find in the code the exact text. emUBC said: 1. would it be possible to rename "on hold" to "shortlist" (this is what i use on hold for, essentially the same as Anilist's prioritized planning if you've heard of it)? this was relatively easy for me on Brink but i might be missing something on Clarity as finding and replacing all onhold's has yielded no results. You can do that like so: /* Rename On Hold Category */
.status-button.onhold {
font-size: 0 !important;
}
.status-button.onhold::before {
font-size: 17.6px;
content: "Shortlist";
}Renaming the code didn't work because all the "onhold" texts in the code are CSS selectors referring to the pages HTML. Thus, changing these would only work if the HTML itself was different. You can see in the code above it is still referring to the "onhold" HTML, but through CSS we are replacing the text with a new "Shortlist" text. emUBC said: 6. i tried using the curved list rows mod here and modified the box shadow and hover expansion mods to add the rounded edges, but i cannot for the life of me figure out how to change the edit tags button to adhere to the curve. i changed some CSS surrounding this element so it's still lingering around somewhere, but i'm too lazy to hunt it down and remove it all. you'll see it in my code, i don't know CSS at all and just tried plugging in fixes into other mods Looks like an oversight that no one ever mentioned to me, whoops. This code should do it. /* Rounded edit button to match list items */
.tags .edit {
background: none !important;
overflow: hidden;
}
.tags .edit::before {
content: "";
position: absolute;
right: 0;
width: 25px;
height: 100%;
background: var(--edit-btn);
border-radius: 0 20px 20px 0;
transition: inherit;
pointer-events: none;
}It's unfortunately more complex than simply adding border-radius. Since border-radius can't bend shapes beyond their width or height, we have to increase the width to match. Or in this case, adding a new, wider element for the background. emUBC said: 2. i'm using your updated CCS with MALFOX for category headings in "all anime" selection. is there a way to change the colour of each category to match its respective colour instead of being white? Like this image, I take it.  I haven't (yet?) included a way to modify the code with those extensions, so you'll have to remove your current userscript and style code in favour of some new replacement versions that allow what you're mentioning. So this section in your code, near line 180, needs to be deleted:  Then you can install this replacement userscript: https://dl.dropboxusercontent.com/s/u8gxbvdwei83n9e/MalFox%20Headers%20%28Custom%20Style%29.user.js And use this new styling code: /*-S-T-A-R-T--------------------*\
| Category Headers (Custom) |
\*------------------------------*/
[data-query*='"status":7']:not([data-query*=order]):not([data-query*='tag"']):not([data-query*='"s"']) .list-item:nth-child(2){margin-top:32px}
.list-item .status:before{position:absolute;top:-40px;left:0;display:block;width:1060px;height:32px;background:none !important;font:20px/32px Oswald;text-align:center;letter-spacing:1px;text-transform:uppercase;pointer-events:none}
.status.watching::before,
.status.reading::before {
color: var(--watching);
} .status.completed::before {
color: var(--completed);
} .status.onhold::before {
color: var(--onhold);
} .status.dropped::before {
color: var(--dropped);
} .status.plantowatch::before,
.status.plantoread::before {
color: var(--plantowatch);
}
/*------------------------E-N-D-*/emUBC said: 8. i actually just noticed this today, but when i hover over a list row, the anime number loses its background and becomes transparent. is there a fix for this? This is a bug regarding the row enlarging on hover. The only fix (that I know of) for this is changing how the number transparency works. You can remove the image entirely and have regular CSS transparency, which looks a bit different but solves the issue: /* Fix for enlarged rows on hover with transparent backgrounds */
.data.number { background: var(--row-tint) !important; } Not sure if I mentioned it in an earlier post, but using the transform to enlarge rows like that fucks with a bunch of the other CSS and is part of why I don't advertise it. Basically the background image on the number is no longer fixed to the page, but the row itself, causing it to become a lot smaller. Same happens on the Priority column, but since you don't have that enabled it isn't an issue for you. emUBC said: 3. is there a way to put a shadow around the score circle (similar to a box shadow but for circles) for certain scores when using the tag-based score decimal mod? not too sure if my implementation of it was the most efficient as i basically macgyver'ed the earlier comments to fit the way i wanted my list to function, so if not, that's alright. if pertinent, i only want the shadow for "10", "9.5", and "9". it's a bit hard to explain, but in Brink terms, say i set a 9.5 silver rating to the colour orange, could a 9.5 circle have an soft orange glow around it? kind of like this (but softer and thinner, of course) perpetually, not just on hover. Without committing to either only tags or only the score, this seems a bit headache-inducing to implement. It's not hard to add a shadow to the regular score or to the tag score. The regular score has classes we can use, while the tag score has the tag URL to use so both are possible. But the tag score is layered over top of the original score, so using a semi-transparent shadow on both the regular and tag scores mean they will be layered together. So an anime that has a "9" score with a blue shadow and a "9.5" tag score with a red shadow will end up appearing partially purple. Example Image In summary, as long as you don't mind the shadows layering over top of each other, this is doable. However, if you want the shadows to not layer then you would have to only style the regular scores or use tag scores on every item (including regular single-number scores). Anyway, here's some usable code if you want to play with it/see how it looks. This code only applies to "9" or "9.5" scores but is easily usable for other scores. Regular "9" scores: /* Styling for all scores */
.data.score .score-label {
width: 26px;
height: 26px;
border-radius: 13px;
display: block;
}
/* Styling for specific score numbers */
.data.score .score-9 {
box-shadow: 0 0 3px goldenrod;
}Tag-based "9.5" scores: .data.tags a[href$="=9.5"] {
box-shadow: 0 0 3px red;
}emUBC said: 7. can i set a unique box shadow colour depending on the score of the anime being hovered over? basically the way you've implemented gold, silver, and bronze rating on Brink but for Clarity's hover and my tag-based scoring. if not, then manually assigning it similar to the way i put in the hearts mod is also fine with me. example: madoka magica's hover box shadow would be the same colour as the "gold" rating i assign my 10's instead of the default white (as well as the same colour of the aforementioned circle shadow if that's possible) You can do this with regular scores, and can find that code below. If you don't remove the regular base shadow then it will encounter the same layering issue where the shadows will combine. This is because to make it score-coloured we lose the ability to dynamically replace the shadow of the main row, we can only add a new one. Your current box shadow code is found near line ~120.  As for tag scores, due to how they are positioned this would be... troublesome. You'd have to replace your current Decimal Ratings section entirely to allow the new box shadow code to work. Here's the replacement section you would have to use: Then, you would have to delete part of the code from the comma fix. The code should be near line 100 under "Decimal Ratings Comma Fix 2" and you can see what to delete here:  And then you could add new code for decimal-based score shadows, which as per the previous comments would conflict with the regular score shadows if you were to use both at once. It's a bit of a mess for the decimal scores lol. emUBC said: 4. speaking of the tag-based decimal score mod, is there a way to prevent the MAL-assigned score from appearing over the tag score upon hover? i skimmed earlier comments and couldn't find a way, though i wasn't too sure if this was a limitation of CSS or not. Ah yeah, this is completely possible. The reason that was included was mostly so that the decimal score wasn't getting in the way of your view while changing score. To remove it, simply find this code within the "Decimal Ratings" mod and delete it:  emUBC said: 5. is there also a way to make it so that unless the decimal score mod detects a .5 after a comma, it won't assign the rating to the score circle? i've tried tagging stuff like "tentative 8.5" but it just messes up the formatting since it detects a .5. no worries if this isn't possible. To be honest the easiest fix for this would be to add another character at the end of the tag. For instance, "tentative 8.5." That said, you could fix this with some more detailed CSS selectors. Find the "Decimal Ratings" section in your code near line ~28. You'll need to replace the outlined text: https://i.imgur.com/ZPFRRA4.png What you are replacing it with is this, which is a more complicated CSS selector that will target both the beginning and end of each tag so it can't mis-target anything else. .data.tags a[href$="=0.5"], .data.tags a[href$="=1.5"], .data.tags a[href$="=2.5"], .data.tags a[href$="=3.5"], .data.tags a[href$="=4.5"], .data.tags a[href$="=5.5"], .data.tags a[href$="=6.5"], .data.tags a[href$="=7.5"], .data.tags a[href$="=8.5"], .data.tags a[href$="=9.5"] Here is what it should look like after the replacement. Make sure you still have the opening curly bracket: "{".  emUBC said: sorry if i didn't explain everything as best as i could, please let me know if you need any more clarification, and if certain combinations of my requests aren't possible with others. also, please take your time, you've helped myself and a lot of people out and i don't want you to feel obliged or rushed to help me. You seem to have explained it clearer than the average, so no worries there. In a similar vein, if any of my responses make no sense let me know. Some of the answers I gave are definitely "partial" answers in that you will have to copy/paste the score-specific section yourself to style more than the one score I provided in the examples, so if you need help with that I'll be around. emUBC said: you've helped me a lot on your Brink theme before your Theme Customizer came out - i've been using it today to switch over to Clarity which has been extremely helpful I'm glad to hear that! Thanks for letting me know about the customiser it can be hard to develop tools without feedback. |
| thanks so much!! almost everything worked perfectly, there's just one thing: Valerio_Lyndon said: As for tag scores, due to how they are positioned this would be... troublesome. You'd have to replace your current Decimal Ratings section entirely to allow the new box shadow code to work. Here's the replacement section you would have to use: Then, you would have to delete part of the code from the comma fix. The code should be near line 100 under "Decimal Ratings Comma Fix 2" and you can see what to delete here: implementing this code before even touching the box shadow border results in the following:
i currently don't have it on my CSS as a result. and secondly, when viewing "all anime", "on hold" still displays instead of "shortlist" |
pseudoAug 11, 2022 11:34 PM
emUBC said: implementing this code before even touching the box shadow border results in the following:
Hm, in my testing it looks like all the Decimal Ratings needs is an "!important" marker on the font size to remove it from the original location. I probably had a different code order while earlier testing, hence the problem. Here's the Decimal Ratings mod with that change made: Otherwise it all seems to work fine when I am testing. I don't see a box shadow on the tag score. If you're still having that issue though, you could try forcefully removing the shadow with an extra line of code at the bottom of your CSS: .data.tags a:not(.edit) { box-shadow: none !important; }Also, some of this CSS doesn't display in the preview correctly, so be sure to test it on your publicly-viewable list to see if anything changes there. I forgor 💀 I totally forgot that text showed up in another spot. That'll need another update to the userscript. I updated the same link as previously: https://dl.dropboxusercontent.com/s/u8gxbvdwei83n9e/MalFox%20Headers%20%28Custom%20Style%29.user.js One of these weeks I'll have to make a more easy to edit version of that userscript. Hopefully that fixes your issues, but if not I can look into it more as I have flexible time the next couple of days. |
Valerio_LyndonAug 19, 2022 12:39 AM
Valerio_Lyndon said: emUBC said: implementing this code before even touching the box shadow border results in the following:
Hm, in my testing it looks like all the Decimal Ratings needs is an "!important" marker on the font size to remove it from the original location. I probably had a different code order while earlier testing, hence the problem. Here's the Decimal Ratings mod with that change made: Otherwise it all seems to work fine when I am testing. I don't see a box shadow on the tag score. If you're still having that issue though, you could try forcefully removing the shadow with an extra line of code at the bottom of your CSS: .data.tags a:not(.edit) { box-shadow: none !important; }Also, some of this CSS doesn't display in the preview correctly, so be sure to test it on your publicly-viewable list to see if anything changes there. i feel bad for making you do all this, cause i ended up preferring the cleaner look of 9's and 9.5's having the same colours lol. thank you anyways, i appreciate it a lot! maybe in the future i'll give it a whirl in the meantime i just have a few more questions, hopefully i'll be out of your hair after these Valerio_Lyndon said: I forgor 💀 I totally forgot that text showed up in another spot. That'll need another update to the userscript. I updated the same link as previously: https://dl.dropboxusercontent.com/s/u8gxbvdwei83n9e/MalFox%20Headers%20%28Custom%20Style%29.user.js One of these weeks I'll have to make a more easy to edit version of that userscript. Hopefully that fixes your issues, but if not I can look into it more as I have flexible time the next couple of days. 1. thanks for this! related to this, though, when i hover on the "shortlist" on the categories bar, the little purple underline is longer than the word.  is this an artifact of the old "on hold" titling? 2. another unrelated inquiry, is it possible for there to be a little circle with an up arrow (like this exact image here) as a perpetual element on the bottom right, so that when it's clicked, it returns to the top of the page? i'm not sure if this is possible to do with CSS so no worries if it's not. i'm aware of keyboard shortcuts like CMD+Up Arrow but i would personally like a clickable version if it's doable. 3. when both the anime title or thumbnail are clicked to view an anime (see below), is it possible to have that open in a new tab by default rather than opening in the same tab?  4. when hovering over the first anime under a category header, the header also transforms/enlarges with it. is there a way to separate the transforming element of the anime list entry with the header and make the header stationary? i know the code and userscript for category headers are somewhat complex so if this is too headache-inducing to implement, no worries. 5. lastly, is there a way to make [airing] and [rewatching] white (#FFFFFF), while still keeping the edit and more buttons grey?  in the same vein, can the dashes between these three texts be replaced with a " | ", or is that not possible? |
pseudoAug 29, 2022 10:18 PM
| @muuyo Moving your post over here to the Clarity topic muuyo said: Anybody have any idea how I can make the decimal scores, as listed in this guide: https://myanimelist.net/forum/?topicid=1931627 work with the Clarity theme by Valerio Lyndon? I've screwed around with the CSS and where the code appends it, but nothing's worked for me. |
| Oh my God there's a forum topic And it has the decimal scores I was trying to get as a mod, thank you!! I'm having an issue with it though - it seems to be intercepting the "8.5" I'm adding as a tag to Beastars on my page, but it doesn't seem to be overlaying the score. (Also, is it possible for me to just clone this and replace the .5s with .1s,.2s, et cetera 8 times within the CSS?) Also, is there any central list of all custom mods that are in this forum topic? MAL forums don't support searching, and the only other place I know of a list are on the Github and the customizer. Finally, is it possible to cull the commas added at the start of a tag list? No worries if it's any trouble, just curious. |
emUBC said: 1. thanks for this! related to this, though, when i hover on the "shortlist" on the categories bar, the little purple underline is longer than the word. is this an artifact of the old "on hold" titling? Ah yeah, an oversight on my part. The letter-spacing was still being applied to the hidden text, causing a gap. Find the previously added code, should be around line ~425-434:  Replace it with this: /* Rename On Hold Category */
.status-button.onhold {
font-size: 0 !important;
letter-spacing: 0px !important;
}
.status-button.onhold::before {
letter-spacing: 1px;
font-size: 17.6px;
content: "Shortlist";
}emUBC said: 2. another unrelated inquiry, is it possible for there to be a little circle with an up arrow (like this exact image here) as a perpetual element on the bottom right, so that when it's clicked, it returns to the top of the page? i'm not sure if this is possible to do with CSS so no worries if it's not. i'm aware of keyboard shortcuts like CMD+Up Arrow but i would personally like a clickable version if it's doable. Adding functionality like this is not possible with CSS, you'd have to use a userscript. I didn't test it, but here's a script I found: https://greasyfork.org/en/scripts/381999-scroll-to-top-bottom-button emUBC said: 3. when both the anime title or thumbnail are clicked to view an anime (see below), is it possible to have that open in a new tab by default rather than opening in the same tab? This would be another userscript problem, since it's only possible through changes to the HTML. The script could add target="_blank". Here's a quick script for that: https://dl.dropboxusercontent.com/s/eonbl3w9b700z96/MyAnimeList%20Open%20Title%20Links%20in%20New%20Tab.user.js Obviously this would only work for you, same as all userscripts. But since it's a behavioural change not everyone would necessarily want it anyway. emUBC said: 4. lastly, when hovering over the first anime under a category header, the header also transforms/enlarges with it. is there a way to separate the transforming element of the anime list entry with the header and make the header stationary? i know the code and userscript for category headers are somewhat complex so if this is too headache-inducing to implement, no worries. This isn't a perfect fix, but you could add this CSS to sort of counter-act the list item transform. It may not look 100% perfect, but it's close to the best it will be without an entire re-work of the userscript (maybe for v2 of the script). /* Fix for List Item Transform with MalFox */
.list-item:hover .status::before {
transition: transform 0.35s ease;
transform: scale(0.9756) translateY(5%);
}emUBC said: 5. lastly, is there a way to make [airing] and [rewatching] white (#FFFFFF), while still keeping the edit and more buttons grey? https://i.imgur.com/mF5t5Th.jpg in the same vein, can the dashes between these three texts be replaced with a " | ", or is that not possible? This should do the trick. It's a bit more code than it could be since I split the first "|" from the content-status to prevent it being coloured white. The [] brackets will be coloured white no matter what we do though. /* Change add-edit-more/content-status divider symbols & change colour */
.content-status,
.rereading,
.rewatching {
color: white !important;
}
.content-status::after,
.rereading::after,
.rewatching::after {
content: "]";
}
.add-edit-more {
font-size: 0 !important;
}
.add-edit-more span {
font-size: 10px;
}
.add-edit-more span::before {
content: " | ";
white-space: pre;
}
/* hide the first divider when no content-status is present */
[class^="re"][style] + .content-status[style] + .add-edit-more span:first-child::before {
content: none;
}If you wanted to change the symbols from the pipe "|" symbol, then you can change the text inside of the double-quotes " | ". If you want to remove the first divider entirely and only have a symbol between the add & more buttons, then you could use this alternate code: |
Valerio_LyndonAug 30, 2022 1:58 PM
emUBC said: thanks so much Valerio! pretty much everything is as close to as i want it now. i know using a bunch of different mods all together might have been a bit cumbersome for you to work around on your end (especially with the decimal ratings and score colour mods, lol) but i'm really thankful for all the effort you put in for myself and for others. It can be tricky lol, but I've seen more complicated setups. If you need anything else let me know. |
| @Valerio_Lyndon could you tell me what are some of the most complicated setups you've done or seen? |
| @Shishio-kun Hm, I don't remember who's list was the most tricky to work with as it's been a while, but generally the more manual modifications are added the trickier it gets. For complex layouts all you need to do is check out the lists of a few frequent posters in this thread. :) There are probably more in my personal messages but I have 631 of those and can't be bothered to go back through them lmao. https://myanimelist.net/animelist/Uji_Gintoki_Bowl <- I helped out Gintoki a fair bit, but they figured out the rest. They entered this in one of the competitions a while back, really customised the list to the extreme! https://myanimelist.net/animelist/YoshePlays <- Shares a lot of mods with Gintoki, lots of information. https://myanimelist.net/animelist/Hakaminah <- Many style changes. They changed a fair bit of this themselves, and I helped out with the rest. https://myanimelist.net/animelist/Taduin <- This one I worked on a bunch. Lots of repositions, category-coloured items, and so-forth. Still using it since 2019 though! https://myanimelist.net/animelist/Powish <- Lots of customisation! I mostly just like the Hu Tao style. Scroll down to see the renders. https://myanimelist.net/animelist/jery_js <- MAL score, synopses, custom hover effects, they personalised their list a lot. https://myanimelist.net/animelist/Legends_of_anime <- The legend themselves. Lots of personal tweaks. https://myanimelist.net/animelist/Leguch <- Lots of recolours, and some features changes too. https://myanimelist.net/animelist/WhisperingAshes <- So many colours! Restyled some minor details here and there too. https://myanimelist.net/animelist/Yta_kawaii <- I don't remember if I helped them with this or not, but I know someone asked me about this before. They combined the Brink top bar with regular Clarity. Looks quite interesting! There were a couple more I think, Leospars and Sheycroix for instance, but some power users swapped over to Brink or Clarified. A couple honourable mentions here that I didn't work on. https://myanimelist.net/animelist/sunnysummerday <- Sunnysummerday's CSS is top class as always https://myanimelist.net/animelist/Cosmincreato <- took and converted Sunny's layout to dark mode https://myanimelist.net/animelist/YairPeretz <- Almost completely changed the top bar. |
| I managed to brute force it into working, the reason the decimals weren't showing up were because they don't seem to work in the MAL editor but they work when actually looking at the page. They were also off by about 200 pixels or so, but fixed that with just measuring the difference in Paint (this might have been due to paragraph-style tags or something?). And for anyone searching, yes, you can just copy paste it ten times and regex the decimal so you can put whatever you want. Still curious about these two though. muuyo said: Also, is there any central list of all custom mods that are in this forum topic? MAL forums don't support searching, and the only other place I know of a list are on the Github and the customizer. Finally, is it possible to cull the commas added at the start of a tag list? No worries if it's any trouble, just curious. |
muuyoAug 31, 2022 7:41 AM
Valerio_Lyndon said: If you need anything else let me know. i feel bad taking you up on this offer, but hopefully this is the last time for a while i'll be in your hair lol. a few things: 1. the [ Airing ] and [ Re-watching ] indicators on my list have a space between the square brackets and the word, as typed out. is there a way to get rid of the space so that it's just [Airing] and [Re-Watching]? (with the capital W on the Re-(W)atching if possible) the next few all have to do with the comments when you hit "More" under an anime: 2. can the "More" text turn white and have a subtle box shadow effect if it detects anything written under "Notes"?  if i have to manually set this for each anime entry (such as if auto-detection isn't possible), kind of like my heart indicator mods, i'm fine with that as i don't have terribly many i'd want to do this for. 3. as per the previous image, would it be possible to hide the period that is right after the "Notes:"? i mostly do this cause i like having the comments start on a new line. i remember you did a version of this for me for Brink, and i've tried porting over the CSS, but it doesn't really work in the manner i intend it to work and i unfortunately am not knowledgeable enough to fix it on my own (i tried lol) 4. can my notes/comments themselves be white text instead of grey like the rest of the "More" panel? i'd like both the "Notes" title itself as well as the comments themselves to be white. 5. this might be difficult, but if the "More" panel is expanded (regardless of if there's comments or not), is it possible to have both the coloured status indicator on the left side, as well as the box shadow extend to adhere with the expanded panel instead of just the list item itself? i have a feeling that this is kind of hard to do lol, so if it's too much work, i can definitely live without it. |
muuyo said: I managed to brute force it into working, the reason the decimals weren't showing up were because they don't seem to work in the MAL editor but they work when actually looking at the page. They were also off by about 200 pixels or so, but fixed that with just measuring the difference in Paint (this might have been due to paragraph-style tags or something?). Yes, there are some drawbacks to all the previous decimal score mods. The preview issue is a trade-off for better code, and the positioning is due to the janky method the decimal tags use for overriding the current score. It means that almost every change to the list columns or styling will require re-positioning the decimal scores to fix issues. I mentioned it somewhere when I first shared the code. I hope to avoid the positioning issue with an "official" decimal score mod later. muuyo said: Also, is there any central list of all custom mods that are in this forum topic? MAL forums don't support searching, and the only other place I know of a list are on the Github and the customizer. No, there isn't at the moment. Someone would have to make it. I haven't because I don't wish to advertise mods where many are flawed and/or are tailored to a users' specific set-up. I would feel on-the-hook for support at that point, so I don't do it. I instead refine and create improved versions of any mods popular enough to warrant it, and then add them to the official lists with proper installation guides. If a mod has only even been requested and used by one user then I usually never think about it again. muuyo said: Finally, is it possible to cull the commas added at the start of a tag list? No worries if it's any trouble, just curious. Not as phrased, no. Well, not unless every single entry had the same tags. However, we are able to get rid of commas at the end of the list in a round-a-bout way. First off, you will have to place your decimal and favourite tags (any tag that gets repositioned) at the very end of your tag list. Then we can use CSS to replace all the commas and remove them on the decimal tags. Here's some code for that: /* Decimal Ratings Comma Fix 3 */
.data.tags span {
font-size: 0 !important;
}
.data.tags span + span a:not([href*=".1"]):not([href*=".2"]):not([href*=".3"]):not([href*=".4"]):not([href*=".5"]):not([href*=".6"]):not([href*=".7"]):not([href*=".8"]):not([href*=".9"])::before {
content: ", ";
white-space: pre-wrap;
}
.data.tags span::after {
font-size: 11px;
} |
Valerio_LyndonSep 1, 2022 12:18 AM
Valerio_Lyndon said: @Shishio-kun Hm, I don't remember who's list was the most tricky to work with as it's been a while, but generally the more manual modifications are added the trickier it gets. For complex layouts all you need to do is check out the lists of a few frequent posters in this thread. :) There are probably more in my personal messages but I have 631 of those and can't be bothered to go back through them lmao. https://myanimelist.net/animelist/Uji_Gintoki_Bowl <- I helped out Gintoki a fair bit, but they figured out the rest. They entered this in one of the competitions a while back, really customised the list to the extreme! https://myanimelist.net/animelist/YoshePlays <- Shares a lot of mods with Gintoki, lots of information. https://myanimelist.net/animelist/Hakaminah <- Many style changes. They changed a fair bit of this themselves, and I helped out with the rest. https://myanimelist.net/animelist/Taduin <- This one I worked on a bunch. Lots of repositions, category-coloured items, and so-forth. Still using it since 2019 though! https://myanimelist.net/animelist/Powish <- Lots of customisation! I mostly just like the Hu Tao style. Scroll down to see the renders. https://myanimelist.net/animelist/jery_js <- MAL score, synopses, custom hover effects, they personalised their list a lot. https://myanimelist.net/animelist/Legends_of_anime <- The legend themselves. Lots of personal tweaks. https://myanimelist.net/animelist/Leguch <- Lots of recolours, and some features changes too. https://myanimelist.net/animelist/WhisperingAshes <- So many colours! Restyled some minor details here and there too. https://myanimelist.net/animelist/Yta_kawaii <- I don't remember if I helped them with this or not, but I know someone asked me about this before. They combined the Brink top bar with regular Clarity. Looks quite interesting! There were a couple more I think, Leospars and Sheycroix for instance, but some power users swapped over to Brink or Clarified. A couple honourable mentions here that I didn't work on. https://myanimelist.net/animelist/sunnysummerday <- Sunnysummerday's CSS is top class as always https://myanimelist.net/animelist/Cosmincreato <- took and converted Sunny's layout to dark mode https://myanimelist.net/animelist/YairPeretz <- Almost completely changed the top bar. Wow THIS IS AMAZING! Very cool, thanks, maybe we can feature all these somehow later for permanent recognition! You know jery_js was very helpful with the list design fixing in the past, so I'm going to invite him to the development group as I think he might want to help with certain projects later? He would also make a good designer. And I was hoping we'd get some feedback ppl later too. |
emUBC said: 1. the [ Airing ] and [ Re-watching ] indicators on my list have a space between the square brackets and the word, as typed out. is there a way to get rid of the space so that it's just [Airing] and [Re-Watching]? (with the capital W on the Re-(W)atching if possible) It isn't the most elegant solution, but you could do this with some negative margins: /* Content status bracket spacing */
.content-status::before,
.rereading::before,
.rewatching::before {
margin-right: -0.3em;
}
.content-status::after,
.rereading::after,
.rewatching::after {
margin-left: -0.3em;
}If the spacing doesn't look quite right, try incrementing the "-0.3em" values by .1 or .05 one way or another. emUBC said: 2. can the "More" text turn white and have a subtle box shadow effect if it detects anything written under "Notes"? if i have to manually set this for each anime entry (such as if auto-detection isn't possible), kind of like my heart indicator mods, i'm fine with that as i don't have terribly many i'd want to do this for. 3. as per the previous image, would it be possible to hide the period that is right after the "Notes:"? i mostly do this cause i like having the comments start on a new line. i remember you did a version of this for me for Brink, and i've tried porting over the CSS, but it doesn't really work in the manner i intend it to work and i unfortunately am not knowledgeable enough to fix it on my own (i tried lol) 4. can my notes/comments themselves be white text instead of grey like the rest of the "More" panel? i'd like both the "Notes" title itself as well as the comments themselves to be white. Sadly I don't think any of these are possible. CSS has no way to pick out text from the middle of a block without some better HTML, which doesn't exist in the More section. The way I did these tricks on Brink was to place everything before the notes onto a single line and then hide the first line, using the limited text selectors within CSS. This would be possible on Clarity, but you would of course lose all the information prior to the "Notes:" section. That said, all of these should be possible by using the recently added Notes column in the list settings. There are some caveats in that it will either be always displayed or displayed on hover, rather than within the More section. And it's still quite hard to style due to how they implemented this new column below the title by default. This new Notes section is disabled currently on Clarity, but it could be re-enabled through some more CSS. I just hadn't got around to writing a mod for it yet. emUBC said: 5. this might be difficult, but if the "More" panel is expanded (regardless of if there's comments or not), is it possible to have both the coloured status indicator on the left side, as well as the box shadow extend to adhere with the expanded panel instead of just the list item itself? i have a feeling that this is kind of hard to do lol, so if it's too much work, i can definitely live without it. Hm. This should be entirely possible by simply changing the element the various items are positioning themselves in relation to. This can be done by setting the list-table-data to static positining so that the items will position in relation to the list-item. .list-table-data {
position: static !important;
}This seems to work fine in my quick testing of it, but it maaay potentially break some positioning. For instance, I am confident this wouldn't work with horizontal tags. Give it a shot, anyhow. |
emUBC said: unfortunately as you guessed, it breaks decimal scoring positioning. after looking at the CSS a bit, since the decimal scores mod is set up to overlay based on a fixed absolute position, i'm assuming that there isn't a good element for a relative-positioned solution to anchor onto? or idk, i barely know CSS lol. anyways, if it's too cumbersome to manage to get the list-table-data statically positioned while still properly accounting for decimal scores, i wouldn't worry about trying to find a way to do it. i don't really use the "More" section all that much, and i'm assuming anyone viewing my list would use it a hundred times less, lol. That's an obvious one I should have checked for lol. Here's v2. It means the decimal tags should still be centered on the list row. .list-table-data {
position: static !important;
}
.tags div {
position: relative;
}Due to this change, we will need to change the "left" position for the decimal tags on line ~42. It's currently "438px". I believe changing it to "-118px" should work:  |
| @Valerio_Lyndon @Shishio-kun Sad that I didn't get an honorable mention for my manga list, but I understand, can't remember and name everyone whose ever used Clarity, also was based on Sheycroix's list and I didn't need V.L's help so just that they got mentioned is good enough, plan to submit it in next contest but doubt it will get #1 again cause I'm assuming that category will be removed if not enough people submit manga lists, I've been playing with those random PHP scripts that Shishio-kun posted awhile back to change multiple backgrounds, banners, renders so theoretically you could use an infinite amount of images that randomly get applied per refresh/category change. |
ShaggyZESep 3, 2022 7:11 PM
   My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
| @ShaggyZE Whoops, my bad. >_> I'll be honest everytime I saw your name I saw you helping people so I didn't even think to open the link despite knowing you had your own customised version lol. I was only opening animelists though so I wouldn't have caught it. Your mangalist is definitely one of the most heavily customised no doubt there. |
Valerio_Lyndon said: @Shishio-kun Hm, I don't remember who's list was the most tricky to work with as it's been a while, but generally the more manual modifications are added the trickier it gets. For complex layouts all you need to do is check out the lists of a few frequent posters in this thread. :) There are probably more in my personal messages but I have 631 of those and can't be bothered to go back through them lmao. https://myanimelist.net/animelist/Uji_Gintoki_Bowl <- I helped out Gintoki a fair bit, but they figured out the rest. They entered this in one of the competitions a while back, really customised the list to the extreme! https://myanimelist.net/animelist/YoshePlays <- Shares a lot of mods with Gintoki, lots of information. https://myanimelist.net/animelist/Hakaminah <- Many style changes. They changed a fair bit of this themselves, and I helped out with the rest. https://myanimelist.net/animelist/Taduin <- This one I worked on a bunch. Lots of repositions, category-coloured items, and so-forth. Still using it since 2019 though! https://myanimelist.net/animelist/Powish <- Lots of customisation! I mostly just like the Hu Tao style. Scroll down to see the renders. https://myanimelist.net/animelist/jery_js <- MAL score, synopses, custom hover effects, they personalised their list a lot. https://myanimelist.net/animelist/Legends_of_anime <- The legend themselves. Lots of personal tweaks. https://myanimelist.net/animelist/Leguch <- Lots of recolours, and some features changes too. https://myanimelist.net/animelist/WhisperingAshes <- So many colours! Restyled some minor details here and there too. https://myanimelist.net/animelist/Yta_kawaii <- I don't remember if I helped them with this or not, but I know someone asked me about this before. They combined the Brink top bar with regular Clarity. Looks quite interesting! There were a couple more I think, Leospars and Sheycroix for instance, but some power users swapped over to Brink or Clarified. A couple honourable mentions here that I didn't work on. https://myanimelist.net/animelist/sunnysummerday <- Sunnysummerday's CSS is top class as always https://myanimelist.net/animelist/Cosmincreato <- took and converted Sunny's layout to dark mode https://myanimelist.net/animelist/YairPeretz <- Almost completely changed the top bar.  Poggies it's me |
PowishSep 4, 2022 5:16 AM
   |
| The posted CSS addon works for removing commas, but as seen on my list, if Favorite tags are put on the end instead of at the beginning, the unicode heart symbol gets... chopped? I'm not sure how else to describe it. |
muuyo said: The posted CSS addon works for removing commas, but as seen on my list, if Favorite tags are put on the end instead of at the beginning, the unicode heart symbol gets... chopped? I'm not sure how else to describe it. Yep, that would be my mistake of forgetting about a mod as usual lol. Here's the revised version that accounts for favourite tags: /* Decimal Ratings Comma Fix 4 */
.data.tags span {
font-size: 0 !important;
}
.data.tags span ~ span a:not([href*="=Favo"]):not([href$=".1"]):not([href$=".2"]):not([href$=".3"]):not([href$=".4"]):not([href$=".5"]):not([href$=".6"]):not([href$=".7"]):not([href$=".8"]):not([href$=".9"])::before {
content: ", ";
white-space: pre-wrap;
}
.data.tags span::after {
font-size: 11px;
} |
| @Valerio_Lyndon I came back on this forum after a really long time. I've been busy with a lot of stuff (mainly school) so I couldn't be very active on mal, especially on forums. And I was trying to find the mal design code you gave me (that you were once working on but never finished) since my laptop had to be reset due to a virus attack... but man... while searching for it I cringed so freaking much going through my old posts. I used way too much caps, my English was bad, I was swearing way too much, and I was straight up being a bother sometimes. And I have no idea how you had to paitence to reply to me with all those factors taken into account, you'd have to have an insane level of paitence to deal with that mate. (Sorry if I wasn't supposed to post this here.) So, in the end I couldn't find the code for it, so I was hoping if you could share the code with me again if you still have it. The default UI looks way too ugly (and painful to my eyes). Hope you've been doing fine, and thanks. (ˉ﹃ˉ) |
   StoryGraph x Spotify x Instagram “Whether we die or not isn't really that big a deal." — Suzuya Juuzou |
Legends_of_animeAnimeListMangaListMessage said: @Valerio_Lyndon I came back on this forum after a really long time. I've been busy with a lot of stuff (mainly school) so I couldn't be very active on mal, especially on forums. And I was trying to find the mal design code you gave me (that you were once working on but never finished) since my laptop had to be reset due to a virus attack... but man... while searching for it I cringed so freaking much going through my old posts. I used way too much caps, my English was bad, I was swearing way too much, and I was straight up being a bother sometimes. And I have no idea how you had to paitence to reply to me with all those factors taken into account, you'd have to have an insane level of paitence to deal with that mate. (Sorry if I wasn't supposed to post this here.) So, in the end I couldn't find the code for it, so I was hoping if you could share the code with me again if you still have it. The default UI looks way too ugly (and painful to my eyes). Hope you've been doing fine, and thanks. (ˉ﹃ˉ) Don't worry about it lol. We've all looked back and felt that way. I didn't personally stop cringing at myself until about 21, but I think that's more to do with just accepting certain cringe-worthy parts of myself rather than not being cringe anymore. Is this the code you meant: https://pastebin.com/2TNVwrXs ? I've not been using/maintaining it recently so a lot of stuff has broken with the new updates to the website. I know Shaggy had their own version, but I don't know what is fixed or broken in that version. That's found here: https://userstyles.world/style/3414/myanimelist-redesign |
Valerio_Lyndon said: Legends_of_animeAnimeListMangaListMessage said: @Valerio_Lyndon I came back on this forum after a really long time. I've been busy with a lot of stuff (mainly school) so I couldn't be very active on mal, especially on forums. And I was trying to find the mal design code you gave me (that you were once working on but never finished) since my laptop had to be reset due to a virus attack... but man... while searching for it I cringed so freaking much going through my old posts. I used way too much caps, my English was bad, I was swearing way too much, and I was straight up being a bother sometimes. And I have no idea how you had to paitence to reply to me with all those factors taken into account, you'd have to have an insane level of paitence to deal with that mate. (Sorry if I wasn't supposed to post this here.) So, in the end I couldn't find the code for it, so I was hoping if you could share the code with me again if you still have it. The default UI looks way too ugly (and painful to my eyes). Hope you've been doing fine, and thanks. (ˉ﹃ˉ) Don't worry about it lol. We've all looked back and felt that way. I didn't personally stop cringing at myself until about 21, but I think that's more to do with just accepting certain cringe-worthy parts of myself rather than not being cringe anymore. Is this the code you meant: https://pastebin.com/2TNVwrXs ? I've not been using/maintaining it recently so a lot of stuff has broken with the new updates to the website. I know Shaggy had their own version, but I don't know what is fixed or broken in that version. That's found here: https://userstyles.world/style/3414/myanimelist-redesign Yes, this is exactly what I was talking about, thanks a lot. |
StoryGraph x Spotify x Instagram “Whether we die or not isn't really that big a deal." — Suzuya Juuzou |
Hi, is there a way to remove this edit button  It only shows when hovering the curser over. Thanks |
| Just installed this layout, it looks incredible. Thank you! |
Is there a way to remove the following; Header above the menu, profile icon when scrolled to the top of the page and the home button? [font="\"Proxima Nova Regular\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"] [/font] |
killhi12 said: Sorry I dont know the answer to that but I never knew about this button untill now and this is gonna save me so much time editing tags without having to reload the page lol thx.Hi, is there a way to remove this edit button It only shows when hovering the curser over. Thanks |
delanodb said: Is there a way to remove the following; Header above the menu, profile icon when scrolled to the top of the page and the home button? Did you still want help with this or did you solve it since? |
Shishio-kun said: I still need it fixed :Ddelanodb said: Is there a way to remove the following; Header above the menu, profile icon when scrolled to the top of the page and the home button? Did you still want help with this or did you solve it since? |
delanodb said: I still need it fixed :D Try adding this to the bottom of the CSS edit box where you entered the code, it should move the home icon to the right of the other icons :D .header .header-title {
position: static;
margin-left: 380px !important;
margin-top: 109px !important;
} |
| @Valerio_Lyndon I think could be an error with dark Clarity and the new notes feature? I tried this user's layout and looked at my own notes it didn't seem to work right. https://imgur.com/VAoKW9A Btw the notes codes I've used on other layouts are: .list-table .list-table-data .data.title .notes .text{
}
.list-table .list-table-data .data.title .notes .text:hover {
}
.list-table .list-table-data .data.title .notes *{
}
.list-table .list-table-data .data.title .notes .edit{
}
* is for the note editing box I think which was a pain to find so I just hammered it with an asterix, notes edit is the "edit notes" link iirc. Thankfully notes are not as much a mess as the damn tags! D: |
Shishio-kunAnimeListMangaListMessage said: @Valerio_Lyndon I think could be an error with dark Clarity and the new notes feature? I tried this user's layout and looked at my own notes it didn't seem to work right. https://imgur.com/VAoKW9A Btw the notes codes I've used on other layouts are: .list-table .list-table-data .data.title .notes .text{
}
.list-table .list-table-data .data.title .notes .text:hover {
}
.list-table .list-table-data .data.title .notes *{
}
.list-table .list-table-data .data.title .notes .edit{
}
* is for the note editing box I think which was a pain to find so I just hammered it with an asterix, notes edit is the "edit notes" link iirc. Thankfully notes are not as much a mess as the damn tags! D: I believe this is just what happens when older versions of Clarity are used with Notes. I did make a mod to add support for notes though which you can find here: [Link] Sadly it isn't part of default functionality right now as styling the notes how the default list displays them would break too many people's lists and I didn't have any good ideas at the time since I was rushing. That said, I can think of a few ways to add the notes now I am coming at it with a fresh mind. Perhaps it's time for the next Clarity version with at least some form of Notes support. |
Valerio_LyndonMar 21, 2023 9:36 PM
OK I understand and that's a good point. I guess in the future we could mass message everyone to update to the newest versions or use the latest mods in order to make full use of the features! Please don't ever hesitate to ask if you want to use the mass message feature for something :D |
Valerio_Lyndon said: Uji_Gintoki_Bowl said: Before I begin this request, I wanted to thank you for all the work you do for us and our lists. It's really helpful and I can only imagine how much time it takes. Thank you! Okay, so you can probably guess from the post I quoted, but I would like something similar to Yoshe's list with the individual ratings. In fact, exactly how he has it on his list currently is how I'd like it as well (colors and all. I'll likely change the labels though). Is there a way you could do it for my list as shown in the awful drawing below (colors used are completely irrelevant)?  The positioning of the pins it is in line with is ' top:calc(50% + 10px); '. Also, it is very very likely that I won't be ranking all entries, so ones without tags should have a dash in all unranked categories. If there is anything that directly conflicts with making this tagging possible, please let me know. I hope this isn't too large of a request. Thank you so much again for all of your work! Try this out. I hope I didn't miss anything, but let me know if I did. There are two variables near the top labelled x-offset and y-offset to assist in changing the position easier if need be. The same notes apply to the usage of this version: Valerio_Lyndon said: This code relies on a few things. Firstly, you must place all the scores at the end of your tag section, even after decimal scores, so your tags should be ordered: review/other tags -> decimal rating -> advanced scoring. Secondly, you must have all 5 numbers for them to position correctly. If you do not have a score for one of the sections, just use a "-". Here's an example of tags that should work when placed at the end of one of your tag sections: "6,10,7,-,9". Yet another note, these tags are not searchable nor sortable. As we are just using numbers, there is no distinguishing factor to find them by. Even if we did use a prefix on the numbers, you'd still only be able to find others of the same score. So if you scored something ST:2, then you'd only be able to find other entries that were scored 2 of your ST category. Since this would be such a minor function and use up more of the tag character limit, I didn't bother with prefixes. To change box colours, you'll need to change the #212121 colour twice for each box. You can find the relevant section near the top of the provided code, under "add decorative score background". Pictured here:  To change the text colour, find the sections further down in the code labelled "box # colour". Change "var(--text)" to any colour.  This code works perfectly fine...I've just been trying to find where in the code to make the blocks solid colors and not just it turning a color when being hovered over otherwise I feel it may be hard to see on my list. If you could direct me to the line or a code it would be very much appreciated. |
 |
Hello, how do I get these icons in the header, as done in Clarified:  and how do I also get the icons beside the anime logos (and maybe also the outline around the anime):  Thanks in advance |
 |
ItsAvu said: This code works perfectly fine...I've just been trying to find where in the code to make the blocks solid colors and not just it turning a color when being hovered over otherwise I feel it may be hard to see on my list. If you could direct me to the line or a code it would be very much appreciated. The base box colours are near the start of the code in the linear-gradient section. Each box is controlled by two duplicate colour codes.  To change the first box, we could change the two "#24986D" sections to, for instance, "silver".  If I misunderstood and you're having an issue with tag backgrounds, that is fixable by removing the background colours. The box should look like this when you first install the code:  If it instead looks like this...  ... then the backgrounds are an issue. If needed, remove the backgrounds by adding this CSS the base tag styling: background: transparent !important;  |
Ruse125 said: Hello, how do I get these icons in the header, as done in Clarified: and how do I also get the icons beside the anime logos (and maybe also the outline around the anime): Thanks in advance Use Clarified ;3 The code for header icons, modified to best fit Clarity, is as follows: And this code will give you the status icons and image borders. All new code should go at the bottom of your CSS. For future reference, you can find the CSS for such features by using Inspect Element and copy-pasting the relevant CSS. Shishio also has CSS tutorials to tweak anything that may be broken after copy-pasting. |
Valerio_LyndonMar 25, 2023 3:35 PM
| @Valerio_Lyndon Thanks for helping them! Ruse's Clarity remix looks great too https://myanimelist.net/animelist/Ruse125 |
Valerio_Lyndon said: Thanks for the help, and thanks for the praise @Shishio-kun, I'll try to update it more if I find something cool.Ruse125 said: Hello, how do I get these icons in the header, as done in Clarified: and how do I also get the icons beside the anime logos (and maybe also the outline around the anime): Thanks in advance Use Clarified ;3 The code for header icons, modified to best fit Clarity, is as follows: And this code will give you the status icons and image borders. All new code should go at the bottom of your CSS. For future reference, you can find the CSS for such features by using Inspect Element and copy-pasting the relevant CSS. Shishio also has CSS tutorials to tweak anything that may be broken after copy-pasting. |
|
Shishio-kun said: I'm happy they finally added a notes section however this means I'm having trouble figuring out how to restyle the code for the notes. I see below from Valerio that it may be either impossible right now or a difficult code to make. I have a vision of adding a note section using the comic speech bubble tag that you used on your older manga styled list with this code here: @Valerio_Lyndon I think could be an error with dark Clarity and the new notes feature? I tried this user's layout and looked at my own notes it didn't seem to work right. https://imgur.com/VAoKW9A Btw the notes codes I've used on other layouts are: .list-table .list-table-data .data.title .notes .text{
}
.list-table .list-table-data .data.title .notes .text:hover {
}
.list-table .list-table-data .data.title .notes *{
}
.list-table .list-table-data .data.title .notes .edit{
}
* is for the note editing box I think which was a pain to find so I just hammered it with an asterix, notes edit is the "edit notes" link iirc. Thankfully notes are not as much a mess as the damn tags! D: I tried to switch out the data tags to notes based on the code that you and Valerio have linked but I can't seem to get it to show/work. I understand this may be difficult code so don't hold back on any feedback. |
|
ItsAvu said: I'm happy they finally added a notes section however this means I'm having trouble figuring out how to restyle the code for the notes. I see below from Valerio that it may be either impossible right now or a difficult code to make. I have a vision of adding a note section using the comic speech bubble tag that you used on your older manga styled list with this code here: I tried to switch out the data tags to notes based on the code that you and Valerio have linked but I can't seem to get it to show/work. I understand this may be difficult code so don't hold back on any feedback. What I was talking about with Notes earlier in this thread was about any changes I make to the default Clarity code breaking lists that users had already customised. Due to some of this theme's history I have to be careful about how I update it like that. The actual notes themselves are not any harder to style than other parts of the list, depending on what you're doing. Sorry for any confusion. In this case your changes most likely didn't work because the notes area isn't its own list column with a ".data" class like most options on the list, but is instead a child of ".data.title" and only has the ".notes" class. So if you changed the code to ".data.notes" then the CSS would be trying to target an element that doesn't exist. It also has a different structure than the tags area so whether or not you had an issue with the .data selector, some changes may still have been needed. This is where using Inspect Element to view the HTML really comes into play. Anyhow, here's a minimally modified version of the code that works with the notes. Do keep in mind though that notes can be a lot longer than tags and it may end up looking really weird. I can't think of a good way to view the entirety of the notes since they can be something rediculous like 65k characters long and it's not viable to put a scrollbar on the bubble. But it can be alleviated by chopping up the speech bubble image to let it stretch and hiding overflowing text, so here's an alternative version of the code which does that. (Don't use both versions at once, pick one) |
Valerio_LyndonMar 26, 2023 6:48 PM
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 |