New
Mar 10, 2023 12:29 PM
#251
omoe said: Made an Akira themed version of this skin just for fun and personal use, if anyone is interested... Copy the code here Works even when removing the grayscale code for the images coz I actually made gray thumbnails not knowing at the time that there was code for it. Know that it does work without the grayscale code, but the code also turns the text on the pictures gray so I left it in as it's nicer with gray text. The skin is basically exactly the same as the one shown in the video for customizing this skin, the only thing I changed in the end are the pictures including the cursor, the fonts and font sizes, I only have 2 imported fonts added in the above code and even left the old fonts in there, but I removed the fonts in my layout today, it doesn't need to import anything that isn't used, I guess that's cleaner. I made the bottom right png render myself because I couldn't find a suitable Akira render online, so that took a little time, but I'm very satisfied with the result. However I did upload a render that I found later on that might be interesting as replacement or even as a second one for the left side (https://images2.imgbox.com/2c/b7/Uel3VS9a_o.png), feel free to use it, you might want to resize it, I didn't change the original size as I did with the render I made. One thing I noticed in your video is that you simply put 2x gifs for each button which differs from the originally provided version in that your changed One Piece version would have continuously animating pictures even when not hovering over the pictures, I actually made grayscale picture of the first frame of the gifs, but I could have just left them in color. BTW, thanks a lot for sharing this skin and showing how to customize it, I like it a lot. Thanks for the donated layout and feedback. I am redoing this whole topic and video for it, so I will try to keep that in mind! |
Mar 11, 2023 4:05 AM
#252
No problem btw is there any way to limit the genre to 3 only Im getting this problem whenever the genre are more than three |
Mar 11, 2023 6:17 AM
#253
Exonymos said: No problem btw is there any way to limit the genre to 3 only Im getting this problem whenever the genre are more than three Try adding this to the bottom of your CSS edit box. Overflow could also be set to auto instead of hidden, if you want to scroll through the genres. .data.genre { max-height: 54px !important; overflow: hidden !important; } |
Mar 11, 2023 6:25 AM
#254
Shishio-kun said: Exonymos said: No problem btw is there any way to limit the genre to 3 only Im getting this problem whenever the genre are more than three Try adding this to the bottom of your CSS edit box. Overflow could also be set to auto instead of hidden, if you want to scroll through the genres. .data.genre { max-height: 54px !important; overflow: hidden !important; } Thanks bro its worked |
Mar 14, 2023 10:22 AM
#255
Backup codes for MAL Grid Style 1 (custom codes only) You need the original layout cods (2 posts down) to make this work. You should also add the 2021 and 2023 changes as they update the original. {IMPORTANT: For sharper and brighter preview pics, change "USERNAME" to your username in the first two imports below. They start with @\import If needed, fix layout problems with this topic: https://myanimelist.net/forum/?topicid=439897 } @\import "https://malscraper.azurewebsites.net/covers/anime/USERNAME/presets/dataimagelinkbefore"; @\import "https://malscraper.azurewebsites.net/covers/manga/USERNAME/presets/dataimagelinkbefore"; /*Layout CSS was originally made by Takana_no_hana, edits by Shishio-kun and Valerio_Lyndon Grid Style 1, 2023 Update Learn how to customize the layout here: https://myanimelist.net/forum/?topicid=1640096 */ @\import "https://storage.live.com/items/4A07C1EEED420167%21170"; @\import "https://dl.dropboxusercontent.com/s/4u0rqtodxpjkti4/TakanaGridBackup.css"; @\import "https://fonts.googleapis.com/css?family=Orbitron"; @\import "https://fonts.googleapis.com/css?family=Amaranth"; @\import "https://fonts.googleapis.com/css?family=Rancho"; @\import "https://fonts.googleapis.com/css?family=Kaushan+Script|Tangerine"; /*WALLPAPERS To change background images: delete what's in the parenthesis. Upload the new background to Imgur or a similar site, then copy the direct link (or Original GIF link if it's animated) and paste it into the parenthesis. Must have .jpg or another extension at the end (.gif or .png). Save.*/ body, body.ownlist { background-image: url(http://i.imgur.com/VTrW1N1.jpg); } /*PREVIEW PICS/COVERS See the help at the top of this layout code if you have problems with blurry or missing preview pics. If you want to customize a preview pic, use the code below but change the number after "anime" to the anime's number. Get the number from the address bar on its page on MAL. For example if you go to Code Geass's page the number in the address bar is 1575. Change "anime" to "manga" to customize manga previews. This code customizes the Code Geass preview (anime #1575) if you change the background image link. Copy and paste the code to customize more preview pics, just change the number.*/ .data.image a[href^="/anime/1575/"]:before{background-image:url(https://i.imgur.com/QuPoz5o.jpg); } /*BANNER AVATAR Change the first "center" to "left" or "right" to move the picture position. Change "cover" to "contain" or remove it to change how the image fills the avatar.*/ .list-table .list-table-header:after { background-image: url(http://i.imgur.com/GH6BMvr.gif); background-position: center center; background-size: cover !important; } /*BANNER QUOTE*/ .cover-block::before { content: "I won't let go of you - I'll never let go again ... This hand was finally able to catch you!" } /*BANNER BACKGROUND AND HEIGHT If the image doesn't fit, increase the height and/or change "cover" to "contain". You may want to lower cover pics after (scroll down).*/ .list-unit.watching .list-status-title:after, .list-unit.reading .list-status-title:after, .list-unit.completed .list-status-title:after, .list-unit.onhold .list-status-title:after, .list-unit.dropped .list-status-title:after, .list-unit.plantowatch .list-status-title:after, .list-unit.plantoread .list-status-title:after, .list-unit.all_anime .list-status-title:after { background-image: url(http://i.imgur.com/W6iKnWb.png); background-size: cover !important; height: 500px !important; } /*MOVE COVER PICS UP OR DOWN Increase 0px to a higher amount like 100px to move the anime preview pics and header (Completed, etc) down. -480px brings them up to the banner buttons.*/ .list-unit .list-status-title .text,.list-item{ top: 0px; } /*BANNER BUTTON BACKGROUNDS The first image link in parenthesis is the still black and white image, the second image link is the animated image (a GIF).*/ /*ALL ANIME BANNER BUTTON*/ .status-button.all_anime { background-image:url(http://i.imgur.com/DLLqSTd.png); } .status-button.all_anime:hover,.status-button.all_anime.on { background-image:url(http://i.imgur.com/aKqWN3u.gif); } /*CURRENT BANNER BUTTON*/ .status-button.watching,.status-button.reading { background-image:url(http://i.imgur.com/5pPg4ac.png); } .status-button.watching:hover,.status-button.watching.on,.status-button.reading:hover,.status-button.reading.on { background-image:url(http://i.imgur.com/WESHf5N.gif); } /*COMPLETED BANNER BUTTON*/ .status-button.completed { background-image:url(http://i.imgur.com/RlcbKxj.png); } .status-button.completed:hover,.status-button.completed.on { background-image:url(http://i.imgur.com/UMovoVS.gif); } /*ON HOLD BANNER BUTTON*/ .status-button.onhold { background-image:url(http://i.imgur.com/ASPp5y9.png); } .status-button.onhold:hover ,.status-button.onhold.on { background-image:url(http://i.imgur.com/ouJqNKc.gif); } /*DROPPED BANNER BUTTON*/ .status-button.dropped { background-image:url(http://i.imgur.com/aTKLiQg.png); } .status-button.dropped:hover,.status-button.dropped.on { background-image:url(http://i.imgur.com/sRPU8yp.gif); } /*PLANNED BANNER BUTTON*/ .status-button.plantowatch,.status-button.plantoread{ background-image:url(http://i.imgur.com/BBHhd2Z.png); } .status-button.plantowatch:hover,.status-button.plantowatch.on,.status-button.plantoread:hover,.status-button.plantoread.on { background-image:url(http://i.imgur.com/zJYQb4x.gif); } /*SIDE RENDERS (left and right) To move the renders, adjust the percentage after "left" or "right". You can use negatives. To resize the renders, adjust the percentage after "width". 0% will remove the render.*/ footer:before { left: -3%; width: 25% !important; background-size: contain !important; background-image: url(); background-position: left bottom !important; } footer:after { right: 0%; width: 20% !important; background-size: contain !important;; background-image: url(https://i.imgur.com/kOR31IF.png); background-position: right bottom !important; } /*ANIME/MANGA CONTAINER SETTINGS (TABLE COLORS) You can change the color with rbga colors. Generate RGBA colors here so you can replace the codes below: https://www.hexcolortool.com/ First set of colors= entire table. Second = banner. Third = default container behind an anime. Fourth = container when you point to it. Fifth = upper left menu. Sixth = top. You can set the last digit to zero to make it completely transparent.*/ .list-unit { background-color: rgba(0,0,0,.6) ; } .status-menu-container { background-color: rgba(0,0,0,.4) ; } .list-table .list-table-data { background-color: rgba(0,0,0,.2) !important; } .list-table .list-table-data:hover { background-color: rgba(0,0,0,.4) !important; } .list-menu-float .icon-menu{ background-color: rgba(0,0,0,.4) !important; } .header { background: linear-gradient(rgba(0,0,0,.4),transparent) !important; } /*CUSTOM CURSOR More here: https://myanimelist.net/forum/?topicid=1903808*/ body *, :not(*) { cursor: url(https://i.imgur.com/j9ZWzyT.png), auto !important; } /*FILTER MENU BACKGROUND*/ #advanced-options { background-image: url(https://i.imgur.com/h0VRsRc.png) !important; } /*MAL LOGO*/ .header .header-title{ background-image: url(https://imgur.com/E7zWfiY.png) !important; } /*GREYSCALE FOR CUSTOM CATEGORY BUTTONS Delete this to remove grey from custom buttons.*/ .status-button.watching,.status-button.reading,.status-button.completed,.status-button.onhold,.status-button.dropped,.status-button.plantowatch,.status-button.plantoread,.status-button.all_anime{ filter: grayscale(100%); } .status-button.all_anime:hover,.status-button.all_anime.on,.status-button.plantowatch:hover,.status-button.plantowatch.on,.status-button.plantoread:hover,.status-button.plantoread.on,.status-button.dropped:hover,.status-button.dropped.on,.status-button.onhold:hover,.status-button.onhold.on,.status-button.completed:hover,.status-button.completed.on,.status-button.watching:hover,.status-button.watching.on,.status-button.reading:hover,.status-button.reading.on{ filter: inherit; } |
Shishio-kunMar 20, 2023 8:44 PM
Mar 14, 2023 10:23 AM
#256
Backup codes for MAL Grid Style 5 (custom codes only) You need the original layout cods (2 posts down) to make this work. You should also add the 2021 and 2023 changes as they update the original. {IMPORTANT: For sharper and brighter preview pics, change "USERNAME" to your username in the first two imports below. They start with @\import If needed, fix layout problems with this topic: https://myanimelist.net/forum/?topicid=439897 } @\import "https://malscraper.azurewebsites.net/covers/anime/USERNAME/presets/dataimagelinkbefore"; @\import "https://malscraper.azurewebsites.net/covers/manga/USERNAME/presets/dataimagelinkbefore"; /*Layout CSS was originally made by Takana_no_hana, edits by Shishio-kun and Valerio_Lyndon Grid Style 5, 2023 Update Learn how to customize the layout here: https://myanimelist.net/forum/?topicid=1640096 */ @\import "https://storage.live.com/items/4A07C1EEED420167%21170"; @\import "https://dl.dropboxusercontent.com/s/4u0rqtodxpjkti4/TakanaGridBackup.css"; @\import "https://fonts.googleapis.com/css?family=Orbitron"; @\import "https://fonts.googleapis.com/css?family=Amaranth"; @\import "https://fonts.googleapis.com/css?family=Rancho"; @\import "https://fonts.googleapis.com/css?family=Kaushan+Script|Tangerine"; /*WALLPAPERS To change background images: delete what's in the parenthesis. Upload the new background to Imgur or a similar site, then copy the direct link (or Original GIF link if it's animated) and paste it into the parenthesis. Save.*/ /*ALL ANIME/MANGA WALLPAPER*/ body[data-query*='"status":7'] { background-image: url(https://i.imgur.com/6puBJ9c.jpg); } /*CURRENTLY WATCHING WALLPAPER*/ body[data-query*='"status":1'] { background-image: url(https://i.imgur.com/3XqhN0m.jpg); } /*COMPLETED WALLPAPER*/ body[data-query*='"status":2'] { background-image: url(https://i.imgur.com/Kra2VVu.jpg); } /*ON HOLD WALLPAPER*/ body[data-query*='"status":3'] { background-image: url(https://i.imgur.com/AYIE9xb.jpg); } /*DROPPED WALLPAPER*/ body[data-query*='"status":4'] { background-image: url(https://i.imgur.com/EadWTsz.jpg); } /*PLANNED WALLPAPER*/ body[data-query*='"status":6'] { background-image: url(https://i.imgur.com/DNxYnjX.jpg); } /*PREVIEW PICS/COVERS See the help at the top of this layout code if you have problems with blurry or missing preview pics. If you want to customize a preview pic, use the code below but change the number after "anime" to the anime's number. Get the number from the address bar on its page on MAL. For example if you go to Code Geass's page the number in the address bar is 1575. Change "anime" to "manga" to customize manga previews. This code customizes the Code Geass preview (anime #1575) if you change the background image link. Copy and paste the code to customize more preview pics, just change the number.*/ .data.image a[href^="/anime/1575/"]:before{background-image:url(https://i.imgur.com/QuPoz5o.jpg); } /*BANNER AVATAR Change the first "center" to "left" or "right" to move the picture position. Change "cover" to "contain" or remove it to change how the image fills the avatar.*/ .list-table .list-table-header:after { background-image: url(http://i.imgur.com/GH6BMvr.gif); background-position: center center; background-size: cover !important; } /*BANNER QUOTE*/ .cover-block::before { content: "I won't let go of you - I'll never let go again ... This hand was finally able to catch you!" } /*BANNER BACKGROUNDS AND HEIGHT You can change the images here and adjust the height. If you can't see the whole image increase height and/or change "cover" to "contain". You may want to lower cover pics after (scroll down).*/ /*ALL ANIME/MANGA BANNER BACKGROUND*/ .list-unit.all_anime .list-status-title:after { background-image: url(http://i.imgur.com/W6iKnWb.png); background-size: cover !important; height: 500px !important; } /*CURRENTLY WATCHING BANNER BACKGROUND*/ .list-unit.watching .list-status-title:after, .list-unit.reading .list-status-title:after { background-image: url(https://i.imgur.com/H0EO4oq.png); background-size: cover !important; height: 500px !important; } /*COMPLETED BANNER BACKGROUND*/ .list-unit.completed .list-status-title:after { background-image: url(https://i.imgur.com/49bdCG6.png); background-size: cover !important; height: 500px !important; } /*ON-HOLD BANNER BACKGROUND*/ .list-unit.onhold .list-status-title:after { background-image: url(http://i.imgur.com/pPc1BRS.png); background-size: cover !important; height: 500px !important; } /*DROPPED BANNER BACKGROUND*/ .list-unit.dropped .list-status-title:after { background-image: url(http://i.imgur.com/XAbWBod.png); background-size: cover !important; height: 500px !important; } /*PLAN TO BANNER BACKGROUND*/ .list-unit.plantowatch .list-status-title:after, .list-unit.plantoread .list-status-title:after { background-image: url(https://i.imgur.com/uDF1ZIt.jpg); background-size: cover !important; height: 500px !important; } /*MOVE COVER PICS UP OR DOWN Increase 0px to a higher amount like 100px to move the anime preview pics and header (Completed, etc) down. -480px brings them up to the banner buttons. If you put [data-query*='"status":7'] at the start of the first two lines of code (with a space after), it will affect only All Anime/Manga. Example: [data-query*='"status":7'] .list-unit .list-status-title .text, [data-query*='"status":7'] .list-item Change the 7 to 1 for current, 2 for completed, 3 for hold, 4 for dropped, and 6 for planned. Copy and paste the code again if needed.*/ .list-unit .list-status-title .text, .list-item{ top: 0px; } /*BANNER BUTTON BACKGROUNDS The first image link in parenthesis is the still black and white image, the second image link is the animated image (a GIF).*/ /*ALL ANIME BANNER BUTTON*/ .status-button.all_anime { background-image:url(http://i.imgur.com/DLLqSTd.png); } .status-button.all_anime:hover,.status-button.all_anime.on { background-image:url(http://i.imgur.com/aKqWN3u.gif); } /*CURRENT BANNER BUTTON*/ .status-button.watching,.status-button.reading { background-image:url(http://i.imgur.com/5pPg4ac.png); } .status-button.watching:hover,.status-button.watching.on,.status-button.reading:hover,.status-button.reading.on { background-image:url(http://i.imgur.com/WESHf5N.gif); } /*COMPLETED BANNER BUTTON*/ .status-button.completed { background-image:url(http://i.imgur.com/RlcbKxj.png); } .status-button.completed:hover,.status-button.completed.on { background-image:url(http://i.imgur.com/UMovoVS.gif); } /*ON HOLD BANNER BUTTON*/ .status-button.onhold { background-image:url(http://i.imgur.com/ASPp5y9.png); } .status-button.onhold:hover ,.status-button.onhold.on { background-image:url(http://i.imgur.com/ouJqNKc.gif); } /*DROPPED BANNER BUTTON*/ .status-button.dropped { background-image:url(http://i.imgur.com/aTKLiQg.png); } .status-button.dropped:hover,.status-button.dropped.on { background-image:url(http://i.imgur.com/sRPU8yp.gif); } /*PLANNED BANNER BUTTON*/ .status-button.plantowatch,.status-button.plantoread{ background-image:url(http://i.imgur.com/BBHhd2Z.png); } .status-button.plantowatch:hover,.status-button.plantowatch.on,.status-button.plantoread:hover,.status-button.plantoread.on { background-image:url(http://i.imgur.com/zJYQb4x.gif); } /*SIDE RENDERS (left and right) To move the renders, adjust the percentage after "left" or "right". You can use negatives. To resize the renders, adjust the percentage after "width". 0% will remove the render.*/ /*ALL ANIME/MANGA RENDERS*/ [data-query*='"status":7'] footer:before { left: -6%; width: 25% !important; background-size: contain !important; background-image: url(https://i.imgur.com/UzXHkNC.png); background-position: left bottom !important; } [data-query*='"status":7'] footer:after { right: -5.5%; width: 25% !important; background-size: contain !important;; background-image: url(https://i.imgur.com/Mp0HpEN.png); background-position: right bottom !important; } /*CURRENT RENDERS*/ [data-query*='"status":1'] footer:before { left: -3%; width: 25% !important; background-size: contain !important; background-image: url(https://i.imgur.com/4ptF5hS.png); background-position: left bottom !important; } [data-query*='"status":1'] footer:after { right: -4%; width: 25% !important; background-size: contain !important;; background-image: url(https://i.imgur.com/7Jh3h3n.png); background-position: right bottom !important; } /*COMPLETED RENDERS*/ [data-query*='"status":2'] footer:before { left: -3%; width: 25% !important; background-size: contain !important; background-image: url(https://i.imgur.com/g09J9pi.png); background-position: left bottom !important; } [data-query*='"status":2'] footer:after { right: -3%; width: 25% !important; background-size: contain !important;; background-image: url(https://i.imgur.com/paNwIMD.png); background-position: right bottom !important; } /*ON HOLD RENDERS*/ [data-query*='"status":3'] footer:before { left: -4%; width: 25% !important; background-size: contain !important; background-image: url(https://i.imgur.com/QUGICqR.png); background-position: left bottom !important; } [data-query*='"status":3'] footer:after { right: -4%; width: 25% !important; background-size: contain !important;; background-image: url(https://i.imgur.com/5HafUBW.png); background-position: right bottom !important; } /*DROPPED RENDERS*/ [data-query*='"status":4'] footer:before { left: -2%; width: 25% !important; background-size: contain !important; background-image: url(https://i.imgur.com/08bD4Tm.png); background-position: left bottom !important; } [data-query*='"status":4'] footer:after { right: -5%; width: 25% !important; background-size: contain !important;; background-image: url(https://i.imgur.com/DFFv0xB.png); background-position: right bottom !important; } /*PLANNED RENDERS*/ [data-query*='"status":6'] footer:before { left: -3.5%; width: 25% !important; background-size: contain !important; background-image: url(https://i.imgur.com/x47aHuS.png); background-position: left bottom !important; } [data-query*='"status":6'] footer:after { right: -3%; width: 25% !important; background-size: contain !important;; background-image: url(https://i.imgur.com/o6kXQYq.png); background-position: right bottom !important; } /*ANIME/MANGA CONTAINER SETTINGS (TABLE COLORS) You can change the color with rbga colors. Generate RGBA colors here so you can replace the codes below: https://www.hexcolortool.com/ First set of colors= entire table. Second = banner. Third = default container behind an anime. Fourth = container when you point to it. Fifth = upper left menu. Sixth = top. You can set the last digit to zero to make it completely transparent.*/ .list-unit { background-color: rgba(0,0,0,.6) ; } .status-menu-container { background-color: rgba(0,0,0,.4) ; } .list-table .list-table-data { background-color: rgba(0,0,0,.2) !important; } .list-table .list-table-data:hover { background-color: rgba(0,0,0,.4) !important; } .list-menu-float .icon-menu{ background-color: rgba(0,0,0,.4) !important; } .header { background: linear-gradient(rgba(0,0,0,.4),transparent) !important; } /*CUSTOM CURSOR More here: https://myanimelist.net/forum/?topicid=1903808*/ body *, :not(*) { cursor: url(https://i.imgur.com/j9ZWzyT.png), auto !important; } /*FILTER MENU BACKGROUND*/ #advanced-options { background-image: url(https://i.imgur.com/h0VRsRc.png) !important; } /*MAL LOGO*/ .header .header-title{ background-image: url(https://imgur.com/E7zWfiY.png) !important; } /*GREYSCALE FOR CUSTOM CATEGORY BUTTONS Delete this to remove grey from custom buttons.*/ .status-button.watching,.status-button.reading,.status-button.completed,.status-button.onhold,.status-button.dropped,.status-button.plantowatch,.status-button.plantoread,.status-button.all_anime{ filter: grayscale(100%); } .status-button.all_anime:hover,.status-button.all_anime.on,.status-button.plantowatch:hover,.status-button.plantowatch.on,.status-button.plantoread:hover,.status-button.plantoread.on,.status-button.dropped:hover,.status-button.dropped.on,.status-button.onhold:hover,.status-button.onhold.on,.status-button.completed:hover,.status-button.completed.on,.status-button.watching:hover,.status-button.watching.on,.status-button.reading:hover,.status-button.reading.on{ filter: inherit; } |
Shishio-kunMar 20, 2023 8:45 PM
Mar 14, 2023 10:24 AM
#257
Backup codes for MAL Original Layout A CSS formatter will decompress these codes so they are more readable. https://www.cleancss.com/css-beautify/ /*Original Layout*/ #cover-image{display:none}.list-table .list-table-data{background-color:rgba(0,0,0,0);box-shadow:0 0 2px transparent;border:0 solid transparent}.list-table .list-table-data:hover{box-shadow:0 0 2px #000,0 0 1px #000,1px 1px 7px #000,0 0 0 #000!important;border:1px solid rgba(0,0,0,.3)}.list-unit.onhold:after,.list-unit.plantoread:after,.list-unit.plantowatch:after,.list-unit.reading:after,.list-unit.watching:after{background-repeat:no-repeat;background-size:contain;height:100%;background-position:right;display:inline-block!important;margin:auto!important;position:fixed!important;left:0!important;right:0!important;top:0!important;z-index:-5!important;content:"";pointer-events:none;opacity:1!important}.list-unit.all_anime:after,.list-unit.completed:after,.list-unit.dropped:after{background-repeat:no-repeat;background-size:contain;height:100%;background-position:right;display:inline-block!important;margin:auto!important;position:fixed!important;left:0!important;right:0!important;top:0!important;z-index:-5!important;content:"";pointer-events:none;opacity:1!important}.list-unit .list-status-title .text{display:block;position:absolute;width:1180px;height:38px!important;font-size:22px;color:#fff;font-family:'Kaushan Script',cursive;text-align:center;vertical-align:middle;text-align:center;border:none;text-shadow:0 0 2px #000,0 0 1px #000,1px 1px 7px #000,0 0 0 #fff!important;background-color:transparent;margin-top:-30px!important;z-index:10!important}.list-table .list-table-header:after{position:absolute;height:120px!important;width:120px!important;background-repeat:no-repeat;background-size:contain;position:absolute;display:block!important;margin-left:57px;margin-top:-280px;content:"";padding:5px;background-color:#fff;box-shadow:0 2px 8px 0 rgba(0,0,0,.3);border-radius:5px;border:#fff 2px solid;pointer-events:none;z-index:10!important}footer::after{content:"";display:block;position:fixed;bottom:0;background-size:100%;pointer-events:none;z-index:3}.cover-block::after{display:none!important}.list-unit.reading .list-status-title:after,.list-unit.watching .list-status-title:after{color:transparent;width:1176px!important;background-repeat:no-repeat;background-size:contain;position:absolute!important;display:block!important;left:0!important;right:0!important;margin-top:-500px!important;content:"";z-index:0!important;margin-bottom:20px!important;pointer-events:none}.list-unit.completed .list-status-title:after{color:transparent;width:1176px!important;background-repeat:no-repeat;background-size:contain;position:absolute!important;display:block!important;left:0!important;right:0!important;margin-top:-500px!important;content:"";z-index:0!important;margin-bottom:20px!important;pointer-events:none}.list-unit.onhold .list-status-title:after{color:transparent;width:1176px!important;background-repeat:no-repeat;background-size:contain;position:absolute!important;display:block!important;left:0!important;right:0!important;margin-top:-500px!important;content:"";z-index:0!important;margin-bottom:20px!important;pointer-events:none}.list-unit.dropped .list-status-title:after{color:transparent;width:1176px!important;background-repeat:no-repeat;background-size:contain;position:absolute!important;display:block!important;left:0!important;right:0!important;margin-top:-500px!important;content:"";z-index:0!important;margin-bottom:20px!important;pointer-events:none}.list-unit.plantoread .list-status-title:after,.list-unit.plantowatch .list-status-title:after{color:transparent;width:1176px!important;background-repeat:no-repeat;background-size:contain;position:absolute!important;display:block!important;left:0!important;right:0!important;margin-top:-500px!important;content:"";z-index:0!important;margin-bottom:20px!important;pointer-events:none}.list-unit.all_anime .list-status-title:after{color:transparent;width:1176px!important;background-repeat:no-repeat;background-size:contain;position:absolute!important;display:block!important;left:0!important;right:0!important;margin-top:-500px!important;content:"";z-index:0!important;margin-bottom:20px!important;pointer-events:none}#advanced-options{position:fixed;top:24px;left:0;right:0;display:none;width:860px;margin:0 auto;padding:25px 0 30px;-moz-box-shadow:0 2px 8px 0 rgba(0,0,0,.3);-webkit-box-shadow:0 2px 8px 0 rgba(0,0,0,.3);-o-box-shadow:0 2px 8px 0 rgba(0,0,0,.3);-ms-box-shadow:0 2px 8px 0 rgba(0,0,0,.3);box-shadow:0 2px 8px 0 rgba(0,0,0,.3);color:#fff;text-align:left;font-family:'Helvetica neue',Helvetica,"lucida grande",tahoma,verdana,arial,sans-serif;z-index:1101;border:none;background-image:url(http://i.imgur.com/xD2LRjG.png);background-color:rgba(0,0,0,.5);background-repeat:no-repeat;background-size:cover;background-position:50% 50%}#advanced-options .advanced-options-header{width:750px;margin:0 auto;padding-bottom:4px;border-bottom:1px solid #fff;font-size:16px;color:#fff!important}#advanced-options .advanced-options-header .description{font-size:12px;font-weight:400;margin-left:8px;color:#fff!important}#advanced-options .filter-widget .widget-header,#advanced-options .filter-widget.aired-date .text,#advanced-options .filter-widget.published-date .text,#advanced-options .sort-widget .widget-header{color:#fff!important}#advanced-options select{-ms-appearance:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url(/img/pc/ownlist/icon_pulldown_triangle.png);background-repeat:no-repeat;background-position:center right;background-size:18px 8px;background-color:#fff;display:inline-block;height:25px;padding:4px 20px 4px 4px;border:#bebebe 1px solid;border-radius:0;font-size:12px}#advanced-options select::-ms-expand{display:none}#advanced-options select:disabled{background-image:url(/img/pc/ownlist/icon_pulldown_triangle_disable.png);color:#9b9b9b}#advanced-options input[type=text]{padding:4px;border:#bebebe 1px solid}#advanced-options input:focus{outline:0}#advanced-options .sort-widget{margin:0 auto;padding:12px 0 0;width:750px}#advanced-options .sort-widget:last-of-type{padding-bottom:45px}#advanced-options .sort-widget select{width:172px;margin-right:8px}#advanced-options .sort-widget input[type=radio]{display:none}#advanced-options .sort-widget input[type=radio]+label{background-color:#fff;display:inline-block;width:56px;padding:5px 0;border:#bebebe 1px solid;border-radius:4px;color:#323232;font-size:12px;text-align:center;cursor:pointer}#advanced-options .sort-widget input[type=radio]:checked+label{background-color:#244291;border:#244291 1px solid;color:#fff}#advanced-options .sort-widget input[type=radio]:disabled+label{border:#bebebe 1px solid;color:#9b9b9b}#advanced-options .sort-widget input[type=radio]:checked:disabled+label{background-color:#fff;border:#bebebe 1px solid;color:#9b9b9b}#advanced-options .filter-widget{margin:0 auto;padding:12px 0 0;width:750px}#advanced-options .filter-widget select{margin-right:8px;font-size:12px}#advanced-options .filter-widget.title input[type=text]{width:360px}#advanced-options .filter-widget.airing-status select,#advanced-options .filter-widget.publishing-status select{width:152px}#advanced-options .filter-widget.magazine select,#advanced-options .filter-widget.producer select{width:360px}#advanced-options .filter-widget.aired-date select.year,#advanced-options .filter-widget.published-date select.year{width:80px}#advanced-options .filter-widget.aired-date select.day,#advanced-options .filter-widget.aired-date select.month,#advanced-options .filter-widget.published-date select.day,#advanced-options .filter-widget.published-date select.month{width:60px}#advanced-options .filter-widget.aired-date .text,#advanced-options .filter-widget.published-date .text{display:inline-block;margin-right:4px;font-size:12px}#advanced-options .filter-widget.aired-season select.year{width:80px}#advanced-options .filter-widget.aired-season select.season{width:110px}#advanced-options .filter-widget .widget-header,#advanced-options .sort-widget .widget-header{display:inline-block;width:110px;font-size:12px;font-family:'Helvetica neue',Helvetica,"lucida grande",tahoma,verdana,arial,sans-serif}#advanced-options .filter-widget:last-of-type,#advanced-options .sort-widget:last-of-type{padding-bottom:40px}#advanced-options .advanced-options-button{width:750px;margin:0 auto;padding:12px 0 0;border-top:1px solid #bebebe;text-align:center}#advanced-options .btn-apply,#advanced-options .btn-clear{background-color:rgba(0,0,0,.8);display:inline-block;width:135px;margin:0 4px;padding:6px 0;border-radius:4px;font-size:12px;color:#fff;text-align:center;-moz-transition-property:all;-o-transition-property:all;-webkit-transition-property:all;transition-property:all;-moz-transition-duration:.3s;-o-transition-duration:.3s;-webkit-transition-duration:.3s;transition-duration:.3s;-moz-transition-timing-function:ease-in-out;-o-transition-timing-function:ease-in-out;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}#advanced-options .btn-apply:hover,#advanced-options .btn-clear:hover{background-color:rgba(0,0,0,.8)}td{line-height:1.5em;height:25px!important}a{color:#fff;text-decoration:none}a:hover{color:#fff!important;text-decoration:none}#footer-block{padding:15px 0;background-color:#244291;color:#fff;font-family:Avenir,"lucida grande",tahoma,verdana,arial,sans-serif;display:none}#copyright{font-size:12px;color:#fff;padding-top:3px;text-align:center}.header a{font-weight:700;color:#fff!important}.header a:hover{text-decoration:underline}.header{position:absolute;color:#fff;display:block;width:100%;height:50px;margin:0 auto border:none;background:-webkit-linear-gradient(rgba(0,0,0,.4),transparent);background:-o-linear-gradient(rgba(0,0,0,.4),transparent);background:-moz-linear-gradient(rgba(0,0,0,.4),transparent);background:linear-gradient(rgba(0,0,0,.4),transparent);-moz-transition-property:all;-o-transition-property:all;-webkit-transition-property:all;transition-property:all;-moz-transition-duration:.3s;-o-transition-duration:.3s;-webkit-transition-duration:.3s;transition-duration:.3s;-moz-transition-timing-function:ease-in-out;-o-transition-timing-function:ease-in-out;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;z-index:40}.header:hover{background-color:rgba(0,0,0,.5);-moz-transition-property:all;-o-transition-property:all;-webkit-transition-property:all;transition-property:all;-moz-transition-duration:.3s;-o-transition-duration:.3s;-webkit-transition-duration:.3s;transition-duration:.3s;-moz-transition-timing-function:ease-in-out;-o-transition-timing-function:ease-in-out;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.header .header-menu{position:absolute;top:5px;right:4px}.header .header-menu.other{top:5px}.header .header-menu .header-info{font-size:10px;margin-top:6px;margin-right:15px;text-align:right}.header .username{font-weight:700}.header .header-menu .list-menu{position:absolute;top:25px;right:-4px;background-color:rgba(255,255,255,.8);display:none;border:none!important;-moz-box-shadow:rgba(0,0,0,.4) 0 0 10px;-webkit-box-shadow:rgba(0,0,0,.4) 0 0 10px;box-shadow:rgba(0,0,0,.4) 0 0 10px;z-index:1}.header .header-menu .list-menu .icon-menu{display:block;width:150px;height:30px;color:#000;font-size:14px;font-weight:700;text-decoration:none;-moz-transition-property:all;-o-transition-property:all;-webkit-transition-property:all;transition-property:all;-moz-transition-duration:.3s;-o-transition-duration:.3s;-webkit-transition-duration:.3s;transition-duration:.3s;-moz-transition-timing-function:ease-in-out;-o-transition-timing-function:ease-in-out;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.header .header-menu .list-menu .icon-menu:hover{background-color:rgba(0,0,0,.5)}.header .header-menu .list-menu .icon-menu svg.icon{position:absolute;fill:rgba(0,0,0,.5);left:12px;top:4px}.header .header-menu .list-menu .icon-menu:hover svg.icon{fill:#fff!important}.header .header-menu .list-menu .icon-menu .text{position:absolute;left:52px;top:6px}.header .header-menu .list-menu .icon-menu:hover .text{color:#fff!important}.header .header-menu .btn-menu{display:block;text-align:right;color:rgba(0,0,0,.7)!important;font-size:12px!important;text-shadow:0 0 2px #000,0 0 1px #000,1px 1px 7px #000,0 0 0 #000}#header-menu-dropdown>a{color:rgba(0,0,0,.5)!important}.list-menu-float:before{content:"\f0c9";font-family:FontAwesome!important;display:block;text-align:center!important;text-indent:10px;color:#fff!important;font-size:1.5em!important;height:50px;width:40px;line-height:50px}.list-menu-float:hover:before{font-size:1.7em!important;text-shadow:0 0 2px #fff,0 0 1px #fff,1px 1px 7px #fff,0 0 0 #fff;-moz-transition-property:all;-o-transition-property:all;-webkit-transition-property:all;transition-property:all;-moz-transition-duration:.3s;-o-transition-duration:.3s;-webkit-transition-duration:.3s;transition-duration:.3s;-moz-transition-timing-function:ease-in-out;-o-transition-timing-function:ease-in-out;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.list-menu-float{position:absolute;top:0;left:0;width:50px;border:none;opacity:1;height:40px!important;z-index:100}.list-menu-float .icon-menu{display:block;width:120px;background-color:#dfdfdf;height:30px;line-height:30px;text-indent:10px;opacity:0}.list-menu-float:hover .icon-menu{opacity:1;-moz-transition-property:all;-o-transition-property:all;-webkit-transition-property:all;transition-property:all;-moz-transition-duration:.3s;-o-transition-duration:.3s;-webkit-transition-duration:.3s;transition-duration:.3s;-moz-transition-timing-function:ease-in-out;-o-transition-timing-function:ease-in-out;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.list-menu-float .icon-menu.profile{background-image:none!important}.list-menu-float .icon-menu.profile:before{position:absolute;width:120px!important;content:"\f007\00a0Profile";font-family:FontAwesome!important;margin-top:5px!important;margin-left:-65px!important;color:#000;text-align:center}.list-menu-float .icon-menu .text{opacity:1;width:auto;left:20px;top:0;color:#555}.list-menu-float .icon-menu:hover{width:120px!important;background-color:rgba(0,0,0,.5)!important}.list-menu-float .icon-menu:hover .text,.list-menu-float .icon-menu:hover:after,.list-menu-float .icon-menu:hover:before{color:#fff;width:auto}.list-menu-float .icon-menu.logout{border-radius:0 0 4px 4px}.list-menu-float .icon-menu.setting{display:none}.list-menu-float .icon-menu svg.icon{top:7px!important;left:5px!important;width:15px;height:15px}.list-menu-float .icon-menu.setting svg.icon-setting{display:none}.list-container{position:absolute;background-color:transparent!important;width:1200px;left:0;right:0;margin:auto;margin-top:100px;border:none!important;margin-bottom:30px}.cover-block{position:relative;display:block;width:1180px;margin:0 auto;height:auto;text-align:center;vertical-align:middle;box-shadow:0 0 2px #000,0 0 1px #000,1px 1px 7px #000,0 0 0 #000;z-index:-1!important}.cover-block .image-container{display:block;width:1180px;height:auto;padding-top:0}.cover-block .image-container.hide{display:none}.cover-block .image-container img{max-width:1180px;height:auto}#cover-image{margin:auto;width:1180px!important;height:auto;background-color:transparent;background-size:cover!important;background-position:50% 50%}.cover-block .image-container .btn-list-setting{display:none}.cover-block .image-container:hover .btn-list-setting{display:none;position:absolute;top:20px;right:28px;padding:8px;border:rgba(255,255,255,0) 1px solid;font-size:14px;color:#fff;font-family:'Helvetica neue',Helvetica,"lucida grande",tahoma,verdana,arial,sans-serif}.cover-block .image-container .btn-list-setting:hover{position:absolute;top:20px;right:28px;background-color:rgba(0,0,0,.6);padding:8px;border:none;-moz-box-shadow:0 0 4px #000;-webkit-box-shadow:0 0 4px #000;-o-box-shadow:0 0 4px #000;-ms-box-shadow:0 0 4px #000;box-shadow:0 0 4px #000;font-size:14px;color:#fff;text-shadow:#323232 1px 1px 1px}.cover-block .image-container .btn-list-setting .fa-camera{font-size:16px;-moz-text-shadow:#000 1px 1px 3px;-webkit-text-shadow:#000 1px 1px 3px;-o-text-shadow:#000 1px 1px 3px;-ms-text-shadow:#000 1px 1px 3px;text-shadow:#000 1px 1px 3px}.cover-block .image-container .btn-list-setting .icon-plus-circle{position:absolute;top:4px;left:18px;background-color:rgba(0,0,0,.6);border-radius:50%;-moz-box-shadow:-1px 1px 0 0 #323232;-webkit-box-shadow:-1px 1px 0 0 #323232;-o-box-shadow:-1px 1px 0 0 #323232;-ms-box-shadow:-1px 1px 0 0 #323232;box-shadow:-1px 1px 0 0 #323232;font-size:10px}.cover-block .image-container .btn-list-setting .text{display:none}.cover-block .image-container .btn-list-setting:hover .text{display:inline-block;margin-left:4px}.status-menu-container .status-menu:after{border:5px solid;border-top-color:transparent;border-right-color:rgba(0,0,0,.6);border-bottom-color:rgba(0,0,0,.6);border-left-color:transparent;content:"";height:0;left:0;margin-top:-10px;width:0;position:absolute;z-index:-2!important}.status-menu-container .status-menu:before{border:5px solid;border-top-color:transparent;border-right-color:transparent;border-bottom-color:rgba(0,0,0,.6);border-left-color:rgba(0,0,0,.6);content:"";height:0;right:0;margin-top:-10px;width:0;position:absolute;z-index:-2!important}.status-menu-container{width:1200px;height:80px;background-repeat:repeat;border-bottom:none;box-shadow:0 0 2px #000,0 0 1px #000,1px 1px 7px #000,0 0 0 #000;z-index:2!important}.status-menu-container.fixed{display:none!important}.status-menu-container.fixed+div.list-block{min-height:500px}.status-menu-container .status-menu{display:table;margin:0 auto;border-collapse:separate;border-spacing:0 0;z-index:2!important}.status-menu-container .status-menu .status-button{padding:0!important;position:relative;display:table-cell;font-family:Tangerine,cursive;text-align:center;vertical-align:bottom!important;font-size:22px;font-weight:600!important;color:#fff;width:125px;height:74px;z-index:10;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;border-radius:5px!important;top:2px}.status-menu-container .status-menu .status-button.on{color:#fff;font-weight:700;text-shadow:0 0 2px #000,0 0 1px #000,1px 1px 7px #000,0 0 0 #000;border:#fff 1px solid;box-sizing:border-box;box-shadow:0 0 2px #000,0 0 1px #000,1px 1px 4px #000,0 0 0 #000}.status-menu-container .status-menu .status-button:hover{border:#fff 1px solid;box-shadow:0 0 2px #000,0 0 1px #000,1px 1px 4px #000,0 0 0 #000;text-shadow:0 0 2px #000,0 0 1px #000,1px 1px 7px #000,0 0 0 #000;box-sizing:border-box;background-color:transparent;color:#fff;-moz-transition-property:all;-o-transition-property:all;-webkit-transition-property:all;transition-property:all;-moz-transition-duration:.3s;-o-transition-duration:.3s;-webkit-transition-duration:.3s;transition-duration:.3s;-moz-transition-timing-function:ease-in-out;-o-transition-timing-function:ease-in-out;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.status-menu .status-button:hover:after,.status-menu-container .status-menu .status-button.on:after{opacity:1}.status-menu-container .status-menu .status-button:after{display:none!important}::-webkit-scrollbar{height:5px;width:7px;background-color:#f5f5f5}::-webkit-scrollbar-thumb{border:2px solid #f5f5f5;border-radius:2px;background-color:#9b9b9b}.status-menu-container .search-container{position:absolute;right:5px;z-index:20}.status-menu-container .search-container #search-button{display:inline-block;height:22px;margin-top:10px;color:#fff;font-size:1.6em;vertical-align:middle}.status-menu-container .search-container #search-box{display:inline-block;width:0;height:22px;overflow:hidden;margin-top:5px;-webkit-transition:width .3s;-moz-transition:width .3s;transition:width .3s;-webkit-backface-visibility:hidden;vertical-align:middle}.status-menu-container .search-container #search-box.open{display:inline-block;width:130px}.status-menu-container .search-container #search-box input{width:100%;height:100%;box-sizing:border-box}.list-block{margin:0;min-height:260px;z-index:1!important}.list-unit{margin:auto;width:1176px;box-shadow:0 0 2px #000,0 0 1px #000,1px 1px 7px #000,0 0 0 #000;margin-top:15px;z-index:1!important;padding-top:500px}.list-unit .list-status-title{position:relative;display:table-cell;background-color:transparent;width:1180px;height:0}.list-unit .list-status-title .stats a.filterd{text-shadow:0 0 2px #fff}.list-unit .list-status-title .stats a:hover{background:rgba(0,0,0,.5);padding:8px;-moz-transition-property:all;-o-transition-property:all;-webkit-transition-property:all;transition-property:all;-moz-transition-duration:.3s;-o-transition-duration:.3s;-webkit-transition-duration:.3s;transition-duration:.3s;-moz-transition-timing-function:ease-in-out;-o-transition-timing-function:ease-in-out;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.list-unit .list-stats{background-color:rgba(255,255,255,.8);margin-top:-500px!important;color:#000;height:25px;margin:auto;position:absolute;width:1176px;z-index:1!important}.list-unit .list-status-title .stats{position:absolute;height:40px;line-height:40px;width:180px;right:-55px;margin-top:-550px;z-index:1}.list-unit .list-status-title .stats a{color:#fff;padding:8px;margin:0!important}.list-table{width:100%;margin:auto;border-collapse:collapse;background-color:transparent!important;color:#fff!important;border:none}.list-table>tbody:nth-of-type(2n+1){background-color:transparent;background-repeat:repeat}.list-table>tbody:nth-of-type(2n){background-color:transparent;background-repeat:repeat}.list-table .list-table-header:before{content:"\f0dc\00a0SORT";display:block;text-align:center!important;font-family:FontAwesome!important;text-indent:0;color:#fff!important;font-weight:700!important;width:57px;line-height:40px;height:40px;margin-left:0!important;margin-top:-40px;position:absolute}.list-table .list-table-header:hover:before{color:#fff!important;background-color:rgba(0,0,0,.5)}.list-table .list-table-header{position:absolute;display:block;margin-left:-10px;margin-top:-515px;z-index:200!important}.list-table .list-table-header .header-title{background:#f6f6f6 url(/img/pc/ownlist/bar-table-header.png) no-repeat right 7px/1px 22px;display:block;border-bottom:0;height:39px;text-align:center;vertical-align:middle;z-index:60!important;opacity:0}.list-table .list-table-header:hover .header-title{opacity:1;-moz-transition-property:all;-o-transition-property:all;-webkit-transition-property:all;transition-property:all;-moz-transition-duration:.3s;-o-transition-duration:.3s;-webkit-transition-duration:.3s;transition-duration:.3s;-moz-transition-timing-function:ease-in-out;-o-transition-timing-function:ease-in-out;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.list-table .list-table-header .header-title:last-child{background-image:none}.list-table .list-table-header .header-title.image,.list-table .list-table-header .header-title.number,.list-table .list-table-header .header-title.status,.list-table .list-table-header .header-title.tags{background-image:none;display:none!important}.list-table .list-table-header .header-title.title{text-align:center;width:90px;line-height:40px;padding:0!important}.list-table .list-table-header .header-title.score{text-align:center;width:90px;line-height:40px;padding:0!important}.list-table .list-table-header .header-title.type{text-align:center;width:90px;line-height:40px;padding:0!important}.list-table .list-table-header .header-title.progress{text-align:center;width:90px;line-height:40px;padding:0!important}.list-table .list-table-header .header-title.chapters{text-align:center;width:90px;line-height:40px;padding:0!important}.list-table .list-table-header .header-title.volumes{text-align:center;width:90px;line-height:40px;padding:0!important}.list-table .list-table-header .header-title.rated{text-align:center;width:90px;line-height:40px;padding:0!important}.list-table .list-table-header .header-title.started{text-align:center;width:90px;line-height:40px;padding:0!important;display:none}.list-table .list-table-header .header-title.finished{text-align:center;width:90px;line-height:40px;padding:0!important}.list-table .list-table-header .header-title.days{text-align:center;width:90px;line-height:40px;padding:0!important}.list-table .list-table-header .header-title.storage{text-align:center;width:90px;line-height:40px;padding:0!important}.list-table .list-table-header .header-title.retail{text-align:center;width:90px;line-height:40px;padding:0!important}.list-table .list-table-header .header-title.priority{text-align:center;width:90px;line-height:40px;padding:0!important}.list-table .list-table-header .header-title .link{font-size:11px;color:#323232;text-decoration:none height:40px;width:90px}.list-table .list-table-header .header-title .link.sort{position:relative;display:inline-block;color:#323232;height:40px;width:90px;white-space:nowrap;-moz-transition-property:all;-o-transition-property:all;-webkit-transition-property:all;transition-property:all;-moz-transition-duration:.3s;-o-transition-duration:.3s;-webkit-transition-duration:.3s;transition-duration:.3s;-moz-transition-timing-function:ease-in-out;-o-transition-timing-function:ease-in-out;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.list-table .list-table-header .header-title .link.sort:hover{color:#000;background-color:rgba(0,0,0,.5);height:40px;width:90px}.list-table .list-table-header .header-title .sort-icon{color:#fff}.list-table .list-table-data:hover{box-sizing:border-box;-moz-transition-property:all;-o-transition-property:all;-webkit-transition-property:all;transition-property:all;-moz-transition-duration:.3s;-o-transition-duration:.3s;-webkit-transition-duration:.3s;transition-duration:.3s;-moz-transition-timing-function:ease-in-out;-o-transition-timing-function:ease-in-out;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.list-table .list-table-data:hover .data.title{text-shadow:0 0 2px #000,0 0 1px #000,0 1px 7px #000,0 0 .5px #000;color:#fff;transition:.1s linear}.header a:hover,.list-table .list-table-data a:not(.edit-disabled):hover{text-decoration:underline}.list-table .list-table-data .data{display:table-cell;padding:4px 0;text-align:center;vertical-align:middle;color:#fff!important;border:none}.list-table .list-table-data a:not(.edit-disabled):hover{text-shadow:0 0 2px #000,0 0 1px #000,1px 1px 7px #000,0 0 0 #000;color:#fff!important}.list-table .list-table-data a.edit-disabled{cursor:text;color:#fff}.list-table .list-table-data .data.title .link{font-size:17px!important;text-decoration:none!important;font-family:Rancho,sans-serif;font-weight:100!important;transition:all .1s ease 0s;color:#fff!important}.list-table .list-table-data:hover .data.title .link{letter-spacing:.5px;transition:all .1s ease 0s;color:#fff!important}.list-table .list-table-data .data.title .content-status,.list-table .list-table-data .data.title .rereading,.list-table .list-table-data .data.title .rewatching{text-shadow:0 0 2px #f54ee7,0 0 1px #f54ee7,1px 1px 7px #e32bd4,0 0 0 #f54ee7!important;color:#fff!important;font-size:.9em;text-align:right!important;vertical-align:middle!important;width:180px!important;display:block;opacity:0}.list-table .list-table-data:hover .data.title .content-status,.list-table .list-table-data:hover .data.title .rereading,.list-table .list-table-data:hover .data.title .rewatching{text-shadow:0 0 2px #000,0 0 1px #000,1px 1px 7px #000,0 0 0 #000!important;color:#fff!important;font-size:1em;right:4px!important;top:30px!important;vertical-align:middle!important;width:80px!important;text-align:right;display:block;opacity:1;position:absolute;font-weight:700}.list-table .list-table-data .data.season{text-shadow:0 0 2px #f54ee7,0 0 1px #f54ee7,1px 1px 7px #e32bd4,0 0 0 #f54ee7!important;color:#fff!important;font-size:.9em;text-align:left!important;vertical-align:middle!important;width:80px!important;display:block;opacity:0}.list-table .list-table-data:hover .data.season{text-shadow:0 0 2px #000,0 0 1px #000,1px 1px 7px #000,0 0 0 #000!important;color:#fff!important;font-size:1em;left:4px!important;top:30px!important;vertical-align:middle!important;display:block;opacity:1;position:absolute;font-weight:700}.list-table .list-table-data .data.score .link{font-size:1.2em;font-weight:700}td.td1.borderRBL{color:#fff!important}.list-table .list-table-data .data.title .more{position:relative}.list-table .more-info{display:none}.list-table .more-info .more-content{padding:10px}.list-table .list-table-data .data.status{width:4px;z-index:9!important}.list-table .list-table-data .data.status .text{display:none}.list-table .list-table-data .data.status.reading,.list-table .list-table-data .data.status.watching{background-color:transparent}.list-table .list-table-data .data.status.plantoread,.list-table .list-table-data .data.status.plantowatch{background-color:transparent}.list-table .list-table-data .data.status.completed{background-color:transparent}.list-table .list-table-data .data.status.onhold{background-color:transparent}.list-table .list-table-data .data.status.dropped{background-color:transparent}.list-table .list-table-data:hover .data.status.completed:before,.list-table .list-table-data:hover .data.status.dropped:before,.list-table .list-table-data:hover .data.status.onhold:before,.list-table .list-table-data:hover .data.status.plantoread:before,.list-table .list-table-data:hover .data.status.plantowatch:before,.list-table .list-table-data:hover .data.status.reading:before,.list-table .list-table-data:hover .data.status.watching:before{height:25px;width:25px!important;background-position:50% 50%;background-repeat:no-repeat;background-size:15px 17px;display:inline-block!important;position:relative;left:25px!important;top:0!important;z-index:10!important;content:"";pointer-events:none;opacity:1!important}.list-table .list-table-data:hover .data.status.completed:before{color:#fff;content:"\f05d";font-size:1.5em;line-height:25px;font-family:FontAwesome!important}.list-table .list-table-data:hover .data.status.reading:before,.list-table .list-table-data:hover .data.status.watching:before{color:#fff;content:"\f008";font-size:1.5em;line-height:25px;font-family:FontAwesome!important}.list-table .list-table-data:hover .data.status.plantoread:before,.list-table .list-table-data:hover .data.status.plantowatch:before{color:#fff;content:"\f073";font-size:1.5em;line-height:25px;font-family:FontAwesome!important}.list-table .list-table-data:hover .data.status.onhold:before{color:#fff;content:"\f017";font-size:1.5em;line-height:25px;font-family:FontAwesome!important}.list-table .list-table-data:hover .data.status.dropped:before{color:#fff;content:"\f00d";font-size:1.5em;line-height:25px;font-family:FontAwesome!important}.link.sort+a{display:none}.data.tags:before{margin:0;width:12px!important;padding:5px 0!important;z-index:10}data.tags:hover:before{width:15px;padding:5px 5px 5px 4px!important;font-size:1.1em;color:#fff;cursor:default}.data.tags:before,.data.tags:hover:before{position:absolute;left:50px;top:0;height:15px!important}.list-item:hover .data.tags:before{opacity:1}.data.tags{opacity:1;height:100%;width:0;z-index:25}.data.tags *{z-index:25;transition:opacity .15s ease-in-out;color:#000;margin-top:25px}@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.data.tags:hover *{width:180px;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.data.tags a{text-align:left;font-size:1em;color:#000;white-space:nowrap}.data.tags:before{content:'';border:none;opacity:0;margin-top:0;background-image:url(http://i.imgur.com/WC8S1cb.png);background-size:15px 14px;background-repeat:no-repeat;background-position:50% 50%;letter-spacing:-1px;background-color:transparent;width:25px!important;height:15px!important;display:block}.data.tags:hover:before{content:'';background-image:url(http://i.imgur.com/WC8S1cb.png);background-size:15px 14px;background-repeat:no-repeat;background-position:50% 50%;letter-spacing:-1px;color:#6ebcf4;width:25px!important;height:15px!important;display:block}.data.tags textarea{position:absolute;font-family:monospace!important;z-index:50;width:180px!important;height:200px!important}.edit-transition.edit-leave{display:none}.tags .edit{position:absolute;top:-25px;left:50px;width:25px!important;height:25px;font-size:0!important}.tags .edit:hover{width:25px!important}div[class*=tags-]{overflow:hidden;height:200px;background:rgba(255,255,255,.9)}.anime [href*="&tag="]{white-space:normal!important;text-transform:none;pointer-events:none}.list-table{display:table-row}.data.image~td,.data.status{position:absolute}.list-table .list-table-data .data.image a{background-size:cover;background-repeat:no-repeat;background-position:center center!important}.list-item{margin:8px;position:relative;float:left}.list-item .data{opacity:1}.list-item .list-table-data{position:absolute}.list-table .list-table-data .data{padding:0;border-bottom:none}.list-item .data.image{z-index:0!important;position:absolute}.list-item .data.image img{height:100%;width:100%}.list-item,.list-item .list-table-data{width:180px!important;height:283px!important}.list-item .data.title{width:180px!important;height:283px!important}.data.image{overflow:hidden;width:180px!important;height:225px!important;margin-top:0}.data.image a:before{content:"";display:inline-block!important;position:relative;width:180px;height:225px;background-color:rgba(0,0,0,.3);background-position:center!important;background-repeat:no-repeat!important;background-size:cover;z-index:5;box-shadow:0 0 5px #000 inset;box-sizing:border-box;transition:all .2s ease-in-out}.list-table .list-table-data:hover .data.image a:before{transition:all .2s ease-in-out;transform:scale(1.1)}.list-item .data.number{padding-left:7px;text-align:left!important;line-height:25px!important;width:173px;height:25px;text-shadow:0 0 2px #000,0 0 1px #000,1px 1px 7px #000,0 0 0 #000;background:-webkit-linear-gradient(rgba(0,0,0,.7),transparent);background:-o-linear-gradient(rgba(0,0,0,.7),transparent);background:-moz-linear-gradient(rgba(0,0,0,.7),transparent);background:linear-gradient(rgba(0,0,0,.7),transparent);z-index:1!important;position:absolute}.data.title>a{position:absolute;z-index:5;top:230px;height:35px!important;line-height:1.05em;text-align:center;vertical-align:middle;width:100%;overflow:hidden}.list-item .data.title{box-sizing:border-box;height:200px!important;padding:0!important}.list-table .list-table-header .header-title.studio{display:none!important}.list-item .data.studio{width:180px;margin:0;height:30px!important;top:195px;z-index:1!important;display:table;background-color:transparent;background:rgba(0,0,0,0);background:-moz-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.7) 100%);background:-webkit-gradient(left top,left bottom,color-stop(0,rgba(0,0,0,0)),color-stop(100%,rgba(0,0,0,.7)));background:-webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.7) 100%);background:-o-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.7) 100%);background:-ms-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.7) 100%);background:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.7) 100%)}.list-item .data.studio span{display:table-cell;vertical-align:middle}.list-item .data.score{right:5px;width:15px;text-align:left;bottom:-5px!important}.list-item .data.score a{color:#fff}.list-item .data.score:hover *{text-shadow:0 0 2px #000,0 0 1px #000,1px 1px 7px #000,0 0 0 #fff!important;color:#fff}.list-item .data.studio *{text-shadow:0 0 2px #000,0 0 1px #000,1px 1px 7px #000,0 0 0 #000!important;font-weight:700!important}.score select.edit-transition{margin-left:-5px}.data.progress,.data.volume,a[href*="%C2%9"]{bottom:-5px!important;transition:opacity .15s ease-in-out;padding-left:5px!important}.data.chapter{bottom:-5px!important;padding-left:70px!important}.data.chapter *,.data.progress *,.data.volume *{color:#fff}.list-item .data.type{right:5px!important;width:50px!important;top:5px!important;text-align:right!important;font-size:1em;transition:opacity .15s ease-in-out;font-weight:700;opacity:1;z-index:2;text-shadow:0 0 2px #000,0 0 1px #000,1px 1px 7px #000,0 0 0 #000}.list-table .list-table-data .data.title .add-edit-more{top:0;left:75px;font-size:0!important;position:absolute;z-index:10!important;text-align:center!important;vertical-align:middle!important;width:25px!important;height:25px!important;display:block}.add-edit-more{opacity:0;transition:all 0s ease 0s}.list-item:hover .add-edit-more{opacity:1}.list-table .list-table-data .data.title .edit a{background-image:url(http://i.imgur.com/OT1yCLP.png);display:block;width:25px;height:25px;background-size:15px 15px;background-repeat:no-repeat;background-color:transparent;background-position:50% 50%}.list-table .list-table-data .data.title .more a{background-image:url(http://i.imgur.com/cUAaila.png);display:inline-block;width:15px;height:15px;background-size:cover;color:transparent!important;display:none}.list-table .list-table-data .data.title .add a{background-image:url(http://i.imgur.com/AoTgUAL.png);display:block;width:25px;height:25px;background-size:15px 15px;background-repeat:no-repeat;background-color:transparent;background-position:50% 50%}.list-unit .loading-space{margin:0;height:20px;font-size:20px;text-align:center}.header .header-info>a{color:#fff!important}.header .header-info{color:rgba(255,255,255,.8)!important}.header .header-menu{color:rgba(255,255,255,.8)!important}.header .header-menu .btn-menu{color:rgba(255,255,255,.8)!important}.username{color:rgba(255,255,255,.8)!important}#header-menu-button{color:rgba(255,255,255,.8)!important}.header a{font-weight:700;color:#fff!important}.cover-block::after{height:120px!important;width:120px!important;background-repeat:no-repeat;background-size:contain;position:absolute;display:block!important;margin-left:57px;margin-top:-70px;content:"";padding:5px;background-color:#fff;box-shadow:0 2px 8px 0 rgba(0,0,0,.3);border-radius:5px;border:#fff 2px solid}.cover-block::before{position:absolute;display:block!important;margin:auto;bottom:5px;width:1200px;text-align:center;color:#fff!important;font-size:18px!important;font-family:Rancho;letter-spacing:0!important}.header .header-title{position:absolute;top:0;left:40px;background-image:url(http://i.imgur.com/39cRtfK.png);background-position:left top;background-repeat:no-repeat;background-size:auto 50px;display:block;width:50px!important;height:50px;text-indent:-9999px;overflow:hidden}body[data-query*='"status":1'],body[data-query*='"status":2'],body[data-query*='"status":3'],body[data-query*='"status":4'],body[data-query*='"status":6'],body[data-query*='"status":7']{background-attachment:fixed!important;background-position:50% 50%;background-repeat:no-repeat!important;background-size:cover}span a[href*="&tag=!"],span a[href*="&tag=%40"],span a[href*="&tag=~"]{display:none!important}a[href$="&tag=*"]{position:absolute;left:0;width:150px;height:0;font-size:15px;top:0;color:transparent!important}a[href$="&tag=*"]:after{content:'\f005';font-family:FontAwesome!important;display:inline-block;pointer-events:all;position:absolute;top:238px;left:145px;font-size:1.1em;color:#fff!important;text-shadow:0 0 2px #000,0 0 1px #000,1px 1px 7px #000,0 0 0 #fff!important}@keyframes intro{from{opacity:0;margin-top:100vh}16%{opacity:0;margin-top:100vh}to{opacity:1;margin-top:100px}}.list-container{animation:intro 2s}footer{position:fixed;bottom:0;left:0;width:100%;height:30px!important;z-index:9998}#footer-block{display:block;background-color:transparent;background:rgba(0,0,0,0);background:-moz-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.6) 100%);background:-webkit-gradient(left top,left bottom,color-stop(0,rgba(0,0,0,0)),color-stop(100%,rgba(0,0,0,.6)));background:-webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.6) 100%);background:-o-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.6) 100%);background:-ms-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.6) 100%);background:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.6) 100%)}#copyright{color:#fff;letter-spacing:1px;text-shadow:0 3px 3px #000;font-size:10px}#copyright::after{content:"Shelter Style V2 - Layout originally designed by Takana no Hana"} |
Shishio-kunMar 14, 2023 10:32 AM
Mar 14, 2023 10:25 AM
#258
Backup codes for MAL 2021 Changes A CSS formatter will decompress these codes so they are more readable. https://www.cleancss.com/css-beautify/ /*2021 Changes*/ .data.tags span a{pointer-events:auto;cursor:pointer!important}.list-table .list-table-data .data.tags a:hover{color:#000!important;text-shadow:none}.cover-block::after{opacity:0}a img{background-size:cover!important;height:250px!important;width:178px!important}.data.image a:before{content:"";display:inline-block!important;position:absolute;width:180px;height:225px;background-color:rgba(0,0,0,.3);background-position:center!important;background-repeat:no-repeat!important;background-size:cover;z-index:5;box-shadow:0 0 5px #000 inset;box-sizing:border-box;transition:all .2s ease-in-out}footer:after,footer:before{display:block;content:"";height:100%!important;bottom:0;background-repeat:no-repeat!important;pointer-events:none!important}.list-table .list-table-header .header-title.days,.list-table .list-table-header .header-title.licensor{color:gray!important}.list-table .list-table-header .header-title.licensor{padding-top:20px}.list-table .list-table-header:after{position:absolute!important;top:150px}.list-table .list-table-data .data.licensor,.list-table .list-table-data .data.magazine{position:absolute!important;margin-top:100px;left:-10px;width:200px}.list-table .list-table-data .data.rated:before{content:"Rated"}.list-table .list-table-data .data.rated{position:absolute!important;left:0;right:0;top:135px}.list-table .list-table-data .data.airing-started:before{content:"Debuted:"}.list-table .list-table-data .data.airing-started{position:absolute!important;top:50px!important;left:4px}.list-table .list-table-data .data.airing-finished:before{content:"Ended:"}.list-table .list-table-data .data.airing-finished{position:absolute!important;top:70px!important;left:4px}.list-table .list-table-data .data.days{position:absolute!important;margin-top:-14px;left:-18px;width:100px;z-index:10;pointer-events:none!important;font-size:11px!important}.list-table .list-table-data .data.storage{position:absolute!important;z-index:100;margin-top:283px;left:0}.list-table .list-table-data .data.started:before{content:"Started:"}.list-table .list-table-data .data.started{position:absolute!important;margin-top:157px;left:4px}.list-table .list-table-data .data.finished:before{content:"Finished:"}.list-table .list-table-data .data.finished{position:absolute!important;margin-top:172px;left:4px}.data.score:before{content:"Score:";position:absolute;left:-40px}.list-table .list-table-data .data.airing-finished,.list-table .list-table-data .data.airing-started,.list-table .list-table-data .data.days,.list-table .list-table-data .data.finished,.list-table .list-table-data .data.licensor,.list-table .list-table-data .data.magazine,.list-table .list-table-data .data.rated,.list-table .list-table-data .data.season,.list-table .list-table-data .data.started,.list-table .list-table-data .data.storage{opacity:0!important;text-shadow:0 0 2px #000,0 0 1px #000,1px 1px 7px #000,0 0 0 #000!important;color:#fff!important;font-size:.9em;font-weight:700}.list-table .list-table-data:hover .data.airing-finished,.list-table .list-table-data:hover .data.airing-started,.list-table .list-table-data:hover .data.days,.list-table .list-table-data:hover .data.finished,.list-table .list-table-data:hover .data.licensor,.list-table .list-table-data:hover .data.magazine,.list-table .list-table-data:hover .data.rated,.list-table .list-table-data:hover .data.season,.list-table .list-table-data:hover .data.started,.list-table .list-table-data:hover .data.storage,.list-table .list-table-data:hover .data.studio{opacity:1!important;visibility:visible!important}.list-table .list-table-data:hover .data.season{width:400px!important}.list-item .data.score a{padding-right:10px;padding-bottom:5px;padding-top:5px;z-index:1000!important}.list-table .list-table-data .data.score{z-index:1000!important}.list-table .list-table-data .data.score .link:Before{content:"";position:absolute;height:40px;width:80px;display:block;top:-5px;left:-50px;opacity:.5;z-index:1000!important}select{background-color:#000!important;color:#fff!important}select:hover{background-color:#000!important;color:#fff!important}.list-table .fa:after{content:"";position:absolute!important;top:-6px!important;left:40px!important;display:block;padding-right:30px;padding-left:10px;padding-bottom:30px;padding-top:10px}.fa:hover{text-decoration:underline!important}.list-table .list-table-data .data.title .link:hover{text-decoration:underline!important}.data.progress span a:before{content:"";width:35px;height:10px;left:0;top:-5px;position:absolute;padding-bottom:20px;z-index:10000!important}.data.title>a{height:18px!important}.list-table .list-table-data .data.title .link:hover{width:100%;height:auto;overflow:visible;white-space:initial}footer::after,footer::before{content:"";display:block;position:fixed;bottom:0;background-size:100%;pointer-events:none;z-index:3}.cover-block::after{display:none!important}.list-table .list-table-data .tags textarea{position:absolute;top:0;background:beige;color:#000;text-align:center!important;font-family:Verdana,Arial!important;font-size:11px;box-sizing:inherit!important;transition:none!important;animation:none!important;border:none!important;line-height:inherit}.data.priority:after{content:"Priority"}.data.priority{position:absolute;z-index:1000;top:-14px;left:75px;text-shadow:0 0 2px #000,0 0 1px #000,1px 1px 7px #000,0 0 0 #000!important;color:#fff!important;pointer-events:none!important;font-weight:700}.data.priority:after{content:"Priority"}.list-table .list-table-data .data.chapter,.list-table .list-table-data .data.chapter a,.list-table .list-table-data .data.licensor a,.list-table .list-table-data .data.magazine a,.list-table .list-table-data .data.progress,.list-table .list-table-data .data.progress a,.list-table .list-table-data .data.score a,.list-table .list-table-data .data.season a,.list-table .list-table-data .data.studio a,.list-table .list-table-data .data.volume,.list-table .list-table-data .data.volume a{color:#fff!important}.list-table .list-table-data .data.tags a{color:#000!important}.list-item .data.studio span{display:inline-block}.list-menu-float{z-index:400;pointer-events:none}.list-menu-float::before,.list-menu-float:hover{pointer-events:auto}.list-table .list-table-header{pointer-events:none}.list-table .list-table-header::before,.list-table .list-table-header:hover{pointer-events:auto}.data.progress span a::before{z-index:1!important}.list-item .data.studio span{display:inline!important;vertical-align:middle!important}.cover-block::after,v.list-table .list-table-header:after{background-size:cover!important;background-position:center center!important}.data.days:before{content:"Days:"}.list-menu-float span.text{color:#fff!important}.list-menu-float .icon-menu.profile::before{color:#fff!important}.list-menu-float span.text:hover{text-decoration:underline}.list-menu-float{padding-right:10px;padding-bottom:20px}.list-menu-float .icon-menu svg.icon{fill:#fff!important}.list-menu-float .icon-menu.profile{font-size:16px;left:0;width:120px!important}.list-menu-float .icon-menu.profile::before{position:absolute;font-size:17px!important;left:14px;top:-3px;content:"\f007\00a0"!important;font-family:FontAwesome!important}.list-menu-float .icon-menu.profile::after{content:"Profile";position:absolute;left:19px;top:4px;font-family:'Helvetica neue',Helvetica,"lucida grande",tahoma,verdana,arial,sans-serif}.list-menu-float .icon-menu.profile:hover:before{text-decoration:none!important}.list-menu-float .icon-menu.profile:hover:after{text-decoration:underline}.list-menu-float .icon-menu.profile::before{top:-7px}.list-menu-float .icon-menu.profile::after{top:0}:not(*),body *{cursor:url(https://i.imgur.com/j9ZWzyT.png),auto!important}.list-unit:before{content:"";height:100%;width:100%;left:0;top:0;display:block;position:fixed}.data.priority{top:5px;left:30px}.list-table .list-table-data:hover .data.priority{top:-14px;left:70px;position:absolute;width:120px}.list-item .data.number{line-height:26px!important}* {scrollbar-color: grey black !important;}.list-table .list-table-data .data.title .edit:hover a:before{content: "Edit";color: white;font-size: 10px;position: absolute;top: 0px;width: 100px;left: -15px;}.list-table .list-table-data .data.title .add:hover a:before{content: "Add";color: white;font-size: 10px;position: absolute;top: 0px;width: 100px;left: -15px;}.status-button.watching,.status-button.reading {left:8px !important;}.status-button.completed {left:16px !important;}.status-button.onhold {left:24px !important;}.status-button.dropped {left:32px !important;}.status-button.plantowatch,.status-button.plantoread{left:40px !important;}.list-status-title:after, .list-unit.reading .list-status-title:after,.list-unit.completed .list-status-title:after, .list-unit.onhold .list-status-title:after,.list-unit.dropped .list-status-title:after,.list-unit.plantowatch .list-status-title:after, .list-unit.plantoread .list-status-title:after,.list-unit.all_anime .list-status-title:after{background-position: top center;}.list-unit {padding-bottom: 150px;}.list-table .list-table-data .data.volume {margin-left: -4px;font-size: 9px !important;}.list-table .list-table-data .data.chapter {margin-left: -14px;font-size: 9px !important;}.data.score::before {font-size: 10px;margin-left: 2px;}.list-table .list-table-data .data.chapter .fa:after, .list-table .list-table-data .data.volume .fa:after{display: none;}.list-table .list-table-data .data.chapter .fa:before, .list-table .list-table-data .data.volume .fa:before{padding-right: 8px;padding-left: 10px;padding-top: 10px;padding-bottom: 20px;margin-left:-10px !important;position: relative !important;z-index: 10000 !important;}.list-table .list-table-data .data.progress input, .list-table .list-table-data .data.volume input, .list-table .list-table-data .data.chapter input{background: black;}.list-table .list-table-data .data.volume span a:link:after, .list-table .list-table-data .data.chapter span a:link:after{content: "";display: block;width: 20px;height: 1px;padding-bottom: 15px;position: absolute !important;z-index: 10000 !important;}.list-table .list-table-data .data.volume span a:link:after, .list-table .list-table-data .data.chapter span a:link:after{content: "";display: block;width: 20px;height: 0px;top: 0;padding-bottom: 30px;padding-right: 10px;position: absolute !important;z-index: 10000 !important;}.data.tags a {white-space: normal !important;}footer {z-index: 10000 !important;}#copyright {text-align: center;position: relative !important;z-index: 10001 !important;}.data.title:before {content: "";pointer-events: none;left: 0;top: 0;position: absolute;width: 100%;opacity: 0;height: 283px !important;}.list-table .list-table-data:hover .data.title:before {transition: all .1s ease-in-out;opacity: 1;background-color: rgba(0, 0, 0, .7) !important;}.list-table .list-table-data .data.days {margin-top: 280px !important;margin-left: 120px;}.list-table .list-table-data .data.started {position: absolute !important;margin-top: 280px !important;left: 0px !important;}.list-table .list-table-data .data.finished {position: absolute !important;margin-top: 280px !important;left: 54px !important;width: 69px !important;}.list-table .list-table-data .data.finished::before {content: "to" !important;font-size: 9px !important;}.list-table .list-table-data .data.started::before {content: "" !important;}.list-table .list-table-data .data.licensor, .list-table .list-table-data .data.magazine {position: absolute !important;margin-top: 165px !important;left: -10px !important;width: 200px !important;}.list-table .list-table-data .data.genre {margin-top: 95px !important;text-shadow: 0 0 2px #000,0 0 1px #000,1px 1px 7px #000,0 0 0 #000 !important;opacity: 0 !important;color: #fff !important;font-size: .9em !important;font-weight: 700 !important;width: 180px !important;left: -0px !important;}.list-table .list-table-data a[href*="&demographic"] {text-shadow: 0 0 2px #000,0 0 1px #000,1px 1px 7px #000,0 0 0 #000 !important;font-size: 10px !important;font-weight: 700 !important;margin-top: 30px !important;width: 180px !important;left: -0px !important;position: absolute !important;opacity: 0 !important;}.list-table .list-table-data .data.demographic {margin-top: 115px !important;opacity: 0 !important;}.list-table .list-table-data:hover .data.genre, .list-table .list-table-data:hover a[href*="&demographic"], .list-table .list-table-data:hover .data.demographic {opacity: 1 !important;}.list-table .list-table-data .data.rated {margin-top: -105px !important;left: 120px !important;font-size: 11px !important;}.list-table .list-table-data .data.title .content-status, .list-table .list-table-data .data.title .rereading, .list-table .list-table-data .data.title .rewatching{left: 100px !important;position: absolute !important;margin-top: -44px !important;}.list-table .list-table-data:hover .data.priority {left: -20px !important;}.list-table .list-table-data .data.storage {position: absolute !important;z-index: 100 !important;margin-top: 70px !important;left: 120px !important;}.data.days::after {content: " days" !important;}.data.days::before {content: ", " !important;}.list-table .list-table-data .data.days {position: absolute !important;margin-top: 279px !important;left: -18px !important;width: 100px !important;z-index: 10 !important;pointer-events: none !important;font-size: 10px !important;}.list-table .list-table-data .data.genre {height: 1px !important;}#qc-cmp2-container, .qc-cmp-button, .qc-cmp-ui, .qc-cmp-ui .qc-cmp-main-messaging, .qc-cmp-ui .qc-cmp-messaging, .qc-cmp-ui .qc-cmp-beta-messaging, .qc-cmp-ui .qc-cmp-title, .qc-cmp-ui .qc-cmp-sub-title, .qc-cmp-ui .qc-cmp-purpose-info, .qc-cmp-ui .qc-cmp-table, .qc-cmp-ui .qc-cmp-table-header, .qc-cmp-ui .qc-cmp-vendor-list, .qc-cmp-ui .qc-cmp-vendor-list-title, .qc-cmp-publisher-purposes-table .qc-cmp-table-header, .qc-cmp-publisher-purposes-table .qc-cmp-table-row, .qc-cmp-button.qc-cmp-secondary-button, #qc-cmp2-container *{display: none !important;pointer-events: none !important;visibility: hidden !important;opacity: 0 !important;}#recaptcha-terms, .grecaptcha-badge, .grecaptcha-badge *{display: none !important;} |
Shishio-kunMar 14, 2023 10:31 AM
Mar 14, 2023 10:26 AM
#259
Backup codes for MAL 2023 Changes /*2023 Changes*/ .icon-watch2 .malicon.malicon-movie-episode, .icon-watch2 .malicon.malicon-movie-pv, .icon-watch2 .malicon.malicon-streaming, .icon-watch-pv2 .malicon.malicon-movie-episode, .icon-watch-pv2 .malicon.malicon-movie-pv, .icon-watch-pv2 .malicon.malicon-streaming { color: white !important; } .icon-watch2, .icon-watch-pv2 { color: white !important; display: inline-block; position: relative !important; top: 201px; left: 159px; z-index: 2 !important; opacity: .9; } .malicon-streaming::before{ color: white !important; font-size: 18px; content:"▶" !important; text-shadow: 0 0 4px #000,0 0 3px #000,1px 1px 7px #000,0 0 0 #000; } .malicon-streaming::after{ content:"" !important; width: 35px; height: 30px; top: -5px; left: -8px; display: block; position: absolute; } .malicon-streaming:hover:before{ color: white !important; text-shadow: 0 0 9px white,0 0 9px white,1px 1px 6px white,0 0 0 white; opacity: 1 !important; } .icon-watch2 a.mal-icon:hover, .icon-watch-pv2 a.mal-icon:hover { opacity: 1 !important; } .list-table .list-table-data .data.title .notes .text { top: 210px; left: 5px; position: absolute; font-size: 9px; max-width: 40px; max-height: 20px; overflow: hidden; color: #C0C0C0; } .list-table .list-table-data .data.title .notes .text:hover:before{ content: ""; top: 190px; left: 0; height: 20px; width: 30px; position: absolute; display: block; } .list-table .list-table-data .data.title .notes .text:hover { color: #e8e8e8; background: rgba(3, 3, 21, 0.95); max-width: 180px; min-height: 186px; max-height: 650px; width: 160px; font-size: 11px; top: 25px; padding: 5px; overflow: unset !important; text-shadow: none; } .list-table .list-table-data .data.title .notes * { position: absolute; top: 210px; z-index: 1001 !important; } .list-table .list-table-data .data.title .notes .edit{ top: 208px; left: 5px; position: absolute; font-size: 10px; z-index: 100 !important; color: #C0C0C0; } .list-table .list-table-data .data.title .notes .edit:hover{ text-decoration: underline; } div[class*="tags-"] { height: 183px; } iframe.movie.youtube { position:relative; margin-top: -350px; margin-left: 160px; } .list-table .list-table-data .data.title .notes .edit{ visibility: hidden; } .list-table .list-table-data:hover .data.title .notes .edit{ visibility: visible; } .mal-modal .mal-modal-dialog .mal-modal-content .mal-modal-body .broadcasts * { color: black; } .list-table .list-table-data .data.licensor, .list-table .list-table-data .data.magazine { overflow: hidden; height: 18px !important; } .list-item .data.studio { height: 38px !important; top: 187px; } .data.tags textarea{ height:180px!important; } |
Shishio-kunMar 14, 2023 10:31 AM
Mar 18, 2023 4:45 AM
#260
how do i turn the characters or 'renders on the side' into assisstants with that speech bubble? |
𝘓𝘌𝘛𝘚 𝘋𝘖 𝘚𝘛𝘌𝘙𝘖𝘐𝘋𝘚 (`∀´)Ψ |
Mar 18, 2023 7:34 AM
#261
Siba_Suibian said: how do i turn the characters or 'renders on the side' into assisstants with that speech bubble? Use this topic https://myanimelist.net/forum/?topicid=1922650 You don't have tags turned on, so you'd have to do that first and fill in some tags for them to say. Follow all the instructions carefully Turn tags on here https://myanimelist.net/editprofile.php?go=listpreferences If you put the assistants codes in your layout + have tags on and it still doesn't work link your layout here so we can see why they aren't working. |
Shishio-kunMar 18, 2023 7:39 AM
Mar 22, 2023 5:31 AM
#262
Shishio-kun said: 333anime said: How can I change the banner avatar on each page, I tried doing it and it didn't work Your list doesn't load for me, so I can't see if there's a fix. You'll have to let us know exactly what layout code you were using and what image links you were trying to use (links to the images on Imgur would be helpful). [url=https://myanimelist.net/animelist/333anime[/url] [url=https://myanimelist.net/mangalist/333anime[/url] |
333animeMar 22, 2023 5:40 AM
Mar 22, 2023 8:36 AM
#263
333anime said: Shishio-kun said: 333anime said: How can I change the banner avatar on each page, I tried doing it and it didn't work Your list doesn't load for me, so I can't see if there's a fix. You'll have to let us know exactly what layout code you were using and what image links you were trying to use (links to the images on Imgur would be helpful). [url=https://myanimelist.net/animelist/333anime[/url] [url=https://myanimelist.net/mangalist/333anime[/url] Layouts are looking good and almost complete! I see all the banner avatars changed, is it not showing for you? The all anime button on your layout isnt displaying images, but the others are fine, All Anime Button needs to be something like this /*ALL ANIME BANNER BUTTON*/ .status-button.all_anime { background-image: url(https://imgur.com/23eG193.jpg); } .status-button.all_anime:hover,.status-button.all_anime.on { background-image: url(https://imgur.com/qlNA0mG.gif); } You should also change the imports at the top so they have your username, like below, the default imports will lag the layout hard {IMPORTANT: Change "SpaceCowboy" and "DateYutaka" to your MyAnimeList username in the next two imports under this section. That will personalize HD preview pics and you should get a faster/smoother load time. The two imports begin with @/import and are at lines 10 and 12 below. If needed, fix preview pics and layout problems with this topic: https://myanimelist.net/forum/?topicid=439897 } Wallpaper on the all manga page should be switched too its not working. I would recommend also posting your CSS here if there's more specific problems then we can look at the Imgur links youre using https://pastebin.com/ |
Mar 29, 2023 7:00 AM
#264
is it possible to have this |
𝘓𝘌𝘛𝘚 𝘋𝘖 𝘚𝘛𝘌𝘙𝘖𝘐𝘋𝘚 (`∀´)Ψ |
Mar 29, 2023 8:50 AM
#265
Yes, you'd have to find and separate the codes for the header and also for the rows. One way you could do this would be to use inspect element in Firefox (a live editor) and just delete everything from Clarity CSS until you have just the rows then do the same for the Takana grid headers. Combine them and then decide what other layout codes you want. It'd be a huge pain, probably. |
Mar 29, 2023 11:36 PM
#266
I did this for someone else a couple of years ago, although it's quite out of date now and doesn't support many of the newer features. I don't have time to redo it at the present moment but the list columns etc. that have been there for years should still work and at the very least it shows you how it's done. Valerio_Lyndon said: CameronMZ said: I guess the status menu and the entire surrounding theme, since I can always change the background picture and transparency of the list items if I want to switch things up. Honestly, thank you so so much I know this is a lot and I'm really freaking excited. Try this out, see if it's something like you were thinking. Here's the code: [Code] This version uses the light colours, but to change it to dark you could find the variables section (CTRL+F to search for "CLARITY INSERT" in the code) and copy-paste the variables from Clarity's Dark Mode. These variables can be used to overwrite the others in the code (found at line ~1782) or just pasted below. You can also modify any of these variables. For instance, for transparent list rows you could change --bg from "#212121" to "rgba(0,0,0,0.5)". :root { /* Primary Customization */ --banner: url(https://i.imgur.com/WaLokPG.jpg); --character: url(https://i.imgur.com/h8HW1jf.png); /* Generic Colours */ --pbg: #161616; --bg: #212121; --bg-dark: #444; --text: #ababab; --text-h: #416abe; --text-dim: #777; --text-dim-h: #999; --text-dark: #ababab; --shadow: rgba(0,0,0,0.8); --icon: #959595; --accent: #416abe; --banner-text: #f6f5ff; --banner-text-shadow: #e4bef4; /* Button Colours */ --btn-bg: #191919; --btn-bg-h: #ababab; --btn-head-bg-h: #416abe; --btn-text-h: #212121; /* Header Colours */ --text-head: #9b9b9b; --text-head-h: #ababab; /* Single-Use Colours */ --cover-bg: #090909; --edit-btn: #323232; --checkmark: #416abe; } This will probably work with many of the mods from the Clarity forum thread, but some may need tweaking. If you are curious, here's a video of me editing the themes together (~20 minutes). Not sure how useful it will prove but it exists nonetheless. |
Apr 12, 2023 7:43 AM
#267
Today was an update that added a black theme to the site and now the background images don't work. MAL needs to fix this or do you need to update the CSS code? |
Apr 12, 2023 9:01 AM
#268
Czerifoo said: Today was an update that added a black theme to the site and now the background images don't work. MAL needs to fix this or do you need to update the CSS code? I have a fix, will mass message it to all club members later along with others maybe |
Apr 12, 2023 9:03 AM
#269
Shishio-kun said: okay, i'll be waitingCzerifoo said: Today was an update that added a black theme to the site and now the background images don't work. MAL needs to fix this or do you need to update the CSS code? I have a fix, will mass message it to all club members later along with others maybe |
Apr 12, 2023 1:03 PM
#270
Czerifoo said: Shishio-kun said: okay, i'll be waitingCzerifoo said: Today was an update that added a black theme to the site and now the background images don't work. MAL needs to fix this or do you need to update the CSS code? I have a fix, will mass message it to all club members later along with others maybe Solution for your issue is here under the Takana grid fix https://myanimelist.net/forum/?topicid=2087636 |
May 14, 2023 7:43 AM
#271
Helloo^ I can't change the background of my list. How can i change it? |
May 14, 2023 9:28 AM
#272
You don't seem to be using any custom CSS right now, so you can change it with the built-in background image uploader on your style page. If you have a specific custom theme that you want help with then you'll have to specify since you don't have any on your list right now. |
May 14, 2023 11:07 AM
#273
I am so sorry (┬┬﹏┬┬). I was using the default theme for now because I couldn't change the color (ಥ _ ಥ). I'm using a css theme and I couldn't change its color, can you tell me what to do? (now i changed my list to the css i use) Valerio_Lyndon said: You don't seem to be using any custom CSS right now, so you can change it with the built-in background image uploader on your style page. If you have a specific custom theme that you want help with then you'll have to specify since you don't have any on your list right now. |
May 14, 2023 11:42 AM
#274
PhonPhon said: I am so sorry (┬┬﹏┬┬). I was using the default theme for now because I couldn't change the color (ಥ _ ಥ). I'm using a css theme and I couldn't change its color, can you tell me what to do? (now i changed my list to the css i use) Ah, I happen to be familiar with that list. :) To change the background colour, you can modify the variable "--pbg" and use any valid CSS color. To do so, add this to the bottom of your code and change "yellow" to your desired colour. body { --pbg: yellow } Or if you want to change the background image, change the "--background" variable and give it a url() value. Example: body { --background: url(https://i.imgur.com/VxXA9nt.jpg) } If you need it, you can find more information about modifying the theme in the install guide: Here, specifically the "Change theme images and colours" page. If you need it later, the install guide is also linked from the forum thread. |
Valerio_LyndonMay 14, 2023 11:47 AM
May 14, 2023 3:38 PM
#275
Hello! I'm using the Attack on Titan Layout , I like how the name of the anime appears once I hover the image but is it also possible to have the name appear at the top or bottom of the anime image aswell? Makes it easier for me to find it Thank you in advance! |
May 14, 2023 6:46 PM
#276
MochiMazui said: Hello! I'm using the Attack on Titan Layout , I like how the name of the anime appears once I hover the image but is it also possible to have the name appear at the top or bottom of the anime image aswell? Makes it easier for me to find it Thank you in advance! All code from this post should be added to the bottom of your Custom CSS section to be sure it applies. You can show the titles by adding this code: .list-table .list-table-data:not(:hover) .data.title .link { opacity: 1; bottom: 13px; } If you want to make it a bit easier to see, you can also add a text-shadow to the same code block (You can find a shadow generator: here). Here's a visual example of how to add that code: Or you could add a background colour with this extra code: .list-table-data:not(:hover) .title .link::before { content: ""; position: absolute; z-index: -1; left: -13px; bottom: -13px; width: 200px; height: calc(100% + 26px); background: rgba(5,5,5,0.8); } |
May 15, 2023 12:44 PM
#277
Valerio_Lyndon said: Thank you very much! .list-table .list-table-data:not(:hover) .data.title .link { opacity: 1; bottom: 13px; } |
May 21, 2023 2:48 PM
#278
Is it possible to make the preview covers larger to see them completely or at least remove the shading at the top? |
May 22, 2023 9:05 PM
#279
Sondo said: Is it possible to make the preview covers larger to see them completely or at least remove the shading at the top? For the images height, you could increase the height with some code such as in this spoiler... Default height is 283px. Here it's increased to 310px. Don't paste this pre-amble into the Custom CSS field. To modify, change the "310px" number to any px number you want. /* COVER HEIGHT */ .list-item, .list-item .list-table-data { --cover-h: 310px /* <-- adjust cover height here! */; height: var(--cover-h) !important; } .data.image, .data.image a::before, .data.image img { height: calc(var(--cover-h) - 58px) !important; } .data.title > a { top: calc(var(--cover-h) - 53px); } .data.title::before { height: var(--cover-h) !important; } .icon-watch2, .icon-watch-pv2 { top: calc(var(--cover-h) - 82px); } .. but any image that is wider than you expect will then have the sides cut off. If you want to show the entirety of all images, all the time, then you'll have to change the fit/size of the images. That can be done with the code in this second spoiler. /* Image Fit */ .data.image img, .data.image a::before { object-fit: contain; background-size: contain; } To remove the shading, see below. /* Remove cover top shading */ .list-item .data.number { background: none; } /* Remove cover side shading */ .data.image a::before { box-shadow: none; } |
May 25, 2023 3:20 AM
#280
Thank you very much! But I still have a question. Is it possible to remove the background behind the preview images? Especially with using custom preview pics it doesn't look good. |
May 25, 2023 10:45 PM
#281
Sondo said: Thank you very much! But I still have a question. Is it possible to remove the background behind the preview images? Especially with using custom preview pics it doesn't look good. Sure, you can do that with this code: /* remove fallback images */ .data.image img { display: none; } .data.image a::before { left: 0; } Just take note that this removes the default images in favour of the higher quality imported ones. This means if the cover image import ever fails, you will end up with no images until the import is replaced or you revert this change. Not a big deal but just so you know you can get lower quality images back by removing this code in the case of the images ever breaking. |
Valerio_LyndonMay 26, 2023 3:50 PM
Jun 1, 2023 3:33 PM
#283
Jun 1, 2023 4:58 PM
#285
@mdd_sora Awesome!! Thanks! 😃 |
Jun 3, 2023 8:50 AM
#286
Hi, How can I remove the animation at the start in the TAKANA GRID-STYLE? (where the list rise from the bottom of the screen) And have it static like the standard list. |
Jun 3, 2023 2:28 PM
#287
AlbYSaN said: Hi, How can I remove the animation at the start in the TAKANA GRID-STYLE? (where the list rise from the bottom of the screen) And have it static like the standard list. Try adding this to the bottom of your CSS edit box and let me know if it works! @keyframes intro{from{ opacity:1; margin-top:0vh } 16%{opacity:1;margin-top:0vh} to{opacity:1;margin-top:0px}} .list-container{animation:intro 0s} And that layout looks so good with those renders and that background 🥰️ |
Jun 3, 2023 4:06 PM
#288
Shishio-kun said: Yes! It worked, thank you, now it's much faster to load and reactive.AlbYSaN said: Hi, How can I remove the animation at the start in the TAKANA GRID-STYLE? (where the list rise from the bottom of the screen) And have it static like the standard list. Try adding this to the bottom of your CSS edit box and let me know if it works! @keyframes intro{from{ opacity:1; margin-top:0vh } 16%{opacity:1;margin-top:0vh} to{opacity:1;margin-top:0px}} .list-container{animation:intro 0s} And that layout looks so good with those renders and that background 🥰️ And thanks for the compliments, I'm taking ages for choose the right pics aha. |
Jun 6, 2023 7:47 AM
#290
Hello! I have a question again (。﹏。*) ... I'm using takana grind style 1 and when I hover over the anime with the mouse, the image on the small screen turns white, the same goes for my avatar. how can i fix this? |
Jun 12, 2023 6:07 PM
#291
PhonPhon said: While I hate to be unhelpful, I am unable to reproduce your issue and have not heard of that exact occurance before. Here's what it looks like to me:Hello! I have a question again (。﹏。*) ... I'm using takana grind style 1 and when I hover over the anime with the mouse, the image on the small screen turns white, the same goes for my avatar. how can i fix this? As a general debug step, try updating the cover import near the top of the code. Find and delete the current 'auto' cover import: And replace it with these two new lines that specify your username (one of these imports is for the animelist and the other is for the mangalist): @\import "https://malscraper.azurewebsites.net/covers/anime/PhonPhon/presets/dataimagelinkbefore"; @\import "https://malscraper.azurewebsites.net/covers/manga/PhonPhon/presets/dataimagelinkbefore"; As for the avatar, I don't know what could cause that. If I understand correctly: the avatar image displays correctly until you hover an anime and then it goes blank? |
Jun 21, 2023 2:58 AM
#292
Valerio_Lyndon said: Oh sorry i fix it already (*/ω\*) Thank you anyway!!!!PhonPhon said: While I hate to be unhelpful, I am unable to reproduce your issue and have not heard of that exact occurance before. Here's what it looks like to me:Hello! I have a question again (。﹏。*) ... I'm using takana grind style 1 and when I hover over the anime with the mouse, the image on the small screen turns white, the same goes for my avatar. how can i fix this? As a general debug step, try updating the cover import near the top of the code. Find and delete the current 'auto' cover import: And replace it with these two new lines that specify your username (one of these imports is for the animelist and the other is for the mangalist): @\import "https://malscraper.azurewebsites.net/covers/anime/PhonPhon/presets/dataimagelinkbefore"; @\import "https://malscraper.azurewebsites.net/covers/manga/PhonPhon/presets/dataimagelinkbefore"; As for the avatar, I don't know what could cause that. If I understand correctly: the avatar image displays correctly until you hover an anime and then it goes blank? |
Jun 30, 2023 4:44 AM
#293
Hello, is it possible to remove one of the categories (using the Takana Grid Style 3) (i want to completely remove the on hold category since i am not using it) and have only the other 5 categories. |
Jun 30, 2023 11:49 AM
#294
Tassos117 said: Hello, is it possible to remove one of the categories (using the Takana Grid Style 3) (i want to completely remove the on hold category since i am not using it) and have only the other 5 categories. Try this a.status-button:nth-child(4){ display: none !important;} |
Jun 30, 2023 11:50 PM
#295
Shishio-kun said: Thanks it worked, but the gap between "completed" and "plan to watch" is bigger that the others how can i fix that ?Tassos117 said: Hello, is it possible to remove one of the categories (using the Takana Grid Style 3) (i want to completely remove the on hold category since i am not using it) and have only the other 5 categories. Try this a.status-button:nth-child(4){ display: none !important;} I would also like to know if the category text(where it says ALL ANIME) can change on the banners. |
Tassos117Jul 1, 2023 12:44 AM
Jul 1, 2023 11:37 AM
#296
Tassos117 said: Shishio-kun said: Thanks it worked, but the gap between "completed" and "plan to watch" is bigger that the others how can i fix that ?Tassos117 said: Hello, is it possible to remove one of the categories (using the Takana Grid Style 3) (i want to completely remove the on hold category since i am not using it) and have only the other 5 categories. Try this a.status-button:nth-child(4){ display: none !important;} I would also like to know if the category text(where it says ALL ANIME) can change on the banners. You can manually adjust the buttons with these codes (change the px amount to move it more or less left) all codes need to go at the bottom to overwrite the previous ones in case they conflict a.status-button:nth-child(5){ left: 25px !important;; } a.status-button:nth-child(6){ left: 35px !important;; } For changing header text, you can use the codes on this page https://myanimelist.net/forum/?topicid=1930157 |
Shishio-kunJul 1, 2023 3:25 PM
Aug 10, 2023 2:16 AM
#297
Hello again, i am using the Takana Grid Style 3 template how can i change the picture that appears when you press the filters button ? |
Aug 11, 2023 3:32 PM
#298
Tassos117 said: Hello again, i am using the Takana Grid Style 3 template how can i change the picture that appears when you press the filters button ? Add this code to the bottom of your CSS. /* FILTER POPUP BACKGROUND IMAGE */ div#advanced-options { background-image: url(https://i.imgur.com/J2wYUZ4.jpeg) !important; } You can then change the link inside the parentheses of the url() text to whatever image URL you want. |
Aug 15, 2023 3:24 PM
#299
I would just like to thank you for the effort you provide for the community, thanks to you I have redone my anime list! I'm new to the site and I'm happy to see features to personalize my profile, can you tell me what you think? there is also the steam profile in which you can customize your profile. and that sounds familiar to me, thank you :) |
Oct 31, 2023 6:24 PM
#300
video :https://i.imgur.com/guZDW6z.mp4 Learn tutorial edit COPY CODE {IMPORTANT: For sharper and brighter preview pics, change "hussin02" to your username in the first two imports below. They start with @\import If needed, fix layout problems with this topic: https://myanimelist.net/forum/?topicid=439897 } @\import "https://malscraper.azurewebsites.net/covers/anime/USERNAME/presets/dataimagelinkbefore"; @\import "https://malscraper.azurewebsites.net/covers/manga/USERNAME/presets/dataimagelinkbefore"; /*Layout CSS was originally made by Takana_no_hana, edits by Shishio-kun and Valerio_Lyndon Grid Style 2, 2023 Update Learn how to customize the layout here: https://myanimelist.net/forum/?topicid=1640096 */ @\import "https://storage.live.com/items/4A07C1EEED420167%21170"; @\import "https://dl.dropboxusercontent.com/s/4u0rqtodxpjkti4/TakanaGridBackup.css"; @\import "https://fonts.googleapis.com/css?family=arial"; @\import "https://fonts.googleapis.com/css?family=arial"; @\import "https://fonts.googleapis.com/css?family=arial"; @\import "https://fonts.googleapis.com/css?family=arial"; /*WALLPAPERS To change background images: delete what's in the parenthesis. Upload the new background to Imgur or a similar site, then copy the direct link (or Original GIF link if it's animated) and paste it into the parenthesis. Save.*/ body, body.ownlist { background-image: url(https://i.imgur.com/KrDLZhq.jpg); } /*PREVIEW PICS/COVERS See the help at the top of this layout code if you have problems with blurry or missing preview pics. If you want to customize a preview pic, use the code below but change the number after "anime" to the anime's number. Get the number from the address bar on its page on MAL. For example if you go to Code Geass's page the number in the address bar is 1575. Change "anime" to "manga" to customize manga previews. This code customizes the Code Geass preview (anime #1575) if you change the background image link. Copy and paste the code to customize more preview pics, just change the number.*/ .data.image a[href^="/anime/1575/"]:before{background-image:url(https://i.imgur.com/QuPoz5o.jpg); } /*BANNER AVATAR Change the first "center" to "left" or "right" to move the picture position. Change "cover" to "contain" or remove it to change how the image fills the avatar.*/ .list-table .list-table-header:after { background-image: url(https://i.imgur.com/h0Hoqp8.gif); background-position: center center; background-size: cover !important; } /*BANNER QUOTE*/ .cover-block::before{ background-color: #333; content: "Don't Stop Watching ANIME Until Old Age" } /*BANNER BACKGROUNDS AND HEIGHT You can change the images here and adjust the height. If you can't see the whole image increase height and/or change "cover" to "contain". You may want to lower cover pics after (scroll down).*/ /*ALL ANIME/MANGA BANNER BACKGROUND*/ .list-unit.all_anime .list-status-title:after { background-image: url(https://i.imgur.com/8TCYvEV.png); background-size: cover !important; height: 500px !important; } /*CURRENTLY WATCHING BANNER BACKGROUND*/ .list-unit.watching .list-status-title:after, .list-unit.reading .list-status-title:after { background-image: url(https://i.imgur.com/XImwrdY.jpg?1); background-size: cover !important; height: 500px !important; } /*COMPLETED BANNER BACKGROUND*/ .list-unit.completed .list-status-title:after { background-image: url(https://i.imgur.com/KYax2Lj.jpg); background-size: cover !important; height: 500px !important; } /*ON-HOLD BANNER BACKGROUND*/ .list-unit.onhold .list-status-title:after { background-image: url(https://i.imgur.com/a1AYGWx.jpg); background-size: cover !important; height: 500px !important; } /*DROPPED BANNER BACKGROUND*/ .list-unit.dropped .list-status-title:after { background-image: url(https://i.imgur.com/hE8HiUM.jpg); background-size: cover !important; height: 500px !important; } /*PLAN TO BANNER BACKGROUND*/ .list-unit.plantowatch .list-status-title:after, .list-unit.plantoread .list-status-title:after { background-image: url(https://i.imgur.com/V2jNV6u.jpg); background-size: cover !important; height: 500px !important; } /*MOVE COVER PICS UP OR DOWN Increase 0px to a higher amount like 100px to move the anime preview pics and header (Completed, etc) down. -480px brings them up to the banner buttons. If you put [data-query*='"status":7'] at the start of the first two lines of code (with a space after), it will affect only All Anime/Manga. Example: [data-query*='"status":7'] .list-unit .list-status-title .text, [data-query*='"status":7'] .list-item Change the 7 to 1 for current, 2 for completed, 3 for hold, 4 for dropped, and 6 for planned. Copy and paste the code again if needed.*/ .list-unit .list-status-title .text, .list-item{ top: 0px; } /*BANNER BUTTON BACKGROUNDS The first image link in parenthesis is the still black and white image, the second image link is the animated image (a GIF).*/ /*ALL ANIME BANNER BUTTON*/ .status-button.all_anime { background-image:url(https://i.imgur.com/yQjaqle.gif); } .status-button.all_anime:hover,.status-button.all_anime.on { background-image:url(https://i.imgur.com/ixlgHY3.gif); } /*CURRENT BANNER BUTTON*/ .status-button.watching,.status-button.reading { background-image:url(https://i.imgur.com/pb4YWte.gif); } .status-button.watching:hover,.status-button.watching.on,.status-button.reading:hover,.status-button.reading.on { background-image:url(https://i.imgur.com/u9fR2zH.gif); } /*COMPLETED BANNER BUTTON*/ .status-button.completed { background-image:url(https://i.imgur.com/f9lgxuo.gif); } .status-button.completed:hover,.status-button.completed.on { background-image:url(https://i.imgur.com/1tLCixf.gif); } /*ON HOLD BANNER BUTTON*/ .status-button.onhold { background-image:url(https://i.imgur.com/iMDPMKT.gif); } .status-button.onhold:hover ,.status-button.onhold.on { background-image:url(https://i.imgur.com/s1WOV3b.gif); } /*DROPPED BANNER BUTTON*/ .status-button.dropped { background-image:url(https://i.imgur.com/GzuZUad.gif); } .status-button.dropped:hover,.status-button.dropped.on { background-image:url(https://i.imgur.com/Ri8CXdR.gif); } /*PLANNED BANNER BUTTON*/ .status-button.plantowatch,.status-button.plantoread{ background-image:url(https://i.imgur.com/s3ue9wp.gif); } .status-button.plantowatch:hover,.status-button.plantowatch.on,.status-button.plantoread:hover,.status-button.plantoread.on { background-image:url(https://i.imgur.com/qHriCNz.gif); } /*SIDE RENDERS (left and right) To move the renders, adjust the percentage after "left" or "right". You can use negatives. To resize the renders, adjust the percentage after "width". 0% will remove the render.*/ footer:before { left: -3%; width: 25% !important; background-size: contain !important; background-image: url(); background-position: left bottom !important; } footer:after { right: 0%; width: 40% !important; background-size: contain !important;; background-image: url(https://i.imgur.com/FPiPHn8.png); background-position: right bottom !important; } /*ANIME/MANGA CONTAINER SETTINGS (TABLE COLORS) You can change the color with rbga colors. Generate RGBA colors here so you can replace the codes below: https://www.hexcolortool.com/ First set of colors= entire table. Second = banner. Third = default container behind an anime. Fourth = container when you point to it. Fifth = upper left menu. Sixth = top. You can set the last digit to zero to make it completely transparent.*/ .list-unit { background-color: rgba(0,0,0,.6) ; } .status-menu-container { background-color: rgba(0,0,0,.4) ; } .list-table .list-table-data { background-color: rgba(0,0,0,.2) !important; } .list-table .list-table-data:hover { background-color: rgba(0,0,0,.4) !important; } .list-menu-float .icon-menu{ background-color: rgba(0,0,0,.4) !important; } .header { background: linear-gradient(rgba(0,0,0,.4),transparent) !important; } /*CUSTOM CURSOR More here: https://myanimelist.net/forum/?topicid=1903808*/ body *, :not(*) { cursor: url(https://i.imgur.com/j9ZWzyT.png), auto !important; } /*FILTER MENU BACKGROUND*/ #advanced-options { background-image: url(https://i.imgur.com/dcORYEL.jpg) !important; } /*MAL LOGO*/ .header .header-title{ background-image: url(https://imgur.com/E7zWfiY.png) !important; } /*GREYSCALE FOR CUSTOM CATEGORY BUTTONS Delete this to remove grey from custom buttons.*/ .status-button.watching,.status-button.reading,.status-button.completed,.status-button.onhold,.status-button.dropped,.status-button.plantowatch,.status-button.plantoread,.status-button.all_anime{ filter: grayscale(100%); } .status-button.all_anime:hover,.status-button.all_anime.on,.status-button.plantowatch:hover,.status-button.plantowatch.on,.status-button.plantoread:hover,.status-button.plantoread.on,.status-button.dropped:hover,.status-button.dropped.on,.status-button.onhold:hover,.status-button.onhold.on,.status-button.completed:hover,.status-button.completed.on,.status-button.watching:hover,.status-button.watching.on,.status-button.reading:hover,.status-button.reading.on{ filter: inherit; } {ADD NEW CODES UNDER HERE} |
Shishio-kunNov 1, 2023 5:21 AM
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 |