Syreid said: Ah, the scores are there but the contrast between the background and text is too low (white text on light grey). Looks like you've got a bit of code turning the text white in your CSS. You can modify the colour by simply usng more specific selectors in your code.Thank you ! It looks amazing,using it right now. Just have a small question. Is it possible to make the scores viewable at all times on light mode without having to hover the mouse over the score for each title? /*Score Colour*/
.list-table .list-table-data .data.score a {
color: black !important;
}
/*Score Colour on Hover*/
.list-table .list-table-data .data.score a:not(.edit-disabled):hover {
color: white !important;
}Alternatively, you could take a look at the "Change theme colours" section on the first post to tweak colours easier. But for changing specific sections, such as the score, without modifying anything else, direct code such as above will suit you better. |
Valerio_Lyndon said: maya_amano said: I was about to tell you no, but actually it is possible! I thought MAL had broken it when they disabled the API, but using Doomcat's header tool with a custom template I managed to get it working. Hey there! :3 I recently installed this theme, and I love it so much. I was wondering though if there was any way to add space between different categories (ie watching, completed, dropped etc). Here's a visual example of what I mean because I explained it terribly lol. As you can see in the image I added text, but I'll probably be able to figure out once each section's seperated. Thanks in advance :D This is the result:  And here's the code, I hope it works for you as well! Add this to the top of your CSS: @\import "https://malcat-gen.appspot.com/headers?template=[data-query*='\"status\":7'] .list-item:nth-child($index){margin-top:48px;}[data-query*='\"status\":7'] .list-item:nth-child($index):before{content:'$content'}";Then add this anywhere below the @import's (bottom of the code is always safe): [data-query*='"status":7'] .list-item:nth-child(2) { margin-top: 32px; }
[data-query*='"status":7'] .list-item:before {
position: absolute;
top: -40px;
left: 0;
display: block;
width: 100%;
height: 32px;
color: var(--text-head);
font: 20px/32px Oswald;
text-align: right;
letter-spacing: 1px;
text-transform: uppercase;
pointer-events: none;
}The code for all this is split between the custom template in the import and the second section here. You should be able to tweak it without much issue if you know some CSS, but if you're having trouble I'll be happy to try and assist. Eeeep! Thank you so much! This tweak made an already amazing theme into my perfect one :D |
| Thank you so much for your help. That worked perfectly. (Regarding the contrast,couldn't find a better choice of color which suits the background). One more question,is there a way to make the title/list number found on the picture of the anime in the list more viewable?Mine is barely visible,was wondering if it's possible to give it a white background for the small circle?Also unable to get the hearts favorite to work . Thanks again in advance. |
SlyreidFeb 19, 2019 12:34 AM
Syreid said: Thank you so much for your help. That worked perfectly. (Regarding the contrast,couldn't find a better choice of color which suits the background). One more question,is there a way to make the title/list number found on the picture of the anime in the list more viewable?Mine is barely visible,was wondering if it's possible to give it a white background for the small circle?Also unable to get the hearts favorite to work . Thanks again in advance.  The list entry number? Yeah, you could change the number's colour or background, both are possible. Hopefully I didn't misunderstand which part of the list you meant. :)Although, since you're changing the text colour on almost every element on the list entries, you may have an easier time simply modifying the variable that changes the text colour itself. Example: .list-item {
--text: beige;
--text-dark: beige;
}If you have a basic grasp of CSS, most selectors for parts of the list can be found using inspect element. [Guide] Hm, I'm not seeing tags enabled on your list. The favourite hearts applies to any tag named "Favourite", it cannot detect what your profile favourites are. You would need to enable tags on your list and then add a tag named "Favourite" to any entry you want to have a heart. On the upside, you can have more than 20 entries tagged as favourites. |
Nanshinnie said: Hmm, that's odd. Code all looks good (and very neat!), and seems to work for me. There should be an edit button when you hover your mouse over the right side of the list item. Does it not show up/respond for you, or is it a different problem?Hi, I've been trying a long time, putting the layout in my list, but now I can not edit the tags / reviews, using the indicated code to convert the tags to reviews. This is my code  |
| Thank you so much for this awesome list style design!! It is looking really neat and everythings is fitting together really nicely! I am not the most professional CSS expert ever. So I have some questions which are probably really simple to do,~~ First of all, this is my CSS: And this are changes I would love to make based on the backgrounds that I have chosen: 1. When hovering over an anime title, the name is changing to blue. Is it possible to make it turn orange instead? 2. Also the quick menu items like "History" or "Export" have a blue background, is it possible to change that to orange as well? 3. The score of an anime is written in dark grey font within a light grey circle. Where is the place in the CSS to play around with that? I want to try different combinations like orange circle and white/light-grey font color while inverting when hovering over it? 4. In the first post there was shown how to change the color of single tags. Is it possible to change the color of ALL tags without spelling out every single tag used? I would like it to behave the same way like in 3: orange background and white/light-grey font color while inverting when hovering over it. (this might look stupid without having tested it, but I don't know how to test ^^") 5. Another thing I noticed: the layout will pre-load only the first 300 items in a list and then the next 300 and so on. When the bottom part of a list is not preloaded and I do a ctrl+f search of.. lets say "Zoku Natsume" it will yield no results, because it is anime #748 on my list. Is there a workaround for this preloading limit? Thank you so much again for providing an awesome layout like this! I stuck a very long time to the classic list stlye which was able to import anime images before the MAL API breakdown. Even after that I stuck with the classic list design until now. But this one changed my mind and I converted to the modern design now! |
BratiMar 2, 2019 5:16 AM
Forum signature |
Brati said: 5. Another thing I noticed: the layout will pre-load only the first 300 items in a list and then the next 300 and so on. When the bottom part of a list is not preloaded and I do a ctrl+f search of.. lets say "Zoku Natsume" it will yield no results, because it is anime #748 on my list. Is there a workaround for this preloading limit? That's actually a feature of modern style lists. A lot of people been complaining about it since the style's release but it doesn't look like it's going to get changed soon if at all. Just use "End" button to go down and then use cntr+f or just get used to search option - it's on the far right, next to plan to watch button. Anyway, I doubt it's something that can be changed with css. Others are free to prove me wrong though. |
 I'm watching anime since 2012. I also play games, sometimes. Don't bother me if you want to 'become friends' or things like that. It's tiresome. I know you just want to collect some meaningless numbers. Thought: How many people sparked H. Charlotta just for blue pot? |
| @Brati Have you checked the theme colours addition in the main post? :) A lot of the basic colours can be changed from there easily enough. 1. For instance, the anime title changes to the "accent" colour when hovered over, so changing that would do what you want (although the all anime bar in the header uses the same colour). But I'll go into more detail for your specific tweaks anyhow since the variables don't allow changing individual colour instances. :) So, here's the code to change only the title on hover: /* Titles on Hover */
.list-table .list-table-data .title .link:hover {
color: hsl(39, 100%, 50%) !important;
}All code pieces in this post should be put below the main theme in your CSS, and all colours can be changed by replacing them with any valid CSS colour. 2. Yep, here's the code. /* Menu Icons on Hover */
.header .header-title:hover,
.icon-menu:hover,
.list-menu-float .icon-menu:hover,
.icon-menu.setting .text a:hover,
.stats a:hover,
.list-table > tbody:first-of-type:hover::after,
.list-table .list-table-header .header-title .link.sort:hover {
background: hsl(39, 100%, 35%) !important;
}Alternatively, it's controlled by the "btn-head-bg-h" variable. 3 & 4. Here's the code for the score and tags. The colours are their default values in this, so will need changing to what you wish. Colour picker. /* Score & Tags */
.list-table .list-table-data .tags a,
.list-table .list-table-data .score a {
background: #ebebeb;
color: #323232 !important;
}
/* Score & Tags on Hover */
.list-table .list-table-data .tags span a:hover,
.list-table .list-table-data .score a:not(.edit-disabled):hover {
background: #323232;
color: #fff !important;
}5. Hakaminah is correct here, it's a limit of the modern lists. It does avoid much of the page lag that is common with massive lists, but I can understand why it would be annoying. The best way to search your entire list at once is to use the search feature at the top right. I don't believe anything except titles are checked when fetching results though. I'm happy you like the design. ^^ Also, if you're ever looking for fixes to a broken design, this thread should hopefully fix the issue. |
| @Valerio_Lyndon Oh my god! Thank you so much for your reply and the code snippets!!! Thank you so much, it is looking amazing!! I think I will stick to this layout for a long time :> |
Forum signature |
| I have problem with cover previews, can someone help me? |
 |
dominatorrr said: I have problem with cover previews, can someone help me? This import has to be the first one: @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkbefore"; EDIT: Chrome stores covers in the cache, that's why I hadn't noticed that MAL changed host. |
SuchyyMar 13, 2019 4:28 AM
dominatorrr said: Sorry for the late response, I wasn't sent a notification for this. Anyhow, MAL made a change to their image host which breaks the cover generator, but it shouldn't be a difficult fix. Hopefully it will be back up and running soon, but I can't guarantee anything as I am not the one behind the generator. If you haven't seen it already you can check Shishio's thread for updates or immediate fixes.I have problem with cover previews, can someone help me? |
| Thats a nice theme, thanks a lot =D I always prefered the classic style because I was able to create headers inside of the "all anime" list to differenciate "watching", "completed", (...) from each other. These headers dont seem to exist with the modern style so I thought maybe you have an idea on how to seperate them in a similar way. "Watching" ... ... ... "Completed" ... ... ... |
      |
Eldinox said: Yes, actually! I used a third-party tool to achieve this a month ago, but forgot to add it to the main post. :o I was planning to improve the visuals, but for now this is what it looks like. If you have any suggestions for how to improve the visuals or how you'd rather it looked, I'm open to suggestions. :)Thats a nice theme, thanks a lot =D I always prefered the classic style because I was able to create headers inside of the "all anime" list to differenciate "watching", "completed", (...) from each other. These headers dont seem to exist with the modern style so I thought maybe you have an idea on how to seperate them in a similar way. "Watching" ... ... ... "Completed" ... ... ... And here's the code. |
Valerio_Lyndon said: Eldinox said: Yes, actually! I used a third-party tool to achieve this a month ago, but forgot to add it to the main post. :o I was planning to improve the visuals, but for now this is what it looks like. If you have any suggestions for how to improve the visuals or how you'd rather it looked, I'm open to suggestions. :)Thats a nice theme, thanks a lot =D I always prefered the classic style because I was able to create headers inside of the "all anime" list to differenciate "watching", "completed", (...) from each other. These headers dont seem to exist with the modern style so I thought maybe you have an idea on how to seperate them in a similar way. "Watching" ... ... ... "Completed" ... ... ... And here's the code. Whaa? I thought MALcat didn't work anymore? |
Shishio-kun said: I thought so too at first, but decided to give it a go and it actually worked! I assume it parses the HTML rather than relying on the API, since I doubt the API ever gave the required information anyway, so it wasn't broken by the removal. :DWhaa? I thought MALcat didn't work anymore? |
Valerio_Lyndon said: Shishio-kun said: I thought so too at first, but decided to give it a go and it actually worked! I assume it parses the HTML rather than relying on the API, since I doubt the API ever gave the required information anyway, so it wasn't broken by the removal. :DWhaa? I thought MALcat didn't work anymore? Oh that's great, because making headers was a real useful part of this tool! |
Valerio_Lyndon said: Yes, actually! I used a third-party tool to achieve this a month ago, but forgot to add it to the main post. :o I was planning to improve the visuals, but for now this is what it looks like. If you have any suggestions for how to improve the visuals or how you'd rather it looked, I'm open to suggestions. :) Awesome, that worked without any problems. I like to customize those headers (for example I changed "reading" to "my collection" in my manga list because I think that is a lot more interesting) but the best thing I could come up with for this new design is changing the $index variable to the row of the table that I want to edit and then set a new content or background image. Its working for now but I will have to change the code everytime I add something to the list^^ If you want to add something like this to your tutorial, that would be cool. Im decent with css but I have no idea how that malcat works.   |
|
Eldinox said: I'm glad you're interested in customizing it :DValerio_Lyndon said: Yes, actually! I used a third-party tool to achieve this a month ago, but forgot to add it to the main post. :o I was planning to improve the visuals, but for now this is what it looks like. If you have any suggestions for how to improve the visuals or how you'd rather it looked, I'm open to suggestions. :) Awesome, that worked without any problems. I like to customize those headers (for example I changed "reading" to "my collection" in my manga list because I think that is a lot more interesting) but the best thing I could come up with for this new design is changing the $index variable to the row of the table that I want to edit and then set a new content or background image. Its working for now but I will have to change the code everytime I add something to the list^^ If you want to add something like this to your tutorial, that would be cool. Im decent with css but I have no idea how that malcat works. Just about everything you need to know about MALCat is outlined in the "advanced usage" spoiler on MalCat's forum thread. To change the labels for instance, you could add "&cw=My Collection&cr=My Collection" to the end of the import. This changes currently watching and currently reading banners to "My Collection". Just make sure to place it before the end quote and semi-colon. For instance: @\import "https://malcat-gen.appspot.com/headers?template=[data-query*='\"status\":7'] .list-item:nth-child($index){margin-top:48px;}[data-query*='\"status\":7'] .list-item:nth-child($index):before{content:'$content'}&cw=My Collection&cr=My Collection"; |
| It says @import only works when viewing your own profile, but it seems like it works even when signed out. Did they change this? This is how my profile appears to me, is this how it appears for everyone else? https://myanimelist.net/animelist/shikon0?status=1 |
shikon0 said: List looks fine to me. :) It's supposed to be disabled for other users, and normally it is. But, luckily, they missed a very basic workaround and never fixed it, so imports can still work when formatted a specific way. Without imports, a lot of things including image generators and fonts would be messed up and the list designs would look really sad so I'm glad they made this mistake haha. Just about every design in the club (and outside of it) is using the workaround by now so my design is not unique in this way. It says @import only works when viewing your own profile, but it seems like it works even when signed out. Did they change this? This is how my profile appears to me, is this how it appears for everyone else? https://myanimelist.net/animelist/shikon0?status=1 As an aside, you can easily test logged out view using incognito or a private tab (Ctrl+Shift+N on Chrome and Ctrl+Shift+P on Firefox). |
| Definitely gonna be using this for a while! Great job :D <3 |
| @goko- 1. Yep! You can use the CSS 'cursor' property for this. Code: * {
cursor: url(URLHERE) 0 0, auto;
}:link {
cursor: url(URLHERE) 0 0, auto;
}Here's an example usage with some massive cursors I stole from Google since I'm too lazy to Photoshop a cursor right now. * {
cursor: url(https://lh3.googleusercontent.com/Zd89z4SpcnxE9tTSlD-DB_B5NlKbDEryGijkuhd-_jlZtp5wclpMSA8tTiPJnWmIBJ0o0vZFVEk=w128-h128-e365) 15 0, auto;
}
:link {
cursor: url(https://lh3.googleusercontent.com/eJy04l8jQbQKM7rUWOagL-q-fvBLPd2KEMyOnZTxMqlUAwtNtiJWIg8ucA46Budag_97i8FBcg=w128-h128-e365) 40 0, auto;
}2. That's definitely possible! Here's some code that you could use. If you use this, choose a spoiler and add the code from it to the bottom of your code. Don't use both, just choose one. If you were looking for something a bit different, such as to have it fixed to the page - similar to the example list you provided - or have it trigger when hovering over a different area, then that's probably possible, you'll just have to let me know what you'd want. Note: This code is tailored to your current list and won't work if you uninstall certain things (such as horizontal tags). |
Valerio_LyndonMar 30, 2019 4:29 PM
| the miniature anime covers seems like a circle, can I change for a rectangle? https://cdn.discordapp.com/attachments/520290466504376330/561717584689496094/Sem_titulo.png like in the large cover sorry bad english, I'am using gt |
@MHeroineX Yeah, you can use this code. Add it to the bottom of your CSS. .data.image a, .data.image img, .data.image a:after {
border-radius: 8px;
}
.data.number {
border-radius: 0 0 8px 0;
}Hopefully that works for you. :) |
| Thanks, this layout is dope af |
 |
First things first, thank you for the reply. The cursors work perfectly! :) There's a small problem with the review When I made my list I used a lot of the code from your list at the time and tweaked the colors. I don't need any of the horizontal tags or the colored tags for genres etc. My code is super messy right now haha, sorry. If you could remove all the extra codes for the tags so I can have just the hover for reviews, that'd be perfect. (The only reason why I used ur personal list for the CSS was because I wanted to get the colored accent around the profile picture lol. Anyways, here's my code :p Thanks again dude, seriously! <3 just for some clarity ;) I don't need any tweaks from the normal clarity asides from the colors I have right now, and the large covers on hover. and the cursors i guess |
goko-Mar 30, 2019 11:04 PM
| @goko- Oh, sorry about that! Didn't test long tags properly. :< Should be fixed in this version. Ah, alright! That's good to know actually. I did have the code for that in the main post but I removed it. Hm, maybe I should add it back. Oh, and don't worry about it haha I've seen a lot messier believe me. :P Anyhow, here's your code but with all the tag stuff from my list removed (details on hover, colours, etcetera). Hopefully I didn't mess anything up this time. ;) [Code] I appreciate the pun. |
Valerio_LyndonMar 31, 2019 7:58 PM
| @goko- Hm, are you using Chrome? It's working smoothly for me in Firefox, but when I launched it up in Chrome I had about ~3fps. I swear the performance used to be better in Chrome but it's clearly been slaughtered since I last used it >_< Either way, I applied some techniques I've learned since I made the theme to try and speed up the performance a bit. I am unsure about RAM, but as to frames, on my end it gained maybe 20% in Firefox and more frames in Chrome (it's still a bit choppy though). Although, it may cause other visual issues, I'm unsure. But performance is a very case-by-case sort of thing so can't be sure it'll work for you until you try it. Code here: [Code] The thing is, there's a decent amount going on with the hover animation so it's also possible it's tough on your system. I've considered simplifying it in the past, but never decided on it. At any rate, if the performance is still awful and you want a smoother thing then that could potentially be done. For instance, opacity only instead of the height slide or vice-versa should improve performance, but I won't know until I fiddle with it. Again, performance is a fickle mistress. Not a bother, don't worry. :) This is what I thrive on ( until I can't figure out the issue :< ). |
Valerio_LyndonApr 9, 2019 1:15 AM
| You're really awesome! Thx for this amazing layout. I didn't know we could create variables inside css (rly useful though). |
             x5 “Good times become good memories, but bad times become good lessons.” – Uncle Iroh |
| Your profile settings are really weird @Kerthie. Tried to send you a message but it says it only accepts from friends. Oh well, you can get the CSS from here. Hope you enjoy. |
| This looks amazing! Thank you very much ^ |
 why am i plagued with furry jokes everywhere I go |
| I'm not exactly sure what I'm doing wrong. I'm trying to import the dark mode theme, but it's not working. It's kind of halting me from continuing and edits that I'd like to proceed with. I've been trying to resolve this on my own, but it seems as a last resort i'll have to ask for help. Currently, these are the only imports I have, and I put the dark mode after the other ones like the OP said; |
 |
| @Lzuma Ah, sorry for the trouble. Looks like you're mixing direct installation with import installation. Mixing and matching imports (automatically updating) with direct (non-updating) code is a recipe for trouble and generally won't work at all due to various code priority reasons. Remove the dark mode import, then append the dark mode to the bottom of your CSS using the direct installation link found in the main post (or here: [Direct Install]). I have a blurb about this in the original post but it's tucked away in the "alternative method" spoiler in step 3. I am considering removing the import method in the future to avoid confusion such as this. |
| @Valerio_Lyndon Ah okay. I got it now. Thanks for the help and the amazing list design. Definitely my favorite! |
|
| It seems like large covers aren't working anymore... |
Exablade said: It seems like large covers aren't working anymore... Your list seems fine now. Maybe it was temporary. |
Shishio-kun said: Exablade said: It seems like large covers aren't working anymore... Your list seems fine now. Maybe it was temporary. Nevermind, my adblocker was blocking the website providing the css. |
Valerio_Lyndon said: @goko- 1. Yep! You can use the CSS 'cursor' property for this. Code: * {
cursor: url(URLHERE) 0 0, auto;
}:link {
cursor: url(URLHERE) 0 0, auto;
}Here's an example usage with some massive cursors I stole from Google since I'm too lazy to Photoshop a cursor right now. * {
cursor: url(https://lh3.googleusercontent.com/Zd89z4SpcnxE9tTSlD-DB_B5NlKbDEryGijkuhd-_jlZtp5wclpMSA8tTiPJnWmIBJ0o0vZFVEk=w128-h128-e365) 15 0, auto;
}
:link {
cursor: url(https://lh3.googleusercontent.com/eJy04l8jQbQKM7rUWOagL-q-fvBLPd2KEMyOnZTxMqlUAwtNtiJWIg8ucA46Budag_97i8FBcg=w128-h128-e365) 40 0, auto;
}2. That's definitely possible! Here's some code that you could use. If you use this, choose a spoiler and add the code from it to the bottom of your code. Don't use both, just choose one. If you were looking for something a bit different, such as to have it fixed to the page - similar to the example list you provided - or have it trigger when hovering over a different area, then that's probably possible, you'll just have to let me know what you'd want. Note: This code is tailored to your current list and won't work if you uninstall certain things (such as horizontal tags). I felt for this look! BUT can you change the tags (the first one ver.) to show when you're hovering on the whole row? I mean this .list-table-data Not only on picture. Cuz changing .image didn't work...it would've been to easy this way xDDDD Oh and this way the FAVORITE tag is not showing on the right position ;-; |
GomiruriMay 5, 2019 4:03 AM
 |
So it may appear like there? :D |
|
 @Gomiruri Yes, that code would have some issues since it was tailored for Goko's modified list. This redone version of the code should work with just about any mod as of writing this post (hopefully). I tried to cover all the bases, but I may have missed some issues.Standard disclaimers: • Incompatible with review-style tags. • Incompatible with tag descriptions. • Favourite tags will not appear until the item is hovered over. This could be changed but would require a removal of the tag box background and may be slightly more resource intensive. Add to the bottom of your code, below all other mods (this contains overrides for several other modifications so needs to be below them). |
Valerio_LyndonOct 28, 2020 11:52 PM
| That's 100% what I wanted. Thank you very much. <3 |
|
More topics from this board
» [BBCode] Font Awesome Guidehideso - Dec 25, 2023 |
6 |
by Shishio-kun
»»
Today, 12:26 AM |
|
Sticky: » 💚 [REPAIR STICKY] Repair/speed up a design + Request a layout fixShishio-kun - Nov 17, 2023 |
33 |
by Shishio-kun
»»
Yesterday, 11:42 PM |
|
» [CSS - Modern] 🛠️ Tweaks for lists -- Horizontal tags, descriptions, category-coloured text, accent colour, and more.Valerio_Lyndon - Oct 24, 2019 |
20 |
by IridescentJaune
»»
Nov 22, 10:58 PM |
|
» ✳️ Bunkasai 2024 List Design and Graphic Design contests are OPENShishio-kun - Nov 18 |
2 |
by Shishio-kun
»»
Nov 18, 5:01 AM |
|
Sticky: » [ SIGNATURES ~ PROFILES] All guides, generators, and templatesShishio-kun - Feb 16, 2023 |
29 |
by floral_sacrifice
»»
Nov 15, 10:24 AM |