New
Dec 28, 2014 12:41 PM
#151
| Few themes I made when I was trying stuff out, feel free to use them. High School DxD: Preview Code My Teen Romantic Comedy SNAFU: Preview Code Sword Art Online : Preview Code Psycho-Pass: Preview code White Album 2: Preview Code If you need any help customizing them to your need just pm me, I still got the files to change the header image and such. |
SatiriquesJan 16, 2015 9:38 PM
 |
Jan 15, 2015 5:25 PM
#152
| T Lilsk8ter said: Black Rock Shooter - Square-styled layout With background and cursor. Preview: http://i.imgur.com/VvJiQNh.jpg Cursor: http://fc02.deviantart.net/fs70/i/2012/363/f/e/black_rock_shooter_cursor_by_anime_rai-d4wwk78.gif Code: /* Square Layout u531355 - 2012 */ /* 1) Generated covers */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/anime.css); /* 2) Base layout */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/style.css); /* 3) Top-bar icons */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/bars/japan/bar.css); /* 4) Layout theme */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/themes/dark/theme.css); /* 5) Addons - Add as many as you want */ body { background-image: url(http://i.imgur.com/reG1ijw.jpg); background-size: cover; background-attachment: fixed; /* Crusor */ cursor:url(http://fc02.deviantart.net/fs70/i/2012/363/f/e/black_rock_shooter_cursor_by_anime_rai-d4wwk78.gif) 1 2, auto; } a:hover { cursor: url(http://fc02.deviantart.net/fs70/i/2012/363/f/e/black_rock_shooter_cursor_by_anime_rai-d4wwk78.gif) 1 2, auto; } /* 6) Options */ /* Determines the number of covers on each row, it should be a multiple of 242px */ #mal_control_strip, #list_surround {max-width: 1452px;} /* Header picture */ #inlineContent {background-image: url(http://i.imgur.com/bQraOD5.jpg);} /* Default picture when no cover is found */ .hide {background-image: url(http://dl.dropbox.com/u/49469857/MAL/premade/square/nopic/mal.jpg);} /* Links color */ a {color: ;} /* More infos on http://myanimelist.net/forum/?topicid=459189 */ Thanks a lot!!....But... I'm having problems with the image at the top of the list...its because of my resolucion? (1920x1080)?? |
   |
Jan 16, 2015 10:33 AM
#153
CamiloJTM said: T Lilsk8ter said: Black Rock Shooter - Square-styled layout With background and cursor. Preview: http://i.imgur.com/VvJiQNh.jpg Cursor: http://fc02.deviantart.net/fs70/i/2012/363/f/e/black_rock_shooter_cursor_by_anime_rai-d4wwk78.gif Code: /* Square Layout u531355 - 2012 */ /* 1) Generated covers */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/anime.css); /* 2) Base layout */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/style.css); /* 3) Top-bar icons */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/bars/japan/bar.css); /* 4) Layout theme */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/themes/dark/theme.css); /* 5) Addons - Add as many as you want */ body { background-image: url(http://i.imgur.com/reG1ijw.jpg); background-size: cover; background-attachment: fixed; /* Crusor */ cursor:url(http://fc02.deviantart.net/fs70/i/2012/363/f/e/black_rock_shooter_cursor_by_anime_rai-d4wwk78.gif) 1 2, auto; } a:hover { cursor: url(http://fc02.deviantart.net/fs70/i/2012/363/f/e/black_rock_shooter_cursor_by_anime_rai-d4wwk78.gif) 1 2, auto; } /* 6) Options */ /* Determines the number of covers on each row, it should be a multiple of 242px */ #mal_control_strip, #list_surround {max-width: 1452px;} /* Header picture */ #inlineContent {background-image: url(http://i.imgur.com/bQraOD5.jpg);} /* Default picture when no cover is found */ .hide {background-image: url(http://dl.dropbox.com/u/49469857/MAL/premade/square/nopic/mal.jpg);} /* Links color */ a {color: ;} /* More infos on http://myanimelist.net/forum/?topicid=459189 */ Thanks a lot!!....But... I'm having problems with the image at the top of the list...its because of my resolucion? (1920x1080)?? You're missing a bracket. @import url(http://dl.dropbox.com/u/49469857/MAL/premade/anime.css); /* 2) Base layout */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/style.css); @import url(https://dl.dropboxusercontent.com/s/h4css3c9xzh0238/LongCovers.css); /* 3) Top-bar icons */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/bars/japan/bar.css); /* 4) Layout theme */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/themes/dark/theme.css); /* 5) Addons - Add as many as you want */ body { background-image: url(http://i.imgur.com/reG1ijw.jpg); background-size: cover; background-attachment: fixed; } /* <======== */ /* 6) Options */ /* Determines the number of covers on each row, it should be a multiple of 242px */ #, #list_surround {max-width: 1452px;} /* Default picture when no cover is found */ .hide {background-image: url(http://dl.dropbox.com/u/49469857/MAL/premade/square/nopic/mal.jpg);} /* Header picture */ #inlineContent {background-image: url(http://i.imgur.com/bQraOD5.jpg);} /* Links color */ a {color: ;} |
|
Jan 17, 2015 1:51 PM
#154
| Hi there, im looking for a manga list with covers, if its possible. Thanks! |
Jan 17, 2015 2:29 PM
#155
Khammul said: this is NOT a request topic! As for what you are asking for, there are tons of those avaliable already.Hi there, im looking for a manga list with covers, if its possible. Thanks! |
         |
Jan 17, 2015 2:51 PM
#156
Oiomi-chan said: Khammul said: this is NOT a request topic! As for what you are asking for, there are tons of those avaliable already.Hi there, im looking for a manga list with covers, if its possible. Thanks! i know It is not the right place, but the request topic is closed. I've been watching some lists, but most do not work properly, or dont show the covers. I'll try a few more, thanks. |
Jan 17, 2015 2:59 PM
#157
Khammul said: Oiomi-chan said: Khammul said: Hi there, im looking for a manga list with covers, if its possible. Thanks! i know It is not the right place, but the request topic is closed. I've been watching some lists, but most do not work properly, or dont show the covers. I'll try a few more, thanks. You can easily fix the covers, that's not really a problem. You could also take a list you like and use the tutorials to add the covers yourself. |
|
Jan 18, 2015 1:10 PM
#158
| so this is the list I am currently using. There wasn't a premade layout for kyoukai no kanata yet so I made this one. Oh and DOES display covers on hover here's what it looks like:  heres the code if you like it XD: [spoiler] @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); @import url(http://storage.live.com/items/4A07C1EEED420167%21151); @import "http://fonts.googleapis.com/css?family=Patrick+Hand+SC"; @import "https://dl.dropboxusercontent.com/u/102421246/MAL/CSS/EditButton.css"; * { text-decoration: none; } body { background-attachment: fixed; background-clip: border-box; background-color: transparent; background-image: url("http://fc00.deviantart.net/fs71/f/2014/166/d/5/mirai_kuriyama___kyoukai_no_kanata_by_yayaftw-d7mk7u6.png"); background-position: 23% 0; background-repeat: no-repeat no-repeat; background-size: cover; font-family: 'Margarine', cursive; } #list_surround { background-attachment: fixed; background-position: 24% 0; background-repeat: no-repeat no-repeat; font-size: 15px; height: 250px; left: 0; line-height: 2; margin: 0 auto; padding-bottom: 0; padding-top: 25px; position: absolute; right: 0; width: 850px; z-index: 0; } td[class^="td"]:nth-of-type(2) { width: 533px !important; } a { color: white; text-shadow: none; } tr:hover [class^="td"] { background-color: rgba(176, 97, 163, 0.8); transition: all 0.4s ease 0s; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color: white !important; font-weight: bold; text-shadow: 1px 2px 3px black; transition: all 0.4s ease 0s; } a:hover { color: white !important; text-shadow: 0 1px rgba(255, 255, 255, 0.15); } .td1:nth-of-type(5), .td2:nth-of-type(5) { color: white; } .td1:nth-of-type(1), .td2:nth-of-type(1) { color: white; } .table_header:nth-of-type(1) { color: white; } .table_header:nth-of-type(2) { text-align: left; } .table_header:nth-of-type(1), .table_header:nth-of-type(2), .table_header:nth-of-type(3), .table_header:nth-of-type(4), .table_header:nth-of-type(5), .table_header:nth-of-type(6) { } .table_header:nth-of-type(5) { border-bottom-right-radius: 0; border-top-left-radius: 0; color: white; } .table_header, .category_totals { background-color:rgba(90, 49, 127, 0.7) ; border: 0 none; opacity: 1; padding: 8px; text-align: center; vertical-align: top; } .td1, .td2 { background-color: rgba(90, 49, 127, 0.7); color: white !important; padding: 5px; } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } .table_header:nth-of-type(6) { } small { color: ; font-weight: bold; text-shadow: 1px 2px black; } .table_header, .td1, .td2, .category_totals { color: grey; } .borderRBL { line-height: normal !important; } [cellspacing="0"] { line-height: 17px; } .category_totals { background-color: rgba(90, 49, 127, 0.7); border-radius: 0 0 12px 12px; color: white; text-align: center; } .category_totals:hover { background-color: ; color: white; } [class^="header_"] * { background-repeat: no-repeat no-repeat; border-radius: 20px 20px 0 0; font-size: 30px; height: 50px; line-height: 24px; margin-bottom: 6px; margin-left: 5px; padding-bottom: 9px; text-align: center; vertical-align: bottom; } .header_title { border: medium none !important; color: white !important; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } #grand_totals { background-color: ; 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; } .status_not_selected:hover { color: white !important; opacity: 1; transition: all 0.4s ease 0s; } .status_not_selected, .status_selected { background-color:rgba(174, 174, 174, 0.4) ; border: 0 none !important; border-radius: 10px 10px 10px 10px; height: auto !important; padding: 4px; text-align: center !important; width: 16.667% !important; } .status_not_selected a, .status_selected a { background-color: rgba(64, 10, 50, 0.8); 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: #dda0dd; border-color: rgba(164, 16, 32, 0.5); } .status_not_selected a:hover { background-color: #dda0dd; border-color: rgba(164, 16, 32, 0.5); 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: ; border-color:rgba(164, 16, 32, 0.5) ; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.3); } .header_cw { background-color: rgba(90, 49, 127, 0.7); background-position: 97% 0; background-repeat: no-repeat no-repeat; border-radius: 20px 20px 0 0; z-index: 0 !important; } .header_completed { background-color: rgba(90, 49, 127, 0.7); background-position: 50% 0; background-repeat: no-repeat no-repeat; border-radius: 20px 20px 0 0; z-index: 0; } .header_onhold { background-color: rgba(90, 49, 127, 0.7); background-position: 100% 0; background-repeat: no-repeat no-repeat; border-radius: 20px 20px 0 0; } .header_dropped { background-color: rgba(90, 49, 127, 0.7); background-position: 50% 0; background-repeat: no-repeat no-repeat; border-radius: 20px 20px 0 0; } .header_ptw { background-color: rgba(90, 49, 127, 0.7); background-position: 50% 0; background-repeat: no-repeat no-repeat; border-radius: 20px 20px 0 0; } :hover + .hide { background-position: center 50% !important; background-repeat: no-repeat !important; background-size: cover; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 3px; display: block !important; height: 350px; left: 52px; padding-bottom: 0; position: fixed; top: 160px; width: 226px; } .hide:before { background: none repeat scroll 0 0 transparent; border-radius: 25px 25px 0 0; color: white; content: ""; padding-bottom: 5px; position: absolute; text-align: center; top: -25px; width: 225px; } .td1:nth-of-type(6) a, .td2:nth-of-type(6) a { color: white !important; } #copyright, #copyright:hover { background-color:rgba(90, 49, 127, 0.701961); color:white; font-size:12px; padding:3px; position:absolute; width:100%; border-top-left-radius:0; } #copyright:before { color: white; content: "Yume99"; font-size: 17px; padding-right: 10px; padding-top: 10px !important; } #copyright:after { color: #FFD700; content: " "; padding-left: 20px; } |
Jan 19, 2015 10:39 PM
#159
| This a Tokyo Ghoul design that I created from a premade layout for the anime list and I currently use it but everyone is free to use it. How it looks  The code for you to use it @import "https://dl.dropbox.com/s/e5t6j0tes8e2qt3/01cov.css"; @import url(http://storage.live.com/items/4A07C1EEED420167%21152); body { background-attachment: fixed; background-clip: border-box; background-color: black; background-image: url(https://fogatadelpixel.files.wordpress.com/2014/09/http___wall-anonforge-com_wp-content_uploads_anime_tokyoghoul_e_tokyo-ghoul-wallpaper-full-hd-azizkeybackspace-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/qSW52E0.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: 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; } |
 |
Jan 24, 2015 11:24 AM
#160
| This is an is a ansatsu kyoushitsu that i made and have NOT BEEN USED it displays the covers like my other design heres a preview:  the code XD: @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); @import url(http://storage.live.com/items/4A07C1EEED420167%21151); @import "http://fonts.googleapis.com/css?family=Patrick+Hand+SC"; @import "https://dl.dropboxusercontent.com/u/102421246/MAL/CSS/EditButton.css"; * { text-decoration: none; } body { background-attachment: fixed; background-clip: border-box; background-color: transparent; background-image: url("http://www.moetron.com/uploads/20140629_class01.jpg"); background-position: 22% 0; background-repeat: no-repeat no-repeat; background-size: cover; font-family: 'Margarine', cursive; } #list_surround { background-attachment: fixed; background-position: 24% 0; background-repeat: no-repeat no-repeat; font-size: 15px; height: 250px; left: 0; line-height: 2; margin: 0 auto; padding-bottom: 0; padding-top: 10px; position: absolute; right: 0; width: 850px; z-index: 0; } td[class^="td"]:nth-of-type(2) { width: 533px !important; } a { color: white; text-shadow: none; } tr:hover [class^="td"] { background-color: rgba(121, 187, 205, 0.4); transition: all 0.4s ease 0s; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color: white !important; font-weight: bold; text-shadow: 1px 2px 3px black; transition: all 0.4s ease 0s; } a:hover { color: white !important; text-shadow: 0 1px rgba(185, 193, 205, 0.6); } .td1:nth-of-type(5), .td2:nth-of-type(5) { color: white; } .td1:nth-of-type(1), .td2:nth-of-type(1) { color: white; } .table_header:nth-of-type(1) { color: white; } .table_header:nth-of-type(2) { text-align: left; } .table_header:nth-of-type(1), .table_header:nth-of-type(2), .table_header:nth-of-type(3), .table_header:nth-of-type(4), .table_header:nth-of-type(5), .table_header:nth-of-type(6) { } .table_header:nth-of-type(5) { border-bottom-right-radius: 0; border-top-left-radius: 0; color: white; } .table_header, .category_totals { background-color:rgba(170, 187, 205, 0.5) ; border: 0 none; opacity: 1; padding: 8px; text-align: center; vertical-align: top; } .td1, .td2 { background-color: rgba(170, 187, 205, 0.5); color: white !important; padding: 5px; } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } .table_header:nth-of-type(6) { } small { color: ; font-weight: bold; text-shadow: 1px 2px black; } .table_header, .td1, .td2, .category_totals { color: grey; } .borderRBL { line-height: normal !important; } [cellspacing="0"] { line-height: 17px; } .category_totals { background-color: rgba(170, 187, 205, 0.5); border-radius: 0 0 12px 12px; color: white; text-align: center; } .category_totals:hover { background-color: ; color: white; } [class^="header_"] * { background-repeat: no-repeat no-repeat; border-radius: 20px 20px 0 0; font-size: 30px; height: 50px; line-height: 24px; margin-bottom: 6px; margin-left: 5px; padding-bottom: 9px; text-align: center; vertical-align: bottom; } .header_title { border: medium none !important; color: white !important; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } #grand_totals { background-color: ; 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; } .status_not_selected:hover { color: white !important; opacity: 1; transition: all 0.4s ease 0s; } .status_not_selected, .status_selected { background-color:rgba(174, 174, 174, 0.4) ; border: 0 none !important; border-radius: 10px 10px 10px 10px; height: auto !important; padding: 4px; text-align: center !important; width: 16.667% !important; } .status_not_selected a, .status_selected a { background-color: rgba(123, 196, 255, 0.3); 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(151, 192, 255, 0.5); border-color: rgba(48, 44, 64, 0.5); } .status_not_selected a:hover { background-color: rgba(151, 192, 255, 0.5); border-color: rgba(48, 44, 64, 0.5); 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: ; border-color:rgba(164, 16, 32, 0.5) ; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.3); } .header_cw { background-color: rgba(170, 187, 205, 0.5); background-position: 97% 0; background-repeat: no-repeat no-repeat; border-radius: 20px 20px 0 0; z-index: 0 !important; } .header_completed { background-color: rgba(170, 187, 205, 0.5); background-position: 50% 0; background-repeat: no-repeat no-repeat; border-radius: 20px 20px 0 0; z-index: 0; } .header_onhold { background-color: rgba(170, 187, 205, 0.5); background-position: 100% 0; background-repeat: no-repeat no-repeat; border-radius: 20px 20px 0 0; } .header_dropped { background-color: rgba(170, 187, 205, 0.5); background-position: 50% 0; background-repeat: no-repeat no-repeat; border-radius: 20px 20px 0 0; } .header_ptw { background-color: rgba(170, 187, 205, 0.5); background-position: 50% 0; background-repeat: no-repeat no-repeat; border-radius: 20px 20px 0 0; } :hover + .hide { background-position: center 50% !important; background-repeat: no-repeat !important; background-size: cover; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 3px; display: block !important; height: 350px; left: 52px; padding-bottom: 0; position: fixed; top: 160px; width: 226px; } .hide:before { background: none repeat scroll 0 0 transparent; border-radius: 25px 25px 0 0; color: white; content: ""; padding-bottom: 5px; position: absolute; text-align: center; top: -25px; width: 225px; } .td1:nth-of-type(6) a, .td2:nth-of-type(6) a { color: white !important; } #copyright, #copyright:hover { background-color:rgba(170, 187, 205, 0.5); color:white; font-size:12px; padding:3px; position:absolute; width:100%; border-top-left-radius:0; } #copyright:before { color: white; content: "Yume99"; font-size: 12px; padding-right: 10px; padding-top: 10px !important; } #copyright:after { color: #FFD700; content: " "; padding-left: 20px; } /* 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; } } |
yume99Feb 11, 2015 3:16 PM
Jan 29, 2015 4:28 PM
#161
I have create several layouts for Darker than Black character Yin. Here is one I recently made but will no longer use so I figured I would share it since there aren't many for this series.  The code is listed below... enjoy @import url(https://googledrive.com/host/0BxjwQr0BBXs-aWFrYzJjVnpoVVE); /*thin top bar*/ @import "https://dl.dropbox.com/u/57348187/MAL/IconStyleCSSFixedwithCategoryTrans.css"; /*Fonts*/ @import url("http://fonts.googleapis.com/css?family=Nova+Slim"); @import url(http://fonts.googleapis.com/css?family=Segoe+Print); /* 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://i62.tinypic.com/2s7ctjr.jpg); background-attachment: fixed; background-size: cover; } /* 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). */ .header_title { background-color: rgba(0, 0, 0, 0); color: #FFFFFF; font-family: 'Segoe Print', sans-serif; font-size:30px; border-radius: 20px 20px 0px 0px; font-weight: 700; text-align: left; text-shadow: 2px 2px 2px #06F; } /* SUB-HEADERS BACKGROUND COLOR COLOR Below each main header is the sub-header which says Score, Episodes, Tags, etc. */ .table_header { background-color: rgba(15, 15, 25, 0.575); } /* 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:white; font-family: 'Segoe Print', sans-serif; font-size:14px; text-shadow: 2px 2px 2px #FFF; } .animetitle + small { color:#660099; font-family: "Segoe Print"; font-size:12px; text-shadow: 1px 1px 1px #FFF; } /* 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:#FFFFFF; padding-left:4px; text-align: left; font-size:13px; font-family: 'Segoe Print', sans-serif; text-shadow: 2px 2px 2px #06F; } /* LIST WIDTH Use this to increase the width of your list! */ #list_surround { width:950px } /* LIST POSITION Change "left" to "right" to switch the list side, or vice versa. */ #list_surround { left: 500px; position: relative; } /*OTHER CODES Important codes for the layout's setup. Please don't mess with these unless you know 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: #000000; } a { text-decoration:none; } a:visited { text-decoration:none; } a:hover { color: #FFFFFF !important; text-shadow: -1px -1px 3px #00CCFF, 1px 1px 3px #0066FF; text-decoration:underline; } .category_totals, .td1, .td2, #grand_totals, #copyright { background-color: rgba(0, 0, 0, 0); border-width:0; transition: all .8s ease 0s;/* CSS3 reference */ -o-transition: all .8s ease 0s; /* for Opera compatibility */ -ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */ -moz-transition: all .8s ease 0s; /* for Firefox compatibility */ -webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */ } .category_totals a, .td1 a, .td2 a, #grand_totals a, #copyright a { transition: all .8s ease 0s;/* CSS3 reference */ -o-transition: all .8s ease 0s; /* for Opera compatibility */ -ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */ -moz-transition: all .8s ease 0s; /* for Firefox compatibility */ -webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */ } .category_totals:HOVER, .td1:HOVER, .td2:HOVER, #grand_totals:HOVER, #copyright:HOVER {background-color:rgba(0,0,0, 0); border-width:0; } #copyright:after { content: " Custom CSS by Shishio-kun. Theme and edited by goshujin_sama241."; } #copyright { margin-bottom: 30px !important; border-radius: 20px; padding: 10px; } .thickbox { color:#0066FF; font-family:fantasy; font-size:12px; } .header_title { padding:2px; } .table_header { border-width:0; font-weight:bold; padding:2px; } .category_totals { border-radius: 0px 0px 20px 20px; height: 40px; text-align: center; } #grand_totals { text-align: center; margin:0 auto; border-radius: 20px; padding: 10px 20px; width: 600px; } /* 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 */ .hide { background-size: cover; left: 200px; 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(200, 5, 200, 0.75); background-position: center 50% !important; background-repeat: no-repeat !Important; display: block !important; position: fixed; 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 { color: white; background: transparent; content: #list_surround:nth-of-type(n+4):hover td:nth-of-type(2) .animetitle; padding-bottom: 5px; position: absolute; text-align: center; width: 225px; top: -25px; border-radius: 25px 25px 0 0; } /* OTHER SETTINGS */ :hover + .hide { visibility: visible; opacity: 1; } /* 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; } |
Feb 9, 2015 3:10 PM
#162
Here's a simple style I made. and the code @import url(https://f3a7a1b1655de4833e3bed3b1779c5a9d85839f8.googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); /*Background*/ body { background-image: url(http://i.imgur.com/vXb6M2g.png); background-attachment: fixed; background-repeat: no-repeat; background-position: right bottom; background-size: 40% auto; } /*Header (finished, watching etc)*/ .header_title { color: #323232; background-color: #b0cad6; font-family: Palatino,Palatino Linotype,Palatino LT STD,Book Antiqua,Georgia,serif; font-size:30px; font-weight: 700; border-radius: 20px 20px 0px 0px; border-style: solid !important; border-width: 4px; border-color: #b0cad6; text-align: center; text-shadow: 0px 0px 0px #000000; } /*List width*/ #list_surround { width:870px } /*List position*/ #list_surround{ left: 210px; position: relative; } .table_header { background: #b0cad6; padding: 9.9px } /*List rows*/ .td1 { color:#f9f9f9; font-size: 12px; background-color:#f9f9f9; padding:10px; } .td2 { color:#e7e7e7; font-size: 12px; background-color:#e7e7e7; padding:10px; } /*Font*/ .td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright { color: #323232; font-size:13px; font-family: 'Carrois Gothic SC', sans-serif; text-shadow: 0px 0px 0px #000000; text-decoration: none; } /*Column sizing*/ td:nth-of-type(1){ width: 10px; } td:nth-of-type(3){ width: 30px; } td:nth-of-type(4){ width: 45px; } td:nth-of-type(5){ width: 80px; } /*Copyright bar*/ #copyright { margin-bottom: 30px !important; border-radius: 20px; padding: 10px; color: #b0cad6: } #grand_totals { -moz-transition: all 0.25s ease-in-out 0s; background-color: #0e78b1; color: #ffffff; text-align: center; font-size: 14px; margin:0 auto; line-height: 20px; min-height: 20px; border-radius: 0px 0px 0px 0px; padding: 10px 20px; width: 830px; } /*Bottom list totals*/ .category_totals { background: #b0cad6; border-radius: 0px 0px 20px 20px; border-style: solid !important; border-width: 4px; border-color: #b0cad6; height: 40px; text-align: center; } /*Panel*/ .hide { background-size: cover; left: -205px; vertical-align: 50%; height: 309px; width: 200px; padding-bottom: 0px; border-radius: 20px 20px 20px 20px; background-color: rgba(10, 10, 10, 0.75); background-position: center 50% !important; background-repeat: no-repeat !Important; display: block !important; position: absolute; visibility: hidden; opacity: 0; } /*not my code below*/ /*Center panel to line*/ .hide { -ms-transform: translateY(-78px); /* IE 9 */ -webkit-transform: translateY(-78px); /* Chrome, Safari, Opera */ transform: translateY(-78px); } /* Show panel when name hovered over */ :hover + .hide { visibility: visible; opacity: 1; } /* Silver highlight and font resize on Hover */ tr:hover [class^="td"] { background-color: #f6dcdb !important; } /*Grey buttons at the top*/ #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered { box-sizing: border-box; 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: right; top: 4px; z-index: 10; width: 210px !important; } #mal_cs_listinfo:hover, #mal_cs_links:hover, #mal_cs_otherlinks:hover, #mal_cs_powered:hover { height: 500px !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 { background-color: transparent; font-size: 0 !important; line-height: 0; margin: 0 !important; opacity: 0; padding: 4px 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) { padding: 4px 0 0 !important; } #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a { background-color: #555555 !important; display: block; font: 18px/17px 'Arial', sans-serif !important; font-weight: bold; margin: 4px 0 0; padding: 8px 8px 8px !important; text-decoration: none !important; } #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: #444444 !important; } #mal_cs_listinfo strong a strong { font-weight: normal; } #mal_cs_otherlinks strong { color: #555555; display: block; font: bold 13px/17px 'Arial',sans-serif !important; padding: 0 4px 4px; } #mal_cs_otherlinks strong a { background: none transparent !important; color: #555555; display: inline; font: bold 13px/17px 'Arial',sans-serif !important; margin: 0; padding: 0; } #mal_cs_powered a { background-color: #668387 !important; display: block !important; margin: 0 !important; opacity: 0; padding: 4px 0 0 !important; } #mal_cs_powered:hover a { opacity: 1; } #mal_cs_powered #search { padding: 8px 2px 0px 0px !important; position: relative; } #searchBox { box-sizing: border-box; border-color: #555555; border-style: solid; border-width: 1px; color: #555555; padding: 0 8px 0 !important; display: inline-block; font-family: Tahoma, Geneva, sans-serif; font-size: 14px !important; height: 32px; vertical-align: top; width: 210px !important; } #searchBox:hover, #searchBox:focus { border-color: #444444; } #searchListButton { display: none !important; } #mal_cs_listinfo { background-image: url("http://i.imgur.com/LSwncOV.jpg"); right: 106px !important; } #mal_cs_links { background-image: url("http://i.imgur.com/vl379rT.jpg"); right: 72px !important; z-index: 9; } #mal_cs_otherlinks { background-image: url("http://i.imgur.com/Rz4IQCY.jpg"); right: 38px !important; z-index: 8; } #mal_cs_powered { background-image: url("http://i.imgur.com/SzwsIrV.jpg"); right: 4px !important; z-index: 7; position: fixed !important; } #mal_control_strip { background: transparent !important; } #mal_cs_pic img { display: none !important; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 0 none !important; } /*not my code above*/ /*Category bar (the blue one at the top)*/ .status_not_selected a, .status_selected a{ color: white !important; font-size: 14px !important; transition: all 0.4s ease-in-out 0.03s; } .status_not_selected:hover { color: white !important; opacity: 1; transition: all 0.4s ease 0s; } .status_not_selected, .status_selected { background-color: #0e78b1; border: 0 none !important; border-radius: 0px 0px 0px 0px; height: auto !important; padding: 4px; text-align: center !important; width: 16.667% !important; } .status_not_selected a, .status_selected a { background-color: #0e78b1; border-color: #0e78b1; border-radius: 0px 0px 0px 0px; display: block !important; font-weight: bold; padding: 8px; text-shadow: 0 1px rgba(0, 0, 0, 0.1); } .status_selected a { background-color: #1064a0; } .status_not_selected a:hover { background-color: #1064a0; border-color: #0e78b1; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.3); |
aCanadianFeb 9, 2015 3:29 PM
Feb 9, 2015 3:16 PM
#163
aCanadian said: NICE NICE NICE :3 but please use spoilers for large imagesHere's a simple style I made. and the code @import url(https://f3a7a1b1655de4833e3bed3b1779c5a9d85839f8.googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); /*Background*/ body { background-image: url(http://i.imgur.com/vXb6M2g.png); background-attachment: fixed; background-repeat: no-repeat; background-position: right bottom; background-size: 40% auto; } /*Header (finished, watching etc)*/ .header_title { color: #323232; background-color: #b0cad6; font-family: Palatino,Palatino Linotype,Palatino LT STD,Book Antiqua,Georgia,serif; font-size:30px; font-weight: 700; border-radius: 20px 20px 0px 0px; border-style: solid !important; border-width: 4px; border-color: #b0cad6; text-align: center; text-shadow: 0px 0px 0px #000000; } /*List width*/ #list_surround { width:870px } /*List position*/ #list_surround{ left: 210px; position: relative; } .table_header { background: #b0cad6; padding: 9.9px } /*List rows*/ .td1 { color:#f9f9f9; font-size: 12px; background-color:#f9f9f9; padding:10px; } .td2 { color:#e7e7e7; font-size: 12px; background-color:#e7e7e7; padding:10px; } /*Font*/ .td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright { color: #323232; font-size:13px; font-family: 'Carrois Gothic SC', sans-serif; text-shadow: 0px 0px 0px #000000; text-decoration: none; } /*Column sizing*/ td:nth-of-type(1){ width: 10px; } td:nth-of-type(3){ width: 30px; } td:nth-of-type(4){ width: 45px; } td:nth-of-type(5){ width: 80px; } /*Copyright bar*/ #copyright { margin-bottom: 30px !important; border-radius: 20px; padding: 10px; color: #b0cad6: } #grand_totals { -moz-transition: all 0.25s ease-in-out 0s; background-color: #0e78b1; color: #ffffff; text-align: center; font-size: 14px; margin:0 auto; line-height: 20px; min-height: 20px; border-radius: 0px 0px 0px 0px; padding: 10px 20px; width: 830px; } /*Bottom list totals*/ .category_totals { background: #b0cad6; border-radius: 0px 0px 20px 20px; border-style: solid !important; border-width: 4px; border-color: #b0cad6; height: 40px; text-align: center; } /*Panel*/ .hide { background-size: cover; left: -205px; vertical-align: 50%; height: 309px; width: 200px; padding-bottom: 0px; border-radius: 20px 20px 20px 20px; background-color: rgba(10, 10, 10, 0.75); background-position: center 50% !important; background-repeat: no-repeat !Important; display: block !important; position: absolute; visibility: hidden; opacity: 0; } /*not my code below*/ /*Center panel to line*/ .hide { -ms-transform: translateY(-78px); /* IE 9 */ -webkit-transform: translateY(-78px); /* Chrome, Safari, Opera */ transform: translateY(-78px); } /* Show panel when name hovered over */ :hover + .hide { visibility: visible; opacity: 1; } /* Silver highlight and font resize on Hover */ tr:hover [class^="td"] { background-color: #f6dcdb !important; } /*Grey buttons at the top*/ #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered { box-sizing: border-box; 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: right; top: 4px; z-index: 10; width: 210px !important; } #mal_cs_listinfo:hover, #mal_cs_links:hover, #mal_cs_otherlinks:hover, #mal_cs_powered:hover { height: 500px !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 { background-color: transparent; font-size: 0 !important; line-height: 0; margin: 0 !important; opacity: 0; padding: 4px 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) { padding: 4px 0 0 !important; } #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a { background-color: #555555 !important; display: block; font: 18px/17px 'Arial', sans-serif !important; font-weight: bold; margin: 4px 0 0; padding: 8px 8px 8px !important; text-decoration: none !important; } #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: #444444 !important; } #mal_cs_listinfo strong a strong { font-weight: normal; } #mal_cs_otherlinks strong { color: #555555; display: block; font: bold 13px/17px 'Arial',sans-serif !important; padding: 0 4px 4px; } #mal_cs_otherlinks strong a { background: none transparent !important; color: #555555; display: inline; font: bold 13px/17px 'Arial',sans-serif !important; margin: 0; padding: 0; } #mal_cs_powered a { background-color: #668387 !important; display: block !important; margin: 0 !important; opacity: 0; padding: 4px 0 0 !important; } #mal_cs_powered:hover a { opacity: 1; } #mal_cs_powered #search { padding: 8px 2px 0px 0px !important; position: relative; } #searchBox { box-sizing: border-box; border-color: #555555; border-style: solid; border-width: 1px; color: #555555; padding: 0 8px 0 !important; display: inline-block; font-family: Tahoma, Geneva, sans-serif; font-size: 14px !important; height: 32px; vertical-align: top; width: 210px !important; } #searchBox:hover, #searchBox:focus { border-color: #444444; } #searchListButton { display: none !important; } #mal_cs_listinfo { background-image: url("http://i.imgur.com/LSwncOV.jpg"); right: 106px !important; } #mal_cs_links { background-image: url("http://i.imgur.com/vl379rT.jpg"); right: 72px !important; z-index: 9; } #mal_cs_otherlinks { background-image: url("http://i.imgur.com/Rz4IQCY.jpg"); right: 38px !important; z-index: 8; } #mal_cs_powered { background-image: url("http://i.imgur.com/SzwsIrV.jpg"); right: 4px !important; z-index: 7; position: fixed !important; } #mal_control_strip { background: transparent !important; } #mal_cs_pic img { display: none !important; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 0 none !important; } /*not my code above*/ /*Category bar (the blue one at the top)*/ .status_not_selected a, .status_selected a{ color: white !important; font-size: 14px !important; transition: all 0.4s ease-in-out 0.03s; } .status_not_selected:hover { color: white !important; opacity: 1; transition: all 0.4s ease 0s; } .status_not_selected, .status_selected { background-color: #0e78b1; border: 0 none !important; border-radius: 0px 0px 0px 0px; height: auto !important; padding: 4px; text-align: center !important; width: 16.667% !important; } .status_not_selected a, .status_selected a { background-color: #0e78b1; border-color: #0e78b1; border-radius: 0px 0px 0px 0px; display: block !important; font-weight: bold; padding: 8px; text-shadow: 0 1px rgba(0, 0, 0, 0.1); } .status_selected a { background-color: #1064a0; } .status_not_selected a:hover { background-color: #1064a0; border-color: #0e78b1; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.3); |
|
Feb 11, 2015 6:35 PM
#165
| looking for a shigatsu wa kimi no uso layout!! if anybody could help or donate one thanks (: |
Feb 12, 2015 12:05 AM
#166
samsaurus said: well, the name sounds familiar do I think there is one, but please keep requests in the request topic.looking for a shigatsu wa kimi no uso layout!! if anybody could help or donate one thanks (: |
|
Feb 14, 2015 2:22 PM
#167
samsaurus said: looking for a shigatsu wa kimi no uso layout!! if anybody could help or donate one thanks (: I've made a layout based on Shigatsu requested by a user (แ แดแ ) http://myanimelist.net/forum/?topicid=1099375&show=80#msg37871899 |
Feb 25, 2015 3:52 PM
#168
 /* BODY CODING */ @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); */ /* HOVERING OVER LIST ELEMENTS COLOR CHANGE -> #5c8ae6 to #ff0000 (blue to red) */ body { font-family: Arial,Verdana,Helvetica,sans-serif; font-size: 13px; } * { text-decoration: none ! important; } a { color: #ffffff; } a:hover { border-bottom: 2px solid #ff0000; color: #ffffff; text-decoration: none; } .status_selected { background-color: #ff0000; border-color: #000000; border-width: 0px 1px 1px 0px; color: #000000; line-height: 2.5em; text-decoration: none ! important; } .status_not_selected a:hover { border-bottom: 0px none ! important; } .status_selected a:hover { border-bottom: 0px none ! important; } .status_not_selected:hover { box-shadow: 0px -5px 0px 0px #ff0000 inset; transition: all 0.2s ease 0s; } .status_not_selected { background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.7); border-bottom: 0px none ! important; border-left-color: #000000; border-right-color: #000000; border-top-color: #000000; color: #000000; line-height: 2.5em; } .status_selected:hover { } .status_selected a, .status_not_selected a { display: block; } #list_surround { background: none no-repeat scroll 0px 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 1); height: 100%; margin: 240px auto 20px; width: 850px; } /* MAIN HEADER */ :nth-child(5) .header_title { border-color: #f5f5f5; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; border-width: 2px; box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 1); height: 200px; margin-left: -28px; position: absolute; top: 60px; width: 850px; } /* Transparent banner under content */ :nth-child(5) .header_title:before { background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.2); color: #f5f5f5; display: block; font-size: 65px ! important; position: relative; text-align: center; text-shadow: 1px 2px 6px #000000; top: 61px; } /* LIST HEADERS */ } #list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped { margin-top: 12px; margin-left: 0px; padding: 28px; } #list_surround .header_title span { color: #000000; display: none; font-size: 1px; } #list_surround .header_title .thickbox { display: none; } #list_surround br { display: none; } .borderRBL { color: #cccccc ! important; } .borderRBL br { display: block ! important; } .table_header { background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.8); border-color: #ababab; border-style: solid; border-width: 1px 1px 1px 0px; color: #ffffff; line-height: 1.8em; padding: 4px; } .td1 { background: none repeat scroll 0% 0% rgba(150, 0, 0, 0.3); line-height: 20px; padding: 4px; } .td2 { background: none repeat scroll 0% 0% rgba(45, 0, 0, 0.3); line-height: 20px; padding: 4px; } #list_surround .animetitle + small { background: none repeat scroll 0% 0% #ff0000; font-size: 13px; margin-left: 10px; opacity: 1; padding: 2px; text-transform: lowercase; } .td1, .td2, .table_header { border-color: #ffffff; border-width: 0px 0px 1px ! important; color: #ffffff; } tr:hover td.td1 small, tr:hover td.td2 small { font-size: 13px; opacity: 1; } .td1 small, .td2 small { font-size: 13px; opacity: 0; } /* HOVERING OVER LIST ELEMENTS COLOR CHANGE -> #5c8ae6 to #ff0000 (blue to red) */ tr:hover .td2, tr:hover .td1 { background: none repeat scroll 0% 0% rgba(5, 5, 5, 0.7); } #list_surround .category_totals { background-color: rgba(0, 0, 0, 0.8); color: #ffffff; line-height: 25px; margin-top: 15px; text-align: center; } #list_surround #grand_totals { background-color: #ff0000; color: #ffffff; display: none; line-height: 25px; text-align: center; } #search { bottom: 50px ! important; left: 100px ! important; } #searchBox { background: none repeat scroll 0px 0px #ffffff !important; border-radius: 5px; border-style: hidden; box-shadow: 0px 0px 3px #e2e2e2; color: #aaaaaa; display: block ! important; font-family: Consolas,Arial,sans-serif ! important; font-size: 10px; height: 20px ! important; letter-spacing: 0.1em; padding-left: 10px; padding-right: 10px; right: 6px ! important; text-align: center ! important; text-transform: uppercase ! important; top: 8px ! important; width: 220px ! important; } #searchListButton { display: none; } #mal_control_strip { background-color: #8f8f8f ! important; background-image: url("http://i.imgur.com/fv1Pc.png") ! important; } #mal_cs_powered a { display: none; } #copyright { background: none repeat scroll 0% 0% #ff0000; color: #ffffff; line-height: 2.5em; margin-top: 0px ! important; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; } } #copyright:hover:after { background-image: none; color: #e5e5e5 ! important; font-size: 13px ! important; height: auto ! important; padding: 5px; text-align: justify ! important; transition: all 0.15s ease-in 0s; width: 250px; } /* added body */ body { background-attachment: fixed ! important; background-image: url("http://i.imgur.com/M2hdJrY.png") !important; background-size: cover; } :nth-child(5) .header_title { background: url("http://kreskowka.pl/img/users/525/54394e0d4b614.png") no-repeat scroll center center / 80% 100% rgba(255, 255, 255, 0); } :nth-child(5) .header_title:before { content: "Hello"; font-family: give you glory; } /* HOVER COVER STYLE 2 MODE */ .hide { background-color: rgba(248, 162, 200, 0.7); background-position: 50% 50%; background-repeat: no-repeat no-repeat; background-size: cover; border-radius: 5px; border: 1px solid #FFFFFF; display: inline-block ! important; height: 20px; margin-left: 39px; margin-top: -25px; position: absolute; width: 35px; } .hide:hover { background-color: transparent; background-size: cover; border-radius: 25px; border-style: none; border-width: 1px; box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.41); margin-left: -220px; margin-top: -320px; padding-right: 170px; padding-top: 300px ! important; position: absolute; z-index: 1; } .hide:hover:after { background: rgba( 0, 0, 0, 0); content: " "; height: 22px; left: 259px; position: absolute; top: 295px; width: 37px; z-index: 20; } .animetitle { margin-left: 50px; } .table_header:nth-of-type(2) a { margin-left: 50px; } |
Mar 1, 2015 9:22 AM
#169
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: You always release amazing work, like the Spacey Square layout. This one is exceptional too, great work! I've featured it on the front page (will be adding more layouts there as the week goes on). |
Mar 2, 2015 6:06 PM
#170
Satiriques said: CamiloJTM said: T Lilsk8ter said: Black Rock Shooter - Square-styled layout With background and cursor. Preview: http://i.imgur.com/VvJiQNh.jpg Cursor: http://fc02.deviantart.net/fs70/i/2012/363/f/e/black_rock_shooter_cursor_by_anime_rai-d4wwk78.gif Code: /* Square Layout u531355 - 2012 */ /* 1) Generated covers */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/anime.css); /* 2) Base layout */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/style.css); /* 3) Top-bar icons */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/bars/japan/bar.css); /* 4) Layout theme */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/themes/dark/theme.css); /* 5) Addons - Add as many as you want */ body { background-image: url(http://i.imgur.com/reG1ijw.jpg); background-size: cover; background-attachment: fixed; /* Crusor */ cursor:url(http://fc02.deviantart.net/fs70/i/2012/363/f/e/black_rock_shooter_cursor_by_anime_rai-d4wwk78.gif) 1 2, auto; } a:hover { cursor: url(http://fc02.deviantart.net/fs70/i/2012/363/f/e/black_rock_shooter_cursor_by_anime_rai-d4wwk78.gif) 1 2, auto; } /* 6) Options */ /* Determines the number of covers on each row, it should be a multiple of 242px */ #mal_control_strip, #list_surround {max-width: 1452px;} /* Header picture */ #inlineContent {background-image: url(http://i.imgur.com/bQraOD5.jpg);} /* Default picture when no cover is found */ .hide {background-image: url(http://dl.dropbox.com/u/49469857/MAL/premade/square/nopic/mal.jpg);} /* Links color */ a {color: ;} /* More infos on http://myanimelist.net/forum/?topicid=459189 */ Thanks a lot!!....But... I'm having problems with the image at the top of the list...its because of my resolucion? (1920x1080)?? You're missing a bracket. @import url(http://dl.dropbox.com/u/49469857/MAL/premade/anime.css); /* 2) Base layout */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/style.css); @import url(https://dl.dropboxusercontent.com/s/h4css3c9xzh0238/LongCovers.css); /* 3) Top-bar icons */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/bars/japan/bar.css); /* 4) Layout theme */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/themes/dark/theme.css); /* 5) Addons - Add as many as you want */ body { background-image: url(http://i.imgur.com/reG1ijw.jpg); background-size: cover; background-attachment: fixed; } /* <======== */ /* 6) Options */ /* Determines the number of covers on each row, it should be a multiple of 242px */ #, #list_surround {max-width: 1452px;} /* Default picture when no cover is found */ .hide {background-image: url(http://dl.dropbox.com/u/49469857/MAL/premade/square/nopic/mal.jpg);} /* Header picture */ #inlineContent {background-image: url(http://i.imgur.com/bQraOD5.jpg);} /* Links color */ a {color: ;} Thanks for your help!! |
| |
Mar 4, 2015 6:47 AM
#171
GENBrian said: I made a Nanatsu No Taizai layout for anyone to use. Credits to TheHolyPotato for the codes https://www.dropbox.com/s/0yf3y4bqvzdz9sy/The%20seven%20deadly%20sins.css?dl=0 Click on the link for the code Looks like many of the image links are broken or moved? |
Mar 6, 2015 4:01 PM
#172
| Donating my blue/white layout. Preview (clickable):  Recommended settings : Numbers Score Type Episodes The code : https://noblueskydropfiles.github.io/blue_whiteV3.css Edit Dec 17, 2016 : new imports+fellow writer Update Jan 27, 2017 : switched from fellow writer to malcat |
NoblueskyJan 27, 2017 12:33 PM
Mar 13, 2015 7:59 PM
#173
| Donated my Tokyo Ghoul layout in the creative corner section a while ago and figured that I could post it here as well. Preview: http://i.imgur.com/kfWkDAk.jpg The code: http://pastebin.com/pG2VYBrs |
Mar 18, 2015 6:16 PM
#174
| Kuroshitsuji Layout Preview: http://i.imgur.com/GNW3kyT.jpg Code: http://pastebin.com/04Fg4zgx |
Mar 19, 2015 4:53 PM
#175
| What happens when you design a manga list for an anime character you like? This ^^ In all seriousness, I have created a manga list design for Code Geass. Mostly has Lelouch in it. Preview:  Code: @import url(http://storage.live.com/items/4A07C1EEED420167%21151); @import "https://dl.dropboxusercontent.com/s/aunymjyr9cqdxjl/manga.css"; /* HOW TO USE (go to this link) http://dl.dropboxusercontent.com/u/78340470/howtouse.txt */ /* MAIN BACKGROUND The space background by default. */ body { background-attachment:fixed; background-clip:border-box; background-color: black; background-image: url(http://bigbackground.com/wp-content/uploads/2013/07/sunset-backgrounds.jpg); background-position:0 50%, 0 0; background-repeat:no-repeat no-repeat; background-size:cover; font-family:calibri; } /* SECONDARY BACKGROUND (CHARACTER) Goes behind the list but in front of the main background. Image links to a character render in the parenthesis after background. Add or remove the word "contain" (without quotations) after background-size if you want them to be fit or not fit into the entire page. */ #inlineContent { background: url("http://www.renders-graphics.com/image/upload/normal/Code_Geass_Lelouch.png") no-repeat scroll right bottom transparent; background-size: contain !important; } /* SIDE BUTTONS The first code controls the type of positioning of the buttons- if you change absolute to fixed, it will fix the buttons to the page. You'll have to change left: -300px; to left: 0px; after if you want them fixed. All the following codes control the background image for the buttons in this order: Current, Complete, On-hold, Dropped, Planned, and All Anime. If you don't want the All Anime button on your list, remove the X from display: Xnone; if you want the All Anime button back, add the X back or delete display:none; */ .status_selected, .status_not_selected { position:absolute; left:-300px; } .status_selected:first-of-type, .status_not_selected:first-of-type { background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/LelouchReading_zpswfrbmfez.png); background-position:0 0; top:20px; } .status_selected:nth-of-type(2), .status_not_selected:nth-of-type(2) { background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/LelouchCompleted_zpsl2nu7dkf.png); background-position:100% 0; top:140px; } .status_selected:nth-of-type(3), .status_not_selected:nth-of-type(3) { background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/LelouchOnHold_zps3dhhevgx.png); background-position:0 0; top:260px; } .status_selected:nth-of-type(4), .status_not_selected:nth-of-type(4) { background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/LelouchDropped_zps801cnnjl.png); background-position:100% 0; top:380px; } .status_selected:nth-of-type(5), .status_not_selected:nth-of-type(5) { background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/LelouchNunnallyPlantoRead_zpstrj8v1hk.png); background-position:0 0; top:500px; } .status_selected:last-of-type, .status_not_selected:last-of-type { background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/LelouchCCAllManga_zps3eangsrm.png); background-position:100% 0; top:620px; display: Xnone; } /* CUSTOM HEADERS */ [class^="header_"] * { height:200px; } .header_cw { background-image: url("http://i.imgur.com/r8TRp5n.png"); background-position: 50% 150px; } .header_completed { background-image: url("http://i.imgur.com/wF8MQkE.png"); background-position: 50% 150px; } .header_onhold { background-image: url("http://i.imgur.com/ZWprtND.png"); background-position: 50% 150px; } .header_dropped { background-image: url("http://i.imgur.com/3ve4Yod.png"); background-position: 50% 150px; } .header_ptw { background-image: url("http://i.imgur.com/uH0pl1M.png"); background-position: 50% 150px; } /* COVER PIC POSITION (hover) This is how far to the left the cover pic will zoom out when you point to the thumbnail for it. If you want it more to the right, take away from the amount below. */ .hide:hover { margin-left: -182px; } /* LIST TOP COLORS The colors for the top text (#, anime title, score, etc) and the panel itself. Google "RGBA color generator" for easy to copy color and opacity numbers customized for you to put after "background-color:". */ .table_header, .table_header a{ color: white;} .table_header { background-color: rgba(255, 0, 125, 0.5); } /* LIST BACKGROUND COLOR, ROW HEIGHT AND HOVER COLOR 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. */ .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(208, 32, 144, 0.6); } /* LIST BOTTOM COLORS The first set controls color for the category totals, and second for the copyright section. */ .category_totals { background-color:rgba(255, 0, 255, 0.4); } #copyright { background-color:rgba(180, 32, 48, 0.6); } /* LIST FONT COLOR AND TYPE You can control the font type and colors for the list here; for the anime titles and tags see after */ .td1, .td2, .category_totals { color:white; font-family: ; } /* ANIME TITLE/AIRING You can control the font-colors for anime titles here, and the Airing text on currently airing anime. */ .animetitle { color: white; font-family: ; } .animetitle + small { color:#CC33FF !important; } /* TAGS (mini-reviews) The first code controls the size/color of the font if you put in any tags/mini-reviews. The second can control how much the width of the list the tags take up- you must put a percentage in after "width:" and before !important (for example 85% ). */ span[id*="tagLinks"] a { font-size: 11px !important; color: #FFFFFF !important; font-family: ;} span[id*="tagLinks"] { width: !important;} /* TAGS EDIT BUTTON The button link "Edit" will show up under your anime title number. */ .td1:nth-of-type(6) a, .td2:nth-of-type(6) a { color: #00FFFF; font-size: 14px; left: 9px; margin-top: 19px; text-decoration: none; z-index: 1 !important; } /* OTHER CODES Ask in the original topic for this layout of in my club if you need to learn more about customizing this layout. */ .td1:nth-of-type(6) a, .td2:nth-of-type(6) a { background-color: rgba(0, 0, 0, 0) !important; position: absolute; } .table_header:nth-of-type(6) { width: 1px !important; font-size: 0 !important; } .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 0 !important; width: 1px !important; } span[id*="tagLinks"] { background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important; color: rgba(0, 0, 0, 0); font-size: 13px !important; left: 25px !important; margin-top: 10px !important; position: absolute !important; } span[id*="tagLinks"] a { background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important; left: 49px !important; position: relative !important; text-decoration: none !important; top: 6px; } .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, .status_not_selected { -webkit-background-clip:padding-box !important; background-clip:padding-box !important; background-color:transparent; 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; padding:0; width:263px; } .status_not_selected { opacity:0.7; } .status_not_selected:hover { color:transparent; opacity:1; } body { background-attachment:fixed; background-clip:border-box; background-color: black; font-family:calibri; } #list_surround { background-attachment: scroll; background-color: rgba(0, 0, 0, 0); background-repeat: no-repeat no-repeat; font-size: 100%; line-height: 1; padding-bottom: 10px; } #list_surround { left: 16% !important; margin:auto !important; position:absolute !important; right:0 !important; width: 70%; } #inlineContent { display: inline-block !important; height: 100%; left: 0 !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 100%; z-index: -1 !important; } .header_cw, .header_completed, .header_onhold, .header_dropped, .header_ptw { background-repeat: no-repeat; background-color: transparent; height: 50px; margin-bottom: 0; font-size: 0; margin-top: -125px; } 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:0; border-bottom-right-radius:0; 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; vertical-align:top; } .borderRBL { line-height:normal !important; } [cellspacing="0"] { line-height:17px; } .category_totals { 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; line-height:24px; padding-bottom: 30px; 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 { 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; } .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; z-index: 0 !important; } .hide:hover { background-color: rgba(0, 0, 0, 0); background-repeat: no-repeat no-repeat; background-size: cover; border-radius: 20px; box-shadow: 0 0 8px 8px rgba(63, 52, 60, 0.55); padding-right: 150px; padding-top: 220px !important; position: absolute; z-index: 0 !important; } .hide:hover:after { background: transparent; content: " "; height: 75px; left: 0; position: absolute; top: 0; width: 260px; z-index: 20; } .td1:nth-of-type(2), .td2:nth-of-type(2) { padding-left:35px; text-align:left; } a, .td1, .td2, .category_totals { -webkit-transition:all 0.25s ease-in-out 0s; transition:all 0.25s ease-in-out 0s; } .animetitle { font-weight: bold;} .animetitle + small { font-weight:bold; } * { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; } #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; } /* Media query for devices below 1000px (small screen phones, 800px res notebooks)*/ @media all and (min-device-width:1px) { #list_surround { left: 30% !important; width: 57% !important; } span[id*="tagLinks"] { width: 75%;} } /* Media query for devices above 1000px but below 1025px (1024px screen)*/ @media all and (min-device-width:1001px) { #list_surround { left: 25% !important; width: 64% !important; } span[id*="tagLinks"] { width: ;} } /* Media query for devices above 1024px (1140px screens)*/ @media all and (min-device-width:1025px) { #list_surround { left: 25% !important; width: 65% !important; } span[id*="tagLinks"] { width: ;} } /* Media query for devices above 1140px (1280px res, 13' notebook)*/ @media all and (min-device-width:1141px) { #list_surround { left: 21% !important; width: 70% !important; } span[id*="tagLinks"] { width: ;} } /* Media query for devices above 1280px (1366px res, 15' notebook)*/ @media all and (min-device-width:1281px) { #list_surround { left: 16% !important; width: 70% !important; } span[id*="tagLinks"] { width: 58%;} } /* Media query for devices above 1440px (1680px res, 20-22' desk)*/ @media all and (min-device-width:1441px) { #list_surround { left: 18% !important; width: 65% !important; } span[id*="tagLinks"] { width: 55%;} } /* Media query for devices above 1680px (1920px res, 23' desktop)*/ @media all and (min-device-width:1681px) { #list_surround { left: 0% !important; width: 51% !important; } span[id*="tagLinks"] { width: ;} } /* Media query for devices above 1920px (23'+ desktop)*/ @media all and (min-device-width:1921px) { #list_surround { left: 0% !important; width: 47% !important; } span[id*="tagLinks"] { width: ;} } |
Mar 22, 2015 7:56 AM
#176
| @notawake Mmm I like it! Looks really sleek, and I'm diggin' the small covers! |
Mar 24, 2015 10:59 PM
#177
| i modified this using your guides. thanks for guides and feel free to use if you like preview:  code: |
Apr 1, 2015 6:11 PM
#178
| These are really simple without much element.... but since the profile/About Me layout size now is way wider I've kinda got no use for these ... so I put it here if anyone want to use them... You'll have to adjust/edit & slice them yourself though~.~ Original Character Preview (original width 680 px)  Text free PNG image || Full vers. PSD file Ene Preview (original width 680 px)  Text free PNG image || Full vers. PSD file Haikyuu!! Preview (original width 680 px)  Text free PNG image || Full vers. PSD file I've never use this one. Made it during the disabled of BBcode, but since after that the available width in about me is wider... might as well make a new one~ Yakumo Yukari Preview (original width 680 px)  Text free PNG image || Full vers. PSD file |
 |
Apr 2, 2015 4:40 AM
#179
| /* 1) Generated covers */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/anime.css); /* 2) Base layout */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/style.css); /* 3) Top-bar icons */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/bars/japan/bar.css); /* 4) Layout theme */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/themes/dark/theme.css); /* 5) Addons - Add as many as you want */ body { background-image: url(http://i.imgur.com/reG1ijw.jpg); background-size: cover; background-attachment: fixed; /* Crusor */ cursor:url(http://fc02.deviantart.net/fs70/i/2012/363/f/e/black_rock_shooter_cursor_by_anime_rai-d4wwk78.gif) 1 2, auto; } a:hover { cursor: url(http://fc02.deviantart.net/fs70/i/2012/363/f/e/black_rock_shooter_cursor_by_anime_rai-d4wwk78.gif) 1 2, auto; } /* 6) Options */ /* Determines the number of covers on each row, it should be a multiple of 242px */ #mal_control_strip, #list_surround {max-width: 1452px;} /* Header picture */ #inlineContent {background-image: url(http://i.imgur.com/bQraOD5.jpg);} /* Default picture when no cover is found */ .hide {background-image: url(http://dl.dropbox.com/u/49469857/MAL/premade/square/nopic/mal.jpg);} /* Links color */ a {color: ;} |
Apr 10, 2015 12:35 PM
#180
| This is a Valkyria Chronicles layout I just finished. I currently use it myself, but I don't mind if others use it as well. Preview:  Code required list settings:  image I used for marking favorites |
Redlord307May 17, 2015 11:03 AM
 |
Apr 22, 2015 4:13 PM
#181
| My another modified square layout, i just improved last one and add some hover effects. For live preview, i currently use it. preview:  code: |
Apr 26, 2015 3:22 PM
#182
| Donating my Log Horizon layout. It's a mod of a Psycho-PASS layout I found on here a while back. preview:  code: @import "https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM"; @import url(http://storage.live.com/items/4A07C1EEED420167%21152); @import "https://dl.dropboxusercontent.com/u/78340470/Club%20layouts/Featured/pyschopassextra.css"; /* MAIN BACKGROUND There's two, the first image link is for the characters and the second is for the city background. */ body { background-attachment: fixed !important; background-image: url("http://i.minus.com/ibgUdm0hojdeaE.png"), url("http://i.imgur.com/MlWaKbw.jpg"); background-position: center bottom, center center; background-repeat: no-repeat; background-size: 818px 611px, cover; background-color: black; } /* CATEGORY HEADERS header is the background color behind each pic, and the pics are found in the following 5 codes. The bottom code clears the original text for these custom logos. */ .table_header { background-color: rgba(0, 0, 0, 0.6); } .header_cw { background-color: transparent; background-image: url("http://i.minus.com/i85tsYdewLLDL.png"); background-repeat: no-repeat; height: 30px; } .header_ptw { background-color: transparent; background-image: url("http://i.minus.com/itpPAKRP9oamS.png"); background-repeat: no-repeat; height: 30px; } .header_dropped { background-color: transparent; background-image: url("http://i.minus.com/ixRydsORAE9aO.png"); background-repeat: no-repeat; height: 30px; } .header_completed { background-color: transparent; background-image: url("http://i.minus.com/iNmiu11n1oNRD.png"); background-repeat: no-repeat; height: 30px; } .header_onhold { background-color: transparent; background-image: url("http://i.minus.com/iBDkQMysmODa4.png"); background-repeat: no-repeat; height: 30px; } .header_title { color: transparent !important; font-size: 0 !important; } /* CATEGORY MENU BUTTONS TRANSITION SPEED By default, set to .25th of a second (a 1/4 of a second transition). */ #list_surround .status_not_selected { transition: all 0.25s ease-in-out 0s; } /* CATEGORY MENU BUTTONS Look at the background images first before putting links to new buttons to make sure you're replacing the right ones. There are ten codes below. */ #list_surround .status_not_selected { background-attachment: scroll; background-color: transparent; background-image: url("http://i.minus.com/i8DKTYN1WhenE.png"); background-position: 0 0; background-repeat: repeat repeat; display: block; height: 80px; overflow: auto; padding: 0; position: fixed; right: -35px; top: 60px; width: 250px; } #list_surround .status_not_selected:hover, #list_surround .status_selected { background-attachment: scroll; background-color: transparent; background-image: url("http://i.minus.com/il6IPzsqvAf3.png"); background-position: 0 0; background-repeat: repeat repeat; border: 5px solid rgba(0, 0, 0, 0.6); border-radius: 11px 11px 11px 11px; display: block; height: 80px; overflow: auto; padding: 0; position: fixed; right: -5px; top: 60px; transition: all 0.25s ease-in-out 0s; width: 250px; } #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.minus.com/i8DKTYN1WhenE.png"); background-position: 0 -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.minus.com/il6IPzsqvAf3.png"); background-position: 0 -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.minus.com/i8DKTYN1WhenE.png"); background-position: 0 -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.minus.com/il6IPzsqvAf3.png"); background-position: 0 -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.minus.com/i8DKTYN1WhenE.png"); background-position: 0 -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.minus.com/il6IPzsqvAf3.png"); background-position: 0 -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.minus.com/i8DKTYN1WhenE.png"); background-position: 0 -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.minus.com/il6IPzsqvAf3.png"); background-position: 0 -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.minus.com/i8DKTYN1WhenE.png"); background-position: 0 -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.minus.com/il6IPzsqvAf3.png"); background-position: 0 -400px; background-repeat: no-repeat no-repeat; display: inline; top: 510px; } /* CUSTOM CURSORS The top code is for the red cursor over the list in general. The bottom two cover the green cursor that hovers over the row, and then the same that hovers over the category menu and add/edit/more buttons. */ * { cursor: url("http://i.imgur.com/b4EaEZ2.png"), auto !important; } tr:hover [class^="td"] { cursor: url("http://i.imgur.com/VLi9qpx.png"), auto !important; background-color: rgba(255, 255, 255, 0.6); } .status_selected a, .status_not_selected a, a.List_LightBox, #list_surround small a { cursor: url("http://i.imgur.com/VLi9qpx.png"), auto !important; } /* CUSTOM ADD/EDIT/MORE BUTTONS The custom More button (down arrow) and Edit/Add button (plus sign). */ #list_surround small a { background: url("http://i.minus.com/i2S7nNp3BIoVA.png") no-repeat scroll center center transparent; color: transparent !important; font-size: 13px; text-shadow: none !important; } a.List_LightBox { background: url("http://i.imgur.com/OmbcOmv.png") no-repeat scroll center center transparent !important; color: transparent !important; } /* OTHER CODES If you need more info on customizing the layout see the original topic it was featured in. */ #list_surround tbody:hover td[class^="td"]:first-child { border-radius: 5px 0 0 5px; } #list_surround tbody:hover td[class^="td"]:last-child { border-radius: 0 5px 5px 0; } .borderRBL:hover { color: #FFFFFF !important; font-weight: normal !important; } #list_surround small a { color: gray !important; color: transparent !important; font-size: 13px; text-shadow: none !important; } #list_surround tr:hover .animetitle { display: inline; width: 530px; } #list_surround tr:hover .animetitle + small { display: none; } a, .td1, .td2 { color: #FFFFFF; font-weight: normal; overflow: hidden; } #list_surround tr:hover .td1, #list_surround tr:hover .td2, #list_surround tr:hover .td1 a, #list_surround tr:hover .td2 a { text-shadow: -2px -2px 1px #000000; } a:hover { text-decoration: underline; } #list_surround .table_headerLink { color: #FFFFFF; font-weight: bold; } #list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped { background-color: rgba(0, 0, 0, 0.6); border-radius: 20px 20px 0 0; margin-left: 0; padding: 0; width: 535px; } #list_surround { background-attachment: scroll; background-image: none; background-position: 0 0; border-bottom: 0 solid #292929; border-left: 0 solid #292929; border-radius: 10px 10px 10px 10px; border-right: 0 solid #292929; height: auto; left: 230px; margin: 0 auto 30px; position: absolute; top: 20px; width: 535px; } #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 { background-color: rgba(0, 0, 0, 0.6); border-radius: 0 0 20px 20px; color: #FFFFFF; font-weight: normal; padding: 5px; text-align: center; } #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: Verdana,Arial,Helvetica,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: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal; } .borderRBL { border-color: green; border-style: solid; border-width: 1px !important; } #list_surround .header_title span { font: small-caps 30px Verdana; } #list_surround .status_not_selected a { opacity: 0; } #list_surround .status_selected a { opacity: 0; } #copyright { color: #FF6600; font-family: 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); } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } *, #inlineContent { font-family: Segoe UI; font-size: 14px; text-decoration: none; } #inlineContent { background: none repeat scroll 0 0 transparent; display: block !important; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: -1; } #list_surround td.table_header a:hover { text-decoration: none !important; } td[class^="td"]:nth-of-type(2) { width: 340px !important; } @media screen and (-webkit-min-device-pixel-ratio:0) { tr:hover [class^="td"] { transition: .1s linear; background-color: rgba(255, 255, 255, 0.6);} } /* Media query for devices above 1140px */ @media all and (min-device-width:1141px) { #list_surround { left: 240px; width: 750px; } #list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped { width: 750px;} } @-moz-document url-prefix() { td[class^="td"]:nth-of-type(2) { width: 555px !important;} } @media screen and (-webkit-min-device-pixel-ratio:0) { td[class^="td"]:nth-of-type(2) { width: 555px !important;} } /* Media query for devices above 1399px */ @media all and (min-device-width:1399px) { body {background-position: 20% bottom, center center !important;} } Read more at http://myanimelist.net/forum/?topicid=605019#v3jaztYWBXa0XLot.99 |
| Leader of Whiteout Scans Current project: ReLIFE |
Jun 20, 2015 2:08 PM
#183
| As a huge Fate / Stay Night fan, I couldn't resist to make another skin of it (based on Ayame's awesome F/SN skin) preview (seems like the img doesnt wanna pop up here, tried 3 different ways of bb-coding, my anime list has this skin so you can see it live, if a mod can make this img show here, plz edit it then):  code: @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); /* Ask questions and review common questions about this layout here: http://myanimelist.net/forum/?topicid=445485 MAIN BACKGROUND */ body { background-attachment: fixed; background-clip: border-box; background-color: #000000; background-image: url("http://images6.fanpop.com/image/photos/37000000/Saber-saber-arthuria-pendragon-funclub-37039087-1920-1080.jpg"); background-origin: background-position: center bottom; background-repeat: no-repeat; background-size: cover; color: #FFEBCD; font-family: Tempus Sans ITC; font-size: 14px; } /* POSITION/SIZE OF ANIME POSTERS ON LIST Use margin left to move the posters to the left or right. */ .hide { background-position: left center; background-repeat: no-repeat; background-size: contain; display: inline-block !important; height: 110px; margin-left: 415px; margin-top: -118px; position: absolute; width: 85px !important; } /* POSITION AND SIZE OF ANIME POSTERS (with cursor on it) Use margin-left to change their position. */ .hide:hover{ background-color: transparent; background-repeat: no-repeat; background-size: auto auto; margin-left: 165px; padding-right: 251px; padding-top: 241px; position: absolute; } /* BACKGROUND RENDER AND LOGO The first backgroun image url is the Fate/Stay Night logo up at the upper left. */ #inlineContent { background: url(http://i.imgur.com/p5hVSh3.png) 1% 5% fixed no-repeat; background-size: auto, contain; bottom: 0; display: inline !important; height: 100%; margin-bottom: 0; position: fixed; right: 0; width: 100%; z-index: -2 !important; } /* LIST POSITION Use this to adjust the list position. Adding to right will move it more from the edge. Adding to margin-top will lower the list. */ div#list_surround { background-image: url("none"); background-repeat: no-repeat; margin-top: -10px; position: absolute; left: 39px; width: 700px; } /* LIST ROWS The list row colors, background graphics, and fonts. */ .td1 { background: url("http://i.imgur.com/XSVkN6w.png") repeat scroll 0 0 transparent; color: #FFEBCD; font-family: Tempus Sans ITC; font-size: 14px; height: 125px; padding: 5px; } .td2 { background: url("http://i.imgur.com/hy43iNu.png") repeat scroll 0 0 transparent; color: #FFEBCD; font-family: Tempus Sans ITC; font-size: 14px; height: 125px; padding: 5px; } /* HEADERS They say completed, dropped, etc. */ .header_cw { background-image: url("http://i.imgur.com/VDxuinH.png"); background-repeat: no-repeat; height: 130px; } .header_completed { background-image: url("http://i.imgur.com/47nhuHV.png"); background-repeat: no-repeat; height: 130px; } .header_onhold { background-image: url("http://i.imgur.com/TG5L8iZ.png"); background-repeat: no-repeat; height: 130px; } .header_dropped { background-image: url("http://i.imgur.com/qD55Dfa.png"); background-repeat: no-repeat; height: 130px; } .header_ptw { background-image: url("http://i.imgur.com/1glODEU.png"); background-repeat: no-repeat; height: 130px; } /* LEFT SIDE MENU BUTTONS These are the buttons that change your category pages. */ #list_surround .status_selected { background: url("http://i.imgur.com/mRscVSW.png") no-repeat scroll 0 0 transparent; display: block; height: 58px; right: 20px; padding: 0; position: fixed; top: 240px; width: 280px; } #list_surround .status_selected a { color: #FFEBCD; display: block; font-size: 1px; height: 2px; padding: 100px 0 0 243px; width: 30px; } #list_surround .status_not_selected { background: url("http://i.imgur.com/rix48Ht.png") no-repeat scroll 0 0 transparent; display: block; height: 58px; right: 20px; padding: 0; position: fixed; top: 240px; width: 280px; } #list_surround .status_not_selected a { color: #FFEBCD; display: block; font-size: 1px; height: 2px; padding: 100px 0 0 243px; width: 30px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background: url("http://i.imgur.com/2KD92TA.png") no-repeat scroll 0 0 white; top: 299px; } #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: url("http://i43.tinypic.com/2nlbmna.jpg") repeat scroll 0 0 transparent; top: 358px; } #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: url("http://i.imgur.com/XGlnzQ7.png") no-repeat scroll 0 0 transparent; display: inline; top: 417px; } #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: url("http://i.imgur.com/YJJJEyn.png") no-repeat scroll 0 0 transparent; display: inline; top: 476px; } #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: url("http://i.imgur.com/XjCmz74.png") no-repeat scroll 0 0 transparent; padding-bottom: 30px; top: 535px; } /* LINK COLORS */ .animetitle { color: white; } a { color: wheat; } a:hover{ color: blue; } .table_headerLink { color: #FFEBCD; } .table_headerLink:visited { color: #FFEBCD; } .table_headerLink:hover { color: #FFEBCD; } #list_surround .animetitle + small { color: #FFEBCD; font-family: Tempus Sans ITC; font-size: 11px; } /* PARTS, COPYRIGHT AND TOTALS */ .table_header { background: url("http://i.imgur.com/aDkizcU.png") repeat scroll 0 0 transparent; padding: 5px; } .table_header { background: url("http://i.imgur.com/aDkizcU.png") repeat scroll 0 0 transparent; color: #FFEBCD; font-family: Tempus Sans ITC; font-size: 12px; padding: 5px; } .category_totals { background-image: url("http://i.imgur.com/m0CyIfp.png"); color: #FFEBCD; height: 38px; text-align: center; background-repeat: no-repeat; padding-bottom: 244px; } #grand_totals { background: url("http://i.imgur.com/aDkizcU.png") no-repeat scroll 0 0 transparent; color: #FFEBCD; } #copyright { background: url("http://i.imgur.com/TaEe4xe.jpg") repeat scroll 0 0 transparent; color: #FFEBCD; font-family: verdana; font-size: 9px; font-weight: normal; height: 86px; Right: 20px; padding: 5px; position: fixed; text-align: left; text-shadow: 0 0 15px #181818; top: 600px; width: 280px; } #copyright a{ text-decoration: none; } #copyright:after{ content: "Custom CSS by Hiroyuuki, inspired by Ayame_chan_. Google Shishio's Custom Lists for more info and designs."; } /* OTHER CODES Ask in the thread you got this layout from or my club for help on changing it. */ .header_title { display: none; } .status_selected { background-image: url("http://i.imgur.com/7QTYqeD.png"); color: #FFEBCD; font-family: Tempus Sans ITC; padding: 2px; text-decoration: underline; } .status_not_selected { background-image: url("http://i.imgur.com/Or2nAaL.png"); color: #FFEBCD; font-family: Tempus Sans ITC; padding: 2px; } #list_surround .header_title span { display: none; } #list_surround .status_not_selected a { background: none repeat scroll 0 0 transparent !important; opacity: 0; } #list_surround .status_selected a { background: none repeat scroll 0 0 transparent !important; opacity: 0; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 0 none !important; } td:nth-of-type(2) { padding-right: 5px; } |
HiroyuukiJun 20, 2015 2:21 PM
 |
Jun 20, 2015 7:53 PM
#184
Blazeflack said: nBlur said: I edited a bit u531355's Square layout.. I like it, I was actually thinking about re-making Square Layout with the same kind of design as you got going on. Perhaps I will just build on top of what you have already done, if you don't mind. I also noticed 2 issues when viewing your list as a visitor:   Good job nonetheless. do you have the cod? I can't find it anywhere. If anyone have the code, Please send it to me. |
Jun 21, 2015 3:13 AM
#185
deofre said: do you have the cod? I can't find it anywhere. If anyone have the code, Please send it to me. you can easily access the codes itself from pages by right clicking the page and then click 'page source' or 'source' or smth. |
|
Jun 21, 2015 9:32 PM
#186
deofre said: Blazeflack said: nBlur said: I edited a bit u531355's Square layout.. I like it, I was actually thinking about re-making Square Layout with the same kind of design as you got going on. Perhaps I will just build on top of what you have already done, if you don't mind. I also noticed 2 issues when viewing your list as a visitor: Good job nonetheless. do you have the cod? I can't find it anywhere. If anyone have the code, Please send it to me. For now use http://pasted.co/9314062b |
Shishio-kunJun 24, 2015 8:56 AM
Jun 23, 2015 1:57 PM
#187
I need help. I can't find this CSS. I really want this Layout. |
Jun 24, 2015 7:43 AM
#188
Bolaxinha said: I need help. I can't find this CSS. I really want this Layout. I also need help finding that layout as well |
Jun 24, 2015 7:47 AM
#189
Shishio-kun said: deofre said: Blazeflack said: nBlur said: I edited a bit u531355's Square layout.. I like it, I was actually thinking about re-making Square Layout with the same kind of design as you got going on. Perhaps I will just build on top of what you have already done, if you don't mind. I also noticed 2 issues when viewing your list as a visitor: Good job nonetheless. do you have the cod? I can't find it anywhere. If anyone have the code, Please send it to me. For now use That used to be my layout but it is broken now |
Shishio-kunJun 24, 2015 8:56 AM
Jun 24, 2015 8:56 AM
#190
BoyScouts1 said: Shishio-kun said: deofre said: Blazeflack said: nBlur said: I edited a bit u531355's Square layout.. I like it, I was actually thinking about re-making Square Layout with the same kind of design as you got going on. Perhaps I will just build on top of what you have already done, if you don't mind. I also noticed 2 issues when viewing your list as a visitor: Good job nonetheless. do you have the cod? I can't find it anywhere. If anyone have the code, Please send it to me. For now use That used to be my layout but it is broken now Whoops I posted the wrong link http://pasted.co/9314062b |
Jun 24, 2015 2:31 PM
#191
| I've rehosted the space-themed Square layout and also made manga versions in this topic: http://myanimelist.net/forum/?topicid=1398354  |
Jun 24, 2015 8:12 PM
#192
Shishio-kun said: I've rehosted the space-themed Square layout and also made manga versions in this topic: http://myanimelist.net/forum/?topicid=1398354 Thank you so much for your help! :D |
Jul 3, 2015 10:38 PM
#193
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; } Hi, thanks for sharing it! I changed the placement of the covers because they were too low on my screen and I could not see them but I'm having a problem with the menu bar, it seems dropbox deleted the info and it's not working anymore. I tried to replace it but when I do, the wallpaper and the also covers stop showing, so I must be doing something terribly wrong. Help! Edit: I was able to fix it!!! Yay! :D Annnd I was wondering if it is possible to change the location of the menu bar from the right side to the left one? It's working perfectly now, but it covers a little bit of the "watching" sign. Is there a tutorial I can follow? Thanks! |
TatarataJul 7, 2015 4:11 PM
Jul 7, 2015 6:38 AM
#194
goshujin_sama241 said: I have create several layouts for Darker than Black character Yin. Here is one I recently made but will no longer use so I figured I would share it since there aren't many for this series. The code is listed below... enjoy @import url(https://googledrive.com/host/0BxjwQr0BBXs-aWFrYzJjVnpoVVE); /*thin top bar*/ @import "https://dl.dropbox.com/u/57348187/MAL/IconStyleCSSFixedwithCategoryTrans.css"; /*Fonts*/ @import url("http://fonts.googleapis.com/css?family=Nova+Slim"); @import url(http://fonts.googleapis.com/css?family=Segoe+Print); /* 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://i62.tinypic.com/2s7ctjr.jpg); background-attachment: fixed; background-size: cover; } /* 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). */ .header_title { background-color: rgba(0, 0, 0, 0); color: #FFFFFF; font-family: 'Segoe Print', sans-serif; font-size:30px; border-radius: 20px 20px 0px 0px; font-weight: 700; text-align: left; text-shadow: 2px 2px 2px #06F; } /* SUB-HEADERS BACKGROUND COLOR COLOR Below each main header is the sub-header which says Score, Episodes, Tags, etc. */ .table_header { background-color: rgba(15, 15, 25, 0.575); } /* 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:white; font-family: 'Segoe Print', sans-serif; font-size:14px; text-shadow: 2px 2px 2px #FFF; } .animetitle + small { color:#660099; font-family: "Segoe Print"; font-size:12px; text-shadow: 1px 1px 1px #FFF; } /* 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:#FFFFFF; padding-left:4px; text-align: left; font-size:13px; font-family: 'Segoe Print', sans-serif; text-shadow: 2px 2px 2px #06F; } /* LIST WIDTH Use this to increase the width of your list! */ #list_surround { width:950px } /* LIST POSITION Change "left" to "right" to switch the list side, or vice versa. */ #list_surround { left: 500px; position: relative; } /*OTHER CODES Important codes for the layout's setup. Please don't mess with these unless you know 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: #000000; } a { text-decoration:none; } a:visited { text-decoration:none; } a:hover { color: #FFFFFF !important; text-shadow: -1px -1px 3px #00CCFF, 1px 1px 3px #0066FF; text-decoration:underline; } .category_totals, .td1, .td2, #grand_totals, #copyright { background-color: rgba(0, 0, 0, 0); border-width:0; transition: all .8s ease 0s;/* CSS3 reference */ -o-transition: all .8s ease 0s; /* for Opera compatibility */ -ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */ -moz-transition: all .8s ease 0s; /* for Firefox compatibility */ -webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */ } .category_totals a, .td1 a, .td2 a, #grand_totals a, #copyright a { transition: all .8s ease 0s;/* CSS3 reference */ -o-transition: all .8s ease 0s; /* for Opera compatibility */ -ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */ -moz-transition: all .8s ease 0s; /* for Firefox compatibility */ -webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */ } .category_totals:HOVER, .td1:HOVER, .td2:HOVER, #grand_totals:HOVER, #copyright:HOVER {background-color:rgba(0,0,0, 0); border-width:0; } #copyright:after { content: " Custom CSS by Shishio-kun. Theme and edited by goshujin_sama241."; } #copyright { margin-bottom: 30px !important; border-radius: 20px; padding: 10px; } .thickbox { color:#0066FF; font-family:fantasy; font-size:12px; } .header_title { padding:2px; } .table_header { border-width:0; font-weight:bold; padding:2px; } .category_totals { border-radius: 0px 0px 20px 20px; height: 40px; text-align: center; } #grand_totals { text-align: center; margin:0 auto; border-radius: 20px; padding: 10px 20px; width: 600px; } /* 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 */ .hide { background-size: cover; left: 200px; 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(200, 5, 200, 0.75); background-position: center 50% !important; background-repeat: no-repeat !Important; display: block !important; position: fixed; 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 { color: white; background: transparent; content: #list_surround:nth-of-type(n+4):hover td:nth-of-type(2) .animetitle; padding-bottom: 5px; position: absolute; text-align: center; width: 225px; top: -25px; border-radius: 25px 25px 0 0; } /* OTHER SETTINGS */ :hover + .hide { visibility: visible; opacity: 1; } /* 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; } Thanks I loved it |
 |
Jul 7, 2015 7:59 AM
#195
Jul 7, 2015 4:44 PM
#196
BoyScouts1 said: Bolaxinha said: I need help. I can't find this CSS. I really want this Layout. I also need help finding that layout as well Shishio have that layout I think |
 |
Jul 7, 2015 4:58 PM
#197
KenHyakuya said: BoyScouts1 said: Bolaxinha said: I need help. I can't find this CSS. I really want this Layout. I also need help finding that layout as well Shishio have that layout I think Already took care of this: http://myanimelist.net/forum/?topicid=393503&show=150#msg40521063 |
Jul 8, 2015 9:51 AM
#198
| Shokugeki no soma Template Template layout click here. Code @import "https://dl.dropbox.com/s/8vjos6cpj8yo4ek/RedTopBar.css"; @import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css"; * { text-decoration: none; } body { background-attachment: fixed; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: url("http://img14.deviantart.net/9bec/i/2015/122/8/8/shokugeki_no_soma_hd_wallpaper_by_tammypain-d8ruaqp.png"); background-position: 33% 97%; background-repeat: no-repeat no-repeat; background-size: cover; font-family: candara; } @font-face { font-family: "SAO"; src: url("http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Fonts/SAO.woff") format("woff"); } a, #searchListButton { } a { text-decoration: none; } a:hover { color: #FFD700 !important; } body { background-color: rgba(0, 0, 0, 0); color: #7F7E7E; 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; } .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: #D79C20 !important; font-weight: bold; text-shadow: 0 0 3px #000000, 0 0 2px #000000, 0 1px 7px #FFFFFF, 0 0 0 #FFFFFF; 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-position: 49% 3px; background-repeat: no-repeat; } td[class^="td"]:nth-child(4) { color: #D7D6D6; } [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(242, 4, 4, 0.75); text-align: center; vertical-align: top; } tr:hover td[class^="td"] { background-color: #FF0048; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color: #FFFFFF; text-shadow: 0 0 1px #FFFFFF; } a { color: #D7D6D6; } .table_headerLink { color: #FFFFFF !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 #FF0048 !important; } td[class^="td"]:last-child { border-right: 2px solid #FF0048 !important; } .table_header { background-color: #F20404; border-color: #FF0048; border-style: solid; border-width: 2px 0; } .table_header:first-child { border-bottom: 2px solid #FF0048 !important; border-left: 2px solid #FF0048 !important; border-right: 0 none; border-top: 2px solid #FF0048 !important; border-top-left-radius: 16px; } .table_header:nth-child(5) { border-radius: 0 16px 0 0; border-right: 2px solid #FF0048 !important; } .header_title { display: inline-block; height: 100px; pointer-events: none; } .category_totals { background-color: #F20404; border: 2px solid #FF0048; border-radius: 0 0 16px 16px; color: #FFFFFF; padding: 3px 3px 9px; text-align: center; } #grand_totals { background-color: #F20404; border-color: #FFFFFF; border-radius: 0 0 12px 12px; border-style: solid; border-width: 0 2px; color: #FFFFFF; display: block; margin-top: -30px; padding: 0 10px 10px; position: absolute; text-align: center; width: calc(100% - 24px); } #copyright:before { content: "Design by Interception."; font-size: 12px; } #copyright { background-color: #A0373C; border: 4px solid #F20404; 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: " "; 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: rgba(242, 4, 4, 0.8) !important; border: 2px solid #F20404; 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"] { visibility: visible; } :hover + .hide { background-color: #F20404; background-position: 50% 50% !important; background-repeat: no-repeat !important; background-size: auto auto !important; border-color: #F20404; 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; } .header_title { display: inline-block; height: 100px; pointer-events: none; } .header_cw span, .header_completed span, .header_onhold span, .header_dropped span, .header_ptw span { background-image: url("http://i.imgur.com/c94cOqq.png"); background-repeat: no-repeat; display: inline-block; font-size: 0; height: 321px; position: absolute; width: 650px; z-index: 1 !important; } .header_cw { background-image: url("http://orig04.deviantart.net/1da7/f/2014/328/3/3/soma_yukihira_render_by_justice_hero-d87jj0h.png"); background-position: 85% 0; background-repeat: no-repeat no-repeat; background-size: 50% auto; height: 300px; } .header_completed { background-image: url("http://vignette2.wikia.nocookie.net/oremonogatari/images/6/69/Takeo_Gouda_Anime_Infobox.png/revision/latest?cb=20150320215916"); background-position: 10% 0; background-repeat: no-repeat; background-size: 30% auto; height: 300px; } .header_onhold { background-image: url("http://th04.deviantart.net/fs71/PRE/f/2014/299/0/7/tokyo_ghoul___kaneki_ken__white_haired___mask__by_suohans-d847mjv.png"); background-position: 81% 0; background-repeat: no-repeat; background-size: 34% auto; height: 300px; } .header_dropped { background-image: url("http://vignette3.wikia.nocookie.net/oremonogatari/images/e/e9/Makoto_Sunakawa_Anime_Infobox.png/revision/latest?cb=20150413220328"); background-position: 10% 0; background-repeat: no-repeat; background-size: 38% auto; height: 300px; } .header_ptw { background-image: url("http://orig10.deviantart.net/5630/f/2014/202/5/2/takumi_aldini_render_by_thelandintheend-d7rp1v7.png"); background-position: 85% 0; background-repeat: no-repeat; background-size: 40% auto; height: 300px; } .header_cw span { background-position: 12% -28%; height: 220px; } .header_completed span { background-position: 63% 18%; height: 120px; position: relative; top: 106%; } .header_onhold span { background-position: 9% 39%; height: 120px; position: relative; top: 99%; } .header_dropped span { background-position: 73% 67%; height: 140px; position: relative; top: 100%; } .header_ptw span { background-position: 12% 93%; height: 140px; position: relative; top: 100%; } .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://i.imgur.com/ATAVnsX.png"); display: inline-block; font-size: 0; height: 58px; position: fixed; right: 5px; top: 50%; width: 66px; } .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://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Lineage/Images/category_hover.png"); content: ""; display: none; 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 -8px; margin-right: 140px; margin-top: -100px; } .status_selected a[href*="status=1"], .status_not_selected a[href*="status=1"]:hover { background-position: -77px -8px; margin-right: 140px; margin-top: -100px; } .status_not_selected a[href*="status=2"] { background-position: 0 -65px; margin-right: 140px; margin-top: -43px; } .status_selected a[href*="status=2"], .status_not_selected a[href*="status=2"]:hover { background-position: -77px -65px; margin-right: 140px; margin-top: -43px; } .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 -122px; margin-right: 140px; margin-top: 14px; } .status_selected a[href*="status=3"], .status_not_selected a[href*="status=3"]:hover { background-position: -77px -122px; margin-right: 140px; margin-top: 14px; } .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 -180px; margin-right: 92px; margin-top: -72px; } .status_selected a[href*="status=4"], .status_not_selected a[href*="status=4"]:hover { background-position: -77px -180px; margin-right: 92px; margin-top: -72px; } .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 -238px; margin-right: 92px; margin-top: -16px; } .status_selected a[href*="status=6"], .status_not_selected a[href*="status=6"]:hover { background-position: -77px -238px; margin-right: 92px; margin-top: -16px; } .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 -294px; margin-right: 92px; margin-top: 41px; } .status_selected a[href*="status=7"], .status_not_selected a[href*="status=7"]:hover { background-position: -77px -294px; margin-right: 92px; margin-top: 41px; } .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; } |
DroxiJul 8, 2015 9:55 AM
Jul 9, 2015 6:47 PM
#199
Jazlo_v2 said: Shokugeki no soma Template Template layout click here. Code @import "https://dl.dropbox.com/s/8vjos6cpj8yo4ek/RedTopBar.css"; @import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css"; * { text-decoration: none; } body { background-attachment: fixed; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: url("http://img14.deviantart.net/9bec/i/2015/122/8/8/shokugeki_no_soma_hd_wallpaper_by_tammypain-d8ruaqp.png"); background-position: 33% 97%; background-repeat: no-repeat no-repeat; background-size: cover; font-family: candara; } @font-face { font-family: "SAO"; src: url("http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Fonts/SAO.woff") format("woff"); } a, #searchListButton { } a { text-decoration: none; } a:hover { color: #FFD700 !important; } body { background-color: rgba(0, 0, 0, 0); color: #7F7E7E; 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; } .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: #D79C20 !important; font-weight: bold; text-shadow: 0 0 3px #000000, 0 0 2px #000000, 0 1px 7px #FFFFFF, 0 0 0 #FFFFFF; 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-position: 49% 3px; background-repeat: no-repeat; } td[class^="td"]:nth-child(4) { color: #D7D6D6; } [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(242, 4, 4, 0.75); text-align: center; vertical-align: top; } tr:hover td[class^="td"] { background-color: #FF0048; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color: #FFFFFF; text-shadow: 0 0 1px #FFFFFF; } a { color: #D7D6D6; } .table_headerLink { color: #FFFFFF !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 #FF0048 !important; } td[class^="td"]:last-child { border-right: 2px solid #FF0048 !important; } .table_header { background-color: #F20404; border-color: #FF0048; border-style: solid; border-width: 2px 0; } .table_header:first-child { border-bottom: 2px solid #FF0048 !important; border-left: 2px solid #FF0048 !important; border-right: 0 none; border-top: 2px solid #FF0048 !important; border-top-left-radius: 16px; } .table_header:nth-child(5) { border-radius: 0 16px 0 0; border-right: 2px solid #FF0048 !important; } .header_title { display: inline-block; height: 100px; pointer-events: none; } .category_totals { background-color: #F20404; border: 2px solid #FF0048; border-radius: 0 0 16px 16px; color: #FFFFFF; padding: 3px 3px 9px; text-align: center; } #grand_totals { background-color: #F20404; border-color: #FFFFFF; border-radius: 0 0 12px 12px; border-style: solid; border-width: 0 2px; color: #FFFFFF; display: block; margin-top: -30px; padding: 0 10px 10px; position: absolute; text-align: center; width: calc(100% - 24px); } #copyright:before { content: "Design by Interception."; font-size: 12px; } #copyright { background-color: #A0373C; border: 4px solid #F20404; 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: " "; 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: rgba(242, 4, 4, 0.8) !important; border: 2px solid #F20404; 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"] { visibility: visible; } :hover + .hide { background-color: #F20404; background-position: 50% 50% !important; background-repeat: no-repeat !important; background-size: auto auto !important; border-color: #F20404; 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; } .header_title { display: inline-block; height: 100px; pointer-events: none; } .header_cw span, .header_completed span, .header_onhold span, .header_dropped span, .header_ptw span { background-image: url("http://i.imgur.com/c94cOqq.png"); background-repeat: no-repeat; display: inline-block; font-size: 0; height: 321px; position: absolute; width: 650px; z-index: 1 !important; } .header_cw { background-image: url("http://orig04.deviantart.net/1da7/f/2014/328/3/3/soma_yukihira_render_by_justice_hero-d87jj0h.png"); background-position: 85% 0; background-repeat: no-repeat no-repeat; background-size: 50% auto; height: 300px; } .header_completed { background-image: url("http://vignette2.wikia.nocookie.net/oremonogatari/images/6/69/Takeo_Gouda_Anime_Infobox.png/revision/latest?cb=20150320215916"); background-position: 10% 0; background-repeat: no-repeat; background-size: 30% auto; height: 300px; } .header_onhold { background-image: url("http://th04.deviantart.net/fs71/PRE/f/2014/299/0/7/tokyo_ghoul___kaneki_ken__white_haired___mask__by_suohans-d847mjv.png"); background-position: 81% 0; background-repeat: no-repeat; background-size: 34% auto; height: 300px; } .header_dropped { background-image: url("http://vignette3.wikia.nocookie.net/oremonogatari/images/e/e9/Makoto_Sunakawa_Anime_Infobox.png/revision/latest?cb=20150413220328"); background-position: 10% 0; background-repeat: no-repeat; background-size: 38% auto; height: 300px; } .header_ptw { background-image: url("http://orig10.deviantart.net/5630/f/2014/202/5/2/takumi_aldini_render_by_thelandintheend-d7rp1v7.png"); background-position: 85% 0; background-repeat: no-repeat; background-size: 40% auto; height: 300px; } .header_cw span { background-position: 12% -28%; height: 220px; } .header_completed span { background-position: 63% 18%; height: 120px; position: relative; top: 106%; } .header_onhold span { background-position: 9% 39%; height: 120px; position: relative; top: 99%; } .header_dropped span { background-position: 73% 67%; height: 140px; position: relative; top: 100%; } .header_ptw span { background-position: 12% 93%; height: 140px; position: relative; top: 100%; } .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://i.imgur.com/ATAVnsX.png"); display: inline-block; font-size: 0; height: 58px; position: fixed; right: 5px; top: 50%; width: 66px; } .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://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Lineage/Images/category_hover.png"); content: ""; display: none; 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 -8px; margin-right: 140px; margin-top: -100px; } .status_selected a[href*="status=1"], .status_not_selected a[href*="status=1"]:hover { background-position: -77px -8px; margin-right: 140px; margin-top: -100px; } .status_not_selected a[href*="status=2"] { background-position: 0 -65px; margin-right: 140px; margin-top: -43px; } .status_selected a[href*="status=2"], .status_not_selected a[href*="status=2"]:hover { background-position: -77px -65px; margin-right: 140px; margin-top: -43px; } .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 -122px; margin-right: 140px; margin-top: 14px; } .status_selected a[href*="status=3"], .status_not_selected a[href*="status=3"]:hover { background-position: -77px -122px; margin-right: 140px; margin-top: 14px; } .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 -180px; margin-right: 92px; margin-top: -72px; } .status_selected a[href*="status=4"], .status_not_selected a[href*="status=4"]:hover { background-position: -77px -180px; margin-right: 92px; margin-top: -72px; } .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 -238px; margin-right: 92px; margin-top: -16px; } .status_selected a[href*="status=6"], .status_not_selected a[href*="status=6"]:hover { background-position: -77px -238px; margin-right: 92px; margin-top: -16px; } .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 -294px; margin-right: 92px; margin-top: 41px; } .status_selected a[href*="status=7"], .status_not_selected a[href*="status=7"]:hover { background-position: -77px -294px; margin-right: 92px; margin-top: 41px; } .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; } Wow real nice! I'll start using it :) |
 |
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 |