New
Sep 22, 2020 7:13 AM
#6401
Hello there! I'm trying to make some changes to my list, one of which is to make my 10s stand out. I'm trying to change the title text color currently, but it wasn't working. (I edited the code posted to change text color based on status). .list-item .data.score-10 ~ .title .link { /* Entries with 10/10 color change */ color: yellow !important; } I'm sorry if this is completely off, but it didn't end up working, and I was wondering what I could try and do to fix that. Thank you! |
Please sign up for MangAlert! It's a little project I made that I'd really like to see the light of day and some users. MangAlert! (please sign up!) GitHub Repo (please star!) |
Sep 22, 2020 11:35 AM
#6402
Uji_Gintoki_Bowl said: This code will work.Hello there! I'm trying to make some changes to my list, one of which is to make my 10s stand out. I'm trying to change the title text color currently, but it wasn't working. (I edited the code posted to change text color based on status). .list-item .data.score-10 ~ .title .link { /* Entries with 10/10 color change */ color: yellow !important; } I'm sorry if this is completely off, but it didn't end up working, and I was wondering what I could try and do to fix that. Thank you! .data.score .score-10 { /* Entries with 10/10 color change */ color: yellow !important; } The CSS for the other scores would be: .data.score .score-9 .data.score .score-8 .data.score .score-7 .data.score .score-6 .data.score .score-5 .data.score .score-4 .data.score .score-3 .data.score .score-2 .data.score .score-1 .data.score .score-na |
Sep 23, 2020 10:45 PM
#6403
Hi there! I am currently using one of 5cm's grid themes for my lists (I think it was the one posted in the 2020 themes post) and I have two questions: 1) I want to do hover tags, but I can't figure out how to make them show up. I have seen other people with the same theme whose hover tags work fine. What should I do? 2) For some reason when I use the buttons at the top to toggle from the anime to the manga list or vice versa, the grid of images for the series don't show up. The layouts load fine when they are clicked on from my profile, though. Is there a way to fix this? Thanks! |
Sep 24, 2020 1:48 PM
#6404
arcanafool said: Hi there! I am currently using one of 5cm's grid themes for my lists (I think it was the one posted in the 2020 themes post) and I have two questions: 1) I want to do hover tags, but I can't figure out how to make them show up. I have seen other people with the same theme whose hover tags work fine. What should I do? 2) For some reason when I use the buttons at the top to toggle from the anime to the manga list or vice versa, the grid of images for the series don't show up. The layouts load fine when they are clicked on from my profile, though. Is there a way to fix this? Thanks! Wow you're watching Higurashi, Monster, and Death Note those are classics from the 2000s and really amazing experiences D: 1) You can add this code to the bottom of the CSS and that should add hover tags (it works for me in previews) /* TAG TEXT COLOR AND SIZE */ .list-table .list-table-data .data.tags * { color: white !important; font-size: 12px; } /* TAG TEXT POSITION*/ .list-table .list-table-data .data.tags { position: fixed; left: calc(50% - 70px); top: 33%; } /* OTHER CODES */ .list-table .list-table-data .data.tags { position: fixed; opacity: 0; display: inline !important; line-height: 16px !important; font-family: Segoe UI, Atilla, Arial, Helvetica, sans-serif; text-align:left; width:150px !important; height:auto !important; background-color:rgba(0,0,0,.5); box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 4px #000, 0 0 0 #000; pointer-events: none; /* animation */ z-index: 6;} .list-table .list-table-data:hover .data.tags, .list-table .list-table-data:hover .data.tags span:after { opacity: 1; padding:5px; box-sizing: border-box; transition: opacity .3s linear, margin-left .5s ease, transform 1s ease-in-out;} .list-table .list-table-header .header-title.tags { font-size: 0px !important; display: block !important; border-width: 0 !important; background: none !important; position: fixed !important; } .list-table .list-table-data .tags .edit{ display: none;} .data.tags a { white-space: inherit !important; } 2) I'm not sure why you're having this problem, you could add these to the top with the other imports until we figure out why and what to do @\import "https://dl.dropboxusercontent.com/s/dvwo76okltko1zk/data%20image%20link.css"; @\import "https://dl.dropboxusercontent.com/s/xkier4ibskg0lny/mangalist.css"; |
Sep 24, 2020 1:56 PM
#6405
Shishio-kun said: arcanafool said: Hi there! I am currently using one of 5cm's grid themes for my lists (I think it was the one posted in the 2020 themes post) and I have two questions: 1) I want to do hover tags, but I can't figure out how to make them show up. I have seen other people with the same theme whose hover tags work fine. What should I do? 2) For some reason when I use the buttons at the top to toggle from the anime to the manga list or vice versa, the grid of images for the series don't show up. The layouts load fine when they are clicked on from my profile, though. Is there a way to fix this? Thanks! Wow you're watching Higurashi, Monster, and Death Note those are classics from the 2000s and really amazing experiences D: 1) You can add this code to the bottom of the CSS and that should add hover tags (it works for me in previews) /* TAG TEXT COLOR AND SIZE */ .list-table .list-table-data .data.tags * { color: white !important; font-size: 12px; } /* TAG TEXT POSITION*/ .list-table .list-table-data .data.tags { position: fixed; left: calc(50% - 70px); top: 33%; } /* OTHER CODES */ .list-table .list-table-data .data.tags { position: fixed; opacity: 0; display: inline !important; line-height: 16px !important; font-family: Segoe UI, Atilla, Arial, Helvetica, sans-serif; text-align:left; width:150px !important; height:auto !important; background-color:rgba(0,0,0,.5); box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 4px #000, 0 0 0 #000; pointer-events: none; /* animation */ z-index: 6;} .list-table .list-table-data:hover .data.tags, .list-table .list-table-data:hover .data.tags span:after { opacity: 1; padding:5px; box-sizing: border-box; transition: opacity .3s linear, margin-left .5s ease, transform 1s ease-in-out;} .list-table .list-table-header .header-title.tags { font-size: 0px !important; display: block !important; border-width: 0 !important; background: none !important; position: fixed !important; } .list-table .list-table-data .tags .edit{ display: none;} .data.tags a { white-space: inherit !important; } 2) I'm not sure why you're having this problem, you could add these to the top with the other imports until we figure out why and what to do @\import "https://dl.dropboxusercontent.com/s/dvwo76okltko1zk/data%20image%20link.css"; @\import "https://dl.dropboxusercontent.com/s/xkier4ibskg0lny/mangalist.css"; Thanks! The hover tags now show up, but the position is fixed in the middle of the screen. How do I make it so they only show up on top of the series picture when it is moused over? |
Sep 24, 2020 3:43 PM
#6406
arcanafool said: Shishio-kun said: arcanafool said: Hi there! I am currently using one of 5cm's grid themes for my lists (I think it was the one posted in the 2020 themes post) and I have two questions: 1) I want to do hover tags, but I can't figure out how to make them show up. I have seen other people with the same theme whose hover tags work fine. What should I do? 2) For some reason when I use the buttons at the top to toggle from the anime to the manga list or vice versa, the grid of images for the series don't show up. The layouts load fine when they are clicked on from my profile, though. Is there a way to fix this? Thanks! Wow you're watching Higurashi, Monster, and Death Note those are classics from the 2000s and really amazing experiences D: 1) You can add this code to the bottom of the CSS and that should add hover tags (it works for me in previews) /* TAG TEXT COLOR AND SIZE */ .list-table .list-table-data .data.tags * { color: white !important; font-size: 12px; } /* TAG TEXT POSITION*/ .list-table .list-table-data .data.tags { position: fixed; left: calc(50% - 70px); top: 33%; } /* OTHER CODES */ .list-table .list-table-data .data.tags { position: fixed; opacity: 0; display: inline !important; line-height: 16px !important; font-family: Segoe UI, Atilla, Arial, Helvetica, sans-serif; text-align:left; width:150px !important; height:auto !important; background-color:rgba(0,0,0,.5); box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 4px #000, 0 0 0 #000; pointer-events: none; /* animation */ z-index: 6;} .list-table .list-table-data:hover .data.tags, .list-table .list-table-data:hover .data.tags span:after { opacity: 1; padding:5px; box-sizing: border-box; transition: opacity .3s linear, margin-left .5s ease, transform 1s ease-in-out;} .list-table .list-table-header .header-title.tags { font-size: 0px !important; display: block !important; border-width: 0 !important; background: none !important; position: fixed !important; } .list-table .list-table-data .tags .edit{ display: none;} .data.tags a { white-space: inherit !important; } 2) I'm not sure why you're having this problem, you could add these to the top with the other imports until we figure out why and what to do @\import "https://dl.dropboxusercontent.com/s/dvwo76okltko1zk/data%20image%20link.css"; @\import "https://dl.dropboxusercontent.com/s/xkier4ibskg0lny/mangalist.css"; Thanks! The hover tags now show up, but the position is fixed in the middle of the screen. How do I make it so they only show up on top of the series picture when it is moused over? Hmm try changing the three position: fixed; codes to position: absolute; although you might have to adjust the amount after left and top. Does that work? D: |
Sep 24, 2020 3:51 PM
#6407
Shishio-kun said: arcanafool said: Shishio-kun said: arcanafool said: Hi there! I am currently using one of 5cm's grid themes for my lists (I think it was the one posted in the 2020 themes post) and I have two questions: 1) I want to do hover tags, but I can't figure out how to make them show up. I have seen other people with the same theme whose hover tags work fine. What should I do? 2) For some reason when I use the buttons at the top to toggle from the anime to the manga list or vice versa, the grid of images for the series don't show up. The layouts load fine when they are clicked on from my profile, though. Is there a way to fix this? Thanks! Wow you're watching Higurashi, Monster, and Death Note those are classics from the 2000s and really amazing experiences D: 1) You can add this code to the bottom of the CSS and that should add hover tags (it works for me in previews) /* TAG TEXT COLOR AND SIZE */ .list-table .list-table-data .data.tags * { color: white !important; font-size: 12px; } /* TAG TEXT POSITION*/ .list-table .list-table-data .data.tags { position: fixed; left: calc(50% - 70px); top: 33%; } /* OTHER CODES */ .list-table .list-table-data .data.tags { position: fixed; opacity: 0; display: inline !important; line-height: 16px !important; font-family: Segoe UI, Atilla, Arial, Helvetica, sans-serif; text-align:left; width:150px !important; height:auto !important; background-color:rgba(0,0,0,.5); box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 4px #000, 0 0 0 #000; pointer-events: none; /* animation */ z-index: 6;} .list-table .list-table-data:hover .data.tags, .list-table .list-table-data:hover .data.tags span:after { opacity: 1; padding:5px; box-sizing: border-box; transition: opacity .3s linear, margin-left .5s ease, transform 1s ease-in-out;} .list-table .list-table-header .header-title.tags { font-size: 0px !important; display: block !important; border-width: 0 !important; background: none !important; position: fixed !important; } .list-table .list-table-data .tags .edit{ display: none;} .data.tags a { white-space: inherit !important; } 2) I'm not sure why you're having this problem, you could add these to the top with the other imports until we figure out why and what to do @\import "https://dl.dropboxusercontent.com/s/dvwo76okltko1zk/data%20image%20link.css"; @\import "https://dl.dropboxusercontent.com/s/xkier4ibskg0lny/mangalist.css"; Thanks! The hover tags now show up, but the position is fixed in the middle of the screen. How do I make it so they only show up on top of the series picture when it is moused over? Hmm try changing the three position: fixed; codes to position: absolute; although you might have to adjust the amount after left and top. Does that work? D: Hmmm...when I tried that they went back to being gone entirely, even after I fiddled with the left and top numbers. For reference, I just remembered whose profile I saw who had the hover tags working great-- it was on @/Promethazine's list. I would want the tags to be in a fixed position at the top of the image that show up when the image is scrolled over, so maybe hover tags was the wrong word for it? |
Sep 24, 2020 5:35 PM
#6408
arcanafool said: Shishio-kun said: arcanafool said: Shishio-kun said: arcanafool said: Hi there! I am currently using one of 5cm's grid themes for my lists (I think it was the one posted in the 2020 themes post) and I have two questions: 1) I want to do hover tags, but I can't figure out how to make them show up. I have seen other people with the same theme whose hover tags work fine. What should I do? 2) For some reason when I use the buttons at the top to toggle from the anime to the manga list or vice versa, the grid of images for the series don't show up. The layouts load fine when they are clicked on from my profile, though. Is there a way to fix this? Thanks! Wow you're watching Higurashi, Monster, and Death Note those are classics from the 2000s and really amazing experiences D: 1) You can add this code to the bottom of the CSS and that should add hover tags (it works for me in previews) /* TAG TEXT COLOR AND SIZE */ .list-table .list-table-data .data.tags * { color: white !important; font-size: 12px; } /* TAG TEXT POSITION*/ .list-table .list-table-data .data.tags { position: fixed; left: calc(50% - 70px); top: 33%; } /* OTHER CODES */ .list-table .list-table-data .data.tags { position: fixed; opacity: 0; display: inline !important; line-height: 16px !important; font-family: Segoe UI, Atilla, Arial, Helvetica, sans-serif; text-align:left; width:150px !important; height:auto !important; background-color:rgba(0,0,0,.5); box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 4px #000, 0 0 0 #000; pointer-events: none; /* animation */ z-index: 6;} .list-table .list-table-data:hover .data.tags, .list-table .list-table-data:hover .data.tags span:after { opacity: 1; padding:5px; box-sizing: border-box; transition: opacity .3s linear, margin-left .5s ease, transform 1s ease-in-out;} .list-table .list-table-header .header-title.tags { font-size: 0px !important; display: block !important; border-width: 0 !important; background: none !important; position: fixed !important; } .list-table .list-table-data .tags .edit{ display: none;} .data.tags a { white-space: inherit !important; } 2) I'm not sure why you're having this problem, you could add these to the top with the other imports until we figure out why and what to do @\import "https://dl.dropboxusercontent.com/s/dvwo76okltko1zk/data%20image%20link.css"; @\import "https://dl.dropboxusercontent.com/s/xkier4ibskg0lny/mangalist.css"; Thanks! The hover tags now show up, but the position is fixed in the middle of the screen. How do I make it so they only show up on top of the series picture when it is moused over? Hmm try changing the three position: fixed; codes to position: absolute; although you might have to adjust the amount after left and top. Does that work? D: Hmmm...when I tried that they went back to being gone entirely, even after I fiddled with the left and top numbers. For reference, I just remembered whose profile I saw who had the hover tags working great-- it was on @/Promethazine's list. I would want the tags to be in a fixed position at the top of the image that show up when the image is scrolled over, so maybe hover tags was the wrong word for it? At the bottom you need this for hover tags /* TAG TEXT COLOR AND SIZE */ .list-table .list-table-data .data.tags * { color: white !important; font-size: 12px; } /* TAG TEXT POSITION*/ .list-table .list-table-data .data.tags { position: absolute; margin-left: 0px !important; margin-top: -45px !important;; } /* OTHER CODES */ .list-table .list-table-data .data.tags { position: absolute; opacity: 0; display: inline !important; line-height: 16px !important; font-family: Segoe UI, Atilla, Arial, Helvetica, sans-serif; text-align:left; width:200px !important; height:auto !important; background-color:rgba(0,0,0,.5); box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 4px #000, 0 0 0 #000; pointer-events: none; /* animation */ z-index: 6;} .list-table .list-table-data:hover .data.tags, .list-table .list-table-data:hover .data.tags span:after { opacity: 1; padding:5px; box-sizing: border-box; transition: opacity .3s linear, margin-left .5s ease, transform 1s ease-in-out;} .list-table .list-table-header .header-title.tags { font-size: 0px !important; display: block !important; border-width: 0 !important; background: none !important; position: absolute !important; } .list-table .list-table-data .tags .edit{ display: none;} .data.tags a { white-space: inherit !important; } that should set them on top :D |
Sep 24, 2020 5:39 PM
#6409
@arcanafool Or is this what you're trying to do? This is the default layout look. You might be using an older version before this one - the top of your CSS doesn't say "with changes by Shishio-kun". The latest updated version is here https://myanimelist.net/forum/?topicid=1862853 |
Shishio-kunSep 24, 2020 5:44 PM
Sep 24, 2020 6:21 PM
#6410
Shishio-kun said: @arcanafool Or is this what you're trying to do? This is the default layout look. You might be using an older version before this one - the top of your CSS doesn't say "with changes by Shishio-kun". The latest updated version is here https://myanimelist.net/forum/?topicid=1862853 Yes that was what I was trying to do! I am now inputting my preferences into the new theme and have another question: in my old layout I had that stars gif repeated in the background all the way down. How do I do that in the new CSS? And how do I get rid of the blue thing when you scroll down? |
Sep 24, 2020 8:33 PM
#6411
arcanafool said: Shishio-kun said: @arcanafool Or is this what you're trying to do? This is the default layout look. You might be using an older version before this one - the top of your CSS doesn't say "with changes by Shishio-kun". The latest updated version is here https://myanimelist.net/forum/?topicid=1862853 Yes that was what I was trying to do! I am now inputting my preferences into the new theme and have another question: in my old layout I had that stars gif repeated in the background all the way down. How do I do that in the new CSS? And how do I get rid of the blue thing when you scroll down? Nevermind! I figured it out :) |
Sep 24, 2020 11:59 PM
#6412
arcanafool said: arcanafool said: Shishio-kun said: @arcanafool Or is this what you're trying to do? This is the default layout look. You might be using an older version before this one - the top of your CSS doesn't say "with changes by Shishio-kun". The latest updated version is here https://myanimelist.net/forum/?topicid=1862853 Yes that was what I was trying to do! I am now inputting my preferences into the new theme and have another question: in my old layout I had that stars gif repeated in the background all the way down. How do I do that in the new CSS? And how do I get rid of the blue thing when you scroll down? Nevermind! I figured it out :) Awesome, good job :D |
Sep 27, 2020 12:41 PM
#6413
hi...i'm back ^^'' though i think i have a simpler question this time. i was just wondering how to make it so that when the links to anime in my anime list are clicked, the anime page is opened in a separate tab instead of in the same tab. thanks! |
Sep 27, 2020 1:29 PM
#6414
arcanafool said: hi...i'm back ^^'' though i think i have a simpler question this time. i was just wondering how to make it so that when the links to anime in my anime list are clicked, the anime page is opened in a separate tab instead of in the same tab. thanks! Other than default control click / middle click functionality, you can only change the left click function via Javascript, and only for yourself. So, using a browser extension such as Tampermonkey, you could install a script for it by visiting this link (with Tampermonkey installed, it should prompt you with details about the script): [Link]. |
Sep 27, 2020 1:49 PM
#6415
Valerio_Lyndon said: arcanafool said: hi...i'm back ^^'' though i think i have a simpler question this time. i was just wondering how to make it so that when the links to anime in my anime list are clicked, the anime page is opened in a separate tab instead of in the same tab. thanks! Other than default control click / middle click functionality, you can only change the left click function via Javascript, and only for yourself. So, using a browser extension such as Tampermonkey, you could install a script for it by visiting this link (with Tampermonkey installed, it should prompt you with details about the script): [Link]. oh okay! thanks! |
Sep 27, 2020 3:25 PM
#6416
Tantalass said: Finished my animelist by folowing the video "Make a Custom Layout Theme (MyAnimeList CSS tutorial)", very easy to do same, thx for you work, also i share my edid of it. And have few question with what i need help, 1st - can i add in search filter for title genre (comedy, drama, atc) and 2nd - its add more then 1 line text in /* BANNER QUOTE*/ .cover-block::before { content: " At any age, being a child is the best way to live life to the fullest." } was want to use People need to live with a clear conscience. If you follow the straight path, sooner or later you will fall into the mud. But if you don't give up and move on, then one day the dirt will dry out and fall off. Moving your questions over here I don't know if I really understand what you want exactly for the first question. For the first thing, you can add tags like drama to the anime and then when you search "drama" the anime with drama tags will show up For the second, you could add this to the bottom of the CSS to put the second quote in the header where there's a lot of room. .cover-block::before { bottom: 25px; } .header:after { content: "People need to live with a clear conscience. If you follow the straight path, sooner or later you will fall into the mud. But if you don't give up and move on, then one day the dirt will dry out and fall off."; position: absolute; display: block !important; margin: auto; bottom:-50px; left: 300px; right: 0; width: 1200px; text-align: center; color: #fff !important; font-size: 18px !important; font-family: Rancho; text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000 !important; letter-spacing: 0 !important; pointer-events: none; } |
Shishio-kunSep 27, 2020 3:37 PM
Sep 28, 2020 12:57 AM
#6417
slidey said: Hey, I need help with something. As you can see (in my anime list) in titles such as "Boku no Hero Academia the Movie 2: Heroes:Rising", "Psycho-Pass: Sinners of the System Case.3 - Onshuu no Kanata ni__" the titles aren't aligned correctly in the list and it looks far from compact like I would like it. Is there anyone that could help me make it more compact so it doesn't go over the "add/more" button?! P.S.: Changing the font is not what I want, I have tried it and it doesn't work! I think there's a way to stop these long titles before they get too long, and they end in ellipses before they get too long Would that work? I don't know the code but I'm sure I could find it. Also maybe it's possible to change the individual title font size to a lower size, but it will look bad imo since you'll randomly have these tiny fonts for some titles. We can also do this with the long titles so they stop and move to a second line. This might be best. But we'd have to move the little TV icons to a stationary place like where they are here, as far as I know. |
Sep 28, 2020 2:01 AM
#6418
slidey said: Shishio-kun said: slidey said: Hey, I need help with something. As you can see (in my anime list) in titles such as "Boku no Hero Academia the Movie 2: Heroes:Rising", "Psycho-Pass: Sinners of the System Case.3 - Onshuu no Kanata ni__" the titles aren't aligned correctly in the list and it looks far from compact like I would like it. Is there anyone that could help me make it more compact so it doesn't go over the "add/more" button?! P.S.: Changing the font is not what I want, I have tried it and it doesn't work! I think there's a way to stop these long titles before they get too long, and they end in ellipses before they get too long Would that work? I don't know the code but I'm sure I could find it. Also maybe it's possible to change the individual title font size to a lower size, but it will look bad imo since you'll randomly have these tiny fonts for some titles. We can also do this with the long titles so they stop and move to a second line. This might be best. But we'd have to move the little TV icons to a stationary place like where they are here, as far as I know. Thanks for the reply, so for the second option there is no way the tv icon could be placed after each title? Because that would be best but it's unfortunate if it doesn't work like that. But to respond to your question, the second option suits it best and I would appreciate if you could help me with that. There might be a way to keep the TV at the end, but I don't know it :D I'm actually not as good at CSS as a professional >_< ok try to add to the bottom .list-item .data.completed ~ .title .link { position: absolute; width: 300px; } .icon-watch, .icon-watch-pv { position: absolute; left: 350px !important; } |
Shishio-kunSep 28, 2020 2:08 AM
Sep 28, 2020 2:24 AM
#6419
slidey said: Shishio-kun said: slidey said: Shishio-kun said: slidey said: Hey, I need help with something. As you can see (in my anime list) in titles such as "Boku no Hero Academia the Movie 2: Heroes:Rising", "Psycho-Pass: Sinners of the System Case.3 - Onshuu no Kanata ni__" the titles aren't aligned correctly in the list and it looks far from compact like I would like it. Is there anyone that could help me make it more compact so it doesn't go over the "add/more" button?! P.S.: Changing the font is not what I want, I have tried it and it doesn't work! I think there's a way to stop these long titles before they get too long, and they end in ellipses before they get too long Would that work? I don't know the code but I'm sure I could find it. Also maybe it's possible to change the individual title font size to a lower size, but it will look bad imo since you'll randomly have these tiny fonts for some titles. We can also do this with the long titles so they stop and move to a second line. This might be best. But we'd have to move the little TV icons to a stationary place like where they are here, as far as I know. Thanks for the reply, so for the second option there is no way the tv icon could be placed after each title? Because that would be best but it's unfortunate if it doesn't work like that. But to respond to your question, the second option suits it best and I would appreciate if you could help me with that. There might be a way to keep the TV at the end, but I don't know it :D I'm actually not as good at CSS as a professional >_< ok try to add to the bottom .list-item .data.completed ~ .title .link { position: absolute; width: 300px; } .icon-watch, .icon-watch-pv { position: absolute; left: 350px !important; } Worked really nicely but the TV is kind of a problem right now :^(. If you can look at titles such as jojo you'll see the TV is over the actual title how about this instead (lower width on the titles) D: .list-item .data.completed ~ .title .link { position: absolute; width: 250px; } .icon-watch, .icon-watch-pv { position: absolute; left: 350px !important; } |
Sep 28, 2020 5:19 AM
#6420
Shishio-kun said: Tantalass said: Finished my animelist by folowing the video "Make a Custom Layout Theme (MyAnimeList CSS tutorial)", very easy to do same, thx for you work, also i share my edid of it. And have few question with what i need help, 1st - can i add in search filter for title genre (comedy, drama, atc) and 2nd - its add more then 1 line text in /* BANNER QUOTE*/ .cover-block::before { content: " At any age, being a child is the best way to live life to the fullest." } was want to use People need to live with a clear conscience. If you follow the straight path, sooner or later you will fall into the mud. But if you don't give up and move on, then one day the dirt will dry out and fall off. Moving your questions over here I don't know if I really understand what you want exactly for the first question. For the first thing, you can add tags like drama to the anime and then when you search "drama" the anime with drama tags will show up For the second, you could add this to the bottom of the CSS to put the second quote in the header where there's a lot of room. .cover-block::before { bottom: 25px; } .header:after { content: "People need to live with a clear conscience. If you follow the straight path, sooner or later you will fall into the mud. But if you don't give up and move on, then one day the dirt will dry out and fall off."; position: absolute; display: block !important; margin: auto; bottom:-50px; left: 300px; right: 0; width: 1200px; text-align: center; color: #fff !important; font-size: 18px !important; font-family: Rancho; text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000 !important; letter-spacing: 0 !important; pointer-events: none; } thank you for help with shows words in 2 lines, about 1st question i was mean, add in filter more option for it to sort by genre type anime title like it has main search page as i got in this version there no that filter and if there some instruction on making own filter, it would be nice too, sorry for asking that, before search themselfs on forum. its not imortant at all :) good day. |
TantalassSep 28, 2020 5:26 AM
Sep 28, 2020 2:41 PM
#6421
slidey said: Shishio-kun said: slidey said: Shishio-kun said: slidey said: Shishio-kun said: slidey said: Hey, I need help with something. As you can see (in my anime list) in titles such as "Boku no Hero Academia the Movie 2: Heroes:Rising", "Psycho-Pass: Sinners of the System Case.3 - Onshuu no Kanata ni__" the titles aren't aligned correctly in the list and it looks far from compact like I would like it. Is there anyone that could help me make it more compact so it doesn't go over the "add/more" button?! P.S.: Changing the font is not what I want, I have tried it and it doesn't work! I think there's a way to stop these long titles before they get too long, and they end in ellipses before they get too long Would that work? I don't know the code but I'm sure I could find it. Also maybe it's possible to change the individual title font size to a lower size, but it will look bad imo since you'll randomly have these tiny fonts for some titles. We can also do this with the long titles so they stop and move to a second line. This might be best. But we'd have to move the little TV icons to a stationary place like where they are here, as far as I know. Thanks for the reply, so for the second option there is no way the tv icon could be placed after each title? Because that would be best but it's unfortunate if it doesn't work like that. But to respond to your question, the second option suits it best and I would appreciate if you could help me with that. There might be a way to keep the TV at the end, but I don't know it :D I'm actually not as good at CSS as a professional >_< ok try to add to the bottom .list-item .data.completed ~ .title .link { position: absolute; width: 300px; } .icon-watch, .icon-watch-pv { position: absolute; left: 350px !important; } Worked really nicely but the TV is kind of a problem right now :^(. If you can look at titles such as jojo you'll see the TV is over the actual title how about this instead (lower width on the titles) D: .list-item .data.completed ~ .title .link { position: absolute; width: 250px; } .icon-watch, .icon-watch-pv { position: absolute; left: 350px !important; } Worked really nicely, now while I was scrolling around , I found out that the title "Mob Psycho 100: Dai Ikkai Rei toka Soudansho Ian Ryokou - Kokoro Mitasu Iyashi no Tabi" looks so out of place :D. Can you help me with that as well? Or is it too much work?? We can add space to the tag, that's the best I can think of D: #tags-39651{ padding-bottom: 60px; } |
Sep 28, 2020 2:42 PM
#6422
Tantalass said: Shishio-kun said: Tantalass said: Finished my animelist by folowing the video "Make a Custom Layout Theme (MyAnimeList CSS tutorial)", very easy to do same, thx for you work, also i share my edid of it. And have few question with what i need help, 1st - can i add in search filter for title genre (comedy, drama, atc) and 2nd - its add more then 1 line text in /* BANNER QUOTE*/ .cover-block::before { content: " At any age, being a child is the best way to live life to the fullest." } was want to use People need to live with a clear conscience. If you follow the straight path, sooner or later you will fall into the mud. But if you don't give up and move on, then one day the dirt will dry out and fall off. Moving your questions over here I don't know if I really understand what you want exactly for the first question. For the first thing, you can add tags like drama to the anime and then when you search "drama" the anime with drama tags will show up For the second, you could add this to the bottom of the CSS to put the second quote in the header where there's a lot of room. .cover-block::before { bottom: 25px; } .header:after { content: "People need to live with a clear conscience. If you follow the straight path, sooner or later you will fall into the mud. But if you don't give up and move on, then one day the dirt will dry out and fall off."; position: absolute; display: block !important; margin: auto; bottom:-50px; left: 300px; right: 0; width: 1200px; text-align: center; color: #fff !important; font-size: 18px !important; font-family: Rancho; text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000 !important; letter-spacing: 0 !important; pointer-events: none; } thank you for help with shows words in 2 lines, about 1st question i was mean, add in filter more option for it to sort by genre type anime title like it has main search page as i got in this version there no that filter and if there some instruction on making own filter, it would be nice too, sorry for asking that, before search themselfs on forum. its not imortant at all :) good day. Hmm I don't understand what you mean at all D: |
Sep 28, 2020 3:12 PM
#6423
slidey said: Shishio-kun said: slidey said: Shishio-kun said: slidey said: Shishio-kun said: slidey said: Shishio-kun said: slidey said: Hey, I need help with something. As you can see (in my anime list) in titles such as "Boku no Hero Academia the Movie 2: Heroes:Rising", "Psycho-Pass: Sinners of the System Case.3 - Onshuu no Kanata ni__" the titles aren't aligned correctly in the list and it looks far from compact like I would like it. Is there anyone that could help me make it more compact so it doesn't go over the "add/more" button?! P.S.: Changing the font is not what I want, I have tried it and it doesn't work! I think there's a way to stop these long titles before they get too long, and they end in ellipses before they get too long Would that work? I don't know the code but I'm sure I could find it. Also maybe it's possible to change the individual title font size to a lower size, but it will look bad imo since you'll randomly have these tiny fonts for some titles. We can also do this with the long titles so they stop and move to a second line. This might be best. But we'd have to move the little TV icons to a stationary place like where they are here, as far as I know. Thanks for the reply, so for the second option there is no way the tv icon could be placed after each title? Because that would be best but it's unfortunate if it doesn't work like that. But to respond to your question, the second option suits it best and I would appreciate if you could help me with that. There might be a way to keep the TV at the end, but I don't know it :D I'm actually not as good at CSS as a professional >_< ok try to add to the bottom .list-item .data.completed ~ .title .link { position: absolute; width: 300px; } .icon-watch, .icon-watch-pv { position: absolute; left: 350px !important; } Worked really nicely but the TV is kind of a problem right now :^(. If you can look at titles such as jojo you'll see the TV is over the actual title how about this instead (lower width on the titles) D: .list-item .data.completed ~ .title .link { position: absolute; width: 250px; } .icon-watch, .icon-watch-pv { position: absolute; left: 350px !important; } Worked really nicely, now while I was scrolling around , I found out that the title "Mob Psycho 100: Dai Ikkai Rei toka Soudansho Ian Ryokou - Kokoro Mitasu Iyashi no Tabi" looks so out of place :D. Can you help me with that as well? Or is it too much work?? We can add space to the tag, that's the best I can think of D: #tags-39651{ padding-bottom: 60px; } unfortunately that won't work cause I need my tags :D Can I use the stuff you gave me for everything else except that mob psycho title? It should just add a little space to the bottom, but the additional tags you added seems to fix the problem :D |
Sep 29, 2020 1:18 PM
#6424
I'll preface this by saying I have no idea to write complicated css from scratch and have really only edited my current list a good amount. This is gonna sound really wack, and I'm fairly sure it's not even possible (looked around forums and couldn't find it. Maybe it's just such a dumb question that no one asked lol). Is it possible for you to have a review/comments section separately from tags that is clearly visible on the list along with the tags? Now, I know that you can make another tag for it, but that's not what I am going for here. What I'm thinking is when I hover over the entry, a review/blurb pops up on the right (I've shown below what I think I'd want it to look like when I hover over an entry). I know that it's possible to edit the properties for individual entries by entering their number (e.g. https://myanimelist.net/anime/918/Gintama), so maybe I could some how utilize this to make my blurbs? Any help or advice is appreciated. Thanks! |
Please sign up for MangAlert! It's a little project I made that I'd really like to see the light of day and some users. MangAlert! (please sign up!) GitHub Repo (please star!) |
Sep 29, 2020 2:26 PM
#6425
Uji_Gintoki_Bowl said: I'll preface this by saying I have no idea to write complicated css from scratch and have really only edited my current list a good amount. This is gonna sound really wack, and I'm fairly sure it's not even possible (looked around forums and couldn't find it. Maybe it's just such a dumb question that no one asked lol). Is it possible for you to have a review/comments section separately from tags that is clearly visible on the list along with the tags? Now, I know that you can make another tag for it, but that's not what I am going for here. What I'm thinking is when I hover over the entry, a review/blurb pops up on the right (I've shown below what I think I'd want it to look like when I hover over an entry). I know that it's possible to edit the properties for individual entries by entering their number (e.g. https://myanimelist.net/anime/918/Gintama), so maybe I could some how utilize this to make my blurbs? Any help or advice is appreciated. Thanks! It sounds like you want to add hover tags in addition to the tags the layout already has. I came up with this, you add it to the bottom. This is only for the first anime, info on how to add hover tags for the rest of the anime follows- /* HOVER TAGS CLARITY*/ #tags-40956 span:last-child:after { color: white !important; content: "This was one of the first anime I ever saw." !important; opacity: 1 !important; font-size: 12px !important; line-height: inherit !important; } #tags-40956 span:last-child:after{ position: fixed; right: 0; top: 33%; } #tags-40956 span:last-child:after{ position: fixed; opacity: 0 !important; display: inline !important; line-height: 16px !important; font-family: Segoe UI, Atilla, Arial, Helvetica, sans-serif; text-align:left; width:150px !important; height:auto !important; background-color:rgba(0,0,0,.5); box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 4px #000, 0 0 0 #000; pointer-events: none; /* animation */ z-index: 6;} .list-table .list-table-data:hover #tags-40956 span:last-child:after, .list-table .list-table-data:hover #tags-40956 span:last-child:after{ opacity: 1 !important; padding:5px; box-sizing: border-box; transition: opacity .3s linear, margin-left .5s ease, transform 1s ease-in-out;} You change the text after content for the hover tags text. This is just for one anime, the first one Enen no whatever. You have to add the codes again and change the number in the selectors from 40956 to the number that appears in the anime's URL. So God of High School would be /* HOVER TAGS CLARITY*/ #tags-41353 span:last-child:after { color: white !important; content: "This was one of the first anime I ever saw." !important; opacity: 1 !important; font-size: 12px !important; line-height: inherit !important; } #tags-41353 span:last-child:after{ position: fixed; right: 0; top: 33%; } #tags-41353 span:last-child:after{ position: fixed; opacity: 0 !important; display: inline !important; line-height: 16px !important; font-family: Segoe UI, Atilla, Arial, Helvetica, sans-serif; text-align:left; width:150px !important; height:auto !important; background-color:rgba(0,0,0,.5); box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 4px #000, 0 0 0 #000; pointer-events: none; /* animation */ z-index: 6;} .list-table .list-table-data:hover #tags-41353 span:last-child:after, .list-table .list-table-data:hover #tags-41353 span:last-child:after{ opacity: 1 !important; padding:5px; box-sizing: border-box; transition: opacity .3s linear, margin-left .5s ease, transform 1s ease-in-out;} Notice 41353 is in God of High School's URL when you point to it |
Sep 29, 2020 2:30 PM
#6426
@Shishio-kun Oh my god, I never thought I'd get such a detailed response that gave me EXACTLY what I was looking for. You're honestly awesome boss, thanks so much! Time to go test this out |
Please sign up for MangAlert! It's a little project I made that I'd really like to see the light of day and some users. MangAlert! (please sign up!) GitHub Repo (please star!) |
Sep 29, 2020 3:27 PM
#6427
Uji_Gintoki_Bowl said: @Shishio-kun Oh my god, I never thought I'd get such a detailed response that gave me EXACTLY what I was looking for. You're honestly awesome boss, thanks so much! Time to go test this out Awesome :D |
Oct 4, 2020 2:49 PM
#6428
Did something happen to the malscraper.azurewebsites.net website? I'm not seeing the images anymore and I'm getting an error 403 when I try to access it manually. |
Oct 4, 2020 8:45 PM
#6429
El-Melloi said: I think they're having some hosting problems or undergoing a bit of maintenance. This happened yesterday as well, but was fixed within the hour. Did something happen to the malscraper.azurewebsites.net website? I'm not seeing the images anymore and I'm getting an error 403 when I try to access it manually. |
Oct 5, 2020 5:14 AM
#6430
@Valerio_Lyndon Thanks for the reply, looks like I was worried for nothing. |
Oct 5, 2020 4:53 PM
#6431
Alright, so I have an idea. Basically, I want to make a hybrid list. Right now I have the Grid Style. I want to change the grid to a list, but keep the buttons and banners and all the pictures I already have. So in short I want to have my Grid Style but with the Clarity Style's list interface, if that makes sense. What would be the easiest way to go about doing this? |
Oct 6, 2020 6:34 AM
#6432
I'm baaaack. I looked around for info on including the MAL score in a list. I found one thread with a browser extension that can do that (code expired), but I want it on my public list, insertable into the css code. I have a concept for what I'm thinking below. Like I said, I've seen this idea of seeing mal scores in a list nowhere on the forums, so I'm fairly sure it must be impossible to do. Any thoughts or ideas or an explanation on how this would work? Even if it is not possible, I'd like to gain some knowledge from this. Thanks in advance! |
Uji_Gintoki_BowlOct 7, 2020 6:45 AM
Please sign up for MangAlert! It's a little project I made that I'd really like to see the light of day and some users. MangAlert! (please sign up!) GitHub Repo (please star!) |
Oct 8, 2020 5:05 PM
#6433
MalScraper has been extremely unreliable lately. I've attached the layout I'm currently using. While I took inspiration from some of what I saw here, at the time no classic layouts had all of the functionalities I wanted, so I've coded this one almost entirely myself. I want to find a new way to import cover images into I know MAL recently released their public API again, is there a way to import images from the API? EDIT: Allso, is there any chance that one day the Classic CSS won't be supported? I haven't heard anything about it, but was wondering if anyone else has. |
AuraStormLucarioOct 8, 2020 5:11 PM
Check out my custom anime list theme here: https://myanimelist.net/forum/?topicid=1768732 |
Oct 8, 2020 5:48 PM
#6434
AuraStormLucario said: MalScraper has been extremely unreliable lately. I've attached the layout I'm currently using. While I took inspiration from some of what I saw here, at the time no classic layouts had all of the functionalities I wanted, so I've coded this one almost entirely myself. https://i.imgur.com/8ENPPk6.png I want to find a new way to import cover images into I know MAL recently released their public API again, is there a way to import images from the API? I've noticed the same, very unstable. It's unfortuante, and I am unsure if it's the tool itself or MAL making changes. The only options other than the cover generator would be to:
AuraStormLucario said: EDIT: Allso, is there any chance that one day the Classic CSS won't be supported? I haven't heard anything about it, but was wondering if anyone else has. It's possible, but so far they have supported them for several years already so I don't see them removing support unless they begin making broad changes to the backend with new features implemented. |
Oct 8, 2020 7:54 PM
#6435
d-how9 said: Alright, so I have an idea. Basically, I want to make a hybrid list. Right now I have the Grid Style. I want to change the grid to a list, but keep the buttons and banners and all the pictures I already have. So in short I want to have my Grid Style but with the Clarity Style's list interface, if that makes sense. What would be the easiest way to go about doing this? This is possible, it just requires deleting some code from one theme and inserting the relevant code from the other. But, if you haven't touched CSS before, this will probably be very difficult. I can do it for you if you wish, but to properly keep your images intact, I'll need you to share your current CSS code with all your image links inserted. If you could place it in a pastebin and share the link to it, that'd be perfect. |
Oct 8, 2020 8:03 PM
#6436
Uji_Gintoki_Bowl said: I'm baaaack. I looked around for info on including the MAL score in a list. I found one thread with a browser extension that can do that (code expired), but I want it on my public list, insertable into the css code. I have a concept for what I'm thinking below. https://i.imgur.com/Gz7ZTjL.jpg Like I said, I've seen this idea of seeing mal scores in a list nowhere on the forums, so I'm fairly sure it must be impossible to do. Any thoughts or ideas or an explanation on how this would work? Even if it is not possible, I'd like to gain some knowledge from this. Thanks in advance! It's possible, but I am unsure if there is any tool made to do it yet. The public score data would have to be scraped using a script, most likely made with JavaScript. This script could fetch the score data and generate a CSS template to add to your list. There does exist this tool by Cateinya which should, in theory, do exactly that (when using the correct template that generates the score): [Link]. But, I couldn't get this working for me today so I am unsure if it is still operational. Could give it a go though, if you put [SCORE] into the template field just to see if it outputs anything. Otherwise, I don't think there is another tool to do this at the moment, so one would have to be created. |
Oct 8, 2020 8:27 PM
#6437
Valerio_Lyndon said: Uji_Gintoki_Bowl said: I'm baaaack. I looked around for info on including the MAL score in a list. I found one thread with a browser extension that can do that (code expired), but I want it on my public list, insertable into the css code. I have a concept for what I'm thinking below. https://i.imgur.com/Gz7ZTjL.jpg Like I said, I've seen this idea of seeing mal scores in a list nowhere on the forums, so I'm fairly sure it must be impossible to do. Any thoughts or ideas or an explanation on how this would work? Even if it is not possible, I'd like to gain some knowledge from this. Thanks in advance! It's possible, but I am unsure if there is any tool made to do it yet. The public score data would have to be scraped using a script, most likely made with JavaScript. This script could fetch the score data and generate a CSS template to add to your list. There does exist this tool by Cateinya which should, in theory, do exactly that (when using the correct template that generates the score): [Link]. But, I couldn't get this working for me today so I am unsure if it is still operational. Could give it a go though, if you put [SCORE] into the template field just to see if it outputs anything. Otherwise, I don't think there is another tool to do this at the moment, so one would have to be created. Unfortunately, I have absolutely no experience with css... I can't even bookmarrk text on my browser (or I'm misunderstanding badly) Is there any workaround, or am I stuck? If y'all aren't able to make one, idk how to approach the issue. Surprised no one has attempted to do such a thing with their lists tho. |
Uji_Gintoki_BowlOct 9, 2020 7:13 AM
Please sign up for MangAlert! It's a little project I made that I'd really like to see the light of day and some users. MangAlert! (please sign up!) GitHub Repo (please star!) |
Oct 8, 2020 10:25 PM
#6438
Valerio_Lyndon said: d-how9 said: Alright, so I have an idea. Basically, I want to make a hybrid list. Right now I have the Grid Style. I want to change the grid to a list, but keep the buttons and banners and all the pictures I already have. So in short I want to have my Grid Style but with the Clarity Style's list interface, if that makes sense. What would be the easiest way to go about doing this? This is possible, it just requires deleting some code from one theme and inserting the relevant code from the other. But, if you haven't touched CSS before, this will probably be very difficult. I can do it for you if you wish, but to properly keep your images intact, I'll need you to share your current CSS code with all your image links inserted. If you could place it in a pastebin and share the link to it, that'd be perfect. I have only a little experience with CSS so that would be much appreciated. Here are some concept pictures I made: https://imgur.com/GmsVEdl https://imgur.com/PNuHHX9 . If any of it is not possible that's alright. I really only care about my Anime List, but if its easy enough my Manga List would be amazing too. Here is the codes for my anime list: https://pastebin.com/a4sCK2hF , and my manga list: https://pastebin.com/Ajem4ZUy . Thank you for your time and help! |
Oct 9, 2020 2:04 AM
#6439
Here we go, this should (hopefully) match your initial idea. Replace your current CSS with these new ones: [Anime Code] [Manga Code] If you want to change any of the colours, they can be found near the top of the CSS in a new section labelled "Clarity Colours". This is the default version of clarity, so no image hover or other modifications. But if you do want the image hover, then you can add it to the bottom of the new CSS. Here's the code for it. /*-S-T-A-R-T--------------------*\ | Hover Image R0.3 | \*------------------------------*/ .data.image a{overflow:visible}.data.image a:before{content:"";position:absolute;top:50%;left:-166px;z-index:50;width:150px;height:0;background:var(--bg-dark) no-repeat center/cover;border-radius:8px;box-shadow:0 0 2px #000;opacity:0;pointer-events:none;transition:all .3s ease}.list-item:hover .data.image a:before{top:calc(50% - 100px);height:200px;opacity:1}.data.image a:after,.data.image img{border-radius:50%} /*------------------------E-N-D-*/ |
Oct 9, 2020 5:53 AM
#6440
Valerio_Lyndon said: AuraStormLucario said: MalScraper has been extremely unreliable lately. I've attached the layout I'm currently using. While I took inspiration from some of what I saw here, at the time no classic layouts had all of the functionalities I wanted, so I've coded this one almost entirely myself. https://i.imgur.com/8ENPPk6.png I want to find a new way to import cover images into I know MAL recently released their public API again, is there a way to import images from the API? I've noticed the same, very unstable. It's unfortuante, and I am unsure if it's the tool itself or MAL making changes. The only options other than the cover generator would be to:
AuraStormLucario said: EDIT: Allso, is there any chance that one day the Classic CSS won't be supported? I haven't heard anything about it, but was wondering if anyone else has. It's possible, but so far they have supported them for several years already so I don't see them removing support unless they begin making broad changes to the backend with new features implemented. I took a look at your blog, it was very helpful. I've put a commented out line that uses the dropbox you suggested in my CSS to use as backup for when malscraper inevitably goes down. I've thought about making my own cover generator but unfortunately don't have the time to really delve into it as a student. If I embark on that project in the future, I'll be sure to share with the community. Thanks so much for the quick reply! EDIT: One last question, is it possible to code a modern stylesheet such that it is visually the same as this current one? Specifically, the problem I had last time was being able use the tag section for a longer review of the anime. |
AuraStormLucarioOct 9, 2020 2:25 PM
Check out my custom anime list theme here: https://myanimelist.net/forum/?topicid=1768732 |
Oct 10, 2020 6:23 PM
#6441
AuraStormLucario said: I took a look at your blog, it was very helpful. I've put a commented out line that uses the dropbox you suggested in my CSS to use as backup for when malscraper inevitably goes down. I've thought about making my own cover generator but unfortunately don't have the time to really delve into it as a student. If I embark on that project in the future, I'll be sure to share with the community. Thanks so much for the quick reply! Glad to hear it was helpful, you're the first person to not say it was confusing lol. AuraStormLucario said: One last question, is it possible to code a modern stylesheet such that it is visually the same as this current one? Specifically, the problem I had last time was being able use the tag section for a longer review of the anime. You could get the basic look replicated easy enough, but it wouldn't be an exact recreation as there are differences between the two styles that are not changable with CSS. For instance, there wouldn't be headers between categories, stats at the end of each category, links would probably have to be in slightly different places, etcetera. It would look close but definitely be a bit different. |
Oct 11, 2020 2:08 PM
#6442
Uji_Gintoki_Bowl said: Unfortunately, I have absolutely no experience with css... I can't even bookmarrk text on my browser (or I'm misunderstanding badly) Is there any workaround, or am I stuck? If y'all aren't able to make one, idk how to approach the issue. Surprised no one has attempted to do such a thing with their lists tho. I think the tool I linked previously is your best bet at the moment. It will require you to manually re-generated the CSS every time you want it updated, but I don't have the time to create a userscript to do it automatically for you at the moment. But since the original code is broken and you didn't seem to get the original instructions, I made a new set. But first, add this template to the bottom of your code. It will style all the generated CSS we get later. .progress div { position: relative; } .progress div:after { position: absolute; left: -15px; top: calc(50% + 10px); font: 14px 'Inconsolata', monospace; transform: translateX(-50%); } Step 1 - Code Copy all the code from this link: [Code] We will paste it in the next step. Step 2 - Bookmark Add a bookmarklet. There are a couple of ways to do this. If you have the bookmark bar enabled, right click on it and select the option that says "Add Page" (Chrome) or "New Bookmark" (Firefox). This will bring up a dialog sort of like this: Name it what you want, and input the code from step 1 into the "URL" or "Location" field. If you do not have the bookmark bar enabled, add a bookmark how you normally would. Usually there is a button in the URL bar or you can press a keybind such as CTRL+D. Save the bookmark as is (name and URL don't matter much apart from remembering the name and where you saved it). Next, open your bookmark manager/section. There should be a link to it somewhere in your browsers' menu. Right click on your bookmark and choose "Edit". This should bring you to a UI looking something like this: Name it what you want, and input the code from step 1 into the "URL" or "Location" field. Step 3 - Generating the CSS Visit your anime or manga list. Load the "All Anime" category and scroll all the way to the bottom to load all the items. Activate or "visit" the bookmark we added by single or double clicking on the bookmark (depending on the menu, it may take one or two clicks). This should bring up a large popup box. Click on the "Ok" button of the popup, then click on the "start" button on the top-left corner. The generation begins. It may take some time if your list is long (it has a small delay between each generation in order not to flood the server). Just check that the processing number (next to the button is increasing regularly. If it does not increase, reload the page and reopen the bookmark. Wait until the buttons text is "Done (close)". Copy the text generated on the big section at the bottom of the window. This is your generated CSS. For now, you can paste your code directly into your custom CSS box on MAL. But, for the long-term it might well be worth checking out hosting the CSS as a seperate @import as MAL does have a character limit on CSS, which is fixed by hosting it elsewhere. For now though, we can roll with this. Mostly because it will take too long to write this out when I am unsure if you need it or not. |
Oct 11, 2020 4:07 PM
#6443
@Valerio_Lyndon Holy moly IT WORKED!!! Thank you so so much for helping me with that. I never thought that it'd be possible since I'd never seen it on a list before. Gah, this is so freaking cool! I'll probably update it once every 2 weeks or something like that if I find the time. The load up time doesn't seem to have changed much, but I'll think about importing later down the line. Again, thank you SO MUCH. |
Please sign up for MangAlert! It's a little project I made that I'd really like to see the light of day and some users. MangAlert! (please sign up!) GitHub Repo (please star!) |
Oct 14, 2020 7:25 PM
#6444
I'm currently using this theme: https://myanimelist.net/forum/?topicid=1863392 How do I add the menu buttons (quick add, anime list, manga list)? And would I be able to position the buttons above my name? |
Oct 15, 2020 10:47 AM
#6445
I hope I'm not exploiting the thread too much, but I'm back with another ambitious request. I checked out the Javascript and saw that it outputs for synopsis as well with [DESC], but the css is stored the same way that score is, so I cannot do that addition to my list separately. As such, I'm sure the ".progress" part of the print at the beginning has to be changed to something else. I have my concept below. Using the same process that was used to add MAL score (I've put the code that was given to me below so we know what I'm talking about), I'm looking to add a button for synopsis for which a pop-up shows up kinda like the filter. I basically need some css similar to the generic formatting for an entry's MAL score (which I recieved form Valerio_Lyndon - thank you so much) but as a pop-up, and some small edit to the tool to give me css that doesn't intersect with the css that was outputted for MAL Score. .progress div { position: relative; } .progress div:after { position: absolute; left: -15px; top: calc(50% + 10px); font: 14px 'Inconsolata', monospace; transform: translateX(-50%); } My idea is below: |
Uji_Gintoki_BowlOct 16, 2020 4:25 PM
Please sign up for MangAlert! It's a little project I made that I'd really like to see the light of day and some users. MangAlert! (please sign up!) GitHub Repo (please star!) |
Oct 16, 2020 4:32 AM
#6446
Thanks. Everything is right but just having a problem with my avatar banner. After selecting a picture it only covered half of the banner (avatar slot) If u have any solution please let me know. It will be appreciated. If i was not able to explain please view my mal. You will understand what i mean't. Thanks |
Oct 16, 2020 11:00 PM
#6447
Valerio_Lyndon said: Here we go, this should (hopefully) match your initial idea. Replace your current CSS with these new ones: [Anime Code] [Manga Code] If you want to change any of the colours, they can be found near the top of the CSS in a new section labelled "Clarity Colours". This is the default version of clarity, so no image hover or other modifications. But if you do want the image hover, then you can add it to the bottom of the new CSS. Here's the code for it. /*-S-T-A-R-T--------------------*\ | Hover Image R0.3 | \*------------------------------*/ .data.image a{overflow:visible}.data.image a:before{content:"";position:absolute;top:50%;left:-166px;z-index:50;width:150px;height:0;background:var(--bg-dark) no-repeat center/cover;border-radius:8px;box-shadow:0 0 2px #000;opacity:0;pointer-events:none;transition:all .3s ease}.list-item:hover .data.image a:before{top:calc(50% - 100px);height:200px;opacity:1}.data.image a:after,.data.image img{border-radius:50%} /*------------------------E-N-D-*/ I did not see that you answered. Thank you, its perfect! |
Oct 17, 2020 2:47 PM
#6448
Is it possible to change the direction link of the regular anime and manga buttons on a profile? For example for my profile, I would like it to lead to this link, in stead of the regular link that works in general. It would be nice if it could show the scores from 10-1 right away. |
Oct 17, 2020 4:52 PM
#6449
So I'm working on a graphic for my profile (not list layout) and it's gonna be 1 graphic with everything on top of it. On my current profile, I have a list with spoiler buttons for my top 10 favorite anime openings. How, if possible, can I apply such a list on the type of layout I'm working on? Thanks! |
Oct 18, 2020 1:52 AM
#6450
Uji_Gintoki_Bowl said: I checked out the Javascript and saw that it outputs for synopsis as well with [DESC], but the css is stored the same way that score is, so I cannot do that addition to my list separately. As such, I'm sure the ".progress" part of the print at the beginning has to be changed to something else. … I basically need some css similar to the generic formatting for an entry's MAL score (which I recieved from Valerio_Lyndon - thank you so much) but as a pop-up, and some small edit to the tool to give me css that doesn't intersect with the css that was outputted for MAL Score. My idea is below: https://i.imgur.com/IUYV6GM.jpg https://i.imgur.com/oXmE59C.jpg The tool actually supports quite complex templates, so it's possible to do two different things with the CSS at the same time. I go into how to do this below, but the way I did it removes the brackets around the "rewatching" and "rereading" texts. There wasn't another way to achieve a button that you can hover over without co-opting some space elsewhere. Example of how rewatch text will look: Now, onto adding the synopsis. You can change the template the tool uses at any time by changing the right-most field at the top: Another way is to change the template within the bookmark itself if you wish, which will make sure you don't have to do it manually each time you open it. Either way, here is the new template: /* [TITLE] *[DEL]/ .progress-[ID]:after {content: "MAL - [SCORE]";} .title a[href*="/[ID]/"] ~ [class^="re"]:after {content: "SYNOPSIS\a\a[DESC]";} And if you so wish, a new version of the bookmark with the template coded in so you don't have to change it each time: [Code] In this version I also changed it so line breaks are maintained since you had them in your screenshot. Originally, the tool removed line breaks from the synopsis. Next, you can add this CSS to your code to style the synopses. Add it either to the bottom or in the same spot as your MAL score code. /* SYNOPSIS BASIS */ .rewatching, .rereading { display: inline !important; pointer-events: none; } .rewatching:before, .rewatching:after, .rereading:before, .rereading:after { content: none; } /* SYNOPSIS BUTTON */ .title a ~ [class^="re"]::before { content: "Synopsis"; position: absolute; right: -35px; top: calc(50% + 26px); z-index: 1; width: 70px; padding: 5px; background: black; border-radius: 10%; font: 12px Inconsolata, monospace; text-align: center; transform: translate(50%, -50%); pointer-events: auto; } /* SYNOPSES ON HOVER */ .title a ~ [class^="re"]::after { position: absolute; right: -35px; top: calc(50% + 26px); z-index: 2; width: 450px; padding: 10px; border-radius: 5px; background: black; font-size: 12px; line-height: 1.35; text-align: center; white-space: pre-wrap; transform: translate(50%, -50%); opacity: 0; transition: opacity 0.1s ease; } .title a ~ [class^="re"]:hover::after { opacity: 1; } The code is positioned a little off centre, so it doesn't overlap the score, but you can fix that by changing both of their "top" values by about 15px. Example (this can be changed in the code you already have if you know where you're looking, else just added to the bottom): .progress div:after { top: calc(50% - 35px); } .title a ~ [class^="re"]::before, .title a ~ [class^="re"]::after { top: calc(50% + 11px); } Also, with synopses being added, I expect you may hit the character limit on custom CSS quite fast, so I made up a guide on how to host a file on Dropbox. The reason to host on Dropbox is that it circumvents the character limit MAL implements, allowing us to load as much CSS as we wish. If you ever notice your code getting cut off after saving, it's because you've hit the limit. You don't have to do it unless you notice the code starts cutting off, but if you don't then just keep it in mind for the future. :) This guide assumes you use Windows, because I don't know enough about Mac or Linux to write that off the top of my head. Before anything else, make sure you are able to see file extensions on your computer. See how here: Enabling file extensions.. This will prevent issues later.
Whatever CSS you put inside of the file should now be loaded onto your list next time you visit it. --- There was a lot of info in this reply, so hopefully I made it all understandable. |
More topics from this board
» theme helpthreat - Jul 5 |
5 |
by Zaryf
»»
Aug 21, 5:46 AM |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1261 |
by KiranaStarr
»»
Aug 16, 5:48 PM |
|
» [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 |