New
Jan 1, 2015 11:53 AM
#1
This layout is custom CSS. If you don't know how to install it, use the easy starter tutorial: Beginner's Tutorial For more layouts check the Full list of Premade Layouts. Hahaido has made a layout based on the hot anime Akame ga kill with animated covers that drop from the top and several themes to choose from! How to install: Copy all six lines in the box labeled Code under the theme you want. Paste those six lines to your CSS edit box and save. After installing the layout code, you can replace Spacecowboy in the first line with your username to speed up the list. This won't work if you set your list to private or friends-only. Akame theme Code @\import "https://malscraper.azurewebsites.net/covers/anime/SpaceCowboy/presets/more"; @\import "https://fonts.googleapis.com/css2?family=Architects+Daughter&family=IM+Fell+English+SC&display=swap"; @\import "https://dl.dropboxusercontent.com/s/1pqxu5u8h0w6lrg/Animations.css"; @\import "https://dl.dropboxusercontent.com/s/g9zpzuys0aeamy1/CategoryMenu.css"; @\import "https://dl.dropboxusercontent.com/s/cqp6rebiyqa0569/Style.css"; @\import "https://dl.dropboxusercontent.com/s/69c4snyaqg1x8yp/TopMenu.css"; @\import "https://dl.dropboxusercontent.com/s/w5dqvnwgwrirclr/Akame.css"; Esdeath theme Code @\import "https://malscraper.azurewebsites.net/covers/anime/SpaceCowboy/presets/more"; @\import "https://fonts.googleapis.com/css2?family=Architects+Daughter&family=IM+Fell+English+SC&display=swap"; @\import "https://dl.dropboxusercontent.com/s/1pqxu5u8h0w6lrg/Animations.css"; @\import "https://dl.dropboxusercontent.com/s/g9zpzuys0aeamy1/CategoryMenu.css"; @\import "https://dl.dropboxusercontent.com/s/cqp6rebiyqa0569/Style.css"; @\import "https://dl.dropboxusercontent.com/s/69c4snyaqg1x8yp/TopMenu.css"; @\import "https://dl.dropboxusercontent.com/s/40igblufkbfo3e2/Esdese.css"; Mein theme Code @\import "https://malscraper.azurewebsites.net/covers/anime/SpaceCowboy/presets/more"; @\import "https://fonts.googleapis.com/css2?family=Architects+Daughter&family=IM+Fell+English+SC&display=swap"; @\import "https://dl.dropboxusercontent.com/s/1pqxu5u8h0w6lrg/Animations.css"; @\import "https://dl.dropboxusercontent.com/s/g9zpzuys0aeamy1/CategoryMenu.css"; @\import "https://dl.dropboxusercontent.com/s/cqp6rebiyqa0569/Style.css"; @\import "https://dl.dropboxusercontent.com/s/69c4snyaqg1x8yp/TopMenu.css"; @\import "https://dl.dropboxusercontent.com/s/vdtepix29wvs17u/Mein.css"; Lubbock theme Code @\import "https://malscraper.azurewebsites.net/covers/anime/SpaceCowboy/presets/more"; @\import "https://fonts.googleapis.com/css2?family=Architects+Daughter&family=IM+Fell+English+SC&display=swap"; @\import "https://dl.dropboxusercontent.com/s/1pqxu5u8h0w6lrg/Animations.css"; @\import "https://dl.dropboxusercontent.com/s/g9zpzuys0aeamy1/CategoryMenu.css"; @\import "https://dl.dropboxusercontent.com/s/cqp6rebiyqa0569/Style.css"; @\import "https://dl.dropboxusercontent.com/s/69c4snyaqg1x8yp/TopMenu.css"; @\import "https://dl.dropboxusercontent.com/s/8a3t89sahe69lwh/Lubbock.css"; Chelsea theme Code @\import "https://malscraper.azurewebsites.net/covers/anime/SpaceCowboy/presets/more"; @\import "https://fonts.googleapis.com/css2?family=Architects+Daughter&family=IM+Fell+English+SC&display=swap"; @\import "https://dl.dropboxusercontent.com/s/1pqxu5u8h0w6lrg/Animations.css"; @\import "https://dl.dropboxusercontent.com/s/g9zpzuys0aeamy1/CategoryMenu.css"; @\import "https://dl.dropboxusercontent.com/s/cqp6rebiyqa0569/Style.css"; @\import "https://dl.dropboxusercontent.com/s/69c4snyaqg1x8yp/TopMenu.css"; @\import "https://dl.dropboxusercontent.com/s/s4uh1ln5hh4x9dw/Chelsea.css";{} Set up for animated hovering tags (mini-reviews) Add the hover tag code to the CSS so your mini reviews fit with the rest of the layout! /* MINI REVIEWS (HOVER) Move the area around with the left and top codes. Adjust the surrounding area of the tags by adjusting the padding. Control the height and width of the section with the height and width codes. If your tags/mini-reviews aren't hovering correctly or you need help understanding or adjusting the background color code, see the bottom of the original tutorial: http://myanimelist.net/forum/?topicid=563993 */ td[class^='td']:nth-of-type(6) { visibility: hidden; opacity: 0; position: fixed; top: 310px; right: 1%; background-color: rgba(250, 30, 25, 0.85) !important; border-color: black; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; font-size: 12px; height: 150px; width: 200px; padding: 10px 10px 0px 24px; color: white !important; z-index: 1; transition: 3s; } /* TAG TEXT */ tr:hover td[class^='td']:nth-of-type(6) a { color: white !important; text-decoration: none !important; font-size: 16px; } /* OTHER SETTINGS */ tr:hover td[class^='td']:nth-of-type(6){ visibility: visible; opacity: 1; } /* REMOVE HEADER Deletes the header Tags which isn't necessary. */ .table_header:nth-of-type(6) { display: none; } /* REMOVE TAG EDIT BUTTON Deletes the Tag's edit link which will is inaccessible with this setup, use the edit button by Animetitle to edit your tags. */ td:nth-of-type(6) small { display: none; } .td1:nth-of-type(6) small, .td2:nth-of-type(6) small, .td1:nth-of-type(5) small, .td2:nth-of-type(5) small, .td1:nth-of-type(4) small, .td2:nth-of-type(4) small { visibility: visible !important; } How to speed up and improve the layout look For a better display, it's recommended you lower the number of list columns to better accommodate the layout table: https://myanimelist.net/editprofile.php?go=listpreferences You can also start the layout on Currently Watching or Reading rather than a larger category (go to Default Status Selected) to help speed up the load time. Save when done. To further speed up the loading time of the list, you can delete any malscraper imports (these are for preview pics) and then use part B from this page: https://myanimelist.net/forum/?topicid=439897 Paste the correct malscraper import from part B into your code (use the "more" import). You also need to switch the username SpaceCowboy with your own username. This can significantly speed up your lists. If you are using this design on manga lists, you can add the matching manga import from part B and do the same. Switch DateYutaka with your own username. Thanks to Valerio_Lyndon for repairing this design! |
Shishio-kunMay 24, 2023 4:04 PM
Jan 5, 2015 6:44 AM
#3
lshuu said: the css for the red one is broken How so? Everything works normal for me. If you click either pic it takes me to the same code which is the blue, and you can adjust it with the instructions in the topic still to make it Akame. If its not clear or confusing to change the theme, I'll try to make it simpler by posted two separate layouts. |
Jan 30, 2015 5:37 PM
#4
How can I make the anime names/episode counts font bigger? |
Feb 16, 2015 2:36 PM
#5
I've used both, one for animelist and the other for mangálist, but, in the mangálist, the link toanimelist leads to mangálist again. (How) can I change it? |
Feb 17, 2015 6:07 AM
#6
Aldojunior said: I've used both, one for animelist and the other for mangálist, but, in the mangálist, the link toanimelist leads to mangálist again. (How) can I change it? Well, you should edit the top menu section. Replace the code you have by this: @import url(http://fonts.googleapis.com/css?family=IM+Fell+English+SC|Architects+Daughter); @import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Akame/Animations.css); @import url(https://dl.dropboxusercontent.com/u/193349829/Akame_TopMenu.css); @import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Akame/CategoryMenu.css); @import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/covers_more.css); @import url(https://dl.dropboxusercontent.com/u/193349829/Akame_Akame.css); /* HOW TO USE Use and COMPLETE this simple tutorial if you never installed CSS, it only takes a few minutes: http://myanimelist.net/forum/?topicid=200320 When you're done with the tutorial and can see the starter layout on your list, copy and paste this entire page of codes (including this part and the codes above and below) to your CSS edit box (the box titled Edit Advanced CSS File) replacing any other codes in the box. Save with the blue button at the bottom. It will put this premade layout on your list instead of the starter one from the tutorial! If the layout looks weird on your list after installing, you can try to alter your settings here. Common solutions are to set Default Status Settings to Watching or All Anime, check or uncheck tags (make sure you save afterwards): http://myanimelist.net/editprofile.php?go=listpreferences If your list still has problems you can ask us about it here, or other questions: http://myanimelist.net/forum/?topicid=200323 And you'll find further ways to customize your list here: http://myanimelist.net/forum/?topicid=419405 */ a { text-decoration: none; } body { font-family: 'IM Fell English SC', serif; font-size: 13px; letter-spacing: .5px; background-color: #000000; } /* LIST SETTINGS */ #list_surround { position: relative; left: 100%; margin-left: -890px; top: 0; width: 600px; padding-top: 50px; } .table_header span { display: none; } .table_header:nth-child(2) { text-align: left; } .td1, .td2 { padding: 6px 0 3px; line-height: 13px; vertical-align: top; transition: background-color .4s ease; -webkit-transition: background-color .4s ease; } .animetitle, .animetitle + small { display:-cell; } .animetitle span { display: inline-block; } .animetitle + small:before { content: ' '; white-space: pre-wrap; } .animetitle + small { visibility: visible !important; color: #FFFFFF; font-size: 11px; text-transform: lowercase; letter-spacing: .5px; } #list_surround small { visibility: hidden; } #list_surround small a:first-of-type { visibility: hidden; position: absolute; margin-left: -8px; font-size: 11px; } a[title="View More Information"] { display: none; } #list_surround tr:hover small, #list_surround tr:hover small a { visibility: visible; } td[class^='td']:nth-child(2) { text-align: left; } /* LIST COLOR */ .table_header, .td1, .td2 { text-align: center; background-color: rgba(0, 0, 0, .5); } tr:hover td[class^='td']:first-child:before { position: absolute; display: inline-block; content: ''; margin-left: -39px; margin-top: -5px; width: 25px; height: 25px; animation: Rotate .5s infinite alternate; -webkit-animation: Rotate .5s infinite alternate; } tr:hover td[class^='td']:not(.borderRBL) { background-color: rgba(0, 0, 0, 1); } /* LIST FONT COLOR */ .table_headerLink { font-family: 'Architects Daughter', cursive; line-height: 24px; font-size: 10px; color: #000000 !important; font-weight: normal; text-transform: uppercase; } .table_headerLink strong { font-weight: normal !important; } /* BORDER COLORS */ td[class^='td']:first-child { border-left: 2px solid #000000 !important; } .table_header { box-shadow: 1px 0 0 #000000; } /* HEADERS */ .header_title { pointer-events: none; display: inline-block; margin-left: -25px; height: 189px; } /* Headers pics */ .header_cw span, .header_completed span, .header_onhold span, .header_dropped span, .header_ptw span { position: absolute; display: inline-block; width: 650px; height: 250px; font-size: 0; background-repeat: no-repeat; z-index: -1; } .header_cw span { background-position: center 0; } .header_completed span { background-position: center -250px; } .header_onhold span { background-position: center -500px; } .header_dropped span { background-position: center -750px; } .header_ptw span { background-position: center -1000px; } /* BACKGROUNDS */ .status_selected { background-position: center, center; } .category_totals, #grand_totals { padding: 5px; text-align: center; font-size: 12px; color: #FFFFFF; background-color: rgb(0, 0, 0); box-shadow: 1px 0 0 #000000; text-transform: lowercase; } #grand_totals { position: absolute; display: block; margin-top: -20px; width: 590px; } #copyright, #copyright a { font-family: 'Architects Daughter', cursive; color: #FFFFFF; } #copyright { position: fixed; display: block; right: 5px; bottom: 10px; width: 250px; font-size: 12px; text-align: right !important; } #copyright a { padding-right: 2px; font-size: 14px; } #copyright:after { diplay: block; content: "Designed by Hahaido"; font-size: 12px; } .hide:before { display: block; content: ''; margin-left: -15px; margin-top: -73px; width: 212px; height: 300px; background: url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Akame/Images/covers_bg.png) no-repeat; } .hide { visibility: hidden; position: fixed !important; display: block !important; right: 50px; top: -300px; width: 182px; height: 178px; padding: 73px 15px 50px; background-repeat: no-repeat; background-position: center center; background-clip: content-box; background-size: 100% 100%; transform: rotate(5deg); -webkit-transform: rotate(5deg); transition: top .5s linear; -webkit-transition: top .5s linear; z-index: 5; } :hover + .hide { top: 0; visibility: visible; animation: Dagger 1.5s ease-in-out .4s infinite alternate; -webkit-animation: Dagger 1.5s ease-in-out .4s infinite alternate; } @-moz-document url-prefix() { #list_surround small a:last-of-type:before { line-height: 6px; } .td1, .td2 { line-height: 14px; padding: 4px 0; } } |
Feb 20, 2015 5:04 AM
#8
Feb 21, 2015 2:40 AM
#10
Hawk144 said: Cool. Could you give me the code? Its here on his site: https://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Akame/Style.css After installing, you have to remove the /* MEIN */ from one of the top lines to "turn on" the Mein theme. Great work Hahaido! Next week I'll add a pic preview and simplified code for this version to the top post later as with the others (can't now cuz super busy till then!). |
Mar 1, 2015 3:50 PM
#11
I would like to know if it was possible to replace the "Watching" picture to a "Reading" picture for the mangalist ? https://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Akame/Images/headers_bg.png It would be great! :3 Thank's |
Mar 1, 2015 9:44 PM
#12
Mar 3, 2015 11:22 AM
#14
Nadeko_ said: Aldojunior said: I've used both, one for animelist and the other for mangálist, but, in the mangálist, the link toanimelist leads to mangálist again. (How) can I change it? Well, you should edit the top menu section. Replace the code you have by this: @import url(http://fonts.googleapis.com/css?family=IM+Fell+English+SC|Architects+Daughter); @import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Akame/Animations.css); @import url(https://dl.dropboxusercontent.com/u/193349829/Akame_TopMenu.css); @import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Akame/CategoryMenu.css); @import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/covers_more.css); @import url(https://dl.dropboxusercontent.com/u/193349829/Akame_Akame.css); /* HOW TO USE Use and COMPLETE this simple tutorial if you never installed CSS, it only takes a few minutes: http://myanimelist.net/forum/?topicid=200320 When you're done with the tutorial and can see the starter layout on your list, copy and paste this entire page of codes (including this part and the codes above and below) to your CSS edit box (the box titled Edit Advanced CSS File) replacing any other codes in the box. Save with the blue button at the bottom. It will put this premade layout on your list instead of the starter one from the tutorial! If the layout looks weird on your list after installing, you can try to alter your settings here. Common solutions are to set Default Status Settings to Watching or All Anime, check or uncheck tags (make sure you save afterwards): http://myanimelist.net/editprofile.php?go=listpreferences If your list still has problems you can ask us about it here, or other questions: http://myanimelist.net/forum/?topicid=200323 And you'll find further ways to customize your list here: http://myanimelist.net/forum/?topicid=419405 */ a { text-decoration: none; } body { font-family: 'IM Fell English SC', serif; font-size: 13px; letter-spacing: .5px; background-color: #000000; } /* LIST SETTINGS */ #list_surround { position: relative; left: 100%; margin-left: -890px; top: 0; width: 600px; padding-top: 50px; } .table_header span { display: none; } .table_header:nth-child(2) { text-align: left; } .td1, .td2 { padding: 6px 0 3px; line-height: 13px; vertical-align: top; transition: background-color .4s ease; -webkit-transition: background-color .4s ease; } .animetitle, .animetitle + small { display:-cell; } .animetitle span { display: inline-block; } .animetitle + small:before { content: ' '; white-space: pre-wrap; } .animetitle + small { visibility: visible !important; color: #FFFFFF; font-size: 11px; text-transform: lowercase; letter-spacing: .5px; } #list_surround small { visibility: hidden; } #list_surround small a:first-of-type { visibility: hidden; position: absolute; margin-left: -8px; font-size: 11px; } a[title="View More Information"] { display: none; } #list_surround tr:hover small, #list_surround tr:hover small a { visibility: visible; } td[class^='td']:nth-child(2) { text-align: left; } /* LIST COLOR */ .table_header, .td1, .td2 { text-align: center; background-color: rgba(0, 0, 0, .5); } tr:hover td[class^='td']:first-child:before { position: absolute; display: inline-block; content: ''; margin-left: -39px; margin-top: -5px; width: 25px; height: 25px; animation: Rotate .5s infinite alternate; -webkit-animation: Rotate .5s infinite alternate; } tr:hover td[class^='td']:not(.borderRBL) { background-color: rgba(0, 0, 0, 1); } /* LIST FONT COLOR */ .table_headerLink { font-family: 'Architects Daughter', cursive; line-height: 24px; font-size: 10px; color: #000000 !important; font-weight: normal; text-transform: uppercase; } .table_headerLink strong { font-weight: normal !important; } /* BORDER COLORS */ td[class^='td']:first-child { border-left: 2px solid #000000 !important; } .table_header { box-shadow: 1px 0 0 #000000; } /* HEADERS */ .header_title { pointer-events: none; display: inline-block; margin-left: -25px; height: 189px; } /* Headers pics */ .header_cw span, .header_completed span, .header_onhold span, .header_dropped span, .header_ptw span { position: absolute; display: inline-block; width: 650px; height: 250px; font-size: 0; background-repeat: no-repeat; z-index: -1; } .header_cw span { background-position: center 0; } .header_completed span { background-position: center -250px; } .header_onhold span { background-position: center -500px; } .header_dropped span { background-position: center -750px; } .header_ptw span { background-position: center -1000px; } /* BACKGROUNDS */ .status_selected { background-position: center, center; } .category_totals, #grand_totals { padding: 5px; text-align: center; font-size: 12px; color: #FFFFFF; background-color: rgb(0, 0, 0); box-shadow: 1px 0 0 #000000; text-transform: lowercase; } #grand_totals { position: absolute; display: block; margin-top: -20px; width: 590px; } #copyright, #copyright a { font-family: 'Architects Daughter', cursive; color: #FFFFFF; } #copyright { position: fixed; display: block; right: 5px; bottom: 10px; width: 250px; font-size: 12px; text-align: right !important; } #copyright a { padding-right: 2px; font-size: 14px; } #copyright:after { diplay: block; content: "Designed by Hahaido"; font-size: 12px; } .hide:before { display: block; content: ''; margin-left: -15px; margin-top: -73px; width: 212px; height: 300px; background: url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Akame/Images/covers_bg.png) no-repeat; } .hide { visibility: hidden; position: fixed !important; display: block !important; right: 50px; top: -300px; width: 182px; height: 178px; padding: 73px 15px 50px; background-repeat: no-repeat; background-position: center center; background-clip: content-box; background-size: 100% 100%; transform: rotate(5deg); -webkit-transform: rotate(5deg); transition: top .5s linear; -webkit-transition: top .5s linear; z-index: 5; } :hover + .hide { top: 0; visibility: visible; animation: Dagger 1.5s ease-in-out .4s infinite alternate; -webkit-animation: Dagger 1.5s ease-in-out .4s infinite alternate; } @-moz-document url-prefix() { #list_surround small a:last-of-type:before { line-height: 6px; } .td1, .td2 { line-height: 14px; padding: 4px 0; } } Thanks, I'm really stupid about these things ^^ |
Mar 3, 2015 1:20 PM
#15
Aldojunior said: Thanks, I'm really stupid about these things ^^ No problem! You're welcome (: |
Apr 7, 2015 1:47 AM
#16
hi@all, thx for the layout but i dont find the buttons Completed, Watching or something else. Did i missed something ? o.o I'm really stupid about these things Hope someone can help me ^^' (sry my english is very bad ... ) |
Apr 9, 2015 10:33 AM
#17
The anime list with Mine that Hohaido made wont work for me anymore can anyone help me? |
Apr 9, 2015 2:22 PM
#18
Hawk144 said: The anime list with Mine that Hohaido made wont work for me anymore can anyone help me? And The Anime List With Akame Won't Work For Me Anymore Can Anyone Help Me? |
Apr 29, 2015 3:05 AM
#19
Nadeko_ said: Aldojunior said: I've used both, one for animelist and the other for mangálist, but, in the mangálist, the link toanimelist leads to mangálist again. (How) can I change it? Well, you should edit the top menu section. Replace the code you have by this: @import url(http://fonts.googleapis.com/css?family=IM+Fell+English+SC|Architects+Daughter); @import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Akame/Animations.css); @import url(https://dl.dropboxusercontent.com/u/193349829/Akame_TopMenu.css); @import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Akame/CategoryMenu.css); @import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/covers_more.css); @import url(https://dl.dropboxusercontent.com/u/193349829/Akame_Akame.css); /* HOW TO USE Use and COMPLETE this simple tutorial if you never installed CSS, it only takes a few minutes: http://myanimelist.net/forum/?topicid=200320 When you're done with the tutorial and can see the starter layout on your list, copy and paste this entire page of codes (including this part and the codes above and below) to your CSS edit box (the box titled Edit Advanced CSS File) replacing any other codes in the box. Save with the blue button at the bottom. It will put this premade layout on your list instead of the starter one from the tutorial! If the layout looks weird on your list after installing, you can try to alter your settings here. Common solutions are to set Default Status Settings to Watching or All Anime, check or uncheck tags (make sure you save afterwards): http://myanimelist.net/editprofile.php?go=listpreferences If your list still has problems you can ask us about it here, or other questions: http://myanimelist.net/forum/?topicid=200323 And you'll find further ways to customize your list here: http://myanimelist.net/forum/?topicid=419405 */ a { text-decoration: none; } body { font-family: 'IM Fell English SC', serif; font-size: 13px; letter-spacing: .5px; background-color: #000000; } /* LIST SETTINGS */ #list_surround { position: relative; left: 100%; margin-left: -890px; top: 0; width: 600px; padding-top: 50px; } .table_header span { display: none; } .table_header:nth-child(2) { text-align: left; } .td1, .td2 { padding: 6px 0 3px; line-height: 13px; vertical-align: top; transition: background-color .4s ease; -webkit-transition: background-color .4s ease; } .animetitle, .animetitle + small { display:-cell; } .animetitle span { display: inline-block; } .animetitle + small:before { content: ' '; white-space: pre-wrap; } .animetitle + small { visibility: visible !important; color: #FFFFFF; font-size: 11px; text-transform: lowercase; letter-spacing: .5px; } #list_surround small { visibility: hidden; } #list_surround small a:first-of-type { visibility: hidden; position: absolute; margin-left: -8px; font-size: 11px; } a[title="View More Information"] { display: none; } #list_surround tr:hover small, #list_surround tr:hover small a { visibility: visible; } td[class^='td']:nth-child(2) { text-align: left; } /* LIST COLOR */ .table_header, .td1, .td2 { text-align: center; background-color: rgba(0, 0, 0, .5); } tr:hover td[class^='td']:first-child:before { position: absolute; display: inline-block; content: ''; margin-left: -39px; margin-top: -5px; width: 25px; height: 25px; animation: Rotate .5s infinite alternate; -webkit-animation: Rotate .5s infinite alternate; } tr:hover td[class^='td']:not(.borderRBL) { background-color: rgba(0, 0, 0, 1); } /* LIST FONT COLOR */ .table_headerLink { font-family: 'Architects Daughter', cursive; line-height: 24px; font-size: 10px; color: #000000 !important; font-weight: normal; text-transform: uppercase; } .table_headerLink strong { font-weight: normal !important; } /* BORDER COLORS */ td[class^='td']:first-child { border-left: 2px solid #000000 !important; } .table_header { box-shadow: 1px 0 0 #000000; } /* HEADERS */ .header_title { pointer-events: none; display: inline-block; margin-left: -25px; height: 189px; } /* Headers pics */ .header_cw span, .header_completed span, .header_onhold span, .header_dropped span, .header_ptw span { position: absolute; display: inline-block; width: 650px; height: 250px; font-size: 0; background-repeat: no-repeat; z-index: -1; } .header_cw span { background-position: center 0; } .header_completed span { background-position: center -250px; } .header_onhold span { background-position: center -500px; } .header_dropped span { background-position: center -750px; } .header_ptw span { background-position: center -1000px; } /* BACKGROUNDS */ .status_selected { background-position: center, center; } .category_totals, #grand_totals { padding: 5px; text-align: center; font-size: 12px; color: #FFFFFF; background-color: rgb(0, 0, 0); box-shadow: 1px 0 0 #000000; text-transform: lowercase; } #grand_totals { position: absolute; display: block; margin-top: -20px; width: 590px; } #copyright, #copyright a { font-family: 'Architects Daughter', cursive; color: #FFFFFF; } #copyright { position: fixed; display: block; right: 5px; bottom: 10px; width: 250px; font-size: 12px; text-align: right !important; } #copyright a { padding-right: 2px; font-size: 14px; } #copyright:after { diplay: block; content: "Designed by Hahaido"; font-size: 12px; } .hide:before { display: block; content: ''; margin-left: -15px; margin-top: -73px; width: 212px; height: 300px; background: url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Akame/Images/covers_bg.png) no-repeat; } .hide { visibility: hidden; position: fixed !important; display: block !important; right: 50px; top: -300px; width: 182px; height: 178px; padding: 73px 15px 50px; background-repeat: no-repeat; background-position: center center; background-clip: content-box; background-size: 100% 100%; transform: rotate(5deg); -webkit-transform: rotate(5deg); transition: top .5s linear; -webkit-transition: top .5s linear; z-index: 5; } :hover + .hide { top: 0; visibility: visible; animation: Dagger 1.5s ease-in-out .4s infinite alternate; -webkit-animation: Dagger 1.5s ease-in-out .4s infinite alternate; } @-moz-document url-prefix() { #list_surround small a:last-of-type:before { line-height: 6px; } .td1, .td2 { line-height: 14px; padding: 4px 0; } } Would there be a same kind of fix for the Esdese theme?. I can live with going to animelist through my profile though so it's not serious :D Also for the code that has all 3 themes: how ccan you change between themes? Mine theme comes automatically when installed, but I'm an Esdese fan, which is why I use the separate Esdese code...just wondering in case I would like to change the theme in future. Also how can I remove that the manga-series avatar dropping from the right side...some series they won't show up at all and when they do show up there is completely wrong image so I would just like to remove that quality |
SipiApr 29, 2015 3:12 AM
Aug 17, 2015 5:33 AM
#20
ehm im confused here .... my list doesnt look like the picture of what its supposed to look like... |
Sep 10, 2015 10:56 AM
#21
Hahaido said: Usually don't take such requests but I like Mein You don't happen to like Chelsea too do u :P? As for the manga version the code above has the character missing. Heres a working set of codes for the manga. @import url(http://fonts.googleapis.com/css?family=IM+Fell+English+SC|Architects+Daughter); @import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Akame/Animations.css); @import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Akame/TopMenu.css); @import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Akame/CategoryMenu.css); @import url(https://dl.dropboxusercontent.com/s/aunymjyr9cqdxjl/manga.css); /* THEMES */ @import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Akame/Akame.css); /* HOW TO USE Use and COMPLETE this simple tutorial if you never installed CSS, it only takes a few minutes: http://myanimelist.net/forum/?topicid=200320 When you're done with the tutorial and can see the starter layout on your list, copy and paste this entire page of codes (including this part and the codes above and below) to your CSS edit box (the box titled Edit Advanced CSS File) replacing any other codes in the box. Save with the blue button at the bottom. It will put this premade layout on your list instead of the starter one from the tutorial! If the layout looks weird on your list after installing, you can try to alter your settings here. Common solutions are to set Default Status Settings to Watching or All Anime, check or uncheck tags (make sure you save afterwards): http://myanimelist.net/editprofile.php?go=listpreferences If your list still has problems you can ask us about it here, or other questions: http://myanimelist.net/forum/?topicid=200323 And you'll find further ways to customize your list here: http://myanimelist.net/forum/?topicid=419405 */ /* TOP MENU BUTTONS */ /* FOR ANIME LIST */ #mal_cs_links div:last-of-type a:first-of-type { display: none; } /* DISABLE ANIMELIST BUTTON */ /* FOR MANGA LIST */ /* #mal_cs_links div:last-of-type a:last-of-type { display: none; } */ /* DISABLE MANGALIST BUTTON */ a { text-decoration: none; } body { font-family: 'IM Fell English SC', serif; font-size: 13px; letter-spacing: .5px; background-color: #000000; } /* LIST SETTINGS */ #list_surround { position: relative; left: 100%; margin-left: -890px; top: 0; width: 600px; padding-top: 50px; } .table_header span { display: none; } .table_header:nth-child(2) { text-align: left; } .td1, .td2 { padding: 6px 0 3px; line-height: 13px; vertical-align: top; transition: background-color .4s ease; -webkit-transition: background-color .4s ease; } .animetitle, .animetitle + small { display:-cell; } .animetitle + small:before { content: ' '; white-space: pre-wrap; } .animetitle + small { visibility: visible !important; color: #FFFFFF; font-size: 11px; text-transform: lowercase; letter-spacing: .5px; } #list_surround small { visibility: hidden; } #list_surround small a:first-of-type { visibility: hidden; position: absolute; margin-left: -8px; font-size: 11px; } a[title="View More Information"] { display: none; } #list_surround tr:hover small, #list_surround tr:hover small a { visibility: visible; } td[class^='td']:nth-child(2) { text-align: left; } /* LIST COLOR */ .table_header, .td1, .td2 { text-align: center; background-color: rgba(0, 0, 0, .5); } tr:hover td[class^='td']:first-child:before { position: absolute; display: inline-block; content: ''; margin-left: -39px; margin-top: -5px; width: 25px; height: 25px; animation: Rotate .5s infinite alternate; -webkit-animation: Rotate .5s infinite alternate; } tr:hover td[class^='td']:not(.borderRBL) { background-color: rgba(0, 0, 0, 1); } /* LIST FONT COLOR */ .table_headerLink { font-family: 'Architects Daughter', cursive; line-height: 24px; font-size: 10px; color: #000000 !important; font-weight: normal; text-transform: uppercase; } .table_headerLink strong { font-weight: normal !important; } /* BORDER COLORS */ td[class^='td']:first-child { border-left: 2px solid #000000 !important; } .table_header { box-shadow: 1px 0 0 #000000; } /* HEADERS */ .header_title { pointer-events: none; display: inline-block; margin-left: -25px; height: 189px; } /* Headers pics */ .header_cw span, .header_completed span, .header_onhold span, .header_dropped span, .header_ptw span { position: absolute; display: inline-block; width: 650px; height: 250px; font-size: 0; background-repeat: no-repeat; z-index: -1; } .header_cw span { background-position: center 0; } .header_completed span { background-position: center -250px; } .header_onhold span { background-position: center -500px; } .header_dropped span { background-position: center -750px; } .header_ptw span { background-position: center -1000px; } /* BACKGROUNDS */ .status_selected { background-position: center, center; } .category_totals, #grand_totals { padding: 5px; text-align: center; font-size: 12px; color: #FFFFFF; background-color: rgb(0, 0, 0); box-shadow: 1px 0 0 #000000; text-transform: lowercase; } #grand_totals { position: absolute; display: block; margin-top: -20px; width: 590px; } #copyright, #copyright a { font-family: 'Architects Daughter', cursive; color: #FFFFFF; } #copyright { position: fixed; display: block; right: 5px; bottom: 10px; width: 280px; font-size: 12px; text-align: right !important; } #copyright a { padding-right: 2px; font-size: 14px; } #copyright:after { diplay: block; content: "Designed by Hahaido"; font-size: 12px; } .hide:before { display: block; content: ''; margin-left: -15px; margin-top: -73px; width: 212px; height: 300px; background: url(http://i.imgur.com/m9LzvFC.png) no-repeat; } .hide { visibility: hidden; position: fixed !important; display: block !important; right: 50px; top: -300px; width: 182px; height: 178px; padding: 73px 15px 50px; background-repeat: no-repeat; background-position: center center; background-clip: content-box; background-size: 100% 100%; transform: rotate(5deg); -webkit-transform: rotate(5deg); transition: top .5s linear; -webkit-transition: top .5s linear; z-index: 5; } :hover + .hide { top: 0; visibility: visible; animation: Dagger 1.5s ease-in-out .4s infinite alternate; -webkit-animation: Dagger 1.5s ease-in-out .4s infinite alternate; } @-moz-document url-prefix() { #list_surround small a:last-of-type:before { line-height: 6px; } .td1, .td2 { line-height: 14px; padding: 4px 0; } } |
Sep 11, 2015 8:20 AM
#22
Sep 11, 2015 3:14 PM
#23
Looks great! Tyvm for spending your time on making it! I might of used one of these for a less spoiler for people who haven't seen the anime though. or Just opinion, not asking you to change it :) |
Dead-EnddSep 11, 2015 4:09 PM
Oct 1, 2015 7:17 AM
#25
Is the wanted poster image broken? I checked on chrome and ff and it's not loading? For me at least. :( |
Oct 18, 2015 8:23 PM
#26
Xatzu said: Is the wanted poster image broken? I checked on chrome and ff and it's not loading? For me at least. :( Same here. |
I envy your delusion; I wish I could live in it |
Oct 24, 2015 7:54 AM
#27
Oct 24, 2015 9:55 AM
#28
It works perfectly (click 'try' to get a preview) http://hlcss.ml/#Layout30 |
Oct 24, 2015 10:28 AM
#29
Oct 25, 2015 4:16 PM
#30
Hello! I tried using the Esdeath Theme, however it only got a black background for me.. any suggestions? |
Oct 25, 2015 9:17 PM
#31
You haven't read the latest news Look here https://twitter.com/Xaxaido/status/657805767450447872 and here - https://twitter.com/Xaxaido/status/658179297597890560 |
Oct 25, 2015 10:50 PM
#32
Hahaido said: You haven't read the latest news Look here https://twitter.com/Xaxaido/status/657805767450447872 and here - https://twitter.com/Xaxaido/status/658179297597890560 oh.. at first I thought I wouldn't be able to do it since I know shit about css, but when I realized I just have to remove /* I felt a little dumb. And I couldn't find that twitter anywhere in this thread earlier, sorry. Thank you! I love it! |
Dec 26, 2015 10:36 PM
#33
lots of updates and new image previews, should be easier to change the themes thru the OP now |
Jan 3, 2016 4:29 PM
#34
I can't find an working mangalist version of this T.T. I would love if someone can help me a bit with this. |
Jan 30, 2016 3:26 AM
#35
For some reason the menu button is broken (since a week ago?). Tried it on different computers and browsers and always have the same issue, the weird thing is if you press try on Hahaido's website it works just fine... |
May 7, 2016 1:54 PM
#38
And once again it's broken, was working fine until yesterday and I didn't changed any single thing. |
May 7, 2016 8:41 PM
#39
@MuFeR the question isn't actually to me. My codes work fine. The codes you're using are not mine, I don't host them. You could use codes from here http://hlcss.ml/#Layout30 until others will be fixed |
May 8, 2016 8:29 AM
#40
Hahaido said: @MuFeR the question isn't actually to me. My codes work fine. The codes you're using are not mine, I don't host them. You could use codes from here http://hlcss.ml/#Layout30 until others will be fixed I removed the extra parts at the end which just added the images next to the titles (which tbh I don't think was the issue) and now the code is same as yours. The imports from dropbox are the exact same files as yours which I had downloaded and reupload in my dropbox account just because yours was down for a couple days. As I said I didn't change anything and it suddenly stopped working, yours is working but I seriously can't figure out why because now the code is exactly the same minus the fact that I import the css files from my account. Edit: Actually using my code and and your imports also works so for some reason even though I didn't touch the files on my dropbox they don't work... |
MuFeRMay 8, 2016 8:35 AM
May 8, 2016 8:34 AM
#41
May 8, 2016 8:37 AM
#42
Hahaido said: @MuFeR the reason is absolutely clear. Your import links are just not working. Try to go through one of them and you'll see the error Yeah you're right I didn't actually click the link but manually went inside the folder and opened them which obviously works. That's the same issue I had with your links that made me upload them in my account in the first place. Anyway sorry for the trouble. |
Aug 29, 2016 4:12 AM
#43
can you check again your css? your theme has a problem =(( |
Sep 1, 2016 12:38 PM
#44
Hey, Your themes are amazing, but I just noticed that the Esdeath one is bugged. It seems like the background picture isn't on dropbox anymore :/ Could you check please, and eventually reupload it. Thank You ! =) |
Sep 1, 2016 2:38 PM
#45
xLaacx said: Hey, Your themes are amazing, but I just noticed that the Esdeath one is bugged. It seems like the background picture isn't on dropbox anymore :/ Could you check please, and eventually reupload it. Thank You ! =) It works just fine for me. |
Sep 2, 2016 9:10 AM
#46
Oh, Thank you for your answer, it helped me understand that it was my fault. And it seems like I used to use a wrong code (that used to work aswell), but I fixed it ! I apologize that I had to bother you for that =) |
Mar 15, 2017 4:07 PM
#47
Getting dead dropbox links, dunno if it is just me. Was working fine for the 6 months or so, great skin overall though. |
Apr 22, 2017 5:33 AM
#48
@Kydra I can give you my own code of the list that works but I've slightly modified it so that the covers appear inside the list to the left of the titles (small covers but zoomed when you mouseover) instead of the swinging panel in the top right. You can check it out on my current list. |
Apr 22, 2017 7:17 AM
#49
MuFeR said: @Kydra I can give you my own code of the list that works but I've slightly modified it so that the covers appear inside the list to the left of the titles (small covers but zoomed when you mouseover) instead of the swinging panel in the top right. You can check it out on my current list. I would appreciate that ^ |
ScarlettttApr 23, 2017 2:15 AM
May 5, 2017 2:33 PM
#50
MuFeR said: @Kydra I can give you my own code of the list that works but I've slightly modified it so that the covers appear inside the list to the left of the titles (small covers but zoomed when you mouseover) instead of the swinging panel in the top right. You can check it out on my current list. I want it too if you can link me please :X |
Signature removed. Please follow the signature rules, as defined in the Site & Forum Guidelines. |
More topics from this board
» [CSS - MODERN] Add side renders to list layouts (including for each category!)Shishio-kun - May 15, 2021 |
2 |
by karmashizzle
»»
Yesterday, 1:57 PM |
|
» [HALL OF LEGENDS] Hacker09, MyAnimeList's #1 coder!Shishio-kun - Dec 10, 2023 |
7 |
by orangc
»»
Apr 29, 8:02 AM |
|
Sticky: » 💚 [REPAIR STICKY] Repair/speed up a design + Request a layout fixShishio-kun - Nov 17, 2023 |
1 |
by Zelathis
»»
Apr 29, 7:49 AM |
|
» [CSS - MODERN] ⭐️ All ways to customize individual anime and individual list rows (mark your favorites!)Shishio-kun - Sep 4, 2020 |
8 |
by takkun_
»»
Apr 28, 9:25 PM |
|
» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )Shishio-kun - Apr 15, 2010 |
7818 |
by takkun_
»»
Apr 28, 4:02 PM |