New
Jul 24, 2015 5:42 AM
#201
| A Better template for Shokugeki no soma (I am currently using this one but you can still use it) Click here for the template Code @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); body { background-attachment: fixed; background-clip: border-box; background-color: black; background-image: url(http://img11.deviantart.net/8f46/i/2015/125/a/f/yukihira_wallpaper_by_dinocojv-d8s8nt1.jpg); background-position: right 5%; background-repeat: no-repeat; background-size: cover; } #inlineContent { background: url("") no-repeat scroll 0 -26% transparent; display: inline-block !important; height: 1200px !important; left: 0 !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 1200px !important; z-index: -1 !important; } #list_surround { background: url("NOT IN USE") no-repeat scroll 50% 1px transparent; font-size: 81.25%; line-height: 1; margin: 0 auto; padding-bottom: 10px; padding-top: 300px; width: 75% !important; } body { color: white; font-family: arial; } a { -moz-transition: all 0.25s ease-in-out 0s; color: white; text-decoration: none; text-shadow: none; } a:hover { color: white; text-shadow: 0 1px rgba(255, 255, 255, 0.15); } .status_not_selected, .status_selected { border: 0 none !important; height: auto !important; padding: 0 8px; text-align: center !important; width: 16.667% !important; } .status_not_selected a, .status_selected a { background-color: rgb(67, 110, 238); border-color: rgba(48, 44, 64, 0.5); border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; display: block !important; font-weight: bold; padding: 8px; text-shadow: 0 1px rgba(0, 0, 0, 0.1); } .status_selected a { background-color: rgba(180, 32, 48, 0.9); border-color: rgba(148, 0, 24, 0.5); } .status_not_selected a:hover { background-color: rgba(0, 134, 152, 0.6); border-color: rgba(0, 134, 152, 0.6); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.3); } .status_selected a:hover { background-color: rgba(225, 2, 8, 0.6); border-color: rgba(164, 16, 32, 0.6); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.3); } .table_header { background-color: rgba(53, 51, 55, 0.9); } .table_header:first-of-type { border-radius: 3px 0 0 0; } .table_header:nth-of-type(2) { text-align: left; } .table_header:last-of-type { border-radius: 0 3px 0 0; } .td1 { -moz-transition: all 0.25s ease-in-out 0s; background-color: rgba(100, 97, 105, 0.6); } .td2 { -moz-transition: all 0.25s ease-in-out 0s; background-color: rgba(111, 108, 116, 0.5); } tr:hover [class^="td"] { background-color: rgba(180, 32, 48, 0.6); } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } noindex:-moz-any-link, tr:hover td.td1, tr:hover td.td2 { font-size: 15px; } .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border: 0 none; padding: 4px; text-align: center; vertical-align: middle; } .table_header, .td1, .td2, .category_totals { line-height: 30px; } .borderRBL { line-height: normal !important; } [cellspacing="0"] { line-height: 17px; } .category_totals { -moz-transition: all 0.25s ease-in-out 0s; background-color: rgba(72, 64, 87, 0); border-radius: 0 0 3px 3px; color: rgba(51, 51, 51, 0); text-align: center; } .category_totals:hover { background-color: rgba(100, 97, 105, 0.6); color: #EEEEEE; } [class^="header_"] * { font-size: 19px; height: 60px; line-height: 24px; padding-bottom: 4px; text-align: right; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; color: white; display: inline-block; font-style: italic; height: auto; padding: 0 8px 0 0; } #grand_totals { background-color: rgba(100, 97, 105, 0.6); border: 0 none; border-radius: 3px 3px 3px 3px; color: #EEEEEE; line-height: 20px; min-height: 20px; padding: 8px; text-align: center; vertical-align: middle; } #copyright { background-color: transparent; border-radius: 3px 3px 3px 3px; color: #FFFFFF; line-height: 17px; margin-top: 10px; padding: 8px; text-align: center; } /* THUMBNAIL SETTINGS Settings for the thumbnails of covers seen on your list. Height and width control the size, while margin-left and top can be added or taken away to change the position. Change the border size, type, or color, with the first border code.*/ .hide { height:30px; width:35px; margin-left:39px; margin-top:-40px; border:1px solid transparent; background-color:transparent; background-position:50% 50%; background-repeat:no-repeat no-repeat; background-size:110% 180%; border-bottom-left-radius:2px; border-bottom-right-radius:2px; border-top-left-radius:2px; border-top-right-radius:2px; display:inline-block !important; position: absolute; } /*THUMBNAIL HOVER SETTING This is the setting for the cover when you point to a thumbnail. Move the cover's position with the margin codes. Change its size with the padding codes. */ .hide:hover { margin-left:-140px; padding-right:150px; padding-top:220px !important; background-color:transparent; background-repeat:no-repeat no-repeat; background-size:105%; border-bottom-left-radius:8px; border-bottom-right-radius:8px; border-top-left-radius:8px; border-top-right-radius:8px; box-shadow:rgba(63, 52, 60, 0.55) 0 0 8px 8px; position:absolute; z-index:1; } /*THUMBNAIL HOVER FLICKER FIX If you reposition your covers, and notice flickering, color this red, then reload your layout. Notice where the red bar appears when you point to your covers. Move that box with this code, over the parts where you point and see flickering. Then change it back to transparent! */ .hide:hover:after { background: transparent; content: " "; height: 55px; left: 0; position: absolute; top: -3px; width: 215px; z-index: 20; } /*ANIMATION FOR ZOOM Change the timing of how long it takes for it zoom out here! Its set to .25 seconds by default. */ * { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; } /*ROW WIDTH AND SPACING This will increase the height of your rows and move the anime title to the left. It might look funny on some layouts so you'll have to adjust it or ask for help! Height is the height, padding left is the space the anime title moves from the left. */ .td1:nth-of-type(2), .td2:nth-of-type(2) { height: 40px; padding-left: 42px; } /* Anime List only CURRENTLY WATCHING HEADER This is the header above currently watching/reading. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_cw { background-image:url(http://i.imgur.com/Fy2qvc4.png); height: 50px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* COMPLETED HEADER This is the header above your anime/manga that's completed. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_completed { background-image:url(http://i.imgur.com/J3tNjt7.png); height: 50px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* ON-HOLD HEADER This is the header above your animes/mangas on-hold. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_onhold { background-image:url(http://i.imgur.com/inUl2U0.png); height: 50px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* DROPPED HEADER This is the header above your dropped animes/mangas. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_dropped { background-image:url(http://i.imgur.com/gc70XGo.png); height: 50px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* PLAN TO WATCH HEADER This is the header above the anime/manga you plan to see or read on your list. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_ptw { background-image:url(http://i.imgur.com/9YlikOO.png); height: 50px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* REMOVE HEADER COLOR You need this code to remove the default background colors from the header and override any related codes. You're supposed to use your own images or the default ones for the header, so this color is set to transparent so it won't get in the way. If you want the color back for some reason, remove this section. */ .header_title { background-color: transparent !important; } /* OTHER CODES Stuff I had to add after site changes. You need this otherwise the headers won't be visible. */ tbody {background-color: transparent; background-image: none;} /* REMOVE HEADER TEXT These codes remove the original text like "Completed" and "Currently Watching" from each category on the list. Some people will want the text gone so they can have their own custom logos. But if you want the text back, you have to remove this whole section. It shouldn't affect the images in any way. */ .header_title { color: gray !important; display: none !important; font-size: 1px !important; font-size: 0px !important; font-size: 0 !important; font-size: 0pt !important; } |
Shishio-kunJan 2, 2016 10:13 PM
Jul 26, 2015 6:52 PM
#202
interception said: A Better template for Shokugeki no soma (I am currently using this one but you can still use it) Click here for the template Code @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); body { background-attachment: fixed; background-clip: border-box; background-color: black; background-image: url(http://img11.deviantart.net/8f46/i/2015/125/a/f/yukihira_wallpaper_by_dinocojv-d8s8nt1.jpg); background-position: right 5%; background-repeat: no-repeat; background-size: cover; } #inlineContent { background: url("") no-repeat scroll 0 -26% transparent; display: inline-block !important; height: 1200px !important; left: 0 !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 1200px !important; z-index: -1 !important; } #list_surround { background: url("NOT IN USE") no-repeat scroll 50% 1px transparent; font-size: 81.25%; line-height: 1; margin: 0 auto; padding-bottom: 10px; padding-top: 300px; width: 75% !important; } body { color: white; font-family: arial; } a { -moz-transition: all 0.25s ease-in-out 0s; color: white; text-decoration: none; text-shadow: none; } a:hover { color: white; text-shadow: 0 1px rgba(255, 255, 255, 0.15); } .status_not_selected, .status_selected { border: 0 none !important; height: auto !important; padding: 0 8px; text-align: center !important; width: 16.667% !important; } .status_not_selected a, .status_selected a { background-color: rgb(67, 110, 238); border-color: rgba(48, 44, 64, 0.5); border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; display: block !important; font-weight: bold; padding: 8px; text-shadow: 0 1px rgba(0, 0, 0, 0.1); } .status_selected a { background-color: rgba(180, 32, 48, 0.9); border-color: rgba(148, 0, 24, 0.5); } .status_not_selected a:hover { background-color: rgba(0, 134, 152, 0.6); border-color: rgba(0, 134, 152, 0.6); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.3); } .status_selected a:hover { background-color: rgba(225, 2, 8, 0.6); border-color: rgba(164, 16, 32, 0.6); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.3); } .table_header { background-color: rgba(53, 51, 55, 0.9); } .table_header:first-of-type { border-radius: 3px 0 0 0; } .table_header:nth-of-type(2) { text-align: left; } .table_header:last-of-type { border-radius: 0 3px 0 0; } .td1 { -moz-transition: all 0.25s ease-in-out 0s; background-color: rgba(100, 97, 105, 0.6); } .td2 { -moz-transition: all 0.25s ease-in-out 0s; background-color: rgba(111, 108, 116, 0.5); } tr:hover [class^="td"] { background-color: rgba(180, 32, 48, 0.6); } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } noindex:-moz-any-link, tr:hover td.td1, tr:hover td.td2 { font-size: 15px; } .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border: 0 none; padding: 4px; text-align: center; vertical-align: middle; } .table_header, .td1, .td2, .category_totals { line-height: 30px; } .borderRBL { line-height: normal !important; } [cellspacing="0"] { line-height: 17px; } .category_totals { -moz-transition: all 0.25s ease-in-out 0s; background-color: rgba(72, 64, 87, 0); border-radius: 0 0 3px 3px; color: rgba(51, 51, 51, 0); text-align: center; } .category_totals:hover { background-color: rgba(100, 97, 105, 0.6); color: #EEEEEE; } [class^="header_"] * { font-size: 19px; height: 60px; line-height: 24px; padding-bottom: 4px; text-align: right; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; color: white; display: inline-block; font-style: italic; height: auto; padding: 0 8px 0 0; } #grand_totals { background-color: rgba(100, 97, 105, 0.6); border: 0 none; border-radius: 3px 3px 3px 3px; color: #EEEEEE; line-height: 20px; min-height: 20px; padding: 8px; text-align: center; vertical-align: middle; } #copyright { background-color: transparent; border-radius: 3px 3px 3px 3px; color: #FFFFFF; line-height: 17px; margin-top: 10px; padding: 8px; text-align: center; } /* THUMBNAIL SETTINGS Settings for the thumbnails of covers seen on your list. Height and width control the size, while margin-left and top can be added or taken away to change the position. Change the border size, type, or color, with the first border code.*/ .hide { height:30px; width:35px; margin-left:39px; margin-top:-40px; border:1px solid transparent; background-color:transparent; background-position:50% 50%; background-repeat:no-repeat no-repeat; background-size:110% 180%; border-bottom-left-radius:2px; border-bottom-right-radius:2px; border-top-left-radius:2px; border-top-right-radius:2px; display:inline-block !important; position: absolute; } /*THUMBNAIL HOVER SETTING This is the setting for the cover when you point to a thumbnail. Move the cover's position with the margin codes. Change its size with the padding codes. */ .hide:hover { margin-left:-140px; padding-right:150px; padding-top:220px !important; background-color:transparent; background-repeat:no-repeat no-repeat; background-size:105%; border-bottom-left-radius:8px; border-bottom-right-radius:8px; border-top-left-radius:8px; border-top-right-radius:8px; box-shadow:rgba(63, 52, 60, 0.55) 0 0 8px 8px; position:absolute; z-index:1; } /*THUMBNAIL HOVER FLICKER FIX If you reposition your covers, and notice flickering, color this red, then reload your layout. Notice where the red bar appears when you point to your covers. Move that box with this code, over the parts where you point and see flickering. Then change it back to transparent! */ .hide:hover:after { background: transparent; content: " "; height: 55px; left: 0; position: absolute; top: -3px; width: 215px; z-index: 20; } /*ANIMATION FOR ZOOM Change the timing of how long it takes for it zoom out here! Its set to .25 seconds by default. */ * { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; } /*ROW WIDTH AND SPACING This will increase the height of your rows and move the anime title to the left. It might look funny on some layouts so you'll have to adjust it or ask for help! Height is the height, padding left is the space the anime title moves from the left. */ .td1:nth-of-type(2), .td2:nth-of-type(2) { height: 40px; padding-left: 42px; } /* Anime List only CURRENTLY WATCHING HEADER This is the header above currently watching/reading. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_cw { background-image:url(http://i.imgur.com/Fy2qvc4.png); height: 50px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* COMPLETED HEADER This is the header above your anime/manga that's completed. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_completed { background-image:url(http://i.imgur.com/J3tNjt7.png); height: 50px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* ON-HOLD HEADER This is the header above your animes/mangas on-hold. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_onhold { background-image:url(http://i.imgur.com/inUl2U0.png); height: 50px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* DROPPED HEADER This is the header above your dropped animes/mangas. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_dropped { background-image:url(http://i.imgur.com/gc70XGo.png); height: 50px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* PLAN TO WATCH HEADER This is the header above the anime/manga you plan to see or read on your list. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_ptw { background-image:url(http://i.imgur.com/9YlikOO.png); height: 50px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* REMOVE HEADER COLOR You need this code to remove the default background colors from the header and override any related codes. You're supposed to use your own images or the default ones for the header, so this color is set to transparent so it won't get in the way. If you want the color back for some reason, remove this section. */ .header_title { background-color: transparent !important; } /* OTHER CODES Stuff I had to add after site changes. You need this otherwise the headers won't be visible. */ tbody {background-color: transparent; background-image: none;} /* REMOVE HEADER TEXT These codes remove the original text like "Completed" and "Currently Watching" from each category on the list. Some people will want the text gone so they can have their own custom logos. But if you want the text back, you have to remove this whole section. It shouldn't affect the images in any way. */ .header_title { color: gray !important; display: none !important; font-size: 1px !important; font-size: 0px !important; font-size: 0 !important; font-size: 0pt !important; } Thanks! You save my time looking for a cool and awesome lay-out of Shokugeki no Soma! |
Shishio-kunJan 2, 2016 10:13 PM
 |
Jul 27, 2015 12:00 PM
#203
| I don't think I've seen any Attack on Titan layouts anywhere yet despite the shows popularity, so here's mine - which is just a slightly tweaked version of Blazeflack's Bakemonogatari (I think) donation. The design now matches his manga list donation: transparent table (instead of a darker one) and orange 'Watching', 'Completed' etc. headers and category and grand total bars - just like how there's only blue in the manga one. Preview: http://imgur.com/w3w85aN sorry for the poor quality image Code /* // Self-explanatory*/ body { color:#F60; text-shadow:-1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000; font-size:11px; font-family:Verdana, Arial; background-image:url('http://animeflow.net/files/K_folder2/ivaille%20,%20shingeki_no_kyojin%20,%20taitsu_tights.jpg'); background-color:#000; background-repeat:no-repeat; background-position:center; background-attachment:fixed; background-size: cover; } /* // Determines the positioning of your list*/ #list_surround { width:900px; margin:0 auto; } /* // All links on your list*/ a { color:#F60; text-decoration:none; } a:visited { color:#F60; text-decoration:none; } a:hover { color:#F60; text-decoration:underline; } /* // Alternating row color 1 */ .td1 { background:rgba(0, 0, 0, 0.5); color:#999; border-color:#333; border-style:solid; border-width:0 1px 1px 0; padding:2px; } /* // Alternating row color 2 */ .td2 { background:rgba(0, 0, 0, 0.5); color:#999; border-color:#333; border-style:solid; border-width:0 1px 1px 0; padding:2px; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ .table_header { color:#999; background:rgba(0, 0, 0, 0.75); border-color:#333; border-style:solid; border-width:1px 1px 1px 0; padding:2px; } /* // Controls the select form decoration (the drop down select box)*/ .form { color:#999; font-size:11px; font-family:Verdana, Arial; border-color:#333; border-style:solid; border-width:1px; padding:2px; } /* Which 'status' up top is selected? */ .status_selected { color:#000; background:rgba(0, 0, 0, 0.75); font-weight:700; text-decoration:underline; border-color:#333; border-style:solid; border-width:0 1px 1px 0; padding:2px; } .status_selected a { text-decoration:underline; } .status_not_selected { color:#000; background:rgba(0, 0, 0, 0.75); border-color:#333; border-style:solid; border-width:0 1px 1px 0; padding:2px; } /* Header classes for Currently Watching, Completed, Dropped, etc...*/ .header_title { font-size:20px; font-weight:700; text-align:center; text-shadow:-1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000; } .category_totals { text-align:center; background:rgba(0, 0, 0, 0.75); border-color:#333; border-style:solid; border-width:0 1px 1px; } #grand_totals { text-align:center; background:rgba(0, 0, 0, 0.75); border-color:#333; border-style:solid; border-width:1px 1px 1px 1px; } /* header_al is thesurrounding "User's Anime List" at the top */ .header_al { font-weight:700; font-size:16px; } /* header_al_links is thewith your "Profile" and "MyAnimeList home" links controls what styles you can give to all the anime titles in your list */ .animetitle { font-weight:700; } /* copyright contains the "Producted by Garrett Gyssler" text DO NOT REMOVE OR HIDE THIS DIV IF FOUND TO BE REMOVED, YOUR LIST WILL BE REMOVED TOO*/ #copyright { padding-top:6px; text-align:center; width:900px; margin:0 auto; } /* COLOR OF THE ICONS Change the color, and adjust the opacity for brighter color. Remove the display: none to match the selected icon to the other icons. */ #mal_cs_listinfo:before, #mal_cs_links:before, #mal_cs_otherlinks:before, #mal_cs_powered:before { background: transparent; opacity: .9; } /* BORDER OF ICONS If you're having trouble seeing the border bottom, lower the height by a pixel or two until you see it. */ #mal_cs_listinfo:before, #mal_cs_links:before, #mal_cs_otherlinks:before, #mal_cs_powered:before, #mal_cs_listinfo:before, #mal_cs_links:before, #mal_cs_otherlinks:before, #mal_cs_powered:before { border-color: ; border-style: ; border-width: ; height: 32px !important; } /* BUTTONS COLOR AND BORDER Buttons within the hover menus, not the icons themselves. Second code is for button color on hover. */ #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a img{ background-color: rgba(64, 60, 90, 0.6) !important; border-color: transparent; border-style: solid !important; border-width: 1px !important; } #mal_cs_listinfo a:hover, #mal_cs_links a:hover, #mal_cs_otherlinks a:hover, #mal_cs_powered a img:hover { background-color: #403C5A !important; } /* COLOR OF HOVER MENUS AND SELECTED ICONS Remove display none from the second code to match the colors of the selected icon to the icons above. */ #mal_cs_listinfo div, #mal_cs_links div, #mal_cs_otherlinks div, #mal_cs_powered div, #mal_cs_powered dd, #mal_cs_powered a { background-color: rgba(255, 255, 255, 0.6) !important; } #mal_cs_listinfo:hover:before, #mal_cs_links:hover:before, #mal_cs_otherlinks:hover:before, #mal_cs_powered:hover:before, #mal_cs_listinfo:hover:after, #mal_cs_links:hover:after, #mal_cs_otherlinks:hover:after, #mal_cs_powered:hover:after { display: none; background-color: ; opacity: .2; } /* COLOR OF USERNAME (for visitors) You don't see this username on the menus when you're logged in, log out to see it. */ #mal_cs_otherlinks strong a { color: #333333 !important; } #mal_cs_otherlinks strong a:hover { color: blue !important; background-color: transparent !important; } /* POSITION OF TOP BAR Change to absolute if you want it to not scroll with the page. */ #mal_control_strip { position: fixed !important; background-color: transparent !important; background-image: url(none) !important; } /* OTHER CODES If you want to change out the icon images themselves, you can scroll down through the codes and find the background images and change them with your own. */ #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered { -moz-box-sizing: border-box; transition: all 0.4s ease 0s; background: none no-repeat scroll 100% 0 transparent; border: 0 none; height: 0 !important; overflow: hidden; position: absolute; right: 4px; text-align: center; top: 4px; width: 150px; z-index: 10; } #mal_cs_listinfo:hover, #mal_cs_links:hover, #mal_cs_otherlinks:hover, #mal_cs_powered:hover { height: 200px !important; padding-top: 32px; width: 150px; } #mal_cs_listinfo div, #mal_cs_links div, #mal_cs_otherlinks div, #mal_cs_powered div, #mal_cs_powered dd { transition: opacity 0.4s ease-in-out 0s; border-radius: 3px 0 0 0; font-size: 0 !important; line-height: 0; margin: 0 !important; opacity: 0; padding: 8px 0 0; } #mal_cs_listinfo:hover div, #mal_cs_links:hover div, #mal_cs_otherlinks:hover div, #mal_cs_powered:hover div, #mal_cs_powered:hover dd { opacity: 1; } #mal_cs_listinfo div:nth-of-type(2), #mal_cs_links div:nth-of-type(2), #mal_cs_otherlinks div:nth-of-type(2), #mal_cs_powered div:nth-of-type(2) { border-radius: 0 0 3px 3px; padding: 4px 0 8px; } #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a { background-color: rgba(64, 60, 90, 0.6); border-radius: 3px 3px 3px 3px; display: block; font: 13px/17px arial,sans-serif; margin: 4px 12px 0; padding: 3px 0; text-decoration: none; } #mal_cs_listinfo a:nth-of-type(1), #mal_cs_links a:nth-of-type(1), #mal_cs_otherlinks a:nth-of-type(1), #mal_cs_powered a:nth-of-type(1) { margin-top: 0; } #mal_cs_listinfo strong a strong { font-weight: normal; } #mal_cs_otherlinks strong { color: #333333; display: block; font: bold 13px/17px arial,sans-serif !important; padding: 0 4px 4px; text-shadow: 0 1px 1px #FFFFFF; } #mal_cs_otherlinks strong a { background: none repeat scroll 0 0 transparent !important; border-color: transparent !important; border-radius: 0 0 0 0; color: #333333; display: inline; font: bold 13px/17px arial,sans-serif !important; margin: 0; padding: 0; text-shadow: 0 1px 1px #FFFFFF; } #mal_cs_powered a { border-radius: 3px 0 0 0 !important; display: block !important; margin: 0 !important; opacity: 0; padding: 8px 0 0 !important; } #mal_cs_powered:hover a { opacity: 1; } #mal_cs_powered a img { background: url("http://i.imgur.com/fGTjBC3.png") no-repeat scroll 50% 6px rgba(64, 60, 90, 0.6); border-radius: 3px 3px 3px 3px; display: block; height: 0; margin: 0 12px; padding: 23px 0 0 126px; width: 0; } #mal_cs_powered a img:hover { background-color: #403C5A; } #mal_cs_powered #search { border-radius: 0 0 3px 3px; padding: 8px; position: relative; } #mal_cs_powered #search #searchBox { -moz-box-sizing: border-box; border-color: #BCBCBC #D6D6D6 #D6D6D6; border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #333333; display: inline-block; font-family: arial,sans-serif; font-size: 13px; height: 28px; padding-left: 6px; padding-right: 24px; vertical-align: top; width: 100%; } #mal_cs_powered #search #searchBox:hover, #mal_cs_powered #search #searchBox:focus { border-color: #ACACAC #C6C6C6 #C6C6C6; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; } #mal_cs_powered #search #searchListButton { background: url("http://i.imgur.com/XqsilHp.png") no-repeat scroll 0 0 transparent; border-radius: 3px 3px 3px 3px; height: 0; margin: 0; padding: 16px 0 0 16px; position: absolute; right: 12px; top: 14px; width: 0; } #mal_cs_listinfo { background-image: url("http://i.imgur.com/UXZxrWI.png"); right: 106px; } #mal_cs_listinfo:hover { background-image: url("http://i.imgur.com/VcVVnod.png"); } #mal_cs_links { background-image: url("http://i.imgur.com/LpXWTzt.png"); right: 72px; z-index: 9; } #mal_cs_links:hover { background-image: url("http://i.imgur.com/oPfKrOl.png"); } #mal_cs_otherlinks { background-image: url("http://i.imgur.com/ogmX9qC.png"); right: 38px; z-index: 8; } #mal_cs_otherlinks:hover { background-image: url("http://i.imgur.com/EEGHkbF.png"); } #mal_cs_powered { background-image: url("http://i.imgur.com/ct4BVP5.png"); right: 4px !important; z-index: 7; } #mal_cs_powered:hover { background-image: url("http://i.imgur.com/TUUWtaj.png"); } td#mal_cs_pic a img { display: none; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 0 none !important; } #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered { padding: 32px 0 0 !important; } #mal_cs_listinfo:before, #mal_cs_links:before, #mal_cs_otherlinks:before, #mal_cs_powered:before { z-index: 10 !important; content: ""; right: 0 !important; top: 0 !important; width: 32px !important; position: absolute !important; border-radius: 4px; } #mal_cs_listinfo:after{ background-image: url(http://i.imgur.com/856wzPZ.png); } #mal_cs_links:after{ background-image: url(http://i.imgur.com/rwvRyux.png); } #mal_cs_otherlinks:after{ background-image: url(http://i.imgur.com/fbWr1K4.png); } #mal_cs_powered:after{ background-image: url(http://i.imgur.com/fKvpt1F.png); } #mal_cs_listinfo:after, #mal_cs_links:after, #mal_cs_otherlinks:after, #mal_cs_powered:after { z-index: 10 !important; content: ""; right: 0 !important; top: 0 !important; width: 32px !important; height: 32px !important; position: absolute !important; } #searchBox { width: 128px !important; margin-left: 1px; } #mal_cs_powered #search #searchListButton { right: 15px !important; top: 12px !important; } @media screen and (-webkit-min-device-pixel-ratio:0) { #searchBox { width: 96px !important; } } td:nth-of-type(6) { line-height: 20px !important; } } .header_cw { background-color: transparent; background-image: url(""); background-position: 0% 0; background-repeat: no-repeat no-repeat; height: 30px; } .header_onhold{ visibility: hidden; } .header_onhold{ visibility: hidden; } .header_onhold:before { content: "On Hold"; visibility: visible; font-size:20px; font-weight:700; text-align:center; text-shadow:-1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000; width: 200px; height: 50px; position: absolute; left: 575px; } |
removed-userAug 27, 2015 12:37 PM
Jul 27, 2015 5:35 PM
#204
Amarantos said: I don't think I've seen any Attack on Titan layouts anywhere yet despite the shows popularity, so here's mine - which is just a slightly tweaked version of Blazeflack's Bakemonogatari (I think) donation. The design now matches his manga list donation: transparent table (instead of a darker one) and orange 'Watching', 'Completed' etc. headers and category and grand total bars - just like how there's only blue in the manga one. Preview: http://myanimelist.net/animelist/Amarantos Code /* // Self-explanatory*/ body { color:#F60; text-shadow:-1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000; font-size:11px; font-family:Verdana, Arial; background-image:url('http://animeflow.net/files/K_folder2/ivaille%20,%20shingeki_no_kyojin%20,%20taitsu_tights.jpg'); background-color:#000; background-repeat:no-repeat; background-position:center; background-attachment:fixed; background-size: cover; } /* // Determines the positioning of your list*/ #list_surround { width:900px; margin:0 auto; } /* // All links on your list*/ a { color:#F60; text-decoration:none; } a:visited { color:#F60; text-decoration:none; } a:hover { color:#F60; text-decoration:underline; } /* // Alternating row color 1 */ .td1 { background:rgba(0, 0, 0, 0.5); color:#999; border-color:#333; border-style:solid; border-width:0 1px 1px 0; padding:2px; } /* // Alternating row color 2 */ .td2 { background:rgba(0, 0, 0, 0.5); color:#999; border-color:#333; border-style:solid; border-width:0 1px 1px 0; padding:2px; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ .table_header { color:#999; background:rgba(0, 0, 0, 0.75); border-color:#333; border-style:solid; border-width:1px 1px 1px 0; padding:2px; } /* // Controls the select form decoration (the drop down select box)*/ .form { color:#999; font-size:11px; font-family:Verdana, Arial; border-color:#333; border-style:solid; border-width:1px; padding:2px; } /* Which 'status' up top is selected? */ .status_selected { color:#000; background:rgba(0, 0, 0, 0.75); font-weight:700; text-decoration:underline; border-color:#333; border-style:solid; border-width:0 1px 1px 0; padding:2px; } .status_selected a { text-decoration:underline; } .status_not_selected { color:#000; background:rgba(0, 0, 0, 0.75); border-color:#333; border-style:solid; border-width:0 1px 1px 0; padding:2px; } /* Header classes for Currently Watching, Completed, Dropped, etc...*/ .header_title { font-size:20px; font-weight:700; text-align:center; text-shadow:-1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000; } .category_totals { text-align:center; background:rgba(0, 0, 0, 0.75); border-color:#333; border-style:solid; border-width:0 1px 1px; } #grand_totals { text-align:center; background:rgba(0, 0, 0, 0.75); border-color:#333; border-style:solid; border-width:1px 1px 1px 1px; } /* header_al is thesurrounding "User's Anime List" at the top */ .header_al { font-weight:700; font-size:16px; } /* header_al_links is thewith your "Profile" and "MyAnimeList home" links controls what styles you can give to all the anime titles in your list */ .animetitle { font-weight:700; } /* copyright contains the "Producted by Garrett Gyssler" text DO NOT REMOVE OR HIDE THIS DIV IF FOUND TO BE REMOVED, YOUR LIST WILL BE REMOVED TOO*/ #copyright { padding-top:6px; text-align:center; width:900px; margin:0 auto; } /* COLOR OF THE ICONS Change the color, and adjust the opacity for brighter color. Remove the display: none to match the selected icon to the other icons. */ #mal_cs_listinfo:before, #mal_cs_links:before, #mal_cs_otherlinks:before, #mal_cs_powered:before { background: transparent; opacity: .9; } /* BORDER OF ICONS If you're having trouble seeing the border bottom, lower the height by a pixel or two until you see it. */ #mal_cs_listinfo:before, #mal_cs_links:before, #mal_cs_otherlinks:before, #mal_cs_powered:before, #mal_cs_listinfo:before, #mal_cs_links:before, #mal_cs_otherlinks:before, #mal_cs_powered:before { border-color: ; border-style: ; border-width: ; height: 32px !important; } /* BUTTONS COLOR AND BORDER Buttons within the hover menus, not the icons themselves. Second code is for button color on hover. */ #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a img{ background-color: rgba(64, 60, 90, 0.6) !important; border-color: transparent; border-style: solid !important; border-width: 1px !important; } #mal_cs_listinfo a:hover, #mal_cs_links a:hover, #mal_cs_otherlinks a:hover, #mal_cs_powered a img:hover { background-color: #403C5A !important; } /* COLOR OF HOVER MENUS AND SELECTED ICONS Remove display none from the second code to match the colors of the selected icon to the icons above. */ #mal_cs_listinfo div, #mal_cs_links div, #mal_cs_otherlinks div, #mal_cs_powered div, #mal_cs_powered dd, #mal_cs_powered a { background-color: rgba(255, 255, 255, 0.6) !important; } #mal_cs_listinfo:hover:before, #mal_cs_links:hover:before, #mal_cs_otherlinks:hover:before, #mal_cs_powered:hover:before, #mal_cs_listinfo:hover:after, #mal_cs_links:hover:after, #mal_cs_otherlinks:hover:after, #mal_cs_powered:hover:after { display: none; background-color: ; opacity: .2; } /* COLOR OF USERNAME (for visitors) You don't see this username on the menus when you're logged in, log out to see it. */ #mal_cs_otherlinks strong a { color: #333333 !important; } #mal_cs_otherlinks strong a:hover { color: blue !important; background-color: transparent !important; } /* POSITION OF TOP BAR Change to absolute if you want it to not scroll with the page. */ #mal_control_strip { position: fixed !important; background-color: transparent !important; background-image: url(none) !important; } /* OTHER CODES If you want to change out the icon images themselves, you can scroll down through the codes and find the background images and change them with your own. */ #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered { -moz-box-sizing: border-box; transition: all 0.4s ease 0s; background: none no-repeat scroll 100% 0 transparent; border: 0 none; height: 0 !important; overflow: hidden; position: absolute; right: 4px; text-align: center; top: 4px; width: 150px; z-index: 10; } #mal_cs_listinfo:hover, #mal_cs_links:hover, #mal_cs_otherlinks:hover, #mal_cs_powered:hover { height: 200px !important; padding-top: 32px; width: 150px; } #mal_cs_listinfo div, #mal_cs_links div, #mal_cs_otherlinks div, #mal_cs_powered div, #mal_cs_powered dd { transition: opacity 0.4s ease-in-out 0s; border-radius: 3px 0 0 0; font-size: 0 !important; line-height: 0; margin: 0 !important; opacity: 0; padding: 8px 0 0; } #mal_cs_listinfo:hover div, #mal_cs_links:hover div, #mal_cs_otherlinks:hover div, #mal_cs_powered:hover div, #mal_cs_powered:hover dd { opacity: 1; } #mal_cs_listinfo div:nth-of-type(2), #mal_cs_links div:nth-of-type(2), #mal_cs_otherlinks div:nth-of-type(2), #mal_cs_powered div:nth-of-type(2) { border-radius: 0 0 3px 3px; padding: 4px 0 8px; } #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a { background-color: rgba(64, 60, 90, 0.6); border-radius: 3px 3px 3px 3px; display: block; font: 13px/17px arial,sans-serif; margin: 4px 12px 0; padding: 3px 0; text-decoration: none; } #mal_cs_listinfo a:nth-of-type(1), #mal_cs_links a:nth-of-type(1), #mal_cs_otherlinks a:nth-of-type(1), #mal_cs_powered a:nth-of-type(1) { margin-top: 0; } #mal_cs_listinfo strong a strong { font-weight: normal; } #mal_cs_otherlinks strong { color: #333333; display: block; font: bold 13px/17px arial,sans-serif !important; padding: 0 4px 4px; text-shadow: 0 1px 1px #FFFFFF; } #mal_cs_otherlinks strong a { background: none repeat scroll 0 0 transparent !important; border-color: transparent !important; border-radius: 0 0 0 0; color: #333333; display: inline; font: bold 13px/17px arial,sans-serif !important; margin: 0; padding: 0; text-shadow: 0 1px 1px #FFFFFF; } #mal_cs_powered a { border-radius: 3px 0 0 0 !important; display: block !important; margin: 0 !important; opacity: 0; padding: 8px 0 0 !important; } #mal_cs_powered:hover a { opacity: 1; } #mal_cs_powered a img { background: url("http://i.imgur.com/fGTjBC3.png") no-repeat scroll 50% 6px rgba(64, 60, 90, 0.6); border-radius: 3px 3px 3px 3px; display: block; height: 0; margin: 0 12px; padding: 23px 0 0 126px; width: 0; } #mal_cs_powered a img:hover { background-color: #403C5A; } #mal_cs_powered #search { border-radius: 0 0 3px 3px; padding: 8px; position: relative; } #mal_cs_powered #search #searchBox { -moz-box-sizing: border-box; border-color: #BCBCBC #D6D6D6 #D6D6D6; border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #333333; display: inline-block; font-family: arial,sans-serif; font-size: 13px; height: 28px; padding-left: 6px; padding-right: 24px; vertical-align: top; width: 100%; } #mal_cs_powered #search #searchBox:hover, #mal_cs_powered #search #searchBox:focus { border-color: #ACACAC #C6C6C6 #C6C6C6; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; } #mal_cs_powered #search #searchListButton { background: url("http://i.imgur.com/XqsilHp.png") no-repeat scroll 0 0 transparent; border-radius: 3px 3px 3px 3px; height: 0; margin: 0; padding: 16px 0 0 16px; position: absolute; right: 12px; top: 14px; width: 0; } #mal_cs_listinfo { background-image: url("http://i.imgur.com/UXZxrWI.png"); right: 106px; } #mal_cs_listinfo:hover { background-image: url("http://i.imgur.com/VcVVnod.png"); } #mal_cs_links { background-image: url("http://i.imgur.com/LpXWTzt.png"); right: 72px; z-index: 9; } #mal_cs_links:hover { background-image: url("http://i.imgur.com/oPfKrOl.png"); } #mal_cs_otherlinks { background-image: url("http://i.imgur.com/ogmX9qC.png"); right: 38px; z-index: 8; } #mal_cs_otherlinks:hover { background-image: url("http://i.imgur.com/EEGHkbF.png"); } #mal_cs_powered { background-image: url("http://i.imgur.com/ct4BVP5.png"); right: 4px !important; z-index: 7; } #mal_cs_powered:hover { background-image: url("http://i.imgur.com/TUUWtaj.png"); } td#mal_cs_pic a img { display: none; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 0 none !important; } #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered { padding: 32px 0 0 !important; } #mal_cs_listinfo:before, #mal_cs_links:before, #mal_cs_otherlinks:before, #mal_cs_powered:before { z-index: 10 !important; content: ""; right: 0 !important; top: 0 !important; width: 32px !important; position: absolute !important; border-radius: 4px; } #mal_cs_listinfo:after{ background-image: url(http://i.imgur.com/856wzPZ.png); } #mal_cs_links:after{ background-image: url(http://i.imgur.com/rwvRyux.png); } #mal_cs_otherlinks:after{ background-image: url(http://i.imgur.com/fbWr1K4.png); } #mal_cs_powered:after{ background-image: url(http://i.imgur.com/fKvpt1F.png); } #mal_cs_listinfo:after, #mal_cs_links:after, #mal_cs_otherlinks:after, #mal_cs_powered:after { z-index: 10 !important; content: ""; right: 0 !important; top: 0 !important; width: 32px !important; height: 32px !important; position: absolute !important; } #searchBox { width: 128px !important; margin-left: 1px; } #mal_cs_powered #search #searchListButton { right: 15px !important; top: 12px !important; } @media screen and (-webkit-min-device-pixel-ratio:0) { #searchBox { width: 96px !important; } } td:nth-of-type(6) { line-height: 20px !important; } } .header_cw { background-color: transparent; background-image: url(""); background-position: 0% 0; background-repeat: no-repeat no-repeat; height: 30px; } .header_onhold{ visibility: hidden; } .header_onhold{ visibility: hidden; } .header_onhold:before { content: "On Hold"; visibility: visible; font-size:20px; font-weight:700; text-align:center; text-shadow:-1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000; width: 200px; height: 50px; position: absolute; left: 575px; } Great one , i needed that type of list , might change the background to one that i like. thanks |
Jul 27, 2015 6:08 PM
#205
semperdickus said: clouds layout:  demo: http://myanimelist.net/animelist/semperdickus CSS: https://dl.dropboxusercontent.com/u/41845835/MAL%20design%20raichu.css I absolutely love this, but is there any chance you could make it without the Raichu please? |
  |
Jul 28, 2015 2:00 AM
#206
| ^Replace or remove this part: url("https://dl.dropboxusercontent.com/u/41845835/homepage/images/backMAL4.png"), |
Jul 29, 2015 6:51 AM
#207
notawake said: GitS themed layout... sort of. I guess by changing the background it goes well with other anime too. If you like it and find any bugs please let me know. Preview:  Code: This ones is good but why is the code showing error? |
 |
Jul 29, 2015 9:53 AM
#208
rameshbhutak16 said: because he no longer has it stored on that location.notawake said: GitS themed layout... sort of. I guess by changing the background it goes well with other anime too. If you like it and find any bugs please let me know. Preview: Code: This ones is good but why is the code showing error? |
         |
Aug 4, 2015 4:22 PM
#210
| I'm trying to find this layout, can someone help me? http://i.imgur.com/LJaEEDf.png |
Aug 5, 2015 3:07 PM
#212
| http://myanimelist.net/forum/?topicid=318587 Recently added layouts. |
Aug 5, 2015 4:07 PM
#213
| If you click in the image it links you to the post where the code of that layout is. |
Aug 5, 2015 5:56 PM
#215
kaeleash said: I did click on it and the layout wasn't there. Code: @import "https://dl.dropbox.com/s/0rb5a1wq0b8ev5w/LastChapterAnimeListCSS.css"; @import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css"; @import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Lineage/TopMenu.css); @import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Lineage/CategoryMenu.css); @import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Lineage/Favorites.css); /* Delete this line */ @import url(http://dl.dropboxusercontent.com/u/78340470/anime.css); @font-face { font-family: 'SAO'; src: url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Fonts/SAO.woff) format('woff'); } @font-face { font-family: 'Philosopher'; src: url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Fonts/Philosopher.woff) format('woff'); } /* 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 */ td[class^='td']:nth-of-type(2) { width: 454px !important; } .table_header[width="125"], span[id*="tagLinks"], div[id*="tagChangeRow"] { display: none !important; } td[class^='td'][width="125"] { width: 0; } .hide { background-position: center; background-repeat: no-repeat; background-size: auto; } .borderRBL { border-style: solid; border-color: #FFFFFF; border-width: 2px 0 !important; } .borderRBL small { visibility: visible !important; } /* Custom cursor */ body { cursor:url(http://i60.tinypic.com/vzcxo9.png) 1 2, auto; } a:hover { cursor: url(http://i60.tinypic.com/vzcxo9.png) 1 2, auto; } /* Custom cursor */ a { text-decoration: none; } body { font-family: 'Philosopher'; font-size: 13px; color: #7f7e7e; letter-spacing: .5px; background-color: transparent; } /* LIST SETTINGS */ #list_surround { position: relative; left: 100%; margin-left: -960px; top: 0; width: 650px; padding-top: 200px; } .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: #f2a603; font-size: 11px; text-transform: lowercase; letter-spacing: .5px; } #list_surround small { visibility: hidden; } #list_surround small a:last-of-type:before { position: absolute; display: inline-block !important; content: '...'; margin-left: -8px; font-family: Arial; line-height: 7px; font-size: 18px; font-weight: bold; letter-spacing: .5px; color: #7f7e7e; } #list_surround small a:first-of-type { position: relative; left: 44px; padding: 10px; font-size: 0; background-image: url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Lineage/Images/small.png); background-repeat: no-repeat; background-position: 0 -1px; } #list_surround small a[href*="edit"] { background-position: 0 -22px; } #list_surround tr:hover small a:first-of-type, #list_surround tr:hover small a:last-of-type:before { visibility: visible; } td[class^='td']:nth-child(2) { text-align: left; } td[class^='td'][width="45"] { background-image: url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Lineage/Images/circle.png); background-repeat: no-repeat; background-position: 11px 2px; } /* LIST COLOR */ .table_header, .td1, .td2 { text-align: center; background-color: rgba(255, 255, 255, .75); } tr:hover td[class^='td']:not(.borderRBL) { background-color: rgba(255, 255 , 255, 1); } /* LIST FONT COLOR */ a { color: #7f7e7e; } .table_headerLink { line-height: 24px; font-size: 10px; color: #f2a603 !important; font-weight: normal; text-transform: uppercase; } .table_headerLink strong { font-weight: normal !important; } td[class^='td'][width="45"], td[class^='td'][width="45"] a { color: #FFFFFF; } /* BORDER COLORS */ td[class^='td']:first-child { border-left: 2px solid #FFFFFF !important; box-shadow: -1px 0 0 #7f7e7e; } td[class^='td']:last-child { border-right: 2px solid #FFFFFF !important; box-shadow: 1px 0 0 #7f7e7e; } .table_header { border-style: solid; border-color: #FFFFFF; border-width: 2px 0; background-color: rgb(255, 255, 255); box-shadow: 0 1px 0 #000000, 0 -1px 0 #7f7e7e; } .table_header:first-child { border-left: 2px solid white !important; box-shadow: 0 -1px 0 #7f7e7e, 0 1px 0 #000000, -1px 0 0 #7f7e7e; } .table_header:nth-child(5) { border-right: 2px solid white !important; box-shadow: 0 -1px 0 #7f7e7e, 1px 0 0 #7f7e7e, 0 1px 0 #000000; border-radius: 0 16px 0 0; } /* HEADERS */ .header_title { pointer-events: none; display: inline-block; height: 100px; } /* 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: 131px; font-size: 0; background-image: url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Lineage/Images/headers_bg.png); background-repeat: no-repeat; z-index: 1; } .header_cw span { background-position: center 0; } .header_completed span { background-position: center -131px; } .header_onhold span { background-position: center -262px; } .header_dropped span { background-position: center -393px; } .header_ptw span { background-position: center -524px; } /* CURRENTLY WATCHING RENDER AND BACKGROUND */ .status_selected:first-child { background-image: url(http://i60.tinypic.com/2eykfg1.png), url(http://i59.tinypic.com/amz1tx.jpg); background-position: left bottom, left top; } /* COMPLETED RENDER AND BACKGROUND */ .status_selected:nth-child(2) { background-image: url(http://i59.tinypic.com/elcoy1.png), url(http://i58.tinypic.com/2gvkgp2.jpg); background-position: left bottom, left top; } /* ON-HOLD RENDER AND BACKGROUND */ .status_selected:nth-child(3) { background-image: url(http://i59.tinypic.com/344p4zc.png), url(http://i60.tinypic.com/294nl8w.jpg); background-position: left bottom, left top; } /* DROPPED RENDER AND BACKGROUND */ .status_selected:nth-child(4) { background-image: url(http://i58.tinypic.com/35aombq.png), url(http://i62.tinypic.com/123kvnp.jpg); background-position: left bottom, left top; } /* PLANNED RENDER AND BACKGROUND */ .status_selected:nth-child(5) { background-image: url(http://i61.tinypic.com/20k3rep.png), url(http://i57.tinypic.com/2rh1fcy.jpg); background-position: left bottom, left top; } /* ALL RENDER AND BACKGROUND */ .status_selected:last-child { background-image: url(none), url(http://i61.tinypic.com/29uoxmh.jpg); background-position: left bottom, left top; } .category_totals { padding: 3px 3px 9px 3px; text-align: center; font-size: 11px; color: #FFFFFF; border: 2px solid #FFFFFF; background-color: rgb(242, 166, 3); box-shadow: 1px 0 0 #7f7e7e, 0 1px 0 #7f7e7e, -1px 0 0 #7f7e7e; border-radius: 0 0 16px 16px; } #grand_totals:before { diplay: inline-block; content: '< '; } #grand_totals:after { diplay: inline-block; content: ' >'; } #grand_totals { position: absolute; display: block; margin-top: -28px; width: calc(100% - 24px); padding: 0 10px 10px; text-align: center; font-size: 11px; color: #FFFFFF; border-color: #FFFFFF; border-style: solid; border-width: 0 2px; background-color: rgb(242, 166, 3); box-shadow: 1px 0 0 #7f7e7e, 0 1px 0 #7f7e7e, -1px 0 0 #7f7e7e; border-radius: 0 0 12px 12px; } #copyright:before { diplay: block; content: "Design by SylakentH_"; font-size: 12px; } #copyright:after { diplay: block; content: "Edited by LastChapter."; font-size: 12px; } #copyright { position: relative; display: block; margin-top: -10px !important; padding: 2px 0 4px; font-size: 12px; color: #FFFFFF; border: solid 4px #da6358; background-color: rgb(160, 55, 60); border-radius: 16px; } #copyright a { padding-right: 2px; font-size: 14px; color: #FFFFFF; text-shadow: 1px 1px #f11c26; } /* Put your text here */ #:before { position: fixed; display: block; content: "From now on, you belong to me, as my prisoner of war! - Ellen Viltaria (Madan No Ou To Vanadis)"; right: 0; top: 0; padding-right: 4px; font-family: 'SAO'; line-height: 24px; color: #FFFFFF; font-size: 18px; letter-spacing: 1px; text-shadow: 1px 1px #000000; } @-moz-document url-prefix() { #list_surround small a:last-of-type:before { line-height: 6px; } .td1, .td2 { line-height: 14px; padding: 4px 0; } } /*Covers*/ :hover + .hide { position: fixed !important; display: block !important; left: 730px; top: 120px; width: 193px; height: 316px; background-repeat: no-repeat !important; background-size: 193px 312px !important; } :hover + .hide:after { position: fixed; display: block; content: ''; left: 730px; top: 120px; width: 193px; height: 316px; background-image: url('https://dl.dropboxusercontent.com/u/113316285/hxh/all.png'); background-size: 193px 316px; } .hide:before { background: none repeat scroll 0 0 transparent; border-radius: 15px 15px 15px 15px; color: white; content: ""; padding-bottom: 5px; position: absolute; text-align: center; top: 10px; width: 262px; } } |
Aug 10, 2015 2:32 PM
#216
| Hello, I have modified and made it to anime Hetalia , so I hope you like it Preview: Code: @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); @import url(http://storage.live.com/items/4A07C1EEED420167%21151); /* 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 */ body { background-attachment:fixed; background-clip:border-box; background-color:transparent; background-image:url(http://i61.tinypic.com/35l6bdu.jpg[/IMG]); background-position:0 50%, 0 0; background-repeat:no-repeat no-repeat; background-size:cover; font-family:calibri; } #inlineContent { display:inline-block !important; height:1080px !important; left:0 !important; margin:auto !important; position:fixed !important; right:0 !important; top:0 !important; width:1920px !important; z-index:-1 !important; } #list_surround { background-attachment:scroll; background-color:transparent; background-image:url(http://i58.tinypic.com/f0p1rk.jpg[/IMG]); background-position:30px -40px; background-repeat:no-repeat no-repeat; font-size:100%; line-height:1; margin:0 auto; padding-bottom:10px; padding-top:320px; position:absolute; right:-4px !important; width:700px; } a { color:#FFFFFF; text-decoration:none; text-shadow:none; } a:hover { color:#fff; text-decoration:underline; } .table_header { background-color:rgba(255, 255, 255, 0.4); } .table_header:first-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:10px; border-top-right-radius:0; } .table_header:nth-of-type(2) { padding-left:35px; text-align:left; } .table_header:last-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:0; border-top-right-radius:10px; } .td1 { background-color:rgba(0, 0, 0, 0.4); height:65px; } .td2 { background-color:rgba(0, 0, 0, 0.4); height:65px; } .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border:0 none; padding:4px; text-align:center; vertical-align:top; } .table_header, .td1, .td2, .category_totals { color:white; } .borderRBL { line-height:normal !important; } [cellspacing="0"] { line-height:17px; } .category_totals { background-color:rgba(255, 255, 255, 0.4); border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:0; border-top-right-radius:0; color:white; text-align:center; } [class^="header_"] * { background-repeat:no-repeat no-repeat; font-size:0; height:200px; line-height:24px; padding-bottom:4px; text-align:right; vertical-align:bottom; } .header_title { border-bottom-left-radius:4px; border-bottom-right-radius:4px; border-top-left-radius:4px; border-top-right-radius:4px; color:#FFFFFF; display:inline-block; font-style:italic; height:auto; padding:0 8px 0 0; text-shadow:rgba(0, 0, 0, 0.14902) 0 1px 1px; } #grand_totals { background-color:transparent; border:0 none; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; color:#FFFFFF; line-height:20px; min-height:20px; padding:8px; text-align:center; vertical-align:middle; } #copyright { background-color:rgba(180, 32, 48, 0.6); border-bottom-left-radius:3px; border-bottom-right-radius:3px; border-top-left-radius:3px; border-top-right-radius:3px; color:#EEEEEE; line-height:17px; margin-top:10px; padding:8px; text-align:center; } #copyright::after { } .hide { background-color:rgba(248, 162, 200, 0.701961); background-position:50% 50%; background-repeat:no-repeat no-repeat; background-size:cover; border:1px solid #FFFFFF; border-bottom-left-radius:7px; border-bottom-right-radius:7px; border-top-left-radius:7px; border-top-right-radius:7px; display:inline-block !important; height:55px; margin-left:33px; margin-top:-65px; position:absolute; width:35px; } .hide:hover { background-color:transparent; background-repeat:no-repeat no-repeat; background-size:cover; border-bottom-left-radius:20px; border-bottom-right-radius:20px; border-top-left-radius:20px; border-top-right-radius:20px; box-shadow:rgba(63, 52, 60, 0.54902) 0 0 8px 8px; margin-left:-130px; padding-right:150px; padding-top:220px !important; position:absolute; z-index:1; } .td1:nth-of-type(2), .td2:nth-of-type(2) { padding-left:35px; text-align:left; } .td1:nth-of-type(6), .td2:nth-of-type(6) { background-attachment:scroll; background-color:transparent; background-image:none; background-position:0 0; background-repeat:repeat repeat; border-bottom-style:none !important; border-bottom-width:medium !important; display:inline-block; font-family:cursive; font-size:9pt; height:0 !important; left:70px; line-height:16px !important; margin-top:16px; position:absolute; text-align:justify !important; width:720px; z-index:2; } .table_header:nth-of-type(6) { display:none; } span[id*="tagRow"] { display:block !important; } span[id*="tagLinks"] { display:none !important; } a, .td1, .td2, .category_totals { -webkit-transition:all 0.25s ease-in-out 0s; transition:all 0.25s ease-in-out 0s; } #list_surround .status_selected, #list_surround .status_not_selected { -webkit-background-clip:padding-box !important; background-clip:padding-box !important; background-color:transparent; background-image:url(http://i62.tinypic.com/iydhyu.jpg[/IMG]); background-position:0 0; background-repeat:no-repeat no-repeat; background-size:contain; border:1px solid transparent; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; display:block; left:-300px; padding:0; position:absolute; top:20px; width:263px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-image:url(http://i62.tinypic.com/2nura5c.jpg[/IMG]); background-position:100% 0; top:140px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i59.tinypic.com/24eako9.jpg[/IMG]); background-position:0 0; top:260px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i60.tinypic.com/fkuu02.jpg[/IMG]); background-position:100% 0; top:380px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i58.tinypic.com/av0o6b.jpg[/IMG]); background-position:0 0; top:500px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i58.tinypic.com/21kwapv.jpg[/IMG]); background-position:100% 0; top:620px; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color:transparent; display:block; font-size:0; height:113px; width:263px; } .header_cw { background-color:transparent; background-image:url(http://i47.tinypic.com/1juk9s.png); background-position:50% 150px; background-repeat:no-repeat no-repeat; height:50px; margin-bottom:0; margin-top:-300px; } .header_completed { background-color:transparent; background-image:url(http://i61.tinypic.com/30sx1kx.jpg[/IMG]); background-position:50% 150px; background-repeat:no-repeat no-repeat; height:100px; margin-bottom:0; margin-top:-100px; } .header_onhold { background-color:transparent; background-image:url(http://i48.tinypic.com/2n8deth.png); background-position:50% 150px; background-repeat:no-repeat no-repeat; height:50px; margin-bottom:0; margin-top:-100px; } .header_dropped { background-color:transparent; background-image:url(http://i50.tinypic.com/ehk8b7.jpg); background-position:50% 150px; background-repeat:no-repeat no-repeat; height:50px; margin-bottom:0; margin-top:-100px; } .header_ptw { background-color:transparent; background-image:url(http://i50.tinypic.com/bimm44.png); background-position:50% 150px; background-repeat:no-repeat no-repeat; height:75px; margin-bottom:0; margin-top:-100px; } .status_selected { display:block; } .status_not_selected { display:block; } .status_not_selected { opacity:0.7; } .status_not_selected:hover { color:transparent; opacity:1; } #list_surround { left:0 !important; margin:auto !important; position:absolute !important; right:0 !important; } /*COLOR OF THE "AIRING EXT." TEXT*/ .animetitle + small { color:#CC33FF !important; font-weight:bold; } * { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out;} /*DVD COVER HOVER GLITCH FIX (Chrome/Safari/Firefox/Opera only)*/ .hide:hover:after { background: transparent; content: " "; height: 75px; left: 0; position: absolute; top: 0; width: 210px; z-index: 20; } |
Akito707Aug 19, 2015 7:03 AM
Aug 17, 2015 12:25 PM
#217
iSable said: Only recently joined MAL. Took me a while to get the lists up to date. But once I did I ended up here while searching for the ways to improve the looks of the lists. I sort of ended up mashing up different styles and codes I found here while editing here and there apart from doing additional stuff with Adobe Photoshop. This is what I got. Feel free to use :) /*Fonts*/ @import url("http://fonts.googleapis.com/css?family=Nova+Slim"); @import url(http://fonts.googleapis.com/css?family=Carrois+Gothic+SC); @import url("http://fonts.googleapis.com/css?family=Tangerine"); @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css "; @import "https://dl.dropboxusercontent.com/u/78340470/anime.css"; @import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css"; /* Got a question or want to learn more? Try this link: http://myanimelist.net/forum/?topicid=419405&show=0#post1 */ /* BACKGROUND IMAGE This is the main background image for the whole page. Change the image link to the background you want! If you're not seeing a background, make sure you are copied the entire CSS code or added any new background image codes correctly. Also your image link may be broken, try uploading a new background then! */ body { background-image: url(http://signavatar.com/29213_s.gif); background-attachment: fixed; } /* HEADER COLOR AND FONT These codes control the main headers' fonts and colors. Every header is above each part of your list (they say things like Currently Watching, Completed, Dropped, etc). if you don't want a solid color there, go to the line that starts with background-color and replace it the color type (blue for example) with the word "transparent" (no quotations). */ .header_title { background-image: url(http://img15.imageshack.us/img15/228/frame6518.png); color:orange; font-family: tangerine; font-size:54px; border-radius: 20px 20px 0px 0px; text-align: center; text-shadow: 3px -1px 5px #0C0C0C; } /* SUB-HEADERS BACKGROUND COLOR COLOR Below each main header is the sub-header which says Score, Episodes, Tags, etc. */ .table_header { background-image:url(http://img15.imageshack.us/img15/228/frame6518.png); font-size:12px; } /* ANIME/MANGA TITLE FONTS This is the type and color of the anime/manga titles on your list, like Bleach, Vampire Knight, etc. */ .animetitle, .animetitle:visited { color:#FFFF00; font-family: 'Carrois Gothic SC', sans-serif; font-size:12px; } /* LIST FONTS This is the type and color for more of the numbers, links, and words on the list itself! */ .td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright { color:white; font-family: 'Carrois Gothic SC', sans-serif; font-size:12px; } /* LIST WIDTH Use this to increase the width of your list! */ #list_surround { width:700px; } #list_surround { position: absolute !important; left: 180px !important; top: 10px !important;} /* REPOSITION MAIN BACKGROUND Change the position your background starts on your screen from with the two properties after "background-position" below. You replace 'center' and '43%' with two other properties, they can be any of the following: left, top, bottom, right, or center. So if you want your background to start from the center of the screen, use "center center" after background-position in the code below, replacing "center 43%". If you want it to start from the top and left, use "top left" If you want it to start from the top and center, use "top center". If you want it to start from the right and top, use "right top" If you want it to start from the right and bottom, use "right bottom" and so forth... Additionally, you can change "left" to a % to determine how far left or right the background starts from. For example "30% top" will start the background from the top but 30% of the pic's width from the left of the layout. You can also change top to a % to change the amount you want to start it from the top or bottom. */ body{ background-position: center 43%;} /*OTHER CODES Important codes for the layout's setup. Don't mess with these unless you know exactly what you're doing. If you want to customize more on the page, use the link at the top of this CSS, or ask in my club! */ body { font-weight: light; background-repeat: no-repeat; background-color; } #list_surround { margin:auto; background-image:url(); } a { text-decoration:none; } a:visited { text-decoration:none; } a:hover, a:visited:hover { font-weight:bold; text-decoration:underline; } .category_totals, .td1, .td2, #grand_totals, #copyright { background-image:url(http://img15.imageshack.us/img15/228/frame6518.png); border-width:0; padding:2px; } .category_totals:HOVER, .td1:HOVER, .td2:HOVER, #grand_totals:HOVER, #copyright:HOVER {background-color:black; border-width:0; padding:2px; } #copyright:after { content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs or info."; } .status_selected { background-color:black; padding:2px; color:white; text-decoration: blink; } .status_not_selected { background-color:black; padding:2px; color:white; } .status_selected a{ color:#FFFF00; } .status_not_selected a{ color:white; } .thickbox { color:#FFFF00; font-family:'Carrois Gothic SC', sans-serif; font-size:12px; } .header_title { height:52px; padding:2px; } .table_header { border-width:0; font-weight:bold; padding:2px; } .category_totals { height:30px; } #copyright, #grand_totals { text-align: center; margin:0 auto; } body { background-size: cover; } a, .td1, .td2 { color:#FFFFFF; font-weight:normal; overflow:hidden; } #list_surround small a { color: gray !important; color: transparent !important; background: url(http://i1302.photobucket.com/albums/ag140/shoutaazuma/more2_zpsd5e9e3eb.png) no-repeat center; font-size: 13px; text-shadow: none !important; } a.List_LightBox { color: gray !important; color: transparent !important; background: url(http://i1302.photobucket.com/albums/ag140/shoutaazuma/plus2_zps3678f301.png) no-repeat center !important; } #list_surround .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/NCjBPmU.png); background-position:0px 0px; background-repeat:repeat repeat; display:block; height:80px; right:-35px; padding:0; position:fixed; top:60px; width:250px; overflow:auto; } #list_surround .status_not_selected:hover, #list_surround .status_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/LgwE6iN.png); background-position:0px 0px; background-repeat:repeat repeat; display:block; height:80px; right:-5px; padding:0; position:fixed; top:60px; width:250px; border:5px solid rgba(0,0,0,0.6); border-radius:11px; transition: right 0.25s ease-in-out 0s ; -o-transition: all 0.25s ease-in-out 0s ; -moz-transition: all 0.25s ease-in-out 0s ; -webkit-transition: all 0.25s ease-in-out 0s ; overflow:auto; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/NCjBPmU.png); background-position:0px -80px; background-repeat:repeat repeat; top:150px; } #list_surround .status_selected + .status_not_selected:hover, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected:hover { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/LgwE6iN.png); background-position:0px -80px; background-repeat:repeat repeat; top:150px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/NCjBPmU.png); background-position:0px -160px; background-repeat:repeat repeat; top:240px; } #list_surround .status_selected + .status_not_selected + .status_not_selected:hover, #list_surround .status_not_selected + .status_selected + .status_not_selected:hover, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected:hover { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/LgwE6iN.png); background-position:0px -160px; background-repeat:repeat repeat; top:240px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/NCjBPmU.png); background-position:0px -240px; background-repeat:repeat repeat; top:330px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected:hover, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected:hover, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected:hover, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected:hover { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/LgwE6iN.png); background-position:0px -240px; background-repeat:repeat repeat; top:330px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/NCjBPmU.png); background-position:0px -320px; background-repeat:repeat repeat; display:inline; top:420px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected:hover, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected:hover, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected:hover, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected:hover, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected:hover { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/LgwE6iN.png); background-position:0px -320px; background-repeat:repeat repeat; display:inline; top:420px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/NCjBPmU.png); background-position:0px -400px; background-repeat:no-repeat no-repeat; display:inline; top:510px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected:hover, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected:hover, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected:hover, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected:hover, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected:hover, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected:hover { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/LgwE6iN.png); background-position:0px -400px; background-repeat:no-repeat no-repeat; display:inline; top:510px; } #list_surround { background-attachment:scroll; background-image:none; background-position:0 0; border-bottom-color:#292929; border-bottom-style:solid; border-bottom-width:0; border-left-color:#292929; border-left-style:solid; border-left-width:0; border-right-color:#292929; border-right-style:solid; border-right-width:0; border-radius:10px; height:auto; margin:0px auto 30px; position:absolute; top:20px; left:220px; width:750px; } #list_surround .status_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:78px 0 0 218px; width:30px; } #list_surround .status_not_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:78px 0 0 218px; width:30px; } #list_surround .animetitle + small { color:#FF6600; } #list_surround .category_totals { padding:5px; text-align:center; color:#FFFFFF; font-weight:normal; background-color: rgba(0, 0, 0, 0.6); border-radius: 0px 0px 20px 20px; } #list_surround .category_totals:hover { background-color:rgba(0,153,51,0.6); transition: all 0.25s ease-in-out 0s ; } #list_surround #grand_totals { display:none; } #mal_cs_listinfo a strong { color:#FFFFFF; font-family:'Carrois Gothic SC', sans-serif; font-size:11px; font-variant:normal; font-weight:normal; text-decoration:underline; text-transform:none; } #mal_cs_otherlinks strong { color:rgba(0,0,0,0.6); font-family:'Carrois Gothic SC', sans-serif; font-size:11px; font-variant:normal; } .borderRBL { color:#00FFFF !important; } #list_surround .header_title span { font: 54px Tangerine; font-variant:'Carrois Gothic SC', sans-serif; } #list_surround .status_not_selected a { opacity:0; } #list_surround .status_selected a { opacity:0; } #copyright { color:#FF6600; font-family: 'Carrois Gothic SC', sans-serif;; font-size:10px; height:15px; position:absolute; text-align:center !important; width:600px; } #copyright a { color:#FF6600; } #copyright { } .td1, .td2{ background-color: rgba(0, 0, 0, 0.6); } tr:hover [class^="td"] { background-color:rgba(255,255,255,0.6); transition: all 0.25s ease-in-out 0s ; -o-transition: all 0.25s ease-in-out 0s ; -moz-transition: all 0.25s ease-in-out 0s ; -webkit-transition: all 0.25s ease-in-out 0s ; } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align:left; } *, #inlineContent { font-family: 'Carrois Gothic SC', sans-serif; font-size: 14px; text-decoration: none; } #inlineContent { display: block !important; height: 100%; width: 100%; left: 0; position: fixed; top: 0; background: transparent; z-index: -1; } /* COVER AREA The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS to see a DVD or manga cover). Move the cover's location around with left and top. Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away. Increase height and width to make the pics bigger. Delete border-style: solid; to remove the border. For changing the original background color see the bottom of the original post: http://myanimelist.net/forum/?topicid=563993 */ table:hover + .hide { background-size: cover; right: 10px; top: 600px; height: 310px; width: 200px; padding-bottom: 0px; border-style: solid; border-color: black; border-top: 1px solid black;; border-left: 1px solid black; border-right: 1px solid black; border-bottom: 1px solid black; border-radius: 25px 25px 25px 25px; background-color: transparent; background-position: center 50% !important; background-repeat: no-repeat !Important; display: block !important; position: fixed; } /* PREVIEW MSG ABOVE COVERS Remove content: "preview"; to remove the PREVIEW text. Change the text in quotations after content to what you want it to say above your cover pic. Top and width controls the position of the text. */ .hide:before { background: transparent; padding-bottom: 5px; position: absolute; text-align: center; width: 225px; top: -25px; border-radius: 25px 25px 0 0; } P.S.: wallpapers are set to be rotating on refresh, so if You want to have Your own - just change url in body { background-image: url(http://signavatar.com/29213_s.gif); I'm using this one, but it has stopped working u.u Probably it was deleted. |
Aug 29, 2015 10:31 PM
#218
| Finally finished My anime list, I don't think I'll make any new ones. Just change my username in the css cover list code with yours and it'll be fixed so don't worry about that. I had to seperate the css code or else you'd have my list covers and not your own, and you couldn't edit it. That's why there are 2 links. I found a table with covers from someone else who made it, I just edited some part of it, moved things around changed backround pic and added a cursor. Preview Cursor  Preview Boku No Hero Academia List:  Code: @import url(https://dl.dropboxusercontent.com/s/9tyq625kfdp5nbl/BokunoHeroList1.css?dl=0); @import url(http://mal-fellow-writer.appspot.com/anime/Madara22/?covers=http://dl.dropbox.com/u/49469857/MAL/premade/formats/covers/more); body { } |
Madara22Aug 29, 2015 10:41 PM
 |
Sep 6, 2015 12:06 PM
#219
| I didn't do the CSS for this layout but I did edit the bg, headers and buttons for the NGNL theme. The coding credit goes to Shishio's club. I still use this theme but I don't mind sharing it. Anime  @import "https://dl.dropboxusercontent.com/u/78340470/Icon%20Style%20Menu%20Bar/pinkversion/pinkiconbar.css"; @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); /* MAIN BACKGROUND The space background by default. */ body { background-attachment:fixed; background-clip:border-box; background-color: black; background-image: url(http://i.imgur.com/uoWHVJ8.jpg); background-position:0 50%, 0 0; background-repeat:no-repeat no-repeat; background-size:cover; font-family:calibri; } /* /* LIST BACKGROUND COLOR, ROW HEIGHT AND FLASH Adjust the opacity and color of the list itself with the first two sets of code, as well as the height of the rows. td1 is odd numbered rows, td2 is even. The third set of code is for the row color and opacity on height. Google RGBA color generator for easy to copy color and opacity numbers customized for you. */ .td1 { background-color:rgba(0, 0, 0, 0.5); height:65px; } .td2 { background-color:rgba(0, 0, 0, 0.5); height:65px; } tr:hover [class^="td"] { transition: .1s linear; background-color: rgba(25, 225, 255, 0.6); } /* /* SIDE BUTTONS */ #list_surround .status_selected, #list_surround .status_not_selected { -webkit-background-clip:padding-box !important; background-clip:padding-box !important; background-color:transparent; background-image:url(http://i.imgur.com/3M7mvuH.png); background-position:0 0; background-repeat:no-repeat no-repeat; background-size:contain; border:1px solid transparent; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; display:block; left:-300px; padding:0; position:absolute; top:20px; width:263px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-image:url(http://i.imgur.com/E7HoWdK.png); background-position:100% 0; top:140px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i.imgur.com/kAB8vvE.png); background-position:0 0; top:260px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i.imgur.com/4TiCHrT.png); background-position:100% 0; top:380px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i.imgur.com/TTmIE3S.png); background-position:0 0; top:500px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i.imgur.com/OVEeikR.png); background-position:100% 0; top:620px; } /* CUSTOM HEADERS */ .header_cw { background-color: transparent; background-image: url("http://i.imgur.com/EDHbqws.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 5; margin-top: -50px; } .header_completed { background-color: transparent; background-image: url("http://i.imgur.com/Yerc3bb.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -50px; } .header_onhold { background-color: transparent; background-image: url("http://i.imgur.com/IRLVjgB.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -50px; } .header_dropped { background-color: transparent; background-image: url("http://i.imgur.com/M0rKBf2.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -50px; } .header_ptw { background-color: transparent; background-image: url("http://i.imgur.com/HMwxqt2.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -50px; } /* TOP COLORS The colors for the top text (#, anime title, score, etc) and the panel iteself. */ .table_header { background-color:transparent; } .table_header, .table_header a{ color: white;} /* LIST FONT COLOR */ .td1, .td2, .category_totals { color:white; } /* OTHER CODES Ask in the original topic for this layout of in my club if you need to learn more about customizing this layout. */ a { color:#FFFFFF; text-decoration:none; text-shadow:none; } a:hover { color:#fff; text-decoration:underline; } .table_header:first-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:10px; border-top-right-radius:0; } .table_header:nth-of-type(2) { padding-left:35px; text-align:left; } .table_header:last-of-type { border-bottom-left-radius:10; border-bottom-right-radius:10; border-top-left-radius:0; border-top-right-radius:10px; } .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border:0 none; padding:4px; text-align:center; vertical-align:top; } .borderRBL { line-height:normal !important; } [cellspacing="0"] { line-height:17px; } .category_totals { background-color:rgba(255, 0, 255, 0.4); border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:0; border-top-right-radius:0; color:white; text-align:center; } [class^="header_"] * { background-repeat:no-repeat no-repeat; font-size:0; height:200px; line-height:24px; padding-bottom:4px; text-align:right; vertical-align:bottom; } .header_title { border-bottom-left-radius:4px; border-bottom-right-radius:4px; border-top-left-radius:4px; border-top-right-radius:4px; color:#FFFFFF; display:inline-block; font-style:italic; height:auto; padding:0 8px 0 0; text-shadow:rgba(0, 0, 0, 0.14902) 0 1px 1px; } #grand_totals { background-color:transparent; border:0 none; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; color:#FFFFFF; line-height:20px; min-height:20px; padding:8px; text-align:center; vertical-align:middle; } #copyright { background-color:rgba(180, 32, 48, 0.6); border-bottom-left-radius:3px; border-bottom-right-radius:3px; border-top-left-radius:3px; border-top-right-radius:3px; color:#EEEEEE; line-height:17px; margin-top:10px; padding:8px; text-align:center; } #copyright::after { } .hide { background-color:rgba(248, 162, 200, 0.701961); background-position:50% 50%; background-repeat:no-repeat no-repeat; background-size:cover; border:1px solid #FFFFFF; border-bottom-left-radius:7px; border-bottom-right-radius:7px; border-top-left-radius:7px; border-top-right-radius:0; display:inline-block !important; height:55px; margin-left:33px; margin-top:-65px; position:absolute; width:35px; } .hide:hover { background-color:transparent; background-repeat:no-repeat no-repeat; background-size:cover; border-bottom-left-radius:20px; border-bottom-right-radius:20px; border-top-left-radius:20px; border-top-right-radius:20px; box-shadow:rgba(63, 52, 60, 0.54902) 0 0 8px 8px; margin-left:-140px; padding-right:150px; padding-top:220px !important; position:absolute; z-index:1; } .hide:hover:after { background: transparent; content: " "; height: 75px; left: 0; position: absolute; top: 0; width: 210px; z-index: 20; } .td1:nth-of-type(2), .td2:nth-of-type(2) { padding-left:35px; text-align:left; } .td1:nth-of-type(6), .td2:nth-of-type(6) { background-attachment:scroll; background-color:transparent; background-image:none; background-position:0 0; background-repeat:repeat repeat; border-bottom-style:none !important; border-bottom-width:medium !important; display:inline-block; font-family:cursive; font-size:9pt; height:0 !important; left:70px; line-height:16px !important; margin-top:16px; position:absolute; text-align:justify !important; width:720px; z-index:2; } .table_header:nth-of-type(6) { display:none; } span[id*="tagRow"] { display:block !important; } span[id*="tagLinks"] { display:none !important; } a, .td1, .td2, .category_totals { -webkit-transition:all 0.25s ease-in-out 0s; transition:all 0.25s ease-in-out 0s; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color:transparent; display:block; font-size:0; height:113px; width:263px; } .status_selected { display:block; } .status_not_selected { display:block; } .status_not_selected { opacity:0.7; } .status_not_selected:hover { color:transparent; opacity:1; } #list_surround { left:0 !important; margin:auto !important; position:absolute !important; right:0 !important; } .animetitle { font-weight: bold;} .animetitle + small { color:#CC33FF !important; font-weight:bold; } * { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out;} .table_header:nth-last-of-type(2) { border-radius: 0 10px 0 0;} .td1:nth-of-type(6), .td2:nth-of-type(6){ background-color: transparent !important; font-family: helvetica;} td:nth-of-type(6) small { font-size: 0; color: cyan; left: 42px; position: relative; } td:nth-of-type(6) small:after { font-size: 12px !important; content: "Tags" } /* Media query for devices above 1000px */ @media all and (min-device-width:1001px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -270px;} #list_surround { left: 24% !important;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 7pt !important; width: 370px !important; padding-top: 8px;} } /* Media query for devices above 1024px */ @media all and (min-device-width:1025px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -300px;} #list_surround { left: 17% !important;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 7pt !important; width: 370px !important;} } /* Media query for devices above 1140px */ @media all and (min-device-width:1141px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -290px;} #list_surround { left: 17% !important; width: 850px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 530px !important;} } /* Media query for devices above 1280px */ @media all and (min-device-width:1281px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -330px;} #list_surround { left: 18% !important; width: 900px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 575px !important;} } /* Media query for devices above 1440px */ @media all and (min-device-width:1441px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -385px;} #list_surround { left: 17% !important; width: 960px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 635px !important;} #list_surround { background-position: center -40px;} } /* Media query for devices above 1680px */ @media all and (min-device-width:1681px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -430px;} #list_surround { left: 16% !important; width: 1050px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 720px !important;} } /* Media query for devices above 1920px */ @media all and (min-device-width:1921px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -530px;} #list_surround { left: 10% !important; width: 1100px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 770px !important;} } Manga  @import "https://dl.dropboxusercontent.com/u/78340470/Icon%20Style%20Menu%20Bar/pinkversion/pinkiconbar.css"; @import "https://dl.dropboxusercontent.com/s/aunymjyr9cqdxjl/manga.css"; /* MAIN BACKGROUND The space background by default. */ body { background-attachment:fixed; background-clip:border-box; background-color: black; background-image: url(http://i.imgur.com/uoWHVJ8.jpg); background-position:0 50%, 0 0; background-repeat:no-repeat no-repeat; background-size:cover; font-family:calibri; } /* /* LIST BACKGROUND COLOR, ROW HEIGHT AND FLASH Adjust the opacity and color of the list itself with the first two sets of code, as well as the height of the rows. td1 is odd numbered rows, td2 is even. The third set of code is for the row color and opacity on height. Google RGBA color generator for easy to copy color and opacity numbers customized for you. */ .td1 { background-color:rgba(0, 0, 0, 0.5); height:65px; } .td2 { background-color:rgba(0, 0, 0, 0.5); height:65px; } tr:hover [class^="td"] { transition: .1s linear; background-color: rgba(25, 225, 255, 0.6); } /* /* SIDE BUTTONS */ #list_surround .status_selected, #list_surround .status_not_selected { -webkit-background-clip:padding-box !important; background-clip:padding-box !important; background-color:transparent; background-image:url(http://i.imgur.com/g8fDPRY.png); background-position:0 0; background-repeat:no-repeat no-repeat; background-size:contain; border:1px solid transparent; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; display:block; left:-300px; padding:0; position:absolute; top:20px; width:263px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-image:url(http://i.imgur.com/E7HoWdK.png); background-position:100% 0; top:140px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i.imgur.com/kAB8vvE.png); background-position:0 0; top:260px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i.imgur.com/4TiCHrT.png); background-position:100% 0; top:380px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i.imgur.com/0h1Q9fN.png); background-position:0 0; top:500px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i.imgur.com/OVEeikR.png); background-position:100% 0; top:620px; } /* CUSTOM HEADERS */ .header_cw { background-color: transparent; background-image: url("http://i.imgur.com/96qP1z5.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 5; margin-top: -50px; } .header_completed { background-color: transparent; background-image: url("http://i.imgur.com/Yerc3bb.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -50px; } .header_onhold { background-color: transparent; background-image: url("http://i.imgur.com/IRLVjgB.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -50px; } .header_dropped { background-color: transparent; background-image: url("http://i.imgur.com/M0rKBf2.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -50px; } .header_ptw { background-color: transparent; background-image: url("http://i.imgur.com/0JBDBPx.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -50px; } /* TOP COLORS The colors for the top text (#, anime title, score, etc) and the panel iteself. */ .table_header { background-color:transparent; } .table_header, .table_header a{ color: white;} /* LIST FONT COLOR */ .td1, .td2, .category_totals { color:white; } /* OTHER CODES Ask in the original topic for this layout of in my club if you need to learn more about customizing this layout. */ a { color:#FFFFFF; text-decoration:none; text-shadow:none; } a:hover { color:#fff; text-decoration:underline; } .table_header:first-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:10px; border-top-right-radius:0; } .table_header:nth-of-type(2) { padding-left:35px; text-align:left; } .table_header:last-of-type { border-bottom-left-radius:10; border-bottom-right-radius:10; border-top-left-radius:0; border-top-right-radius:10px; } .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border:0 none; padding:4px; text-align:center; vertical-align:top; } .borderRBL { line-height:normal !important; } [cellspacing="0"] { line-height:17px; } .category_totals { background-color:rgba(255, 0, 255, 0.4); border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:0; border-top-right-radius:0; color:white; text-align:center; } [class^="header_"] * { background-repeat:no-repeat no-repeat; font-size:0; height:200px; line-height:24px; padding-bottom:4px; text-align:right; vertical-align:bottom; } .header_title { border-bottom-left-radius:4px; border-bottom-right-radius:4px; border-top-left-radius:4px; border-top-right-radius:4px; color:#FFFFFF; display:inline-block; font-style:italic; height:auto; padding:0 8px 0 0; text-shadow:rgba(0, 0, 0, 0.14902) 0 1px 1px; } #grand_totals { background-color:transparent; border:0 none; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; color:#FFFFFF; line-height:20px; min-height:20px; padding:8px; text-align:center; vertical-align:middle; } #copyright { background-color:rgba(180, 32, 48, 0.6); border-bottom-left-radius:3px; border-bottom-right-radius:3px; border-top-left-radius:3px; border-top-right-radius:3px; color:#EEEEEE; line-height:17px; margin-top:10px; padding:8px; text-align:center; } #copyright::after { } .hide { background-color:rgba(248, 162, 200, 0.701961); background-position:50% 50%; background-repeat:no-repeat no-repeat; background-size:cover; border:1px solid #FFFFFF; border-bottom-left-radius:7px; border-bottom-right-radius:7px; border-top-left-radius:7px; border-top-right-radius:0; display:inline-block !important; height:55px; margin-left:33px; margin-top:-65px; position:absolute; width:35px; } .hide:hover { background-color:transparent; background-repeat:no-repeat no-repeat; background-size:cover; border-bottom-left-radius:20px; border-bottom-right-radius:20px; border-top-left-radius:20px; border-top-right-radius:20px; box-shadow:rgba(63, 52, 60, 0.54902) 0 0 8px 8px; margin-left:-140px; padding-right:150px; padding-top:220px !important; position:absolute; z-index:1; } .hide:hover:after { background: transparent; content: " "; height: 75px; left: 0; position: absolute; top: 0; width: 210px; z-index: 20; } .td1:nth-of-type(2), .td2:nth-of-type(2) { padding-left:35px; text-align:left; } .td1:nth-of-type(6), .td2:nth-of-type(6) { background-attachment:scroll; background-color:transparent; background-image:none; background-position:0 0; background-repeat:repeat repeat; border-bottom-style:none !important; border-bottom-width:medium !important; display:inline-block; font-family:cursive; font-size:9pt; height:0 !important; left:70px; line-height:16px !important; margin-top:16px; position:absolute; text-align:justify !important; width:720px; z-index:2; } .table_header:nth-of-type(6) { display:none; } span[id*="tagRow"] { display:block !important; } span[id*="tagLinks"] { display:none !important; } a, .td1, .td2, .category_totals { -webkit-transition:all 0.25s ease-in-out 0s; transition:all 0.25s ease-in-out 0s; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color:transparent; display:block; font-size:0; height:113px; width:263px; } .status_selected { display:block; } .status_not_selected { display:block; } .status_not_selected { opacity:0.7; } .status_not_selected:hover { color:transparent; opacity:1; } #list_surround { left:0 !important; margin:auto !important; position:absolute !important; right:0 !important; } .animetitle { font-weight: bold;} .animetitle + small { color:#CC33FF !important; font-weight:bold; } * { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out;} .table_header:nth-last-of-type(2) { border-radius: 0 10px 0 0;} .td1:nth-of-type(6), .td2:nth-of-type(6){ background-color: transparent !important; font-family: helvetica;} td:nth-of-type(6) small { font-size: 0; color: cyan; left: 42px; position: relative; } td:nth-of-type(6) small:after { font-size: 12px !important; content: "Tags" } /* Media query for devices above 1000px */ @media all and (min-device-width:1001px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -270px;} #list_surround { left: 24% !important;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 7pt !important; width: 370px !important; padding-top: 8px;} } /* Media query for devices above 1024px */ @media all and (min-device-width:1025px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -300px;} #list_surround { left: 17% !important;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 7pt !important; width: 370px !important;} } /* Media query for devices above 1140px */ @media all and (min-device-width:1141px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -290px;} #list_surround { left: 17% !important; width: 850px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 530px !important;} } /* Media query for devices above 1280px */ @media all and (min-device-width:1281px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -330px;} #list_surround { left: 18% !important; width: 900px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 575px !important;} } /* Media query for devices above 1440px */ @media all and (min-device-width:1441px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -385px;} #list_surround { left: 17% !important; width: 960px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 635px !important;} #list_surround { background-position: center -40px;} } /* Media query for devices above 1680px */ @media all and (min-device-width:1681px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -430px;} #list_surround { left: 16% !important; width: 1050px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 720px !important;} } /* Media query for devices above 1920px */ @media all and (min-device-width:1921px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -530px;} #list_surround { left: 10% !important; width: 1100px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 770px !important;} } |
 |
Sep 27, 2015 12:11 PM
#220
| One Piece Layout. This is my old layout so I'm donating it for anyone who wants to use it. Preview here: http://i.imgur.com/8W6Y1cK.png Code [@import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); /* Got a question or want to learn more? Try this link: http://myanimelist.net/forum/?topicid=419405&show=0#post1 */ /* BACKGROUND IMAGE This is the main background image for the whole page. Change the image link to the background you want! If you're not seeing a background, make sure you are copied the entire CSS code or added any new background image codes correctly. Also your image link may be broken, try uploading a new background then! */ body { background-image: url(http://i.imgur.com/2swtfSy.png); background-attachment: fixed; } /* HEADER COLOR AND FONT These codes control the main headers' fonts and colors. Every header is above each part of your list (they say things like Currently Watching, Completed, Dropped, etc). if you don't want a solid color there, go to the line that starts with background-color and replace it the color type (blue for example) with the word "transparent" (no quotations). */ .header_title { background-color:blue; color:yellow; font-family:english111 vivace bt; font-size:48px; } /* SUB-HEADERS BACKGROUND COLOR COLOR Below each main header is the sub-header which says Score, Episodes, Tags, etc. */ .table_header { background-color:yellow; } /* ANIME/MANGA TITLE FONTS This is the type and color of the anime/manga titles on your list, like Bleach, Vampire Knight, etc. */ .animetitle, .animetitle:visited { color:black; font-family:'Arial Black', 'Arial Bold', Gadget, sans-serif; font-size:14px; } /* LIST FONTS This is the type and color for more of the numbers, links, and words on the list itself! */ .td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright { color:red; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; } /* LIST WIDTH Use this to increase the width of your list! */ #list_surround { width:950px; } /* REPOSITION MAIN BACKGROUND Change the position your background starts on your screen from with the two properties after "background-position" below. You replace 'center' and '43%' with two other properties, they can be any of the following: left, top, bottom, right, or center. So if you want your background to start from the center of the screen, use "center center" after background-position in the code below, replacing "center 43%". If you want it to start from the top and left, use "top left" If you want it to start from the top and center, use "top center". If you want it to start from the right and top, use "right top" If you want it to start from the right and bottom, use "right bottom" and so forth... Additionally, you can change "left" to a % to determine how far left or right the background starts from. For example "30% top" will start the background from the top but 30% of the pic's width from the left of the layout. You can also change top to a % to change the amount you want to start it from the top or bottom. */ body{ background-position: center 43%;} /*OTHER CODES Important codes for the layout's setup. Don't mess with these unless you know exactly what you're doing. If you want to customize more on the page, use the link at the top of this CSS, or ask in my club! */ body { font-weight: light; background-repeat: no-repeat; background-color: black; } #list_surround { margin:auto; background-image:url(); } a { text-decoration:none; } a:visited { text-decoration:none; } a:hover, a:visited:hover { color:red; text-decoration:underline; } .category_totals, .td1, .td2, #grand_totals, #copyright { background-image:url(http://img15.imageshack.us/img15/228/frame6518.png); border-width:0; padding:2px; } .category_totals:HOVER, .td1:HOVER, .td2:HOVER, #grand_totals:HOVER, #copyright:HOVER {background-color:black; border-width:0; padding:2px; } #copyright:after { Layout by Rebel Roo } #copyright, #grand_totals { text-align: center; margin:0 auto; } /* SIDE BUTTONS */ #list_surround .status_selected, #list_surround .status_not_selected { -webkit-background-clip:padding-box !important; background-clip:padding-box !important; background-color:transparent; background-image:url(http://i.imgur.com/RshYi3T.png); background-position:0 0; background-repeat:no-repeat no-repeat; background-size:contain; border:1px solid transparent; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; display:block; left:-300px; padding:0; position:absolute; top:20px; width:150px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-image:url(http://i.imgur.com/YQuwlDH.png); background-position:100% 0; top:140px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i.imgur.com/B49ppSM.png); background-position:0 0; top:260px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i.imgur.com/o7FnhfM.png); background-position:100% 0; top:380px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i.imgur.com/nL8ouyq.png); background-position:0 0; top:500px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i.imgur.com/WiVDmuI.png); background-position:100% 0; top:620px; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color:transparent; display:block; font-size:0; height:113px; width:263px; } .status_selected { display:block; } .status_not_selected { display:block; } .status_not_selected { opacity:0.7; } .status_not_selected:hover { color:transparent; opacity:1; } #list_surround { left:0 !important; margin:auto !important; position:absolute !important; right:0 !important; } body { background-size: 100% 100%; } #list_surround { width: 750px !important; } #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered { box-sizing: border-box; -moz-box-sizing: border-box; -moz-transition: all 0.4s ease 0s; -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; background: none no-repeat scroll 100% 0 transparent; border: 0 none; height: 0 !important; overflow: hidden; padding: 32px 0 0 !important; position: fixed; right: 4px; text-align: center; top: 4px; z-index: 10; width: 150px !important; } #mal_cs_listinfo:hover, #mal_cs_links:hover, #mal_cs_otherlinks:hover, #mal_cs_powered:hover { height: 200px !important; padding-top: 32px !important; } #mal_cs_listinfo div, #mal_cs_links div, #mal_cs_otherlinks div, #mal_cs_powered div, #mal_cs_powered dd { -moz-transition: opacity 0.4s ease-in-out 0s; -webkit-transition: opacity 0.4s ease-in-out 0s; -o-transition: opacity 0.4s ease-in-out 0s; transition: opacity 0.4s ease-in-out 0s; background-color: rgba(255,255,255,0.6); border-radius: 3px 0 0 0; font-size: 0 !important; line-height: 0; margin: 0 !important; opacity: 0; padding: 8px 0 0 !important; } #mal_cs_listinfo:hover div, #mal_cs_links:hover div, #mal_cs_otherlinks:hover div, #mal_cs_powered:hover div, #mal_cs_powered:hover dd { opacity: 1; } #mal_cs_listinfo div:nth-of-type(2), #mal_cs_links div:nth-of-type(2), #mal_cs_otherlinks div:nth-of-type(2), #mal_cs_powered div:nth-of-type(2) { border-radius: 0 0 3px 3px; padding: 4px 0 8px !important; } #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a { background-color: rgba(255,36,36,0.6) !important; border-radius: 3px 3px 3px 3px; display: block; font: 13px/17px 'Arial', sans-serif !important; margin: 4px 12px 0; padding: 3px 0 !important; text-decoration: none; } #mal_cs_listinfo a:nth-of-type(1), #mal_cs_links a:nth-of-type(1), #mal_cs_otherlinks a:nth-of-type(1), #mal_cs_powered a:nth-of-type(1) { margin-top: 0; } #mal_cs_listinfo a:hover, #mal_cs_links a:hover, #mal_cs_otherlinks a:hover { background-color: #FF0000 !important; } #mal_cs_listinfo strong a strong { font-weight: normal; } #mal_cs_otherlinks strong { color: #333333; display: block; font: bold 13px/17px 'Arial',sans-serif !important; padding: 0 4px 4px; text-shadow: 0 1px 1px #FFFFFF; } #mal_cs_otherlinks strong a { background: none transparent !important; border-radius: 0 0 0 0; color: #333333; display: inline; font: bold 13px/17px 'Arial',sans-serif !important; margin: 0; padding: 0; text-shadow: 0 1px 1px #FFFFFF; } #mal_cs_powered a { background-color: rgba(255,255,255, 0.6) !important; border-radius: 3px 0 0 0 !important; display: block !important; margin: 0 !important; opacity: 0; padding: 8px 0 0 !important; } #mal_cs_powered:hover a { opacity: 1; } #mal_cs_powered a img { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background: url("http://i.imgur.com/fGTjBC3.png") no-repeat scroll 50% 6px rgba(255,36,36,0.6); border-radius: 3px 3px 3px 3px; display: block; height: 0; margin: 0 12px; padding: 23px 0 0 126px; width: 0; } #mal_cs_powered a img:hover { background-color: #FF0000; } #mal_cs_powered #search { border-radius: 0 0 3px 3px; padding: 8px !important; position: relative; } #searchBox { box-sizing: border-box; -moz-box-sizing: border-box; border-color: #FF0000 #FF0000 #FF0000; border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #333333; display: inline-block; font-family: arial,sans-serif; font-size: 13px; height: 28px; padding-left: 6px !important; padding-right: 24px !important; vertical-align: top; width: 100px; } #searchBox:hover, #searchBox:focus { border-color: #FF0000 #FF0000F #FF0000; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; } #searchListButton { background: url("http://i.imgur.com/XqsilHp.png") no-repeat scroll 0 0 transparent !important; border-radius: 3px 3px 3px 3px; height: 0; margin: 0; padding: 16px 0 0 19px !important; position: absolute; right: 12px !important; top: 14px !important; width: 0; } #mal_cs_listinfo { background-image: url("http://i44.tinypic.com/2vdju6f.png"); right: 106px; } #mal_cs_listinfo:hover { background-image: url("http://i.imgur.com/VcVVnod.png"); } #mal_cs_links { background-image: url("http://i41.tinypic.com/hrlqmr.png"); right: 72px !important; z-index: 9; } #mal_cs_links:hover { background-image: url("http://i.imgur.com/oPfKrOl.png"); } #mal_cs_otherlinks { background-image: url("http://i39.tinypic.com/fwqgpl.png"); right: 38px !important; z-index: 8; } #mal_cs_otherlinks:hover { background-image: url("http://i.imgur.com/EEGHkbF.png"); } #mal_cs_powered { background-image: url("http://i41.tinypic.com/358pbpy.png"); right: 4px !important; z-index: 7; position: fixed !important; } #mal_cs_powered:hover { background-image: url("http://i.imgur.com/TUUWtaj.png"); } #mal_control_strip { background: transparent !important; } #mal_cs_pic img { display: none; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 0 none !important; } /* LIST BACKGROUND COLOR AND OPACITY Go to this page for instructions on customizing this part, under: Changing the list background color + opacity of the list background http://myanimelist.net/forum/?topicid=440525 */ .category_totals, .td1, .td2, #grand_totals, #copyright { background: rgba(250, 250, 210, 1) !important; } /* Anime List only CURRENTLY WATCHING HEADER This is the header above currently watching/reading. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_cw { background-image:url(http://i.imgur.com/DybHkuo.png); height: 200px; margin-bottom: -55px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* COMPLETED HEADER This is the header above your anime/manga that's completed. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_completed { background-image:url(http://i.imgur.com/oWjYUpA.png); height: 200px; margin-bottom: -55px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* ON-HOLD HEADER This is the header above your animes/mangas on-hold. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_onhold { background-image:url(http://i.imgur.com/7WAwxM7.png); height: 200px; margin-bottom: -55px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* DROPPED HEADER This is the header above your dropped animes/mangas. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_dropped { background-image:url(http://i.imgur.com/NhiqyBZ.png); height: 200px; margin-bottom: -55px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* PLAN TO WATCH HEADER This is the header above the anime/manga you plan to see or read on your list. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_ptw { background-image:url(http://i.imgur.com/xOpOw51.png); height: 200px; margin-bottom: -55px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* REMOVE HEADER COLOR You need this code to remove the default background colors from the header and override any related codes. You're supposed to use your own images or the default ones for the header, so this color is set to transparent so it won't get in the way. If you want the color back for some reason, remove this section. */ .header_title { background-color: transparent !important; } /* OTHER CODES Stuff I had to add after site changes. You need this otherwise the headers won't be visible. */ tbody {background-color: transparent; background-image: none;} /* REMOVE HEADER TEXT These codes remove the original text like "Completed" and "Currently Watching" from each category on the list. Some people will want the text gone so they can have their own custom logos. But if you want the text back, you have to remove this whole section. It shouldn't affect the images in any way. */ .header_title { color: gray !important; color: transparent !important; font-size: 1px !important; font-size: 0px !important; font-size: 0 !important; font-size: 0pt !important; } .header_title { border: 0px none; } /* COPYRIGHT AFTER TEXT MSG Whats posted after Content is what it will say after the main copyright info. You can change it to what you want and it will leave the main copyright text alone. It can be a huge long message and you can change the color of the text here. Make sure you leave a space between the quotation mark after Content: and beginning of msg. Please have the courtesy to leave a link to my group somehow (as in by default). If you remove the color it will be the default color of the copyright. Increase padding-left number to put some space between your text and the previous default text. */ #copyright:after { color: red; Content:"Layout Design made by Rebel_Roo. Thanks to Shishio-kun's tutorials, which were a big help!"; text-allign: left; padding-left: 20px; } /* COPYRIGHT LINKS Change the color of the links in your text here. To have it the same as the copyright default text, remove 'blue'. */ #copyright a{ background:; color:blue; } /* CODES (REPLACEMENT FOR "CSS FOR FOXGIRLS" IMPORT) Used to remove the more button (which no longer works after using the code above to show covers). Also helps with settings for the tag hover option if you use that. */ #list_surround table:nth-of-type(n+4):hover td:nth-of-type(3), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(4), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(5), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(6), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(7), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(8) { display: table-cell; } #list_surround small a:last-of-type { display: none !important; } .animetitle + small { visibility: visible !important; } #list_surround a[href*="http://myanimelist.net/panel.php?go=edit"], #list_surround a[href*="http://myanimelist.net/editlist.php?type="], #list_surround a[href*="http://myanimelist.net/panel.php?go=add"] { visibility: visible !important; margin-right: 10px } .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; } .td1:nth-of-type(6) small:hover, .td2:nth-of-type(6) small:hover, .td1:nth-of-type(5) small:hover, .td2:nth-of-type(5) small:hover, .td1:nth-of-type(4) small:hover, .td2:nth-of-type(4) small:hover{ text-decoration: underline; } /* COVER AREA The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS). Left and top adjust the position it appears on screen. Control the height and width of the pic with height and width. Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away. Increase height and width to make the pics bigger. Delete border-style: solid; to remove the border. */ .hide { background-color: rgba(255, 0, 0, 0.75); background-position: 50% 20% !important; background-repeat: no-repeat !important; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; display: block !important; height: 450px; left: 1250px; position: fixed; top: 65px; width: 234px; padding: 79px 40px 10px 10px; background-size: 250px !important; visibility: hidden; opacity: 0; } /* PREVIEW MSG ABOVE COVERS Remove content: "preview"; to remove the PREVIEW text. Change the text in quotations after content to what you want it to say above your cover pic. Top and width controls the position of the text. */ .hide:before { background: transparent; color: white; content: "PREVIEW"; padding-bottom: 5px; position: absolute; text-align: center; width: 255px; top: 5px; border-radius: 25px 25px 0 0; } /* MINI REVIEW (HOVER TAG) 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: 490px; left: 1265px; font-size: 12px; width: 245px; color: white !important; z-index: 1; background: transparent !important; } /* TAG TEXT COLOR*/ tr:hover td[class^='td']:nth-of-type(6) a { color: white !important; } /* OTHER SETTINGS */ :hover + .hide , 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 !important; } /* 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; } /* GOOGLE CHROME FIX Adjust this amount 50px at a time (more or less) if your columns are uneven in Chrome, until your columns are even. */ @media screen and (-webkit-min-device-pixel-ratio:0) { td[class^='td']:nth-of-type(2) { width: 570px !important;} } |
Shishio-kunJan 2, 2016 10:13 PM
Oct 2, 2015 5:14 AM
#221
| My Lists ANIMELIST- SAO Styled http://myanimelist.net/animelist/Inferno17  MANGALIST- SAO and Date A Live http://myanimelist.net/mangalist/Inferno17  |
 |
Oct 4, 2015 11:53 AM
#222
| I was messing with the theme I always use and made this, I'm probably not gonna use it, so I'm putting it up here Preview:  Code: @import "https://dl.dropbox.com/s/e5t6j0tes8e2qt3/01cov.css"; @import url(http://fonts.googleapis.com/css?family=Allan); @import url(http://storage.live.com/items/4A07C1EEED420167%21152); @import "https://dl.dropboxusercontent.com/s/2qsd2esivezk645/AnimeCovers.css"; body { background-attachment: fixed; background-clip: border-box; background-color: black; background-image: url(http://www.hdwallpaperbackground.com/uploads/allimg/130524/Attack%20on%20Titan%20free%20wallpaper%203_1920x1080.jpg); background-position: right 5%; background-repeat: no-repeat; background-size: cover; } #inlineContent { background: url("") no-repeat scroll 0 -26% transparent; display: inline-block !important; height: 1200px !important; left: 0 !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 1200px !important; z-index: -1 !important; } #list_surround { background: url("http://i.imgur.com/BtqP9BF.png") no-repeat scroll 50% 1px transparent; font-size: 81.25%; line-height: 1; margin: 0 auto; padding-bottom: 10px; padding-top: 300px; width: 75% !important; } body { color: white; font-family: allan; font-size: 23px; } a { -moz-transition: all 0.25s ease-in-out 0s; color: white; text-decoration: none; text-shadow: none; } a:hover { color: white; text-shadow: 0 1px rgba(255, 255, 255, 0.15); } .status_not_selected, .status_selected { border: 0 none !important; height: auto !important; padding: 0 8px; text-align: center !important; width: 16.667% !important; } .status_not_selected a, .status_selected a { background-color: rgb(255, 77, 0); border-color: rgba(48, 44, 64, 0.5); border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; display: block !important; font-weight: ; color: black; padding: 8px; text-shadow: 0 1px rgba(0, 0, 0, 0.1); } .status_selected a { background-color: rgba(180, 32, 48, 0.9); border-color: rgba(148, 0, 24, 0.5); } .status_not_selected a:hover { background-color: rgba(201, 105, 32, 0.6); border-color: rgba(199, 85, 35); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.3); } .status_selected a:hover { background-color: rgba(225, 2, 8, 0.6); border-color: rgba(164, 16, 32, 0.6); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.3); } .table_header { background-color: rgba(53, 51, 55, 0.9); } .table_header:first-of-type { border-radius: 3px 0 0 0; } .table_header:nth-of-type(2) { text-align: left; } .table_header:last-of-type { border-radius: 0 3px 0 0; } .td1 { -moz-transition: all 0.25s ease-in-out 0s; background-color: rgba(100, 97, 105, 0.6); } .td2 { -moz-transition: all 0.25s ease-in-out 0s; background-color: rgba(111, 108, 116, 0.5); } tr:hover [class^="td"] { background-color: rgba(180, 32, 48, 0.6); } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } noindex:-moz-any-link, tr:hover td.td1, tr:hover td.td2 { font-size: 15px; } .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border: 0 none; padding: 4px; text-align: center; vertical-align: middle; } .table_header, .td1, .td2, .category_totals { line-height: 30px; } .borderRBL { line-height: normal !important; } [cellspacing="0"] { line-height: 17px; } .category_totals { -moz-transition: all 0.25s ease-in-out 0s; background-color: rgba(72, 64, 87, 0); border-radius: 0 0 3px 3px; color: rgba(51, 51, 51, 0); text-align: center; } .category_totals:hover { background-color: rgba(100, 97, 105, 0.6); color: #EEEEEE; } [class^="header_"] * { font-size: 19px; height: 60px; line-height: 24px; padding-bottom: 4px; text-align: right; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; color: white; display: inline-block; font-style: italic; height: auto; padding: 0 8px 0 0; } #grand_totals { background-color: rgba(100, 97, 105, 0.6); border: 0 none; border-radius: 3px 3px 3px 3px; color: white; line-height: 20px; min-height: 20px; padding: 8px; text-align: center; vertical-align: middle; } #copyright { background-color: transparent; border-radius: 3px 3px 3px 3px; color: black; line-height: 17px; margin-top: 10px; padding: 8px; text-align: center; } /* THUMBNAIL SETTINGS Settings for the thumbnails of covers seen on your list. Height and width control the size, while margin-left and top can be added or taken away to change the position. Change the border size, type, or color, with the first border code.*/ .hide { height:50px; width:35px; margin-left:39px; margin-top:-60px; border:1px solid transparent; background-color:transparent; background-position:50% 50%; background-repeat:no-repeat no-repeat; background-size:100% 100%; border-bottom-left-radius:2px; border-bottom-right-radius:2px; border-top-left-radius:2px; border-top-right-radius:2px; display:inline-block !important; position: absolute; } /*THUMBNAIL HOVER SETTING This is the setting for the cover when you point to a thumbnail. Move the cover's position with the margin codes. Change its size with the padding codes. */ .hide:hover { margin-left:-140px; padding-right:150px; padding-top:220px !important; background-color:transparent; background-repeat:no-repeat no-repeat; background-size:105%; border-bottom-left-radius:8px; border-bottom-right-radius:8px; border-top-left-radius:8px; border-top-right-radius:8px; box-shadow:rgba(63, 52, 60, 0.55) 0 0 8px 8px; position:absolute; z-index:1; } /*THUMBNAIL HOVER FLICKER FIX If you reposition your covers, and notice flickering, color this red, then reload your layout. Notice where the red bar appears when you point to your covers. Move that box with this code, over the parts where you point and see flickering. Then change it back to transparent! */ .hide:hover:after { background: transparent; content: " "; height: 55px; left: 0; position: absolute; top: -3px; width: 215px; z-index: 20; } /*ANIMATION FOR ZOOM Change the timing of how long it takes for it zoom out here! Its set to .25 seconds by default. */ * { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; } /*ROW WIDTH AND SPACING This will increase the height of your rows and move the anime title to the left. It might look funny on some layouts so you'll have to adjust it or ask for help! Height is the height, padding left is the space the anime title moves from the left. */ .td1:nth-of-type(2), .td2:nth-of-type(2) { height: 60px; padding-left: 42px; } /* Anime List only CURRENTLY WATCHING HEADER This is the header above currently watching/reading. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_cw { background-image:url(http://i.imgur.com/YNIepD7.png); height: 50px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* COMPLETED HEADER This is the header above your anime/manga that's completed. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_completed { background-image:url(http://i.imgur.com/wclWtXC.png); height: 50px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* ON-HOLD HEADER This is the header above your animes/mangas on-hold. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_onhold { background-image:url(http://i.imgur.com/zBzqVV8.png); height: 50px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* DROPPED HEADER This is the header above your dropped animes/mangas. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_dropped { background-image:url(http://i.imgur.com/GibrmJP.png); height: 50px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* PLAN TO WATCH HEADER This is the header above the anime/manga you plan to see or read on your list. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_ptw { background-image:url(http://i.imgur.com/06VM7rC.png); height: 50px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* REMOVE HEADER COLOR You need this code to remove the default background colors from the header and override any related codes. You're supposed to use your own images or the default ones for the header, so this color is set to transparent so it won't get in the way. If you want the color back for some reason, remove this section. */ .header_title { background-color: transparent !important; } /* OTHER CODES Stuff I had to add after site changes. You need this otherwise the headers won't be visible. */ tbody {background-color: transparent; background-image: none;} /* REMOVE HEADER TEXT These codes remove the original text like "Completed" and "Currently Watching" from each category on the list. Some people will want the text gone so they can have their own custom logos. But if you want the text back, you have to remove this whole section. It shouldn't affect the images in any way. */ .header_title { color: gray !important; display: none !important; font-size: 1px !important; font-size: 0px !important; font-size: 0 !important; font-size: 0pt !important; } |
 |
Oct 10, 2015 12:07 PM
#223
Inferno17 said: My Lists ANIMELIST- SAO Styled http://myanimelist.net/animelist/Inferno17 MANGALIST- SAO and Date A Live http://myanimelist.net/mangalist/Inferno17 can you share this to me? pls c: |
 |
Oct 21, 2015 12:22 PM
#224
| I've fixed those bugs within the space square layout and with a bit of editing I've made 2 versions out of the original : One with small covers @import url(https://googledrive.com/host/0B8RQsJP-yEdMRVNlTEtFa1dyMXc); @import url(https://googledrive.com/host/0B8RQsJP-yEdMQkhpZkxXMFJkMms); a{text-decoration:none;} And the other one with big covers @import url(https://googledrive.com/host/0B8RQsJP-yEdMZmdPYU96ZENzMDA); @import url(https://googledrive.com/host/0B8RQsJP-yEdMQkhpZkxXMFJkMms); a{text-decoration:none;} For manga list @import url(https://googledrive.com/host/0B8RQsJP-yEdMVnVicUZtbXBJQmM); @import url(https://googledrive.com/host/0B8RQsJP-yEdMalJuMnktNW1Oc3M); a{text-decoration:none;} |
avdxcivOct 24, 2015 12:26 PM
Nov 9, 2015 8:52 AM
#225
| I'm following my own preferences so all of those styles are very simple (and on absolutely basic code). If you're searching for some minimalism - you found it right here - if not then keep scrolling. + one important thing - I have 1920x1080 res, and i'm pretty sure that on smaller resolutions some of the pics are cut (you would need to check it out). It's easy to make them smaller, or remake them but who have time for that (but yea - if sb acctualy wants them i can do that, np). + second not really important thing - each time I get to customise those styles I find something new and exciting, but I usually don't use it anyway, because it doesn't fit my idea of being "nice & clean". :'D Levi x Eren  @import url(http://fonts.googleapis.com/css?family=Comfortaa); body { background-color: #675B5C; background-image: url(http://i.imgur.com/EFAhfg5.png); background-attachment: fixed; background-position: right bottom; background-repeat: no-repeat; font-family: verdana; font-size: 10px; line-height: 12px; letter-spacing: 1px; color: #2f2627; } #list_surround { position: right !important; padding-left: 5px !important; width: 600px; } a { color: #C0A28D; text-decoration: none; transition: color 1s linear; } a:visited { color: #C0A28D; text-decoration: none; } a:hover { color: #000000; text-decoration: none; } .td1 { background-color: #675B5C; padding: 4px; } .td2 { background-color: #574d4e; padding: 4px; } .td1:hover, .td2:hover { background: url("http://i.imgur.com/tLgRlBs.png") repeat scroll 0 0 transparent; } .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background: none repeat scroll 0 0 tan; display: none; } .table_header { background-color: #362C29; padding: 8px; } .table_headerLink { color: #E6CDB8; text-decoration: none; font-weight: bold; font-size: 10px; } .table_headerLink:Visited { color: #E6CDB8; text-decoration: none; font-weight: bold; font-size: 10px; } .table_headerLink:Hover { color: #E6CDB8; text-decoration: none; font-weight: bold; font-size: 10px; } .header_title { font-size: 20px; color: #48BC6F; font-family: 'Comfortaa', cursive; text-transform: none; letter-spacing: 2px; padding-bottom:10px; } .category_totals { padding-top:10px; text-align: center; font-color: #ee7600; } #grand_totals { font-size: 12px; text-align: center; font-color: #ee7600; } #mal_cs_listinfo { } #mal_cs_listinfo a { color: #539c62 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_listinfo a strong { color: #48BD70 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: bold; letter-spacing: 1px; } #mal_cs_links { } #mal_cs_links div:first-of-type a:first-of-type { color: #539c62 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_links div:first-of-type a:last-of-type { color: #539c62 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_links div:last-of-type a:first-of-type { color: #539c62 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_links div:last-of-type a:last-of-type { color: #539c62 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_otherlinks { } #mal_cs_otherlinks strong { color: #539c62 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; letter-spacing: 1px; } #mal_cs_otherlinks a[href="http://myanimelist.net/history/Azbest"] { color: #539c62 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_otherlinks a[href="http://myanimelist.net/forum/"] { color: #539c62 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_otherlinks a[href="http://myanimelist.net/panel.php?go=export"] { color: #539c62 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_otherlinks a[href="http://myanimelist.net/profile/Azbest"] { color: #539c62 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_otherlinks a { color: #539c62 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_otherlinks div:last-of-type a:first-of-type { color: #539c62 !important; text-decoration: none !important; font-size: 10px !important; font-family: lucida sans unicode !important; font-style: serif; letter-spacing: 1px; } #mal_cs_otherlinks span { color: #539c62 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_otherlinks a[href="http://myanimelist.net/modules.php?go=faq"] { color: #539c62 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #copyright:before { content: "List style by blingbling@mal customized by Azbest |"; } #copyright { padding-top: 16px; padding-bottom: 6px; text-align: center; } Byakuya  @import url(http://fonts.googleapis.com/css?family=Niconne); body { background-image: url(http://i.imgur.com/kF3i6E4.png); background-attachment: fixed; } body{ background-position: left bottom;} .header_title { background-color:transparent; color:#56428c; font-family: 'Niconne', cursive; font-size:25px; } .table_header { background-color: rgba(0, 0, 0, 1); border-width:0; } .category_totals, .td1, #grand_totals, #copyright { background-color: rgba(0, 0, 0, 0.5); color: rgba(0, 0, 0, 0.5); padding:3px; } .td2, #grand_totals, #copyright { background-color: rgba(13, 12, 23, 0.5); color: rgba(13, 12, 23, 0.5); padding:3px; } .category_totals:HOVER, .td1:HOVER, .td2:HOVER, #grand_totals:HOVER, #copyright:HOVER {background-color:none; } .animetitle, .animetitle:visited { color:#bfb9dc; font-family:verdana; font-size:10px; } .td1, .td2, .table_header, #grand_totals, #copyright { color:#4a5095; font-family:verdana; font-size:10px; line-height: 12px; letter-spacing: 1px; } .category_totals, #copyright { color:#877faf; font-family:verdana; font-size:10px; line-height: 12px; letter-spacing: 1px; text-align: center; } a, a:visited, #copyright { color:#737ac3; font-family:verdana; font-size:10px; line-height: 12px; letter-spacing: 1px; text-align: center; } #list_surround { width: 600px; } #list_surround { position: right !important; padding-left: 590px !important; } body { font-weight: light; background-repeat: no-repeat; background-color: #000000; } #list_surround { background-image:url(); left:2px; position:absolute; } a { text-decoration:none; } a:visited { text-decoration:none; } a:hover, a:visited:hover { color:white; text-decoration:underline; transition: color 1s linear; } #copyright:after { content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info."; } .status_selected { background-color:black; padding:2px; color:#bfb9dc; } .status_not_selected { background-color:black; padding:2px; color:#bfb9dc; } .status_selected a{ color:#bfb9dc; } .status_not_selected a{ color:#bfb9dc; } .thickbox { color:#bfb9dc; font-family:verdana; font-size:10px; } .header_title { height:32px; padding:2px; } .table_header { border-width:0; font-weight:bold; padding:2px; } .category_totals { height:30px; } #copyright, #grand_totals { text-align: center; margin:0 auto; } /* top menu bar full customization (thanks to shishio-kun's tutorial) */ #mal_cs_listinfo { } #mal_cs_listinfo a { color: #9377a3 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_listinfo a strong { color: #bba4c8 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: bold; letter-spacing: 1px; } #mal_cs_links { } #mal_cs_links div:first-of-type a:first-of-type { color: #9377a3 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_links div:first-of-type a:last-of-type { color: #9377a3 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_links div:last-of-type a:first-of-type { color: #9377a3 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_links div:last-of-type a:last-of-type { color: #9377a3 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_otherlinks { } #mal_cs_otherlinks strong { color: #bba4c8 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; letter-spacing: 1px; } #mal_cs_otherlinks a[href="http://myanimelist.net/history/Azbest"] { color: #9377a3 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_otherlinks a[href="http://myanimelist.net/forum/"] { color: #9377a3 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_otherlinks a[href="http://myanimelist.net/panel.php?go=export"] { color: #9377a3 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_otherlinks a[href="http://myanimelist.net/profile/Azbest"] { color: #9377a3 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_otherlinks a { color: #9377a3 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_otherlinks div:last-of-type a:first-of-type { color: #9377a3 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_otherlinks span { color: #9377a3 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_otherlinks a[href="http://myanimelist.net/modules.php?go=faq"] { color: #9377a3 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #copyright { padding-top: 16px; padding-bottom: 6px; text-align: center; } Clare  @import url(http://fonts.googleapis.com/css?family=Comfortaa); body { background-image: url(http://i.imgur.com/Zf6ejTp.jpg); background-attachment: fixed; } body{ background-position: left top;} .header_title { background-color:transparent; color:#E1E1E1; font-family: 'Comfortaa', cursive; font-size:20px; } .table_header { background-color: rgba(55, 55, 55, 0.6); border-width:0; } .category_totals, .td1, .td2, #grand_totals, #copyright { background-color: rgba(25, 97, 86, 0.6); color: rgba(25, 97, 86, 0.6); padding:2px; } .category_totals:HOVER, .td1:HOVER, .td2:HOVER, #grand_totals:HOVER, #copyright:HOVER {background-color:none; border-width:0; padding:2px; } .animetitle, .animetitle:visited { color:#5ce6e9; font-family:verdana; font-size:10px; } .td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright { color:#E5E7E6; font-family:verdana; font-size:10px; } #list_surround { width: 600px; } #list_surround { position: absolute !important; left: 50px !important;} body { font-weight: light; background-repeat: no-repeat; background-color: #000000; } #list_surround { background-image:url(); left:2px; position:absolute; } a { text-decoration:none; } a:visited { text-decoration:none; } a:hover, a:visited:hover { color:white; text-decoration:underline; } #copyright:after { content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info."; } .status_selected { background-color:black; padding:2px; color:white; text-decoration: blink; } .status_not_selected { background-color:black; padding:2px; color:white; } .status_selected a{ color:#1FC0B6; } .status_not_selected a{ color:white; } .thickbox { color:cyan; font-family:verdana; font-size:10px; } .header_title { height:32px; padding:2px; } .table_header { border-width:0; font-weight:bold; padding:2px; } .category_totals { height:30px; } #copyright, #grand_totals { text-align: center; margin:0 auto; } /* top menu bar full customization (thanks to shishio-kun's tutorial) */ #mal_cs_listinfo { } #mal_cs_listinfo a { color: #777976 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_listinfo a strong { color: #19A8CA !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: bold; letter-spacing: 1px; } #mal_cs_links { } #mal_cs_links div:first-of-type a:first-of-type { color: #777976 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_links div:first-of-type a:last-of-type { color: #777976 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_links div:last-of-type a:first-of-type { color: #777976 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_links div:last-of-type a:last-of-type { color: #777976 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_otherlinks { } #mal_cs_otherlinks strong { color: #777976 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; letter-spacing: 1px; } #mal_cs_otherlinks a[href="http://myanimelist.net/history/Azbest"] { color: #777976 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_otherlinks a[href="http://myanimelist.net/forum/"] { color: #777976 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_otherlinks a[href="http://myanimelist.net/panel.php?go=export"] { color: #777976 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_otherlinks a[href="http://myanimelist.net/profile/Azbest"] { color: #777976 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_otherlinks a { color: #777976 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_otherlinks div:last-of-type a:first-of-type { color: #777976 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_otherlinks span { color: #777976 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_otherlinks a[href="http://myanimelist.net/modules.php?go=faq"] { color: #777976 !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #copyright { padding-top: 16px; padding-bottom: 6px; text-align: center; } Re-l x Vincent  @import url(https://fonts.googleapis.com/css?family=Rajdhani); body { background-image: url(http://orig06.deviantart.net/f8d9/f/2015/266/a/b/re_l_x_vincent2_by_lacreaturaa-d9ao0x6.png); background-attachment: fixed; } body{ background-position: left bottom;} .header_title { background-color:transparent; color:#30322D; font-family: 'Rajdhani', sans-serif; font-size:30px; } .table_header { background-color: rgba(255, 255, 255, 0.8); border-width:0; } .category_totals, .td1, #grand_totals, #copyright { background-color: rgba(243, 249, 243, 0.4); color: rgba(243, 249, 243, 0.4); padding:3px; } .td2, #grand_totals, #copyright { background-color: rgba(240, 248, 248, 0.6); color: rgba(240, 248, 248, 0.6); padding:3px; } .category_totals:HOVER, .td1:HOVER, .td2:HOVER, #grand_totals:HOVER, #copyright:HOVER {background-color:none; } .animetitle, .animetitle:visited { color:#4ea7aa; font-family:verdana; font-size:10px; } .td1, .td2, .table_header, #grand_totals, #copyright { color:#78c5d1; font-family:verdana; font-size:10px; line-height: 12px; letter-spacing: 1px; } .category_totals, #copyright { color:#9dd2da; font-family:verdana; font-size:10px; line-height: 12px; letter-spacing: 1px; text-align: center; } a, a:visited, #copyright { color:#728275; font-family:verdana; font-size:10px; line-height: 12px; letter-spacing: 1px; text-align: center; } #list_surround { width: 600px; } #list_surround { position: right !important; padding-left: 700px !important; } body { font-weight: light; background-repeat: no-repeat; background-color: #ffffff; } #list_surround { background-image:url(); left:2px; position:absolute; } a { text-decoration:none; } a:visited { text-decoration:none; } a:hover, a:visited:hover { color:#00d50d; text-decoration:underline; transition: color 1s linear; } #copyright:after { content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info."; } .status_selected { background-color:transparent; padding:2px; color:#00d50d; } .status_not_selected { background-color:transparent; padding:2px; color:#2b2d29; } .status_selected a{ color:#0DA3BB; } .status_not_selected a{ color:#4E757E; } .thickbox { color:#4E757E; font-family:verdana; font-size:10px; } .header_title { height:32px; padding:2px; } .table_header { border-width:0; font-weight:bold; padding:2px; } .category_totals { height:30px; } #copyright, #grand_totals { text-align: center; margin:0 auto; } /* top menu bar full customization (thanks to shishio-kun's tutorial) */ #mal_cs_listinfo { } #mal_cs_listinfo a { color: #9dd2da !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_listinfo a strong { color: #DEECEF !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: bold; letter-spacing: 1px; } #mal_cs_links { } #mal_cs_links div:first-of-type a:first-of-type { color: #9dd2da !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_links div:first-of-type a:last-of-type { color: #9dd2da !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_links div:last-of-type a:first-of-type { color: #9dd2da !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_links div:last-of-type a:last-of-type { color: #9dd2da !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_otherlinks { } #mal_cs_otherlinks strong { color: #9dd2da !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; letter-spacing: 1px; } #mal_cs_otherlinks a[href="http://myanimelist.net/history/Azbest"] { color: #9dd2da !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_otherlinks a[href="http://myanimelist.net/forum/"] { color: #9dd2da !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_otherlinks a[href="http://myanimelist.net/panel.php?go=export"] { color: #9dd2da !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_otherlinks a[href="http://myanimelist.net/profile/Azbest"] { color: #9dd2da !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_otherlinks a { color: #9dd2da !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_otherlinks div:last-of-type a:first-of-type { color: #9dd2da !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_otherlinks span { color: #9dd2da !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #mal_cs_otherlinks a[href="http://myanimelist.net/modules.php?go=faq"] { color: #9dd2da !important; text-decoration: none !important; font-size: 10px !important; font-family: verdana !important; font-style: serif; letter-spacing: 1px; } #copyright { padding-top: 16px; padding-bottom: 6px; text-align: center; } |
 |
Nov 10, 2015 1:50 PM
#226
Inferno17 said: My Lists ANIMELIST- SAO Styled http://myanimelist.net/animelist/Inferno17 MANGALIST- SAO and Date A Live http://myanimelist.net/mangalist/Inferno17 yeah, are you gonna donate this?? why dont you post the code?? |
 |
Nov 10, 2015 2:23 PM
#227
Ameno said: Inferno17 said: My Lists ANIMELIST- SAO Styled http://myanimelist.net/animelist/Inferno17 MANGALIST- SAO and Date A Live http://myanimelist.net/mangalist/Inferno17 yeah, are you gonna donate this?? why dont you post the code?? If Inferno posted it in the donate topic, I think he or she means for you to rip it off his list via Inspect Element or Firebug. I guess they are saying they are ok with that |
Nov 10, 2015 2:29 PM
#228
Shishio-kun said: Ameno said: Inferno17 said: My Lists ANIMELIST- SAO Styled http://myanimelist.net/animelist/Inferno17 MANGALIST- SAO and Date A Live http://myanimelist.net/mangalist/Inferno17 yeah, are you gonna donate this?? why dont you post the code?? If Inferno posted it in the donate topic, I think he or she means for you to rip it off his list via Inspect Element or Firebug. I guess they are saying they are ok with that hmm yes i assumed that, and tried to do copy it, but some elements were missing when i did so, like the bar at the top, the cover images and the picture of sora and shion and the others above the text... im not very good at this ^^; |
| |
Nov 25, 2015 6:01 PM
#229
| Smile Precure Animelist Layout. I merely edited an already donated animelist. Preview:  Code: @import url(https://dl.dropboxusercontent.com/s/6rbn3nil8wzn51y/animecovers.css?dl=0); @import "http://dl.dropbox.com/u/78340470/cssforfoxgirls.css"; @import "https://dl.dropboxusercontent.com/s/6rbn3nil8wzn51y/animecovers.css?dl=0"; /* // self-explanatory */ body { color: #081e6b; font-size: 10.00px; font-family: verdana, arial; background-color: #010004; background-image: url(http://oi62.tinypic.com/1eqf4h.jpg); background-repeat: repeat; background-position: top left } /* // determines the positioning of your list */ div#list_surround{width:1000px;padding-top:500px; margin: auto 0% auto auto; background-image: url(http://oi62.tinypic.com/27x3xaa.jpg); background-position: top left; background-repeat: no-repeat; margin-left: 0px; margin-right:auto; margin-top: 0px; margin-bottom: 20px; width:1000px; position:absolute } /* // all links on your list */ a { color: #000000; text-decoration: none; } a:visited { color: #000000; text-decoration: none; } a:hover { color: #000000; text-decoration: line-through; } /* // alternating row color 1 */ td {filter:alpha(opacity=0); -moz-opacity:.80; opacity:.80;} .td1 { color: #000000; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #ffffff; padding: 2px; background-color: #ffffff; } /* // alternating row color 2 */ .td2 { color: #000000; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #ffffff; padding: 2px; background-color: #ffffff; } /* // this represents the "anime title", "score", "# eps" columns */ .table_header { color: #000000; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #ffffff; background-color: #ffffff; padding: 2px; } /* // headerlink represents the color of the links inside the_header */ .table_headerlink { color: ; } .table_headerlink:visited { color: ; } .table_headerlink:hover { color: ; } /* // controls the select form decoration (the drop down select box) */ .form { border-width: 1px 1px 1px 1px; border-color: #ffffff; border-style: solid; color: #ffffff; padding: 0px; font-size: 11.00px; font-family: verdana, arial; } /* which 'status' up top is selected? */ .status_selected { color: #000000; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #ffffff; padding: 0px; background-color: #ffffff; } .status_not_selected { color: #ffffff; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #ffffff; padding: 0px; background-color: #ffffff; } /* header classes for currently watching, completed, dropped, etc... */ .header_cw{ background-image: url(http://oi58.tinypic.com/53l4z6.jpg); width:250px; height:43px; margin-left: 0px; margin-right:auto; margin-bottom: 5px; } .header_completed{ background-image: url(http://oi59.tinypic.com/2irqeyt.jpg); width:250px; height:43px; margin-left: 0px; margin-right:auto; margin-bottom: 5px; } .header_onhold{ background-image: url(http://oi62.tinypic.com/ws0h1g.jpg); width:250px; height:43px; margin-left: 0px; margin-right:auto; margin-bottom: 5px; } .header_dropped{ background-image: url(http://oi62.tinypic.com/2lbjeqp.jpg); width:250px; height:43px; margin-left: 0px; margin-right:auto; margin-bottom: 5px; } .header_ptw{ background-image: url(http://oi58.tinypic.com/2w56ljp.jpg); width:250px; height:43px; margin-left: 0px; margin-right:auto; margin-bottom: 5px; } .header_title { display:none; } #grand_totals { text-align: left; } /* header_al is thesurrounding "user's anime list" at the top */ .header_al { font-weight: bold; font-size: 16px; } /* header_al_links is thewith your "profile" and "myanimelist home" links */ .header_al_links { } /* controls what styles you can give to all the anime titles in your list */ .animetitle { font-weight: bold; } /* copyright contains the "producted by garrett gyssler" text do not remove or hide this div if found to be removed, your list will be removed too */ #copyright { padding-top: 6px; text-align: left; margin: 0 auto; width: px; color: #000000; } /* cover area the surrounding area containing each cover pic which appears when you point to a row (requires #more css to see a dvd or manga cover). move the cover's location around with left and top. remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away. increase height and width to make the pics bigger. delete border-style: solid; to remove the border. for changing the original background color see the bottom of the original post: http://myanimelist.net/forum/?topicid=563993 */ :hover + .hide { background-size: cover; left: 1000px; top: 160px; height: 350px; width: 226px; padding-bottom: 0px; border-style: solid; border-color: white; border-top: 1px solid white;; border-left: 1px solid white; border-right: 1px solid white; border-bottom: 1px solid white; border-radius: 25px 25px 25px 25px; background-color: rgba(90, 90, 90, 100); color: rgba(90, 90, 90, 100); background-position: center 50% !important; background-repeat: no-repeat !important; display: block !important; position: fixed; } /* preview msg above covers remove content: "preview"; to remove the preview text. change the text in quotations after content to what you want it to say above your cover pic. top and width controls the position of the text. */ .hide:before { background: transparent; content: ; padding-bottom: 5px; position: absolute; text-align: right; width: 225px; top: -25px; border-radius: 25px 25px 0 0; } .header_cw, .header_completed, .header_onhold, .header_dropped, .header_ptw { background-repeat: no-repeat; } |
"Be the change you wish to see in the world."  |
Dec 6, 2015 11:42 AM
#230
2015 by Max  2015 is a minimalist style designed to resemble the year's additions to the site, emphasizing the look of the seasonal anime section and October's new profile design. I have put a moderate amount of time into making the list experience consistent and functional across all kinds of devices, save for some minor unavoidable differences. If you encounter any major problems, please refer to the 'notes' section before PMing me. CSS: /*made by http://myanimelist.net/profile/Max*/
/*ensure a bit of cross-platform*/
@import url('http://meyerweb.com/eric/tools/css/reset/reset.css');
body {
position: relative;
font-family: Avenir, "lucida grande", tahoma, verdana, arial, sans-serif;
font-size: 14px;
/*more cross-platform*/
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
text-size-adjust: none;
}
/*disable iOS button style*/
input {
-webkit-appearance: none;
border-radius: 0;
}
input[type=button] {
color: white;
border: none;
font-family: Avenir, "lucida grande", tahoma, verdana, arial, sans-serif;
font-weight: bold;
border-radius: 1px;
background-color: #4165ba;
}
input[type=button]:hover {
background-color: #6c8cd8;
}
#list_surround {
margin: 0 auto;
width: 720px;
margin-bottom: 14px;
}
a {
text-decoration: none;
color: black;
}
tr {
line-height: 28px;
}
.td {
}
.td2 {
background: #f6f6f6;
}
.animetitle {
font-size: 16px;
font-weight: bold;
color: #2e51a2;
}
/*for 'airing', etc*/
a ~ small {
float: right;
padding: 0px 2px 0px 2px;
margin-right: 8px;
text-transform: uppercase;
background-color: #e1e1e1;
}
small, small a {
font-size: 12px;
}
.status_selected {
background-color: #2e51a2;
}
.status_not_selected {
background-color: #4165ba;
}
.status_not_selected:hover {
background-color: #6c8cd8;
}
/*rounded corners*/
.status_selected:nth-of-type(1), .status_not_selected:nth-of-type(1) {
-webkit-border-radius: 2px 0px 0px 2px;
-moz-border-radius: 2px 0px 0px 2px;
border-radius: 2px 0px 0px 2px;
}
.status_selected:nth-of-type(6), .status_not_selected:nth-of-type(6) {
-webkit-border-radius: 0px 2px 2px 0px;
-moz-border-radius: 0px 2px 2px 0px;
border-radius: 0px 2px 2px 0px;
}
.status_selected a, .status_not_selected a {
font-size: 12px;
color: white;
font-weight: bold;
margin: 0px;
padding: 0px;
}
.header_cw, .header_completed, .header_onhold, .header_dropped, .header_ptw{
position: relative;
}
/*coloured status circles*/
.header_cw:before, .header_completed:before, .header_onhold:before, .header_dropped:before, .header_ptw:before {
content: " ";
position: absolute;
height: 10px;
width: 10px;
left: -20px;
top: 32px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.header_cw:before {
background-color: #2db039;
}
.header_completed:before {
background-color: #26448f;
}
.header_onhold:before {
background-color: #f9d457;
}
.header_dropped:before {
background-color: #a12f31;
}
.header_ptw:before {
background-color: #c3c3c3;
}
.header_title {
margin-top: 24px;
font-size: 18px;
font-weight: bold;
}
#grand_totals, .category_totals {
display: none;
}
#mal_control_strip {
display: none !important;
}
#copyright {
position: absolute;
left: 0;
right: 0;
bottom: 0 auto;
padding-bottom: 28px;
}Notes:
• I cannot guarantee it will work properly with any columns other than 'numbers', 'score', and 'episodes' or 'chapters'. To change the columns your list displays, click here. • Having been made irrelevant by the profile update, statistics are not displayed. • The black navbar is a mess of code and largely goes unused, so it isn't displayed either. • You are free to modify and redistribute the code as you wish, though I'd ask that you keep the first line when no major modifications are made. |
vegetablespiritDec 6, 2015 12:31 PM
Dec 10, 2015 2:41 PM
#231
 You can see it at my lists Source (SASS): https://github.com/lubien/flat-mal If you're not used to SASS, just download files from src/style/ from my Github repo |
Dec 21, 2015 7:03 PM
#232
| Donating my Halloween Contest list CSS to anyone interested. Not really for beginners to try to use. The sound fx and Exit would have to readjusted for your list. http://pasted.co/8081d710 |
Dec 21, 2015 7:31 PM
#233
| Donating my old layout : http://myanimelist.net/forum/?topicid=1464099 |
 |
Dec 28, 2015 3:53 AM
#234
| I made a little adjustments since I showed it a week or 2 ago in Show off topic. Noblesse Preview Cursor: Preview Animelist:  Code: @import "http://mal-fellow-writer.appspot.com/anime/Madara22/?covers=http://dl.dropbox.com/u/49469857/MAL/premade/formats/covers/more"; @import "https://dl.dropboxusercontent.com/s/1hpxypwgfyjeqdg/Noblesse.css?dl=0"; Body {} For example @import "http://mal-fellow-writer.appspot.com/anime/Madara22/?covers=http://dl.dropbox.com/u/49469857/MAL/premade/formats/covers/more";  |
Madara22Jan 1, 2016 12:39 PM
| |
Jan 4, 2016 6:57 AM
#235
Project Itoh - Harmony Style @import "https://fonts.googleapis.com/css?family=Questrial";
body {
font-family: "Questrial";
font-size: 17px;
font-weight: bold;
letter-spacing: 0.5px;
background: url("https://dl.dropboxusercontent.com/s/51tf2b89kx9ncpw/bg.png") repeat;
text-transform: lowercase
}
/* inline-content */
#inlineContent {
background: url("https://dl.dropboxusercontent.com/s/meomwssmo3hztcc/nw-exc.png") no-repeat;
top: 16px;
left: 1065px;
display: block !important;
height: 100% !important;
position: fixed !important;
width: 100% !important;
z-index: -1 !important
}
/* categorys */
.status_selected,
.status_not_selected,
.status_not_selected a,
.status_selected a {
position: fixed;
display: block;
height: auto;
width: auto;
text-align: left;
white-space: nowrap;
color: #000000;
left: 1135px;
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s
}
.status_selected:first-of-type, .status_not_selected:first-of-type { top: 254px }
.status_selected:nth-of-type(2), .status_not_selected:nth-of-type(2) { top: 273px }
.status_selected:nth-of-type(3), .status_not_selected:nth-of-type(3) { top: 291px }
.status_selected:nth-of-type(4), .status_not_selected:nth-of-type(4) { top: 309px }
.status_selected:nth-of-type(5), .status_not_selected:nth-of-type(5) { top: 326px }
.status_selected:last-of-type, .status_not_selected:last-of-type { top: 236px }
.status_selected a, .status_not_selected a:hover, .status_selected a:hover { color: #BC3030 }
.status_selected a:before, .status_not_selected a:before { content: "<m:" }
.status_selected a:after, .status_not_selected a:after { content: ">" }
/* list */
#list_surround {
background: url(https://dl.dropboxusercontent.com/s/v2pmjv44xwvvn2p/logo.png) no-repeat;
background-size: 100%;
width: 1001px;
position: absolute;
left: 50px;
top: 10px;
padding-top: 100px
}
/* menu: switch-off */
#searchBox,
#mal\_cs_powered img,
#mal\_control_strip img,
#mal\_cs_links div a[href="/"],
#mal\_cs_listinfo div:last-of-type a,
#mal\_cs_otherlinks a[href*="register"],
#mal\_cs_otherlinks div a[href*="forum"],
#mal\_cs_otherlinks div a[href*="export"],
#mal\_cs_otherlinks div a[href*="mangalist"],
#mal\_cs_otherlinks div a[href*="animelist"],
#mal\_cs_otherlinks div a[href*="sharedmanga"],
#mal\_cs_otherlinks div a[href*="sharedanime"],
#mal\_cs_otherlinks div span[title*="Compatibility Score"] { display: none !important }
#mal\_control_strip { background: transparent !important }
#mal\_control_strip a { text-decoration: none !important }
#mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: none !important }
#mal_cs_otherlinks div:last-of-type, #mal\_cs_otherlinks div strong:last-of-type { color: transparent !important; font-size: 0px !important }
/* menu: logged & login */
#mal\_control_strip,
#mal\_control_strip a,
#mal\_control_strip td,
#mal\_control_strip td div,
#mal\_control_strip a {
font-family: "Questrial" !important;
font-size: 17px !important
}
#mal\_cs_listinfo {
position: fixed;
top: 86px;
left: 1068px;
width: auto
}
#mal\_cs_otherlinks div a[href*="login"] {
position: fixed;
top: 89px;
left: 1085px;
width: auto;
font-weight: 600;
text-transform: lowercase;
color: #BC3030
}
#mal\_cs_listinfo div a { text-transform: lowercase; color: #BC3030 !important }
#mal\_cs_otherlinks div a[href*="login"]:before { content: "<logged:in=none-//" }
#mal\_cs_otherlinks div a[href*="login"]:after { content: ">" }
#mal\_cs_listinfo div:first-of-type a strong:before { content: "<logged:in=" }
#mal\_cs_listinfo div:first-of-type a strong:after { content: ">" }
#mal\_cs_otherlinks div a[href*="login"]:before,
#mal\_cs_otherlinks div a[href*="login"]:after,
#mal\_cs_listinfo div:first-of-type a strong:before,
#mal\_cs_listinfo div:first-of-type a strong:after { color: #000000 }
/* menu: home, profile, history, animelist, mangalist, addtolist */
#mal_cs_links div a,
#mal\_cs_otherlinks div a[href*="history"],
#mal\_cs_otherlinks strong a[href*="profile"],
#mal\_cs_powered a[href*="/"] {
position: fixed;
display: block;
left: 7px;
height: 35px;
width: 35px;
margin: none;
padding: none;
border: none;
color: transparent !important;
font-size: 0px !important;
background-position: center center;
background-size: 100% !important;
background-color: transparent !important;
-webkit-transition: all 0.5s ease-in-out 0s;
transition: all 0.5s ease-in-out 0s;
-webkit-filter: grayscale(100%);
filter: grayscale(100%)
}
#mal\_cs_powered a[href*="/"] {
background: url(https://dl.dropboxusercontent.com/s/904v6tkfqskg986/home.png) no-repeat center;
top: 0px;
-webkit-filter: grayscale(20%);
filter: grayscale(20%)
}
#mal\_cs_otherlinks strong a[href*="profile"] {
background: url(https://dl.dropboxusercontent.com/s/ulltlexsjjn3fg3/profile.png) no-repeat center;
top: 212px
}
#mal\_cs_otherlinks div a[href*="history"] {
background: url(https://dl.dropboxusercontent.com/s/b64hao7qvusfpxk/history.png) no-repeat center;
top: 257px
}
#mal\_cs_links div a[href*="animelist"] {
background: url(https://dl.dropboxusercontent.com/s/3io3ye5qiyfcrdw/anime.png) no-repeat center;
top: 302px
}
#mal\_cs_links div a[href*="mangalist"] {
background: url(https://dl.dropboxusercontent.com/s/yqnqnejdko336k1/manga.png) no-repeat center;
top: 347px
}
#mal\_cs_links div a[href*="addtolist"] {
background: url(https://dl.dropboxusercontent.com/s/e9qh1vu2ihhrsuu/add.png) no-repeat center;
top: 392px
}
#mal\_cs_powered a[href*="/"]:hover,
#mal_cs_links div a:hover,
#mal\_cs_otherlinks div a[href*="history"]:hover,
#mal\_cs_otherlinks div strong a:hover {
-webkit-filter: grayscale(0%);
filter: grayscale(0%)
-webkit-transition: all 0.5s ease-in-out 0s;
transition: all 0.5s ease-in-out 0s
}
/* headers, rows, totals */
[class^="header_"]:before,
[class^="header_"]:after,
[class^="header_"] * {
font-size: 32px;
height: 41px;
padding-bottom: 10px;
text-align: left;
vertical-align: bottom;
color: #BC3030;
display: inline-block
}
tbody [class^="header_"]:before { content: "< category:" }
tbody [class^="header_"]:after { content: ">" }
.table_header, .category_totals, tr [class^="td"] {
background-color: #BC3030;
font-family: "Questrial";
font-size: 17px;
font-style: normal;
color: #ffffff;
text-align: left !important;
padding: 5px
}
.table_header a { color: #ffffff }
.table_header:nth-of-type(3) { width: 55px }
.table_header:nth-of-type(5) { width: 85px }
a { color: #BC3030; text-decoration: none; text-shadow: none }
a:hover, tr:hover [class^="td"] { color: #ffffff }
a[title="Click to increase your watched ep number by one"] { float: right; padding-right: 1px }
tr [class^="td"] { background-color: transparent; color: #BC3030 }
tr [class^="td"]:nth-of-type(3) { width: 55px }
tr [class^="td"]:nth-of-type(4) { font-size: 11px !important }
tr [class^="td"]:nth-of-type(5) { width: 85px }
tr:hover [class^="td"] { background-color: #BC3030 }
.animetitle + small { visibility: hidden }
tr [class^="td"] div[style="float: right;"] { visibility: hidden }
tr:hover [class^="td"] div[style="float: right;"] a { visibility: visible }
tr:hover [class^="td"] a { color: #ffffff }
.category_totals { padding-left: 45px }
#grand_totals { color: #BC3030; text-align: center }
#copyright:before { content: "designed by xvote." }
#copyright { color: #BC3030; text-align: center; padding-bottom: 5px }
/* other */
::-webkit-scrollbar { width: 0 !important; height: 0 !important }
/* resolutions */
@media screen and (device-width: 1680px) {
.table_header,
.category_totals,
tr [class^="td"],
#mal_control_strip,
#mal_control_strip a,
#mal_control_strip td,
#mal_control_strip td div,
#mal_control_strip a { font-size: 17px !important }
.status_selected,
.status_not_selected,
.status_not_selected a,
.status_selected a { font-size: 17px !important; left: 995px }
.status_selected:first-of-type, .status_not_selected:first-of-type { top: 245px }
.status_selected:nth-of-type(2), .status_not_selected:nth-of-type(2) { top: 262px }
.status_selected:nth-of-type(3), .status_not_selected:nth-of-type(3) { top: 279px }
.status_selected:nth-of-type(4), .status_not_selected:nth-of-type(4) { top: 296px }
.status_selected:nth-of-type(5), .status_not_selected:nth-of-type(5) { top: 313px }
.status_selected:last-of-type, .status_not_selected:last-of-type { top: 228px }
#inlineContent { background: url("https://dl.dropboxusercontent.com/s/mpi3dbv7a5jpm4x/nw-exc-1680.png") no-repeat; left: 930px }
#list_surround { width: 850px }
#mal_cs_listinfo { top: 82px; left: 934px }
#mal_cs_otherlinks div a[href*="login"] { top: 85px; left: 951px }
[class^="header_"]:before, [class^="header_"]:after, [class^="header_"] * { font-size: 24px; height: 32px }
#mal_cs_links div a, #mal_cs_otherlinks div a[href*="history"], #mal_cs_otherlinks div strong a, #mal_cs_powered a[href*="/"] { background-size: 90% !important }
#mal_cs_powered a[href*="/"] { top: -3px }
#mal_cs_otherlinks div strong a[href*="profile"] { top: 195px }
#mal_cs_otherlinks div a[href*="history"] { top: 240px }
#mal_cs_links div a[href*="animelist"] { top: 285px }
#mal_cs_links div a[href*="mangalist"] { top: 330px }
#mal_cs_links div a[href*="addtolist"] { top: 375px }
}
@media screen and (device-width: 1600px) {
.table_header,
.category_totals,
tr [class^="td"],
#mal_control_strip,
#mal_control_strip a,
#mal_control_strip td,
#mal_control_strip td div,
#mal_control_strip a { font-size: 14px !important }
.status_selected,
.status_not_selected,
.status_not_selected a,
.status_selected a { font-size: 14px !important; left: 985px }
.status_selected:first-of-type, .status_not_selected:first-of-type { top: 206px }
.status_selected:nth-of-type(2), .status_not_selected:nth-of-type(2) { top: 220px }
.status_selected:nth-of-type(3), .status_not_selected:nth-of-type(3) { top: 235px }
.status_selected:nth-of-type(4), .status_not_selected:nth-of-type(4) { top: 250px }
.status_selected:nth-of-type(5), .status_not_selected:nth-of-type(5) { top: 264px }
.status_selected:last-of-type, .status_not_selected:last-of-type { top: 192px }
#inlineContent { background: url("https://dl.dropboxusercontent.com/s/e1dzp9f7klgghcv/nw-exc-1600.png") no-repeat; left: 930px }
#list_surround { width: 850px }
#mal_cs_listinfo { top: 70px; left: 930px }
#mal_cs_otherlinks div a[href*="login"] { top: 73px; left: 943px }
[class^="header_"]:before, [class^="header_"]:after, [class^="header_"] * { font-size: 24px; height: 32px }
#mal_cs_links div a, #mal_cs_otherlinks div a[href*="history"], #mal_cs_otherlinks div strong a, #mal_cs_powered a[href*="/"] { background-size: 90% !important }
#mal_cs_powered a[href*="/"] { top: -3px }
#mal_cs_otherlinks div strong a[href*="profile"] { top: 195px }
#mal_cs_otherlinks div a[href*="history"] { top: 240px }
#mal_cs_links div a[href*="animelist"] { top: 285px }
#mal_cs_links div a[href*="mangalist"] { top: 330px }
#mal_cs_links div a[href*="addtolist"] { top: 375px }
}
@media screen and (max-device-width: 1441px) {
.table_header, .category_totals, tr [class^="td"], #mal_control_strip, #mal_control_strip a, #mal_control_strip td, #mal_control_strip td div, #mal_control_strip a { font-size: 13px !important }
.status_selected, .status_not_selected, .status_not_selected a, .status_selected a {
position: fixed !important;
height: 23px;
width: 35px;
left: 7px;
color: transparent !important;
font-size: 0px !important;
background-position: center center;
background-size: 100% !important;
background-color: transparent !important;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
z-index: 2
}
.status_selected, .status_not_selected:hover, .status_selected:hover {
-webkit-filter: grayscale(0%);
filter: grayscale(0%)
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out
}
.status_selected a:before, .status_not_selected a:before { content: none }
.status_selected a:after, .status_not_selected a:after { content: none }
.status_selected:first-of-type, .status_not_selected:first-of-type { background: url(https://dl.dropboxusercontent.com/s/fkgnf9dcfc9qilv/watching.png) no-repeat center; top: 534px }
.status_selected:nth-of-type(2), .status_not_selected:nth-of-type(2) { background: url(https://dl.dropboxusercontent.com/s/9clumd5z8lj6i4b/completed.png) no-repeat center; top: 568px }
.status_selected:nth-of-type(3), .status_not_selected:nth-of-type(3) { background: url(https://dl.dropboxusercontent.com/s/di7ik7kfos1w7p6/hold.png) no-repeat center; top: 602px }
.status_selected:nth-of-type(4), .status_not_selected:nth-of-type(4) { background: url(https://dl.dropboxusercontent.com/s/ja2ty3kznfchgw6/dropped.png) no-repeat center; top: 636px }
.status_selected:nth-of-type(5), .status_not_selected:nth-of-type(5) { background: url(https://dl.dropboxusercontent.com/s/mdjihk653t8e4o2/plan.png) no-repeat center; top: 670px }
.status_selected:last-of-type, .status_not_selected:last-of-type { background: url(https://dl.dropboxusercontent.com/s/afu45ak7m1nr4r6/all.png) no-repeat center; top: 500px }
#inlineContent { background: url("https://dl.dropboxusercontent.com/s/828yazwitnoizbl/nw-kts.png") no-repeat; top: 50px; left: 950px; background-size: 34% }
#list_surround { left: 50px; width: 880px }
#mal_cs_listinfo div a {
position: fixed;
display: block;
top: 195px;
height: 35px;
width: 35px;
left: 7px;
color: transparent !important;
font-size: 0px !important;
background: url(https://dl.dropboxusercontent.com/s/cr3cvkjln57w4ob/logged.png) no-repeat center;
background-position: center center;
background-size: 100% !important;
background-color: transparent !important;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
z-index: 2;
}
#mal_cs_otherlinks div a[href*="login"] {
position: fixed;
display: block;
top: 195px;
height: 35px;
width: 35px;
left: 7px;
color: transparent !important;
font-size: 0px !important;
background: url(https://dl.dropboxusercontent.com/s/u70nhqprdu2eelb/login.png) no-repeat center;
background-position: center center;
background-size: 100% !important;
background-color: transparent !important;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
z-index: 2;
}
#mal_cs_otherlinks div a[href*="login"]:before, #mal_cs_otherlinks div a[href*="login"]:after,
#mal_cs_listinfo div:first-of-type:before, #mal_cs_listinfo div:first-of-type:after { content: none }
#mal_cs_otherlinks div a[href*="login"]:before, #mal_cs_otherlinks div a[href*="login"]:after,
#mal_cs_listinfo div:first-of-type:before, #mal_cs_listinfo div:first-of-type:after { color: transparent !important; }
[class^="header_"]:before, [class^="header_"]:after, [class^="header_"] * { font-size: 24px; height: 32px }
#mal_cs_links div a, #mal_cs_otherlinks div a[href*="history"], #mal_cs_otherlinks div strong a, #mal_cs_powered a[href*="/"] {
left: 7px;
background-size: 90% !important;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#mal_cs_powered a[href*="/"] { top: -3px }
#mal_cs_otherlinks div strong a[href*="profile"] { top: 243px }
#mal_cs_otherlinks div a[href*="history"] { top: 285px }
#mal_cs_links div a[href*="animelist"] { top: 327px }
#mal_cs_links div a[href*="mangalist"] { top: 367px }
#mal_cs_links div a[href*="addtolist"] { top: 411px }
#mal_cs_powered a[href*="/"]:hover, #mal_cs_links div a:hover, #mal_cs_otherlinks div a[href*="history"]:hover,
#mal_cs_otherlinks div strong a:hover, #mal_cs_listinfo div a:hover, #mal_cs_otherlinks div a[href*="login"]:hover {
-webkit-filter: grayscale(0%);
filter: grayscale(0%)
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
@media screen and (device-width: 1366px), (device-width: 1360px) {
#list_surround { width: 850px }
#inlineContent { top: 20px; left: 920px; background-size: 32% }
.status_selected, .status_not_selected { position: absolute !important; top: 151px !important }
.status_not_selected a, .status_selected a { position: absolute !important; top: 0px !important; left: 0px }
.status_selected:first-of-type, .status_not_selected:first-of-type { left: 600px }
.status_selected:nth-of-type(2), .status_not_selected:nth-of-type(2) { left: 650px }
.status_selected:nth-of-type(3), .status_not_selected:nth-of-type(3) { left: 700px }
.status_selected:nth-of-type(4), .status_not_selected:nth-of-type(4) { left: 750px }
.status_selected:nth-of-type(5), .status_not_selected:nth-of-type(5) { left: 800px }
.status_selected:last-of-type, .status_not_selected:last-of-type { left: 550px }
@media screen and (device-height: 1024px) { #inlineContent { top: 175px } }
}
@media screen and (device-width: 1280px) {
#list_surround { width: 800px }
#inlineContent { left: 880px; background-size: 30% }
.status_selected, .status_not_selected { position: absolute !important; top: 151px !important }
.status_not_selected a, .status_selected a { position: absolute !important; top: 0px !important; left: 0px }
.status_selected:first-of-type, .status_not_selected:first-of-type { left: 550px }
.status_selected:nth-of-type(2), .status_not_selected:nth-of-type(2) { left: 600px }
.status_selected:nth-of-type(3), .status_not_selected:nth-of-type(3) { left: 650px }
.status_selected:nth-of-type(4), .status_not_selected:nth-of-type(4) { left: 700px }
.status_selected:nth-of-type(5), .status_not_selected:nth-of-type(5) { left: 750px }
.status_selected:last-of-type, .status_not_selected:last-of-type { left: 500px }
@media screen and (device-height: 1024px) { #inlineContent { top: 200px } }
@media screen and (device-height: 960px) { #inlineContent { top: 150px } }
@media screen and (device-height: 800px) { #inlineContent { top: 75px } }
@media screen and (device-height: 768px) { #inlineContent { top: 55px } }
@media screen and (device-height: 720px) { #inlineContent { top: 30px } }
}
@media screen and (device-width: 1024px){
#inlineContent { display: none !important }
#list_surround { width: 920px }
.status_selected, .status_not_selected, .status_not_selected a, .status_selected a { left: 980px }
.status_selected:first-of-type, .status_not_selected:first-of-type { top: 243px }
.status_selected:nth-of-type(2), .status_not_selected:nth-of-type(2) { top: 287px }
.status_selected:nth-of-type(3), .status_not_selected:nth-of-type(3) { top: 331px }
.status_selected:nth-of-type(4), .status_not_selected:nth-of-type(4) { top: 375px }
.status_selected:nth-of-type(5), .status_not_selected:nth-of-type(5) { top: 417px }
.status_selected:last-of-type, .status_not_selected:last-of-type { top: 200px }
}
@media screen and (device-width: 800px){
#inlineContent { display: none !important }
#list_surround { width: 700px }
.status_selected, .status_not_selected, .status_not_selected a, .status_selected a { left: 758px }
.status_selected:first-of-type, .status_not_selected:first-of-type { top: 243px }
.status_selected:nth-of-type(2), .status_not_selected:nth-of-type(2) { top: 287px }
.status_selected:nth-of-type(3), .status_not_selected:nth-of-type(3) { top: 331px }
.status_selected:nth-of-type(4), .status_not_selected:nth-of-type(4) { top: 375px }
.status_selected:nth-of-type(5), .status_not_selected:nth-of-type(5) { top: 417px }
.status_selected:last-of-type, .status_not_selected:last-of-type { top: 200px }
} |
slpfJul 2, 2016 10:33 AM
Jan 15, 2016 2:59 AM
#236
| Hello, I have modified the anime Psycho-Pass , so I hope you like it has obtained Preview:  code: @import "https://malcat-gen.appspot.com/series?preset=more"; @import url(http://storage.live.com/items/4A07C1EEED420167%21151); /* 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 */ body { background-attachment:fixed; background-clip:border-box; background-color:transparent; background-image:url(http://i57.tinypic.com/15i6906.jpg[/IMG]); background-position:0 50%, 0 0; background-repeat:no-repeat no-repeat; background-size:cover; font-family:calibri; } #inlineContent { display:inline-block !important; height:1080px !important; left:0 !important; margin:auto !important; position:fixed !important; right:0 !important; top:0 !important; width:1920px !important; z-index:-1 !important; } #list_surround { background-attachment:scroll; background-color:transparent; background-image:url(http://i60.tinypic.com/2910oap.jpg[/IMG]); background-position:30px -40px; background-repeat:no-repeat no-repeat; font-size:100%; line-height:1; margin:0 auto; padding-bottom:10px; padding-top:320px; position:absolute; right:-4px !important; width:700px; } a { color:#FFFFFF; text-decoration:none; text-shadow:none; } a:hover { color:#fff; text-decoration:underline; } .table_header { background-color:rgba(255, 255, 255, 0.4); } .table_header:first-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:10px; border-top-right-radius:0; } .table_header:nth-of-type(2) { padding-left:35px; text-align:left; } .table_header:last-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:0; border-top-right-radius:10px; } .td1 { background-color:rgba(0, 0, 0, 0.4); height:65px; } .td2 { background-color:rgba(0, 0, 0, 0.4); height:65px; } .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border:0 none; padding:4px; text-align:center; vertical-align:top; } .table_header, .td1, .td2, .category_totals { color:white; } .borderRBL { line-height:normal !important; } [cellspacing="0"] { line-height:17px; } .category_totals { background-color:rgba(255, 255, 255, 0.4); border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:0; border-top-right-radius:0; color:white; text-align:center; } [class^="header_"] * { background-repeat:no-repeat no-repeat; font-size:0; height:200px; line-height:24px; padding-bottom:4px; text-align:right; vertical-align:bottom; } .header_title { border-bottom-left-radius:4px; border-bottom-right-radius:4px; border-top-left-radius:4px; border-top-right-radius:4px; color:#FFFFFF; display:inline-block; font-style:italic; height:auto; padding:0 8px 0 0; text-shadow:rgba(0, 0, 0, 0.14902) 0 1px 1px; } #grand_totals { background-color:transparent; border:0 none; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; color:#FFFFFF; line-height:20px; min-height:20px; padding:8px; text-align:center; vertical-align:middle; } #copyright { background-color:rgba(180, 32, 48, 0.6); border-bottom-left-radius:3px; border-bottom-right-radius:3px; border-top-left-radius:3px; border-top-right-radius:3px; color:#EEEEEE; line-height:17px; margin-top:10px; padding:8px; text-align:center; } #copyright::after { } .hide { background-color:rgba(248, 162, 200, 0.701961); background-position:50% 50%; background-repeat:no-repeat no-repeat; background-size:cover; border:1px solid #FFFFFF; border-bottom-left-radius:7px; border-bottom-right-radius:7px; border-top-left-radius:7px; border-top-right-radius:7px; display:inline-block !important; height:55px; margin-left:33px; margin-top:-65px; position:absolute; width:35px; } .hide:hover { background-color:transparent; background-repeat:no-repeat no-repeat; background-size:cover; border-bottom-left-radius:20px; border-bottom-right-radius:20px; border-top-left-radius:20px; border-top-right-radius:20px; box-shadow:rgba(63, 52, 60, 0.54902) 0 0 8px 8px; margin-left:-130px; padding-right:150px; padding-top:220px !important; position:absolute; z-index:1; } .td1:nth-of-type(2), .td2:nth-of-type(2) { padding-left:35px; text-align:left; } .td1:nth-of-type(6), .td2:nth-of-type(6) { background-attachment:scroll; background-color:transparent; background-image:none; background-position:0 0; background-repeat:repeat repeat; border-bottom-style:none !important; border-bottom-width:medium !important; display:inline-block; font-family:cursive; font-size:9pt; height:0 !important; left:70px; line-height:16px !important; margin-top:16px; position:absolute; text-align:justify !important; width:720px; z-index:2; } .table_header:nth-of-type(6) { display:none; } span[id*="tagRow"] { display:block !important; } span[id*="tagLinks"] { display:none !important; } a, .td1, .td2, .category_totals { -webkit-transition:all 0.25s ease-in-out 0s; transition:all 0.25s ease-in-out 0s; } #list_surround .status_selected, #list_surround .status_not_selected { -webkit-background-clip:padding-box !important; background-clip:padding-box !important; background-color:transparent; background-image:url(http://i62.tinypic.com/107j23q.jpg[/IMG]); background-position:0 0; background-repeat:no-repeat no-repeat; background-size:contain; border:1px solid transparent; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; display:block; left:-300px; padding:0; position:absolute; top:20px; width:263px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-image:url(http://i57.tinypic.com/2i1mfc8.png[/IMG]); background-position:100% 0; top:140px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i61.tinypic.com/t5jhi1.jpg[/IMG]); background-position:0 0; top:260px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i58.tinypic.com/24b66p3.jpg[/IMG]); background-position:100% 0; top:380px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i62.tinypic.com/xc7l92.jpg[/IMG]); background-position:0 0; top:500px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i59.tinypic.com/2j645tt.jpg[/IMG]); background-position:100% 0; top:620px; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color:transparent; display:block; font-size:0; height:113px; width:263px; } .header_cw { background-color:transparent; background-image:url(http://i60.tinypic.com/v32dqq.jpg[/IMG]); background-position:50% 150px; background-repeat:no-repeat no-repeat; height:50px; margin-bottom:0; margin-top:-300px; } .header_completed { background-color:transparent; background-image:url(http://i57.tinypic.com/1zntp2h.jpg[/IMG]); background-position:50% 150px; background-repeat:no-repeat no-repeat; height:100px; margin-bottom:0; margin-top:-300px; } .header_onhold { background-color:transparent; background-image:url(http://i58.tinypic.com/k0lwti.jpg[/IMG]); background-position:50% 150px; background-repeat:no-repeat no-repeat; height:50px; margin-bottom:0; margin-top:-300px; } .header_dropped { background-color:transparent; background-image:url(http://i58.tinypic.com/j5w1mx.jpg[/IMG]); background-position:50% 150px; background-repeat:no-repeat no-repeat; height:50px; margin-bottom:0; margin-top:-300px; } .header_ptw { background-color:transparent; background-image:url(http://i61.tinypic.com/2agopxe.jpg[/IMG]); background-position:50% 150px; background-repeat:no-repeat no-repeat; height:75px; margin-bottom:0; margin-top:-300px; } .status_selected { display:block; } .status_not_selected { display:block; } .status_not_selected { opacity:0.7; } .status_not_selected:hover { color:transparent; opacity:1; } #list_surround { left:0 !important; margin:auto !important; position:absolute !important; right:0 !important; } /*COLOR OF THE "AIRING EXT." TEXT*/ .animetitle + small { color:#CC33FF !important; font-weight:bold; } * { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out;} /*DVD COVER HOVER GLITCH FIX (Chrome/Safari/Firefox/Opera only)*/ .hide:hover:after { background: transparent; content: " "; height: 75px; left: 0; position: absolute; top: 0; width: 210px; z-index: 20; } |
Akito707Apr 5, 2017 6:05 AM
Jan 16, 2016 7:25 AM
#237
| anime Arslan senki Preview:  code: @import "https://dl.dropboxusercontent.com/u/102421246/MAL/CSS/Lists/SAO/SaoTopMenuHahaido.css"; @import "https://malcat-gen.appspot.com/series?preset=more"; @import "https://dl.dropboxusercontent.com/s/vwbwhxxipyjq20i/SaoHeader.css"; * {-decoration: none; } body { background-attachment: fixed; background-clip: border-box; background-color: rgba(0, 0, 0, 0); /* background-image: url("http://i57.tinypic.com/2rgp5qd.jpg"); background-position: 44% 0;*/ background-image: url("http://www.up-king.com/almaciat/zcambcuhivth1tt3n36r.jpg"); background-position: 0% 60%; background-repeat: no-repeat no-repeat; background-size: cover; cursor: url("http://i.imgur.com/hCNOLWu.png") 1 1, auto; font-family: candara; } @font-face { font-family: "SAO"; src: url("http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Fonts/SAO.woff") format("woff"); } a, #searchListButton { cursor: url("http://i.imgur.com/6IcIxwf.png") 1 1, auto !important; } a { text-decoration: none; } body { background-color: rgba(0, 0, 0, 0); color: #615e5e; font-family: Candara; } #list_surround { font-size: 81.25%; height: 200px; left: 100%; line-height: 1; margin-left: -960px !important; padding-bottom: 10px; padding-left: 0; padding-right: 0; position: relative; top: 0; width: 650px; } .status_selected { background-repeat: no-repeat; background-size: contain, cover; display: inline-block; height: 100%; left: 0; position: fixed; top: 0; width: 100%; } .status_selected { position: fixed; z-index: -1; } .status_not_selected { position: fixed; } .status_selected a, .status_not_selected a { background-image: url("http://www.up-king.com/almaciat/sm5rvl0aabhp6ltikzwi.png"); display: inline-block; font-size: 0; height: 100px; position: fixed; right: 5px; top: 50%; width: 73px; } .status_not_selected a { opacity: 0.7; transition: opacity 0.4s ease 0s; } .status_selected a, .status_not_selected a:hover { opacity: 1; } .status_selected a:before, .status_not_selected a:before { background-image: url("http://www.up-king.com/almaciat/8h89hxl2dgv84ltbtaur.png"); content: ""; display: inline-block; height: 100px; left: -227px; position: absolute; } .status_not_selected a:before { opacity: 0; transition: opacity 0.4s ease 0s, width 0.4s ease 0s; width: 0; } .status_selected a:before, .status_not_selected a:hover:before { opacity: 1; width: 200px; } .status_not_selected a[href*="status=1"] { background-position: 0 0; margin-top: -285px; } .status_selected a[href*="status=1"], .status_not_selected a[href*="status=1"]:hover { background-position: -73px 0; margin-top: -285px; } .status_not_selected a[href*="status=2"] { background-position: 0 -100px; margin-top: -195px; } .status_selected a[href*="status=2"], .status_not_selected a[href*="status=2"]:hover { background-position: -73px -100px; margin-top: -195px; } .status_selected a[href*="status=2"]:before, .status_not_selected a[href*="status=2"]:before, .status_not_selected a[href*="status=2"]:hover:before { background-position: 0 -100px; } .status_not_selected a[href*="status=3"] { background-position: 0 -200px; margin-top: -100px; } .status_selected a[href*="status=3"], .status_not_selected a[href*="status=3"]:hover { background-position: -73px -200px; margin-top: -100px; } .status_selected a[href*="status=3"]:before, .status_not_selected a[href*="status=3"]:before, .status_not_selected a[href*="status=3"]:hover:before { background-position: 0 -200px; } .status_not_selected a[href*="status=4"] { background-position: 0 -300px; margin-top: -5px; } .status_selected a[href*="status=4"], .status_not_selected a[href*="status=4"]:hover { background-position: -73px -300px; margin-top: -5px; } .status_selected a[href*="status=4"]:before, .status_not_selected a[href*="status=4"]:before, .status_not_selected a[href*="status=4"]:hover:before { background-position: 0 -300px; } .status_not_selected a[href*="status=6"] { background-position: 0 -400px; margin-top: 90px; } .status_selected a[href*="status=6"], .status_not_selected a[href*="status=6"]:hover { background-position: -73px -400px; margin-top: 90px; } .status_selected a[href*="status=6"]:before, .status_not_selected a[href*="status=6"]:before, .status_not_selected a[href*="status=6"]:hover:before { background-position: 0 -400px; } .status_not_selected a[href*="status=7"] { background-position: 0 -500px; margin-top: 185px; } .status_selected a[href*="status=7"], .status_not_selected a[href*="status=7"]:hover { background-position: -73px -500px; margin-top: 185px; } .status_selected a[href*="status=7"]:before, .status_not_selected a[href*="status=7"]:before, .status_not_selected a[href*="status=7"]:hover:before { background-position: 0 -500px; } .table_header { padding-bottom: 4px; } .table_header span { display: none; } .table_header:nth-child(2) { text-align: left; } .td1, .td2 { padding: 4px 0; transition: background-color 0.5s ease 0s; } .animetitle + small { color: #ff6600 !important; font-weight: bold; text-shadow: 0 0 3px #000000, 0 0 2px #000000, 0 1px 7px #FFFFFF, 0 0 0 #000000; visibility: visible !important; } #list_surround small { visibility: hidden; } #list_surround small a:last-of-type { display: none !important; } td[class^="td"]:nth-child(2) { text-align: left; } td[class^="td"]:nth-child(3) { background-image: url("http://www.up-king.com/almaciat/yqgn0v6xjhcypn0tgil9.png"); background-position: 49% 3px; background-repeat: no-repeat; } [cellspacing="0"] { line-height: 17px; } #list_surround a[href*="http://myanimelist.net/panel.php?go=edit"], #list_surround a[href*="http://myanimelist.net/editlist.php?type="], #list_surround a[href*="http://myanimelist.net/panel.php?go=add"] { margin-right: 10px; visibility: visible !important; } .table_header, .td1, .td2 { background-color: rgba(255, 255, 255, 0.75); text-align: center; vertical-align: top; } tr:hover td[class^="td"] { background-color: #FFFFFF; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color: #cbaf72; text-shadow: 0 0 1px #cbaf72; } a { color: #7F7E7E; } .table_headerLink { color: #724f01 !important; line-height: 20px; } td[class^="td"]:nth-child(3), td[class^="td"]:nth-child(3) a { color: #FFFFFF !important; text-shadow: 0 0 0 #000000 !important; } td[class^="td"]:first-child { border-left: 2px solid #FFFFFF !important; } td[class^="td"]:last-child { border-right: 2px solid #FFFFFF !important; } .table_header { background-color: #FFFFFF; border-color: #FFFFFF; border-style: solid; border-width: 2px 0; } .table_header:first-child { border-left: 2px solid #FFFFFF !important; } .table_header:nth-child(5) { border-radius: 0 16px 0 0; border-right: 2px solid #FFFFFF !important; } .header_title { display: inline-block; height: 100px; pointer-events: none; } .category_totals { background-color: #9d6c02; border: 2px solid #FFFFFF; border-radius: 0 0 16px 16px; color: #FFFFFF; padding: 3px 3px 9px; text-align: center; } #grand_totals { background-color: #F2A603; border: 2px solid #FFFFFF; border-radius: 3px 3px 3px 3px; color: #000000; line-height: 20px; min-height: 20px; padding: 8px; text-align: center; vertical-align: middle; } #copyright:before { content: "Design by Inferno17."; font-size: 12px; } #copyright:after { content: "Edited by Inferno17."; font-size: 12px; } #copyright { background-color: #aa0006; border: 4px solid #DA6358; border-radius: 12px; color: #FFFFFF; display: block; margin-top: -10px !important; padding: 2px 14px 4px; position: relative; } #copyright a { color: #FFFFFF; font-size: 14px; padding-right: 2px; text-shadow: 1px 1px #F11C26; } #:before { color: #FFFFFF; content: " If we make it back to the real world. I'll find you again. And fall in love with you again."; display: block; font-family: 'SAO'; font-size: 18px; letter-spacing: 1px; line-height: 24px; padding-right: 4px; position: fixed; right: 0; text-shadow: 1px 1px #000000; top: 0; z-index: 1 !important; } td[class^="td"]:nth-of-type(2) { width: 454px !important; } .table_header:nth-of-type(6), span[id*="tagLinks"], div[id*="tagChangeRow"] { display: none !important; } td[class^="td"]:nth-of-type(6) { width: 0; } span[id*="tagRow"] { background-color: #FFFFFF !important; border: 2px solid #724f01; border-radius: 0 0 10px 10px; display: block !important; line-height: 15px !important; padding: 20px 8px 8px; position: fixed; right: 970px; text-shadow: 0 0 0 #000000 !important; top: 493px; visibility: hidden; width: 199px; } tr:hover span[id*="tagRow"] { color: #7F7E7E !important; visibility: visible; } :hover + .hide { background-color: #9d6c02; background-position: 50% 50% !important; background-repeat: no-repeat !important; background-size: auto auto !important; border-color: #FFFFFF; border-radius: 16px 16px 0 0; border-style: solid; border-width: 2px; box-shadow: 0 2px 2px #000000; display: block !important; height: 250px; padding: 39px 22px 9px 10px; position: fixed; right: 970px; top: 210px; width: 183px; } |
Akito707Apr 5, 2017 6:40 AM
Jan 17, 2016 4:21 AM
#238
| I was planning to share my previous layouts (Akame ga Kill & Nichijou) But, the layouts become a mess now, because I was messing around with the base layout... so.. it's better if I share this base layout first...  Demo : 350 entries | 1500 entries Source : Copy and Follow the instructions here List Setting : http://i.imgur.com/VBtS6Bz.jpg you can modify anything as you please... My layouts are a bit complicated. I will make a better explanation of my layouts on a new topic/thread after I repair the other two... |
 |
Jan 17, 2016 4:28 PM
#239
| a simple colourful & minimalistic list layout based on sunnysummerday's crayon theme goal: to make it look as minimalistic and similar to the seasonal anime page with crayon's theme optimized to view in: chrome compatibility: chrome (perfect) firefox (almost perfect?)   specs: โ for anime lists only โ showing one category when you open list โ tags on hover โ tested in chrome (works) โ tested in firefox (works) โ colorful & minimalistic โ custom scroll bar (only works in chrome!) โ no "more" button โ unique edit button (the green color below anime covers) โ can mark favorite animes (optional) code click here for the code (copy and paste everything!) raw version: (copy and paste everything inside the code) @import "https://dl.dropboxusercontent.com/s/dyp4b2tx0keo3pz/crayon.css";
/*banner*/
#inlinecontent::after{content: "username anime list" !important;}covers add this on top of everything: @import "http://mal-fellow-writer.appspot.com/anime/username/?covers=https://dl.dropbox.com/u/49469857/MAL/premade/formats/covers/more"; options to be ticked โ numbers โ score โ type โ episodes โ rating โ start/end dates โ total days watched โ storage โ tags โ priority don't forget to change default status selected to watching! (or anything else, just make sure it's not show all) tags as you can see in the image, the list is compatible with tags and appears on hover. there's a script which adds genres to the tags automatically just in one click! please install it and update your tags. it actually adds a button which says "update all" but this list has a unique top bar so it doesn't appear. please change the list layout to something else (preferably the default one) just to update tags and then back to this! mark favorite anime (optional) you can add a mark to your favorite anime in the list itself! it looks something like this:  code for it: /* favorite anime mark */
.animetitle[href*="9989"]:before, .animetitle[href*="11111"]:before {
border-left: 3px dotted #e8608c;
color: #e8608c;
content: " ";
padding-left: 5px;
}replace the numbers inside " " with the anime's number. you'll know the anime number when you open it's anime page or hover over it. for example, http://myanimelist.net/anime/269/Bleach. 269 is it's number. replace the number inside " " with it and it'll work. :) make sure you add this code to the very bottom of your code. credits: โ sunnysummerday for the mal theme and seasonal anime page coding which lead to the idea of this layout โ recuvan for helping me fix bugs and top bar โ deividas for tags code โ nymphiae for scroll bar code โ shishio-kun's club for other small codes which helped me questions, feedback, comments: โ this layout was tested in chrome, firefox and works fine โ any questions, feedback, criticism, etc is welcome. โ solely based on seasonal anime page with crayon theme โ was actually made for personal use but decided to share it! โ the code is probably a mess. sorry, i'm not that experienced with codes. โ you are free to edit, take anything as long as you credit/don't remove the credits. โ hope you like the layout; |
removed-userJan 18, 2016 9:15 AM
Jan 18, 2016 12:03 AM
#240
Love said: [size=110]a simple colorful & minimalistic list layout based on sunnysummerday's crayon theme goal: to make it look as minimalistic and similar to the seasonal anime page with crayon's theme optimized to view in: chrome compatibility: chrome (perfect) firefox (almost perfect?)  Very nice work |
Jan 22, 2016 11:20 AM
#241
| I decided to donate my first manga list layout It's pretty simple but I thought it was fun to create  body { background-attachment: fixed; background-image: url("http://i65.tinypic.com/260trb5.jpg") !important; background-position: 0 0; background-repeat: no-repeat no-repeat; background-size: 100% 100%; color: #FFFFFF; font-family: Candara; font-size: 12px; } #list_surround { left: 48%; margin: auto; position: absolute; width: 550px; } .td1, .td2 { padding: 3px; } .animetitle + small { color: pink!important; } .animetitle + small:before { } null { } td:nth-of-type(2) small { color: pink; font-size: 10px; padding-right: 10px; } td:nth-of-type(2) small a { color: #F0304F; } .td1:nth-of-type(1), .td2:nth-of-type(1) { background-color: rgba(0, 0, 0, 0.5); border-left-style: solid !important; border-left-width: 2px !important; } .td1:nth-of-type(5), .td2:nth-of-type(5) { background-color: rgba(0, 0, 0, 0.5); border-right-style: solid; border-right-width: 2px; } .td1:nth-of-type(4), .td2:nth-of-type(4), td.table_header:nth-of-type(4) { background-color: rgba(0, 0, 0, 0.5); } .td1:nth-of-type(3), .td2:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); } .td1:nth-of-type(3), .td2:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); } td.table_header:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); padding-right: 7px; } td.table_header:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); } .td1:nth-of-type(2), .td2:nth-of-type(2) { background-color: rgba(0, 0, 0, 0.5); } a, a:visited { color: #FFFFFF; text-decoration: initial; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color: pink; } .table_header { background-color: rgba(0, 0, 0, 0.5); font-size: 10px; padding: 2px; } td.table_header:nth-of-type(1) { border-bottom-right-radius: 0; border-left: 2px solid white !important; border-top: 2px solid white !important; border-top-left-radius: 10px; border-top-right-radius: 0; } td.table_header:nth-of-type(5) { border-bottom-right-radius: 0; border-right: 2px solid white !important; border-top: 2px solid white !important; border-top-left-radius: 0; border-top-right-radius: 10px; } td.table_header:nth-of-type(2), td.table_header:nth-of-type(3), td.table_header:nth-of-type(4) { border-top: 2px solid white !important; } .category_totals { background-color: rgba(0, 0, 0, 0.5); border-bottom-style: solid; border-bottom-width: 2px; border-left: 2px solid white !important; border-radius: 0 0 10px 10px; border-right: 2px solid white; font-size: 10px; padding: 2px 2px 2px 40px; } .borderRBL { border-left-style: solid !important; border-left-width: 2px !important; border-right: 2px solid white !important; color: #2030F0 !important; font-size: 11px; padding-left: 39px; } .borderRBL a, .borderRBL a:visited { color: #F0304F !important; text-decoration: initial; } .borderRBL a:hover { color: #F0304F !important; } #copyright { border-radius: 8px 8px 8px 8px; color: #000000; font-size: 11px; margin-bottom: 70px; padding: 2px; position: relative !important; text-align: center !important; top: 10px; width: 650px; } #copyright:after { border-radius: 8px 8px 8px 8px; color: #000000 !important; content: "List Design By Diveniré" !important; left: -3px; position: absolute !important; top: 40px !important; width: 650px !important; } #copyright a { color: #000000; } #grand_totals { display: none; } td:nth-of-type(2) small a { display: none; } td:nth-of-type(2) small { color: transparent; } [class^="header_"] * { font-size: 0; height: 10px; line-height: 24px; padding-bottom: 4px; text-align: left; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; color: #FFFFFF; display: inline-block; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } .header_cw { background-color: transparent; background-image: url("http://i68.tinypic.com/2v11dh0.jpg"); background-position: center 0; background-repeat: no-repeat no-repeat; height: 85px; margin-bottom: 0; } .header_completed { background-color: transparent; background-image: url("http://i66.tinypic.com/2hg5vtl.jpg"); background-position: center 0; background-repeat: no-repeat no-repeat; height: 85px; margin-bottom: 0; } .header_onhold { background-color: transparent; background-image: url("http://i63.tinypic.com/vrbkbd.jpg"); background-position: center 0; background-repeat: no-repeat no-repeat; height: 85px; margin-bottom: 0; } .header_dropped { background-color: transparent; background-image: url("http://i65.tinypic.com/15oxfn4.jpg"); background-position: center 0; background-repeat: no-repeat no-repeat; height: 85px; margin-bottom: 0; } .header_ptw { background-color: transparent; background-image: url("http://i65.tinypic.com/2rwucde.jpg"); background-position: center 0; background-repeat: no-repeat no-repeat; height: 85px; margin-bottom: 0; } .header_title { background-color: transparent !important; color: transparent; } #copyright { border-width: 2px; border-color: white; border-style: solid; width: 542px; padding-bottom: 47px; background-color: rgba(1,1,1,.5); } #copyright, #copyright a, #copyright:after { color: white !important; } |
 |
Jan 22, 2016 12:36 PM
#242
Divenire said: well as you say, It is kind of simple. But the enchanting sense of it more than makes up for that :3I decided to donate my first manga list layout It's pretty simple but I thought it was fun to create body { background-attachment: fixed; background-image: url("http://i65.tinypic.com/260trb5.jpg") !important; background-position: 0 0; background-repeat: no-repeat no-repeat; background-size: 100% 100%; color: #FFFFFF; font-family: Candara; font-size: 12px; } #list_surround { left: 48%; margin: auto; position: absolute; width: 550px; } .td1, .td2 { padding: 3px; } .animetitle + small { color: pink!important; } .animetitle + small:before { } null { } td:nth-of-type(2) small { color: pink; font-size: 10px; padding-right: 10px; } td:nth-of-type(2) small a { color: #F0304F; } .td1:nth-of-type(1), .td2:nth-of-type(1) { background-color: rgba(0, 0, 0, 0.5); border-left-style: solid !important; border-left-width: 2px !important; } .td1:nth-of-type(5), .td2:nth-of-type(5) { background-color: rgba(0, 0, 0, 0.5); border-right-style: solid; border-right-width: 2px; } .td1:nth-of-type(4), .td2:nth-of-type(4), td.table_header:nth-of-type(4) { background-color: rgba(0, 0, 0, 0.5); } .td1:nth-of-type(3), .td2:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); } .td1:nth-of-type(3), .td2:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); } td.table_header:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); padding-right: 7px; } td.table_header:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); } .td1:nth-of-type(2), .td2:nth-of-type(2) { background-color: rgba(0, 0, 0, 0.5); } a, a:visited { color: #FFFFFF; text-decoration: initial; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color: pink; } .table_header { background-color: rgba(0, 0, 0, 0.5); font-size: 10px; padding: 2px; } td.table_header:nth-of-type(1) { border-bottom-right-radius: 0; border-left: 2px solid white !important; border-top: 2px solid white !important; border-top-left-radius: 10px; border-top-right-radius: 0; } td.table_header:nth-of-type(5) { border-bottom-right-radius: 0; border-right: 2px solid white !important; border-top: 2px solid white !important; border-top-left-radius: 0; border-top-right-radius: 10px; } td.table_header:nth-of-type(2), td.table_header:nth-of-type(3), td.table_header:nth-of-type(4) { border-top: 2px solid white !important; } .category_totals { background-color: rgba(0, 0, 0, 0.5); border-bottom-style: solid; border-bottom-width: 2px; border-left: 2px solid white !important; border-radius: 0 0 10px 10px; border-right: 2px solid white; font-size: 10px; padding: 2px 2px 2px 40px; } .borderRBL { border-left-style: solid !important; border-left-width: 2px !important; border-right: 2px solid white !important; color: #2030F0 !important; font-size: 11px; padding-left: 39px; } .borderRBL a, .borderRBL a:visited { color: #F0304F !important; text-decoration: initial; } .borderRBL a:hover { color: #F0304F !important; } #copyright { border-radius: 8px 8px 8px 8px; color: #000000; font-size: 11px; margin-bottom: 70px; padding: 2px; position: relative !important; text-align: center !important; top: 10px; width: 650px; } #copyright:after { border-radius: 8px 8px 8px 8px; color: #000000 !important; content: "List Design By Diveniré" !important; left: -3px; position: absolute !important; top: 40px !important; width: 650px !important; } #copyright a { color: #000000; } #grand_totals { display: none; } td:nth-of-type(2) small a { display: none; } td:nth-of-type(2) small { color: transparent; } [class^="header_"] * { font-size: 0; height: 10px; line-height: 24px; padding-bottom: 4px; text-align: left; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; color: #FFFFFF; display: inline-block; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } .header_cw { background-color: transparent; background-image: url("http://i68.tinypic.com/2v11dh0.jpg"); background-position: center 0; background-repeat: no-repeat no-repeat; height: 85px; margin-bottom: 0; } .header_completed { background-color: transparent; background-image: url("http://i66.tinypic.com/2hg5vtl.jpg"); background-position: center 0; background-repeat: no-repeat no-repeat; height: 85px; margin-bottom: 0; } .header_onhold { background-color: transparent; background-image: url("http://i63.tinypic.com/vrbkbd.jpg"); background-position: center 0; background-repeat: no-repeat no-repeat; height: 85px; margin-bottom: 0; } .header_dropped { background-color: transparent; background-image: url("http://i65.tinypic.com/15oxfn4.jpg"); background-position: center 0; background-repeat: no-repeat no-repeat; height: 85px; margin-bottom: 0; } .header_ptw { background-color: transparent; background-image: url("http://i65.tinypic.com/2rwucde.jpg"); background-position: center 0; background-repeat: no-repeat no-repeat; height: 85px; margin-bottom: 0; } .header_title { background-color: transparent !important; color: transparent; } #copyright { border-width: 2px; border-color: white; border-style: solid; width: 542px; padding-bottom: 47px; background-color: rgba(1,1,1,.5); } #copyright, #copyright a, #copyright:after { color: white !important; } |
|
Jan 29, 2016 3:35 PM
#243
| I'm donating my new css layout, it's a Tomori Nao theme-list from the anime Charlotte. Demo  More preview pictures     My list includes:
The template was based on HolyPotato Madoka template, so the list has covers, places to write short reviews. List setting  Credits: _ The list was modified from Madoka template from TheHolyPotato, big thanks to him. _ Thanks Doomcat for helping me with bug fixes. _ Thanks Yorium for showing me a few tricks in pts to design the list. Codes @import "http://mal-image.appspot.com/anime/USERNAME"; @import url(https://dl.dropboxusercontent.com/u/118667597/TomoriNaoDonatedCodeV1.css); @import url(https://dl.dropboxusercontent.com/u/118667597/TomoriNaoDonatedCodeV1.css); Replace USERNAME with your user name in this line |
Takana_no_HanaJan 29, 2016 10:41 PM
Feb 4, 2016 2:44 PM
#244
| @Takana_no_Hana @Divenire @Vaisar Thanks for donating these lovely designs to everyone, I've added them to this big premade layouts topic: http://myanimelist.net/forum/?topicid=318587#msg37396975 |
Feb 7, 2016 2:32 PM
#245
Feel free to edit and use my current layout, I don't mind other people using it. Please do enable the tags column though, since it is able to show them. Below the CSS code:
@import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM);
@import url(https://dl.dropboxusercontent.com/s/sbeb5rempp2s3lc/Anime%20Images.css?dl=0);
@import "http://fonts.googleapis.com/css?family=Raleway";
*, *::after, *::before {
box-sizing: border-box;
}
BODY {
background-image: url("http://imgur.com/gQXuhCi.png");
background-attachment: fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-position: center center;
color: #000000;
font-family: Raleway;
font-size: 14px;
margin: 0;
-webkit-text-size-adjust: 100%;
}
input {
font-family: Raleway;
}
a {
color: #ffffff;
font-size: 14px;
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
transition: 0.5s;
}
tr [class^="td"] {
background: rgba(0, 0, 0, 0.15) none repeat scroll 0 0;
border: 0 none;
color: #ffffff;
}
tr [class^="td"]:nth-child(4), tr [class^="table_header"]:nth-child(4) {
width: 60px;
}
tr:hover [class^="td"] {
background: rgba(102,0, 102,0.6) none repeat scroll 0 0;
transition: all 0.2s ease-in-out;
}
table[class^="header_"] {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
border-color: #ffffff;
border-image: none;
border-style: none;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-width: 2em 0 0;
margin-top: 1em;
}
#list_surround {
margin: 0 auto;
text-decoration: none;
}
#mal_control_strip {
left: 25% !important;
margin: 0 auto !important;
background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0 !important;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
position: fixed !important;
z-index: 1;
font-family: Raleway !important;
}
#mal_cs_otherlinks strong{
padding-left: 0.25em !important;
}
#mal_control_strip strong{
font-family: Raleway !important;
}
#mal_control_strip a{
font-family: Raleway !important;
font-size: 12px !important;
padding: 0.25em;
text-decoration: none !important;
}
#mal_control_strip img {
border: 0 none !important;
margin: 0 !important;
padding: 0 !important;
}
#mal_control_strip a:hover {
background: rgba(102,0,102 ,0.6) none repeat scroll 0 0;
padding: 0.25em;
transition: 0.5s;
}
#mal_cs_links {
width: 170px !important;
}
#mal_cs_pic a:hover{
background: transparent;
}
#mal_cs_powered a {
border: 0 none;
display: none !important;
margin: 0;
padding: 0;
}
#mal_control_strip, #list_surround, #copyright {
width: 50% !important;
}
@media screen and (max-width: 1400px)
{
#mal_control_strip, #copyright {
left: 30% !important;
width: 60% !important;
}
#list_surround{
margin-left: 30% !important;
width: 60%!important;
}
:hover + .hide {
left: 1.5% !import ant;
}
[id^="tagLinks"] {
left: 1.5% !important;
}
}
@media screen and (max-width: 1200px) {
#mal_control_strip, #list_surround, #copyright {
width: 70% !important;
}
#list_surround{
margin-left: 15% !important;
width: 70%!important;
}
#copyright, #mal_control_strip {
left: 15% !important;
width: 70% !important;
}
:hover + .hide {
visibility: hidden !important;
}
[id^="tagLinks"] {
visibility: hidden !important;
}
}
@media screen and (max-width: 1000px) {
#mal_control_strip, #list_surround, #copyright {
width: 80% !important;
}
#list_surround{
margin-left: 10% !important;
}
#copyright, #mal_control_strip {
left: 10% !important;
width: 80% !important;
}
}
@media screen and (max-width: 800px) {
#mal_cs_powered{
display: none !important;
}
#mal_control_strip, #list_surround, #copyright {
width: 90% !important;
}
#copyright, #mal_control_strip {
left: 5% !important;
width: 90% !important;
}
#list_surround{
margin-left: 5% !important;
}
}
@media screen and (max-width: 680px)
{
#mal_control_strip, #list_surround, #copyright {
left:0% !important;
width: 100% !important;
}
body, a{
font-size: 18px !important;
}
.header_title{
font-size: 48px;
}
#mal_control_strip{
position: relative !important;
}
#copyright {
width: 100% !important;
position: relative !important;
}
#list_surround{
margin-left: 0% !important;
}
.status_selected{
display: block;
width: 100% !important;
margin-top: 0em !important;
border-radius: 0px !important;
}
.status_not_selected{
display: block;
width: 100% !important;
margin-top: 0em !important;
border-radius: 0px !important;
}
.status_selected a{
display: block;
width: 100% !important;
margin-top: 0em !important;
border-radius: 0px !important;
}
.status_not_selected a{
display: block;
width: 100% !important;
margin-top: 0em !important;
border-radius: 0px !important;
}
}
@media screen and (max-width: 1000px) and (orientation: landscape)
{
#mal_control_strip, #list_surround, #copyright {
left:0% !important;
width: 100% !important;
}
#mal_control_strip{
position: relative !important;
}
#copyright {
width: 100% !important;
position: relative !important;
}
#list_surround{
margin-left: 0% !important;
}
body, a{
font-size: 18px !important;
}
.header_title{
font-size: 48px;
}
}
#copyright {
background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
color: #ffffff;
margin: 0 auto;
padding-top: 6px;
text-align: center;
font-size: 14px;
}
#copyright:after {
content: "This stylesheet was designed by Ulyssesmoore";
display: block;
}
#list_surround > table:nth-child(2) {
margin-top: 3em;
}
#list_surround > table:nth-child(2) > tbody > tr > td:nth-child(1) {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
#list_surround > table:nth-child(2) > tbody > tr > td:nth-child(6) {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
#grand_totals {
background-color: rgba(0, 0, 0, 0.8);
border-radius: 5px;
color: #ffffff;
text-align: center;
font-size: 14px;
margin-bottom: 6em!important;
margin-top: -5em !important;
}
.td1 {
background-color: #ffffff;
border-color: #ababab;
border-style: solid;
border-width: 0 1px 1px 0;
color: #000000;
padding: 2px;
}
.td2 {
background-color: #f1f1f1;
border-color: #ababab;
border-style: solid;
border-width: 0 1px 1px 0;
color: #000000;
padding: 2px;
}
.table_header {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: rgba(0, 0, 0, 0.5);
border-color: -moz-use-text-color;
border-image: none;
border-style: none;
border-width: 1px 1px 1px 0;
color: #ffffff;
padding: 2px;
text-align: center;
}
.table_headerLink {
color: #ffffff;
text-decoration: none;
}
.table_headerLink:visited {
}
.table_headerLink:hover {
}
.list_lightbox {
border-color: #ababab;
border-style: solid;
border-width: 1px;
color: #000000;
background-color: #ffffff !important;
font-family: Verdana,Arial;
font-size: 11px;
padding: 2px;
}
.status_selected {
background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
border-color: #ababab;
border-style: solid;
border-width: 1px 1px 1px 1px !important;
color: #ffffff !important;
margin-top: 3em;
padding: 0.25em;
width: 8.333333333333333%;
}
.status_not_selected {
background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
border-color: #ababab;
border-style: solid;
border-width: 1px 1px 1px 1px !important;
bottom: 3em !important;
color: #ffffff;
padding: 0.25em;
width: 8.333333333333333%;
}
.status_not_selected a, .status_selected a {
color: #ffffff;
}
.header_cw {
margin-top: -5em;
}
.header_completed {
margin-top: -5em;
}
.header_onhold {
margin-top: -5em;
}
.header_dropped {
margin-top: -5em;
}
.header_ptw {
margin-top: -5em;
}
.header_title {
color: #ffffff;
font-family: Century Gothic, Apple Gothic, sans-serif;
font-size: 30px;
text-align: center;
}
.category_totals {
background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
color: #ffffff;
text-align: center;
font-size: 14px;
}
.header_al {
font-size: 16px;
}
.header_al_links {
}
.animetitle {
color: white;
}
/*
CODES (REPLACEMENT FOR "CSS FOR FOXGIRLS" IMPORT)
Used to remove the more button (which no longer works after using the code above to show covers). Also helps with settings for the tag hover option if you use that.
*/
#list_surround table:nth-of-type(n+4):hover td:nth-of-type(3),
#list_surround table:nth-of-type(n+4):hover td:nth-of-type(4),
#list_surround table:nth-of-type(n+4):hover td:nth-of-type(5),
#list_surround table:nth-of-type(n+4):hover td:nth-of-type(6),
#list_surround table:nth-of-type(n+4):hover td:nth-of-type(7),
#list_surround table:nth-of-type(n+4):hover td:nth-of-type(8) {
display: table-cell;
}
/*#list_surround small a:last-of-type {
display: none !important;
}*/
.animetitle + small {
visibility: visible !important;
color: #FF4500;
}
#list_surround a[href*="http://myanimelist.net/panel.php?go=edit"],
#list_surround a[href*="http://myanimelist.net/editlist.php?type="],
#list_surround a[href*="http://myanimelist.net/panel.php?go=add"] {
visibility: visible !important;
margin-right: 10px
}
.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;
}
.td1:nth-of-type(6) small:hover, .td2:nth-of-type(6) small:hover,
.td1:nth-of-type(5) small:hover, .td2:nth-of-type(5) small:hover,
.td1:nth-of-type(4) small:hover, .td2:nth-of-type(4) small:hover{
text-decoration: underline;
}
.hide{
transition: .2s;
background-size: cover;
left: 5%;
top: 30%;
height: 350px;
width: 245px;
padding-bottom: 0px;
border-style: solid;
border-color: #000000;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color: rgba(102, 0, 102, 0.75);
background-position: center 50% !important;
background-repeat: no-repeat !Important;
display: block !important;
position: fixed;
visibility: hidden;
opacity: 0;
}
.hide:after {
display: block;
color: #ffffff;
margin-top: 25em;
}
/* OTHER SETTINGS */
:hover + .hide {
visibility: visible;
opacity: 1;
}
#btn-back_to_mobile {
display: none !important;
}
#searchListButton{
display: none !important;
}
::selection {
background: #660066; /* WebKit/Blink Browsers */
color: #ffffff
}
::-moz-selection {
background: #660066; /* Gecko Browsers */
color: #ffffff
}
/**/
[id^="tagLinks"] {
display: block;
font-size: 0;
opacity: 0;
overflow: hidden;
pointer-events: none;
position:fixed;
right: 0;
width: 250px;
z-index: 2;
left:5%;
top: calc(31% + 350px);
}
[id^="tagLinks"] a {
font-size:12px;
background-color: rgba(0,0,0,0.85);
border: 1px solid #000000;
border-radius: 2px;
color: #fff;
display: inline-block;
height: 20px;
line-height: 15px;
margin-bottom: 5px;
margin-right: 5px;
max-width: 217px;
overflow: hidden;
padding: 0 10px;
vertical-align: top;
white-space: nowrap;
}
[id^="tagLinks"] a:first-child {
background-color: rgba(102,0,102,0.85);
border: 1px solid #660066;
}
table:hover .animetitle::after, table:hover [id^="tagLinks"], table:hover + .hide {
margin-right: 0;
opacity: 1;
}
.td1:last-child, .td2:last-child, .table_header:last-child{
width: 30px;
}
.table_header:hover:nth-child(6){
display: table-cell!important;
}
.table_header:nth-child(6) > strong, .table_header:hover:nth-child(6){
display:none;
}
#mal_cs_listinfo{
width:100px !important;
}
#copyright {
visibility: visible;
bottom: 0;
position: fixed;
}
/**/
.category_totals{
display: block;
margin-bottom: 5em;
}
.inputtext{
font-family: Raleway;
font-size: 12px;
}
Enjoy using it. |
| -Start the day on wings- |
Feb 16, 2016 6:36 PM
#246
 http://i.imgur.com/99eATy7.png feel free to use it. tested on 15 inch screen, not sure how it will look on other screens, but it should be fine. live preview: http://myanimelist.net/animelist/vzangetsuha 1) This comes with a hover cover mod, so please change my username with yours at the import on the top. 2) to replace sidebar avatar, change the image in #inlineContent at the bottom. 3) to replace banner image, change the iamge in #list_surround::before http://pastebin.com/4CSMZHfV
@import "http://mal-image.appspot.com/all/isaychris";
body {
background-attachment: fixed;
background-color: #eeeeee;
background-image: url("https://dl.dropboxusercontent.com/u/188037746/15/pw_maze_white.png");
font-family: arial;
font-size: 13px !important;
}
* {
text-decoration: none !important;
}
a {
color: white;
}
a:hover {
border-bottom: 2px solid #607d8b;
color: #ffffff;
text-decoration: none;
}
.status_not_selected a, .status_selected a {
background-color: #90a4ae;
display: block !important;
height: 25px;
line-height: 25px;
padding-left: 12px;
text-decoration: none !important;
width: 188px;
}
.status_selected a {
background-color: #78909c;
height: 25px;
line-height: 25px;
padding-left: 12px;
width: 188px;
}
.status_not_selected a:hover {
background-color: #78909c;
border-bottom: medium none !important;
height: 25px;
line-height: 25px;
padding-left: 12px;
width: 188px;
}
.status_selected a:hover {
background-color: #78909c;
border-bottom: medium none !important;
height: 25px;
line-height: 25px;
padding-left: 12px;
text-decoration: none !important;
}
.status_selected, .status_not_selected {
margin-left: -220px;
position: fixed;
text-align: left;
top: 320px;
}
.status_selected + .status_not_selected, .status_not_selected + .status_selected, .status_not_selected + .status_not_selected {
top: 345px;
}
.status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected {
top: 370px;
}
.status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
top: 395px;
}
.status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
top: 420px;
}
.status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
top: 295px;
}
#list_surround {
background-color: rgba(0, 0, 0, 0.06);
margin: 0 auto !important;
padding-bottom: 25px !important;
padding-left: 250px !important;
padding-right: 30px !important;
padding-top: 270px;
width: 850px !important;
}
#list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped {
margin-top: 20px;
}
#list_surround .header_title span {
color: white;
font-size: 15px;
}
.header_title {
background-color: #607d8b !important;
border-radius: 15px 15px 0 0;
padding: 10px;
text-align: center !important;
}
#list_surround .header_title .thickbox {
display: none;
}
#list_surround br {
display: none;
}
.borderRBL {
color: #cccccc !important;
}
.borderRBL br {
display: block !important;
}
.table_header {
background: #607d8b none repeat scroll 0 0 !important;
line-height: 1.8em;
padding: 4px;
}
.td1 {
background: #90a4ae none repeat scroll 0 0;
line-height: 20px;
padding: 4px;
}
.td2 {
background: #90a4ae none repeat scroll 0 0;
line-height: 20px;
padding: 4px;
}
#list_surround .animetitle + small {
background: #607d8b none repeat scroll 0 0 !important;
border-radius: 4px;
font-size: 13px;
margin-left: 10px;
opacity: 1;
padding: 2px;
text-transform: lowercase;
}
.td1, .td2, .table_header {
color: white;
}
tr:hover td.td1 small, tr:hover td.td2 small {
font-size: 13px;
opacity: 1;
}
.td1 small, .td2 small {
font-size: 13px;
opacity: 0;
}
tr:hover .td2, tr:hover .td1 {
background: #78909c none repeat scroll 0 0;
}
#list_surround .category_totals {
background-color: #607d8b !important;
border-radius: 0 0 15px 15px;
box-shadow: 0 3px 6px -2px gray;
color: #ffffff;
line-height: 25px;
margin-top: 15px;
text-align: center;
}
#list_surround #grand_totals {
background-color: #5c8ae6;
color: #ffffff;
display: none;
line-height: 25px;
text-align: center;
}
#searchBox {
background: #90a4ae none repeat scroll 0 0;
border-style: hidden;
color: white !important;
font-size: 15px !important;
height: 38px !important;
position: absolute;
right: -7px !important;
text-align: center;
top: -4px !important;
width: 200px !important;
}
#searchListButton {
display: none;
}
#mal_control_strip {
background-color: #607d8b !important;
background-image: url("") !important;
box-shadow: 0 -3px 10px #000000;
padding-left: 0 !important;
padding-right: 0 !important;
position: fixed;
top: 0 !important;
width: 100% !important;
z-index: 5;
}
#mal_cs_powered a {
display: none;
}
#copyright::after {
background-color: #607d8b;
border-radius: 15px;
color: #ffffff;
content: "isaychris";
display: block;
font-size: 12px;
height: 400px;
line-height: 25px;
margin-left: -220px;
position: fixed;
text-align: center;
text-transform: uppercase;
top: 70px;
width: 200px;
z-index: -1;
box-shadow: 0 3px 6px -2px gray;
}
#list_surround::before {
background-color: #607d8b;
background-image: url("http://i.imgur.com/lxDniKJ.gif") !important;
border-radius: 15px !important;
box-shadow: 0 3px 6px -2px gray;
color: rgba(0, 0, 0, 0) !important;
content: "";
display: block !important;
height: 200px !important;
position: absolute !important;
top: 70px !important;
width: 850px !important;
}
:hover + .hide {
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: cover;
display: block !important;
height: 199px;
margin-left: -220px;
position: fixed;
top: 96px;
width: 200px;
z-index: 4;
}
#copyright {
color: rgba(0, 0, 0, 0);
line-height: 25px !important;
margin-top: -25px !important;
padding: 0 !important;
}
#inlineContent {
background-image: url("http://cdn.myanimelist.net/images/userimages/1117293.jpg");
background-position: center center;
background-repeat: no-repeat;
border-radius: 5px;
color: white;
display: inline !important;
font-weight: lighter !important;
height: 179px !important;
margin-left: -220px;
opacity: 1 !important;
padding-bottom: 20px;
pointer-events: none;
position: fixed;
top: 96px;
width: 200px !important;
}
|
isaychrisApr 10, 2016 4:34 PM
Feb 23, 2016 2:37 PM
#247
Madara22 said: I made a little adjustments since I showed it a week or 2 ago in Show off topic. Noblesse Preview Cursor: Preview Animelist: Code: @import "http://mal-fellow-writer.appspot.com/anime/Madara22/?covers=http://dl.dropbox.com/u/49469857/MAL/premade/formats/covers/more"; @import "https://dl.dropboxusercontent.com/s/1hpxypwgfyjeqdg/Noblesse.css?dl=0"; Body {} For example @import "http://mal-fellow-writer.appspot.com/anime/Madara22/?covers=http://dl.dropbox.com/u/49469857/MAL/premade/formats/covers/more"; Hello I loved your layout . I love Noblesse But I can't understand something . The code for this is only that small code in the spoiler link ? Also can I change the picture with something else if I want later ? I have a problem opening the Dropbox link if it is necessary for the code . isaychris said: http://i.imgur.com/99eATy7.png feel free to use it. tested on 15 inch screen, not sure how it will look on other screens, but it should be fine. live preview: http://myanimelist.net/animelist/vzangetsuha 1) This comes with a hover cover mod, so please change my username with yours at the import on the top. 2) to replace sidebar avatar, change the image in #inlineContent at the bottom. 3) to replace banner image, change the iamge in #list_surround::before http://pastebin.com/4CSMZHfV
@import "http://mal-fellow-writer.appspot.com/anime/isaychris/?covers=http://dl.dropbox.com/u/49469857/MAL/premade/formats/covers/more";
body {
background-attachment: fixed;
background-color: #eeeeee;
background-image: url("https://dl.dropboxusercontent.com/u/188037746/15/pw_maze_white.png");
font-family: arial;
font-size: 13px !important;
}
* {
text-decoration: none !important;
}
a {
color: white;
}
a:hover {
border-bottom: 2px solid #607d8b;
color: #ffffff;
text-decoration: none;
}
.status_not_selected a, .status_selected a {
background-color: #90a4ae;
display: block !important;
height: 25px;
line-height: 25px;
padding-left: 12px;
text-decoration: none !important;
width: 188px;
}
.status_selected a {
background-color: #78909c;
height: 25px;
line-height: 25px;
padding-left: 12px;
width: 188px;
}
.status_not_selected a:hover {
background-color: #78909c;
border-bottom: medium none !important;
height: 25px;
line-height: 25px;
padding-left: 12px;
width: 188px;
}
.status_selected a:hover {
background-color: #78909c;
border-bottom: medium none !important;
height: 25px;
line-height: 25px;
padding-left: 12px;
text-decoration: none !important;
}
.status_selected, .status_not_selected {
margin-left: -220px;
position: fixed;
text-align: left;
top: 320px;
}
.status_selected + .status_not_selected, .status_not_selected + .status_selected, .status_not_selected + .status_not_selected {
top: 345px;
}
.status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected {
top: 370px;
}
.status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
top: 395px;
}
.status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
top: 420px;
}
.status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
top: 295px;
}
#list_surround {
background-color: rgba(0, 0, 0, 0.06);
margin: 0 auto !important;
padding-bottom: 25px !important;
padding-left: 250px !important;
padding-right: 30px !important;
padding-top: 270px;
width: 850px !important;
}
#list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped {
margin-top: 20px;
}
#list_surround .header_title span {
color: white;
font-size: 15px;
}
.header_title {
background-color: #607d8b !important;
border-radius: 15px 15px 0 0;
padding: 10px;
text-align: center !important;
}
#list_surround .header_title .thickbox {
display: none;
}
#list_surround br {
display: none;
}
.borderRBL {
color: #cccccc !important;
}
.borderRBL br {
display: block !important;
}
.table_header {
background: #607d8b none repeat scroll 0 0 !important;
line-height: 1.8em;
padding: 4px;
}
.td1 {
background: #90a4ae none repeat scroll 0 0;
line-height: 20px;
padding: 4px;
}
.td2 {
background: #90a4ae none repeat scroll 0 0;
line-height: 20px;
padding: 4px;
}
#list_surround .animetitle + small {
background: #607d8b none repeat scroll 0 0 !important;
border-radius: 4px;
font-size: 13px;
margin-left: 10px;
opacity: 1;
padding: 2px;
text-transform: lowercase;
}
.td1, .td2, .table_header {
color: white;
}
tr:hover td.td1 small, tr:hover td.td2 small {
font-size: 13px;
opacity: 1;
}
.td1 small, .td2 small {
font-size: 13px;
opacity: 0;
}
tr:hover .td2, tr:hover .td1 {
background: #78909c none repeat scroll 0 0;
}
#list_surround .category_totals {
background-color: #607d8b !important;
border-radius: 0 0 15px 15px;
box-shadow: 0 3px 6px -2px gray;
color: #ffffff;
line-height: 25px;
margin-top: 15px;
text-align: center;
}
#list_surround #grand_totals {
background-color: #5c8ae6;
color: #ffffff;
display: none;
line-height: 25px;
text-align: center;
}
#searchBox {
background: #90a4ae none repeat scroll 0 0;
border-style: hidden;
color: white !important;
font-size: 15px !important;
height: 38px !important;
position: absolute;
right: -7px !important;
text-align: center;
top: -4px !important;
width: 200px !important;
}
#searchListButton {
display: none;
}
#mal_control_strip {
background-color: #607d8b !important;
background-image: url("") !important;
box-shadow: 0 -3px 10px #000000;
padding-left: 0 !important;
padding-right: 0 !important;
position: fixed;
top: 0 !important;
width: 100% !important;
z-index: 5;
}
#mal_cs_powered a {
display: none;
}
#copyright::after {
background-color: #607d8b;
border-radius: 15px;
color: #ffffff;
content: "isaychris";
display: block;
font-size: 12px;
height: 400px;
line-height: 25px;
margin-left: -220px;
position: fixed;
text-align: center;
text-transform: uppercase;
top: 70px;
width: 200px;
z-index: -1;
box-shadow: 0 3px 6px -2px gray;
}
#list_surround::before {
background-color: #607d8b;
background-image: url("http://i.imgur.com/lxDniKJ.gif") !important;
border-radius: 15px !important;
box-shadow: 0 3px 6px -2px gray;
color: rgba(0, 0, 0, 0) !important;
content: "";
display: block !important;
height: 200px !important;
position: absolute !important;
top: 70px !important;
width: 850px !important;
}
:hover + .hide {
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: cover;
display: block !important;
height: 199px;
margin-left: -220px;
position: fixed;
top: 96px;
width: 200px;
z-index: 4;
}
#copyright {
color: rgba(0, 0, 0, 0);
line-height: 25px !important;
margin-top: -25px !important;
padding: 0 !important;
}
#inlineContent {
background-image: url("http://cdn.myanimelist.net/images/userimages/1117293.jpg");
background-position: center center;
background-repeat: no-repeat;
border-radius: 5px;
color: white;
display: inline !important;
font-weight: lighter !important;
height: 179px !important;
margin-left: -220px;
opacity: 1 !important;
padding-bottom: 20px;
pointer-events: none;
position: fixed;
top: 96px;
width: 200px !important;
}
Can I ask something to you also ? how can I put a background picture if I want ? Do you have a code for this because i didn't see if you have ? I like the I dea to have my profile photo and my list together . Last one . can I make the hover stable ? I used to have something like that and i liked that . |
PrincessSerenityFeb 23, 2016 2:48 PM
Feb 23, 2016 3:59 PM
#248
PrincessSerenity said: Madara22 said: I made a little adjustments since I showed it a week or 2 ago in Show off topic. Noblesse ......................... Hello I loved your layout . I love Noblesse But I can't understand something . The code for this is only that small code in the spoiler link ? Also can I change the picture with something else if I want later ? I have a problem opening the Dropbox link if it is necessary for the code . Yes the code is indeed that small if you wish to change the background pic the only thing you need to do is open my dropbox link it'll redirect you to a longer code which you can copy and then change as you see fit. |
| |
Feb 23, 2016 5:05 PM
#249
Madara22 said: PrincessSerenity said: Madara22 said: I made a little adjustments since I showed it a week or 2 ago in Show off topic. Noblesse ......................... Hello I loved your layout . I love Noblesse But I can't understand something . The code for this is only that small code in the spoiler link ? Also can I change the picture with something else if I want later ? I have a problem opening the Dropbox link if it is necessary for the code . Yes the code is indeed that small if you wish to change the background pic the only thing you need to do is open my dropbox link it'll redirect you to a longer code which you can copy and then change as you see fit. The problem is as I said at my edit that I can't open your dropbox file for some reason :/ could you upload it again ? |
Feb 23, 2016 5:22 PM
#250
| sorry for the double reply but it worked ^_^ The link worked .. but I have a last question . how can I make the completed - stalled etc.. smaller because they are too big... Also the photos... which I guess was supposed to appear when I put the mouse over the anime does not apear.. I am guessing that something is wrong with the code .. Not that I have a problem with this ..If you could fix it it could be ok if not not a problem ;) |
More topics from this board
» [CSS - MODERN] โก๏ธ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
381 |
by KabukiChouNights
»»
Yesterday, 10:56 AM |
|
» 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 |