This is a custom layout for modern template lists. If you don't know how to install the codes, click here to view the Beginner's Tutorial. If there are problems: install the latest version, or check the Repair Thread for patches and updates (found here). All premade modern layouts can be found in the gallery by clicking here, and more ways to customize your list can be found here. This is a layout originally made by @Ruri and donated in our club. I've made a few adjustments to make it easier for newbies to recolor and to resize the layout's covers. Update: A new dark version is now available based on Suitangi's color changes and Valerio Lyndon's help. This one isn't as easy to customize as the white one, so use the white one if you want to make extensive color changes!   Installation Source Code for light version: Source Code for dark version: If you don't know how to install a layout: use the simple beginner's tutorial to learn how to install the source code for any modern layout: http://myanimelist.net/forum/?topicid=1499052 For the best look set your list according to these settings:  You make these changes on this page: https://myanimelist.net/editprofile.php?go=listpreferences Customization Notes in the top of the code can help with making some simple changes. You can also add .list-item .data.title {background: none;} div[class*="tags-"]{ background: none;} to the bottom of your CSS to remove the shadowy overlay over the preview pics, however this makes the text inside covers hard to read. Fixes and remixes! If you have any particular fixes or improvements I can add to the code, be sure to post them so I can add them to the bottom (fixes and patches) or top (additional customizations). Also if you make a new theme with this be sure to let us see or even share it so others can use it! |
Shishio-kunMar 25, 2023 8:59 AM
| I made some rudimentary edits for my own list because I prefer a darker version; but thought I'd share :) Screenshot  IMPORTANT: Make sure you change USERNAME (in red in the code below) to your MAL username, AND also that you have these settings on your list: You make these changes on this page: https://myanimelist.net/editprofile.php?go=listpreferences Code |
Shishio-kunDec 21, 2017 12:41 PM
 |
| Awesome! Thanks for sharing! |
Shishio-kunDec 21, 2017 12:42 PM
| Very nice layout! But i find a little problem with the sort bar. When i change the page, for exemple, from All anime to Currently watching, it moves from the right to the left. Also it is dfficult to reach the item because the type text (tv, movie etc) overlays the bar. The drop down menu for select the page have a little bug too. Lastly, i'd like to change the background with an image, but in the customization section, even if i add an image, it doesn't show up. Am i doing it wrong or it is impossible to add a background image? |
MatteoDanelon said: Very nice layout! But i find a little problem with the sort bar. When i change the page, for exemple, from All anime to Currently watching, it moves from the right to the left. Also it is dfficult to reach the item because the type text (tv, movie etc) overlays the bar. The drop down menu for select the page have a little bug too. Lastly, i'd like to change the background with an image, but in the customization section, even if i add an image, it doesn't show up. Am i doing it wrong or it is impossible to add a background image? On the first and second thing What browser and device are you using? I don't see the same errors on your list from PC/Chrome On the third thing it's probably not possible to upload a background to this layout and see it without making some changes. So you have to add the background manually under /* COLOR OF BACKGROUND */ .list-container, #status-menu, .list-unit, .list-unit .list-status-title { with CSS. Do you know how to add a background this way? Like with uploading images and writing background codes etc |
Shishio-kun said: On the first and second thing What browser and device are you using? I don't see the same errors on your list from PC/Chrome On the third thing it's probably not possible to upload a background to this layout and see it without making some changes. So you have to add the background manually under /* COLOR OF BACKGROUND */ .list-container, #status-menu, .list-unit, .list-unit .list-status-title { with CSS. Do you know how to add a background this way? Like with uploading images and writing background codes etc I'm using Chrome (version 63.0.3239.132) on a laptop with a 720p monitor running Windows 10 For the CSS code, i learned it little bit on highschool, so i think i can deal with it, if there aren't difficult codes |
MatteoDanelon said: Shishio-kun said: On the first and second thing What browser and device are you using? I don't see the same errors on your list from PC/Chrome On the third thing it's probably not possible to upload a background to this layout and see it without making some changes. So you have to add the background manually under /* COLOR OF BACKGROUND */ .list-container, #status-menu, .list-unit, .list-unit .list-status-title { with CSS. Do you know how to add a background this way? Like with uploading images and writing background codes etc I'm using Chrome (version 63.0.3239.132) on a laptop with a 720p monitor running Windows 10 For the CSS code, i learned it little bit on highschool, so i think i can deal with it, if there aren't difficult codes Wow so you're seeing the errors right now on your list? Hmm I don't know why you're getting these errors then. All I can suggest for now is to update Chrome and reinstall the layout, or try a new one. I'll update you here if I can think of anything. Well to change the background: you have to upload the new background you want to Imgur or similar site (not Photobucket). It should give you a Direct Link among others for that background. Then in your CSS, under /* COLOR OF BACKGROUND */ .list-container, #status-menu, .list-unit, .list-unit .list-status-title { paste this new set of lines under there background-image: url() !important; background-attachment: fixed; background-size: cover; And in the parenthesis, paste the Direct Link you got from imgur. Save and the background should change. |
Shishio-kun said: Wow so you're seeing the errors right now on your list? Hmm I don't know why you're getting these errors then. All I can suggest for now is to update Chrome and reinstall the layout, or try a new one. I'll update you here if I can think of anything. Well to change the background: you have to upload the new background you want to Imgur or similar site (not Photobucket). It should give you a Direct Link among others for that background. Then in your CSS, under /* COLOR OF BACKGROUND */ .list-container, #status-menu, .list-unit, .list-unit .list-status-title { paste this new set of lines under there background-image: url() !important; background-attachment: fixed; background-size: cover; And in the parenthesis, paste the Direct Link you got from imgur. Save and the background should change. Chrome is updated and i've reinstalled the layout, but it still doesn't work. The background image code doesn't work too, i see the same color as in your original code, even if i erase the background-color line I'm beginning to think that this layout isn't made for me D: It's a shame because is one of the best, imho |
Danezzzz said: Shishio-kun said: Wow so you're seeing the errors right now on your list? Hmm I don't know why you're getting these errors then. All I can suggest for now is to update Chrome and reinstall the layout, or try a new one. I'll update you here if I can think of anything. Well to change the background: you have to upload the new background you want to Imgur or similar site (not Photobucket). It should give you a Direct Link among others for that background. Then in your CSS, under /* COLOR OF BACKGROUND */ .list-container, #status-menu, .list-unit, .list-unit .list-status-title { paste this new set of lines under there background-image: url() !important; background-attachment: fixed; background-size: cover; And in the parenthesis, paste the Direct Link you got from imgur. Save and the background should change. Chrome is updated and i've reinstalled the layout, but it still doesn't work. The background image code doesn't work too, i see the same color as in your original code, even if i erase the background-color line I'm beginning to think that this layout isn't made for me D: It's a shame because is one of the best, imho Maybe something in your browser extensions or PC is blocking the CSS from loading properly. As for the background it wasn't the direct link it needed. It should look like this /* COLOR OF BACKGROUND */ .list-container, #status-menu, .list-unit, .list-unit .list-status-title { background-image: url(https://i.imgur.com/4Vog0Jo.jpg) !important; background-attachment: fixed; background-size: cover; } Not this Direct link is copied from here after uploading a pic  |
Shishio-kunJan 8, 2018 2:48 PM
Shishio-kun said: Danezzzz said: Chrome is updated and i've reinstalled the layout, but it still doesn't work. The background image code doesn't work too, i see the same color as in your original code, even if i erase the background-color line I'm beginning to think that this layout isn't made for me D: It's a shame because is one of the best, imho Maybe something in your browser extensions or PC is blocking the CSS from loading properly. As for the background it wasn't the direct link it needed. It should look like this /* COLOR OF BACKGROUND */ .list-container, #status-menu, .list-unit, .list-unit .list-status-title { background-image: url(https://i.imgur.com/4Vog0Jo.jpg) !important; background-attachment: fixed; background-size: cover; } Not this Direct link is copied from here after uploading a pic Oh right, i picked the wrong link, my bad Anyway it doesn't fit, it's fixed under the middle of the screen, where there are the anime's posters, and scrolls and repeat on the border ahaha i guess i'll take the default background I don't have many extension on Chrome, and i don't think that the few ones that i have can block CSS from loading. Same as programs on the PC |
Danezzzz said: Shishio-kun said: Maybe something in your browser extensions or PC is blocking the CSS from loading properly. As for the background it wasn't the direct link it needed. It should look like this /* COLOR OF BACKGROUND */ .list-container, #status-menu, .list-unit, .list-unit .list-status-title { background-image: url(https://i.imgur.com/4Vog0Jo.jpg) !important; background-attachment: fixed; background-size: cover; } Not this Direct link is copied from here after uploading a pic Oh right, i picked the wrong link, my bad Anyway it doesn't fit, it's fixed under the middle of the screen, where there are the anime's posters, and scrolls and repeat on the border ahaha i guess i'll take the default background I don't have many extension on Chrome, and i don't think that the few ones that i have can block CSS from loading. Same as programs on the PC Weird, well if you see the problem in other browsers it's probably something to do with your PC. I have the same layout on my list atm. I wonder if you see the same problem there: https://myanimelist.net/animelist/Shishio-kun But whether or not you do, I'm not really sure how that would help narrow down the solution. |
Shishio-kun said: Danezzzz said: Oh right, i picked the wrong link, my bad Anyway it doesn't fit, it's fixed under the middle of the screen, where there are the anime's posters, and scrolls and repeat on the border ahaha i guess i'll take the default background I don't have many extension on Chrome, and i don't think that the few ones that i have can block CSS from loading. Same as programs on the PC Weird, well if you see the problem in other browsers it's probably something to do with your PC. I have the same layout on my list atm. I wonder if you see the same problem there: https://myanimelist.net/animelist/Shishio-kun But whether or not you do, I'm not really sure how that would help narrow down the solution. Yup, same problem with Firefox, and with seeing your list too, so it's my laptop's problem. I really don't know what's wrong with it ahah Just to be sure, if you check my list, there's no problem? https://myanimelist.net/animelist/Danezzzz |
Danezzzz said: Shishio-kun said: Weird, well if you see the problem in other browsers it's probably something to do with your PC. I have the same layout on my list atm. I wonder if you see the same problem there: https://myanimelist.net/animelist/Shishio-kun But whether or not you do, I'm not really sure how that would help narrow down the solution. Yup, same problem with Firefox, and with seeing your list too, so it's my laptop's problem. I really don't know what's wrong with it ahah Just to be sure, if you check my list, there's no problem? https://myanimelist.net/animelist/Danezzzz Yes it's totally normal to me when I saw it earlier but its default now. The glitch has gotta to be in your browser or PC imo. That makes it difficult to fix unfortunately. It's also possible you have an later version of the browser than me that breaks the layout. Hmm maybe you should try the classic layouts. It is possible the glitch you're having doesn't affect a classic one. https://myanimelist.net/forum/?topicid=318587 |
Shishio-kun said: Danezzzz said: Yup, same problem with Firefox, and with seeing your list too, so it's my laptop's problem. I really don't know what's wrong with it ahah Just to be sure, if you check my list, there's no problem? https://myanimelist.net/animelist/Danezzzz Yes it's totally normal to me when I saw it earlier but its default now. The glitch has gotta to be in your browser or PC imo. That makes it difficult to fix unfortunately. It's also possible you have an later version of the browser than me that breaks the layout. Hmm maybe you should try the classic layouts. It is possible the glitch you're having doesn't affect a classic one. https://myanimelist.net/forum/?topicid=318587 It seems that with the classic layout i do not have problems. I really don't understand what's wrong with my PC or browser ahah Anyway thank you so much for the help |
Awesome layout, but I do have one problem. In regards to these pop-out bars next to the covers. What are they meant to be, and are they meant to look like this?  |
TF2sideswipe said: Awesome layout, but I do have one problem. In regards to these pop-out bars next to the covers. What are they meant to be, and are they meant to look like this? I think I figured it out. The blue may be for your tags. But he/she added "F0" as the default text content there, probably so the user was supposed to change it to "Tags:" or "Review:" instead. If you have tags, then you get those tags after "Review:" for example. Now the red I'm pretty sure was meant to be the type of anime category completion-wise. These were change to default gibberish like 2b0a0, but I changed them to the proper category names. Again, I think it was something the creator intended the user to change on their own. In the CSS below, I changed the text to that, so it looks more proper on your list, and I also removed the blue part, since it doesn't seem relevant to your list as you don't use tags. You can just add the codes to the bottom of your CSS. What do you think @valerio_lyndon? I think I got the creator's intentions down .data.tags{ opacity: 0 !important; } .data.tags:hover:before {content: ''Tags:"; letter-spacing: -1px; background: transparent; width: 100px !important;} .data.status:hover:after, .data.tags:hover:before {width: 100px; padding: 5px 5px 5px 4px !important; font-size: 1.1em; top: 0; color: #fff; cursor: default;} .status.reading:hover:after {content: 'reading';} .status.watching:hover:after {content: 'watching';} .status.plantowatch:hover:after, .status.plantoread:hover:after {content: 'planned';} .status.completed:hover:after {content: 'completed';} .status.onhold:hover:after {content: 'on hold';} .status.dropped:hover:after {content: 'dropped';} |
Shishio-kun said: Thanks for the @, wouldn't have seen this otherwise. I'm 100% sure those are meant to be FontAwesome icons. I would say it was a glitch with FontAwesome not loading but it actually looks more like someone modified the code by accident and removed the backslashes before the text. I'll have to take a look at the code more to know exactly what the issues are. TF2sideswipe said: Awesome layout, but I do have one problem. In regards to these pop-out bars next to the covers. What are they meant to be, and are they meant to look like this? I think I figured it out. The blue may be for your tags. But he/she added "F0" as the default text content there, probably so the user was supposed to change it to "Tags:" or "Review:" instead. If you have tags, then you get those tags after "Review:" for example. Now the red I'm pretty sure was meant to be the type of anime category completion-wise. These were change to default gibberish like 2b0a0, but I changed them to the proper category names. Again, I think it was something the creator intended the user to change on their own. In the CSS below, I changed the text to that, so it looks more proper on your list, and I also removed the blue part, since it doesn't seem relevant to your list as you don't use tags. You can just add the codes to the bottom of your CSS. What do you think @valerio_lyndon? I think I got the creator's intentions down .data.tags{ opacity: 0 !important; } .data.tags:hover:before {content: ''Tags:"; letter-spacing: -1px; background: transparent; width: 100px !important;} .data.status:hover:after, .data.tags:hover:before {width: 100px; padding: 5px 5px 5px 4px !important; font-size: 1.1em; top: 0; color: #fff; cursor: default;} .status.reading:hover:after {content: 'reading';} .status.watching:hover:after {content: 'watching';} .status.plantowatch:hover:after, .status.plantoread:hover:after {content: 'planned';} .status.completed:hover:after {content: 'completed';} .status.onhold:hover:after {content: 'on hold';} .status.dropped:hover:after {content: 'dropped';} But what I do know is the blue is tags, so f02b is the tag icon  , f008 is on the watching status and is a movie icon, not really sure why it's a movie icon  but it does make some sense. There are a few others such as completed status being f00c which is a checkmark and so on.I'm not sure why the codes are all messed up or why the font family is not set to FontAwesome, maybe a missed @import or incorrectly pasted code?... Not sure. I will have time in around 3-5 hours where I can start looking into this properly. But until then, to fix it we'd have to first apply FontAwesome to the elements (MyAnimeList uses FontAwesome by default so no need for a font import first). .data.status:after { font-family: FontAwesome; }Then modify the code to add a \ before each bit of text or figure out which icon is meant to be there using the list in the cases like tags where it has too many characters for some unknown reason and fix the content bits. .data.status.watching:hover:after { content: "\f008" }Those code bits are untested examples but I am pretty sure that basic concept should fix it. EDIT: Here we go, this seems to get the icons in place. Looks like setting the font wasn't need after all, seems Ruri thought of that already with some fallback font stuff I haven't seen before. .data.status.watching:hover:after,
.data.status.reading:hover:after { content: "\f008" }
.data.status.completed:hover:after { content: "\f00c" }
.data.status.onhold:hover:after { content: "\f04c" }
.data.status.dropped:hover:after { content: "\f00d" }
.data.status.plantowatch:hover:after,
.data.status.plantoread:hover:after { content: "\f073" }
.data.tags:hover:before { content: "\f02b" } |
Valerio_LyndonApr 7, 2018 8:25 PM
| @Valerio_Lyndon Oh ok thanks, I never would have known this. My instincts told me to consult you! Thanks to your help I was able to really update the topic! @TF2sideswipe If you want to fix the issue try the changes in Valerio's post, if that doesn't work tho post back and btw I got a new dark version available in the OP which fixes that issue |
Bogglegongs said: Amazing. The Best poster-style theme imo. Just one problem. It's a bit strange though, so please excuse my long clumsy explanation. First, I noticed that the shadow overlay doesn't extend to the bottom corners of the posters, so there are bright dots in the corners of of them. That bothered me ever since I noticed it. Then, when I came here to tell you about that, I looked a little closer and noticed what I believe to be the reason for the un-shadowed corners. The theme seems to be (inconsistently) trying to round the corners of the posters. It seems to do this artificially by making the corners white, which the user normally wouldn't notice because it's the same as the color of the background of the original light theme. Unfortunately, this seems to only be being done to the bottom corners and not the top(it seems that maybe the tops of the posters used to be shadowed as well, maybe?), and even then it's doing it only on some corners for some reason. On top of the bright corners being very noticeable in the dark theme, it is also noticeable in the light theme when hovering the mouse over a poster, because this puts an un-rounded black border around said poster. It is also always noticeable that corners are randomly rounded here and there. It's even present in the screenshots of the OP. For a specific example of all this, look at the bottom right corner of the My Hero Academia Season 3 poster. It's easier to see if you zoom in. I loved the theme at first, and I still want to, but idk if my self-diagnosed not-really-ocd can cope XD Oh, I see what you mean. Strange. I fixed the hover outline issue, but the bright points around the edges seems to be mostly caused by a rendering issue. No idea how to fix it, I swear I've done the same thing this list is doing before but not had issues... anyhow, that's not important. What I did instead is fix everything as best I can and then added a slight shadow to the outer edges of each item to try and cover up the lightness. Here's the light theme code and here's the dark theme code. Or alternatively here is the patch version of the fix (a small amount of code that can be copy-pasted to the bottom of the code). This probably won't be enough to sate you as it is still kind of an issue but I figured I'd post anyway. I wish I knew of a way to fix this but it seems to be an issue in the browser itself (I'm running Chrome). |
Bogglegongs said: Glad to hear it's better now, and thanks for the compliment. :)Valerio_Lyndon said: Oh, I see what you mean. Strange. I fixed the hover outline issue, but the bright points around the edges seems to be mostly caused by a rendering issue. No idea how to fix it, I swear I've done the same thing this list is doing before but not had issues... anyhow, that's not important. What I did instead is fix everything as best I can and then added a slight shadow to the outer edges of each item to try and cover up the lightness. Here's the light theme code and here's the dark theme code. Or alternatively here is the patch version of the fix (a small amount of code that can be copy-pasted to the bottom of the code). This probably won't be enough to sate you as it is still kind of an issue but I figured I'd post anyway. I wish I knew of a way to fix this but it seems to be an issue in the browser itself (I'm running Chrome). That's a big improvement. It doesn't catch my eye anymore; I have to explicitly look for it to see the issue now. The corners almost look like they just have a bit of a shine now, as if it's intentional. Even though I like sharp corners, I know many prefer the rounded look and this is better than the glitchy corners anyway. (I'm using Firefox btw.) I think I'll get over the mild issue now. Thanks a lot for the update. All your themes are great too, I might try out that one you're using. |
| New versions in the OP with working HD pics again which will also be visible to other users and logged out users |
| What part of the code do I need to edit to make the colors of each section be the MyAnimeList default? i.e Dark Blue for Watched and Green for Watching etc I noticed in posts above where there was a problem with the color codes showing up instead of the icons but yeah it was all alittle complicated. I've tried finding the colors I watch to change in the code but honestly I'm a complete novice at stuff like this. I guess it's possible since there are icons for these sections that simply changing the color isn't possible without changing the icons? I'd like to try and do this myself so any guidance would be appreciated. |
BlaizeVSep 11, 2018 5:27 AM
BlaizeV said: What part of the code do I need to edit to make the colors of each section be the MyAnimeList default? i.e Dark Blue for Watched and Green for Watching etc I noticed in posts above where there was a problem with the color codes showing up instead of the icons but yeah it was all alittle complicated. I've tried finding the colors I watch to change in the code but honestly I'm a complete novice at stuff like this. I guess it's possible since there are icons for these sections that simply changing the color isn't possible without changing the icons? I'd like to try and do this myself so any guidance would be appreciated. I see what you mean; I didn't know (or I forgot) this changed the colors of the category type. Hmm. I should probably change it to what MAL has later I think you would add this, then change the color words to what you want, then save. Notice that under status watching, I got it green. And under completed (watched) I got it blue. You need to change the red colors to what you want. btw if the colors don't match, we can give more specific colors just let us know. Let us know how this works too. @media entrystatus-colors-and-tab-icons {} .status.reading, .status.watching {border-left: 4px solid green} .status.plantoread, .status.plantowatch {border-left: 4px solid red} .status.completed {border-left: 4px solid blue} .status.onhold {border-left: 4px solid red} .status.dropped {border-left: 4px solid red} |
Grante15 said: Add this to the bottom of your list CSS:Hi! Idk if this thread is still alive or not, but I found a bug that I don't know how to fix. I added a background that does not scroll in the end of the CSS code: /* COLOR OF BACKGROUND */ .list-container, #status-menu, .list-unit, .list-unit .list-status-title { background-image: url(https://i.imgur.com/a53qHMo.jpg) !important; background-attachment: fixed; background-size: cover; background-repeat: no-repeat; } But if I go to a page with no added anime, or few added animes (ex: the "Currently watching" page) the background is cut off after the last anime is listed, and the original grey background takes place again ( https://i.imgur.com/pHIV69h.jpg) I also wonder how to Remove the blue tag icon which appears if i put my mouse over the left top corner of an anime cover, and could I move up the other icon which is below it to the top? (the icon that indicated if the series is completed, currently watching, etc.) I would also know if anyone knows what code I would use to replace the plain text that show score/episodes/name etc. I would like it to look like this theme: https://myanimelist.net/forum/?topicid=1712734 Thanks! .list-container { min-height: 100%; }
.data.tags:before { content: none !important; }
.data.status { top: 3px !important; }As to replacing the text, there is no clear-cut way of going about it. We'd have to directly modify the theme to move things around like that. Not super hard but it does require a clear goal in mind, so with that said, I'm curious what exactly you're thinking of. Do you want the exact layout, with progress top left, score top right, etcetera, or something more specific? And would you want to directly rip the style and icons from that other theme or stay with the style of this AniList design? |
Grante15 said: So you're sort of thinking it would look like this, yeah? [Image] I mean, the layout, ignoring that it's a rough edit lol. Just want to make sure before I dive into it. My only problem with the previous linked image is that the bottom line of info would often be conflicting in widths, which might be hard to compensate for. Might have to do something more like this: [Image]So I might not have thought this through very much, I'm interested in all the functions; Episodes, score, name, release, type of series, season and rating (all marked yellow: https://i.imgur.com/ttS3XsC.png ) Since I'll be modifying large swathes of the code, I plan to take a copy of your CSS, modify it, then post it here again once I'm done so you can easily replace your current one with the new stuff. Grante15 said: The original background colour is #1b1e23(speaking of that, what is the color-code for the background?). :)  Unfortunately I can't get to things properly tonight, as I've got to sleep. But should be back sometime tomorrow after I've finished up real life duties so I can edit the theme and answer your questions. :) |
Valerio_Lyndon said: Grante15 said: So you're sort of thinking it would look like this, yeah? [Image] I mean, the layout, ignoring that it's a rough edit lol. Just want to make sure before I dive into it. My only problem with the previous linked image is that the bottom line of info would often be conflicting in widths, which might be hard to compensate for. Might have to do something more like this: [Image]So I might not have thought this through very much, I'm interested in all the functions; Episodes, score, name, release, type of series, season and rating (all marked yellow: https://i.imgur.com/ttS3XsC.png ) Since I'll be modifying large swathes of the code, I plan to take a copy of your CSS, modify it, then post it here again once I'm done so you can easily replace your current one with the new stuff. Grante15 said: The original background colour is #1b1e23(speaking of that, what is the color-code for the background?). :) Unfortunately I can't get to things properly tonight, as I've got to sleep. But should be back sometime tomorrow after I've finished up real life duties so I can edit the theme and answer your questions. :) Wow, yeah that would look awesome! :D But I think having the episodes/score boxes with the same gap, the same distance from the edges (also from the top->down), in a similar fashion as the other text would look the best! The second image did look neater than the first one imo :) https://paste.ofcode.org/ENeJPtWQUTtZ3fNFNSX3e4 Here is the code that I'm currently using/have modified so far! There is no hurry, I mean i just kind of got into this on a whim ^^ I'm thankful for the all the help! |
| I am back! Grante15 said: I think having the episodes/score boxes with the same gap, the same distance from the edges (also from the top->down), in a similar fashion as the other text would look the best! The second image did look neater than the first one imo :) Here's the redone code. As I wasn't 100% sure which you wanted, here's a couple different options. First link is the first image, second link is the second image.[Opt1] [Opt2] It's not too hard to fine-tune these as far as you want. :)   And this is the manga list (didn't screencap both options).  Here's the [anime] options and [manga] options I used (volumes on mangalist are optional, probably look better without in fact). Grante15 said: Asking questions is the best way to learn. :3I kind of ask 1000 questions, but this was quite fun and I got 0 experience with this kind of work, I've only taken a course in android java programming like 5 years ago ^^ Grante15 said: The shading appears to be about the same to me, but it can be tweaked if you wanted to (selector is ".list-item .data.title"). And if you want to play with the score/progress backgrounds just look up ".data.progress" or ".data.score" in the CSS and you should find the correct areas. Or you can add some code to the bottom of the CSS. For instance,I think the other theme uses more shading on the bottom (feels like I can read it more easily?) and since the top icons have clear colors its super easy to look at. That is why I'm interested in copying that code^^ .data.progress, .data.chapter, .data.volume { background: #232; }
.data.score { background: #322; }Grante15 said: I checked and turns out the heart is an icon, so it's even easier to change than I thought. So if you wanted the heart instead of the plain background you could first set the score box background to transparent, then add in the icon. Something like the code below. And the "color" property would control the colour of the heart.But i mean if you could turn the heart (or change the icon to something more appropriate?) black with a white number, and maybe the same with the green episode thingy but in grey? I think that would look kind of cool and maybe fit better with the style of the theme. It could also be the same color as the original background/side border  .data.score {
min-width: 18px;
background: none;
}
.data.score:before {
content: "\f004";
position: absolute;
right: 0;
top: 4px;
display: block;
width: 100%;
color: #272727;
font: normal 28px/1 FontAwesome;
text-align: center;
text-shadow: rgba(0, 0, 0, 0.5) 1px 1px 2px;
z-index: -1;
}Grante15 said: That's good! :DI kind of got into this, so I managed to change out the background color of the sidebar and the filtering menu: https://i.imgur.com/cIWWWpE.jpg But now i wonder a couple of things; You can find this selector used in the code: ".list-menu-float .icon-menu:hover, .link-style-setting, .link-list-setting". Or put the code below at the bottom of your CSS and tweak it there. .list-menu-float .icon-menu:hover, .link-style-setting, .link-list-setting
{background-color: #8fa9ba;}.link-style-setting, .link-list-setting
{background-color: #8fa9ba;}Grante15 said: Due to how this list design is made, I'm not sure how to go about doing that. If I was to remake a good deal of the list CSS I could do it, but that is a lot of work for such a small design swap haha.[IMG]2. (Orange) How do I change the color of this text? (Can I place it at the bottom of the page?) Unfortunately, that's not really fixable. The search button/bar is a child of the same parent menu that houses the drop-down menu. So due to how the hovering feature works, when you hover over one it activates the other. I wish I had a solution for you here, but it's something only modifying the HTML could do (which I wish we could do mind you!). Find this selector in the CSS: ".status-menu:hover" Or use this at the bottom of the code: .status-menu:hover {background-color: #1f2631;}Grante15 said: Yep! Here's some sample code. You can change the colours from here.[IMG]5. (Blue) Can I change the color of the individual texts in the drop down menu when I'm about to click them? (They are all the same light blue color atm) .status-menu-container .status-menu .status-button.all_anime:hover { color: purple !important; }
.status-menu-container .status-menu .status-button.watching:hover,
.status-menu-container .status-menu .status-button.reading:hover { color: orange !important; }
.status-menu-container .status-menu .status-button.completed:hover { color: blue !important; }
.status-menu-container .status-menu .status-button.onhold:hover { color: yellow !important; }
.status-menu-container .status-menu .status-button.dropped:hover { color: red !important; }
.status-menu-container .status-menu .status-button.plantowatch:hover,
.status-menu-container .status-menu .status-button.plantoread:hover { color: grey !important; }Yep. You can either find this selector in the CSS: ".list-table .list-table-header .header-title" And then fiddle with the background property there, or you can add this code to the bottom of your list and change it here. .list-table .list-table-header .header-title { background: rgba(40, 40, 40, .5); } --------- For finding other things yourself, there's a lot of stuff than can be found through finding the class name through inspect element, then trying to find that text in the current CSS. Sometimes this will fail, but as a general rule it's pretty helpful. [Example] --------- And I don't know if you would be interested in doing so, but if you want to centre the list items titles (like the other theme has) you could find ".list-item .data.title" and add "text-align: center;". .list-item .data.title { text-align: center; } --------- I tried not to over-explain too many things to keep the post somewhat less of a behemoth than I normally tend to create, so let me know if anything is really confusing! |
Grante15 said: Hmm, strange. A lot of odd code added up to that one happening, huh. I fixed it by making the list's width consistent with everything else.Wow! Thanks a lot! This was super informative, and quite easy to follow! :D The only two remaining things that I wonder about is the menu (point 6. previously), the menu does this if there is not enough anime added: (https://imgur.com/n1CpFQt) It jumps to the left side of the page when it should be to the right. But I was thinking that one possibly could use coordinates or something to fix it in one position? I also can't get the ".list-item .data.title { text-align: center; }" to work, and i don't understand why? I check all the places in the code there i can find ".list-item .data.title" and I add "text-align: center;" within the {}, and I also add it last in the code to overwrite any other possible code that would counteract this, but it does not work? (https://pastebin.com/raw/9z99nVZA) Am I just stupid or is there something that I'm missing? Other than that, I'm super satisfied with this result! (I understand that HTML stuff that you can't really change is quite hard to do anything about ^^) I think it looks really good now! :D Again, 100x thanks to you sir! The text-align problem is 100% my bad, apologies for that. The selector was wrong, it should have had an extra piece at the end. I also noticed another issue with the idea that I fixed during this pass through the code. I'm the stupid one this time. ;P I grouped it all into one piece again here: [Code]. Replace your current stuff with it. It should have all your changes you've made since the last post since I took the copy only an hour or so before posting this. Glad I could help.~ If there's any more problems feel free to bring them up if you're wondering about them. :) |
You don't have the layout on your list so I can't tell you the exact issue. And you don't have anything added anyways on this account so see front page, there's a solution thingie there "fix broken layouts" https://myanimelist.net/clubs.php?cid=19736 but iirc you need to have your layout off private to get the HD covers nowadays (until they fix the API). Tho I think Malamute can add some covers despite that. |
 are the images supposed to be this blur? |
 |
| No, they're normally more clear. Unfortunately, the tool that generates covers requires a public list so that it can scan and generate the CSS for your list. |
Valerio_Lyndon said: No, they're normally more clear. Unfortunately, the tool that generates covers requires a public list so that it can scan and generate the CSS for your list. so all i have to do is make my list public? |
|
LittleJegster said: Valerio_Lyndon said: No, they're normally more clear. Unfortunately, the tool that generates covers requires a public list so that it can scan and generate the CSS for your list. so all i have to do is make my list public? The layout works fine for me, but I see you made your list public and it's still not working. I think you have to wait some time now after making it public now and check it tomorrow |
Shishio-kun said: The layout works fine for me, but I see you made your list public and it's still not working. I think you have to wait some time now after making it public now and check it tomorrow ok will do, thanks for the fast reply :) |
|
Vsamaral said: Ah, sorry about that! The code can be found as below. I can't guarantee it is exactly what was in the original link, but it's basically the same. But keep in mind this version is modified for Grante's tastes, not just fixes. :) If you were looking for something specific out of the code, I might be able to help.Valerio_Lyndon said: Hmm, strange. A lot of odd code added up to that one happening, huh. I fixed it by making the list's width consistent with everything else. The text-align problem is 100% my bad, apologies for that. The selector was wrong, it should have had an extra piece at the end. I also noticed another issue with the idea that I fixed during this pass through the code. I'm the stupid one this time. ;P I grouped it all into one piece again here: [Code]. Replace your current stuff with it. It should have all your changes you've made since the last post since I took the copy only an hour or so before posting this. Glad I could help.~ If there's any more problems feel free to bring them up if you're wondering about them. :) The [Code] is no longer available. Where I can get the updated Code? Thankss!! |
Vsamaral said: It's certainly possible using MalCat, although not as prettily as I'd like. Here's them vertically next to the list:First of all, thank you man! Just one more thing, I want to know if the animes can be divided into Lists like "Completed", "Watching", etc leaving everything the way it is, just sort by categories. Thanks for the quick reply.  And code: I would have liked to have also given you an option with them placed horizontally across the list, but there is no way to create space between the list items that I can think of so it ends up looking very squashed [Image]. I didn't do extensive testing on this code so let me know if there's any problems. :) |
Valerio_Lyndon said: It's certainly possible using MalCat, although not as prettily as I'd like. Here's them vertically next to the list: And code: I would have liked to have also given you an option with them placed horizontally across the list, but there is no way to create space between the list items that I can think of so it ends up looking very squashed [Image]. I didn't do extensive testing on this code so let me know if there's any problems. :) Hey man, thanks again, you are amazing! I add the List into the code, and I tried to merge the oldest code with the modified version, for now everything works out. I was testing the Lists, and I found something interesting. When I change the Sort in menu, the animes on the list were mixed. Here is a picture  Accel World I have already Completed, but when I sort by Anime Titles, it is on Watching List. Can you help me? kkk Thanks for everything again! There is no problem them vertically, so just relax. |
@Vsamaral Oh, you're right! Well, there's no way to separate the entries the way the classic list does it; You'll have to go category by category to view them that way. But I am pretty sure replacing the import you added to the top last post should fix the issue. Here's the new version of it that should hopefully stop them from getting divided incorrectly when sorted.@\import "https://malcat-gen.appspot.com/headers?template=body[data-query*='status":7']:not([data-query*='order"']) .list-item:nth-child($index){clear:left}body[data-query*='status":7']:not([data-query*='order"']) .list-item:nth-child($index):before{content:'$content'}"; |
Valerio_LyndonApr 3, 2019 2:44 AM
| Hi, I added a background image to my list but under Currently Watching it doesn't fill the whole background. Instead it only fills the screen behind the images. The rest of the background is white. This is the code I used - /* COLOR OF BACKGROUND */ .list-container, #status-menu, .list-unit, .list-unit .list-status-title { paste this new set of lines under there background-image: url() !important; background-attachment: fixed; background-size: cover; I'm guessing it's something to do with the "background-size: cover;" bit? |
BlaizeV said: Normally, yes, you would be correct about the background-size being the issue. But this theme is coded a little differently, so it turns out it's actually a height issue of the element that displays the background image. Adding this to the bottom of your code should fix it:I added a background image to my list but … it doesn't fill the whole background. Instead it only fills the screen behind the images. The rest of the background is white. … I'm guessing it's something to do with the "background-size: cover;" bit? .list-container { min-height: 100%; } |
More topics from this board
Sticky: » [ SIGNATURES ~ PROFILES] All guides, generators, and templatesShishio-kun - Feb 16, 2023 |
35 |
by iluvmozu
»»
6 hours ago |
|
Sticky: » [ BBCODE ] All 2023 BBcodes, Guides, and Templates ( 1 2 )Shishio-kun - Feb 16, 2023 |
63 |
by Shishio-kun
»»
6 hours ago |
|
» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )Shishio-kun - Apr 15, 2010 |
7924 |
by Shishio-kun
»»
Sep 24, 1:50 AM |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1262 |
by Shishio-kun
»»
Sep 22, 4:35 AM |
|
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
382 |
by Shishio-kun
»»
Sep 22, 4:29 AM |