New
Aug 6, 2014 9:49 AM
#121
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. |
Aug 7, 2014 8:18 AM
#122
nBlur said: Thanks for noticing me about those issues! I fixed the first one but the second one doesn't show up for me and i can't find the problem within the code either. Maybe it didnt load completely ( i hope so ). As for building on this code, I have no problem but I wish you good luck on that because it's a total mess. I checked again and it appears to have been a loading issue last night. The button is no longer misplaced. It looks like this now:  I'll play around with your style next time I have some free time. Thanks. |
Aug 11, 2014 5:04 AM
#123
MagnaAnima said: Thanks! Fixed the issue on the same day you posted ^^;First of all I wanna say thank you! <3 2nd, I have an issue with the "mal_control_strip" being located across the upper-middle portion of my list-site, I hope there's a way to fix that. Seriously though, it's an awesome list! :D much appreciated Donating a Kara no Kyoukai Layout. (that was originally the ef layout, buttons changing on hover code part taken from Date a Live layout) Preview:   The code: For anime lists, For manga lists EDIT: Also donating a similar style Detective Conan layout. Preview: The code: For anime lists, For manga lists EDIT: Changed all links from dropbox to imgur ones |
NarushistoMay 31, 2015 4:47 AM
 |
Sep 5, 2014 1:02 AM
#124
| Donating my first layout. Black Butler Preview:  Code: @import "https://dl.dropboxusercontent.com/u/78340470/anime.css"; @import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css"; @import "http://dl.dropbox.com/u/78340470/Past%20Stuff/bottommenuimport.css"; /*thin top bar*/ @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; /*Fonts*/ @import url("http://fonts.googleapis.com/css?family=Tangerine"); @import url("http://fonts.googleapis.com/css?family=Lemon"); @import url("http://fonts.googleapis.com/css?family=Nova+Slim"); @import url(http://fonts.googleapis.com/css?family=Handlee); @import url(http://fonts.googleapis.com/css?family=Petit+Formal+); /* 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://i1370.photobucket.com/albums/ag264/TheLegendOfJose/MAL/sebastian-and-ciel-black-butler-anime-hd-wallpaper-1920x1080-9715_zpseec63f1c.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(25, 56, 76, 0.440); color: #FFFFFF; font-family: 'Handlee', cursive; font-size:20px; border-radius: 20px 20px 0px 0px; font-weight: 700; 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-color: rgba(25, 56, 76, 0.450); } /* 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: 'Petit Formal ', cursive; font-size:14px; text-shadow: 2px 1px 2px #000000; } .animetitle + small { color:#B5D3D3; font-family: "Nova Slim"; 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-size:13px; font-family: 'Petit Formal ', cursive; text-shadow: 2px 1px 2px #000000; } /* LIST WIDTH Use this to increase the width of your list! */ #list_surround { margin: -25px auto 0; width:950px; } /* LIST POSITION Change "left" to "right" to switch the list side, or vice versa. */ #list_surround { 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: #FFFFFF; } a { text-decoration:none; } a:visited { text-decoration:none; } a:hover, a:visited:hover { color:#98C1C1; text-decoration:none; } .category_totals, .td1, .td2, #grand_totals, #copyright { background-color: rgba(25, 56, 76, 0.450); 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(25, 56, 76, 0.600); border-width:0; } #copyright:after { content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info. Theme by TheLegendOfJose."; } #copyright { margin-bottom: 30px !important; border-radius: 20px; padding: 10px; } .status_selected { background-color:black; padding:2px; color:white; visibility: hidden; text-decoration: blink; } .status_not_selected { background-color:black; padding:2px; visibility: hidden; color:white; } .status_selected a{ visibility: hidden; color:blue; } .status_not_selected a{ visibility: hidden; color:white; } .thickbox { color:cyan; 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; } /* 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:55px; width:35px; margin-left:33px; margin-top:-65px; border:1px solid #FFFFFF; background-color:rgba(248, 162, 200, 0.7); background-position:50% 50%; background-repeat:no-repeat no-repeat; background-size:cover; border-bottom-left-radius:7px; border-bottom-right-radius:7px; border-top-left-radius:7px; border-top-right-radius:0; 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:cover; border-bottom-left-radius:20px; border-bottom-right-radius:20px; border-top-left-radius:20px; border-top-right-radius:20px; box-shadow:rgba(63, 52, 60, 0.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: 75px; left: 0; position: absolute; top: 0; width: 210px; 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: 62px; 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://i1370.photobucket.com/albums/ag264/TheLegendOfJose/MAL/0a85668ce0b3d6e60a018946bd0ca790_zpsdf1f187c.png); height: 290px; 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://i1370.photobucket.com/albums/ag264/TheLegendOfJose/MAL/COMP_zpse1d0795d.png); height: 290px; 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://i1370.photobucket.com/albums/ag264/TheLegendOfJose/MAL/OnHoldGrell_zps6c1ab3b2.png); height: 290px; 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://i1370.photobucket.com/albums/ag264/TheLegendOfJose/MAL/BlondieDropped_zpsd0cac1a7.png); height: 290px; 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://i1370.photobucket.com/albums/ag264/TheLegendOfJose/MAL/PTW_zpsb9e41a78.png); height: 290px; 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; color: transparent !important; font-size: 1px !important; font-size: 0px !important; font-size: 0 !important; font-size: 0pt !important; } Read more at http://myanimelist.net/forum/?topicid=314657#VChg3gWrKPZoI71g.99 |
 |
Sep 30, 2014 1:18 PM
#125
| Donating an alternative version of Square Layout with Hahaido's menu. Optimized for 1920x1080 screen resolution. Based on Vocaloid (Hatsune Miku & Megurine Luka) Preview:  Code: /* Square Layout u531355 - 2012 Alternative version by -Mio- */ /* 1) Generated covers */ @\import "https://malscraper.azurewebsites.net/covers/auto/presets/more"; /* 2) Base layout */ @\import "https://dl.dropbox.com/s/9mv32q7c2tm3m9u/current.css"; /* 3) Top-bar icons */ @\import "https://dl.dropbox.com/s/vev0ahto1f2hsl4/TopMenu.css"; /* 5) Addons - Add as many as you want */ @\import "http://dl.dropbox.com/u/49469857/MAL/premade/square/addons/longcovers/addon.css"; /* 6) Options */ /* Determines the number of covers on each row, it should be a multiple of 242px */ body {max-width: 1210px;} /* Header picture NO NEED TO EDIT*/ #inlineContent {background-image: url();} /* Background Image */ body {background-image:url(https://dl.dropbox.com/s/6eki4mqo2xul02u/bg3.png);} /* Default picture when no cover is found */ .hide {background-image: url();} /* Links color */ a {color: #8ce5ff !important;} /* Left and right pictures */ #list_surround >:nth-of-type(n+4):not(.header_cw):not(.header_completed):not(.header_onhold):not(.header_dropped):not(.header_ptw):hover { z-index: 4; } #list_surround >:hover + .hide { z-index: 3; } body:before { pointer-events: none; position: fixed; bottom: -10px; margin-left: -350px; content: url(https://dl.dropbox.com/s/jc5su7ek3eeump4/left.png); z-index: 2; } body:after { pointer-events: none; position: fixed; bottom: -80px; width: inherit; min-width: inherit; max-width: inherit; margin-left: 370px; content: url(https://dl.dropbox.com/s/gmxch8azxa92fh6/right.png); text-align: right; z-index: 1; } /* More infos on http://myanimelist.net/forum/?topicid=459189 */ |
-Mio-Jan 7, 2021 2:19 AM
 |
Sep 30, 2014 4:48 PM
#126
| heyy, i was just looking through the pre made anime lists and quite liked the magica one (clean version) by TheHolyPotato but i would like it if the images were of kuroko no basket. can somebody please help? |
Sep 30, 2014 4:59 PM
#127
-Mio- said: Donating an alternative version of Square Layout with Hahaido's menu. Optimized for 1920x1080 screen resolution. Based on Vocaloid (Hatsune Miku & Megurine Luka) Preview: Code: /* Square Layout u531355 - 2012 Alternative version by -Mio- */ /* 1) Generated covers */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/anime.css); @import url(http://dl.dropbox.com/s/u7q303kv0wwjn9f/mycovers.css); /* 2) Base layout */ @import url('https://dl.dropbox.com/s/9mv32q7c2tm3m9u/current.css'); /* 3) Top-bar icons */ @import url(https://dl.dropbox.com/s/vev0ahto1f2hsl4/TopMenu.css); /* 5) Addons - Add as many as you want */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/addons/longcovers/addon.css); /* 6) Options */ /* Determines the number of covers on each row, it should be a multiple of 242px */ body {max-width: 1210px;} /* Header picture NO NEED TO EDIT*/ #inlineContent {background-image: url();} /* Background Image */ body {background-image:url(https://dl.dropbox.com/s/6eki4mqo2xul02u/bg3.png?dl=0);} /* Default picture when no cover is found */ .hide {background-image: url();} /* Links color */ a {color: #8ce5ff !important;} /* Mettre 2 images a gauche et a droite */ #list_surround >:nth-of-type(n+4):not(.header_cw):not(.header_completed):not(.header_onhold):not(.header_dropped):not(.header_ptw):hover { z-index: 4; } #list_surround >:hover + .hide { z-index: 3; } body:before { pointer-events: none; position: fixed; bottom: -10px; margin-left: -350px; content: url(https://dl.dropbox.com/s/jc5su7ek3eeump4/left.png); z-index: 2; } body:after { pointer-events: none; position: fixed; bottom: -80px; width: inherit; min-width: inherit; max-width: inherit; margin-left: 370px; content: url(https://dl.dropbox.com/s/gmxch8azxa92fh6/right.png); text-align: right; z-index: 1; } /* More infos on http://myanimelist.net/forum/?topicid=459189 */ oh holy shit awesome wallpaper/background the layout is also nicely done. (y) thecookiemonster said: heyy, i was just looking through the pre made anime lists and quite liked the magica one (clean version) by TheHolyPotato but i would like it if the images were of kuroko no basket. can somebody please help? It's possible but wrong topic to ask this, suggest it here http://myanimelist.net/forum/?topicid=1099375 |
Oct 10, 2014 1:47 PM
#128
Preview: Code: /* @import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/CSS/TopMenu/TopMenu.css); @import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/CSS/TopMenu/Colors/Scheme.css); @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; body { background-attachment:fixed !important; background-image:url(http://imageshack.us/a/img853/802/a86q.jpg); background-position:100px 0; background-size:cover; } #list_surround { left:10px !important; position:absolute !important; } #inlineContent { display:inline-block !important; height:1200px !important; left:0 !important; margin:auto !important; position:fixed !important; right:0 !important; top:0 !important; width:500px !important; z-index:-1 !important; } #list_surround { background-attachment:scroll; background-color:transparent; background-position:50% 1px; background-repeat:no-repeat no-repeat; font-size:12px; line-height:1; margin:0 auto; padding-bottom:10px; padding-top:40px; width:59%; } body { color:#FFFFFF; font-family:'Comic Sans MS'; } a { -webkit-transition:all 0.25s ease-in-out 0s; color:#FFFFFF; text-decoration:initial; text-shadow:none; } a:hover { color:#8000FF; } .status_not_selected, .status_selected { border:0 none !important; height:auto !important; padding:0 8px; text-align:center !important; width:10.667% !important; } .status_not_selected a, .status_selected a { background-color:rgba(100, 0, 70, 0.8); border-bottom-left-radius:15px; border-bottom-right-radius:15px; border-top-left-radius:15px; border-top-right-radius:15px; color:#FFFFFF; display:block !important; font-weight:bold; padding:8px; text-shadow:rgba(0, 0, 0, 0.0980392) 0 1px; } .status_selected a { background-color:rgba(110, 0, 200, 0.6); } .status_not_selected a:hover { background-color:rgba(150, 0, 130, 0.901961); text-shadow:rgba(0, 0, 0, 0.298039) 0 1px; } .status_selected a:hover { background-color:rgba(150, 0, 255, 0.901961); text-shadow:rgba(0, 0, 0, 0.298039) 0 1px; } .table_header { background-color:rgba(100, 0, 70, 0.298039); height:20px; } .table_header:first-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:20px; border-top-right-radius:0; } .table_header:nth-of-type(2) { 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:20px; } .td1 { -webkit-transition:all 0.25s ease-in-out 0s; background-color:rgba(51, 0, 26, 0.298039); height:30px; } .td2 { -webkit-transition:all 0.25s ease-in-out 0s; background-color:rgba(61, 0, 30, 0.298039); height:30px; } tr:hover [class^="td"] { background-color:rgba(150, 0, 110, 0.4); } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align:left; } .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border:0; padding:4px; text-align:center; vertical-align:middle; } .table_header, .td1, .td2, .category_totals { line-height:20px; } .borderRBL { line-height:normal !important; } [cellspacing="0"] { line-height:20px; } .category_totals { background-color:rgba(100, 0, 70, 0.298039); border-bottom-left-radius:20px; border-bottom-right-radius:20px; border-top-left-radius:0; border-top-right-radius:0; color:#FFFFFF; line-height:20px; text-align:center; } null { } [class^="header_"] * { font-size:30px; height:60px; line-height:25px; padding-bottom:10px; padding-left:6px; text-align:left; 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:rgba(0, 0, 0, 0); border:0 none; border-bottom-left-radius:3px; border-bottom-right-radius:3px; border-top-left-radius:3px; border-top-right-radius:3px; color:#FFFFFF; line-height:20px; min-height:20px; padding:8px; text-align:center; vertical-align:middle; } #copyright { background-color:rgba(180, 32, 48, 0.6); border-bottom-left-radius:3px; border-bottom-right-radius:3px; border-top-left-radius:3px; border-top-right-radius:3px; color:#EEEEEE; line-height:17px; margin-top:10px; padding:8px; text-align:center; } .animetitle + small { color:#CC33FF !important; } #copyright::after { content:' CSS by Kyouhansha. Edits by TheHolyPotato. Google 'Shishio's Custom Lists' for more designs and info.'; } /* 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: */ :hover + .hide { background-size: cover; left: 970px; top: 260px; 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; } /* PREVIEW MSG ABOVE COVERS Remove content: "preview"; to remove the PREVIEW text. Change the text in quotations after content to what you want it to say above your cover pic. Top and width controls the position of the text. */ .hide:before { background: transparent; content: "PREVIEW"; padding-bottom: 5px; position: absolute; text-align: center; width: 225px; top: -25px; border-radius: 25px 25px 0 0; } |
muaniOct 19, 2014 12:57 AM
Oct 22, 2014 5:57 PM
#129
| Ok so this is like my test layout, first one I've ever tried and i'm gonna changed it up a lot, but it looks nice and simple as it is so i thought i would donate this as is. Pic: http://i.imgur.com/TTDE4zL.jpg Any helpful tips would be greatly appreciated :) /* HALF CSS IS CUSTOM MADE BUY SHI ARUKU & THE OTHER HALF ARE FROM "Shishio's Custom Lists & Profiles" Link For Help Or Info : http://myanimelist.net/forum/?clubid=19736 */ @import "https://dl.dropbox.com/s/4u9v39e5go65aoq/PinkTopBar.css"; body { background-size:cover; background-image: url(http://i.imgur.com/PhMh9mh.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: center right; color: ; font-size: 12.00px; font-family: Verdana, Arial; background-color: ; } #list_surround { margin-left: auto; margin-right: 950px; width: 800px; } /* CUSTOM BANNER "Background image" controls the image seen, change out the link to change the banner pic. Please leave everything else alone unless you know exactly what you're doing! */ #list_surround { background-image: url( ); background-position: center top; background-repeat: no-repeat; padding-top: 50px; opacity:0.85; filter:alpha(opacity=85); } /* // All links on your list */ a { color: #0099FF; text-decoration: none; } a:visited { color: #0099FF; text-decoration: none; } a:hover { color: #0033CC; text-decoration: bold; } /* // Alternating row color 1 */ .td1 { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #0099FF; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #FF6666; padding: 2px; background-color: #FF99CC; } /* // Alternating row color 2 */ .td2 { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #0099FF; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #FFFF00; padding: 2px; background-color: #FF99FF; } /* headers: watching, completed, on-hold, dropped, plan to watch */ .header_title { color: #FF00FF; font-size: 24px; font-family: Leckerli One; padding-bottom: 3px; text-align: center; } .category_totals { color: #6666CC; padding-top: 8px; font-size: 9px; text-align: center; } #grand_totals { color: #6666CC; font-size: 10px; text-align: center; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ .table_header { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #3399FF; text-decoration: italic; |
Oct 23, 2014 1:20 AM
#130
ShiAruku said: it really does look great (*^-^*) what anime is it based on?Ok so this is like my test layout, first one I've ever tried and i'm gonna changed it up a lot, but it looks nice and simple as it is so i thought i would donate this as is. Pic: http://i.imgur.com/TTDE4zL.jpg Any helpful tips would be greatly appreciated :) /* HALF CSS IS CUSTOM MADE BUY SHI ARUKU & THE OTHER HALF ARE FROM "Shishio's Custom Lists & Profiles" Link For Help Or Info : http://myanimelist.net/forum/?clubid=19736 */ @import "https://dl.dropbox.com/s/4u9v39e5go65aoq/PinkTopBar.css"; body { background-size:cover; background-image: url(http://i.imgur.com/PhMh9mh.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: center right; color: ; font-size: 12.00px; font-family: Verdana, Arial; background-color: ; } #list_surround { margin-left: auto; margin-right: 950px; width: 800px; } /* CUSTOM BANNER "Background image" controls the image seen, change out the link to change the banner pic. Please leave everything else alone unless you know exactly what you're doing! */ #list_surround { background-image: url( ); background-position: center top; background-repeat: no-repeat; padding-top: 50px; opacity:0.85; filter:alpha(opacity=85); } /* // All links on your list */ a { color: #0099FF; text-decoration: none; } a:visited { color: #0099FF; text-decoration: none; } a:hover { color: #0033CC; text-decoration: bold; } /* // Alternating row color 1 */ .td1 { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #0099FF; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #FF6666; padding: 2px; background-color: #FF99CC; } /* // Alternating row color 2 */ .td2 { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #0099FF; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #FFFF00; padding: 2px; background-color: #FF99FF; } /* headers: watching, completed, on-hold, dropped, plan to watch */ .header_title { color: #FF00FF; font-size: 24px; font-family: Leckerli One; padding-bottom: 3px; text-align: center; } .category_totals { color: #6666CC; padding-top: 8px; font-size: 9px; text-align: center; } #grand_totals { color: #6666CC; font-size: 10px; text-align: center; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ .table_header { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #3399FF; text-decoration: italic; |
         |
Oct 23, 2014 10:09 AM
#131
Oiomi-chan said: None i just like pink XD, that background could be from an anime i'm not sure , someone else made it for me :)ShiAruku said: it really does look great (*^-^*) what anime is it based on?Ok so this is like my test layout, first one I've ever tried and i'm gonna changed it up a lot, but it looks nice and simple as it is so i thought i would donate this as is. Pic: http://i.imgur.com/TTDE4zL.jpg Any helpful tips would be greatly appreciated :) /* HALF CSS IS CUSTOM MADE BUY SHI ARUKU & THE OTHER HALF ARE FROM "Shishio's Custom Lists & Profiles" Link For Help Or Info : http://myanimelist.net/forum/?clubid=19736 */ @import "https://dl.dropbox.com/s/4u9v39e5go65aoq/PinkTopBar.css"; body { background-size:cover; background-image: url(http://i.imgur.com/PhMh9mh.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: center right; color: ; font-size: 12.00px; font-family: Verdana, Arial; background-color: ; } #list_surround { margin-left: auto; margin-right: 950px; width: 800px; } /* CUSTOM BANNER "Background image" controls the image seen, change out the link to change the banner pic. Please leave everything else alone unless you know exactly what you're doing! */ #list_surround { background-image: url( ); background-position: center top; background-repeat: no-repeat; padding-top: 50px; opacity:0.85; filter:alpha(opacity=85); } /* // All links on your list */ a { color: #0099FF; text-decoration: none; } a:visited { color: #0099FF; text-decoration: none; } a:hover { color: #0033CC; text-decoration: bold; } /* // Alternating row color 1 */ .td1 { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #0099FF; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #FF6666; padding: 2px; background-color: #FF99CC; } /* // Alternating row color 2 */ .td2 { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #0099FF; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #FFFF00; padding: 2px; background-color: #FF99FF; } /* headers: watching, completed, on-hold, dropped, plan to watch */ .header_title { color: #FF00FF; font-size: 24px; font-family: Leckerli One; padding-bottom: 3px; text-align: center; } .category_totals { color: #6666CC; padding-top: 8px; font-size: 9px; text-align: center; } #grand_totals { color: #6666CC; font-size: 10px; text-align: center; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ .table_header { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #3399FF; text-decoration: italic; |
Oct 23, 2014 2:06 PM
#132
ShiAruku said: NVM found it :POiomi-chan said: None i just like pink XD, that background could be from an anime i'm not sure , someone else made it for me :)ShiAruku said: Ok so this is like my test layout, first one I've ever tried and i'm gonna changed it up a lot, but it looks nice and simple as it is so i thought i would donate this as is. Pic: http://i.imgur.com/TTDE4zL.jpg Any helpful tips would be greatly appreciated :) /* HALF CSS IS CUSTOM MADE BUY SHI ARUKU & THE OTHER HALF ARE FROM "Shishio's Custom Lists & Profiles" Link For Help Or Info : http://myanimelist.net/forum/?clubid=19736 */ @import "https://dl.dropbox.com/s/4u9v39e5go65aoq/PinkTopBar.css"; body { background-size:cover; background-image: url(http://i.imgur.com/PhMh9mh.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: center right; color: ; font-size: 12.00px; font-family: Verdana, Arial; background-color: ; } #list_surround { margin-left: auto; margin-right: 950px; width: 800px; } /* CUSTOM BANNER "Background image" controls the image seen, change out the link to change the banner pic. Please leave everything else alone unless you know exactly what you're doing! */ #list_surround { background-image: url( ); background-position: center top; background-repeat: no-repeat; padding-top: 50px; opacity:0.85; filter:alpha(opacity=85); } /* // All links on your list */ a { color: #0099FF; text-decoration: none; } a:visited { color: #0099FF; text-decoration: none; } a:hover { color: #0033CC; text-decoration: bold; } /* // Alternating row color 1 */ .td1 { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #0099FF; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #FF6666; padding: 2px; background-color: #FF99CC; } /* // Alternating row color 2 */ .td2 { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #0099FF; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #FFFF00; padding: 2px; background-color: #FF99FF; } /* headers: watching, completed, on-hold, dropped, plan to watch */ .header_title { color: #FF00FF; font-size: 24px; font-family: Leckerli One; padding-bottom: 3px; text-align: center; } .category_totals { color: #6666CC; padding-top: 8px; font-size: 9px; text-align: center; } #grand_totals { color: #6666CC; font-size: 10px; text-align: center; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ .table_header { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #3399FF; text-decoration: italic; |
|
Oct 23, 2014 7:01 PM
#133
Oiomi-chan said: OH what was it?ShiAruku said: NVM found it :POiomi-chan said: ShiAruku said: it really does look great (*^-^*) what anime is it based on?Ok so this is like my test layout, first one I've ever tried and i'm gonna changed it up a lot, but it looks nice and simple as it is so i thought i would donate this as is. Pic: http://i.imgur.com/TTDE4zL.jpg Any helpful tips would be greatly appreciated :) /* HALF CSS IS CUSTOM MADE BUY SHI ARUKU & THE OTHER HALF ARE FROM "Shishio's Custom Lists & Profiles" Link For Help Or Info : http://myanimelist.net/forum/?clubid=19736 */ @import "https://dl.dropbox.com/s/4u9v39e5go65aoq/PinkTopBar.css"; body { background-size:cover; background-image: url(http://i.imgur.com/PhMh9mh.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: center right; color: ; font-size: 12.00px; font-family: Verdana, Arial; background-color: ; } #list_surround { margin-left: auto; margin-right: 950px; width: 800px; } /* CUSTOM BANNER "Background image" controls the image seen, change out the link to change the banner pic. Please leave everything else alone unless you know exactly what you're doing! */ #list_surround { background-image: url( ); background-position: center top; background-repeat: no-repeat; padding-top: 50px; opacity:0.85; filter:alpha(opacity=85); } /* // All links on your list */ a { color: #0099FF; text-decoration: none; } a:visited { color: #0099FF; text-decoration: none; } a:hover { color: #0033CC; text-decoration: bold; } /* // Alternating row color 1 */ .td1 { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #0099FF; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #FF6666; padding: 2px; background-color: #FF99CC; } /* // Alternating row color 2 */ .td2 { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #0099FF; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #FFFF00; padding: 2px; background-color: #FF99FF; } /* headers: watching, completed, on-hold, dropped, plan to watch */ .header_title { color: #FF00FF; font-size: 24px; font-family: Leckerli One; padding-bottom: 3px; text-align: center; } .category_totals { color: #6666CC; padding-top: 8px; font-size: 9px; text-align: center; } #grand_totals { color: #6666CC; font-size: 10px; text-align: center; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ .table_header { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #3399FF; text-decoration: italic; |
Oct 25, 2014 1:10 PM
#134
xbpxsh0cks said: Yozakura Quartet: Hana no UtaOiomi-chan said: OH what was it?ShiAruku said: Oiomi-chan said: None i just like pink XD, that background could be from an anime i'm not sure , someone else made it for me :)ShiAruku said: it really does look great (*^-^*) what anime is it based on?Ok so this is like my test layout, first one I've ever tried and i'm gonna changed it up a lot, but it looks nice and simple as it is so i thought i would donate this as is. Pic: http://i.imgur.com/TTDE4zL.jpg Any helpful tips would be greatly appreciated :) /* HALF CSS IS CUSTOM MADE BUY SHI ARUKU & THE OTHER HALF ARE FROM "Shishio's Custom Lists & Profiles" Link For Help Or Info : http://myanimelist.net/forum/?clubid=19736 */ @import "https://dl.dropbox.com/s/4u9v39e5go65aoq/PinkTopBar.css"; body { background-size:cover; background-image: url(http://i.imgur.com/PhMh9mh.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: center right; color: ; font-size: 12.00px; font-family: Verdana, Arial; background-color: ; } #list_surround { margin-left: auto; margin-right: 950px; width: 800px; } /* CUSTOM BANNER "Background image" controls the image seen, change out the link to change the banner pic. Please leave everything else alone unless you know exactly what you're doing! */ #list_surround { background-image: url( ); background-position: center top; background-repeat: no-repeat; padding-top: 50px; opacity:0.85; filter:alpha(opacity=85); } /* // All links on your list */ a { color: #0099FF; text-decoration: none; } a:visited { color: #0099FF; text-decoration: none; } a:hover { color: #0033CC; text-decoration: bold; } /* // Alternating row color 1 */ .td1 { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #0099FF; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #FF6666; padding: 2px; background-color: #FF99CC; } /* // Alternating row color 2 */ .td2 { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #0099FF; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #FFFF00; padding: 2px; background-color: #FF99FF; } /* headers: watching, completed, on-hold, dropped, plan to watch */ .header_title { color: #FF00FF; font-size: 24px; font-family: Leckerli One; padding-bottom: 3px; text-align: center; } .category_totals { color: #6666CC; padding-top: 8px; font-size: 9px; text-align: center; } #grand_totals { color: #6666CC; font-size: 10px; text-align: center; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ .table_header { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #3399FF; text-decoration: italic; |
|
Oct 27, 2014 8:24 PM
#135
| Hey guys, any Kino no Tabi lovers? No? Ok. This is my first layout, be kind ;-; Preview: http://goo.gl/w2UgiA Code: http://goo.gl/7PdiBZ |
 |
Oct 28, 2014 4:24 PM
#136
Oiomi-chan said: Thank you.xbpxsh0cks said: Yozakura Quartet: Hana no UtaOiomi-chan said: ShiAruku said: NVM found it :POiomi-chan said: None i just like pink XD, that background could be from an anime i'm not sure , someone else made it for me :)ShiAruku said: it really does look great (*^-^*) what anime is it based on?Ok so this is like my test layout, first one I've ever tried and i'm gonna changed it up a lot, but it looks nice and simple as it is so i thought i would donate this as is. Pic: http://i.imgur.com/TTDE4zL.jpg Any helpful tips would be greatly appreciated :) /* HALF CSS IS CUSTOM MADE BUY SHI ARUKU & THE OTHER HALF ARE FROM "Shishio's Custom Lists & Profiles" Link For Help Or Info : http://myanimelist.net/forum/?clubid=19736 */ @import "https://dl.dropbox.com/s/4u9v39e5go65aoq/PinkTopBar.css"; body { background-size:cover; background-image: url(http://i.imgur.com/PhMh9mh.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: center right; color: ; font-size: 12.00px; font-family: Verdana, Arial; background-color: ; } #list_surround { margin-left: auto; margin-right: 950px; width: 800px; } /* CUSTOM BANNER "Background image" controls the image seen, change out the link to change the banner pic. Please leave everything else alone unless you know exactly what you're doing! */ #list_surround { background-image: url( ); background-position: center top; background-repeat: no-repeat; padding-top: 50px; opacity:0.85; filter:alpha(opacity=85); } /* // All links on your list */ a { color: #0099FF; text-decoration: none; } a:visited { color: #0099FF; text-decoration: none; } a:hover { color: #0033CC; text-decoration: bold; } /* // Alternating row color 1 */ .td1 { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #0099FF; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #FF6666; padding: 2px; background-color: #FF99CC; } /* // Alternating row color 2 */ .td2 { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #0099FF; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #FFFF00; padding: 2px; background-color: #FF99FF; } /* headers: watching, completed, on-hold, dropped, plan to watch */ .header_title { color: #FF00FF; font-size: 24px; font-family: Leckerli One; padding-bottom: 3px; text-align: center; } .category_totals { color: #6666CC; padding-top: 8px; font-size: 9px; text-align: center; } #grand_totals { color: #6666CC; font-size: 10px; text-align: center; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ .table_header { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #3399FF; text-decoration: italic; |
Oct 28, 2014 4:51 PM
#137
rothrock said: Hey guys, any Kino no Tabi lovers? No? Ok. This is my first layout, be kind ;-; Preview: http://goo.gl/w2UgiA Code: http://goo.gl/7PdiBZ simple and neat layout good job. one thing's bothering me though. If you hover a row you're not able to read the row at all. The white font melts with the white background of the row. Try to add this code, maybe it's better tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color: black; } |
Oct 29, 2014 10:39 PM
#138
SylakentH said: simple and neat layout good job. one thing's bothering me though. If you hover a row you're not able to read the row at all. The white font melts with the white background of the row. Try to add this code, maybe it's better tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color: black; } Thank you Sylaken ｑββΏβｑ , it's added. |
|
Oct 30, 2014 3:08 PM
#139
| 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 */ |
Nov 8, 2014 12:41 AM
#140
| Ghibli List Style preview: https://db.tt/pNT1K1Hq code: http://myanimelist.net/blog.php?eid=762701 |
Nov 8, 2014 5:53 AM
#141
seaven said: Ghibli List Style preview: https://db.tt/pNT1K1Hq code: http://myanimelist.net/blog.php?eid=762701 tbh never seen a Ghibli layout before, glad that your donating it. Good job :) |
Nov 8, 2014 7:23 AM
#142
SylakentH said: tbh never seen a Ghibli layout before, glad that your donating it. Good job :) Always happy to help. I got few other ideas while making this style so probably I'll be doing something new soon. |
Nov 12, 2014 12:35 AM
#143
| Donating my current Tokyo Ghoul layout. (worst readability ever seen for a list, I know that^^) Optimized for 1080p. Preview : (clickable)  Checked Settings : Numbers Score Type Episodes The code https://noblueskydropfiles.github.io/animelist%20TG.css Update Dec 16th, 2016 : new imports+fellow writer Update Jan 27th 2017 : switched from fellow writer to malcat |
NoblueskyJan 27, 2017 12:30 PM
Nov 14, 2014 1:06 PM
#144
kuronekodesu said: Hello everyone~ It's my first post in this club, actually I'm a new member :) I'm into CSS (although I'm no pro :p) so I've decided that I'll make some list styles (until college starts =_=). So, here's the first style, featuring Naruto! :D screenshot: http://i.imgur.com/cZ0JfAN.jpg download (with resources credits and instructions): http://www.sendspace.com/file/128mk4 Also - thanks to Shishio-kun for the tutorials :) FOR ME THE BEST ONE!!! THANKS!!!!! |
Maybe you want see what i watching? CLICK! [/center] |
Nov 26, 2014 2:21 PM
#145
| I just created a profile layout for an anime called Ushinawareta Mirai wo Motomete, and I've decided to donate it. Preview:  Code: @import "https://dl.dropboxusercontent.com/u/78340470/Icon%20Style%20Menu%20Bar/pinkversion/pinkiconbar.css"; @import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css"; /* MAIN BACKGROUND The space background by default. */ body { background-attachment:fixed; background-clip:border-box; background-color: black; background-image: url(https://calamitousintents.files.wordpress.com/2012/03/ushi22.jpg); background-position:0 50%, 0 0; background-repeat:no-repeat no-repeat; background-size:cover; font-family:calibri; } /* SECONDARY BACKGROUND 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() no-repeat scroll right bottom transparent; background-size: ; 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; } /* LIST BACKGROUND COLOR, ROW HEIGHT AND FLASH Adjust the opacity and color of the list itself with the first two sets of code, as well as the height of the rows. td1 is odd numbered rows, td2 is even. The third set of code is for the row color and opacity on height. Google RGBA color generator for easy to copy color and opacity numbers customized for you. */ .td1 { background-color:rgba(0, 0, 0, 0.5); height:65px; } .td2 { background-color:rgba(0, 0, 0, 0.5); height:65px; } tr:hover [class^="td"] { transition: .1s linear; background-color: rgba(208, 32, 144, 0.6); } /* SIDE BUTTONS */ #list_surround .status_selected, #list_surround .status_not_selected { -webkit-background-clip:padding-box !important; background-clip:padding-box !important; background-color:transparent; background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/WatchingKaori_zps292861ba.png); background-position:0 0; background-repeat:no-repeat no-repeat; background-size:contain; border:1px solid transparent; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; display:block; left:-300px; padding:0; position:absolute; top:20px; width:263px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/CompletedYui_zps954dd114.png); background-position:100% 0; top:140px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/OnHoldAiri_zpsff6870fb.png); background-position:0 0; top:260px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/DroppedNagisa_zps799d9518.png); background-position:100% 0; top:380px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/PlantoWatchKennySou_zps820b9d1f.jpg); background-position:0 0; top:500px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/AllAnimeUshinawareta_zpsf9fc1bd3.jpg); background-position:100% 0; top:620px; } /* CUSTOM HEADERS */ .header_cw { background-color: transparent; background-image: url("http://i.imgur.com/mWK77Ng.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } .header_completed { background-color: transparent; background-image: url("http://i.imgur.com/wF8MQkE.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } .header_onhold { background-color: transparent; background-image: url("http://i.imgur.com/ZWprtND.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } .header_dropped { background-color: transparent; background-image: url("http://i.imgur.com/3ve4Yod.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } .header_ptw { background-color: transparent; background-image: url("http://i.imgur.com/zRGEVZy.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } /* OTHER CODES Ask in the original topic for this layout of in my club if you need to learn more about customizing this layout. */ a { color:#FFFFFF; text-decoration:none; text-shadow:none; } a:hover { color:#fff; text-decoration:underline; } .table_header { background-color:rgba(255, 255, 255, 0.4); } .table_header:first-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:10px; border-top-right-radius:0; } .table_header:nth-of-type(2) { padding-left:35px; text-align:left; } .table_header:last-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:0; border-top-right-radius:10px; } .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border:0 none; padding:4px; text-align:center; vertical-align:top; } .table_header, .td1, .td2, .category_totals { color:white; } .borderRBL { line-height:normal !important; } [cellspacing="0"] { line-height:17px; } .category_totals { background-color:rgba(255, 255, 255, 0.4); border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:0; border-top-right-radius:0; color:white; text-align:center; } [class^="header_"] * { background-repeat:no-repeat no-repeat; font-size:0; height:200px; line-height:24px; padding-bottom:4px; text-align:right; vertical-align:bottom; } .header_title { border-bottom-left-radius:4px; border-bottom-right-radius:4px; border-top-left-radius:4px; border-top-right-radius:4px; color:#FFFFFF; display:inline-block; font-style:italic; height:auto; padding:0 8px 0 0; text-shadow:rgba(0, 0, 0, 0.14902) 0 1px 1px; } #grand_totals { background-color:transparent; border:0 none; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; color:#FFFFFF; line-height:20px; min-height:20px; padding:8px; text-align:center; vertical-align:middle; } #copyright { background-color:rgba(180, 32, 48, 0.6); border-bottom-left-radius:3px; border-bottom-right-radius:3px; border-top-left-radius:3px; border-top-right-radius:3px; color:#EEEEEE; line-height:17px; margin-top:10px; padding:8px; text-align:center; } #copyright::after { } .hide { background-color:rgba(248, 162, 200, 0.701961); background-position:50% 50%; background-repeat:no-repeat no-repeat; background-size:cover; border:1px solid #FFFFFF; border-bottom-left-radius:7px; border-bottom-right-radius:7px; border-top-left-radius:7px; border-top-right-radius:7px; display:inline-block !important; height:55px; margin-left:33px; margin-top:-65px; position:absolute; width:35px; } .hide:hover { background-color:transparent; background-repeat:no-repeat no-repeat; background-size:cover; border-bottom-left-radius:20px; border-bottom-right-radius:20px; border-top-left-radius:20px; border-top-right-radius:20px; box-shadow:rgba(63, 52, 60, 0.54902) 0 0 8px 8px; margin-left:-115px; padding-right:150px; padding-top:220px !important; position:absolute; z-index:1; } .td1:nth-of-type(2), .td2:nth-of-type(2) { padding-left:35px; text-align:left; } .td1:nth-of-type(6), .td2:nth-of-type(6) { background-attachment:scroll; background-color:transparent; background-image:none; background-position:0 0; background-repeat:repeat repeat; border-bottom-style:none !important; border-bottom-width:medium !important; display:inline-block; font-family:cursive; font-size:9pt; height:0 !important; left:70px; line-height:16px !important; margin-top:16px; position:absolute; text-align:justify !important; width:720px; z-index:2; } .table_header:nth-of-type(6) { display:none; } span[id*="tagRow"] { display:block !important; } span[id*="tagLinks"] { display:none !important; } a, .td1, .td2, .category_totals { -webkit-transition:all 0.25s ease-in-out 0s; transition:all 0.25s ease-in-out 0s; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color:transparent; display:block; font-size:0; height:113px; width:263px; } .status_selected { display:block; } .status_not_selected { display:block; } .status_not_selected { opacity:0.7; } .status_not_selected:hover { color:transparent; opacity:1; } #list_surround { left:0 !important; margin:auto !important; position:absolute !important; right:0 !important; } .animetitle { font-weight: bold;} .animetitle + small { color:#CC33FF !important; font-weight:bold; } * { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out;} .table_header:nth-last-of-type(2) { border-radius: 0 10px 0 0;} .td1:nth-of-type(6), .td2:nth-of-type(6){ background-color: transparent !important; font-family: helvetica;} td:nth-of-type(6) small { font-size: 0; color: cyan; left: 42px; position: relative; } td:nth-of-type(6) small:after { font-size: 12px !important; content: "Tags" } /* Media query for devices above 1000px */ @media all and (min-device-width:1001px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -270px;} #list_surround { left: 24% !important;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 7pt !important; width: 370px !important; padding-top: 8px;} } /* Media query for devices above 1024px */ @media all and (min-device-width:1025px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -300px;} #list_surround { left: 17% !important;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 7pt !important; width: 370px !important;} } /* Media query for devices above 1140px */ @media all and (min-device-width:1141px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -290px;} #list_surround { left: 17% !important; width: 850px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 530px !important;} } /* Media query for devices above 1280px */ @media all and (min-device-width:1281px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -330px;} #list_surround { left: 18% !important; width: 900px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 575px !important;} } /* Media query for devices above 1440px */ @media all and (min-device-width:1441px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -385px;} #list_surround { left: 17% !important; width: 960px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 635px !important;} #list_surround { background-position: center -40px;} } /* Media query for devices above 1680px */ @media all and (min-device-width:1681px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -430px;} #list_surround { left: 16% !important; width: 1050px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 720px !important;} } /* Media query for devices above 1920px */ @media all and (min-device-width:1921px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -530px;} #list_surround { left: 10% !important; width: 1100px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 770px !important;} } EDIT: I made a little edit to this layout, so here's the new code~! @import "https://dl.dropboxusercontent.com/u/78340470/Icon%20Style%20Menu%20Bar/pinkversion/pinkiconbar.css"; @import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css"; /* MAIN BACKGROUND The space background by default. */ body { background-attachment:fixed; background-clip:border-box; background-color: black; background-image: url(https://calamitousintents.files.wordpress.com/2012/03/ushi22.jpg); background-position:0 50%, 0 0; background-repeat:no-repeat no-repeat; background-size:cover; font-family:calibri; } /* SECONDARY BACKGROUND 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() no-repeat scroll right bottom transparent; background-size: ; 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; } /* LIST BACKGROUND COLOR, ROW HEIGHT AND FLASH Adjust the opacity and color of the list itself with the first two sets of code, as well as the height of the rows. td1 is odd numbered rows, td2 is even. The third set of code is for the row color and opacity on height. Google RGBA color generator for easy to copy color and opacity numbers customized for you. */ .td1 { background-color:rgba(0, 0, 0, 0.5); height:65px; } .td2 { background-color:rgba(0, 0, 0, 0.5); height:65px; } tr:hover [class^="td"] { transition: .1s linear; background-color: rgba(208, 32, 144, 0.6); } /* SIDE BUTTONS */ #list_surround .status_selected, #list_surround .status_not_selected { -webkit-background-clip:padding-box !important; background-clip:padding-box !important; background-color:transparent; background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/WatchingKaori_zps292861ba.png); background-position:0 0; background-repeat:no-repeat no-repeat; background-size:contain; border:1px solid transparent; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; display:block; left:-300px; padding:0; position:absolute; top:20px; width:263px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/CompletedYui_zps954dd114.png); background-position:100% 0; top:140px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/OnHoldAiri_zpsff6870fb.png); background-position:0 0; top:260px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/DroppedNagisa_zps799d9518.png); background-position:100% 0; top:380px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/PlantoWatchKennySou_zps820b9d1f.jpg); background-position:0 0; top:500px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/AllAnimeUshinawareta_zpsf9fc1bd3.jpg); background-position:100% 0; top:620px; } /* CUSTOM HEADERS */ .header_cw { background-color: transparent; background-image: url("http://i.imgur.com/mWK77Ng.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } .header_completed { background-color: transparent; background-image: url("http://i.imgur.com/wF8MQkE.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } .header_onhold { background-color: transparent; background-image: url("http://i.imgur.com/ZWprtND.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } .header_dropped { background-color: transparent; background-image: url("http://i.imgur.com/3ve4Yod.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } .header_ptw { background-color: transparent; background-image: url("http://i.imgur.com/zRGEVZy.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } /* OTHER CODES Ask in the original topic for this layout of in my club if you need to learn more about customizing this layout. */ a { color:#FFFFFF; text-decoration:none; text-shadow:none; } a:hover { color:#fff; text-decoration:underline; } .table_header { background-color:rgba(255, 255, 255, 0.4); } .table_header:first-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:10px; border-top-right-radius:0; } .table_header:nth-of-type(2) { padding-left:35px; text-align:left; } .table_header:last-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:0; border-top-right-radius:10px; } .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border:0 none; padding:4px; text-align:center; vertical-align:top; } .table_header, .td1, .td2, .category_totals { color:white; } .borderRBL { line-height:normal !important; } [cellspacing="0"] { line-height:17px; } .category_totals { background-color:rgba(255, 255, 255, 0.4); border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:0; border-top-right-radius:0; color:white; text-align:center; } [class^="header_"] * { background-repeat:no-repeat no-repeat; font-size:0; height:200px; line-height:24px; padding-bottom:4px; text-align:right; vertical-align:bottom; } .header_title { border-bottom-left-radius:4px; border-bottom-right-radius:4px; border-top-left-radius:4px; border-top-right-radius:4px; color:#FFFFFF; display:inline-block; font-style:italic; height:auto; padding:0 8px 0 0; text-shadow:rgba(0, 0, 0, 0.14902) 0 1px 1px; } #grand_totals { background-color:transparent; border:0 none; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; color:#FFFFFF; line-height:20px; min-height:20px; padding:8px; text-align:center; vertical-align:middle; } #copyright { background-color:rgba(180, 32, 48, 0.6); border-bottom-left-radius:3px; border-bottom-right-radius:3px; border-top-left-radius:3px; border-top-right-radius:3px; color:#EEEEEE; line-height:17px; margin-top:10px; padding:8px; text-align:center; } #copyright::after { } .hide { background-color:rgba(248, 162, 200, 0.701961); background-position:50% 50%; background-repeat:no-repeat no-repeat; background-size:cover; border:1px solid #FFFFFF; border-bottom-left-radius:7px; border-bottom-right-radius:7px; border-top-left-radius:7px; border-top-right-radius:7px; display:inline-block !important; height:55px; margin-left:33px; margin-top:-65px; position:absolute; width:35px; } .hide:hover { background-color:transparent; background-repeat:no-repeat no-repeat; background-size:cover; border-bottom-left-radius:20px; border-bottom-right-radius:20px; border-top-left-radius:20px; border-top-right-radius:20px; box-shadow:rgba(63, 52, 60, 0.54902) 0 0 8px 8px; margin-left:-115px; padding-right:150px; padding-top:220px !important; position:absolute; z-index:1; } .td1:nth-of-type(2), .td2:nth-of-type(2) { padding-left:35px; text-align:left; } .td1:nth-of-type(6), .td2:nth-of-type(6) { background-attachment:scroll; background-color:transparent; background-image:none; background-position:0 0; background-repeat:repeat repeat; border-bottom-style:none !important; border-bottom-width:medium !important; display:inline-block; font-family:cursive; font-size:9pt; height:0 !important; left:70px; line-height:16px !important; margin-top:16px; position:absolute; text-align:justify !important; width:720px; z-index:2; } .table_header:nth-of-type(6) { display:none; } span[id*="tagRow"] { display:block !important; } span[id*="tagLinks"] { display:none !important; } a, .td1, .td2, .category_totals { -webkit-transition:all 0.25s ease-in-out 0s; transition:all 0.25s ease-in-out 0s; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color:transparent; display:block; font-size:0; height:113px; width:263px; } .status_selected { display:block; } .status_not_selected { display:block; } .status_not_selected { opacity:0.7; } .status_not_selected:hover { color:transparent; opacity:1; } #list_surround { left:0 !important; margin:auto !important; position:absolute !important; right:0 !important; } .animetitle { font-weight: bold;} .animetitle + small { color:#CC33FF !important; font-weight:bold; } * { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out;} .table_header:nth-last-of-type(2) { border-radius: 0 10px 0 0;} .td1:nth-of-type(6), .td2:nth-of-type(6){ background-color: transparent !important; font-family: helvetica;} td:nth-of-type(6) small { font-size: 0; color: cyan; left: 42px; position: relative; } td:nth-of-type(6) small:after { font-size: 12px !important; content: "Tags" } /* Media query for devices above 1000px */ @media all and (min-device-width:1001px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -270px;} #list_surround { left: 24% !important;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 7pt !important; width: 370px !important; padding-top: 8px;} } /* Media query for devices above 1024px */ @media all and (min-device-width:1025px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -300px;} #list_surround { left: 17% !important;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 7pt !important; width: 370px !important;} } /* Media query for devices above 1140px */ @media all and (min-device-width:1141px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -290px;} #list_surround { left: 17% !important; width: 850px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 530px !important;} } /* Media query for devices above 1280px */ @media all and (min-device-width:1281px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -330px;} #list_surround { left: 18% !important; width: 900px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 575px !important;} } /* Media query for devices above 1440px */ @media all and (min-device-width:1441px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -385px;} #list_surround { left: 17% !important; width: 960px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 635px !important;} #list_surround { background-position: center -40px;} } /* Media query for devices above 1680px */ @media all and (min-device-width:1681px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -430px;} #list_surround { left: 16% !important; width: 1050px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 720px !important;} } /* Media query for devices above 1920px */ @media all and (min-device-width:1921px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -530px;} #list_surround { left: 10% !important; width: 1100px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 770px !important;} } /* ANIMATED SCROLLING BANNER Z-index is the position of the scrolling pic (in front of or behind the list). A high z-index will move the list in front of other parts. A lower index will move the scrollbar behind other parts (-1 will be behind most lists). */ #inlineContent { position: fixed; display: block !important; left: 0; top: 0; width: 100%; height: 145px; overflow: hidden; z-index: 10; } /* SCROLLING IMAGE Change image and animation speeds here (20s). */ #inlineContent:before { pointer-events: none; position: absolute; content: ''; width: 300%; height: 100%; background-image: url("http://i1364.photobucket.com/albums/r730/kanako78/Scroll2_zpspvs3p4rt.png"); -moz-animation: scroll 50s linear infinite; -webkit-animation: scroll 50s linear infinite; } @-moz-keyframes scroll { 0% { background-position: 0; } 100% { background-position: -200%; } } @-webkit-keyframes scroll { 0% { background-position: 0; } 100% { background-position: -200%; } } /* LOWER WALLPAPER Lower the body wallpaper here so that your animated banner doesn't cover up the top of it. */ body { background-position: 0 145px !important; } |
HidamariSeashoreFeb 1, 2015 11:44 AM
Nov 26, 2014 3:17 PM
#146
| Here, I'll donate this Madan No Ou To Vanadis Anime list layout. I just edited it from another List on here, but I thought someone might like it~ @import "https://dl.dropbox.com/s/0rb5a1wq0b8ev5w/LastChapterAnimeListCSS.css"; @import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css"; @import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Lineage/TopMenu.css); @import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Lineage/CategoryMenu.css); @import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Lineage/Favorites.css); /* Delete this line */ @import url(http://dl.dropboxusercontent.com/u/78340470/anime.css); @font-face { font-family: 'SAO'; src: url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Fonts/SAO.woff) format('woff'); } @font-face { font-family: 'Philosopher'; src: url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Fonts/Philosopher.woff) format('woff'); } /* HOW TO USE Use and COMPLETE this simple tutorial if you never installed CSS, it only takes a few minutes: http://myanimelist.net/forum/?topicid=200320 When you're done with the tutorial and can see the starter layout on your list, copy and paste this entire page of codes (including this part and the codes above and below) to your CSS edit box (the box titled Edit Advanced CSS File) replacing any other codes in the box. Save with the blue button at the bottom. It will put this premade layout on your list instead of the starter one from the tutorial! If the layout looks weird on your list after installing, you can try to alter your settings here. Common solutions are to set Default Status Settings to Watching or All Anime, check or uncheck tags (make sure you save afterwards): http://myanimelist.net/editprofile.php?go=listpreferences If your list still has problems you can ask us about it here, or other questions: http://myanimelist.net/forum/?topicid=200323 And you'll find further ways to customize your list here: http://myanimelist.net/forum/?topicid=419405 */ td[class^='td']:nth-of-type(2) { width: 454px !important; } .table_header[width="125"], span[id*="tagLinks"], div[id*="tagChangeRow"] { display: none !important; } td[class^='td'][width="125"] { width: 0; } .hide { background-position: center; background-repeat: no-repeat; background-size: auto; } .borderRBL { border-style: solid; border-color: #FFFFFF; border-width: 2px 0 !important; } .borderRBL small { visibility: visible !important; } /* Custom cursor */ body { cursor:url(http://i60.tinypic.com/vzcxo9.png) 1 2, auto; } a:hover { cursor: url(http://i60.tinypic.com/vzcxo9.png) 1 2, auto; } /* Custom cursor */ a { text-decoration: none; } body { font-family: 'Philosopher'; font-size: 13px; color: #7f7e7e; letter-spacing: .5px; background-color: transparent; } /* LIST SETTINGS */ #list_surround { position: relative; left: 100%; margin-left: -960px; top: 0; width: 650px; padding-top: 200px; } .table_header span { display: none; } .table_header:nth-child(2) { text-align: left; } .td1, .td2 { padding: 6px 0 3px; line-height: 13px; vertical-align: top; transition: background-color .4s ease; -webkit-transition: background-color .4s ease; } .animetitle, .animetitle + small { display:-cell; } .animetitle span { display: inline-block; } .animetitle + small:before { content: ' '; white-space: pre-wrap; } .animetitle + small { visibility: visible !important; color: #f2a603; font-size: 11px; text-transform: lowercase; letter-spacing: .5px; } #list_surround small { visibility: hidden; } #list_surround small a:last-of-type:before { position: absolute; display: inline-block !important; content: '...'; margin-left: -8px; font-family: Arial; line-height: 7px; font-size: 18px; font-weight: bold; letter-spacing: .5px; color: #7f7e7e; } #list_surround small a:first-of-type { position: relative; left: 44px; padding: 10px; font-size: 0; background-image: url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Lineage/Images/small.png); background-repeat: no-repeat; background-position: 0 -1px; } #list_surround small a[href*="edit"] { background-position: 0 -22px; } #list_surround tr:hover small a:first-of-type, #list_surround tr:hover small a:last-of-type:before { visibility: visible; } td[class^='td']:nth-child(2) { text-align: left; } td[class^='td'][width="45"] { background-image: url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Lineage/Images/circle.png); background-repeat: no-repeat; background-position: 11px 2px; } /* LIST COLOR */ .table_header, .td1, .td2 { text-align: center; background-color: rgba(255, 255, 255, .75); } tr:hover td[class^='td']:not(.borderRBL) { background-color: rgba(255, 255 , 255, 1); } /* LIST FONT COLOR */ a { color: #7f7e7e; } .table_headerLink { line-height: 24px; font-size: 10px; color: #f2a603 !important; font-weight: normal; text-transform: uppercase; } .table_headerLink strong { font-weight: normal !important; } td[class^='td'][width="45"], td[class^='td'][width="45"] a { color: #FFFFFF; } /* BORDER COLORS */ td[class^='td']:first-child { border-left: 2px solid #FFFFFF !important; box-shadow: -1px 0 0 #7f7e7e; } td[class^='td']:last-child { border-right: 2px solid #FFFFFF !important; box-shadow: 1px 0 0 #7f7e7e; } .table_header { border-style: solid; border-color: #FFFFFF; border-width: 2px 0; background-color: rgb(255, 255, 255); box-shadow: 0 1px 0 #000000, 0 -1px 0 #7f7e7e; } .table_header:first-child { border-left: 2px solid white !important; box-shadow: 0 -1px 0 #7f7e7e, 0 1px 0 #000000, -1px 0 0 #7f7e7e; } .table_header:nth-child(5) { border-right: 2px solid white !important; box-shadow: 0 -1px 0 #7f7e7e, 1px 0 0 #7f7e7e, 0 1px 0 #000000; border-radius: 0 16px 0 0; } /* HEADERS */ .header_title { pointer-events: none; display: inline-block; height: 100px; } /* Headers pics*/ .header_cw span, .header_completed span, .header_onhold span, .header_dropped span, .header_ptw span { position: absolute; display: inline-block; width: 650px; height: 131px; font-size: 0; background-image: url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Lineage/Images/headers_bg.png); background-repeat: no-repeat; z-index: 1; } .header_cw span { background-position: center 0; } .header_completed span { background-position: center -131px; } .header_onhold span { background-position: center -262px; } .header_dropped span { background-position: center -393px; } .header_ptw span { background-position: center -524px; } /* CURRENTLY WATCHING RENDER AND BACKGROUND */ .status_selected:first-child { background-image: url(http://i60.tinypic.com/2eykfg1.png), url(http://i59.tinypic.com/amz1tx.jpg); background-position: left bottom, left top; } /* COMPLETED RENDER AND BACKGROUND */ .status_selected:nth-child(2) { background-image: url(http://i59.tinypic.com/elcoy1.png), url(http://i58.tinypic.com/2gvkgp2.jpg); background-position: left bottom, left top; } /* ON-HOLD RENDER AND BACKGROUND */ .status_selected:nth-child(3) { background-image: url(http://i59.tinypic.com/344p4zc.png), url(http://i60.tinypic.com/294nl8w.jpg); background-position: left bottom, left top; } /* DROPPED RENDER AND BACKGROUND */ .status_selected:nth-child(4) { background-image: url(http://i58.tinypic.com/35aombq.png), url(http://i62.tinypic.com/123kvnp.jpg); background-position: left bottom, left top; } /* PLANNED RENDER AND BACKGROUND */ .status_selected:nth-child(5) { background-image: url(http://i61.tinypic.com/20k3rep.png), url(http://i57.tinypic.com/2rh1fcy.jpg); background-position: left bottom, left top; } /* ALL RENDER AND BACKGROUND */ .status_selected:last-child { background-image: url(none), url(http://i61.tinypic.com/29uoxmh.jpg); background-position: left bottom, left top; } .category_totals { padding: 3px 3px 9px 3px; text-align: center; font-size: 11px; color: #FFFFFF; border: 2px solid #FFFFFF; background-color: rgb(242, 166, 3); box-shadow: 1px 0 0 #7f7e7e, 0 1px 0 #7f7e7e, -1px 0 0 #7f7e7e; border-radius: 0 0 16px 16px; } #grand_totals:before { diplay: inline-block; content: '< '; } #grand_totals:after { diplay: inline-block; content: ' >'; } #grand_totals { position: absolute; display: block; margin-top: -28px; width: calc(100% - 24px); padding: 0 10px 10px; text-align: center; font-size: 11px; color: #FFFFFF; border-color: #FFFFFF; border-style: solid; border-width: 0 2px; background-color: rgb(242, 166, 3); box-shadow: 1px 0 0 #7f7e7e, 0 1px 0 #7f7e7e, -1px 0 0 #7f7e7e; border-radius: 0 0 12px 12px; } #copyright:before { diplay: block; content: "Design by SylakentH_"; font-size: 12px; } #copyright:after { diplay: block; content: "Edited by LastChapter."; font-size: 12px; } #copyright { position: relative; display: block; margin-top: -10px !important; padding: 2px 0 4px; font-size: 12px; color: #FFFFFF; border: solid 4px #da6358; background-color: rgb(160, 55, 60); border-radius: 16px; } #copyright a { padding-right: 2px; font-size: 14px; color: #FFFFFF; text-shadow: 1px 1px #f11c26; } /* Put your text here */ #:before { position: fixed; display: block; content: "From now on, you belong to me, as my prisoner of war! - Ellen Viltaria (Madan No Ou To Vanadis)"; right: 0; top: 0; padding-right: 4px; font-family: 'SAO'; line-height: 24px; color: #FFFFFF; font-size: 18px; letter-spacing: 1px; text-shadow: 1px 1px #000000; } @-moz-document url-prefix() { #list_surround small a:last-of-type:before { line-height: 6px; } .td1, .td2 { line-height: 14px; padding: 4px 0; } } /*Covers*/ :hover + .hide { position: fixed !important; display: block !important; left: 730px; top: 120px; width: 193px; height: 316px; background-repeat: no-repeat !important; background-size: 193px 312px !important; } :hover + .hide:after { position: fixed; display: block; content: ''; left: 730px; top: 120px; width: 193px; height: 316px; background-image: url('https://dl.dropboxusercontent.com/u/113316285/hxh/all.png'); background-size: 193px 316px; } .hide:before { background: none repeat scroll 0 0 transparent; border-radius: 15px 15px 15px 15px; color: white; content: ""; padding-bottom: 5px; position: absolute; text-align: center; top: 10px; width: 262px; } } |
 β½ Light Novel Database β½ Enchanted Pixels β½ Light Novels Alliance Discord β½ Light Novels Alliance β½ |
Nov 28, 2014 10:04 AM
#147
| I found this list theme in my file don't remember why i made it. screenshot: http://i.imgur.com/qS49O6I.png code: @import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro"); @import url("http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/CSS/TopMenu/TopMenu.css"); @import url("http://dl.dropbox.com/u/78340470/Past%20Stuff/bottommenuimportblue.css"); Body { background-image: url("http://i.imgur.com/IRNKztF.png"); background-position: 200px 10px ! important; background-repeat: no-repeat; font-family: Source Sans Pro; padding-top: 11px; } #list_surround { left: 0px ! important; margin: auto ! important; padding-top: 532px; position: absolute ! important; right: 0px ! important; width: 700px; } #list_surround table:first-of-type td:nth-of-type(1), table:first-of-type td:nth-of-type(2), table:first-of-type td:nth-of-type(3), table:first-of-type td:nth-of-type(4), table:first-of-type td:nth-of-type(5), table:first-of-type td:nth-of-type(6) { background: #daedfb; border-radius: 11px; font-weight: lighter; text-transform: lowercase; text-shadow: 2px 3px 3px #F2FD01;} a { color: #686868; text-decoration: none; } a:visited { color: #686868; text-decoration: none; } .header_title { background-color: #daedfb; border-radius: 25px; color: #686868; font-size: 11px; height: 26px; padding-top: 15px; text-align: center; text-transform: lowercase; } .table_header { -moz-text-decoration-line: overline; font-size: 14px; font-weight: lighter; padding: 2px; text-shadow: 2px 2px 6px #F2FD01; text-transform: capitalize; } .List_LightBox { visibility: hidden; } .grand_totals { visibility: hidden ! important; } tr:hover [class^="td"] { background-color: white! important; font-style: italic; transition: all 0.4s ease 0s; } .category_totals { color: #686868; font-size: 11px; text-align: center; text-transform: lowercase; } #copyright { font-size: 10px; margin: auto ! important; text-align: center; text-transform: lowercase; } #copyright:after{ content:"Theme By thekittennx3"; } #grand_totals { visibility: hidden; } |
Dec 11, 2014 4:50 PM
#148
| About this one, I'll only say this, "Merry Christmas!" @import "https://dl.dropboxusercontent.com/u/78340470/Icon%20Style%20Menu%20Bar/pinkversion/pinkiconbar.css"; @import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css"; /* MAIN BACKGROUND The space background by default. */ body { background-attachment:fixed; background-clip:border-box; background-color: black; background-image: url(http://paulabrown.net/anime-christmas-tree-22.jpg); background-position:0 50%, 0 0; background-repeat:no-repeat no-repeat; background-size:cover; font-family:calibri; } /* SECONDARY BACKGROUND 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() no-repeat scroll right bottom transparent; background-size: ; 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; } /* LIST BACKGROUND COLOR, ROW HEIGHT AND FLASH Adjust the opacity and color of the list table itself with the first two sets of code, as well as the height of the rows. td1 is odd numbered rows, td2 is even. The third set of code is for the row color and opacity on height. Google RGBA color generator for easy to copy color and opacity numbers customized for you. */ .td1 { background-color:rgba(0, 0, 0, 0.5); height:65px; } .td2 { background-color:rgba(0, 0, 0, 0.5); height:65px; } tr:hover [class^="td"] { transition: .1s linear; background-color: rgba(208, 32, 144, 0.6); } /* MAGICA LOGO Background-image is the Magica logo at page top. You can move it with background position. */ #list_surround { background-attachment:scroll; background-color:transparent; background-image: url(http://i1364.photobucket.com/albums/r730/kanako78/HappyHolidays_zps1451fed8.png); background-position: -50px -40px; background-repeat:no-repeat no-repeat; font-size:100%; line-height:1; margin:0 auto; padding-bottom:10px; padding-top:320px; position:absolute; right:-4px !important; width:700px; } /* SIDE BUTTONS */ #list_surround .status_selected, #list_surround .status_not_selected { -webkit-background-clip:padding-box !important; background-clip:padding-box !important; background-color:transparent; background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/WatchingMikoto_zps4f1325ba.png); background-position:0 0; background-repeat:no-repeat no-repeat; background-size:contain; border:1px solid transparent; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; display:block; left:-300px; padding:0; position:absolute; top:20px; width:263px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/CompletedHaruhi_zps63a6de2f.png); background-position:100% 0; top:140px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/OnHoldFSN_zps38e23b51.png); background-position:0 0; top:260px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/Dropped11eyes_zpsc14e79c4.png); background-position:100% 0; top:380px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/PlantoWatchSugar_zps30676dac.png); background-position:0 0; top:500px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/AllAnimeFMA_zps2002d52e.png); background-position:100% 0; top:620px; } /* CUSTOM HEADERS */ .header_cw { background-color: transparent; background-image: url("http://i1364.photobucket.com/albums/r730/kanako78/WatchingCandyCane_zps45a5ef4a.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } .header_completed { background-color: transparent; background-image: url("http://i1364.photobucket.com/albums/r730/kanako78/CompletedCandyCane_zpse327b72b.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } .header_onhold { background-color: transparent; background-image: url("http://i1364.photobucket.com/albums/r730/kanako78/OnHoldCandyCane_zpsd9ac3a4b.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } .header_dropped { background-color: transparent; background-image: url("http://i1364.photobucket.com/albums/r730/kanako78/DroppedCandyCane_zps7d01b1ad.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } .header_ptw { background-color: transparent; background-image: url("http://i1364.photobucket.com/albums/r730/kanako78/PlantoWatchCandyCane_zps4af8747e.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } /* OTHER CODES Ask in the original topic for this layout of in my club if you need to learn more about customizing this layout. */ a { color:#FFFFFF; text-decoration:none; text-shadow:none; } a:hover { color:#fff; text-decoration:underline; } .table_header { background-color:rgba(255, 255, 255, 0.4); } .table_header:first-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:10px; border-top-right-radius:0; } .table_header:nth-of-type(2) { padding-left:35px; text-align:left; } .table_header:last-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:0; border-top-right-radius:10px; } .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border:0 none; padding:4px; text-align:center; vertical-align:top; } .table_header, .td1, .td2, .category_totals { color:white; } .borderRBL { line-height:normal !important; } [cellspacing="0"] { line-height:17px; } .category_totals { background-color:rgba(255, 255, 255, 0.4); border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:0; border-top-right-radius:0; color:white; text-align:center; } [class^="header_"] * { background-repeat:no-repeat no-repeat; font-size:0; height:200px; line-height:24px; padding-bottom:4px; text-align:right; vertical-align:bottom; } .header_title { border-bottom-left-radius:4px; border-bottom-right-radius:4px; border-top-left-radius:4px; border-top-right-radius:4px; color:#FFFFFF; display:inline-block; font-style:italic; height:auto; padding:0 8px 0 0; text-shadow:rgba(0, 0, 0, 0.14902) 0 1px 1px; } #grand_totals { background-color:transparent; border:0 none; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; color:#FFFFFF; line-height:20px; min-height:20px; padding:8px; text-align:center; vertical-align:middle; } #copyright { background-color:rgba(180, 32, 48, 0.6); border-bottom-left-radius:3px; border-bottom-right-radius:3px; border-top-left-radius:3px; border-top-right-radius:3px; color:#EEEEEE; line-height:17px; margin-top:10px; padding:8px; text-align:center; } #copyright::after { } .hide { background-color:rgba(248, 162, 200, 0.701961); background-position:50% 50%; background-repeat:no-repeat no-repeat; background-size:cover; border:1px solid #FFFFFF; border-bottom-left-radius:7px; border-bottom-right-radius:7px; border-top-left-radius:7px; border-top-right-radius:7px; display:inline-block !important; height:55px; margin-left:33px; margin-top:-65px; position:absolute; width:35px; } .hide:hover { background-color:transparent; background-repeat:no-repeat no-repeat; background-size:cover; border-bottom-left-radius:20px; border-bottom-right-radius:20px; border-top-left-radius:20px; border-top-right-radius:20px; box-shadow:rgba(63, 52, 60, 0.54902) 0 0 8px 8px; margin-left:-115px; padding-right:150px; padding-top:220px !important; position:absolute; z-index:1; } .td1:nth-of-type(2), .td2:nth-of-type(2) { padding-left:35px; text-align:left; } .td1:nth-of-type(6), .td2:nth-of-type(6) { background-attachment:scroll; background-color:transparent; background-image:none; background-position:0 0; background-repeat:repeat repeat; border-bottom-style:none !important; border-bottom-width:medium !important; display:inline-block; font-family:cursive; font-size:9pt; height:0 !important; left:70px; line-height:16px !important; margin-top:16px; position:absolute; text-align:justify !important; width:720px; z-index:2; } .table_header:nth-of-type(6) { display:none; } span[id*="tagRow"] { display:block !important; } span[id*="tagLinks"] { display:none !important; } a, .td1, .td2, .category_totals { -webkit-transition:all 0.25s ease-in-out 0s; transition:all 0.25s ease-in-out 0s; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color:transparent; display:block; font-size:0; height:113px; width:263px; } .status_selected { display:block; } .status_not_selected { display:block; } .status_not_selected { opacity:0.7; } .status_not_selected:hover { color:transparent; opacity:1; } #list_surround { left:0 !important; margin:auto !important; position:absolute !important; right:0 !important; } .animetitle { font-weight: bold;} .animetitle + small { color:#CC33FF !important; font-weight:bold; } * { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out;} .table_header:nth-last-of-type(2) { border-radius: 0 10px 0 0;} .td1:nth-of-type(6), .td2:nth-of-type(6){ background-color: transparent !important; font-family: helvetica;} td:nth-of-type(6) small { font-size: 0; color: cyan; left: 42px; position: relative; } td:nth-of-type(6) small:after { font-size: 12px !important; content: "Tags" } /* Media query for devices above 1000px */ @media all and (min-device-width:1001px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -270px;} #list_surround { left: 24% !important;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 7pt !important; width: 370px !important; padding-top: 8px;} } /* Media query for devices above 1024px */ @media all and (min-device-width:1025px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -300px;} #list_surround { left: 17% !important;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 7pt !important; width: 370px !important;} } /* Media query for devices above 1140px */ @media all and (min-device-width:1141px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -290px;} #list_surround { left: 17% !important; width: 850px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 530px !important;} } /* Media query for devices above 1280px */ @media all and (min-device-width:1281px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -330px;} #list_surround { left: 18% !important; width: 900px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 575px !important;} } /* Media query for devices above 1440px */ @media all and (min-device-width:1441px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -385px;} #list_surround { left: 17% !important; width: 960px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 635px !important;} #list_surround { background-position: center -40px;} } /* Media query for devices above 1680px */ @media all and (min-device-width:1681px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -430px;} #list_surround { left: 16% !important; width: 1050px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 720px !important;} } /* Media query for devices above 1920px */ @media all and (min-device-width:1921px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -530px;} #list_surround { left: 10% !important; width: 1100px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 770px !important;} } |
Dec 13, 2014 3:01 PM
#149
| Minimalist Kenshin samurai layout - Preview Code @import url(http://fonts.googleapis.com/css?family=Roboto+Condensed); @import url(http://pastebin.com/raw.php?i=QKaKmNrn); /* body */ body { background-color: #000000; background-image: url(http://i.imgur.com/MoKbpEd.jpg); background-attachment: fixed; background-position: right top; background-repeat: no-repeat; font-family: Roboto Condensed; font-size: 10px; letter-spacing: 1px; color: #ffffff; } /* list positioning */ #list_surround { position: left !important; padding-left: 20px !important; width: 600px; } /* // all links on your list */ a { color: #ffffff; text-decoration: none; transition: color 1s linear; } a:visited { color: #ffffff; text-decoration: none; } a:hover { color: #ffffff; text-decoration: none; } /* // row color */ .td1 { background-color: rgba(0, 0, 0, 0); padding: 6px; } .td2 { background-color: rgba(0, 0, 0, 0); padding: 6px; } /* // header */ .table_header { background-color: rgba(0, 0, 0, 0); padding: 6px; } /* // header links */ .table_headerLink { color: #ffffff; text-decoration: none; font-weight: bold; font-size: 12px; } .table_headerLink:Visited { color: #ffffff; text-decoration: none; font-weight: bold; font-size: 12px; } .table_headerLink:Hover { color: #ffffff; text-decoration: none; font-weight: bold; font-size: 12px; } /* headers: watching, completed, on-hold, dropped, plan to watch */ .header_title { font-size: 20px; color: #ffffff; font-family: GodOfWar; text-transform: uppercase; letter-spacing: 2px; padding-bottom:10px; } .category_totals { padding-top:10px; text-align: center; font-color: #ffffff; } #grand_totals { font-size: 12px; text-align: center; font-color: #ffffff; } /* top menu bar full customization (thanks to shishio-kun's tutorial) */ /* first part: "username, logout" */ #mal_cs_listinfo { } #mal_cs_listinfo a { color: #ffffff !important; text-decoration: none !important; font-size: 10px !important; font-family: Roboto Condensed !important; font-style: italic; letter-spacing: 1px; } #mal_cs_listinfo a strong { color: #ffffff !important; text-decoration: none !important; font-size: 10px !important; font-family: Roboto Condensed !important; font-style: italic; letter-spacing: 1px; } /* second part: "add to list, home, anime list, manga list" */ #mal_cs_links { } #mal_cs_links div:first-of-type a:first-of-type { color: #ffffff !important; text-decoration: none !important; font-size: 10px !important; font-family: Roboto Condensed !important; font-style: italic; letter-spacing: 1px; } #mal_cs_links div:first-of-type a:last-of-type { color: #ffffff !important; text-decoration: none !important; font-size: 10px !important; font-family: Roboto Condensed !important; font-style: italic; letter-spacing: 1px; } #mal_cs_links div:last-of-type a:first-of-type { color: #ffffff !important; text-decoration: none !important; font-size: 10px !important; font-family: Roboto Condensed !important; font-style: italic; letter-spacing: 1px; } #mal_cs_links div:last-of-type a:last-of-type { color: #ffffff !important; text-decoration: none !important; font-size: 10px !important; font-family: Roboto Condensed !important; font-style: italic; letter-spacing: 1px; } /* third part: "you are viewing your/username's list" */ #mal_cs_otherlinks { } #mal_cs_otherlinks strong { color: #ffffff !important; text-decoration: none !important; font-size: 10px !important; font-family: Roboto Condensed !important; letter-spacing: 1px; } #mal_cs_otherlinks a[href="http://myanimelist.net/history/Kiyori"] { color: #ffffff !important; text-decoration: none !important; font-size: 10px !important; font-family: Roboto Condensed !important; font-style: italic; letter-spacing: 1px; } #mal_cs_otherlinks a[href="http://myanimelist.net/forum/"] { color: #ffffff !important; text-decoration: none !important; font-size: 10px !important; font-family: Roboto Condensed !important; font-style: italic; letter-spacing: 1px; } #mal_cs_otherlinks a[href="http://myanimelist.net/panel.php?go=export"] { color: #ffffff !important; text-decoration: none !important; font-size: 10px !important; font-family: Roboto Condensed !important; font-style: italic; letter-spacing: 1px; } #mal_cs_otherlinks a[href="http://myanimelist.net/profile/Kiyori"] { color: #ffffff !important; text-decoration: none !important; font-size: 10px !important; font-family: Roboto Condensed !important; font-style: italic; letter-spacing: 1px; } #mal_cs_otherlinks a { color: #ffffff !important; text-decoration: none !important; font-size: 10px !important; font-family: Roboto Condensed !important; font-style: italic; letter-spacing: 1px; } #mal_cs_otherlinks div:last-of-type a:first-of-type { color: #ffffff !important; text-decoration: none !important; font-size: 10px !important; font-family: Roboto Condensed !important; font-style: italic; letter-spacing: 1px; } #mal_cs_otherlinks span { color: #ffffff !important; text-decoration: none !important; font-size: 10px !important; font-family: Roboto Condensed !important; font-style: italic; letter-spacing: 1px; } #mal_cs_otherlinks a[href="http://myanimelist.net/modules.php?go=faq"] { color: #ffffff !important; text-decoration: none !important; font-size: 10px !important; font-family: Roboto Condensed !important; font-style: italic; letter-spacing: 1px; } /* top menu bar full customization end */ /* do not remove this */ #copyright:before { content: "List style by blingbling@mal |"; } #copyright { padding-top: 6px; padding-bottom: 6px; text-align: center; } Mezamero horror layout - Preview Code @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; @import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css"; @import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css"; @import "http://fonts.googleapis.com/css?family=Advent+Pro"; * { text-decoration: none; } body { background-attachment: fixed; background-clip: border-box; background-color: transparent; background-image: url("http://i.imgur.com/kXXXb8t.jpg"); background-position: 24% 8%; background-repeat: no-repeat no-repeat; background-size: cover; font-family: advent; } #list_surround { background-attachment: fixed; background-position: 24% 0; background-repeat: no-repeat no-repeat; font-size: 15px; height: 25px; left: 15% !important; line-height: 1; margin: 0 auto; padding-bottom: 13px; padding-top: 133px; position: absolute; width: 700px; z-index: 0; } a { color: white; text-shadow: none; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color: #DA0000; font-weight: bold; transition: all 0.4s ease 0s; } a:hover { color: #DA0000; text-shadow: 0 1px rgba(255, 0, 0, 0.0); } .table_header { } .table_header:first-of-type { border-radius: 20px 0 0 0; } .table_header:nth-of-type(2) { text-align: left; } .table_header:nth-of-type(5) { border-bottom-right-radius: 0; border-top-left-radius: 0; border-top-right-radius: 20px; } .table_header, .category_totals { background-color: #000000; border: 0 none; opacity: 1; padding: 4px; text-align: center; vertical-align: top; } .td1, .td2 { background-image: url("http://i.imgur.com/F3fON31.jpg"); padding: 4px; } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } .table_header:nth-of-type(6) { display: none; width: 0; } small { color: #DA0000; font-weight: bold; } .table_header, .td1, .td2, .category_totals { color: grey; } .borderRBL { line-height: normal !important; } [cellspacing="0"] { line-height: 18px; } .category_totals { background-color: black; border-radius: 0 0 12px 12px; text-align: center; } .category_totals:hover { background-color: #DA0000; color: #ffffff; } [class^="header_"] * { background-repeat: no-repeat no-repeat; font-size: 0; height: 80px; line-height: 80px; padding-bottom: 0px; text-align: right; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; color: #DA0000; display: inline-block; font-style: italic; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } #grand_totals { background-color: #DA0000; 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 { opacity: 0.7; right: -183px !important; transition: all 0.4s ease 0s; } .status_not_selected:hover { color: transparent; opacity: 1; right: 3px !important; transition: all 0.4s ease 0s; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color: transparent; display: block; height: 100px; opacity: 0; width: 271px; } .status_selected { display: block; } .status_not_selected { display: block; } .header_cw { background-color: transparent; background-image: url("http://i.imgur.com/faCge42.png"); background-position: 0% 0; background-repeat: no-repeat no-repeat; height: 30px; } .header_completed { background-color: transparent; background-image: url("http://i.imgur.com/Esghy96.png"); background-position: 0% 0; background-repeat: no-repeat no-repeat; height: 30px; } .header_onhold { background-color: transparent; background-image: url("http://i.imgur.com/pREJO1j.png"); background-position: 0% 0; background-repeat: no-repeat no-repeat; height: 30px; } .header_dropped { background-color: transparent; background-image: url("http://i.imgur.com/mM7OrOw.png"); background-position: 0% 0; background-repeat: no-repeat no-repeat; height: 30px; } .header_ptw { background-color: transparent; background-image: url("http://i.imgur.com/UfhU1SG.png"); background-position: 0% 0; background-repeat: no-repeat no-repeat; height: 30px; } #list_surround .status_selected, #list_surround .status_not_selected { background-attachment: scroll; background-color: black; background-image: url("http://i.imgur.com/5n1vlop.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; border: 2px solid black !important; border-radius: 20px 0 0 0; display: block; height: 83px; padding: 0; position: fixed; right: 3px; top: 96px; width:300px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-attachment: scroll; background-color: black; background-image: url("http://i.imgur.com/D6605N8.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; border-top-left-radius: 0; border-top-right-radius: 0; top: 183px; width:300px; } #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-attachment: scroll; background-color: black; background-image: url("http://i.imgur.com/5eCvvUx.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; top: 270px; width:300px; } #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-attachment: scroll; background-color: black; background-image: url("http://i.imgur.com/B8h6Mno.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; top: 357px; width:300px; } #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-attachment: scroll; background-color: black; background-image: url("http://i.imgur.com/BUpwlUb.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; top: 444px; width: 300px; } #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-attachment: scroll; background-color: black; background-image: url("http://i.imgur.com/B4DgB2E.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 20px !important; top: 531px; } .td1:nth-of-type(6), .td2:nth-of-type(6) { background-color: #DA0000 !important; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; display: none; height: auto; left: 0; padding: 12px 17px 16px 23px; position: fixed; top: 462px; width: 184px; z-index: 1; I wouldn't call either finished. Both could be improved a little, e.g. the annoying brighter white text in the Kenshin one and the top bar in the Mezamero one. But hopefully someone will like these. Also, props to whoever made the original list layouts. The Mezamero one I tweaked from a Mushishi list design which was donated (called 50 Shades of Brown, I think) and the Kenshin one I tweaked from a Blue Exorcist list design. |
removed-userDec 17, 2014 10:52 AM
Dec 28, 2014 7:04 AM
#150
| This is a customization of magica girl with detective conan Preview: http://i1283.photobucket.com/albums/a544/kiotsuga/previewmal_zps2da8ab1a.png Enjoy Code: */ /* MAIN BACKGROUND The space background by default. */ body { background-attachment:fixed; background-clip:border-box; background-color: black; background-image: url(http://i1283.photobucket.com/albums/a544/kiotsuga/goputin_zps2ef0aa4a.jpg); background-position:0 0%, 0 0; background-repeat:no-repeat no-repeat; background-size:cover; font-family:calibri } /* SECONDARY BACKGROUND 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() no-repeat scroll right bottom transparent; background-size: ; 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; } /* LIST BACKGROUND COLOR, ROW HEIGHT AND FLASH Adjust the opacity and color of the list itself with the first two sets of code, as well as the height of the rows. td1 is odd numbered rows, td2 is even. The third set of code is for the row color and opacity on height. Google RGBA color generator for easy to copy color and opacity numbers customized for you. */ .td1 { background-color:rgba(0, 0, 0, 0.5); height:65px; } .td2 { background-color:rgba(0, 0, 0, 0.5); height:65px; } tr:hover [class^="td"] { transition: .1s linear; background-color: rgba(208, 32, 144, 0.6); } /* MAGICA LOGO Background-image is the Magica logo at page top. You can move it with background position. */ #list_surround { background-attachment:scroll; background-color:transparent; background-image: url(http://i1283.photobucket.com/albums/a544/kiotsuga/bbb_zpsfc3578ab.png); background-position: 120px 0px; background-repeat:no-repeat no-repeat; font-size:100%; line-height:1; margin:0 auto; padding-bottom:10px; padding-top:320px; position:absolute; right:-4px !important; width:700px; } /* SIDE BUTTONS */ #list_surround .status_selected, #list_surround .status_not_selected { -webkit-background-clip:padding-box !important; background-clip:padding-box !important; background-color:transparent; background-image:url(http://i1283.photobucket.com/albums/a544/kiotsuga/image1_zps7dd2c1fa.png); background-position:0 0; background-repeat:no-repeat no-repeat; background-size:contain; border:1px solid transparent; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; display:block; left:-300px; padding:0; position:absolute; top:20px; width:263px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-image:url(http://i1283.photobucket.com/albums/a544/kiotsuga/secondcompleted_zps5cc0bb5a.png); background-position:100% 0; top:140px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1283.photobucket.com/albums/a544/kiotsuga/troisiemecomplete_zps47690fc1.png); background-position:0 0; top:260px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1283.photobucket.com/albums/a544/kiotsuga/4emefini_zpsba161405.png); background-position:100% 0; top:380px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1283.photobucket.com/albums/a544/kiotsuga/5emefini_zpscf3aa82e.png); background-position:0 0; top:500px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1283.photobucket.com/albums/a544/kiotsuga/6emefini_zps2ad9d87e.png); background-position:100% 0; top:620px; } /* CUSTOM HEADERS */ .header_cw { background-color: transparent; background-image: url("http://i.imgur.com/mWK77Ng.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } .header_completed { background-color: transparent; background-image: url("http://i.imgur.com/wF8MQkE.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } .header_onhold { background-color: transparent; background-image: url("http://i.imgur.com/ZWprtND.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } .header_dropped { background-color: transparent; background-image: url("http://i.imgur.com/3ve4Yod.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } .header_ptw { background-color: transparent; background-image: url("http://i.imgur.com/zRGEVZy.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } /* TOP COLORS The colors for the top text (#, anime title, score, etc) and the panel iteself. */ .table_header { background-color: rgba(255, 225, 255, 0.4); } .table_header, .table_header a{ color: white; } /* LIST FONT COLOR */ .td1, .td2, .category_totals { color:white; } /* OTHER CODES Ask in the original topic for this layout of in my club if you need to learn more about customizing this layout. */ a { color:#FFFFFF; text-decoration:none; text-shadow:none; } a:hover { color:#fff; text-decoration:underline; } .table_header:first-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:10px; border-top-right-radius:0; } .table_header:nth-of-type(2) { padding-left:35px; text-align:left; } .table_header:last-of-type { border-bottom-left-radius: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; text-align:center; vertical-align:top; } .borderRBL { line-height:normal !important; } [cellspacing="0"] { line-height:17px; } .category_totals { background-color:rgba(255, 255, 255, 0.4); border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:0; border-top-right-radius:0; color:white; text-align:center; } [class^="header_"] * { background-repeat:no-repeat no-repeat; font-size:0; height:200px; line-height:24px; padding-bottom:4px; text-align:right; vertical-align:bottom; } .header_title { border-bottom-left-radius:4px; border-bottom-right-radius:4px; border-top-left-radius:4px; border-top-right-radius:4px; color:#FFFFFF; display:inline-block; font-style:italic; height:auto; padding:0 8px 0 0; text-shadow:rgba(0, 0, 0, 0.14902) 0 1px 1px; } #grand_totals { background-color:transparent; border:0 none; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; color:#FFFFFF; line-height:20px; min-height:20px; padding:8px; text-align:center; vertical-align:middle; } #copyright { background-color:rgba(180, 32, 48, 0.6); border-bottom-left-radius:3px; border-bottom-right-radius:3px; border-top-left-radius:3px; border-top-right-radius:3px; color:#EEEEEE; line-height:17px; margin-top:10px; padding:8px; text-align:center; } #copyright::after { } .hide { background-color:rgba(248, 162, 200, 0.701961); background-position:50% 50%; background-repeat:no-repeat no-repeat; background-size:cover; border:1px solid #FFFFFF; border-bottom-left-radius:7px; border-bottom-right-radius:7px; border-top-left-radius:7px; border-top-right-radius:0; display:inline-block !important; height:55px; margin-left:33px; margin-top:-65px; position:absolute; width:35px; } .hide:hover { background-color:transparent; background-repeat:no-repeat no-repeat; background-size:cover; border-bottom-left-radius:20px; border-bottom-right-radius:20px; border-top-left-radius:20px; border-top-right-radius:20px; box-shadow:rgba(63, 52, 60, 0.54902) 0 0 8px 8px; margin-left:-140px; padding-right:150px; padding-top:220px !important; position:absolute; z-index:1; } .hide:hover:after { background: transparent; content: " "; height: 75px; left: 0; position: absolute; top: 0; width: 210px; z-index: 20; } .td1:nth-of-type(2), .td2:nth-of-type(2) { padding-left:35px; text-align:left; } .td1:nth-of-type(6), .td2:nth-of-type(6) { background-attachment:scroll; background-color:transparent; background-image:none; background-position:0 0; background-repeat:repeat repeat; border-bottom-style:none !important; border-bottom-width:medium !important; display:inline-block; font-family:cursive; font-size:9pt; height:0 !important; left:70px; line-height:16px !important; margin-top:16px; position:absolute; text-align:justify !important; width:720px; z-index:2; } .table_header:nth-of-type(6) { display:none; } span[id*="tagRow"] { display:block !important; } span[id*="tagLinks"] { display:none !important; } a, .td1, .td2, .category_totals { -webkit-transition:all 0.25s ease-in-out 0s; transition:all 0.25s ease-in-out 0s; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color:transparent; display:block; font-size:0; height:113px; width:263px; } .status_selected { display:block; } .status_not_selected { display:block; } .status_not_selected { opacity:0.7; } .status_not_selected:hover { color:transparent; opacity:1; } #list_surround { left:0 !important; margin:auto !important; position:absolute !important; right:0 !important; } .animetitle { font-weight: bold;} .animetitle + small { color:#CC33FF !important; font-weight:bold; } * { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out;} .table_header:nth-last-of-type(2) { border-radius: 0 10px 0 0;} .td1:nth-of-type(6), .td2:nth-of-type(6){ background-color: transparent !important; font-family: helvetica;} td:nth-of-type(6) small { font-size: 0; color: cyan; left: 42px; position: relative; } td:nth-of-type(6) small:after { font-size: 12px !important; content: "Tags" } @media screen and (-webkit-min-device-pixel-ratio:0) { .td1:nth-of-type(2), .td2:nth-of-type(2){ width: 73% !important; } .animetitle { padding-left: 5px; } } /* Media query for devices above 1000px */ @media all and (min-device-width:1001px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -270px;} #list_surround { left: 24% !important;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 7pt !important; width: 370px !important; padding-top: 8px;} } /* Media query for devices above 1024px */ @media all and (min-device-width:1025px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -300px;} #list_surround { left: 17% !important;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 7pt !important; width: 370px !important;} } /* Media query for devices above 1140px */ @media all and (min-device-width:1141px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -290px;} #list_surround { left: 17% !important; width: 850px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 530px !important;} } /* Media query for devices above 1280px */ @media all and (min-device-width:1281px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -330px;} #list_surround { left: 18% !important; width: 900px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 575px !important;} } /* Media query for devices above 1440px */ @media all and (min-device-width:1441px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -385px;} #list_surround { left: 17% !important; width: 960px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 635px !important;} #list_surround { background-position: center -40px;} } /* Media query for devices above 1680px */ @media all and (min-device-width:1681px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -430px;} #list_surround { left: 16% !important; width: 1050px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 720px !important;} } /* Media query for devices above 1920px */ @media all and (min-device-width:1921px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -530px;} #list_surround { left: 10% !important; width: 1100px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 770px !important;} } |
  |
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!! |
| |
More topics from this board
» [CSS - Modern] π° Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1262 |
by Shishio-kun
»»
Today, 4:35 AM |
|
» [CSS - MODERN] β‘οΈ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
382 |
by Shishio-kun
»»
Today, 4:29 AM |
|
Sticky: » [ BBCODE ] All 2023 BBcodes, Guides, and Templates ( 1 2 )Shishio-kun - Feb 16, 2023 |
57 |
by Shishio-kun
»»
Today, 4:27 AM |
|
Sticky: » [ SIGNATURES ~ PROFILES] All guides, generators, and templatesShishio-kun - Feb 16, 2023 |
31 |
by Shishio-kun
»»
Today, 4:14 AM |
|
» β Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )Shishio-kun - Apr 15, 2010 |
7921 |
by takkun_
»»
Sep 19, 9:54 PM |