New
Jan 24, 2012 12:01 AM
#1
Requesting closed I no longer want to moderate this topic, and not moderating it causes problems too, so its been closed and locked. It won't be deleted so you can get still view old layouts posted here. As an alternative to this topic you can use this new topic and hopefully someone will act on one of your suggestions or requests. Designers can make layouts from the suggestions posted in that topic too. |
Shishio-kunNov 12, 2014 1:55 PM
Feb 3, 2012 2:10 AM
#2
Request complete for BigBoss0327 BigBoss0327 said: Can a request a Sora no Otoshimono list? I'm don't really care about specifics but if it has Nymph or Astrea that would be awesome~ (It doesn't need to be really complex or anything... So yeah..) If anyone decides to do this one, Thanks! I made a quick one by just swapping some images on some old code. Hope you wern't expecting much from me, maybe if i watched the anime i could make a better one. thelist: thecode: body { background-attachment: fixed; background-color: LightBlue; background-image: url("http://i42.tinypic.com/2lkfvr6.png"), url("http://i40.tinypic.com/28meohx.png"), url("http://i40.tinypic.com/neyhjd.png"); background-position: left bottom, left bottom, right top; background-repeat: no-repeat, repeat-x, no-repeat; } #inlineContent { background-image: url("http://i42.tinypic.com/213lksl.png"); bottom: 0; display: inline !important; height: 90px; margin-bottom: 0; position: fixed; width: 100%; } .table_header { background-color: Thistle; border-width: 0; font-weight: 700; padding: 6px; } .animetitle, .animetitle:visited { color: BlueViolet; font-family: Verdana,Arial; font-size: 18px; } .td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright { color: -moz-visitedhyperlinktext; font-family: Verdana; } #list_surround { margin: auto; width: 900px; } .status_not_selected, .status_selected { border-radius: 2px 2px 2px 2px; cursor: pointer; height: 30px; line-height: 17px; margin: 0 15px; outline: 0 none; padding: 0 8px; width: auto !important; } tr:hover [class^="td"] { background-color: PaleVioletRed; } .category_totals, .td1, .td2, #grand_totals, #copyright { border-width: 0; padding: 2px; } .status_selected { background-color: Plum; color: Wheat; padding: 8px; text-decoration: none; } .status_not_selected { background-color: Thistle; color: brown; padding: 2px; } .category_totals { height: 30px; } #copyright, #grand_totals { margin: 0 auto; padding: 40px 0 64px; text-align: center; } .td1, .td2 { border-color: Salmon; border-style: solid; border-width: 0 0 1px !important; padding: 7px; } a, a:visited { text-decoration: none; } .header_title { display: none; } .status_selected a, .status_not_selected a { color: BlueViolet; } [align="center"] { text-align: center; } |
Shishio-kunNov 30, 2012 3:16 PM
Aug 28, 2012 2:26 PM
#3
Request complete for Araragi-kyun Araragi-Kyun said: Can i request a list ? I want for anime list this http://myanimelist.net/forum/?topicid=412787 but with the background of ayanami rei (http://img848.imageshack.us/img848/160/sfave7nbc0c9.jpg) Thanks Thats such an easy request! Here it is, a nice alternative to default Futuristic layout: @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; /* MAIN BACKGROUND COLOR AND IMAGE By default, there's no image in this part of the code. Its just a background color- silver. (the default image of Black Rock Shooter is in the next code #inlineContent) Change the color to what you want or add an image for a backdrop here. For more info or questions on this code: http://myanimelist.net/forum/?topicid=412787 */ body { background: url("http://img848.imageshack.us/img848/160/sfave7nbc0c9.jpg"); background-size: cover; background-attachment: fixed !important; } /* SECOND BACKGROUND (with render) The background behind the list but in front of the main background. By default, for its own image it has the render of Black Rock Shooter (girl). You can change her with another render or even background image here! Make sure you leave the width as large as the image's width. The positioning of the background can be controlled with the % numbers after the background url, but you may need to exapnd the width for more positioning options. All the other codes should be left alone. */ #inlineContent { display: inline-block !important; height: 1200px !important; left: 0px !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 1200px !important; z-index: -1 !important; } /* TITLE The List header which by default says My Anime List can be changed out here. */ #list_surround { background: url("http://i44.tinypic.com/15s9esp.jpg") no-repeat scroll 50% 1px transparent; font-size: 81.25%; line-height: 1; margin: 0 auto; padding-bottom: 10px; padding-top: 227px; width: 920px; } /* FONT Font used across the whole list. */ body { font-family: arial; } /* LINK COLOR */ a { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; color: #EEEEEE; text-decoration: none; text-shadow: none; } a:hover { color: #3F1786; text-shadow: 0 1px rgba(255, 255, 255, 0.15); } /* CATEGORY LINKS */ .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: rgba(64, 60, 90, 0.6); border-color: rgba(48, 44, 64, 0.5); border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #FFFFFF; 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.6); border-color: rgba(164, 16, 32, 0.5); } .status_not_selected a:hover { background-color: #403C5A; border-color: #201C3A; 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: #B42030; border-color: rgba(148, 0, 24, 0.5); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.3); } /* TABLE HEADER */ .table_header { background-color: rgba(65, 35, 95, 0.6); } .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; } /* TABLE ROWS COLOR */ .td1 { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(136, 147, 169, 0.6); } .td2 { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(151, 164, 183, 0.6); } /* TABLE ROWS HOVER */ tr:hover [class^="td"] { background-color: rgba(72, 64, 87, 0.6); } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } /* ROW FONT SIZE TRANSITION (FIREFOX ONLY) */ noindex:-moz-any-link, tr:hover td.td1, tr:hover td.td2 { font-size: 15px; } /* LIST SETTINGS */ .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: 30px; } .borderRBL{ line-height: normal !important; } [cellspacing="0"] { line-height: 17px; } table[class^="header_"] + table{ border-collapse: separate !important; } /* CATEGORY TOTALS */ .category_totals { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-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(72, 64, 87, 0.6); color: #EEEEEE; } /* HEADER TEXT AND DIMENSIONS */ [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; display: inline-block; font-style: italic; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.15); } /* BOTTOM OF LIST */ #grand_totals { background-color: rgba(72, 64, 87, 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: rgba(180, 32, 48, 0.6); border-radius: 3px 3px 3px 3px; color: #EEEEEE; line-height: 17px; margin-top: 10px; padding: 8px; text-align: center; } #copyright:after { content: " CSS by Kyouhansha. Edits by Shishio-kun and Veriti. Google 'Shishio's Custom Lists' for more designs and info."; } |
Shishio-kunJan 22, 2013 11:04 PM
Aug 29, 2012 8:58 AM
#4
Request complete for KuroiHT Maybe this topic should be linked in the club information? Many people don't look on the 2nd page in the forum (including me ^^°) I thought this topic had been deleted or something like that. xD kuroiHT said: Can I request some two lists design for me?;) For anime list I want this image: http://www.zerochan.net/full/621760 and for manga list that one: http://s644.photobucket.com/albums/uu169/Kuroi-no-Yamome/?action=view¤t=533965.jpg I'm don't care about other specifics, so you can use your imagination ^^ If anyone accept this request I would be really grateful :) Anyway, I'm done. ^^ The animelist is a variation of the channel layout with new images and without header. The mangalist has a rather simple design without images (but still I think it looks better then the animelist). Code @import url(http://veriti.opendrive.com/files/OV81MjgxODdfcXZZMkg/mal_top_bar.css); body { background:url(http://image-upload.de/image/EoIA9U/04b4f09907.jpg); background-attachment: fixed; background-repeat: no-repeat; background-size:100%; } /* BANNER This controls the image at the top that by default says "Anime List". You can replace the background image link in parenthesis with your own banner image you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ #list_surround .header_title { background:url() no-repeat scroll 0 0 transparent; height:0px; left:-0px; padding:0px; position:absolute; top:-0px; width:650px; } .td1{ background-image:url(http://image-upload.de/image/ma8ON9/dc797a8e8b.png); padding-top: 6px; padding-bottom: 6px; font-family:calibri; } .td2{ background-image:url(http://image-upload.de/image/ma8ON9/dc797a8e8b.png); padding-top: 6px; padding-bottom: 6px; font-family:calibri; } a { color: #96877F; text-decoration: none; font-family:calibri; } .table_header { background-image:url(http://image-upload.de/image/ma8ON9/dc797a8e8b.png); font-size: 16.00px; text-align: center; vertical-align:center; padding-top: 5px; padding-bottom: 5px; color: #96877F; font-weight:bold; font-family:calibri; } .table_headerLink { color: #96877F; font-weight:bold; font-size:14px; text-decoration:none ; font-family:calibri; } /* LEFT SIDE BUTTONS These codes control the buttons on the left side. You can replace these images as well for your own custom buttons! The first controls the Currently Watching panel, followed by Completed, On Hold, Dropped, Planned, and then All. */ #list_surround .status_selected, #list_surround .status_not_selected { background:url(http://image-upload.de/image/R6x9pX/2efa726269.png) repeat scroll 0 0 transparent; display:block; height:60px; left:-300px; padding:0; position:absolute; top:0px; width:273px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background:url(http://image-upload.de/image/PX5L60/ff5a7baa0c.png) repeat scroll 0 0 transparent; top:70px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://image-upload.de/image/JDRpDq/00f2b31d55.png) repeat scroll 0 0 transparent; top:140px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://image-upload.de/image/vz9GLr/df71b2c0c1.png) repeat scroll 0 0 transparent; top:210px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://image-upload.de/image/tvm7Kq/c4bf7acd6d.png) repeat scroll 0 0 transparent; display:inline; top:280px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://image-upload.de/image/uL3gHA/8885243de5.png) no-repeat scroll 0 0 transparent; display:inline; padding-bottom:30px; top:350px; } /* HEADERS */ #list_surround .header_cw { background:url(http://image-upload.de/image/nNm3Uy/35f6622c40.png) no-repeat scroll 0 0 transparent; width:700px; height:100px; } #list_surround .header_completed { background:url(http://image-upload.de/image/O2uelG/1ded08d5ca.png) no-repeat scroll 0 0 transparent; width:700px; height:100px; } #list_surround .header_onhold { background:url(http://image-upload.de/image/QSh2PM/30bed5b101.png) no-repeat scroll 0 0 transparent; width:700px; height:100px; } #list_surround .header_ptw { background:url(http://image-upload.de/image/I1GfR0/b16b99e389.png) no-repeat scroll 0 0 transparent; width:700px; height:100px; } #list_surround .header_dropped { background:url(http://image-upload.de/image/DUX0Ak/6dee73ffc5.png) no-repeat scroll 0 0 transparent; width:700px; height:100px; } /* OTHER CODES */ a:hover { text-decoration:underline; } #list_surround { background:url(); height:100%; left:141px; margin:50px auto 30px; position:relative; width:700px; } #list_surround .status_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround .status_not_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround br { display:none; } #list_surround .header_title span { color:#000000; font-size:11px; } #list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped { margin-left:-1px; padding:28px 5px 5px; width:700px; } #list_surround .animetitle + small { color:#F3C79A; font-family:calibri; } #list_surround .category_totals { padding-top:3px; padding-bottom:3px; text-align:center; background-image:url(http://image-upload.de/image/OSsFZp/a1600fbe22.png); border-top:1px; border-style:solid; border-color:#808080; font-family:calibri; } #list_surround #grand_totals { display:none; } #mal_cs_listinfo a strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal; font-weight: normal; text-decoration: underline; text-transform: none;} #mal_cs_otherlinks strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal;} .borderRBL { color: cyan !important; } #list_surround .header_title span { display:none; } #list_surround .status_not_selected a { opacity:0; } #list_surround .status_selected a { opacity:0; } #copyright { background:url(http://image-upload.de/image/ma8ON9/dc797a8e8b.png) repeat 0 0; color:#181818; height:15px; margin-left:-349px; padding-top:5px; position:fixed; bottom:0; width:1000px; font-family: sans-serif; font-size: 10px; } #copyright:before { color: #000000; Content: " Design by Lirina"; text-allign: left; padding-right: 10px; font-family: times new roman; font-size:12px; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { margin-left:-209px; } } Code: @import url(http://veriti.opendrive.com/files/OV81MjgxODdfcXZZMkg/mal_top_bar.css); /* BACKGROUND IMAGE */ body { background-image: url(http://i644.photobucket.com/albums/uu169/Kuroi-no-Yamome/533965.jpg); background-size: cover; background-attachment: fixed; } /* HEADER COLOR AND FONT These codes control the main headers' fonts and colors. Every header is above each part of your list (they say things like Currently Watching, Completed, Dropped, etc). */ .header_title { background-color:; padding-left: 10px; color:#893D41; font-style:italic; font-family: century gothic; font-weight:bold; font-size:72px; } /* SUB-HEADERS BACKGROUND COLOR COLOR Below each main header is the sub-header which says Score, Episodes, Tags, etc. */ .table_header { background-image:url(http://i194.photobucket.com/albums/z222/HappyAd/Dark2.png); background-repeat:repeat; height:70px; } /* 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: Gill Sans; font-style: italic; font-size:18px; font-weight:bold; } /* 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:#CD8591; font-family:Calibri; } /* LIST WIDTH Use this to increase the width of your list! */ #list_surround { width:600px; } /* LIST POSITION Change "left" to "right" to switch the list side, or vice versa. */ #list_surround { top:70px; right: 20px; position: absolute;} /* REPOSITION MAIN BACKGROUND Change the position your background starts on your screen from with the two properties after "background-position" below. For example, the default code starts it from the left and top corner of the screen. You change 'right' and 'top' with two properties, they can be any of the following: left, top, bottom, right, or center. So if you want your background to start from the center of the screen, use "center center". If you want it to start from the top and left, use "top left". If you want it to start from the top and center, use "top center". If you want it to start from the right and top, use "right top" If you want it to start from the right and bottom, use "right bottom" and so forth... Additionally, you can change "left" to a % to determine how far left or right the background starts from. For example "30% top" will start the background from the top but 30% of the pic's width from the left of the layout. You can also change top to a % to change the amount you want to start it from the top or bottom. */ body { background-position: right top;} /*OTHER CODES Important codes for the layout's setup. Please don't mess with these unless you know what you're doing! To learn more, use the link at the top of this CSS. */ body { font-weight: light; background-repeat: no-repeat; background-color: #FBFDE8; } a { text-decoration:none; } a:visited { text-decoration:none; } a:hover, a:visited:hover { color:red; text-decoration:underline; } .category_totals, .td1, .td2, #grand_totals, #copyright { background-image:url(http://i194.photobucket.com/albums/z222/HappyAd/Light2.png); background-repeat:repeat; border-width:0; padding:2px; } .category_totals:HOVER, .td1:HOVER, .td2:HOVER, #grand_totals:HOVER, #copyright:HOVER {background-color:black; border-width:0; padding:2px; } .status_selected { background-color:white; padding:2px; color:#CD8591; text-decoration: blink; border-top:2px; border-bottom:2px; border-style:solid; border-color:black; border-right:0px; border-left:0px; } .status_not_selected { background-color:white; padding:2px; color:black; border-top:2px; border-bottom:2px; border-style:solid; border-color:black; border-right:0px; border-left:0px; } #copyright:after { content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs or info. List design by Lirina"; } .status_selected a{ color:#CD8591; font-weight:bold; } .status_not_selected a{ color:#CD8591; } .thickbox { color:cyan; font-family:fantasy; font-size:12px; } .header_title { height:52px; padding:2px; padding-left:15px; } .table_header { border-width:0; font-weight:bold; padding:2px; } .category_totals { height:30px; } #copyright, #grand_totals { text-align: center; margin:0 auto; } |
Shishio-kunApr 13, 2013 11:20 AM
Sep 1, 2012 6:05 PM
#5
Request complete for Suzune-chan Here is the design for Suzune-Chan, a variation of a simple side list, with bottom category menu and thin top bar. Hope you like it ^_^ Preview: (actually the anime titles font size is a little bit smaller) Code: /*bottom category menu*/ @import url("http://dl.dropbox.com/u/61796201/css/Suzune-chan/bottommenu.css") all; /*thin top bar*/ @import url("http://dl.dropbox.com/u/61796201/css/Suzune-chan/topbar.css") all; /*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"); /* Got a question or want to learn more? Try this link: http://myanimelist.net/forum/?topicid=419405&show=0#post1 */ /* Theme for Suzune-chan by Al_eXs */ /* 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://img39.imageshack.us/img39/7116/pixivid2088496full11977.jpg); background-attachment: fixed; background-position: 10% 90%; text-shadow: 1px 0px 4px #3A6FE7; } /* 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(237, 130, 237, 0.400); color: #EBCF9E; font-family: "Tangerine"; font-size:40px; 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(128, 0, 128, 0.400); } /* 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: "Lemon"; font-size:15px; } /* LIST FONTS This is the type and color for more of the numbers, links, and words on the list itself! */ .td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright { color:white; font-family: "Nova Slim"; } /* LIST WIDTH Use this to increase the width of your list! */ #list_surround { width:850px; } /* LIST POSITION Change "left" to "right" to switch the list side, or vice versa. */ #list_surround { left: 10px; 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: #FBFDE8; } a { text-decoration:none; } a:visited { text-decoration:none; } a:hover, a:visited:hover { color:rgba(251, 189, 255, 0.702); text-decoration:none; } .category_totals, .td1, .td2, #grand_totals, #copyright { background-image:url(http://img15.imageshack.us/img15/228/frame6518.png); 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(12, 26, 171, 0.400); border-width:0; } #copyright:after { content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info. Theme by Al_eXs."; } #copyright { margin-bottom: 30px !important; border-radius: 20px; padding: 10px; } .status_selected { background-color:black; padding:2px; color:white; text-decoration: blink; } .status_not_selected { background-color:black; padding:2px; color:white; } .status_selected a{ color:blue; } .status_not_selected a{ 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; } Step-by-step tutorial to install custom CSS on MAL list: http://myanimelist.net/forum/?topicid=200320 |
Shishio-kunNov 3, 2012 4:21 PM
Sep 9, 2012 7:24 PM
#6
Request complete for Jeav Here is the list design, the Holo theme :D Preview: (better in 1920x1080px display, Opera, Firefox or Chrome... IE hate CSS D:) Code: /* Import all the theme. More info: http://myanimelist.net/forum/?clubid=19736 */ @import url("http://dl.dropbox.com/u/61796201/css/MAL_Designs/Jeav/AnimeTheme.css") all; /*Fonts*/ @import url(http://fonts.googleapis.com/css?family=Days+One); @import url(http://fonts.googleapis.com/css?family=Coda); body { color: transparent; } Change in List preferences: http://myanimelist.net/editprofile.php?go=listpreferences Default Status Selected to Watching Step-by-step tutorial to install custom CSS on MAL list: http://myanimelist.net/forum/?topicid=200320 |
Shishio-kunNov 3, 2012 4:19 PM
Oct 5, 2012 4:25 PM
#7
Request complete for MusashiRose MusashiRose said: I am a Revolutionary Girl Utena FREAK. I would love a LIST that is Utena themed. There are so many incredible images to choose from! Most Images can be found in a HUGE Utena gallery @ Ohtori.nu , Specifically this 'artwork' page -----> http://ohtori.nu/galerie/v/series/artwork/ Hopefully someone who is a child of the 90s, a Utena fan, or just appreciates this masterpiece can do this. :) Either way, thanks for this opportunity! I'm all those things! So I took up your request. In fact, Utena movie was the first DVD I ever bought. I noticed on your list you like white backgrounds and your choice of images had them too, so I made sure to keep that, use two of the images and the icon style bar you were using. I gave it more of a colorful touch to match the white background. Let me know in this thread if it installs correctly and if there are any small changes or anything you'd like, we can see what we can do there, hope you like it.. The code: @import "http://dl.dropbox.com/u/78340470/Touhou%20Style%20Menu%20Bar/utenabar.css"; body { background-image: url("http://i.imgur.com/NrDqT.jpg"); } #inlineContent { background: url("http://i.imgur.com/xfc6X.png") no-repeat scroll center 8% transparent !important; } body { color: #FFFFFF; font-family: Verdana,Arial; font-size: 10px; } #inlineContent { display: inline-block !important; height: 362px !important; left: 0 !important; position: absolute !important; top: 0 !important; width: 605px !important; z-index: -1 !important; } #grand_totals { -moz-transition: all 0.25s ease-in-out 0s; background-color: transparent; border: 0 none; border-radius: 3px 3px 3px 3px; color: #EEEEEE; line-height: 20px; min-height: 20px; text-align: center; vertical-align: middle; } body { background-attachment: fixed; background-color: #000000; background-position: right top; background-repeat: no-repeat; background-size: cover; } a { color: #FFFFFF; text-decoration: none; } a:visited { color: #FFFFFF; text-decoration: none; } a:hover { color: #000000; text-decoration: underline; } small { color: #ECE0E3; font-size: 10px; text-decoration: none; } #searchBox { background-color: #B3828F; border-color: #FFFFFF; border-style: solid; border-width: 1px; color: #FFFFFF; font-size: 14px !important; height: 14px; text-align: center; text-transform: uppercase; } #list_surround { background-color: transparent; background-position: center top; background-repeat: no-repeat; margin-left: 4px; margin-top: 5px; padding-top: 30px; text-transform: none; width: 600px; } #list_surround tbody tr:hover { background-color: transparent; text-decoration: underline !important; } #list_surround tr:hover .category_totals, #list_surround[align="center"] tbody tr:hover td, #list_surround[align="center"] + tbody tr:hover { background-color: transparent; } .td1, .td2 { background-image: url("http://i45.tinypic.com/2hobkie.jpg"); background-position: center center; border-style: hidden; color: #ECE0E3; padding: 3px; } .table_header { background-image: url("http://i47.tinypic.com/2dhh1ug.jpg"); background-position: center center; border-style: hidden; color: #000000; padding: 3px; } .td1[width="125"] { font-size: 11px; padding: 1px 20px 1px 1px; width: 200px; } .td1[width="45"] { font-size: 11px; font-weight: bold; } .td1[width="70"] { font-size: 11px; font-weight: bold; } .td2[width="125"] { font-size: 11px; padding: 1px 20px 1px 1px; width: 200px; } .td2[width="45"] { font-size: 11px; font-weight: bold; } .td2[width="70"] { font-size: 11px; font-weight: bold; } .td1:last-child, .td2:last-child, .table_header:last-child { background-position: right center; } .table_header[width="125"] { padding-left: 1px; padding-right: 20px; width: 200px; } .td1:first-child, .td2:first-child, .table_header:first-child { background-position: left center; padding-left: 10px; text-align: center; width: 20px; } [id^="menu"] .td1 { padding-left: 50px; padding-right: 20px; text-align: left; } [id^="menu"] .td2 { padding-left: 50px; padding-right: 20px; text-align: left; } small *, small { font-size: 11px; } .table_headerLink { color: #000000; font-weight: normal; } .table_headerLink:visited { color: #000000; font-weight: normal; } .table_headerLink:hover { color: #FFFFFF; font-weight: normal; } .status_selected { color: #FFFFFF; font-family: Century Gothic,Verdana,Arial; font-size: 13px; font-weight: bold; padding: 5px; } .status_not_selected { color: #FFFFFF; font-family: Century Gothic,Verdana,Arial; font-size: 11px; font-weight: bold; padding: 5px; } .header_title { display: none; } .header_cw { background-image: url("http://i50.tinypic.com/2l9shoo.jpg"); background-position: center top; background-repeat: no-repeat; height: 60px; margin-top: 25px; } .header_completed { background-image: url("http://i48.tinypic.com/2ir8ygo.jpg"); background-position: center top; background-repeat: no-repeat; height: 60px; margin-top: 25px; } .header_onhold { background-image: url("http://i47.tinypic.com/2zi5828.jpg"); background-position: center top; background-repeat: no-repeat; height: 60px; margin-top: 25px; } .header_dropped { background-image: url("http://i49.tinypic.com/23t1uhk.jpg"); background-position: center top; background-repeat: no-repeat; height: 60px; margin-top: 25px; } .header_ptw { background-image: url("http://i46.tinypic.com/4jvus7.jpg"); background-position: center top; background-repeat: no-repeat; height: 60px; margin-top: 25px; } .category_totals { background-image: url("http://i45.tinypic.com/34iftjn.jpg"); background-position: center center; color: #000000; font-size: 10px; height: 40px; text-align: center; } #grand_totals { background-position: center top; background-repeat: no-repeat; color: #FFFFFF; font-family: Verdana,Arial; font-size: 10px; height: 25px; padding: 29px; text-align: center; } #copyright { background-image: url("http://img7.imageshack.us/img7/7540/copyrightbackground.png"); background-repeat: no-repeat; color: #ECE0E3; font-size: 9px; font-weight: normal; height: 50px; margin: 0 auto; padding-top: 10px; text-align: center; text-shadow: 0 0 0.5em #FFDEEE; width: 475px; } btw if you want add @import "http://dl.dropbox.com/u/78340470/TouhouLayoutCSS/CSSforTouhouCardRight.css"; @import "http://dl.dropbox.com/u/78340470/animetitle.css"; to the top of this code for an effect that will show your anime covers when you scroll over a title, but its optional and sometimes rather laggy. |
Shishio-kunOct 5, 2012 5:00 PM
Oct 5, 2012 5:00 PM
#8
Request complete for Rikumoon123 Rikumoon123 said: I would like to make a request for a my list i would the character from Denpa Onna to Seishun Otoko Erio touwa thank you i know that its going to be really good what u come up with You have excellent taste to pick this character, she has gorgeous wallpapers that go really well with any layout but incredibly good with Veriti's alpha style layout: If you find the list text a little hard to read, we can use another background but this one is really good and I find it easy enough to read especially since when you put the cursor on a row, it darkens as you can see in the example! the code, ask if you don't know how to install: /* Math part of the layout, don't change unless you know what you're doing */ @import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/MahouCSS.css"; /* Top bar */ @import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css"; /*BACKGROUND Change the background image link below to get a new background.*/ body { background-image: url("http://i.imgur.com/WJ4VH.jpg"); background-position: 60% 18%; } /*FONTS Change the properties below to change the list font style.*/ * { font-family: tahoma !important; font-size: 8pt !important; font-style: inherit !important; font-variant: small-caps !important; font-weight: bold !important; text-decoration: none !important; text-rendering: auto !important; text-transform: uppercase !important; text-overflow: clip !important; } /*OTHER CODES The codes to change the colors are all at the top.*/ .table_header { background-color: rgba(70, 164, 225, 0.4); border-color: rgba(255, 255, 255, 0.25); } .table_header, .table_headerLink { color: #FFFFFF; text-decoration: none; } .table_headerLink:hover { text-shadow: -1px -1px 3px rgba(255, 255, 255, 0.4), 1px 1px 3px rgba(255, 255, 255, 0.4); } .td1, .td2 { background-color: rgba(70, 164, 150, 0.5); border-color: rgba(255, 255, 255, 0.25); color: #FFFFFF; } .td1 a, .td2 a { color: lightBlue; text-decoration: none; } .td1 a:hover, .td2 a:hover { text-shadow: -1px -1px 3px #56D9D3, 1px 1px 3px #56D9D3; } tr:hover [class^="td"] { background-color: rgba(80, 50, 225, 0.9) !important; } #list_surround td[class^="td"]:first-child, #list_surround td[class^="td"]:nth-child(n+3), .animetitle { font-weight: bold; } .header_title { background-image: url("http://i.imgur.com/GZWCk.png"); } .category_totals { background-color: rgba(70, 164, 225, 0.5); border-color: rgba(255, 255, 255, 0.25); color: #FFFFFF; font-weight: bold; text-shadow: 0px 1px 2px orange, -1px -1px 2px #B514FF; } #grand_totals { color: #FFFFFF; font-size: larger; font-weight: bold; text-shadow: -1px -1px 3px #CC5511, 1px 1px 3px #B514FF, 1px -1px 4px #B514FF, -1px 1px 3px #B514FF; text-transform: uppercase; } #copyright { background-color: rgba(70, 164, 225, 0.6); border-color: rgba(255, 255, 255, 0.25); } #copyright, #copyright a { color: #FFFFFF; } #copyright:after { content: " Custom CSS by Veriti. Edits by Miketsukami-kun. Google 'Shishio's Custom Lists' for more designs and info."; } .status_not_selected a, .status_selected a { background-image: url("http://i.imgur.com/6fyoU.png"); } |
Shishio-kunDec 20, 2012 5:37 PM
Oct 5, 2012 5:10 PM
#9
Request complete for Shanky shanky said: Can i get one with Accel World theme? Try this futuristic theme with a matching logo on the top. the code: @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; body { background-attachment: fixed; background-clip: border-box; background-color: silver; background-image: url("http://i.imgur.com/6LXpw.jpg"); background-position: right 5%; background-repeat: 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/VAzmN.png") no-repeat scroll 50% 1px transparent; font-size: 81.25%; line-height: 1; margin: 0 auto; padding-bottom: 10px; padding-top: 330px; width: 920px; } body { color: black; 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: 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: rgba(255, 2, 8, 0.7); border-color: rgba(164, 16, 32, 0.5); } .status_not_selected a:hover { background-color: rgba(55, 32, 228, 0.6); border-color: rgba(55, 32, 228, 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: #B42030; border-color: rgba(148, 0, 24, 0.5); 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(65, 35, 95, 0.6); } .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(136, 147, 169, 0.6); } .td2 { -moz-transition: all 0.25s ease-in-out 0s; background-color: rgba(151, 164, 183, 0.5); } tr:hover [class^="td"] { background-color: rgba(72, 64, 255, 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(72, 64, 87, 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: blue; display: inline-block; font-style: italic; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.15); } #grand_totals { background-color: rgba(72, 64, 87, 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: rgba(250, 32, 48, 0.6); border-radius: 3px 3px 3px 3px; color: #EEEEEE; line-height: 17px; margin-top: 10px; padding: 8px; text-align: center; } #copyright:after { content: " CSS by Kyouhansha. Edits by Shishio-kun and Veriti. Google 'Shishio's Custom Lists' for more designs and info."; } |
Shishio-kunOct 6, 2012 11:32 AM
Oct 5, 2012 5:19 PM
#10
Request complete for Dirtynut Dirtynut said: I'd like a list with Zoro from One Piece, anything nice-looking is good. Thanks. I noticed you liked the futuristic layout, so this render of Zoro will look great with it and a sword infested background that goes naturally with him! I also added a quote of his to the top. the code: @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; body { background-attachment: fixed; background-clip: border-box; background-color: silver; background-image: url("http://i40.tinypic.com/2vmy9fn.jpg"); background-repeat: repeat; background-size: cover; } #inlineContent { background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: url("http://i45.tinypic.com/2wfpws9.jpg"); background-origin: padding-box; background-position: center top; background-repeat: no-repeat; background-size: contain; display: inline-block !important; height: 160%; 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/vTP6c.png") no-repeat scroll 50% 1px transparent; font-size: 81.25%; line-height: 1; margin: -11px auto 0; padding-bottom: 10px; padding-top: 227px; width: 920px; } body { font-family: arial; } a { -moz-transition: all 0.25s ease-in-out 0s; color: #EEEEEE; text-decoration: none; text-shadow: none; } a:hover { color: #3F1786; 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: rgba(64, 60, 90, 0.6); border-color: rgba(48, 44, 64, 0.5); border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #FFFFFF; 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.6); border-color: rgba(164, 16, 32, 0.5); } .status_not_selected a:hover { background-color: #403C5A; border-color: #201C3A; 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: #B42030; border-color: rgba(148, 0, 24, 0.5); 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(65, 35, 95, 0.6); } .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(136, 147, 169, 0.6); } .td2 { -moz-transition: all 0.25s ease-in-out 0s; background-color: rgba(151, 164, 183, 0.6); } tr:hover [class^="td"] { background-color: rgba(72, 64, 87, 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(72, 64, 87, 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; display: inline-block; font-style: italic; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.15); } #grand_totals { background-color: rgba(72, 64, 87, 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: rgba(180, 32, 48, 0.6); border-radius: 3px 3px 3px 3px; color: #EEEEEE; line-height: 17px; margin-top: 10px; padding: 8px; text-align: center; } #copyright:after { content: " CSS by Kyouhansha. Edits by Shishio-kun and Veriti. Google 'Shishio's Custom Lists' for more designs and info."; } |
Shishio-kunOct 6, 2012 11:49 AM
Oct 5, 2012 5:25 PM
#11
Request complete for Fire11ize Fire11ize said: If its not to much of a trouble for you, I'd like an anime list with Gintama theme. Anything will do as long there is Gintoki in it.If anyone decides to do this, Thanks! ;) I noticed you liked Gintoki's funny expressions, so I found a great render with a similar look and a background that looks ripped right out of Gintama (Japanese setting with a little modern input), and used it with the same futuristic layout. the code: @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; body { background-attachment: fixed; background-clip: border-box; background-color: silver; background-image: url("http://i.imgur.com/osXz8.jpg"); background-origin: padding-box; background-position: 0 0; background-repeat: repeat; background-size: cover; } #inlineContent { background: url("http://i.imgur.com/WGDeT.png") no-repeat scroll center top transparent; display: inline-block !important; height: 1200px !important; left: 0 !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 2000px !important; z-index: -1 !important; } #list_surround { background: url("http://i44.tinypic.com/15s9esp.jpg") no-repeat scroll 50% 1px transparent; font-size: 81.25%; line-height: 1; margin: 0 auto; padding-bottom: 10px; padding-top: 227px; width: 920px; } body { font-family: arial; } a { -moz-transition: all 0.25s ease-in-out 0s; color: #EEEEEE; text-decoration: none; text-shadow: none; } a:hover { color: #3F1786; 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: rgba(64, 60, 90, 0.6); border-color: rgba(48, 44, 64, 0.5); border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #FFFFFF; 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.6); border-color: rgba(164, 16, 32, 0.5); } .status_not_selected a:hover { background-color: #403C5A; border-color: #201C3A; 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: #B42030; border-color: rgba(148, 0, 24, 0.5); 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(65, 35, 95, 0.6); } .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(136, 147, 169, 0.6); } .td2 { -moz-transition: all 0.25s ease-in-out 0s; background-color: rgba(151, 164, 183, 0.6); } tr:hover [class^="td"] { background-color: rgba(72, 64, 87, 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(72, 64, 87, 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; display: inline-block; font-style: italic; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.15); } #grand_totals { background-color: rgba(72, 64, 87, 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: rgba(180, 32, 48, 0.6); border-radius: 3px 3px 3px 3px; color: #EEEEEE; line-height: 17px; margin-top: 10px; padding: 8px; text-align: center; } #copyright:after { content: " CSS by Kyouhansha. Edits by Shishio-kun and Veriti. Google 'Shishio's Custom Lists' for more designs and info."; } |
Shishio-kunNov 3, 2012 4:20 PM
Oct 16, 2012 6:02 AM
#12
Request complete for Rennata Preview Code: @import url(http://fonts.googleapis.com/css?family=Monoton); @import url(http://fonts.googleapis.com/css?family=Wallpoet); @import url(http://dl.dropbox.com/u/78192465/MyAnimeList/Kuroko%20no%20Basket/TabContent.css); @import url(http://dl.dropbox.com/u/78192465/MyAnimeList/Kuroko%20no%20Basket/Hide.css); @import url(http://dl.dropbox.com/u/78192465/MyAnimeList/Kuroko%20no%20Basket/TopMenu.css); @import url(http://dl.dropbox.com/u/78192465/MyAnimeList/Kuroko%20no%20Basket/CategoryMenu.css); @import url(http://dl.dropbox.com/u/78192465/MyAnimeList/Kuroko%20no%20Basket/Ball.css); @import url(http://dl.dropbox.com/u/78192465/MyAnimeList/CSS/AnimeBase_more.css); body { background-color: rgba(228, 223, 236, 1); background-image: url('http://dl.dropbox.com/u/78192465/MyAnimeList/Kuroko%20no%20Basket/Images/background.png'); background-repeat: repeat-x; background-attachment: fixed; background-position: top left; color: #000000; font-size: 11.00px; font-family: Verdana, Arial; } a, a:visited { color: rgba(255, 204, 153, 1); text-decoration: none; } a:hover { cursor: url('http://dl.dropbox.com/u/78192465/MyAnimeList/Kuroko%20no%20Basket/Images/cursor.png') 1 2, auto; color: rgba(255, 204, 153, 1); } #list_surround { position: absolute !important; padding-top: 450px; padding-bottom: 90px; width: 550px; right: 190px; } .table_headerLink, .table_headerLink strong { display: none; } .table_headerLink:visited { color: rgba(60, 44, 8, 1); } .category_totals, #grand_totals { background-color: rgba(233, 20, 1, 1); color: #FFFFFF; font-family: 'Wallpoet', cursive; text-align: center; border: solid 2px rgba(233, 20, 1, 1); } .animetitle { display: block; min-width: 0px; max-width: 450px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 24px !important; } .animetitle + small { visibility: visible !important; position: absolute !important; display: block !important; margin-top: -24px; margin-left: 454px; color: #FFFFFF; white-space: nowrap !important; font-size: 10px !important; line-height: 14px !important; padding: 0 6px !important; background-color: rgba(233, 20, 1, 1) !important; border: solid 2px rgba(255, 255, 255, 1) !important; border-radius: 20em; -o-border-radius: 20em; -moz-border-radius: 20em; -webkit-border-radius: 20em; z-index: 25; } .td1, .td2 { background-color: rgba(255, 255, 255, .7); font-family: 'Wallpoet', cursive; font-size: 18px; border-right: solid 2px rgba(233, 20, 1, 1); transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; z-index: 15; } .td1 a, .td2 a { color: #ccc0da; } .form { border-width: 1px 1px 1px 1px; border-color: #ABABAB; border-style: solid; color: #000000; padding: 2px; font-size: 11.00px; font-family: Verdana, Arial; } #searchBox { position: absolute !important; display: block !important; top: 468px; right: 6px; border: solid 2px rgba(79, 129, 189, 1); color: #FFFFFF; font-weight: bold; font-size: 16px !important; text-shadow: rgba(233, 20, 1, 1) 0.1em 0.1em 0.2em, rgba(233, 20, 1, 1) 0.1em 0.1em 0.2em; background: rgba(255,255,255, 1); width: 150px !important; height: 26px !important; padding: 5px; margin: 50px auto 25px; overflow: hidden; z-index: 20; } .header_cw, .header_completed , .header_onhold, .header_dropped, .header_ptw { border: solid 2px rgba(233, 20, 1, 1); height: 36px !important; } .header_cw span, .header_completed span, .header_onhold span, .header_dropped span, .header_ptw span { font-family: 'Monoton', cursive; padding: 4px; font-size: 28px; line-height: 40px; float: right; } #copyright { position: absolute !important; display: block; color: #000000; width: 350px; top: 712px !important; margin-left: 493px; text-align: right !important; padding: 2px; border: solid 2px rgba(79, 129, 189, 1); background: rgba(255,255,255, 1); transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); z-index: 15; } #copyright a { color: rgba(233, 20, 1, 1); } #copyright a:hover { text-shadow: rgba(233, 20, 1, 1) 0.1em 0.1em 0.2em; } #copyright:after { display: block; content: 'List designed by Hahaido.'; } #inlineContent { pointer-events: none !important; display: block !important; position: fixed !important; content: ' '; top: 0px; left: 0px; width: 370px; height: 332px; background: url('http://dl.dropbox.com/u/78192465/MyAnimeList/Kuroko%20no%20Basket/Images/Target.png') no-repeat; z-index: 10; } #inlineContent:before { pointer-events: none !important; display: block !important; position: fixed !important; content: ' '; bottom: -20px; left: -3px; width: 515px; height: 306px; background: url('http://dl.dropbox.com/u/78192465/MyAnimeList/Kuroko%20no%20Basket/Images/hikari.png') no-repeat; z-index: 10; } #list_surround:before { pointer-events: none !important; position: absolute; display: inline-block; content: ' '; width: 692px; height: 523px; top: 0px; right: -190px; background-color: rgba(198, 252, 226, 1); background: url('http://dl.dropbox.com/u/78192465/MyAnimeList/Kuroko%20no%20Basket/Images/extra_team.png') top center no-repeat; z-index: 10; } #list_surround:after { pointer-events: none !important; position: absolute; display: inline-block; content: ' '; width: 529px; height: 238px; top: 355px; right: 170px; background-color: rgba(198, 252, 226, 1); background: url('http://dl.dropbox.com/u/78192465/MyAnimeList/Kuroko%20no%20Basket/Images/flame.png') top center no-repeat; z-index: 10; } |
Shishio-kunMay 28, 2013 6:04 PM
Oct 20, 2012 9:04 AM
#13
Request complete for KazukiJurai Preview: Code: @import url(http://fonts.googleapis.com/css?family=Griffy); @import url(http://fonts.googleapis.com/css?family=Finger+Paint); @import url(http://dl.dropbox.com/u/78192465/MyAnimeList/Kore%20wa%20Zombie%20Desuka/TabContent.css); @import url(http://dl.dropbox.com/u/78192465/MyAnimeList/Kore%20wa%20Zombie%20Desuka/TopMenu.css); @import url(http://dl.dropbox.com/u/78192465/MyAnimeList/Kore%20wa%20Zombie%20Desuka/CategoryMenu.css); @import url(http://dl.dropbox.com/u/78192465/MyAnimeList/Kore%20wa%20Zombie%20Desuka/Covers.css); @import url(http://dl.dropbox.com/u/78192465/MyAnimeList/Kore%20wa%20Zombie%20Desuka/Angle.css); body { background-image: url('http://dl.dropbox.com/u/78192465/MyAnimeList/Kore%20wa%20Zombie%20Desuka/Images/Graves.png'); background-repeat: no-repeat; background-position: center bottom; background-attachment: fixed; color: #000000; font-size: 11.00px; font-family: Verdana, Arial; cursor: url('http://dl.dropbox.com/u/78192465/MyAnimeList/Kore%20wa%20Zombie%20Desuka/Images/cursor.png') 1 2, auto; } a, a:visited { color: rgba(255, 204, 153, 1); text-decoration: none; } a:hover { cursor: url('http://dl.dropbox.com/u/78192465/MyAnimeList/Kore%20wa%20Zombie%20Desuka/Images/cursor.png') 1 2, auto; color: rgba(255, 204, 153, 1); } #list_surround { position: absolute !important; padding-top: 400px; padding-bottom: 256px; width: 550px; left: 300px; } .table_headerLink, .table_headerLink strong { display: none; } .table_headerLink:visited { color: rgba(60, 44, 8, 1); } .category_totals, #grand_totals { padding: 4px 16px 4px 16px; background-color: rgba(253, 174, 205, 1); border-radius: 20em 0 20em 0; -o-border-radius: 20em 0 20em 0; -moz-border-radius: 20em 0 20em 0; -webkit-border-radius: 20em 0 20em 0; color: #FFFFFF; font-family: 'Finger Paint', cursive; text-align: center; border: solid 2px rgba(233, 20, 1, 1); } .animetitle { display: block; min-width: 0px; max-width: 400px; padding: 2px 2px 2px 32px; white-space: pre-wrap; line-height: 24px !important; text-align: center !important; } .animetitle + small { visibility: visible !important; position: absolute !important; display: block !important; margin-top: -28px; margin-left: -48px; color: #FFFFFF; white-space: nowrap !important; font-size: 12px !important; line-height: 14px !important; padding: 6px; background-color: rgba(253, 174, 205, 1) !important; border: solid 2px rgba(233, 20, 1, 1) !important; border-radius: 00 20em 20em 0; -o-border-radius: 0 20em 20em 0; -moz-border-radius: 0 20em 20em 0; -webkit-border-radius: 0 20em 20em 0; z-index: 25; } .td1, .td2 { background-color: rgba(216, 228, 188, 1); font-family: 'Finger Paint', cursive; line-height: 24px !important; font-size: 18px; transition: background-color .5s linear; -o-transition: background-color .5s linear; -moz-transition: background-color .5s linear; -webkit-transition: background-color .5s linear; z-index: 15; } .td1 a, .td2 a { color: rgba(155, 187, 89, 1); } .form { border-width: 1px 1px 1px 1px; border-color: #ABABAB; border-style: solid; color: #000000; padding: 2px; font-size: 11.00px; font-family: Verdana, Arial; } #searchBox { position: fixed !important; display: block !important; padding-left: 33px !important; top: -50px; right: -2px; border: none !important; font-family: 'Griffy', cursive; text-align: right !important; color: rgba(155, 187, 89, 1); font-size: 16px !important; width: 0px !important; height: 20px !important; padding: 5px; margin: 50px auto 25px; background-color: transparent; background-image: url('http://dl.dropbox.com/u/78192465/MyAnimeList/Kore%20wa%20Zombie%20Desuka/Images/Search.png'); background-repeat: no-repeat; overflow: hidden; transition: width .5s linear; -o-transition: width .5s linear; -moz-transition: width .5s linear; -webkit-transition: width .5s linear; z-index: 20; } #searchBox:hover, #searchBox:focus { width: 138px !important; padding-left: 42px !important; } .header_cw, .header_completed , .header_onhold, .header_dropped, .header_ptw { background-color: rgba(255, 255, 255, 1); border: solid 2px rgba(253, 174, 205, 1); height: 36px !important; border-radius: 10px; -o-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } .header_cw span, .header_completed span, .header_onhold span, .header_dropped span, .header_ptw span { font-family: 'Griffy', cursive; padding: 4px; font-size: 28px; line-height: 40px; } #copyright { position: absolute !important; display: block; color: #000000; width: 280px; top: 410px !important; left: -300px; text-align: center !important; padding: 2px; border: solid 2px rgba(253, 174, 205, 1); background: rgba(255,255,255, 1); z-index: 15; } #copyright a { color: rgba(253, 174, 205, 1); } #copyright a:hover { text-shadow: rgba(253, 174, 205, 1) 0.1em 0.1em 0.2em; } #copyright:after { display: block; content: 'List designed by Hahaido.'; } #inlineContent { pointer-events: none !important; display: block !important; position: absolute !important; content: ' '; top: 0px; left: -300px; width: 700px; height: 403px; background: url('http://dl.dropbox.com/u/78192465/MyAnimeList/Kore%20wa%20Zombie%20Desuka/Images/together.png') no-repeat; z-index: 10; } #inlineContent:after { pointer-events: none !important; display: block !important; position: fixed !important; content: ' '; top: -50px; right: 200px; width: 250px; height: 250px; background: url('http://dl.dropbox.com/u/78192465/MyAnimeList/Kore%20wa%20Zombie%20Desuka/Images/Moon.png') no-repeat; z-index: 10; } #list_surround:before { pointer-events: none !important; position: absolute; display: inline-block; content: ' '; width: 376px; height: 553px; top: 0px; right: -150px; background-color: rgba(198, 252, 226, 1); background: url('http://dl.dropbox.com/u/78192465/MyAnimeList/Kore%20wa%20Zombie%20Desuka/Images/Ayumu.png') top center no-repeat; z-index: -2 !important; } #list_surround:after { pointer-events: none !important; position: absolute; display: inline-block; content: ' '; width: 529px; height: 238px; top: 355px; right: 170px; background-color: rgba(198, 252, 226, 1); background: url('http://dl.dropbox.com/u/78192465/MyAnimeList/Kore%20wa%20Zombie%20Desuka/Images/flame.png') top center no-repeat; z-index: 10; } body:before { position: fixed; content: ' '; width: 100%; height: 100%; top: 0px; left: 0px; background: linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(155, 187, 89, .8)) 100%; background: -moz-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(155, 187, 89, .8)) 100%; background: -webkit-gradient(linear,left bottom,left top, color-stop(0, rgba(255,255,255, 0)), color-stop(1, rgba(155, 187, 89, .8))); z-index: -2; } |
Shishio-kunNov 3, 2012 4:23 PM
Oct 26, 2012 4:53 PM
#14
Request complete for Chamry code: body{ background: url(http://i50.tinypic.com/15878uo.jpg) no-repeat fixed top center; background-size: cover; font-family: Candara; font-size: 12px; color: #f0304f; } #list_surround{ position: absolute; width:650px; margin-bottom:50px; margin:auto; left:0px; right:300px; } .td1, .td2{ padding:3px; } .animetitle + small{ color:#f0304f !important; } .animetitle + small:before{ content: " ( "; } .animetitle + small:after{ content: " ) "; } td:nth-of-type(2) small{ color: #f0304f; font-size:10px; padding-right:10px; } td:nth-of-type(2) small a{ color: #f0304f; } .td1:nth-of-type(1), .td2:nth-of-type(1){ border-left: 2px solid #82caff !important; background: url(http://i49.tinypic.com/2vrv8ye.png) -15% ; } .td1:nth-of-type(5), .td2:nth-of-type(5){ border-right: 2px solid #82caff;; background: url(http://i49.tinypic.com/2vrv8ye.png) 86%; } .td1:nth-of-type(4), .td2:nth-of-type(4), td.table_header:nth-of-type(4){ background: url(http://i49.tinypic.com/2vrv8ye.png) 74% ; } .td1:nth-of-type(3), .td2:nth-of-type(3){ background: url(http://i49.tinypic.com/2vrv8ye.png) 67% ; } @media screen and (-webkit-min-device-pixel-ratio:0){ .td1:nth-of-type(3), .td2:nth-of-type(3){ background: url(http://i49.tinypic.com/2vrv8ye.png) 63% ; }} td.table_header:nth-of-type(3){ background: url(http://i49.tinypic.com/2vrv8ye.png) 67% ; padding-right:7px; } @media screen and (-webkit-min-device-pixel-ratio:0){ td.table_header:nth-of-type(3){ background: url(http://i49.tinypic.com/2vrv8ye.png) 63% ; padding-right:7px; }} .td1:nth-of-type(2), .td2:nth-of-type(2){ background: url(http://i49.tinypic.com/2vrv8ye.png) 1% ; } a, a:visited{ text-decoration:none; color: #2030f0; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2{ color:green; } .table_header{ background: url(http://i49.tinypic.com/2vrv8ye.png); padding:2px; font-size: 10px; color:#2030f0; } td.table_header:nth-of-type(1){ border-left: 2px solid #82caff !important; border-top: 2px solid #82caff !important; background: url(http://i49.tinypic.com/2vrv8ye.png) -15% ; border-radius: 10px 0px 0px 0px; } td.table_header:nth-of-type(5){ border-right: 2px solid #82caff;; border-top: 2px solid #82caff;; background: url(http://i49.tinypic.com/2vrv8ye.png) 86% ; border-radius: 0px 10px 0px 0px; } td.table_header:nth-of-type(2), td.table_header:nth-of-type(3), td.table_header:nth-of-type(4){ border-top: 2px solid #82caff;; } .category_totals{ background: url(http://i46.tinypic.com/n3lmgx.png); padding:2px; border-bottom: 2px solid #82caff; border-left: 2px solid #82caff;; border-right: 2px solid #82caff; font-size: 10px; padding-left:40px; border-radius: 0px 0px 10px 10px; } .borderRBL { background: url(http://i46.tinypic.com/n3lmgx.png) !important; border-left: 2px solid #82caff !important; border-right: 2px solid #82caff !important; padding-left:39px; font-size:11px; color:#2030f0 !important; } .borderRBL a, .borderRBL a:visited{ color:#f0304f !important; text-decoration:underline; } .borderRBL a:hover{ color:#f0304f!important; } #copyright{ background: url(http://i46.tinypic.com/n3lmgx.png); position:relative!important; text-align: center !important; width:644px; padding:2px; top:10px; font-size:11px; border: 2px solid #82caff; border-radius: 8px; color: #2030f0; margin-bottom:70px; } #copyright:after{ content: "List Design By Ushioo" !important; background: url(http://i46.tinypic.com/n3lmgx.png) !important; width:650px !important; Position:absolute!important; top:40px !important; left: -3px; color: #f0304f !important; border: 2px solid #82caff; border-radius: 8px; } #copyright a{ color:#2030f0; } #grand_totals{ display:none; } .header_title{ display:none; } .header_cw{ height: 200px; background-image:url(http://i48.tinypic.com/e69fya.png); background-repeat: no-repeat; position:relative; top:9px; } .header_completed{ height: 200px; background-image:url(http://i45.tinypic.com/nxs107.png); background-repeat: no-repeat; position:relative; top:4px; } .header_onhold{ height: 200px; background-image:url(http://i48.tinypic.com/nwzgaw.png); background-repeat: no-repeat; position:relative; top:4px; } .header_dropped{ height: 200px; background-image:url(http://i47.tinypic.com/28ch5pd.png); background-repeat: no-repeat; position:relative; top:4px; } .header_ptw{ height: 200px; background-image:url(http://i50.tinypic.com/t5rgw8.png); background-repeat: no-repeat; position:relative; top:4px; } td:nth-of-type(2) small a { display:none; } td:nth-of-type(2) small{ color:transparent; } |
Shishio-kunOct 27, 2012 11:09 AM
Oct 27, 2012 5:00 AM
#15
Request complete for GreenDog Finished! ^^ I tried to match it with his personaltity so it's made to look a bit crazy. But if you don't like it just change the background image with a calmer one. This would go well with the list too. @import url(http://veriti.opendrive.com/files/OV81MjgxODdfcXZZMkg/mal_top_bar.css); /* Background image */ body { background-image: url("http://image-upload.de/image/zx7hxG/c396291f44.jpg"); background-size:cover;} /* Logo */ #inlineContent { background: url("http://image-upload.de/image/vuGMt0/e011725254.png"); bottom: 0; display: inline !important; height: 383px; position: fixed; left: 0; width: 517px; z-index: 1 !important; } /* List Font */ body { color: #FFFFFF; font-family: Verdana,Arial; font-size: 10px; } #grand_totals { -moz-transition: all 0.25s ease-in-out 0s; background-color: transparent; border: 0 none; border-radius: 3px 3px 3px 3px; color: #ffffff; line-height: 20px; min-height: 20px; text-align: center; vertical-align: middle; } body { background-attachment: fixed; background-color: #000000; background-position: right top; background-repeat: no-repeat; background-size: cover; } a { color: #FFFFFF; text-decoration: none; } a:visited { color: #FFFFFF; text-decoration: none; } a:hover { color: #000000; text-decoration: none; } small { color: #ECE0E3; font-size: 10px; text-decoration: none; } #searchBox { background-color: #B3828F; border-color: #FFFFFF; border-style: solid; border-width: 1px; color: #FFFFFF; font-size: 14px !important; height: 14px; text-align: center; text-transform: uppercase; } #list_surround { background-color: transparent; background-image: url("http://image-upload.de/image/LfJEBT/5f4dc2f0bd.png"); background-position: center top; background-repeat: no-repeat; margin-left: 400px; padding-top: 509px; text-transform: none; width: 600px; } .td1, .td2 { background-image: url("http://i45.tinypic.com/2hobkie.jpg"); background-position: center center; border-style: hidden; color: #ECE0E3; padding: 3px; } .table_header { background-image: url("http://i47.tinypic.com/2dhh1ug.jpg"); background-position: center center; border-style: hidden; color: #000000; padding: 3px; } .td1:last-child, .td2:last-child, .table_header:last-child { background-position: right center; } .table_header[width="125"] { padding-left: 1px; padding-right: 20px; width: 200px; } .td1:first-child, .td2:first-child, .table_header:first-child { background-position: left center; padding-left: 10px; text-align: center; width: 20px; } [id^="menu"] .td1 { padding-left: 50px; padding-right: 20px; text-align: left; } [id^="menu"] .td2 { padding-left: 50px; padding-right: 20px; text-align: left; } small *, small { font-size: 11px; } .table_headerLink { color: #000000; font-weight: normal; } .table_headerLink:visited { color: #000000; font-weight: normal; } .table_headerLink:hover { color: #FFFFFF; font-weight: normal; } .status_selected { color: #FFFFFF; font-family: Century Gothic,Verdana,Arial; font-size: 13px; font-weight: bold; padding: 5px; } .status_not_selected { color: #FFFFFF; font-family: Century Gothic,Verdana,Arial; font-size: 11px; font-weight: bold; padding: 5px; } .header_title { display: none; } .header_cw { background-image: url("http://image-upload.de/image/vt5Rsx/8a40ae2d5a.png"); background-position: center top; background-repeat: no-repeat; height: 100px; margin-top: 25px; } .header_completed { background-image: url("http://image-upload.de/image/BDAW1X/14e153bce7.png"); background-position: center top; background-repeat: no-repeat; height: 100px; margin-top: 25px; } .header_onhold { background-image: url("http://image-upload.de/image/ksij09/dee382918a.png"); background-position: center top; background-repeat: no-repeat; height: 100px; margin-top: 25px; } .header_dropped { background-image: url("http://image-upload.de/image/oeXkGu/a5afdf81cd.png"); background-position: center top; background-repeat: no-repeat; height: 100px; margin-top: 25px; } .header_ptw { background-image: url("http://image-upload.de/image/Kh5PoI/353be0d3bd.png"); background-position: center top; background-repeat: no-repeat; height: 100px; margin-top: 25px; } .category_totals { background-image: url("http://i45.tinypic.com/34iftjn.jpg"); background-position: center center; color: #000000; font-size: 10px; height: 40px; text-align: center; } #grand_totals { background-position: center top; background-repeat: no-repeat; color: #FFFFFF; font-family: Verdana,Arial; font-size: 10px; height: 25px; padding: 29px; text-align: center; } #copyright:before { font-weight:bold; Content: " Design by Lirina"; } #copyright { background-image: url("http://img7.imageshack.us/img7/7540/copyrightbackground.png"); background-repeat: no-repeat; color: #ECE0E3; font-size: 9px; font-weight: normal; height: 50px; margin: 0 auto; padding-top: 10px; text-align: center; text-shadow: 0 0 0.5em #FFDEEE; width: 475px; } |
Shishio-kunOct 27, 2012 11:10 AM
Nov 15, 2012 8:02 AM
#16
Request complete for himejii-chann Preview: ] Code: @import url('http://fonts.googleapis.com/css?family=VT323'); @import url('http://dl.dropbox.com/u/78192465/MyAnimeList/Vocaloid%20Autumn%20Mix/TabContent.css'); @import url('http://dl.dropbox.com/u/78192465/MyAnimeList/CSS/AnimeBase_animetitle.css'); @import url('https://dl.dropbox.com/u/57348187/MAL/IconStyleCSSFixedwithCategory.css'); @import url('http://dl.dropbox.com/u/78192465/MyAnimeList/Vocaloid%20Autumn%20Mix/Hide.css'); body { background: url('http://www.jcult.ru/wp-content/uploads/2012/09/chuunibyou3.jpg') repeat center center fixed; background-size: auto auto; background-color: rgba(234, 248, 252, 1); color: #000000; font-size: 11px; font-family: Verdana, Arial; } #list_surround { width: 820px; margin-top: -200px; padding-top: 220px; margin-left: 35%; } /*------------ TITLE IMAGE ------------*/ .animetitle { background-size: 200px 0px; height: 0px; line-height: 24px !important; transition: background-size, height .5s ease-in-out; -o-transition: background-size, height .5s ease-in-out; -moz-transition: background-size, height .5s ease-in-out; -webkit-transition: background-size, height .5s ease-in-out; } .animetitle + small { display: none; } #list_surround .header_title span, #list_surround .header_title .thickbox { display: none; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ .table_header { position: relative; color: #4f81bd; text-align: center; padding: 5px 2px 5px 2px; box-shadow: none !important; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border: 1px solid #4f81bd !important; background-color: #FFFFFF; } .table_header span { content: none; color: transparent; } .table_header span:hover { text-shadow: none; } .table_headerLink { color: #4f81bd; } .table_headerLink:visited { color: #4f81bd; } .table_headerLink:hover { text-shadow: 0 0 0.2em #4f81bd; } /* // All links on your list */ a { text-decoration: none; } a:hover { cursor: url('http://dl.dropbox.com/u/78192465/MyAnimeList/Vocaloid%20Autumn%20Mix/Images/cursor_hover.png') 1 2, auto; } /* content */ .td1, .td2{ padding: 2px; font-family: 'VT323', cursive; font-size: 18px; color: #4f81bd; background-color: rgba(255, 255, 255, .7); } /* Links in titles */ .td1 a, .td2 a { color: #4f81bd; } /* Effect on link hover */ tr:hover .td1, tr:hover .td2 { height: 304px; background-image: linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(234,248,252,0) 40%, rgba(79,129,189, 1) 50%, rgba(234,248,252,0) 60%, rgba(255,255,255,0) 100%); background-image: -moz-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(234,248,252,0) 40%, rgba(79,129,189, 1) 50%, rgba(234,248,252,0) 60%, rgba(255,255,255,0) 100%); background-image: -webkit-gradient(linear,left bottom,left top, color-stop(0, rgba(255,255,255, 0)), color-stop(0.4, rgba(234,248,252, 0)), color-stop(0.5, rgba(79,129,189, 1)), color-stop(0.6, rgba(234,248,252, 0)), color-stop(1, rgba(255,255,255, 0))); } .animetitle {color: #4f81bd !important;} .borderRBL { border-width: 1px 1px 0 36px !important; } /* Header classes for Currently Watching, Completed, Dropped, etc... */ .header_title { color: transparent; content: none; } .table_header[width="50"] { width: 70px !important; } .header_cw { position: absolute; visibility: hidden; width: 876px; height: 256px; top: 0px; margin-left: -28px; background: url('http://dl.dropbox.com/u/78192465/MyAnimeList/Vocaloid%20Autumn%20Mix/Images/Watching.png') top left no-repeat; } .header_completed { position: absolute; visibility: hidden; top: 0px; margin-left: -28px; width: 876px; height: 256px; background: url('http://dl.dropbox.com/u/78192465/MyAnimeList/Vocaloid%20Autumn%20Mix/Images/Completed.png') top left no-repeat; } .header_onhold { position: absolute; visibility: hidden; top: 0px; margin-left: -28px; width: 876px; height: 256px; background: url('http://dl.dropbox.com/u/78192465/MyAnimeList/Vocaloid%20Autumn%20Mix/Images/OnHold.png') top left no-repeat; } .header_dropped { position: absolute; top: 0px; visibility: hidden; margin-left: -28px; width: 876px; height: 256px; background: url('http://dl.dropbox.com/u/78192465/MyAnimeList/Vocaloid%20Autumn%20Mix/Images/Dropped.png') top left no-repeat; } .header_ptw { position: absolute; visibility: hidden; top: 0px; margin-left: -28px; width: 876px; height: 256px; background: url('http://dl.dropbox.com/u/78192465/MyAnimeList/Vocaloid%20Autumn%20Mix/Images/Planned.png') top left no-repeat; } .category_totals, #grand_totals { position: relative !important; display: block !important; color:#FFFFFF; font-weight: bold; text-align: center; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background-color: #4f81bd; padding: 5px 2px 5px 2px; } .form { border-width: 1px 1px 1px 1px; border-color: #000000; border-style: solid; color: #000000; padding: 2px; font-size: 11.00px; font-family: Verdana, Arial; } #copyright { position: relative !important; display: block !important; width: 600px; margin-bottom: 164px; /* 164 */ margin-left: auto; margin-right: auto; padding-top: 8px; padding-bottom: 8px; color: #FFFFFF !important; font-weight: bold; text-align: center; text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border: 1px solid #4f81bd; background-color: #FFFFFF; transform: rotate(-3deg); -o-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -webkit-transform: rotate(-3deg); z-index: 2 !important; } #copyright a { color: #4f81bd; } #copyright a:hover { text-decoration: underline; } #copyright:after { content: 'List designed by Hahaido.'; display: block; } /* header_al is thesurrounding "User's Anime List" at the top */ .header_al { font-weight: bold; font-size: 14px; } #searchBox { position: fixed; display:block !important; top: -16px !important; right: -1px !important; margin-right: 26px !important; margin-top: 177px !important; color: #FFFFFF; font-weight: bold; font-size: 14px !important; text-shadow: #000000 0.1em 0.1em 0.2em; background: rgba(255,255,255, 0); border-width: 0px; !impotant; width: 100px !important; height: 62px; padding: 10px; margin: 100px auto 50px; overflow: hidden; /* Clear floats */ } #searchListButton { position: absolute !important; display: block !important; visibility: visible !important; content: none !important; width: 40px !important; height: 40px !important; right: 158px !important; margin-top: 253px !important; background: transparent !important; border-radius: 20px; -o-border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; z-index: -2 !important; } #searchListButton:hover { cursor: url('http://dl.dropbox.com/u/78192465/MyAnimeList/Vocaloid%20Autumn%20Mix/Images/cursor_hover.png') 1 2, auto !important; } body:before { position: fixed; display: block; content: ' '; width: 23px; height: 100%; top: 0 px; right: 70px !important; background: url('Images/chain.png') repeat-y; z-index: -1; } body:after { position: absolute; content: ' '; width: 100%; height: 256px; top: 0px; left: 0px; background: linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,216,91, .7)) 100%; background: -moz-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,216,91, .7)) 100%; background: -webkit-gradient(linear,left bottom,left top, color-stop(0, rgba(255,255,255, 0)), color-stop(1, rgba(65,105,225, .7))); z-index: -2; } #list_surround:before { position: absolute; display: none; content: ' '; width: 876px; height: 256px; top: 0px; margin-left: -28px; background: url('https://dl.dropbox.com/u/57348187/MAL/Images/Header.png') top left no-repeat; z-index: -1; } #list_surround:after { position: absolute; display: inline-block; content: ' '; width: 360px; height: 506px; top: 32px; margin-left: -400px; background: url('https://dl.dropbox.com/u/57348187/MAL/Images/extra.png') no-repeat; z-index: -2; } #inlineContent:before { pointer-events: none !important; position: fixed !important; display: block !important; content: ' '; width: 100% !important; height: 200px !important; bottom: 0px !important; left: 0px !important; background: url('Images/InlineExtra_2.png') repeat-x bottom left, linear-gradient(top, rgba(255,255,255, 0) 0%,rgba(255,255,255,1) 35%); background: url('Images/InlineExtra_2.png') repeat-x bottom left, -moz-linear-gradient(top,rgba(255,255,255,0) 0%, rgba(255,255,255,1) 35%); background: url('Images/InlineExtra_2.png') repeat-x bottom left, -webkit-gradient(linear, left top, left bottom, color-stop(0,rgba(255,255,255,0)), color-stop(35,rgba(255,255,255,1))); z-index: 3 !important; } #inlineContent:after { pointer-events: none !important; position: fixed !important; display: block !important; content: ' '; width: 472px !important; height: 512px !important; bottom: -52px !important; left: 0px !important; background: url('https://dl.dropbox.com/u/57348187/MAL/Images/InlineExtra.png') no-repeat bottom left; z-index: 4 !important; } #inlineContent { pointer-events: none !important; display: block !important; position: fixed !important; top: -64px !important; left: -38px !important; width: 190px !important; height: 125px !important; background: url('https://dl.dropbox.com/u/57348187/MAL/background_top_menu.png') no-repeat top left; } |
Shishio-kunNov 30, 2012 3:06 PM
Nov 17, 2012 11:08 AM
#17
Request complete for Shyolk Shyolk said: I'd like to request a Magi: The Labyrinth of Magic themed anime/manga list. Particularly Alibaba or Morgiana. Or both. ;) I won't mind how it's done, but I'd like the colour scheme to be dark. To get an idea, the anime list I have right now is what I mean by dark. (Just click on my signature) Message me if you need me to be more specific about things. Thanks in advance. I made one for a friend but I wouldn't mind sharing it. It's not really a dark one though you could just take another background (the library isn't really fitting anyway). You can find the code here. (below the picture) |
Shishio-kunNov 30, 2012 3:03 PM
Nov 19, 2012 12:14 PM
#18
Request complete for HinoKahoko ~ Anime List: see here *code: BODY { background-attachment: fixed; background-image: url("http://i1068.photobucket.com/albums/u449/Gaviota062/Anime%20List/OnePiece.png"); background-repeat: no-repeat; color: #919191; font-family: trebuchet ms; font-size: 11px; line-height: 13px; text-transform: lowercase; background-size: cover; } #list_surround table tbody tr:hover td { background-color: transparent; border-bottom: 1px solid #BEBDBD; } #list_surround tr:hover .category_totals, #list_surround table[align="center"] tbody tr:hover td, #list_surround table[align="center"] + table tbody tr:hover td { background-color: transparent; border: 0 none; } #mal_cs_powered { bottom: auto !important; position: fixed !important; right: 0 !important; } #mal_control_strip a { color: #BEBDBD !important; font-family: trebuchet ms !important; font-size: 10px !important; text-decoration: none !important; text-transform: lowercase !important; } #mal_control_strip { background: none repeat scroll 0 0 transparent !important; border-bottom: 0 solid #AA98A9 !important; color: #BEBDBD !important; font-family: trebuchet ms !important; height: 25px; line-height: 7px; text-transform: lowercase !important; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: medium none !important; } #mal_cs_otherlinks, #mal_cs_otherlinks div, #mal_cs_otherlinks span, #mal_cs_otherlinks strong { color: #BEBDBD !important; font-family: trebuchet ms !important; font-size: 10px; font-weight: normal; text-transform: lowercase !important; } div#list_surround { float: left; margin: 0 auto; padding-left: 310px; padding-top: 100px; width: 630px; } a { color: #AA98A9; font-size: 11px; text-decoration: none; text-transform: lowercase; } a:visited { color: #AA98A9; font-size: 11px; text-decoration: none; text-transform: lowercase; } a:hover { color: #BEBDBD; cursor: default; font-size: 11px; text-decoration: none; text-transform: lowercase; } .td1, .td2 { background-color: transparent; border: 1px dotted transparent; color: #919191; font-size: 10px; } .status_selected { color: #09245B; font-size: 11px; } .status_not_selected { color: #09245B; font-size: 11px; } .status_selected a { font-size: 11px; } .status_not_selected a { color: #BEBDBD; font-size: 11px; } .table_header { color: #AA98A9; font-size: 11px; padding-bottom: 10px; } .table_headerLink { color: #AA98A9; font-size: 11px; } .table_headerLink:visited { color: #AA98A9; font-size: 11px; } .table_headerLink:hover { color: #BEBDBD; font-size: 11px; } .header_cw { } .header_completed { } .header_onhold { } .header_dropped { } .header_ptw { } .header_title { color: #AA98A9; font-size: 30px; font-weight: bold; letter-spacing: -2px; padding-bottom: 30px; padding-top: 15px; text-align: center; text-transform: lowercase; } .category_totals { font-size: 9px; padding-top: 14px; text-align: center; } #grand_totals { font-size: 9px; text-align: center; } .header_al { } .header_al_links { } .animetitle { } small a { color: #919191; font-size: 10px; } small a:hover { color: #BEBDBD; font-size: 10px; } #copyright { font-size: 9px; margin: 0 auto; padding-bottom: 20px; padding-top: 20px; text-align: center; } ~ Manga List: see here * code: BODY { background-attachment: fixed; background-image: url("http://i1068.photobucket.com/albums/u449/Gaviota062/Anime%20List/ed2.png"); background-repeat: no-repeat; background-size: cover; color: #D39BCB; font-family: trebuchet ms; font-size: 11px; line-height: 13px; text-transform: lowercase; } #list_surround tbody tr:hover { background-color: transparent; border-bottom: 1px solid #D39BCB; } #list_surround tr:hover .category_totals, #list_surround[align="center"] tbody tr:hover td, #list_surround[align="center"] + tbody tr:hover { background-color: transparent; border: 0 none; } #mal_cs_powered { bottom: auto !important; position: fixed !important; right: 0 !important; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: medium none !important; } #mal_cs_otherlinks, #mal_cs_otherlinks div, #mal_cs_otherlinks span, #mal_cs_otherlinks strong { color: #8E4585 !important; font-family: trebuchet ms !important; font-size: 10px; font-weight: normal; text-transform: lowercase !important; } div#list_surround { float: left; margin: 0 auto; padding-left: 310px; padding-top: 100px; width: 630px; } a { color: #8E4585; font-size: 11px; text-decoration: none; text-transform: lowercase; } a:visited { color: #D770A2; font-size: 11px; text-decoration: none; text-transform: lowercase; } a:hover { color: #8E4585; cursor: default; font-size: 11px; text-decoration: none; text-transform: lowercase; } .td1, .td2 { background-color: transparent; border: 1px dotted transparent; color: #D39BCB; font-size: 10px; } .status_selected { color: #8E4585; font-size: 11px; } .status_not_selected { color: #D39BCB; font-size: 11px; } .status_selected a { font-size: 11px; } .status_not_selected a { color: #8E4585; font-size: 11px; } .table_header { color: #8E4585; font-size: 11px; padding-bottom: 10px; } .table_headerLink { color: #8E4585; font-size: 11px; } .table_headerLink:visited { color: #8E4585; font-size: 11px; } .table_headerLink:hover { color: #8E4585; font-size: 11px; } .header_cw { } .header_completed { } .header_onhold { } .header_dropped { } .header_ptw { } .header_title { color: #8E4585; font-size: 30px; font-weight: bold; letter-spacing: -2px; padding-bottom: 30px; padding-top: 15px; text-align: center; text-transform: lowercase; } .category_totals { font-size: 9px; padding-top: 14px; text-align: center; } #grand_totals { font-size: 9px; text-align: center; } .header_al { } .header_al_links { } .animetitle { } small a { color: #D39BCB; font-size: 10px; } small a:hover { color: #8E4585; font-size: 10px; } #copyright { font-size: 9px; margin: 0 auto; padding-bottom: 20px; padding-top: 20px; text-align: center; } |
Shishio-kunNov 30, 2012 3:06 PM
Nov 29, 2012 12:16 AM
#19
Request complete for kayserlein Preview: Code: @import url(http://fonts.googleapis.com/css?family=Cutive+Mono); @import url(http://fonts.googleapis.com/css?family=Shadows+Into+Light+Two); @import url(http://fonts.googleapis.com/css?family=Racing+Sans+One); @import url(http://dl.dropbox.com/u/78192465/MyAnimeList/Yuno/TabContent.css); @import url(http://dl.dropbox.com/u/78192465/MyAnimeList/Yuno/TopMenu.css); @import url(http://dl.dropbox.com/u/78192465/MyAnimeList/Yuno/CategoryMenu.css); @import url(http://dl.dropbox.com/u/78192465/MyAnimeList/CSS/AnimeBase_more_before.css); .table_header, .td1, .td2, .category_totals, #copyright, .header_title { background-color: rgba(255, 255, 255, 1); background-image: url(http://dl.dropbox.com/u/78192465/MyAnimeList/Yuno/Images/net.png); background-repeat: repeat; background-position: top left; } .hide { position: absolute; display: inline-block !important; } :hover + .hide:before { visibility: visible !important; position: absolute !important; display: block !important; content: ''; margin-top: 2px; margin-left: 484px; width: 208px !important; height: 300px !important; background-color: rgba(255, 255, 255, 1); background-repeat: no-repeat !important; background-size: 200px 284px !important; background-position: center 20%; border: solid 2px #2b2f3c; box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 4px 5px rgba(0,0,0,.6), 0 1px 0 rgba(0,0,0,.6); -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 4px 5px rgba(0,0,0,.6), 0 1px 0 rgba(0,0,0,.6); -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 4px 5px rgba(0,0,0,.6), 0 1px 0 rgba(0,0,0,.6); z-index: 1; } #inlineContent { position: fixed; display: block !important; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-image: url(http://dl.dropbox.com/u/78192465/MyAnimeList/Yuno/Images/background.png); background-repeat: no-repeat; background-position: center right; background-size: contain; z-index: -3; } body { background: linear-gradient(top, rgba(43, 47, 60, 1) 0%, rgba(43, 47, 60, 1) 15%, rgba(227, 239, 247, 1) 100%) fixed, url(http://dl.dropbox.com/u/78192465/MyAnimeList/Yuno/Images/background-grid2.png) center center repeat; background: -moz-linear-gradient(top, rgba(43, 47, 60, 1) 0%, rgba(43, 47, 60, 1) 15%, rgba(227, 239, 247, 0) 100%) fixed, url(http://dl.dropbox.com/u/78192465/MyAnimeList/Yuno/Images/background-grid2.png) center center repeat; background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(43, 47, 60, 1)), color-stop(0.15, rgba(43, 47, 60, 1)), color-stop(1, rgba(227, 239, 247, 0))) fixed, url(http://dl.dropbox.com/u/78192465/MyAnimeList/Yuno/Images/background-grid2.png) center center repeat; font-family: 'Cutive Mono', serif; color: #2b2f3c; font-size: 12px; } body, a:hover { cursor: url('http://dl.dropbox.com/u/78192465/MyAnimeList/Yuno/Images/cursor.png'), auto; } a, a:visited { text-decoration: none; } #list_surround:before { position: absolute; display: block; padding: 0 !important; top: 97px; left: 28px; width: 92% !important; height: calc(100% - 100px) !important; height: -moz-calc(100% - 100px) !important; height: -webkit-calc(100% - 100px) !important; content: ''; border: solid 4px #2b2f3c; border-bottom: none; background-color: rgba(91, 93, 134, 1) !important; box-shadow: 0 0 32px rgba(137, 251, 218, 1); -o-box-shadow: 0 0 32px rgba(137, 251, 218, 1); -moz-box-shadow: 0 0 32px rgba(137, 251, 218, 1); -webkit-box-shadow: 0 0 32px rgba(137, 251, 218, 1); border-radius: 14px 14px 0 0; -o-border-radius: 14px 14px 0 0; -moz-border-radius: 14px 14px 0 0; -webkit-border-radius: 14px 14px 0 0; z-index: -1; } #list_surround { position: relative; margin-top: 192px; padding: 80px 56px 44px; left: 32px; width: 708px; border: solid 4px #2b2f3c; background-color: rgba(110, 196, 171, 1); border-radius: 16px 16px 0 0; -o-border-radius: 16px 16px 0 0; -moz-border-radius: 16px 16px 0 0; -webkit-border-radius: 16px 16px 0 0; box-shadow: 12px 4px 16px rgba(0, 0, 0, .7); -o-box-shadow: 12px 4px 16px rgba(0, 0, 0, .7); -moz-box-shadow: 12px 4px 16px rgba(0, 0, 0, .7); -webkit-box-shadow: 12px 4px 16px rgba(0, 0, 0, .7); z-index: 1; } #list_surround:after { position: absolute; display: block; content: ''; height: 252px; width: 828px; margin-top: 48px; margin-left: -60px; background: url('http://dl.dropbox.com/u/78192465/MyAnimeList/Yuno/Images/mobile_bottom.png') no-repeat; box-shadow: 12px 0 16px rgba(0, 0, 0, .7); -o-box-shadow: 12px 0 16px rgba(0, 0, 0, .7); -moz-box-shadow: 12px 0 16px rgba(0, 0, 0, .7); -webkit-box-shadow: 12px 0 16px rgba(0, 0, 0, .7); z-index: -2; } .category_totals { text-align: center; font-size: 14px; height: 44px; border-top: solid 2px #2b2f3c; border-left: solid 4px #2b2f3c; border-right: solid 4px #2b2f3c; border-bottom: solid 2px #2b2f3c; } #grand_totals { display: none; } .animetitle { display: block; padding-left: 12px; font-size: 18px; line-height: 24px; min-width: 0px; max-width: 436px; white-space: pre-wrap; } .animetitle + small { visibility: visible !important; position: relative !important; display: inline-block !important; margin-left: 12px; color: #FFFFFF !important; font-size: 12px !important; padding: 2px 8px; background-color: rgba(43, 47, 60, 1); } .td1, .td2 { transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; } .td1 a, .td2 a { color: #2b2f3c; } #list_surround .header_title:before, #list_surround .header_title:after { position: absolute; display: inline-block; content: ''; } #list_surround .header_title:before { left: 64px !important; width: 32px; height: 32px; margin-top: 4px; background: url('http://dl.dropbox.com/u/78192465/MyAnimeList/Yuno/Images/signal.png') no-repeat; } #list_surround .header_title:after { right: 64px !important; width: 48px; height: 48px; margin-top: -4px; background: url('http://dl.dropbox.com/u/78192465/MyAnimeList/Yuno/Images/battery.png') no-repeat; } .table_header { padding: 8px 0 8px; text-align: center; border-top: solid 2px #2b2f3c !important; border-bottom: solid 2px #2b2f3c !important; z-index: 10; } .table_header a { color: #2b2f3c; } #list_surround .table_header:nth-of-type(2) { text-align: left !important; } .header_cw, .header_completed , .header_onhold, .header_dropped, .header_ptw { line-height: 44px; font-family: 'Racing Sans One', cursive; font-size: 26px; text-align: center !important; border: solid 4px #2b2f3c; border-bottom: none; } .table_header:first-child { border-left: solid 4px #2b2f3c !important; } .table_header:last-child { border-right: solid 4px #2b2f3c !important; } .form { border-width: 1px 1px 1px 1px; border-color: #ABABAB; border-style: solid; color: #000000; padding: 2px; font-size: 11.00px; font-family: Verdana, Arial; } #copyright { position: relative !important; margin-top: 0 !important; text-align: center !important; border: solid 4px #2b2f3c; border-top: none; } #copyright a { font-weight: bold; color: #fa0107; } #copyright a:hover { text-shadow: 0 0 0.2em #fa0107; } #copyright:before { display: block; content: 'List designed by Hahaido.'; } #copyright:after { position: absolute !important; display: block; content: 'kayserlein'; width: 100%; margin-top: 4px; color: #FFFFFF; font-family: 'Racing Sans One', cursive; text-align: center; font-size: 26px; line-height: 44px; padding: 0 !important; background-color: rgba(91, 93, 134, 1); } |
Shishio-kunMay 28, 2013 6:02 PM
Dec 14, 2012 12:50 AM
#20
Request complete for TaikiX5 TaikiX5 I finished your request I hope you like it :) Here's the code, anything you want changed message me. @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; /* Tell me what you don't like. */ body { background: url("http://www.a-gc.com/images/2012/11/katekyo-hitman-reborn-HD-Wallpapers.jpg"); background-size: cover; background-attachment: fixed !important; } /* SECOND BACKGROUND (with render) You can try this if you want to, before it was Black Rock Shooter in the middle but I removed it. If you think you know what you are doing then feel free to add something. If you don't know what you are doing, I wouldn't reccomend it but you can try and fiddle around but MAKE AND EXTRA SAVE FIRST (Copy and paste this code somewhere) */ #inlineContent { display: inline-block !important; height: 1200px !important; left: 0px !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 1200px !important; z-index: -1 !important; } /* TITLE The List header which by default says My Anime List can be changed out here. */ #list_surround { background: url("http://i44.tinypic.com/15s9esp.jpg") no-repeat scroll 50% 1px transparent; font-size: 81.25%; line-height: 1; margin: 0 auto; padding-bottom: 10px; padding-top: 227px; width: 920px; } /* FONT Font used across the whole list. */ body { font-family: arial; } /* LINK COLOR */ a { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; color: #FFFFFF; text-decoration: none; text-shadow: none; } a:hover { color: #000000; text-shadow: 0 1px rgba(255, 255, 255, 0.15); } /* CATEGORY LINKS */ .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: rgba(250, 80, 0, 0.8); border-color: rgba(0, 0, 0, 0.5); border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #000000; display: block !important; font-weight: bold; padding: 8px; text-shadow: 0 1px rgba(0, 0, 0, 0.1); } .status_selected a { background-color: rgba(239, 76, 11, 0.6); border-color: rgba(0, 0, 0, 0.5); } .status_not_selected a:hover { background-color: #FFF500; border-color: #000000; 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: #FFF500; border-color: rgba(0, 0, 0, 0.5); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.3); } /* HEADER */ .table_header { background-color: rgba(0, 0, 0, 0.8); } .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; } /* ROWS COLOR */ .td1 { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(250, 87, 0, 0.6); } .td2 { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(255, 128, 0, 0.6); } /* ROWS HOVER */ tr:hover [class^="td"] { background-color: rgba(250, 190, 5, 0.8; } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } /* ROW FONT SIZE TRANSITION (FIREFOX ONLY) */ noindex:-moz-any-link, tr:hover td.td1, tr:hover td.td2 { font-size: 15px; } /* LIST SETTINGS */ .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: 30px; } .borderRBL{ line-height: normal !important; } [cellspacing="0"] { line-height: 17px; } [class^="header_"] +{ border-collapse: separate !important; } /* CATEGORY TOTALS */ .category_totals { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(72, 64, 87, 0); border-radius: 0 0 3px 3px; color: rgba(0, 0, 0, 0); text-align: center; } .category_totals:hover { background-color: rgba(0, 0, 0, 0.8); color: #FFFFFF; } /* HEADER TEXT AND DIMENSIONS */ [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; display: inline-block; font-style: italic; height: auto; padding: 0 8px 0 0; color: #FFFFFF; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } /* BOTTOM OF LIST */ #grand_totals { background-color: rgba(0, 0, 0, 0); border: 0 none; border-radius: 3px 3px 3px 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-radius: 3px 3px 3px 3px; color: #EEEEEE; line-height: 17px; margin-top: 10px; padding: 8px; text-align: center; } #copyright:after { content: " CSS by Kyouhansha. Edits by Shishio-kun and Veriti. Google 'Shishio's Custom Lists' for more designs and info."; } |
Shishio-kunDec 15, 2012 2:13 PM
Dec 15, 2012 7:21 AM
#21
Request complete for Deathraver Deathraver said: Thanks to anyone who accept the requests here! Well.. it seems hard to put it in words, but the current list layout that I tried editting was quite difficult for me. What I want was to have my list coloured in a creamy brown color (like the one on the search bar at the top right) but I just cant seem to fully change all of them into that color considering how the headers are actually images. I also will like it to be transparent. The list on the right needs to be moved up on the page OR if you can, try adding a title, quote, image, etc, to fill up that space. The Anime and Manga list does not need to be seperate, but if you want to, you can, but I wont request it. However, I want the header for the Manga to change as, eg: "Plan to Read, Currently Reading" instead of the usual Anime List; "Plan to Watch" and "Currently Watching". For the wallpaper the current one that I have would be good (http://www.onepiecehq.com/images/gallery/Around_the_World.jpg), however if you found a better one, do let me know! My current codes for layout /* 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-attachment: fixed !important; background-clip: border-box !important; background-color: black !important; background-image: url("http://www.onepiecehq.com/images/gallery/Around_the_World.jpg") !important; background-repeat: repeat !important; background-size: cover !important; } #list_surround { position: absolute !important; right: 10px !important;} /* List Font */ body { color: #FFFFFF; font-family: Verdana,Arial; font-size: 10px; } #inlineContent { display: inline-block !important; height: 362px !important; left: 0 !important; position: absolute !important; top: 0 !important; width: 605px !important; z-index: -1 !important; } #grand_totals { -moz-transition: all 0.25s ease-in-out 0s; background-color: transparent; border: 0 none; border-radius: 3px 3px 3px 3px; color: #EEEEEE; line-height: 20px; min-height: 20px; text-align: center; vertical-align: middle; } a { color: #FFFFFF; text-decoration: none; } a:visited { color: #FFFFFF; text-decoration: none; } a:hover { color: #000000; text-decoration: none; } small { color: #ECE0E3; font-size: 10px; text-decoration: none; } #searchBox { background-color: #ECD672; border-color: #FFFFFF; border-style: solid; border-width: 1px; color: #FFFFFF; font-size: 14px !important; height: 14px; text-align: center; text-transform: uppercase; } #list_surround { background-color: transparent; background-image: url("http://imageshack.us/a/img210/5817/fixedmenutop1.png"); background-position: center top; background-repeat: no-repeat; margin-left: 5px; padding-top: 350px; text-transform: none; width: 600px; } #list_surround tbody tr:hover { background-color: #D9C1C7; } #list_surround tr:hover .category_totals, #list_surround[align="center"] tbody tr:hover td, #list_surround[align="center"] + tbody tr:hover { background-color: transparent; } .td1, .td2 { background-image: url("http://i45.tinypic.com/2hobkie.jpg"); background-position: center center; border-style: hidden; color: #ECE0E3; padding: 3px; } .table_header { background-image: url("http://i47.tinypic.com/2dhh1ug.jpg"); background-position: center center; border-style: hidden; color: #000000; padding: 3px; } .td1[width="125"] { font-size: 11px; padding: 1px 20px 1px 1px; width: 200px; } .td1[width="45"] { font-size: 11px; font-weight: bold; } .td1[width="70"] { font-size: 11px; font-weight: bold; } .td2[width="125"] { font-size: 11px; padding: 1px 20px 1px 1px; width: 200px; } .td2[width="45"] { font-size: 11px; font-weight: bold; } .td2[width="70"] { font-size: 11px; font-weight: bold; } .td1:last-child, .td2:last-child, .table_header:last-child { background-position: right center; } .table_header[width="125"] { padding-left: 1px; padding-right: 20px; width: 200px; } .td1:first-child, .td2:first-child, .table_header:first-child { background-position: left center; padding-left: 10px; text-align: center; width: 20px; } [id^="menu"] .td1 { padding-left: 50px; padding-right: 20px; text-align: left; } [id^="menu"] .td2 { padding-left: 50px; padding-right: 20px; text-align: left; } small *, small { font-size: 11px; } .table_headerLink { color: #000000; font-weight: normal; } .table_headerLink:visited { color: #000000; font-weight: normal; } .table_headerLink:hover { color: #FFFFFF; font-weight: normal; } .status_selected { color: #FFFFFF; font-family: Century Gothic,Verdana,Arial; font-size: 13px; font-weight: bold; padding: 5px; } .status_not_selected { color: #FFFFFF; font-family: Century Gothic,Verdana,Arial; font-size: 11px; font-weight: bold; padding: 5px; } .header_title { display: none; } .header_cw { background-image: url("http://i50.tinypic.com/2l9shoo.jpg"); background-position: center top; background-repeat: no-repeat; height: 60px; margin-top: 25px; } .header_completed { background-image: url("http://i48.tinypic.com/2ir8ygo.jpg"); background-position: center top; background-repeat: no-repeat; height: 60px; margin-top: 25px; } .header_onhold { background-image: url("http://i47.tinypic.com/2zi5828.jpg"); background-position: center top; background-repeat: no-repeat; height: 60px; margin-top: 25px; } .header_dropped { background-image: url("http://i49.tinypic.com/23t1uhk.jpg"); background-position: center top; background-repeat: no-repeat; height: 60px; margin-top: 25px; } .header_ptw { background-image: url("http://i46.tinypic.com/4jvus7.jpg"); background-position: center top; background-repeat: no-repeat; height: 60px; margin-top: 25px; } .category_totals { background-image: url("http://i45.tinypic.com/34iftjn.jpg"); background-position: center center; color: #000000; font-size: 10px; height: 40px; text-align: center; } #grand_totals { background-position: center top; background-repeat: no-repeat; color: #FFFFFF; font-family: Verdana,Arial; font-size: 10px; height: 25px; padding: 29px; text-align: center; } #copyright { background-image: url("http://img7.imageshack.us/img7/7540/copyrightbackground.png"); background-repeat: no-repeat; color: #ECE0E3; font-size: 9px; font-weight: normal; height: 50px; margin: 0 auto; padding-top: 10px; text-align: center; text-shadow: 0 0 0.5em #FFDEEE; width: 475px; } You can simply help me edit it the way I request it to, OR you can rework the whole list layout and create a new improved list. The choice is yours and thanks in advance. Tadaaaaaa~ Code body { background-attachment: fixed !important; background-clip: border-box !important; background-color: black !important; background-image: url("http://www.onepiecehq.com/images/gallery/Around_the_World.jpg") !important; background-repeat: repeat !important; background-size: cover !important; } #list_surround { position: absolute !important; right: 60px !important; } body { color: #FFFFFF; font-family: Verdana,Arial; font-size: 10px; } #inlineContent { display: inline-block !important; height: 362px !important; left: 0 !important; position: absolute !important; top: 0 !important; width: 605px !important; z-index: -1 !important; } #grand_totals { background-color: transparent; border: 0 none; border-radius: 3px 3px 3px 3px; color: #EEEEEE; line-height: 20px; min-height: 20px; text-align: center; transition: all 0.25s ease-in-out 0s; vertical-align: middle; } a { color: #FFFFFF; text-decoration: none; } a:visited { color: #FFFFFF; text-decoration: none; } a:hover { color: #000000; text-decoration: none; } small { color: #0094FF; font-size: 8px !important; text-decoration: none; } #searchBox { background-color: #ECD672; border-color: #FFFFFF; border-style: solid; border-width: 1px; color: #FFFFFF; font-size: 14px !important; height: 14px; text-align: center; text-transform: uppercase; } #list_surround { background-color: transparent; background: transparent; background-position: center top; background-repeat: no-repeat; margin-left: 5px; padding-top: 50px; text-transform: none; width: 600px; } #list_surround tbody tr:hover { } #list_surround tr:hover .category_totals, #list_surround[align="center"] tbody tr:hover td, #list_surround[align="center"] + tbody tr:hover { background-color: transparent; } .td1, .td2 { background: rgba(236,214,114, 0.8); background-position: center center; border-style: hidden; color: #0094FF; padding: 3px; } .table_header { background: rgba(236,214,114, 0.8); border-style: hidden; color: #001E99 !important; padding: 3px; } .td1[width="125"] { font-size: 11px; padding: 1px 20px 1px 1px; width: 200px; } .td1[width="45"] { font-size: 11px; font-weight: bold; } .td1[width="70"] { font-size: 11px; font-weight: bold; } .td2[width="125"] { font-size: 11px; padding: 1px 20px 1px 1px; width: 200px; } .td2[width="45"] { font-size: 11px; font-weight: bold; } .td2[width="70"] { font-size: 11px; font-weight: bold; } .td1:last-child, .td2:last-child, .table_header:last-child { background-position: right center; } .table_header[width="125"] { padding-left: 1px; padding-right: 20px; width: 200px; } .td1:first-child, .td2:first-child, .table_header:first-child { background-position: left center; padding-left: 10px; text-align: center; width: 20px; } [id^="menu"] .td1 { padding-left: 50px; padding-right: 20px; text-align: left; } [id^="menu"] .td2 { padding-left: 50px; padding-right: 20px; text-align: left; } small *, small { font-size: 11px; } .table_headerLink { color: #001E99; font-weight: normal; } .table_headerLink:visited { color: #000000; font-weight: normal; } .table_headerLink:hover { color: #FFFFFF; font-weight: normal; } .status_selected { color: #FFFFFF; font-family: Century Gothic,Verdana,Arial; font-size: 14px; font-weight: bold; padding: 5px; background: rgba(236,214,114, 0.8); border-bottom-style: solid; border-top-style: solid; border-width: 2px !important; } .status_not_selected { color: #FFFFFF; font-family: Century Gothic,Verdana,Arial; font-size: 12px; font-weight: bold; padding: 5px; background: rgba(236,214,114, 0.8); border-bottom-style: solid; border-width: 2px !important; border-top-style: solid; } .header_title { font-size: 40px; font-family: century gothic; margin-top: -20px; margin-bottom: 10px; margin-left: 40px; } .header_cw { margin-top: 25px; background: rgba(236,214,114, 0.8); border-radius: 30px 30px 0 0; } .header_completed { margin-top: 25px; background: rgba(236,214,114, 0.8); border-radius: 30px 30px 0 0; } .header_onhold { margin-top: 25px; background: rgba(236,214,114, 0.8); border-radius: 30px 30px 0 0; } .header_dropped { margin-top: 25px; background: rgba(236,214,114, 0.8); border-radius: 30px 30px 0 0; } .header_ptw { margin-top: 25px; background: rgba(236,214,114, 0.8); border-radius: 30px 30px 0 0; } .category_totals { background: rgba(236,214,114, 0.8); color: #001E99; font-size: 10px; height: 40px; text-align: center; border-radius: 0 0 30px 30px; } #grand_totals { background-position: center top; background-repeat: no-repeat; color: #FFFFFF; font-family: Verdana,Arial; font-size: 10px; height: 25px; padding: 29px; text-align: center; } #copyright { background-image: url("http://img7.imageshack.us/img7/7540/copyrightbackground.png"); background-repeat: no-repeat; color: #ECE0E3; font-size: 9px; font-weight: normal; height: 50px; margin: 0 auto; padding-top: 10px; text-align: center; text-shadow: 0 0 0.5em #FFDEEE; width: 475px; } I just quickly recolored it and fixed the empty header. That's all you wanted, right? It works for both anime- and mangalist. |
Shishio-kunJan 22, 2013 9:03 PM
Dec 15, 2012 3:38 PM
#22
Request complete for UtsukushiiYume Preview: The code: @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; /* MAIN BACKGROUND I Changed the original silver background with a picture of Rin from Ao No Exorcist. You can see the URL below and you can change it to your liking :) Just make sure you paste the URL within the brackets ( ) and within the quotations " " ex. ("blablabla.com/lol") */ body { background:url("http://www.beatless.jp/common/img/gallery/main/bt_pic_5.jpg"); background-size: cover; background-attachment: fixed !important; } /* SECOND BACKGROUND (with render) You can try this if you want to, before it was Black Rock Shooter in the middle but I removed it. If you think you know what you are doing then feel free to add something. If you don't know what you are doing, I wouldn't reccomend it but you can try and fiddle around but MAKE AND EXTRA SAVE FIRST (Copy and paste this code somewhere) */ #inlineContent { display: inline-block !important; height: 1200px !important; left: 0px !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 1200px !important; z-index: -1 !important; } /* TITLE The List header which by default says My Anime List can be changed out here. */ #list_surround { background: url("http://i44.tinypic.com/15s9esp.jpg") no-repeat scroll 50% 1px transparent; font-size: 81.25%; line-height: 1; margin: 0 auto; padding-bottom: 10px; padding-top: 227px; width: 920px; } /* FONT Font used across the whole list. */ body { font-family: arial; } /* LINK COLOR */ a { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; color: #FFFFFF; text-decoration: none; text-shadow: none; } a:hover { color: #01DFD7; text-shadow: 0 1px rgba(255, 255, 255, 0.15); } /* CATEGORY LINKS */ .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: rgba(0, 25, 50, 0.8); border-color: rgba(255, 255, 255, 0.5); border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #FFFFFF; display: block !important; font-weight: bold; padding: 8px; text-shadow: 0 1px rgba(0, 0, 0, 0.1); } .status_selected a { background-color: rgba(0, 147, 169, 0.6); border-color: rgba(255, 255, 255, 0.5); } .status_not_selected a:hover { background-color: #00BFFF; border-color: #201C3A; 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: #00BFFF; border-color: rgba(148, 0, 24, 0.5); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.3); } /* HEADER */ .table_header { background-color: rgba(0, 50, 100, 0.8); } .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; } /* ROWS COLOR */ .td1 { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(0, 120, 235, 0.6); } .td2 { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(0, 90, 235, 0.6); } /* ROWS HOVER */ tr:hover [class^="td"] { background-color: rgba( 0, 150, 255, 0.6); } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } /* ROW FONT SIZE TRANSITION (FIREFOX ONLY) */ noindex:-moz-any-link, tr:hover td.td1, tr:hover td.td2 { font-size: 15px; } /* LIST SETTINGS */ .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: 30px; } .borderRBL{ line-height: normal !important; } [cellspacing="0"] { line-height: 17px; } [class^="header_"] +{ border-collapse: separate !important; } /* CATEGORY TOTALS */ .category_totals { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(72, 64, 87, 0); border-radius: 0 0 3px 3px; color: rgba(0, 0, 0, 0); text-align: center; } .category_totals:hover { background-color: rgba(0, 0, 0, 0.8); color: #FFFFFF; } /* HEADER TEXT AND DIMENSIONS */ [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; display: inline-block; font-style: italic; height: auto; padding: 0 8px 0 0; color: #FFFFFF; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } /* BOTTOM OF LIST */ #grand_totals { background-color: rgba(0, 0, 0, 0); border: 0 none; border-radius: 3px 3px 3px 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-radius: 3px 3px 3px 3px; color: #EEEEEE; line-height: 17px; margin-top: 10px; padding: 8px; text-align: center; } #copyright:after { content: " CSS by Kyouhansha. Edits by Shishio-kun and Veriti. Google 'Shishio's Custom Lists' for more designs and info."; } |
TheHolyPotatoDec 16, 2012 10:31 AM
Dec 15, 2012 10:01 PM
#23
Request complete for DavidVauhn @DavidVauhn Preview: The Code: @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; /* Tell me what you don't like. */ body { background: url("http://img546.imageshack.us/img546/903/hellgirlscan1.jpg"); background-size: cover; background-attachment: fixed !important; } /* SECOND BACKGROUND (with render) You can try this if you want to, before it was Black Rock Shooter in the middle but I removed it. If you think you know what you are doing then feel free to add something. If you don't know what you are doing, I wouldn't reccomend it but you can try and fiddle around but MAKE AND EXTRA SAVE FIRST (Copy and paste this code somewhere) */ #inlineContent { display: inline-block !important; height: 1200px !important; left: 0px !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 1200px !important; z-index: -1 !important; } /* TITLE The List header which by default says My Anime List can be changed out here. */ #list_surround { 1px transparent; font-size: 81.25%; line-height: 1; margin: 0 auto; padding-bottom: 10px; padding-top: 20px; width: 920px; } /* FONT Font used across the whole list. */ body { font-family: arial; } /* LINK COLOR */ a { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; color: #FFFFFF; text-decoration: none; text-shadow: none; } a:hover { color: #FF0A85; text-shadow: 0 1px rgba(255, 255, 255, 0.15); } /* CATEGORY LINKS */ .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: rgba(255, 80, 128, 0.8); border-color: rgba(0, 0, 0, 0.5); border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #000000; display: block !important; font-weight: bold; padding: 8px; text-shadow: 0 1px rgba(0, 0, 0, 0.1); } .status_selected a { background-color: rgba(255, 20, 138, 0.8); border-color: rgba(0, 0, 0, 0.5); } .status_not_selected a:hover { background-color: #FF0A85; border-color: #000000; 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: #D1006C; border-color: rgba(0, 0, 0, 0.5); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.3); } /* HEADER */ .table_header { background-color: rgba(0, 0, 0, 0.8); } .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; } /* ROWS COLOR */ .td1 { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(176, 69, 176, 0.6); } .td2 { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(209, 137, 209, 0.6); } /* ROWS HOVER */ tr:hover [class^="td"] { background-color: rgba(250, 190, 5, 0.8; } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } /* ROW FONT SIZE TRANSITION (FIREFOX ONLY) */ noindex:-moz-any-link, tr:hover td.td1, tr:hover td.td2 { font-size: 15px; } /* LIST SETTINGS */ .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: 30px; } .borderRBL{ line-height: normal !important; } [cellspacing="0"] { line-height: 17px; } [class^="header_"] +{ border-collapse: separate !important; } /* CATEGORY TOTALS */ .category_totals { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(72, 64, 87, 0); border-radius: 0 0 3px 3px; color: rgba(0, 0, 0, 0); text-align: center; } .category_totals:hover { background-color: rgba(0, 0, 0, 0.8); color: #FFFFFF; } /* HEADER TEXT AND DIMENSIONS */ [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; display: inline-block; font-style: italic; height: auto; padding: 0 8px 0 0; color: #FFFFFF; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } /* BOTTOM OF LIST */ #grand_totals { background-color: rgba(0, 0, 0, 0); border: 0 none; border-radius: 3px 3px 3px 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-radius: 3px 3px 3px 3px; color: #EEEEEE; line-height: 17px; margin-top: 10px; padding: 8px; text-align: center; } #copyright:after { content: " CSS by Kyouhansha. Edits by Shishio-kun and Veriti. Google 'Shishio's Custom Lists' for more designs and info."; } |
TheHolyPotatoDec 16, 2012 10:30 AM
Dec 16, 2012 9:08 PM
#24
Request complete for Level-X Fixed it up a bit :) Preview: Code: /* TOP RIGHT BAR */ @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; /* MAIN BACKGROUND */ body { background:url("http://img651.imageshack.us/img651/8504/darkgreyhoneycombonblue.jpg") no-repeat fixed 65% 45% } /* SECOND BACKGROUND (NARUTO) */ #inlineContent { background: url("http://oi47.tinypic.com/2aimq9i.jpg") 200% 120% no-repeat; display: inline-block !important; height: 1200px !important; left: 0px !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 1350px !important; z-index: -1 !important; } /* TITLE The List header which by default says My Anime List can be changed out here. */ #list_surround { background: url("http://i47.tinypic.com/2hn28b5.jpg") no-repeat scroll 50% 20px transparent; font-size: 81.25%; line-height: 1; margin: 0 auto; padding-bottom: 500px; padding-top: 110px; width: 900px; } /* FONT Font used across the whole list. */ body { font-family: arial; } /* LINK COLOR */ a { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; color: #EEEEEE; text-decoration: none; text-shadow: none; } a:hover { color: #3E99B6; text-shadow: 0 1px rgba(255, 255, 255, 0.15); } /* CATEGORY LINKS */ .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:rgba(9, 38, 79, 0.6); border-color: rgba(48, 44, 64, 0.5); border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #FFFFFF; display: block !important; font-weight: bold; padding: 8px; text-shadow: 0 1px rgba(0, 0, 0, 0.1); } .status_selected a { background-color: rgba(198, 108, 170, 0.6); border-color: rgba(164, 16, 32, 0.5); } .status_not_selected a:hover { background-color: #176CD8; border-color: #201C3A; 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: #A54086; border-color: rgba(255, 128, 149, 0.5); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.3); } /* HEADER */ .table_header { background-color: rgba(9, 38, 79, 0.6); } .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; } /* ROWS COLOR */ .td1 { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(136, 147, 169, 0.6); } .td2 { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(151, 164, 183, 0.6); } /* ROWS HOVER */ tr:hover [class^="td"] { background-color: rgba(52, 127, 232, 0.6); } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } /* ROW FONT SIZE TRANSITION (FIREFOX ONLY) */ noindex:-moz-any-link, tr:hover td.td1, tr:hover td.td2 { font-size: 15px; } /* LIST SETTINGS */ .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: 30px; } .borderRBL{ line-height: normal !important; } [cellspacing="0"] { line-height: 17px; } [class^="header_"] +{ border-collapse: separate !important; } /* CATEGORY TOTALS */ .category_totals { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-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(1, 82, 194, 0.6); color: #FFFFFF; } /* HEADER TEXT AND DIMENSIONS */ [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; display: inline-block; font-style: italic; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.15); } /* BOTTOM OF LIST */ #grand_totals { background-color: rgba(72, 64, 87, 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: rgba(180, 32, 48, 0.6); border-radius: 3px 3px 3px 3px; color: #EEEEEE; line-height: 17px; margin-top: 10px; padding: 8px; text-align: center; } #copyright:after { content: " CSS by Kyouhansha. Edits by Shishio-kun and Veriti. Google 'Shishio's Custom Lists' for more designs and info."; } #list_surround { position: absolute !important; left: 1px !important;} /* CURRENTLY WATCHING/READING HEADER This is the header above currently watching/reading. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_cw { background-image:url(http://i48.tinypic.com/xdtcg9.png); background-position: 50px -10px; height: 200px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* COMPLETED HEADER This is the header above completed animes and manga. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_completed { background-image:url(http://i50.tinypic.com/2dsigkj.png); background-position: 0% 0%; height: 243px; 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 height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_onhold { background-image:url(http://i45.tinypic.com/2l297m.png); background-position: 0px 0px; height: 150px; 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 height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_dropped { background-image:url(http://i49.tinypic.com/vpumi0.png); background-position: 0px 0px; height: 200px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* PLAN TO WATCH/READ HEADER This is the header above the anime/manga you plan to see or read on your list. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_ptw { background-image:url(http://i48.tinypic.com/2cckqv4.png); background-position: 0px 0px; height: 286px; 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;} .header_title { color: gray !important; color: transparent !important; font-size: 1px !important; font-size: 0px !important; font-size: 0 !important; font-size: 0pt !important; } If you want anything changed don't be afraid to send me a message :) |
TheHolyPotatoDec 20, 2012 8:30 PM
Dec 18, 2012 12:39 PM
#25
Request complete for Hime-sama ADDED CATEGORY PICTURES :D Preview: Code: @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; /* MAIN BACKGROUND */ body { background: url("http://fc08.deviantart.net/fs70/f/2012/278/0/2/02afa4c0c0836c6db5a2c7375c761065-d5gv0u0.png"); background-position: 100% 30%; background-size: cover; background-attachment: fixed !important; } #list_surround { position: absolute !important; left: 1px !important;} /* SECOND BACKGROUND (with render) */ #inlineContent { display: inline-block !important; height: 1200px !important; left: 0px !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 500px !important; z-index: -1 !important; } /* TITLE The List header which by default says My Anime List can be changed out here. */ #list_surround { background: url("http://i50.tinypic.com/mhbrid.png") no-repeat scroll 50% 1px transparent; font-size: 81.25%; line-height: 1; margin: 0 auto; padding-bottom: 10px; padding-top: 120px; width: 800px; } /* FONT Font used across the whole list. */ body { font-family: arial; } /* LINK COLOR */ a { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; color: #FFFFFF; text-decoration: none; text-shadow: none; } a:hover { color: #000000; text-shadow: 0 1px rgba(255, 0, 0, 0.30); } /* CATEGORY LINKS */ .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(230, 0, 0, 0.8); border-color: rgba(255, 255, 255, 0.5); border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #FFFFFF; display: block !important; font-weight: bold; padding: 8px; text-shadow: 0 1px rgba(0, 0, 0, 0.1); } .status_selected a { background-color: rgba(255, 36, 36, 0.6); border-color: rgba(255, 255, 255, 0.5); } .status_not_selected a:hover { background-color: #FF0000; border-color: #201C3A; 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:#FF1A1A; border-color: rgba(148, 0, 24, 0.5); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.3); } /* HEADER */ .table_header { background-color: rgba(230, 0, 0, 0.8); } .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; } /* ROWS COLOR */ .td1 { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(255, 51, 51, 0.6); } .td2 { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(255, 100, 61, 0.6); } /* ROWS HOVER */ tr:hover [class^="td"] { background-color: rgba(255, 36, 36, 0.8); } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } /* ROW FONT SIZE TRANSITION (FIREFOX ONLY) */ noindex:-moz-any-link, tr:hover td.td1, tr:hover td.td2 { font-size: 15px; } /* LIST SETTINGS */ .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: 30px; } .borderRBL{ line-height: normal !important; } [cellspacing="0"] { line-height: 17px; } [class^="header_"] +{ border-collapse: separate !important; } /* CATEGORY TOTALS */ .category_totals { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(72, 64, 87, 0); border-radius: 0 0 3px 3px; color: rgba(0, 0, 0, 0); text-align: center; } .category_totals:hover { background-color: rgba(0, 0, 0, 0.8); color: #FFFFFF; } /* HEADER TEXT AND DIMENSIONS */ [class^="header_"] * { font-size: 19px; height: 60px; line-height: 24px; padding-bottom: 4px; text-align: right; vertical-align: bottom; } .header_title { background-color:rgba(0,0,0,0); } /* BOTTOM OF LIST */ #grand_totals { background-color: rgba(0, 0, 0, 0); border: 0 none; border-radius: 3px 3px 3px 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-radius: 3px 3px 3px 3px; color: #EEEEEE; line-height: 17px; margin-top: 10px; padding: 8px; text-align: center; } #copyright:after { content: " CSS by Kyouhansha. Edits by TheHolyPotato. Google 'Shishio's Custom Lists' for more designs and info."; } /* CURRENTLY WATCHING/READING HEADER This is the header above currently watching/reading. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_cw { background-image:url(http://i46.tinypic.com/2utlr80.png); background-position: 0px opx; height: 200px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* COMPLETED HEADER This is the header above completed animes and manga. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_completed { background-image:url(http://i47.tinypic.com/260reat.png); background-position: 0px 0px; height: 250px; 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 height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_onhold { background-image:url(http://i46.tinypic.com/j668hz.png); background-position: 0px 0px; height: 250px; 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 height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_dropped { background-image:url(http://i45.tinypic.com/2igg1dy.png); background-position: 0px 0px; height: 250px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* PLAN TO WATCH/READ HEADER This is the header above the anime/manga you plan to see or read on your list. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_ptw { background-image:url(http://i50.tinypic.com/eh1afd.png); background-position: 0px 20px; height: 250px; 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. */ /* 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;} .header_title { color: gray !important; color: transparent !important; font-size: 1px !important; font-size: 0px !important; font-size: 0 !important; font-size: 0pt !important; }@import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; /* MAIN BACKGROUND */ body { background: url("http://fc08.deviantart.net/fs70/f/2012/278/0/2/02afa4c0c0836c6db5a2c7375c761065-d5gv0u0.png"); background-position: 100% 30%; background-size: cover; background-attachment: fixed !important; } #list_surround { position: absolute !important; left: 1px !important;} /* SECOND BACKGROUND (with render) */ #inlineContent { display: inline-block !important; height: 1200px !important; left: 0px !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 500px !important; z-index: -1 !important; } /* TITLE The List header which by default says My Anime List can be changed out here. */ #list_surround { background: url("http://i50.tinypic.com/mhbrid.png") no-repeat scroll 50% 1px transparent; font-size: 81.25%; line-height: 1; margin: 0 auto; padding-bottom: 10px; padding-top: 120px; width: 800px; } /* FONT Font used across the whole list. */ body { font-family: arial; } /* LINK COLOR */ a { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; color: #FFFFFF; text-decoration: none; text-shadow: none; } a:hover { color: #000000; text-shadow: 0 1px rgba(255, 0, 0, 0.30); } /* CATEGORY LINKS */ .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(230, 0, 0, 0.8); border-color: rgba(255, 255, 255, 0.5); border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #FFFFFF; display: block !important; font-weight: bold; padding: 8px; text-shadow: 0 1px rgba(0, 0, 0, 0.1); } .status_selected a { background-color: rgba(255, 36, 36, 0.6); border-color: rgba(255, 255, 255, 0.5); } .status_not_selected a:hover { background-color: #FF0000; border-color: #201C3A; 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:#FF1A1A; border-color: rgba(148, 0, 24, 0.5); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.3); } /* HEADER */ .table_header { background-color: rgba(230, 0, 0, 0.8); } .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; } /* ROWS COLOR */ .td1 { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(255, 51, 51, 0.6); } .td2 { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(255, 100, 61, 0.6); } /* ROWS HOVER */ tr:hover [class^="td"] { background-color: rgba(255, 36, 36, 0.8); } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } /* ROW FONT SIZE TRANSITION (FIREFOX ONLY) */ noindex:-moz-any-link, tr:hover td.td1, tr:hover td.td2 { font-size: 15px; } /* LIST SETTINGS */ .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: 30px; } .borderRBL{ line-height: normal !important; } [cellspacing="0"] { line-height: 17px; } [class^="header_"] +{ border-collapse: separate !important; } /* CATEGORY TOTALS */ .category_totals { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(72, 64, 87, 0); border-radius: 0 0 3px 3px; color: rgba(0, 0, 0, 0); text-align: center; } .category_totals:hover { background-color: rgba(0, 0, 0, 0.8); color: #FFFFFF; } /* HEADER TEXT AND DIMENSIONS */ [class^="header_"] * { font-size: 19px; height: 60px; line-height: 24px; padding-bottom: 4px; text-align: right; vertical-align: bottom; } .header_title { background-color:rgba(0,0,0,0); } /* BOTTOM OF LIST */ #grand_totals { background-color: rgba(0, 0, 0, 0); border: 0 none; border-radius: 3px 3px 3px 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-radius: 3px 3px 3px 3px; color: #EEEEEE; line-height: 17px; margin-top: 10px; padding: 8px; text-align: center; } #copyright:after { content: " CSS by Kyouhansha. Edits by TheHolyPotato. Google 'Shishio's Custom Lists' for more designs and info."; } /* CURRENTLY WATCHING/READING HEADER This is the header above currently watching/reading. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_cw { background-image:url(http://i46.tinypic.com/2utlr80.png); background-position: 0px opx; height: 200px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* COMPLETED HEADER This is the header above completed animes and manga. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_completed { background-image:url(http://i47.tinypic.com/260reat.png); background-position: 0px 0px; height: 250px; 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 height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_onhold { background-image:url(http://i46.tinypic.com/j668hz.png); background-position: 0px 0px; height: 250px; 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 height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_dropped { background-image:url(http://i45.tinypic.com/2igg1dy.png); background-position: 0px 0px; height: 250px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* PLAN TO WATCH/READ HEADER This is the header above the anime/manga you plan to see or read on your list. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_ptw { background-image:url(http://i50.tinypic.com/eh1afd.png); background-position: 0px 20px; height: 250px; 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. */ /* 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;} .header_title { color: gray !important; color: transparent !important; font-size: 1px !important; font-size: 0px !important; font-size: 0 !important; font-size: 0pt !important; } |
TheHolyPotatoDec 18, 2012 10:07 PM
Dec 18, 2012 4:31 PM
#26
Shishio-kunDec 18, 2012 4:56 PM
Dec 20, 2012 7:53 PM
#27
Request complete for BobbyFisher BobbyFisher said: Hey guys I was wondering if someone could make me a list layout featuring Asuka Langley Soryu from Neon genesis Evangelion, Id be very appreciative . Thanks in advance. Sorry I keep using the same layout Shishio D: Preview: Code: @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; /* MAIN BACKGROUND */ body { background: url("http://i45.tinypic.com/2rc4kl2.jpg"); background-position: 0% 0%; background-size: cover; background-attachment: fixed !important; } #list_surround { position: absolute !important; left: 1px !important;} /* SECOND BACKGROUND (with render) */ #inlineContent { background: url("http://24.media.tumblr.com/tumblr_m964ag7ydk1qc254uo1_500.png") 100% 4% no-repeat; display: inline-block !important; height: 1200px !important; left: 0px !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 1350px !important; z-index: -1 !important; } /* TITLE The List header which by default says My Anime List can be changed out here. */ #list_surround { background: url("http://i47.tinypic.com/5cd3r5.png") no-repeat scroll 50% 1px transparent; font-size: 81.25%; line-height: 1; margin: 0 auto; padding-bottom: 30px; padding-top: 70px; width: 800px; } /* FONT Font used across the whole list. */ body { font-family: arial; } /* LINK COLOR */ a { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; color: #FFFFFF; text-decoration: none; text-shadow: none; } a:hover { color: #000000; text-shadow: 0 1px rgba(255, 0, 0, 0.30); } /* CATEGORY LINKS */ .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(230, 0, 0, 0.8); border-color: rgba(255, 255, 255, 0.5); border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #FFFFFF; display: block !important; font-weight: bold; padding: 8px; text-shadow: 0 1px rgba(0, 0, 0, 0.1); } .status_selected a { background-color: rgba(255, 36, 36, 0.6); border-color: rgba(255, 255, 255, 0.5); } .status_not_selected a:hover { background-color: #FF0000; border-color: #201C3A; 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:#FF1A1A; border-color: rgba(148, 0, 24, 0.5); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.3); } /* HEADER */ .table_header { background-color: rgba(255, 15, 15, 0.8); } .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; } /* ROWS COLOR */ .td1 { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(255, 102, 0, 0.6); } .td2 { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(255, 140, 26, 0.6); } /* ROWS HOVER */ tr:hover [class^="td"] { background-color: rgba(255, 36, 36, 0.8); } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } /* ROW FONT SIZE TRANSITION (FIREFOX ONLY) */ noindex:-moz-any-link, tr:hover td.td1, tr:hover td.td2 { font-size: 15px; } /* LIST SETTINGS */ .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: 30px; } .borderRBL{ line-height: normal !important; } [cellspacing="0"] { line-height: 17px; } [class^="header_"] +{ border-collapse: separate !important; } /* CATEGORY TOTALS */ .category_totals { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(72, 64, 87, 0); border-radius: 0 0 3px 3px; color: rgba(0, 0, 0, 0); text-align: center; } .category_totals:hover { background-color: rgba(0, 0, 0, 0.8); color: #FFFFFF; } /* HEADER TEXT AND DIMENSIONS */ [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; display: inline-block; font-style: italic; height: auto; padding: 0 8px 0 0; color: #FFFFFF; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } /* BOTTOM OF LIST */ #grand_totals { background-color: rgba(0, 0, 0, 0); border: 0 none; border-radius: 3px 3px 3px 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-radius: 3px 3px 3px 3px; color: #EEEEEE; line-height: 17px; margin-top: 10px; padding: 8px; text-align: center; } #copyright:after { content: " CSS by Kyouhansha. Edits by TheHolyPotato. Google 'Shishio's Custom Lists' for more designs and info."; } /* CURRENTLY WATCHING/READING HEADER This is the header above currently watching/reading. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_cw { background-image:url(http://i50.tinypic.com/hwzgp1.png); background-position: 200px -15px; height: 100px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* COMPLETED HEADER This is the header above completed animes and manga. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_completed { background-image:url(http://i46.tinypic.com/3538r9s.png); background-position: 200px -15px; height: 100px; 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 height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_onhold { background-image:url(http://i47.tinypic.com/2isfwag.png); background-position: 200px -15px; height: 100px; 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 height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_dropped { background-image:url(http://i47.tinypic.com/ng7iv4.png); background-position: 200px -15px; height: 100px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* PLAN TO WATCH/READ HEADER This is the header above the anime/manga you plan to see or read on your list. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_ptw { background-image:url(http://i48.tinypic.com/20b0i38.png); background-position: 200px -15px; height: 100px; 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. */ /* 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;} .header_title { color: gray !important; color: transparent !important; font-size: 1px !important; font-size: 0px !important; font-size: 0 !important; font-size: 0pt !important; } |
Shishio-kunDec 23, 2012 11:57 AM
Dec 21, 2012 1:25 PM
#28
Request complete for Chaoss Chaoss said: Hey, I have a small request. I love a premade layout on this club, but I just hate the bottom bar where you choose which section you want on your list. I'd rather just have a good looking fitting one on the top. if someone can do that that'd be great! the layout I have: http://myanimelist.net/forum/?topicid=412713 and this is the CSS code I currently have.. just in case /* This is the MATH part of the layout. Don't touch it unless you know what you're doing */ @import url(http://veriti.opendrive.com/files/OV81MjgxODZfN0NiSlU/mal_general.css); /* Remove the following line if you don't want to use my top bar redux */ @import url(http://veriti.opendrive.com/files/OV81MjgxODdfcXZZMkg/mal_top_bar.css); body{ /* Set up a background image: */ background-image: url("http://img832.imageshack.us/img832/92/konachancom103172akemih.jpg"); /* Set up a point of transformation. This is the point * of image that should always be at the top and * preserve it's location at these offsets. * If you don't understand how it works, 50% 50% should * be ok in most cases. Default: point to Okabe's face. */ background-position: 60% 18%; /* Set up fonts you want to use and preferred basic size. * It will look for the first font at the list, then for * the second, etc. The last parameter describes a generic * font family, which will be used if none of the fonts are * on the user PC. The size can be also set using keywords * like xx-small, google for font-size if you want more info */ font-family: 'Segoe UI', 'Century Gothic', sans-serif; font-size: 11px; } /*LIST HOVER COLOR This configures the look of the part with sort links: * the border and the background. * Colors are in rgba format which means first three values * define a color in Red-Green-Blue mode and the last one * sets up an opacity of the color: rgba(R,G,B,a) * Use color picker in Photoshop (or other image editor), * Opera Dragonfly or Rainbow Firefox extension to get desired * RGB values and then play with opacity until you get what you * wanted. */ tr:hover [class^=td] { background-color: rgba(4, 150, 100, 0.9) !important; } .table_header{ background-color: rgba(0,0,0,0.4); border-color: rgba(255,255,255,0.25); } .table_header, .table_headerLink{ /* Color of the sort links. I used short hex notation here but * you may use whatever you want, rgb, rgba or full-hex. This * won't be mentioned below, the way to change colors is the same */ color: #FFF; /* Remove the following line if you want links to be underlined */ text-decoration: none; } .table_headerLink:hover{ /* This configures a light white glow on hovered links * Changing colors should be enough here so I'll leave it for you. * It's the same rgba we've encountered. */ text-shadow: rgba(255,255,255,0.4) -1px -1px 3px, rgba(255,255,255,0.4) 1px 1px 3px; } /* The look of the rest of the table * Configures background, border and text color for non-links * I made it a bit more opaque than sorting headers */ .td1, .td2{ background-color: rgba(0,0,0,0.6); border-color: rgba(255,255,255,0.25); color: #FFF; } /* This is for the links in the rest of the table */ .td1 a, .td2 a{ text-decoration: none; /* Removes underline for these */ color: #ffc700; /* Paints links orange */ } /* Glow effect on link hover. The same text-shadow property */ .td1 a:hover, .td2 a:hover{ text-shadow: #9d9d31 -1px -1px 3px, #9d9d31 1px 1px 3px; } /* This makes all text in tables bold except for Edit - More */ #list_surround td[class^=td]:first-child, #list_surround td[class^=td]:nth-child(n+3), .animetitle{font-weight:bold} /* CSS sprite for Currently Watching, Completed, Dropped, etc... * Note there is only one image used for all headers. I've made an * inverted version for bright layouts: * [url=http://s004.radikal.ru/i206/1203/ca/77c100a4bb4d.png]http://s004.radikal.ru/i206/1203/ca/77c100a4bb4d.png * or you can make one yourself. It's not that difficult. */ .header_title{ background-image: url(http://i027.radikal.ru/1203/c6/d9bba44c784b.png); } /* Block displaying category totals * It's redesigned to be the part of the table layout * and you've already encountered all the properties here * so it won't be hard for you to customise this. * Note that a different shadow colors used for glow effect */ .category_totals{ background-color: rgba(0,0,0,0.5); border-color: rgba(255,255,255,0.25); color: #fff; font-weight: bold; text-shadow: orange 1px 1px 2px,cyan -1px -1px 2px; } /* Text displaying global totals */ #grand_totals{ color: #fff; font-size: larger; font-weight: bold; text-shadow: #c51 -1px -1px 3px, #c51 1px 1px 3px, #c51 1px -1px 4px, #c51 -1px 1px 3px; /* The following line makes it ALL-CAPS */ text-transform: uppercase; } /* Modifying copyright section. It's designed to look similar * to the whole layout, ok? */ #copyright{ background-color: rgba(0,0,0,0.6); border-color: rgba(255,255,255,0.25); } #copyright:after { content: " Custom CSS by Veriti. Background edit by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info."; } /* Modifying the text color in copyright section */ #copyright, #copyright a{ color: #FFF; } /* Configures a CSS sprite for the bar at the bottom */ .status_not_selected a, .status_selected a{ background-image: url('http://i060.radikal.ru/1203/28/2c26e350723d.png'); } /* upd 11th March 2012 */ thanks in advance! <3 This actually took longer than I thought it would, if you do not like the category colors you can adjust them to how you want :) The only thing I don't like is how the categories at the top are underlined but I don't know how to change that or why it's like that :/ but basically everything is the same but without the bottom bar. Preview: Code: /* Sorry if I used too much blue... it's my favorite color :P */ @import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css"; /* MAIN BACKGROUND */ body { background: url("http://img832.imageshack.us/img832/92/konachancom103172akemih.jpg"); background-size: cover; background-attachment: fixed !important; } #inlineContent { display: inline-block !important; height: 1200px !important; left: 0px !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 1200px !important; z-index: -1 !important; } #list_surround { font-size: 81.25%; line-height: 1; margin: 0 auto; padding-bottom: 10px; padding-top: 50px; width: 900px; } /* CATEGORY LINKS */ .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: rgba(98, 4, 149, 0.8); border-color: rgba(255, 255, 255, 0.5); border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #FFFFFF; display: block !important; font-weight: bold; padding: 8px; text-shadow: 0 1px rgba(0, 0, 0, 0.1); } .status_selected a { background-color: rgba(175, 4, 149, 0.6); border-color: rgba(255, 255, 255, 0.5); } .status_not_selected a:hover { background-color: #9405E1; border-color: #201C3A; 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: #E105C0; border-color: rgba(148, 0, 24, 0.5); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.3); } /* ---------- LAYOUT ---------- */ /* header & sort links */ .table_header{ background-color: rgba(0,0,0,0.4); border-bottom: 0px !important; border-color: rgba(255,255,255,0.25); border-style: solid; border-width: 1px 1px 0px 0px; color: #FFF; padding: 2px; } .table_headerLink{ color: #FFF; text-decoration: none; } .table_headerLink:visited{ color: #FFF; } .table_headerLink:hover{ text-shadow: rgba(255,255,255,0.4) -1px -1px 3px, rgba(255,255,255,0.4) 1px 1px 3px; } /* content (anime titles) */ .td1, .td2{ background-color: rgba(0,0,0,0.6); border-color: rgba(255,255,255,0.25); border-style: solid; border-width: 1px 1px 0 0; color: #FFF; padding: 2px; } /* Links in titles */ .td1 a, .td2 a{ color: #ffc700; text-decoration: none; } /* Glow effect on link hover */ .td1 a:hover, .td2 a:hover{ text-shadow: #9d9d31 -1px -1px 3px, #9d9d31 1px 1px 3px; } /* Highlighting hovered row */ -o-transition: background-color .2s linear; -moz-transition: background-color .2s linear; -webkit-transition: background-color .2s linear; transition: background-color .2s linear; } tr:hover > .td1, tr:hover > .td2{ background-color: rgba(45,45,45,0.9) !important; } /* Brackets for small text like 'rewatching' or 'airing' */ .td1 > small:before, .td2 > small:before{ content:'('; } .td1 > small:after, .td2 > small:after{ content:')'; } /* This makes all text ins bold except for Edit - More */ #list_surround td[class^='td']:first-child, #list_surround td[class^='td']:nth-child(n+3), .animetitle{font-weight:bold} .borderRBL{ border-width: 1px 1px 0 36px !important; } .header_cw background-position: 0px 0px; } .header_completed background-position: 0px -60px; } .header_onhold background-position: 0px -120px; } .header_dropped background-position: 0px -240px; } .header_ptw background-position: 0px -180px; } /* Block displaying category totals */ .category_totals{ background-color: rgba(0,0,0,0.5); border: solid 1px rgba(255,255,255,0.25); color: #fff; font-weight: bold; padding-left: 37px !important; padding: 2px; text-shadow: orange 1px 1px 2px,cyan -1px -1px 2px; } /* Text displaying global totals */ #grand_totals{ color: #fff; display: block; font-size: larger; font-weight: bold; padding: 5px; text-align: center; text-shadow: #c51 -1px -1px 3px, #c51 1px 1px 3px, #c51 1px -1px 4px, #c51 -1px 1px 3px; text-transform: uppercase; } /* Modifying copyright section */ #copyright{ background-color: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.25); color: white; margin-bottom: 40px; padding: 2px; } #copyright a{color: #FFF} #copyright br{display:none} /* Highlighting hovered row */ -o-transition: background-color .2s linear; -moz-transition: background-color .2s linear; -webkit-transition: background-color .2s linear; transition: background-color .2s linear; } tr:hover > .td1, tr:hover > .td2{ background-color: rgba(45,45,45,0.9) !important; tr:hover [class^="td"] { background-color: rgba(4, 150, 100, 0.9) !important; /*LIST HOVER COLOR This configures the look of the part with sort links: * the border and the background. * Colors are in rgba format which means first three values * define a color in Red-Green-Blue mode and the last one * sets up an opacity of the color: rgba(R,G,B,a) * Use color picker in Photoshop (or other image editor), * Opera Dragonfly or Rainbow Firefox extension to get desired * RGB values and then play with opacity until you get what you * wanted. */ tr:hover [class^=td] { background-color: rgba(4, 150, 100, 0.9) !important; } .table_header{ background-color: rgba(0,0,0,0.4); border-color: rgba(255,255,255,0.25); } .table_header, .table_headerLink{ /* Color of the sort links. I used short hex notation here but * you may use whatever you want, rgb, rgba or full-hex. This * won't be mentioned below, the way to change colors is the same */ color: #FFF; /* Remove the following line if you want links to be underlined */ text-decoration: none; } .table_headerLink:hover{ /* This configures a light white glow on hovered links * Changing colors should be enough here so I'll leave it for you. * It's the same rgba we've encountered. */ text-shadow: rgba(255,255,255,0.4) -1px -1px 3px, rgba(255,255,255,0.4) 1px 1px 3px; } /* The look of the rest of the * Configures background, border and text color for non-links * I made it a bit more opaque than sorting headers */ .td1, .td2{ background-color: rgba(0,0,0,0.6); border-color: rgba(255,255,255,0.25); color: #FFF; } /* This is for the links in the rest of the */ .td1 a, .td2 a{ text-decoration: none; /* Removes underline for these */ color: #ffc700; /* Paints links orange */ } /* Glow effect on link hover. The same text-shadow property */ .td1 a:hover, .td2 a:hover{ text-shadow: #9d9d31 -1px -1px 3px, #9d9d31 1px 1px 3px; } /* Header image for Currently Watching, Completed, Dropped, etc... */ .header_title{ color: transparent; content: none; height: 60px; margin-bottom: 5px; margin-left: auto; margin-right: auto; margin-top: 25px; width: 520px; } .header_cw background-position: 0px 0px; } .header_completed background-position: 0px -60px; } .header_onhold background-position: 0px -120px; } .header_dropped background-position: 0px -240px; } .header_ptw background-position: 0px -180px; } /*LIST HOVER COLOR This configures the look of the part with sort links: * the border and the background. * Colors are in rgba format which means first three values * define a color in Red-Green-Blue mode and the last one * sets up an opacity of the color: rgba(R,G,B,a) * Use color picker in Photoshop (or other image editor), * Opera Dragonfly or Rainbow Firefox extension to get desired * RGB values and then play with opacity until you get what you * wanted. */ tr:hover [class^=td] { background-color: rgba(4, 150, 100, 0.9) !important; } .table_header{ background-color: rgba(0,0,0,0.4); border-color: rgba(255,255,255,0.25); } .table_header, .table_headerLink{ /* Color of the sort links. I used short hex notation here but * you may use whatever you want, rgb, rgba or full-hex. This * won't be mentioned below, the way to change colors is the same */ color: #FFF; /* Remove the following line if you want links to be underlined */ text-decoration: none; } .table_headerLink:hover{ /* This configures a light white glow on hovered links * Changing colors should be enough here so I'll leave it for you. * It's the same rgba we've encountered. */ text-shadow: rgba(255,255,255,0.4) -1px -1px 3px, rgba(255,255,255,0.4) 1px 1px 3px; } /* The look of the rest of the * Configures background, border and text color for non-links * I made it a bit more opaque than sorting headers */ .td1, .td2{ background-color: rgba(0,0,0,0.6); border-color: rgba(255,255,255,0.25); color: #FFF; } /* This is for the links in the rest of the */ .td1 a, .td2 a{ text-decoration: none; /* Removes underline for these */ color: #ffc700; /* Paints links orange */ } /* Glow effect on link hover. The same text-shadow property */ .td1 a:hover, .td2 a:hover{ text-shadow: #9d9d31 -1px -1px 3px, #9d9d31 1px 1px 3px; } /* CURRENTLY WATCHING/READING HEADER This is the header above currently watching/reading. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_cw { background-image:url(http://i.imgur.com/VImNB.png); background-position: 190px 0px; height: 75px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* COMPLETED HEADER This is the header above completed animes and manga. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_completed { background-image:url(http://i.imgur.com/VImNB.png); background-position: 190px -50px; height: 75px; 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 height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_onhold { background-image:url(http://i.imgur.com/VImNB.png); background-position: 175px -110px; height: 75px; 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 height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_dropped { background-image:url(http://i.imgur.com/VImNB.png); background-position: 190px -230px; height: 75px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* PLAN TO WATCH/READ HEADER This is the header above the anime/manga you plan to see or read on your list. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_ptw { background-image:url(http://i.imgur.com/VImNB.png); background-position: 190px -175px; height: 75px; 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;} .header_title { color: gray !important; color: transparent !important; font-size: 1px !important; font-size: 0px !important; font-size: 0 !important; font-size: 0pt !important; } tr:hover [class^=td] { background-color: rgba(4, 150, 100, 0.9) !important; } |
Shishio-kunDec 23, 2012 11:58 AM
Dec 27, 2012 6:52 AM
#29
Request complete for -Miyu- I put the code for the header images at the top, so you can easily insert your own header images. With "height" you can adjust the size so that it fits your images. For now I left the text in the header in case somebody else wants to use the layout. Also, you can remove the banner if you don't like it, the fairy tail emblem will remain so that it still looks good. The layout works for both manga- and animelist by default. Code: @import "http://fonts.googleapis.com/css?family=Freckle+Face"; .header_cw { background-image: url(""); } .header_completed { background-image: url(""); } .header_onhold { background-image: url(""); } .header_dropped { background-image: url(""); } .header_ptw { background-image: url(""); } body { background-attachment: scroll; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background: url(https://dl.dropboxusercontent.com/u/97405770/Layout_FT/FT_pattern.png)!important; background-origin: padding-box; background-position: 0 0; background-repeat: repeat repeat !important; background-size: auto auto; } #list_surround { background: transparent url("https://dl.dropboxusercontent.com/u/97405770/Layout_FT/FT_banner.png") no-repeat scroll 0 0; padding-top: 505px; position: absolute !important; right: 10px !important; width: 700px; } #inlineContent { background-image: url("https://dl.dropboxusercontent.com/u/97405770/Layout_FT/FT_render.png"); background-size: 100% 100%; bottom: 0; display: inline !important; height: 100%; left: -250px; pointer-events: none !important; position: fixed; width: 890px; z-index: -2 !important; } #inlineContent::before { background: url("http://pre14.deviantart.net/f871/th/pre/i/2011/175/b/a/fairy_tail___logo_by_shadowfelkan-d3agy1t.png"); background-repeat: no-repeat; background-size: 50% auto; content: ""; display: block !important; height: 100%; left: 600px; pointer-events: none !important; position: fixed !important; top: 0; width: 100%; } status_selected a, .status_not_selected a { font-family: freckle face !important; } .header_title { background: transparent none repeat scroll 0 0; color: lightgray; font-family: freckle face; font-size: 76px; vertical-align: bottom !important; } .status_selected, .td1, #grand_totals { background-color: darkorange; background-image: url("none") !important; color: white; opacity: 0.8; } .status_not_selected, .table_header, .category_totals, .td2, #copyright { background-color: darkred; background-image: url("none") !important; color: white; opacity: 0.8; } .td2 { background-color: orange; border-style: none !important; } .td1, .td2 { padding-bottom: 3px !important; padding-top: 3px !important; } .status_selected:hover, .header_title:hover, .td1:hover, #grand_totals:hover { background-color: red; background-image: url("none") !important; opacity: 0.8; } .status_not_selected:hover, .table_header:hover, .category_totals:hover, .td2:hover, #copyright:hover { background-color: red; background-image: url("none") !important; opacity: 0.8; } .status_selected:hover, .header_title:hover, .td1:hover, #grand_totals:hover, .status_not_selected:hover, .table_header:hover, .category_totals:hover, .td2:hover, #copyright:hover, .status_selected, .header_title, .td1, #grand_totals, .status_not_selected, .table_header, .category_totals, .td2, #copyright { padding: 2px; } .animetitle, .animetitle:visited { color: white; font-family: freckle face; font-size: 14px; } .td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright { color: white; font-family: Calibri; } .status_selected, .status_not_selected { border-bottom-width: 4px !important; border-color: lightgray white; border-left: 2px none white; border-right: 2px none white; border-style: solid none; border-top-width: 4px !important; padding-bottom: 8px; padding-top: 8px; } .td1, .td2 { border-style: none; } .table_header { border-bottom-color: lightgray; border-bottom-style: solid; border-bottom-width: 4px !important; color: lightgray; font-family: freckle face; height: 60px; } .table_header a { font-family: freckle face; } .category_totals { border-color: lightgray; border-radius: 0 0 10px 10px; border-style: solid; border-width: 4px 0 0; padding: 5px; } body { background-color: black; background-repeat: no-repeat; } a { text-decoration: none; } a:visited { text-decoration: none; } a:hover, a:visited:hover { color: cyan; text-decoration: underline; } .category_totals, .td1, .td2, #grand_totals, #copyright { } #copyright::before { content: " Design by Lirina"; font-weight: bold; } .thickbox { color: cyan; font-family: Calibri; font-size: 12px; } .table_header { font-weight: bold; } .category_totals { height: 30px; } #copyright, #grand_totals { margin: 0 auto; text-align: center; } If you use this layout, please save the images as I don't have much space in my dropbox. Please feel free to contact me if you have any problems with this layout--either leave a comment on my profile or send me a message. |
LirinaFeb 21, 2016 1:37 AM
Dec 29, 2012 3:08 PM
#30
Request complete for Jiharo Jiharo said: Can I request an anime list style that features Yui from Sword Art Online? Any design is fine by me so long there is Yui's cute face :D Thanks a lot in advance for those who take my request up! By the way, I'm kinda new to this thing so how many request can I have in a post? Added DVD covers and top bar redux. :) Preview: Code: @import "http://dl.dropbox.com/u/78340470/CSSforCatgirls.css"; @import "http://dl.dropbox.com/u/78340470/animetitle.css"; @import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css"; /* MAIN BACKGROUND */ body { background: url("http://i290.photobucket.com/albums/ll279/komonora/horriblesubs-sword-art-online-11-720p-mkv_snapshot_11-42_2012-09-15_13-49-202_zpsd59e3ed9.jpg"); background-size: cover; background-attachment: fixed !important; } #inlineContent { display: inline-block !important; height: 50px !important; left: 0px !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 1600px !important; z-index: -1 !important; } /* TITLE The List header which by default says My Anime List can be changed out here. */ #list_surround { font-size: 81.25%; line-height: 1; margin: 0 auto; padding-bottom: 10px; padding-top: 30px; width: 1000px; } /* FONT Font used across the whole list. */ body { font-family: arial; } /* LINK COLOR */ a { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; color: #FFFFFF; text-decoration: none; text-shadow: none; } a:hover { color: #000000; text-shadow: 0 1px rgba(255, 255, 255, 0.15); } /* CATEGORY LINKS */ .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: rgba(0, 0, 0, 0.4); border-color: rgba(255, 255, 255, 0.5); border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #FFFFFF; display: block !important; font-weight: bold; padding: 20px; text-shadow: 0 1px rgba(0, 0, 0, 0.1); } .status_selected a { background-color: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.5); } .status_not_selected a:hover { background-color: rgba(0, 0, 0, 0.6); border-color: #FFFFFF; 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(255, 255, 255, 0.7); border-color: #FFFFFF; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.3); } /* HEADER */ .table_header { background-color: rgba(255, 255, 255, 0.2); } .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; } /* ROWS COLOR */ .td1 { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(51,51,51, 0.1); } .td2 { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(0, 0, 0, 0.1); } /* ROWS HOVER */ tr:hover [class^="td"] { background-color: rgba( 255, 255, 255, 0.6); } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } /* ROW FONT SIZE TRANSITION (FIREFOX ONLY) */ noindex:-moz-any-link, tr:hover td.td1, tr:hover td.td2 { font-size: 15px; } /* LIST SETTINGS */ .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: 30px; } .borderRBL{ line-height: normal !important; } [cellspacing="0"] { line-height: 17px; } [class^="header_"] +{ border-collapse: separate !important; } /* CATEGORY TOTALS */ .category_totals { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background-color: rgba(72, 64, 87, 0); border-radius: 0 0 3px 3px; color: rgba(0, 0, 0, 0); text-align: center; } .category_totals:hover { background-color: rgba(0, 0, 0, 0.8); color: #FFFFFF; } /* HEADER TEXT AND DIMENSIONS */ [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; display: inline-block; font-style: italic; height: auto; padding: 0 8px 0 0; color: #FFFFFF; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } /* BOTTOM OF LIST */ #grand_totals { background-color: rgba(0, 0, 0, 0); border: 0 none; border-radius: 3px 3px 3px 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-radius: 3px 3px 3px 3px; color: #EEEEEE; line-height: 17px; margin-top: 10px; padding: 8px; text-align: center; } #copyright:after { content: " CSS by Kyouhansha. Edits by TheHolyPotato. Google 'Shishio's Custom Lists' for more designs and info."; } /* CURRENTLY WATCHING/READING HEADER This is the header above currently watching/reading. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_cw { background-image:url(http://i50.tinypic.com/n4uxr8.png); background-position: 250px 0px; height: 110px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* COMPLETED HEADER This is the header above completed animes and manga. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_completed { background-image:url(http://i46.tinypic.com/30cruph.png); background-position: 230px 0px; height: 110px; 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 height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_onhold { background-image:url(http://i49.tinypic.com/wafymq.png); background-position: 290px 0px; height: 100px; 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 height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_dropped { background-image:url(http://i49.tinypic.com/qxjamt.png); background-position: 250px 0px; height: 110px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* PLAN TO WATCH/READ HEADER This is the header above the anime/manga you plan to see or read on your list. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_ptw { background-image:url(http://i46.tinypic.com/ot223n.png); background-position: 140px 0px; height: 100px; 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;} .header_title { color: gray !important; color: transparent !important; font-size: 1px !important; font-size: 0px !important; font-size: 0 !important; font-size: 0pt !important; } /* ROWS TRANSITION This controls the part where pics appear on your rows. It controls the timing. You can change the numbers. The first number in each row by default is .5s, this is a half second. It controls how fast the pic window "opens". The second number is the time it takes the window to begin opening. By default its set to .1s, a tenth of a second. If you changed it to 2s, it would take two seconds for the window to open. You'll need to change all the rows timings! They change different browser's timings. */ .td1, .td2 { transition: line-height .5s ease .1s; -o-transition: line-height .5s ease .1s; -moz-transition: line-height .5s ease .1s; -webkit-transition: line-height .5s ease .1s; } .td1, .td2 { line-height: 35px; } /* LIST ROWS HEIGHT ON HOVER This is the height of the rows when you put your cursor on them. */ tr:hover .td1, tr:hover .td2 { line-height: 340px; } /* AIRING */ .animetitle + small { position: relative; line-height: 1px !important; } td:nth-of-type(5) { line-height: 20px !important; } |
Shishio-kunDec 29, 2012 4:26 PM
Dec 30, 2012 9:41 PM
#31
Request complete for Dream_Works Dream_Works said: Can i request an Acchi Kocchi styled list please Thank you to whoever takes this ^^ A little variation of the "EF A tale of Memories style list" Preview: Code: @import "https://dl.dropbox.com/s/4u9v39e5go65aoq/PinkTopBar.css"; body { background-attachment:fixed !important; background-image:url(http://i49.tinypic.com/34ep7qw.jpg); background-position:initial initial; background-repeat:initial initial; background-size:cover; } * { border:0 none; color:#FFFFFF; font-family:Verdana; font-size:11px; font-weight:normal; text-decoration:none; } #inlineContent { background-attachment:scroll !important; background-color:transparent !important; background-image:url(http://i50.tinypic.com/2j4axj5.png) !important; background-position:50% 0 !important; background-repeat:no-repeat no-repeat !important; display:inline-block !important; height:425px !important; left:-582px !important; margin:auto !important; position:absolute; right:0 !important; top:-425px !important; width:900px !important; z-index:-1 !important; } #list_surround .status_selected, #list_surround .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i49.tinypic.com/34pynar.png); background-position:0 0; background-repeat:repeat repeat; display:block; height:100px; left:-283px; padding:0; position:absolute; top:0; width:270px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; } #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:transparent; background-image:url(http://i47.tinypic.com/10n6idy.jpg); background-position:0 0; background-repeat:repeat repeat; top:110px; } #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:transparent; background-image:url(http://i45.tinypic.com/13zwin6.png); background-position:0 0; background-repeat:repeat repeat; top:220px; } #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:transparent; background-image:url(http://i47.tinypic.com/rhsrhz.png); background-position:0 0; background-repeat:repeat repeat; top:330px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i47.tinypic.com/2qiyzog.png); background-position:0 0; background-repeat:repeat repeat; display:inline; top:440px; } #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:transparent; background-image:url(http://i47.tinypic.com/15yvri9.png); background-position:0 0; background-repeat:no-repeat no-repeat; display:inline; top:550px; } #list_surround .header_cw { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/djaJO.png); background-position:0 0; background-repeat:no-repeat no-repeat; } #list_surround .header_completed { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/3jcgG.png); background-position:0 0; background-repeat:no-repeat no-repeat; } #list_surround .header_onhold { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/L4bVw.png); background-position:0 0; background-repeat:no-repeat no-repeat; } #list_surround .header_ptw { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/cJTI9.png); background-position:0 0; background-repeat:no-repeat no-repeat; } #list_surround .header_dropped { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/gWhVk.png); background-position:0 0; background-repeat:no-repeat no-repeat; } a:hover { text-decoration:underline; } #list_surround { background-attachment:scroll; background-color:rgba(255, 77, 210, 0.74902); background-image:none; background-position:0 0; background-repeat:repeat repeat; border-bottom-color:#292929; border-bottom-style:solid; border-bottom-width:0; border-left-color:#292929; border-left-style:solid; border-left-width:0; border-right-color:#292929; border-right-style:solid; border-right-width:0; height:100%; left:141px; margin:239px auto 30px; position:relative; top:180px; width:618px; } #list_surround .status_selected a { color:transparent; display:block; font-size:1px; height:2px; padding:100px 0 0 240px; width:30px; } #list_surround .status_not_selected a { color:transparent; display:block; font-size:1px; height:2px; padding:100px 0 0 240px; width:30px; } #list_surround br { display:none; } #list_surround .header_title span { color:#000000; font-size:1px; } #list_surround .header_title .thickbox { display:none; } #list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped { margin-left:0; padding:28px 5px 5px; width:586px; } #list_surround .animetitle + small { color:#531AFF; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #mal_cs_listinfo a strong { color:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-variant:normal; font-weight:normal; text-decoration:underline; text-transform:none; } #mal_cs_otherlinks strong { color:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-variant:normal; } .borderRBL { color:#00FFFF !important; } #list_surround .header_title span { display:none; } #list_surround .status_not_selected a { opacity:0; } #list_surround .status_selected a { opacity:0; } #copyright { color:#3A4358; font-family:sans-serif; font-size:10px; height:15px; position:absolute; text-align:center !important; width:600px; } #copyright a { color:#3A4358; } #copyright { } tr:hover [class^="td"] { background-color:#AC00E6; } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align:left; } .status_not_selected { opacity:0.8; } .status_not_selected:hover { opacity:1; } * { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; |
TheHolyPotatoApr 9, 2013 4:54 PM
Dec 31, 2012 4:36 PM
#32
Request complete for Niyawa Niyawa said: Hi people. My request is pretty simple and I don't believe it will take much time to someone experienced to do this. I want a design for my anime/manga list that follows MyAnimeList itself. The colors, the borders, everything based on MAL. With only one effect if possible, that one when you hover the mouse in an element, there's a fade in and when you take it out, it comes back. I don't know the name so I had to put it like this. If someone needs more detail was to how it is, just ask me. Thanks. Preview: Code: @import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css"; tr:hover [class^="td"] { background-color:rgba(46, 81, 162, 0.8); } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align:left; } body { background-color:#FFFFFF; color:#000000; font-family:Verdana, Arial; font-size:11px; } #list_surround { margin:0 auto; width:920px; } a { color:#FFFFFF; text-decoration:none; } a:visited { color:#FFFFFF; text-decoration:none; } a:hover { color:#FFFFFF; text-decoration:underline; } .td1 { background-color:rgba(103, 103, 103, 0.6); border-color:#ABABAB; border-style:solid; border-width:0 1px 1px 0; color:#FFFFFF; padding:2px; } .td2 { background-color:rgba(103, 103, 103, 0.6); border-color:#ABABAB; border-style:solid; border-width:0 1px 1px 0; color:#FFFFFF; padding:2px; } .table_header { background-color:#2E51A2; border-color:#ABABAB; border-style:solid; border-width:1px 1px 1px 0; color:#000000; padding:2px; } .form { border:1px solid #ABABAB; color:#000000; font-family:Verdana, Arial; font-size:11px; padding:2px; } .status_not_selected, .status_selected { border:0 none !important; height:auto !important; padding:0; text-align:center !important; width:16.667% !important; } .status_not_selected a, .status_selected a { background-color:#2E51A2; border:0 solid rgba(255, 255, 255, 0.498039); border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:0; border-top-right-radius:0; 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:#2E51A2; border-color:rgba(255, 255, 255, 0.498039); } .status_not_selected a:hover { background-color:#E1E7F5; border-color:#201C3A; box-shadow:rgba(0, 0, 0, 0) 0 0 1px; color:#000000; text-shadow:rgba(0, 0, 0, 0) 0 0; } .status_selected a:hover { background-color:#E1E7F5; border-color:rgba(0, 0, 0, 0); box-shadow:rgba(0, 0, 0, 0) 0 0 1px; color:#000000; text-shadow:rgba(0, 0, 0, 0) 0 0; } .header_title { font-size:14px; font-weight:bold; } #grand_totals { text-align:center; } .header_al { font-size:16px; font-weight:bold; } .animetitle { font-weight:bold; } #copyright { margin:0 auto; padding-top:6px; text-align:center; width:920px; } * { border:0 none; color:#FFFFFF; font-family:'Segoe UI'; font-size:13px; font-weight:normal; text-decoration:none; } .category_totals { background-color:#2E51A2; border-bottom-style:solid; font-size:12px; text-align:center; height:20px; } .animetitle + small { color:#2E51A2 !important; font-weight:bold; font-size:11px; |
TheHolyPotatoApr 15, 2013 10:14 PM
Jan 1, 2013 6:06 PM
#33
Request complete for Shicari Shicari said: I know this is basically my first post, im not sure how much stuff like that matters on this forum, seniority and all. I was wondering if someone could make me a Bakemonogatari list style with this background https://www.dropbox.com/s/gfb472ry3xewwiw/konachan-com-57902-bakemonogatari-senjougahara_hitagi.jpg I also made these: https://www.dropbox.com/s/ox9uh1zeqimyylv/Nadeko.png https://www.dropbox.com/s/m1fy89hyast0ns4/Hitagi.png https://www.dropbox.com/s/fkp52e3zxk9e0kv/Hanekawa.png https://www.dropbox.com/s/pcxb9v2pvo8yvfr/Hachikuji.png https://www.dropbox.com/s/cwzl54hwzows2a7/Araragi.png Feel free to not use them if their unusable, I'm not amazing with this stuff so they're almost definitely the wrong size and such. Thanks! ^_^ I tried to make the background as visable as I could without the text blocking anyone. If you want the list shrunk and moved so it doesnt look so close just tell me :) Preview: Code: @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; body { background-attachment:fixed !important; background-image:url(http://i46.tinypic.com/2r5rho9.jpg); background-position:initial initial; background-repeat:initial initial; background-size:cover; } * { border:0 none; color: rgba(255, 255, 255, 0.8); font-family:Verdana; font-size:11px; font-weight:normal; text-decoration:initial; } #inlineContent { background-attachment:scroll !important; background-color:transparent !important; background-image:url(http://i45.tinypic.com/k9hvlx.png) !important; background-position:50% 0 !important; background-repeat:no-repeat no-repeat !important; display:inline-block !important; height:0 !important; left:0 !important; margin:auto !important; position:absolute; right:0 !important; top:0 !important; width:900px !important; z-index:-1 !important; } #list_surround .status_selected, #list_surround .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i50.tinypic.com/a5etew.jpg); background-position:0 0; background-repeat:repeat repeat; display:block; height:100px; left:-283px; padding:0; position:absolute; top:0; width:270px; } #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:transparent; background-image:url(http://i48.tinypic.com/35mqgpl.png); background-position:0 0; background-repeat:repeat repeat; top:110px; } #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:transparent; background-image:url(http://i49.tinypic.com/kak8jc.png); background-position:0 0; background-repeat:repeat repeat; top:220px; } #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:transparent; background-image:url(http://i48.tinypic.com/24lrk82.png); background-position:0 0; background-repeat:repeat repeat; top:330px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i46.tinypic.com/2nqcpw8.png); background-position:0 0; background-repeat:repeat repeat; display:inline; top:440px; } #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:transparent; background-image:url(http://i49.tinypic.com/23m92fs.png); background-position:0 0; background-repeat:no-repeat no-repeat; display:inline; padding-bottom:30px; top:550px; } #list_surround .header_cw { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/djaJO.png); background-position:0 0; background-repeat:no-repeat no-repeat; } #list_surround .header_completed { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/3jcgG.png); background-position:0 0; background-repeat:no-repeat no-repeat; } #list_surround .header_onhold { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/L4bVw.png); background-position:0 0; background-repeat:no-repeat no-repeat; } #list_surround .header_ptw { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/cJTI9.png); background-position:0 0; background-repeat:no-repeat no-repeat; } #list_surround .header_dropped { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/gWhVk.png); background-position:0 0; background-repeat:no-repeat no-repeat; } a:hover { text-decoration:underline; } #list_surround { background-attachment:scroll; background-color:rgba(0, 0, 0, 0.6); background-image:none; background-position:0 0; background-repeat:repeat repeat; border-bottom-color:#292929; border-bottom-style:solid; border-bottom-width:0; border-left-color:#292929; border-left-style:solid; border-left-width:0; border-right-color:#292929; border-right-style:solid; border-right-width:0; height:100%; left:140px; margin:239px auto 30px; position:relative; top:-220px; width:1000px; } #list_surround .status_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround .status_not_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround br { display:none; } #list_surround .header_title span { color:#000000; font-size:1px; } #list_surround .header_title .thickbox { display:none; } #list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped { margin-left:0; padding:28px 5px 5px; width:586px; } #list_surround .animetitle + small { color:#FF9E96; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #mal_cs_listinfo a strong { color:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-variant:normal; font-weight:normal; text-decoration:underline; text-transform:none; } #mal_cs_otherlinks strong { color:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-variant:normal; } .borderRBL { color:#00FFFF !important; } #list_surround .header_title span { display:none; } #list_surround .status_not_selected a { opacity:0; } #list_surround .status_selected a { opacity:0; } #copyright { color:#3A4358; font-family:sans-serif; font-size:10px; height:15px; position:absolute; text-align:center !important; width:600px; } #copyright a { color:#3A4358; } #copyright { } tr:hover [class^="td"] { background-color:#AC00E6; } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align:left; } /* LIST FONT These codes control the font on the list itself (anime titles, etc). */ * { border:0 none; color:#FFFFFF; font-family:Segoe UI; font-size:13px; font-weight:normal; text-decoration:none; } |
Shishio-kunJan 2, 2013 4:34 PM
Jan 12, 2013 6:09 PM
#34
Request complete for Legendre Legendre said: [ Hey all, I was looking through everything and I couldn't find a good Kino no Tabi layout, so I figured I might as well request one in case some lucky (or unlucky, depending on how you look at it =P) person was bored enough to take my request. I am absolutely terrible at making something look good with CSS coding (believe me I've tried and it wasn't pretty). I'd rather it not be anything too flashy with renders or a unique cursor, but other then that, everything else is up for grabs. There are a ton of good scans that I found, but I'm having a really hard time choosing between one -.- so I'll list a couple: http://gallery.minitokyo.net/view/284989 http://gallery.minitokyo.net/view/253496 http://gallery.minitokyo.net/view/109694 http://gallery.minitokyo.net/view/236569 I don't know lol.. those are just some ideas. As always, it's up the discretion of the person that accepts this request, if indeed it is accepted. Thank you ^_^ I know I already sent it in a message but just in case other people want to use it too here it is. Preview: Code: @import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css"; @import"http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; /* BACKGROUND */ body { background-attachment:fixed; background-clip:border-box; background-color:transparent; background-image:url(http://i1308.photobucket.com/albums/s608/TheHolyPotato/Legendres%20Category%20Links/Wallpaper_zpsb54d9377.jpg); background-position:0 10%, 0 0; background-repeat:no-repeat no-repeat; background-size:cover; font-family:calibri; } #inlineContent { 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; } /* TITLE */ #list_surround { background-attachment:scroll; background-color:transparent; background-image:url(); background-position:100% 0; background-repeat:no-repeat no-repeat; font-size:81.25%; line-height:1; margin:0 auto; padding-bottom:10px; padding-top:232px; position:absolute; right:-7px !important; width:900px; } /* TEXT */ body { font-family:arial; } a { color:#FFFFFF; text-decoration:initial; text-shadow:none; } a:hover { color:#000; text-shadow:none; /* CATEGORY LINKS */ } /* NO IDEA */ .table_header { background-color:rgba(0, 0, 0, 0.6); } .table_header:first-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:3px; 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:3px; } /* ROW COLORS */ .td1 { background-color:rgba(70, 70, 70, 0.3); height:65px; } .td2 { background-color:rgba(30, 30, 30, 0.3); height:65px; } /* NO IDEA */ .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 */ .category_totals { background-color:rgba(0, 0, 0, 0.6); border-bottom-left-radius:20px; border-bottom-right-radius:0; border-top-left-radius:0; border-top-right-radius:0; color:#FFFFFF; text-align:center; } /* NO IDEA */ [class^="header_"] * { background-repeat:no-repeat no-repeat; font-size:0px; 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 */ #grand_totals { background-color: rgba(0, 46, 184,0.8); 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 */ #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 { content:' CSS by Kyouhansha. Edits by Shishio-kun and Veriti. Google 'Shishio's Custom Lists' for more designs and info.'; } /* DVD COVERS */ .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 #FFF; 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; } /* NO IDEA */ .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; } /******************/ /* CATEGORY LINKS */ /******************/ /********************************/ /* Note: */ /* Properties in "Watching" */ /* are applied to others as well*/ /********************************/ /* Watching */ #list_surround .status_selected, #list_surround .status_not_selected { background-color:transparent; background-image:url(http://i1308.photobucket.com/albums/s608/TheHolyPotato/Legendres%20Category%20Links/Watch_zps7123657d.png); background-position:right top; background-size:contain; background-repeat:no-repeat; display:block; position:absolute; height:80; width:300px; left:-375px; top:374px; padding:0px; /* Rounded Edges */ border:1px solid transparent; border-radius: 20px; -webkit-background-clip: padding-box !important; background-clip: padding-box !important; } /* Completed */ #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://i1308.photobucket.com/albums/s608/TheHolyPotato/Legendres%20Category%20Links/Comp_zpsb038bd6f.png); background-position:right top; top:474px; } /* On-Hold */ #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://i1308.photobucket.com/albums/s608/TheHolyPotato/Legendres%20Category%20Links/OnHold_zpsc7fddeb6.png); background-position:left top; top:574px; } /* Dropped */ #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://i1308.photobucket.com/albums/s608/TheHolyPotato/Legendres%20Category%20Links/Dropped_zps2d9edd4a.png); background-position:right top; top:674px; } /* Plan to Watch */ #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://i1308.photobucket.com/albums/s608/TheHolyPotato/Legendres%20Category%20Links/PlanToWatch_zpsb14417a8.png); background-position:left top; top:774px; } /* All */ #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://i1308.photobucket.com/albums/s608/TheHolyPotato/Legendres%20Category%20Links/All_zps549974fa.png); background-position:right top; top:874px; } /* Invisable Links */ .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color: transparent; display:block; width:300px; height:80px; } /********************/ /* CATEGORY HEADERS */ /********************/ .header_cw { background-color:transparent; background-image:url(http://i47.tinypic.com/jpgfi9.png); background-position:0 125px; background-repeat:no-repeat no-repeat; height:50px; margin-bottom:0; margin-top:-100px; } .header_completed { background-color:transparent; background-image:url(http://i46.tinypic.com/op5hg1.png); background-position:0 125px; background-repeat:no-repeat no-repeat; height:50px; margin-bottom:0; margin-top:-100px; } .header_onhold { background-color:transparent; background-image:url(http://i47.tinypic.com/25jv6h4.png); background-position:0 130px; background-repeat:no-repeat no-repeat; height:50px; margin-bottom:0; margin-top:-100px; } .header_dropped { background-color:transparent; background-image:url(http://i47.tinypic.com/25yzx2g.png); background-position:0 125px; background-repeat:no-repeat no-repeat; height:50px; margin-bottom:0; margin-top:-100px; } .header_ptw { background-color:transparent; background-image:url(http://i48.tinypic.com/2m3mjj8.png); background-position:0 130px; background-repeat:no-repeat no-repeat; height:50px; margin-bottom:0; margin-top:-100px; } .status_selected { display:block; } .status_not_selected { display:block; } .status_not_selected { opacity:0.7; } .status_not_selected:hover { color:transparent; opacity:1; } .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; } * { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; |
TheHolyPotatoApr 3, 2013 2:53 PM
Jan 15, 2013 6:56 PM
#35
Request taken It would be great if I could get a list that works well with writing mini-reviews. I'm already using a custom style, which is slightly modified from a preset here [I probably butchered the code while trying to make pictures smaller]. I'd be happy with anything that supports a "comment" section -- a list that's pretty to the eyes, but also simple would be appreciated. I don't have a specific preference for how the list should look, but it would be nice if it involved a series that I've already watched. This is incredibly vague, but thanks for your consideration regardless. |
Shishio-kunJan 22, 2013 8:12 PM
Jan 16, 2013 9:26 AM
#36
Request complete for KlinsK KlinsK said: Hello :) Can i request a Hunter X Hunter (2011) theme for my anime list? If it's possible, with header custom like this one : http://myanimelist.net/forum/?topicid=314657 and with a " Klinsk's anime list " at the top :) I'm not bad at making css, but i don't know anything about making header custom like this one so... Thanks a lot dudes, and to the one that will take my request ! :) I wanted to do something else but I couldn't find a good background so I made one myself. However with my very poor image editing skills I couldn't do more than putting several images over each other and Killua in between. Didn't think it would look that good. ^^° The list banner has your name on it, I just took the picture before uploading the banner. Code: @import url(http://fonts.googleapis.com/css?family=Joti+One); @import url(http://fonts.googleapis.com/css?family=Aclonica); @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; BODY { background: url("http://i47.tinypic.com/99jviu.png") no-repeat fixed 0 0 / cover transparent; color: #FFFFFF; font-family: calibri; font-size: 11px; } #list_surround { background: url("http://image-upload.de/image/YSvSaZ/b62da40e12.png") no-repeat scroll 0 0 transparent; margin-left: 80px; padding-top: 370px; width: 760px; } a { color: #FFFFFF; text-decoration: none; } a:hover { color: #757575; text-decoration: none; } .td1 { background-color: rgba(0, 40, 35, 0.7); border-style: none; color: #FFFFFF; padding: 5px; } .td2 { background-color: rgba(0, 40, 35, 0.7); border-style: none; color: #FFFFFF; padding: 5px; } td:nth-of-type(2) small { color: darkblue; font-size: 0px; } td:nth-of-type(2) small a { color: #00284E; text-shadow: 0 0 3px white; font-family: joti one; font-size: 8px; } #list_surround small a { display: none; } .table_header { background-color: rgba(0, 40, 4, 0.7); border-style: none; color: #00284E; font-family: 'Aclonica', sans-serif; font-size: 13px; font-weight: bold !important; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 50px !important; text-align: center; text-shadow: 0 0 3px lightgreen; } .td1:last-child, .td2:last-child { background: -moz-linear-gradient(left center , rgba(0, 40, 35, 0.7) 35%, rgba(0, 40, 35, 0.4) 62%, rgba(0, 40, 35, 0) 100%) repeat scroll 0 0%, none repeat scroll 0 0 rgba(110, 72, 181, 0) !important; border-right-style: none !important; } .td1:first-child, .td2:first-child { background: -moz-linear-gradient(right center , rgba(0, 40, 35, 0.7) 35%, rgba(0, 40, 35, 0.4) 62%, rgba(0, 40, 35, 0) 100%) repeat scroll 0 0%, none repeat scroll 0 0 rgba(110, 72, 181, 0) !important; border-left-style: none !important; } .table_header:last-child { background: -moz-linear-gradient(left center , rgba(0, 40, 4, 0.7) 35%, rgba(0, 40, 4, 0.4) 62%, rgba(0, 40, 4, 0) 100%) repeat scroll 0 0%, none repeat scroll 0 0 rgba(110, 72, 181, 0) !important; border-right-style: none !important; border-radius:0 90px 0 0; } .table_header:first-child { background: -moz-linear-gradient(right center , rgba(0, 40, 4, 0.7) 35%, rgba(0, 40, 4, 0.4) 62%, rgba(0, 40, 4, 0) 100%) repeat scroll 0 0%, none repeat scroll 0 0 rgba(110, 72, 181, 0) !important; border-left-style: none !important; border-radius:90px 0 0 0; } .table_headerLink { color: #00284E; font-family: 'Aclonica', sans-serif; font-weight: bold !important; text-shadow: 0 0 3px lightgreen; } .table_headerLink:hover { color: #757575; } .form { border-color: #ABABAB; border-style: solid; border-width: 1px; color: #000000; font-family: Verdana,Arial; font-size: 11px; padding: 2px; } /*#######################################################*/ /*##############CATEGORY BUTTONS#######################*/ /*#######################################################*/ status_not_selected, .status_selected { width: 16.66% !important; } .status_not_selected a, .status_selected a { background-color: transparent; color: #FFFFFF; display: inline !important; font-size: 14px; padding: 8px; text-align: center !important; text-shadow: 0 0 5px white; font-family: 'joti one'; border-color: black; border-radius: 10px 10px 10px 10px; border-style: outset; border-width: 1.5px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.8); } .status_selected a { border-style: inset; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.9) inset; color: white; } .status_not_selected a:hover { border-color: black; border-style: inset; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.9) inset; text-shadow: 0 1px rgba(0, 0, 0, 0.3); } /*#######################################################*/ /*############################Header#####################*/ /*#######################################################*/ .header_cw { background: url(http://image-upload.de/image/wcbVUZ/78fecdcdac.png) no-repeat; height: 200px; margin-top: 100px; margin-bottom: -25px; padding-top: 70px; border-radius: 90px 90px 30px 30px; width: 700px; opacity: 0.8; background-position: right; } .header_completed { background: url("http://image-upload.de/image/z7vhTB/c179f5dac1.png") no-repeat scroll 0 0 transparent; border-radius: 90px 90px 30px 30px; width: 700px; height: 200px; margin-bottom: -25px; margin-top: 100px; opacity: 0.9; padding-top: 70px; } .header_onhold { background: url(http://image-upload.de/image/qGKiMI/fc9875b376.png) no-repeat; border-radius: 90px 90px 30px 30px; width: 700px; height: 200px; margin-top: 100px; margin-bottom: -25px; padding-top: 70px; opacity: 0.9; } .header_dropped { background: url(http://image-upload.de/image/biKnoE/660914fcab.png) no-repeat; border-radius: 90px 90px 30px 30px; width: 700px; height: 200px; margin-top: 100px; margin-bottom: -25px; padding-top: 70px; opacity: 0.8; } .header_ptw { background: url(http://image-upload.de/image/ZrVTd0/ae76be205d.png) no-repeat center; border-radius: 90px 90px 30px 30px; width: 700px; height: 200px; margin-bottom: -25px; margin-top: 100px; padding-top: 70px; } .header_title { color: rgba(255, 255, 255, 0.6); font-family: 'Joti One',cursive; font-size: 70px; font-weight: bold; margin-top: 50px; text-align: center; text-shadow: 0px 8px 5px rgba(70, 150, 205, 0.8), 0px -5px 7px lightyellow; } .category_totals { background: -moz-linear-gradient(left center , rgba(0, 40, 4, 0) 0%, rgba(0, 40, 4, 0.7) 3%, rgba(0, 40, 4, 0.7) 95%, rgba(0, 40, 4, 0) 100%) repeat scroll 0 0%, none repeat scroll 0 0 rgba(110, 72, 181, 0) !important; padding-bottom: 15px; padding-top: 15px; text-align: center; font-family: 'Aclonica', sans-serif; color: #00284E; font-size:13px; text-shadow: 0 0 3px lightgreen; font-weight:bold; border-radius: 0 0 90px 90px; } #grand_totals { background: -moz-linear-gradient(left center , rgba(0, 40, 4, 0) 0%, rgba(0, 40, 4, 0.7) 3%, rgba(0, 40, 4, 0.7) 95%, rgba(0, 40, 4, 0) 100%) repeat scroll 0 0%, none repeat scroll 0 0 rgba(110, 72, 181, 0) !important; text-align: center; color: gold; font-family: joti one; font-size: 14px; padding-top: 10px; padding-bottom: 10px; text-shadow: 0 0 16px darkblue; border-radius: 90px; } .header_al { font-size: 16px; font-weight: bold; } .header_al_links { } .animetitle { font-family: joti one; font-size: 12px; text-shadow: 0 0 2px yellow, 5px 5px 23px lightyellow; } #copyright:before { content: "Design by Lirina"; display: block; font-size: 20px; font-weight: bold; font-family: 'Aclonica', sans-serif; color:gold; text-shadow: 0 0 16px darkblue; } #copyright { background: -moz-linear-gradient(left center , rgba(0, 40, 4, 0) 0%, rgba(0, 40, 35, 0.7) 3%, rgba(0, 40, 35, 0.7) 95%, rgba(0, 40, 4, 0) 100%) repeat scroll 0 0%, none repeat scroll 0 0 rgba(110, 72, 181, 0) !important; margin-bottom: 50px; margin-left: auto; margin-right: auto; margin-top: 50px !important; padding: 10px; text-align: center; border-radius:90px; } #inlineContent { background: url("http://image-upload.de/image/ykm8hs/60803131ab.png") repeat scroll 0 0 / 105% auto transparent; bottom: -50px; display: inline !important; height: 630px; left: -80px; opacity: 0.7; pointer-events: none !important; position: fixed; width: 290px; z-index:-2; } #list_surround:after { background: url("http://image-upload.de/image/HtXHlo/83b44a99c4.png") repeat scroll 0 0 transparent; height: 100%; width: 100%; z-index: 2; display: inline; content: ' '; position: fixed; left: 0px; background-size: cover; background-position: right; pointer-events: none !important; bottom:0 !important; } Blank banner without text for customized use: |
Shishio-kunJan 18, 2013 9:53 PM
Jan 18, 2013 9:06 PM
#37
Request complete for ecoute ecoute said: So, I've got the idea for my AnimeList look. First of all, I'd like its theme to be Revy from Black Lagoon... I've got quite a few nice pics of her, so I'd like to use each one of them to the different page (Watching, Completed etc.), just like HERE: So, here they are: Pic 1 Pic 2 Pic 3 Pic 4 Pic 5 When it comes to colors, some dark ones with a bit of red would be nice. And also, I really liked the idea of THIS layout. Cover pics and mini-reviews would be perfect for me. Just to be clear - I know how to change the layout of my list (it's not that difficult, is it?). Thanks in advance. Here's the list CSS with the all five different page pics and Reviewer's layout style you wanted. Since you wanted dark colors I used a lot of silver- its the best dark color you can use on black imo. It has a little red like you asked and a fade-in red effect on parts and links you move the cursor over, plus there's custom header text on the top of each page to give each category a more Black Lagoon feel. btw the mini-reviews in these screenshots are mine, you will be able to write your own of course. Also where it says My Rating next to score it will say Ecoute's rating when you install the layout to your list. Click the "edit" text on the lower-right of the box under the score to put in mini-reviews. Have fun! The code: @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; @import "http://dl.dropbox.com/u/78340470/Past%20Stuff/Member%20CSS/ecoute_anime.css"; @import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css"; @import "http://fonts.googleapis.com/css?family=Share+Tech+Mono"; /* Text next to your rating. Says "Ecoute's rating" by default. */ .td1[align="center"][width="45"]:before, .td2[align="center"][width="45"]:before { color: silver; content: " Ecoute's rating: "; font-family: share tech mono; font-size: 17px; } /* Backgrounds. */ .status_selected { background-attachment: fixed !important; background-clip: border-box !important; background-image: url("http://i.imgur.com/HyWx4xn.jpg") !important; background-repeat: repeat !important; background-size: cover !important; height: 2000px !important; left: 0 !important; position: fixed !important; top: 0 !important; width: 2000px !important; z-index: -1 !important; } .status_not_selected + .status_selected { background-attachment: fixed !important; background-clip: border-box !important; background-image: url("http://i.imgur.com/1nqW4jy.png") !important; background-origin: padding-box !important; background-position: 166% 0 !important; background-repeat: no-repeat !important; background-size: contain !important; height: 2000px !important; left: 0 !important; position: fixed !important; top: 0 !important; width: 2000px !important; z-index: -1 !important; } .status_not_selected + .status_not_selected + .status_selected { background-attachment: fixed !important; background-clip: border-box !important; background-image: url("http://i.imgur.com/ey0Oc0Y.jpg") !important; background-origin: padding-box !important; background-position: 672% 0 !important; background-repeat: no-repeat !important; background-size: contain !important; height: 100%; left: 0 !important; position: fixed !important; top: 0 !important; width: 100% !important; z-index: -1 !important; } .status_not_selected + .status_not_selected + .status_not_selected + .status_selected { background-attachment: fixed !important; background-clip: border-box !important; background-image: url("http://i.imgur.com/KEp8buV.jpg") !important; background-origin: padding-box !important; background-position: -179% 7% !important; background-repeat: no-repeat !important; background-size: contain !important; height: 100%; left: 0 !important; position: fixed !important; top: 0 !important; width: 100%; z-index: -1 !important; } .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected { background-attachment: fixed !important; background-clip: border-box !important; background-image: url("http://i.imgur.com/HhMdp9z.jpg") !important; background-origin: padding-box !important; background-position: 101% 0 !important; background-repeat: no-repeat !important; background-size: contain !important; height: 2000px !important; left: 0 !important; position: fixed !important; top: 0 !important; width: 2000px !important; z-index: -1 !important; } /* Headers */ .header_cw { background-color: transparent; background-image: url("http://i.imgur.com/GY6TnGF.png"); background-position: center center; background-repeat: no-repeat; height: 97px; margin-bottom: 0; } .header_completed { background-color: transparent; background-image: url("http://i.imgur.com/pMv63HF.png"); background-position: center center; background-repeat: no-repeat; height: 97px; margin-bottom: 0; } .header_onhold { background-color: transparent; background-image: url("http://i.imgur.com/tgxSAhM.png"); background-position: center center; background-repeat: no-repeat; height: 97px; margin-bottom: 0; } .header_dropped { background-color: transparent; background-image: url("http://i.imgur.com/pKI2dMM.png"); background-position: center center; background-repeat: no-repeat; height: 97px; margin-bottom: 0; } .header_ptw { background-color: transparent; background-image: url("http://i.imgur.com/JLrohV2.png"); background-position: center center; background-repeat: no-repeat; height: 96px; margin-bottom: 0; } /* Other codes. Got a question or want to learn more? Try this link: http://myanimelist.net/forum/?topicid=419405&show=0#post1 */ body { background-color: black; } * { font-family: Share Tech Mono; } :hover { transition: all 0.5s ease 0s; } .header_title { background-color: transparent; background-position: center top; } .table_header { background-color: black; } .animetitle, .animetitle:visited { color: white; font-family: microsoft sans-serif; font-size: 22px; } .td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright { color: silver; font-family: share tech mono !important; font-size: 17px; } .td1[align="center"][width="45"], .td2[align="center"][width="45"] { background: none repeat scroll 0 0 transparent; color: gold !important; font-size: 40px; margin-top: 62px; position: absolute; right: 164px; width: 206px; } .td1[align="center"][width="45"] a, .td2[align="center"][width="45"] a { color: gold; font-size: 40px; } td:nth-of-type(6) a { color: white; font-family: share Tech Mono; font-size: 15px; } #list_surround { width: 600px; } #list_surround { left: 5px !important; margin-top: -49px !important; position: absolute !important; } #list_surround { background-color: transparent; background-image: url("none"); } .hide { background-position: left top; background-repeat: no-repeat; background-size: contain; display: inline-block !important; height: 233px; margin-bottom: 10px; margin-left: 0; margin-top: 5px; position: relative; width: 245px !important; } body { background-attachment: fixed; background-position: left top; background-size: cover; } .table_header:nth-of-type(3) { background: none repeat scroll 0 0 transparent !important; position: absolute; right: 182px; top: 158px; width: 140px; } .table_header:nth-of-type(3) { background: none repeat scroll 0 0 black; } .table_header:nth-of-type(3):before { color: white; content: " Sort by: "; font-family: share tech mono; font-size: 15px; font-weight: normal; } td:nth-of-type(6) { font-family: Share Tech Mono !important; height: 124px !important; margin-left: -371px; margin-top: 115px; position: absolute; width: 361px; } body { background-color: black; background-repeat: no-repeat; } #list_surround { left: 0; margin: auto; position: absolute; right: 0; } a { text-decoration: none; } a:visited { text-decoration: none; } a:hover, a:visited:hover { color: black; text-decoration: underline; } .category_totals, .td1, .td2, #grand_totals, #copyright { background-image: url("http://img15.imageshack.us/img15/228/frame6518.png"); border-width: 0; padding: 2px; } .td1[align="center"][width="45"]:hover, .td2[align="center"][width="45"]:hover { background: none repeat scroll 0 0 red; } .category_totals:hover, .td1:hover, .td2:hover, #grand_totals:hover, #copyright:hover { background-color: red !important; background-image: none !important; border-width: 0; padding: 2px; } #copyright:after { content: "Custom CSS by Shishio-kun. Google Shishios Custom Lists for more layouts."; } .status_selected { background-color: black; color: white; padding: 2px; text-decoration: blink; } .status_not_selected { background-color: black; color: white; padding: 2px; } .status_selected a { color: blue; } .status_not_selected a { color: white; } .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background: none repeat scroll 0 0 black; display: none; height: 20px !important; margin-left: 0; margin-top: 0; padding-top: 0 !important; position: relative !important; width: 100px; } .thickbox { color: cyan; font-family: fantasy; font-size: 12px; } .header_title { height: 32px; padding: 2px; } .table_header { border-width: 0; font-weight: bold; padding: 2px; } .category_totals { color: white; font-size: 14px; height: 30px; } #copyright, #grand_totals { color: white; font-size: 12px; margin: 0 auto; text-align: center; } .table_header:nth-of-type(6) { display: none; } #inlineContent { background-image: url("http://i39.tinypic.com/2exr03p.png"); background-position: center center; background-repeat: repeat-x; bottom: 0; display: block !important; height: 80px; left: 0; margin-bottom: 0; position: fixed; width: 100%; z-index: -1; } td:nth-of-type(6) small { margin-left: -357px; margin-top: 110px; position: absolute; } .status_selected a, .status_not_selected a { background: none repeat scroll 0 0 transparent !important; color: red; font-family: Share Tech Mono; font-size: 121%; left: 2%; position: fixed; top: 7%; } .status_not_selected a { color: silver; } .status_selected + .status_not_selected a, .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected a { background: none repeat scroll 0 0 transparent !important; left: 2%; position: fixed; top: 12%; } .status_selected + .status_not_selected a:hover, .status_not_selected + .status_selected a:hover, .status_not_selected + .status_not_selected a:hover { background: none repeat scroll 0 0 red !important; } .status_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected + .status_not_selected a { background: none repeat scroll 0 0 transparent !important; left: 2%; position: fixed; top: 17%; } .status_selected + .status_not_selected + .status_not_selected a:hover, .status_not_selected + .status_selected + .status_not_selected a:hover, .status_not_selected + .status_not_selected + .status_selected a:hover, .status_not_selected + .status_not_selected + .status_not_selected a:hover { background: none repeat scroll 0 0 red !important; color: black !important; } .status_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a { background: none repeat scroll 0 0 transparent !important; left: 2%; position: fixed; top: 22%; } .status_selected + .status_not_selected + .status_not_selected + .status_not_selected a:hover, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected a:hover, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected a:hover, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected a:hover, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a:hover { background: none repeat scroll 0 0 red !important; color: black !important; } .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a { background: none repeat scroll 0 0 transparent !important; left: 2%; position: fixed; top: 27%; } .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a:hover, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected a:hover, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected a:hover, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected a:hover, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected a:hover, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a:hover { background: none repeat scroll 0 0 red !important; color: black !important; } .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a, .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected a { display: none !important; } .status_selected, .status_not_selected, .status_selected:hover, .status_not_selected:hover { background: none repeat scroll 0 0 transparent; border: medium none; } .header_title { background-color: transparent !important; } .header_title { color: transparent !important; font-size: 0 !important; } a:hover, .a:hover { background: none repeat scroll 0 0 red !important; } |
Shishio-kunJan 18, 2013 9:57 PM
Jan 18, 2013 10:48 PM
#38
Request complete for Dutchie-chi Preview Code: @import url(http://fonts.googleapis.com/css?family=Astloch); /* Custom fonts */ @import url(http://dl.dropbox.com/u/78192465/MyAnimeList/xxxHolic/TabContent.css); @import url(http://dl.dropbox.com/u/78192465/MyAnimeList/xxxHolic/TopMenu.css); @import url(http://dl.dropbox.com/u/78192465/MyAnimeList/xxxHolic/CategoryMenu.css); * { cursor: url('http://dl.dropbox.com/u/78192465/MyAnimeList/xxxHolic/Images/cursor.png'), auto; } #list_surround br { display:none; } body:before { position: fixed !important; display: block; content: ''; left: 0; top: 0; width: 100%; height: 100%; background-image: url(http://dl.dropbox.com/u/78192465/MyAnimeList/xxxHolic/Images/Yuuko.png); background-repeat: no-repeat; background-position: left center; background-size: contain; } body { background-image: url('http://dl.dropbox.com/u/78192465/MyAnimeList/xxxHolic/Images/background.png'); /* City background */ background-repeat: repeat; color: #ffa67e; font-size: 12px; font-weight: 600; font-family: 'Astloch', cursive; /* Custom font */ letter-spacing: 1.5px; } a { text-decoration: none; } #list_surround:before { position: absolute !important; display: block; content: ''; left: 480px; top: -154px; width: 300px; height: 156px; background: url(http://dl.dropbox.com/u/78192465/MyAnimeList/xxxHolic/Images/mokona.png) no-repeat; z-index: 1; } #list_surround { position: relative !important; left: 45%; top: 128px; width: 650px; margin-bottom: 164px; padding-left: 12px; border: 40px solid transparent; background-color: rgba(0, 0, 0, 1); border-radius: 10px; -o-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-image: url(http://dl.dropbox.com/u/78192465/MyAnimeList/xxxHolic/Images/frame.png) 40 round; -o-border-image: url(http://dl.dropbox.com/u/78192465/MyAnimeList/xxxHolic/Images/frame.png) 40 round; -moz-border-image: url(http://dl.dropbox.com/u/78192465/MyAnimeList/xxxHolic/Images/frame.png) 40 round; -webkit-border-image: url(http://dl.dropbox.com/u/78192465/MyAnimeList/xxxHolic/Images/frame.png) 40 round; } .animetitle { font-size: 16px; font-weight: 600; color: #ffa67e; } .td1, .td2 { font-size: 12px; color: #ffa67e; line-height: 24px !important; } .td1 a, .td2 a { color: #ffa67e; } #list_surround .header_title span { display: none; } .category_totals { position: absolute !important; display: inline-block !important; margin-top: 58px; width: 646px !important; padding: 2px; font-size: 10px; font-weight: 600; line-height: 22px; text-align: center !important; z-index: 5; } #grand_totals { display: none; } #copyright { position: relative !important; margin-top: 0 !important; padding: 4px 0 4px; text-align: center; border-top: solid 1px #35366e; border-bottom: solid 1px #35366e; } #copyright a { color: #d9898a; font-weight: 600; } #copyright a:hover { text-decoration: underline; } #copyright:after { display: block; content: 'List designed by Hahaido.'; } |
Shishio-kunMay 28, 2013 6:06 PM
Jan 21, 2013 7:19 PM
#39
Request complete for Chrono5h1ft Chrono5h1ft said: (Let's hope that it won't get deleted again) Hi, was wondering if you guys could make me a Sakurasou no Pet na Kanojo anime/manga list? Many thanks! I love this one so much! This is definetly my favorite list I've done so far. Ok since I know the show is really colorful in a sense I tried to go off that. I couldn't find any good wallpapers from the actual show so I used a colorful wallpaper which looks great (In my opinion :P) You can make the anime pictures larger by hovering over them. Its better if you hover over the left side of the pictures or else it goes all glitchy. (This is not my layout, credit goes to the original maker)There were no renders for the people in the category links so I had to photoshop all of them which probably took the most time but it was worth it. The category links stay with the page when you scroll so you always see them. They may look far from the bottom but thats just because I took the picture in full screen. Also I matched the category headers and category links with the logo colors :) Sorry for the wall of text :P Preview: Code: @import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css"; @import "https://dl.dropbox.com/s/6ruszt29qyk3yzi/SakorasouTopBar.css"; body { background-attachment:fixed; background-clip:border-box; background-color:transparent; background-image:url(http://i1308.photobucket.com/albums/s608/TheHolyPotato/Sakurasou/colorful-pencils-hd-wallpapers_zps672e9481.jpg); background-position:0 50%, 0 0; background-repeat:no-repeat no-repeat; background-size:cover; font-family:calibri; } #inlineContent { 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-attachment:scroll; background-color:transparent; background-image:url(http://i48.tinypic.com/23r0fhg.png); background-position:40px -10px; background-repeat:no-repeat no-repeat; font-size:87%; line-height:1; margin:0 auto; padding-bottom:10px; padding-top:290px; position:absolute; right:80px !important; width:800px; } a { color:#FFFFFF; text-decoration:none; text-shadow:none; } a:hover { text-decoration:underline; } .table_header { background-color:rgba(255, 255, 255, 0.498039); } .table_header:first-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:6px; 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:6px; } .td1 { background-color:rgba(70, 70, 70, 0.498039); height:65px; } .td2 { background-color:rgba(50, 50, 50, 0.498039); height:65px; } .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border:0 none; padding:4px; text-align:center; vertical-align:top; } .table_header, .td1, .td2, .category_totals { color:white; } .borderRBL { line-height:normal !important; } [cellspacing="0"] { line-height:17px; } .category_totals { background-color:rgba(255, 255, 255, 0.498039); border-bottom-left-radius:6px; border-bottom-right-radius:6px; 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: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; } #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; } .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-size:87%; height:0 !important; left:70px; line-height:16px !important; margin-top:16px; position:absolute; text-align:justify !important; width:720px; z-index:2; } .table_header:nth-of-type(6) { display:none; } span[id*="tagRow"] { display:block !important; } span[id*="tagLinks"] { display:none !important; } a, .td1, .td2, .category_totals { -webkit-transition:all 0.25s ease-in-out 0s; transition:all 0.25s ease-in-out 0s; } #list_surround .status_selected, #list_surround .status_not_selected { -webkit-background-clip:padding-box !important; background-clip:padding-box !important; background-color:transparent; background-image:url(http://i1308.photobucket.com/albums/s608/TheHolyPotato/Sakurasou/donewatch_zpsca2e7ada.png); background-position:100% 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:50px; padding:0; position:fixed; top:30px; width:350px; } #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://i1308.photobucket.com/albums/s608/TheHolyPotato/Sakurasou/donecomp_zps638c3a09.png); background-position:100% 0; top:130px; } #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://i1308.photobucket.com/albums/s608/TheHolyPotato/Sakurasou/donehold_zpsbc5c2cf9.png); background-position:0 0; top:230px; } #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://i1308.photobucket.com/albums/s608/TheHolyPotato/Sakurasou/donedrop_zps7408f3b1.png); background-position:100% 0; top:330px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1308.photobucket.com/albums/s608/TheHolyPotato/Sakurasou/doneplan_zpsb28841ad.png); background-position:0 0; top:430px; } #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://i1308.photobucket.com/albums/s608/TheHolyPotato/Sakurasou/doneall_zpsf0e07cd3.png); background-position:100% 0; top:530px; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color:transparent; display:block; font-size:0; height:80px; width:350px; } .header_cw { background-color:transparent; background-image:url(http://i47.tinypic.com/25f4r51.png); background-position:0 -94px; background-repeat:no-repeat no-repeat; height:50px; margin-bottom:0; margin-top:-120px; } .header_completed { background-color:transparent; background-image:url(http://i50.tinypic.com/2hmqc1t.png); background-position:0 -95px; background-repeat:no-repeat no-repeat; height:50px; margin-bottom:0; margin-top:-120px; } .header_onhold { background-color:transparent; background-image:url(http://i50.tinypic.com/34xs3es.png); background-position:0 -85px; background-repeat:no-repeat no-repeat; height:50px; margin-bottom:0; margin-top:-120px; } .header_dropped { background-color:transparent; background-image:url(http://i45.tinypic.com/33fdlll.png); background-position:0 -95px; background-repeat:no-repeat no-repeat; height:50px; margin-bottom:0; margin-top:-120px; } .header_ptw { background-color:transparent; background-image:url(http://i45.tinypic.com/15zqb6w.png); background-position:0 -85px; background-repeat:no-repeat no-repeat; height:50px; margin-bottom:0; margin-top:-120px; } .status_selected { display:block; } .status_not_selected { display:block; } .status_not_selected { opacity:0.7; } .status_not_selected:hover { color:transparent; opacity:1; } * { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; } .animetitle + small { color:#F5B800 !important; font-size:87%; font-weight:bold; } |
TheHolyPotatoApr 15, 2013 9:59 PM
Jan 26, 2013 1:11 PM
#40
Request complete for Missunify missunify said: Hey! I'm looking for an Ano Natsu de Mitteru, Ano Hana or Chuunibyou layout. I love these three anime equally (a combination would be aaawesome, but I'll take what I can get, as these layouts are aweeeesome!) I don't mind which one as it's obviously a voluntary thing! If you'd be willing to do either and you want some artwork/colours to work with feel free to contact me! Thanks :) Preview: Code: @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; body { background-attachment:fixed !important; background-image:url(http://i48.tinypic.com/103ctas.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.'; } |
TheHolyPotatoApr 6, 2013 3:08 AM
Jan 29, 2013 6:59 PM
#41
Request complete for lolipanic lolipanic said: Requesting for a Oreimo themed anime list or a Madoka Magica one, whichever is fine. ^^ Heres something to brighten up your day ;) Code: @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; body { background-attachment:fixed !important; background-image:url(http://i49.tinypic.com/14weomw.jpg); background-size:cover; } #list_surround { background-attachment:scroll; background-color:transparent; background-position:50% 50px; background-repeat:no-repeat no-repeat; font-size:81.25%; line-height:1; margin:0 auto; padding-bottom:10px; padding-top:50px; width:63.6%; } body { font-family:'Comic Sans MS'; color:#FFF; } a { -webkit-transition:all 0.25s ease-in-out 0s; color:#FFF; text-decoration:initial; text-shadow:none; } a:hover { color:#FF0000; text-shadow:none; } .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:#FF9900; border:1px solid rgba(255, 255, 255, 0.498039); border-bottom-left-radius:20px; border-bottom-right-radius:20px; border-top-left-radius:20px; border-top-right-radius:20px; color:#FFFFFF; display:block !important; font-weight:bold; padding:18px; text-shadow:rgba(0, 0, 0, 0.0980392) 0 1px; } .status_selected a { background-color:#FF301A; border-color:rgba(255, 255, 255, 0.498039); } .status_not_selected a:hover { background-color:#FFB300; box-shadow:rgba(0, 0, 0, 0.0980392) 0 1px 1px; text-shadow:rgba(0, 0, 0, 0.298039) 0 1px; } .status_selected a:hover { background-color:#FF1A00; box-shadow:rgba(0, 0, 0, 0.0980392) 0 1px 1px; text-shadow:rgba(0, 0, 0, 0.298039) 0 1px; } .table_header { background-color:#FF301A; } .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:#FFB300; } .td2 { -webkit-transition:all 0.25s ease-in-out 0s; background-color:#FFB300; } tr:hover [class^="td"] { background-color:#FF9900; } .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:30px; } .borderRBL { line-height:normal !important; } [cellspacing="0"] { line-height:17px; } .category_totals { -webkit-transition:all 0.25s ease-in-out 0s; background-color:#FF301A; border-bottom-left-radius:20px; border-bottom-right-radius:20px; border-top-left-radius:0; border-top-right-radius:0; color:#FFF; text-align:center; } null { } [class^="header_"] * { font-size:19px; height:60px; 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: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; } #copyright::after { content:' CSS by Kyouhansha. Edits by TheHolyPotato. Google 'Shishio's Custom Lists' for more designs and info.'; } .header_cw { background-color:transparent; background-image:url(http://i46.tinypic.com/8ygisy.png); background-position:0 0; background-repeat:no-repeat no-repeat; height:215px; margin-bottom:0; } .header_completed { background-color:transparent; background-image:url(http://i47.tinypic.com/6oivxl.png); background-position:0 0; background-repeat:no-repeat no-repeat; height:220px; margin-bottom:0; } .header_onhold { background-color:transparent; background-image:url(http://i47.tinypic.com/2r4ph20.png); background-position:0 0; background-repeat:no-repeat no-repeat; height:210px; margin-bottom:0; } .header_dropped { background-color:transparent; background-image:url(http://i47.tinypic.com/16bg5fn.png); background-position:0 0; background-repeat:no-repeat no-repeat; height:190px; margin-bottom:0; } .header_ptw { background-color:transparent; background-image:url(http://i50.tinypic.com/2s00074.png); background-position:0 0; background-repeat:no-repeat no-repeat; height:190px; margin-bottom:0; } .header_title { background-color:transparent !important; } tbody { background-color:transparent; background-image:none; } .header_title { color:transparent !important; font-size:0 !important; } #list_surround { left:20px !important; position:absolute !important; } |
Shishio-kunFeb 2, 2013 3:21 PM
Jan 29, 2013 7:42 PM
#42
Request complete for RarityRoyale I tried making a simple list theme ^^ Let me know if you would like any changes made: Code: /* // Self-explanatory */ BODY { color: #081e6b; font-size: 10.00px; font-family: Verdana, Arial; background-color: #010004; background-image: url(http://i.imgur.com/aHUxeH3.gif); background-repeat: repeat; background-position: top left } /* // Determines the positioning of your list */ div#list_surround{width:1000px;padding-top:500px; margin: auto 0% auto auto; background-image: url(http://i.imgur.com/KlmXZOQ.png); background-position: top left; background-repeat: no-repeat; margin-left: 0px; margin-right:auto; margin-top: 0px; margin-bottom: 20px; width:1000px; position:absolute } /* // All links on your list */ a { color: #000000; text-decoration: none; } a:visited { color: #000000; text-decoration: none; } a:hover { color: #4ab3ed; text-decoration: line-through; } /* // Alternating row color 1 */ TD {filter:alpha(opacity=0); -moz-opacity:.80; opacity:.80;} .td1 { color: #000000; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #ffffff; padding: 2px; background-color: #ffffff; } /* // Alternating row color 2 */ .td2 { color: #000000; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #ffffff; padding: 2px; background-color: #ffffff; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ .table_header { color: #000000; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #ffffff; background-color: #ffffff; padding: 2px; } /* // headerLink represents the color of the links inside the_header */ .table_headerLink { color: ; } .table_headerLink:Visited { color: ; } .table_headerLink:Hover { color: ; } /* // Controls the select form decoration (the drop down select box) */ .form { border-width: 1px 1px 1px 1px; border-color: #ffffff; border-style: solid; color: #ffffff; padding: 0px; font-size: 11.00px; font-family: Verdana, Arial; } /* Which 'status' up top is selected? */ .status_selected { color: #000000; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #ffffff; padding: 0px; background-color: #ffffff; } .status_not_selected { color: #ffffff; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #ffffff; padding: 0px; background-color: #ffffff; } /* Header classes for Currently Watching, Completed, Dropped, etc... */ .header_cw{ background-image: url(http://i.imgur.com/uvclrs5.png); width:250px; height:43px; margin-left: 0px; margin-right:auto; margin-bottom: 5px; } .header_completed{ background-image: url(http://i.imgur.com/RrHbRs7.png); width:250px; height:43px; margin-left: 0px; margin-right:auto; margin-bottom: 5px; } .header_onhold{ background-image: url(http://i.imgur.com/oFAHvrG.png); width:250px; height:43px; margin-left: 0px; margin-right:auto; margin-bottom: 5px; } .header_dropped{ background-image: url(http://i.imgur.com/xNY3d57.png); width:250px; height:43px; margin-left: 0px; margin-right:auto; margin-bottom: 5px; } .header_ptw{ background-image: url(http://i.imgur.com/NMNPUYN.png); width:250px; height:43px; margin-left: 0px; margin-right:auto; margin-bottom: 5px; } .header_title { display:none; } .category_totals { color: #000000; } #grand_totals { text-align: left; color: #000000; } /* header_al is thesurrounding "User's Anime List" at the top */ .header_al { font-weight: bold; font-size: 16px; } /* header_al_links is thewith your "Profile" and "MyAnimeList home" links */ .header_al_links { } /* controls what styles you can give to all the anime titles in your list */ .animetitle { font-weight: bold; } /* copyright contains the "Producted by Garrett Gyssler" text DO NOT REMOVE OR HIDE THIS DIV IF FOUND TO BE REMOVED, YOUR LIST WILL BE REMOVED TOO */ #copyright { padding-top: 6px; text-align: left; margin: 0 auto; width: px; color: #000000; } |
Jan 30, 2013 12:32 PM
#43
Request complete for Klinsk KlinsK said: I don't know if I should ask for it here, anyway it won't take some time to make it so : http://stuffpoint.com/sword-art-online/image/53472-sword-art-online-sao.jpg I juste want to delete all the black background to just have all that is write in white I don't think it's hard, anyway my images editing skill is bad ... Thank you ;) Here you go. Preview on black background: |
Shishio-kunFeb 2, 2013 3:22 PM
Feb 4, 2013 3:38 AM
#44
Request complete for Meriande Meriande said: Ok I hope I'm good enough at explaining this :) I would love a Hiiro no Kakera layout for my anime list / entire layout I love the autumn leaves theme the series has <3 As much as possible in the reddish / orange color and a soft feel to it And please make everything blend in well, nothing has to particularly stand out I hope this is enough to give you an idea :) Thanks in advance Preview: Code: @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixedwithCategory.css"; body { background-attachment:fixed !important; background-image:url(http://i48.tinypic.com/331pxl2.jpg); background-size:cover; } #list_surround { background-attachment:scroll; background-color:transparent; background-position:0 0; background-repeat:no-repeat no-repeat; font-size:81.25%; line-height:1; margin:0 auto; padding-bottom:10px; padding-top:50px; right:-36%; width:60.6%; } 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:#FFFFFF; text-decoration:underline; text-shadow:none; } .table_header { background-color:rgba(245, 49, 0, 0.901961); } .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(255, 70, 0, 0.701961); } .td2 { -webkit-transition:all 0.25s ease-in-out 0s; background-color:rgba(255, 100, 0, 0.701961); } tr:hover [class^="td"] { background-color:#FF9900; } .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:30px; } .borderRBL { line-height:normal !important; } [cellspacing="0"] { line-height:17px; } .category_totals { -webkit-transition:all 0.25s ease-in-out 0s; background-color:rgba(245, 49, 0, 0.901961); border-bottom-left-radius:20px; border-bottom-right-radius:20px; border-top-left-radius:0; border-top-right-radius:0; color:#FFFFFF; text-align:center; } null { } [class^="header_"] * { font-size:19px; height:60px; 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: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; } #copyright::after { content:' CSS by Kyouhansha. Edits by TheHolyPotato. Google 'Shishio's Custom Lists' for more designs and info.'; } .header_cw { background-color:transparent; background-image:url(http://i49.tinypic.com/2urtc44.jpg); background-position:center 40px; background-repeat:no-repeat no-repeat; height:140px; margin-bottom:0; } .header_completed { background-color:transparent; background-image:url(http://i48.tinypic.com/2ecg5co.jpg); background-position:center 40px; background-repeat:no-repeat no-repeat; height:140px; margin-bottom:0; } .header_onhold { background-color:transparent; background-image:url(http://i48.tinypic.com/34q0ltd.jpg); background-position:center 50px; background-repeat:no-repeat no-repeat; height:140px; margin-bottom:0; } .header_dropped { background-color:transparent; background-image:url(http://i45.tinypic.com/2bv30m.jpg); background-position:center 40px; background-repeat:no-repeat no-repeat; height:140px; margin-bottom:0; } .header_ptw { background-color:transparent; background-image:url(http://i49.tinypic.com/10yqrsk.jpg); background-position:center 40px; background-repeat:no-repeat no-repeat; height:140px; margin-bottom:0; } .header_title { background-color:transparent !important; } tbody { background-color:transparent; background-image:none; } .header_title { color:transparent !important; font-size:0 !important; } #list_surround { left:20px !important; position:absolute !important; } #inlineContent { background-image:url(http://i49.tinypic.com/2ur5wz7.png); background-position:-23% 100%; background-repeat:no-repeat no-repeat; bottom:0; display:inline-block !important; height:1200px !important; left:0 !important; margin:auto auto 0 !important; position:fixed !important; right:0 !important; width:2000px !important; z-index:-1 !important; } |
TheHolyPotatoFeb 13, 2013 12:33 AM
Feb 11, 2013 11:26 PM
#45
Request complete for Shiro-Kyun Shiro-Kyun said: I want for anime list like this but with black border, simple header and with the background of kirito http://i.imgur.com/AeHaNVv.jpg Preview: Code: @import "https://dl.dropbox.com/s/t8g8i1udpkj07zs/mal_pic.css"; @import "https://dl.dropbox.com/s/c9r7l4c3ik6eg1o/Anime_Cover.css"; @import "https://dl.dropbox.com/s/u2q6pbwwn741qys/SAO%20Top%20Bar.css"; body { background-attachment:fixed; background-image:url(http://i45.tinypic.com/6yp53c.jpg); background-position:50% 0; background-repeat:no-repeat no-repeat; background-size:cover; color:#FFFFFF; font-family:Candara; font-size:12px; } #list_surround { left:14%; margin:auto; position:absolute; width:650px; } .td1, .td2 { padding:3px; } .animetitle + small { color:#00BFFF !important; } .animetitle + small::before { } null { } td:nth-of-type(2) small { color:#00BFFF; font-size:10px; padding-right:10px; } td:nth-of-type(2) small a { color:#F0304F; } .td1:nth-of-type(1), .td2:nth-of-type(1) { background-color:black; border-left-style:solid !important; border-left-width:2px !important; } .td1:nth-of-type(5), .td2:nth-of-type(5) { background-color:black; border-right-style:solid; border-right-width:2px; } .td1:nth-of-type(4), .td2:nth-of-type(4), td.table_header:nth-of-type(4) { background-color:black; } .td1:nth-of-type(3), .td2:nth-of-type(3) { background-color:black; } .td1:nth-of-type(3), .td2:nth-of-type(3) { background-color:black; } td.table_header:nth-of-type(3) { background-color:black; padding-right:7px; } td.table_header:nth-of-type(3) { background-color:black; } .td1:nth-of-type(2), .td2:nth-of-type(2) { background-color:black; } a, a:visited { color:#FFFFFF; text-decoration:initial; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color:#00BFFF; } .table_header { background-color:black; font-size:10px; padding:2px; } td.table_header:nth-of-type(1) { border-bottom-right-radius:0; border-left-color:white !important; border-left-style:solid !important; border-left-width:2px !important; border-top-color:white !important; border-top-left-radius:10px; border-top-right-radius:0; border-top-style:solid !important; border-top-width:2px !important; } td.table_header:nth-of-type(5) { border-bottom-right-radius:0; border-right-color:white; border-right-style:solid; border-right-width:2px; border-top-color:white; border-top-left-radius:0; border-top-right-radius:10px; border-top-style:solid; border-top-width:2px; } td.table_header:nth-of-type(2), td.table_header:nth-of-type(3), td.table_header:nth-of-type(4) { border-top-color:white; border-top-style:solid; border-top-width:2px; } .category_totals { background-color:black; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-bottom-style:solid; border-bottom-width:2px; border-left-color:white; border-left-style:solid; border-left-width:2px; border-right-color:white; border-right-style:solid; border-right-width:2px; border-top-left-radius:0; border-top-right-radius:0; font-size:10px; padding:2px 2px 2px 40px; } .borderRBL { border-left-style:solid !important; border-left-width:2px !important; border-right-color:white !important; border-right-style:solid !important; border-right-width:2px !important; color:#2030F0 !important; font-size:11px; padding-left:39px; } .borderRBL a, .borderRBL a:visited { color:#F0304F !important; text-decoration:initial; } .borderRBL a:hover { color:#F0304F !important; } #copyright { border-bottom-left-radius:8px; border-bottom-right-radius:8px; border-top-left-radius:8px; border-top-right-radius:8px; color:#FFFFFF; font-size:11px; margin-bottom:70px; padding:2px; position:relative !important; text-align:center !important; top:10px; width:644px; } #copyright::after { border-bottom-left-radius:8px; border-bottom-right-radius:8px; border-top-left-radius:8px; border-top-right-radius:8px; color:#FFFFFF !important; content:'List Design By Ushioo, Edited By TheHolyPotato' !important; left:-3px; position:absolute !important; top:40px !important; width:650px !important; } #copyright a { color:#FFFFFF; } #grand_totals { display:none; } td:nth-of-type(2) small a { display:none; } td:nth-of-type(2) small { color:transparent; } [class^="header_"] * { font-size:19px; height:10px; line-height:24px; padding-bottom:4px; 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; height:auto; padding:0 8px 0 0; text-shadow:rgba(0, 0, 0, 0.14902) 0 1px 1px; } |
TheHolyPotatoApr 12, 2013 6:46 PM
Feb 12, 2013 11:44 AM
#46
Request complete for toxicshot toxicshot said: Hey, if possible would someone create a simple layout with It should have rounded borders, somewhat matching colors (dark blue-ish) You can always make something you like. thanks in advance :) Preview: Code: @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixedwithCategory.css"; @import "http://dl.dropbox.com/u/78340470/animetitle.css"; @import "http://dl.dropbox.com/u/102421246/MAL/CSS/TestMal.css"; * { text-decoration: none; } body { background-image: url("http://i.imgur.com/z6acsC6.jpg"); background-position: 63% 0; background-repeat: no-repeat no-repeat; background-size: cover; color: #FFFFFF; font-family: Candara; font-size: 12px; text-decoration: none; background-attachment: fixed; } #list_surround { left: 10%; margin: auto; position: absolute; width: 650px; } .td1, .td2 { padding: 3px; } .animetitle + small { color: #FFFFFF !important; } .animetitle + small:before { color: #FFFFFF; } .animetitle + small:after { content: " ) "; } td:nth-of-type(2) small { color: #F0304F; font-size: 10px; padding-right: 10px; } td:nth-of-type(2) small a { color: #F0304F; } .td1:nth-of-type(1), .td2:nth-of-type(1) { background-color: rgba(99, 169, 239, 0.7); border-left-width: 2px !important; } .td1:nth-of-type(5), .td2:nth-of-type(5) { background-color: rgba(99, 169, 239, 0.7); border-right-width: 2px; } .td1:nth-of-type(4), .td2:nth-of-type(4), td.table_header:nth-of-type(4) { background-color: rgba(99, 169, 239, 0.7); } .td1:nth-of-type(3), .td2:nth-of-type(3) { background-color: black; } .td1:nth-of-type(3), .td2:nth-of-type(3) { background-color: rgba(99, 169, 239, 0.7); } td.table_header:nth-of-type(3) { background-color: black; padding-right: 7px; } td.table_header:nth-of-type(3) { background-color: rgba(99, 169, 239, 0.7); } .td1:nth-of-type(2), .td2:nth-of-type(2) { background-color: rgba(99, 169, 239, 0.7); } a, a:visited { color: #FFFFFF; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color: #09136F; } .table_header { background-color: rgba(99, 169, 239, 0.7); font-size: 10px; padding: 2px; } td.table_header:nth-of-type(1) { border-bottom-right-radius: 0; border-top-left-radius: 0; border-top-right-radius: 0; } td.table_header:nth-of-type(5) { border-bottom-right-radius: 0; border-top-left-radius: 0; } td.table_header:nth-of-type(2), td.table_header:nth-of-type(3), td.table_header:nth-of-type(4) { } .category_totals { background-color: rgba(99, 169, 239, 0.7); border-bottom-style: solid; border-bottom-width: 2px; border-radius: 0 0 10px 10px; font-size: 10px; padding: 2px 2px 2px 40px; } .borderRBL { border-left-width: 2px !important; color: #2030F0 !important; font-size: 11px; padding-left: 39px; } .borderRBL a, .borderRBL a:visited { color: #F0304F !important; text-decoration: none; } .borderRBL a:hover { color: #F0304F !important; } #copyright { border-radius: 8px 8px 8px 8px; color: #FFFFFF; font-size: 11px; margin-bottom: 70px; padding: 2px; position: relative !important; text-align: center !important; top: 10px; width: 644px; } #copyright:after { border-radius: 8px 8px 8px 8px; color: #FFFFFF !important; content: "List Design By Ushioo, Edited By TheHolyPotato, SylakentH_" !important; left: -3px; position: absolute !important; top: 40px !important; width: 650px !important; } #copyright a { color: #FFFFFF; } #grand_totals { display: none; } td:nth-of-type(2) small a { display: none; } td:nth-of-type(2) small { color: transparent; } [class^="header_"] * { font-size: 30px; height: 10px; line-height: 24px; margin-bottom: 10px; margin-top: -20px; padding-bottom: 4px; text-align: left; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; color: #FFFFFF; display: inline-block; height: auto; margin-top: -9px; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } .header_cw { background: none repeat scroll 0 0 rgba(99, 169, 239, 0.7); border-radius: 30px 30px 0 0; margin-top: 25px; text-shadow: 0 1px 1px #000000; } .header_completed { background: none repeat scroll 0 0 rgba(99, 169, 239, 0.7); border-radius: 30px 30px 0 0; margin-top: 25px; text-shadow: 0 1px 1px #000000; } .header_onhold { background: none repeat scroll 0 0 rgba(99, 169, 239, 0.7); border-radius: 30px 30px 0 0; margin-top: 25px; text-shadow: 0 1px 1px #000000; } .header_ptw { background: none repeat scroll 0 0 rgba(99, 169, 239, 0.7); border-radius: 30px 30px 0 0; margin-top: 25px; text-shadow: 0 1px 1px #000000; } My first layout I've done for anyone, so forgive me if I've done anything unpleasant. Please tell me what I should do better :P |
SylakentHJun 22, 2013 2:57 PM
Feb 24, 2013 8:19 PM
#47
Request complete for Tomoya-Senpai Tomoya-Senpai said: I would like an Inu x Boku SS layout,if possible. Not looking for anything in particular,but i do love Karuta Roromiya. Thank you. Hi, I tried doing your request: @import url(http://fonts.googleapis.com/css?family=Snowburst+One); body { background-attachment: fixed !important; background-color: white !important; background-image: url("http://i.imgur.com/eO4tIjU.jpg") !important; background-repeat: no-repeat !important; background-position: top left; } #list_surround { position: absolute !important; right: 60px !important; } body { color: #FFFFFF; font-family: Verdana,Arial; font-size: 10px; } #inlineContent { display: inline-block !important; height: 362px !important; left: 0 !important; position: absolute !important; top: 0 !important; width: 605px !important; z-index: -1 !important; } #grand_totals { background-color: transparent; border: 0 none; border-radius: 3px 3px 3px 3px; color: #EEEEEE; line-height: 20px; min-height: 20px; text-align: center; transition: all 0.25s ease-in-out 0s; vertical-align: middle; } a { color: #FFFFFF; text-decoration: none; } a:visited { color: #FFFFFF; text-decoration: none; } a:hover { color: #000000; text-decoration: none; } small { color: #b33953; font-size: 8px !important; text-decoration: none; } #list_surround { background-color: transparent; background: transparent; background-position: center top; background-repeat: no-repeat; margin-left: 5px; padding-top: 50px; text-transform: none; width: 600px; } #list_surround tbody tr:hover { } #list_surround tr:hover .category_totals, #list_surround[align="center"] tbody tr:hover td, #list_surround[align="center"] + tbody tr:hover { background-color: transparent; } .td1, .td2 { background: rgba(135,120,129,0.8); background-position: center center; border-style: hidden; color: white; padding: 3px; } .table_header { background: rgba(135,120,129,0.8); border-style: hidden; color: #b33953 !important; padding: 3px; } .td1[width="125"] { font-size: 11px; padding: 1px 20px 0px 1px; width: 200px; } .td1[width="45"] { font-size: 11px; font-weight: bold; } .td1[width="70"] { font-size: 11px; font-weight: bold; } .td2[width="125"] { font-size: 11px; padding: 1px 20px 1px 1px; width: 200px; } .td2[width="45"] { font-size: 11px; font-weight: bold; } .td2[width="70"] { font-size: 11px; font-weight: bold; } .td1:last-child, .td2:last-child, .table_header:last-child { background-position: right center; } .table_header[width="125"] { padding-left: 1px; padding-right: 20px; width: 200px; } .td1:first-child, .td2:first-child, .table_header:first-child { background-position: left center; padding-left: 10px; text-align: center; width: 20px; } [id^="menu"] .td1 { padding-left: 50px; padding-right: 20px; text-align: left; } [id^="menu"] .td2 { padding-left: 50px; padding-right: 20px; text-align: left; } small *, small { font-size: 11px; } .table_headerLink { color: #b33953; font-weight: normal; } .table_headerLink:visited { color: #000000; font-weight: normal; } .table_headerLink:hover { color: #FFFFFF; font-weight: normal; } .status_selected { color: #FFFFFF; font-family: Century Gothic,Verdana,Arial; font-size: 14px; font-weight: bold; padding: 5px; background: rgba(179,57,83, 0.8); border-bottom-style: solid; border-top-style: solid; border-width: 2px !important; } .status_not_selected { color: #FFFFFF; font-family: Century Gothic,Verdana,Arial; font-size: 12px; font-weight: bold; padding: 5px; background: rgba(135,120,129,0.8); border-bottom-style: solid; border-width: 2px !important; border-top-style: solid; } .header_title { font-size: 40px; font-family: snowburst one; color: #4d3041; margin-top: -20px; margin-bottom: 10px; margin-left: 40px; } .header_cw { margin-top: 25px; background: rgba(135,120,129,0.8); border-radius: 30px 30px 0 0; } .header_completed { margin-top: 25px; background: rgba(135,120,129,0.8); border-radius: 30px 30px 0 0; } .header_onhold { margin-top: 25px; background: rgba(135,120,129,0.8); border-radius: 30px 30px 0 0; } .header_dropped { margin-top: 25px; background: rgba(135,120,129,0.8); border-radius: 30px 30px 0 0; } .header_ptw { margin-top: 25px; background: rgba(135,120,129,0.8); border-radius: 30px 30px 0 0; } .category_totals { background: rgba(135,120,129,0.8); font-size: 10px; color: white; height: 40px; text-align: center; border-radius: 0 0 30px 30px; } #grand_totals { background-position: center top; background-repeat: no-repeat; color: #bb3e46; font-family: Verdana,Arial; font-size: 10px; height: 25px; padding: 29px; text-align: center; } #copyright { background-image: url("http://i.imgur.com/qisxHj0.png"); background-repeat: no-repeat; color: #fef1f8; font-size: 9px; font-weight: normal; height: 50px; margin: 0 auto; padding-top: 10px; text-align: center; text-shadow: 0 0 0.5em #FFDEEE; width: 475px; } |
Feb 25, 2013 10:23 PM
#48
Request complete for Vatara Vatara said: I would love a simple layout with this: http://s4.zerochan.net/Honma.Meiko.full.708704.jpg or this: http://s4.zerochan.net/Pok%C3%A9mon.full.689806.jpg Why not both? http://i.imgur.com/tvE71.gif If you ever get tired of the one you can use the other one :) The text might be a bit hard to read, if it is tell me. Pokemon: Code: @import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css"; body { background-attachment:fixed !important; background-clip:border-box !important; background-color:white; background-image:url(http://i49.tinypic.com/j1526d.jpg) !important; background-position:100% 100%; background-repeat:no-repeat no-repeat; } #list_surround { left:60px !important; position:absolute !important; } body { color:#FFFFFF; font-family:Verdana, Arial; font-size:10px; } #inlineContent { display:inline-block !important; height:362px !important; left:0 !important; position:absolute !important; top:0 !important; width:605px !important; z-index:-1 !important; } #grand_totals { background-color:transparent; border:0 none; border-bottom-left-radius:3px; border-bottom-right-radius:3px; border-top-left-radius:3px; border-top-right-radius:3px; color:#FFF; line-height:20px; min-height:20px; text-align:center; vertical-align:middle; } a { color:#FFFFFF; text-decoration:none; } a:visited { color:#FFFFFF; text-decoration:none; } a:hover { color:#FFF; text-decoration:underline; } small { color:#0039E6; font-size:9px !important; } #searchBox { background-color:#1AC6FF; border:1px solid #FFFFFF; color:#FFFFFF; font-size:14px !important; height:14px; text-align:center; text-transform:uppercase; } #list_surround { background-color:transparent; background-position:50% 0; background-repeat:no-repeat no-repeat; margin-left:5px; padding-top:50px; text-transform:none; width:700px; } #list_surround tbody tr:hover { } #list_surround tr:hover .category_totals, #list_surround[align="center"] tbody tr:hover td, #list_surround[align="center"] + tbody tr:hover { background-color:#1AC6FF; } .td1, .td2 { background-color:#1AC6FF; background-position:50% 50%; border-style:hidden; color:#0039E6; padding:3px; } .table_header { background-color:#1AC6FF; border-style:hidden; color:#001E99 !important; padding:3px; } .td1[width="125"] { font-size:10px; padding:1px 20px 1px 1px; width:200px; } .td1[width="45"] { font-size:11px; font-weight:bold; } .td1[width="70"] { font-size:11px; font-weight:bold; } .td2[width="125"] { font-size:11px; padding:1px 20px 1px 1px; width:200px; } .td2[width="45"] { font-size:11px; font-weight:bold; } .td2[width="70"] { font-size:11px; font-weight:bold; } .td1:last-child, .td2:last-child, .table_header:last-child { background-position:100% 50%; } .table_header[width="125"] { padding-left:1px; padding-right:20px; width:200px; } .td1:first-child, .td2:first-child, .table_header:first-child { background-position:0 50%; padding-left:10px; text-align:center; width:20px; } [id^="menu"] .td1 { padding-left:50px; padding-right:20px; text-align:left; } [id^="menu"] .td2 { padding-left:50px; padding-right:20px; text-align:left; } small *, small { font-size:11px; } .table_headerLink { color:#0039E6; font-weight:normal; } .table_headerLink:visited { color:#000000; font-weight:normal; } .table_headerLink:hover { color:#FFFFFF; font-weight:normal; } .status_selected { background-color:#00ACE6; border-bottom-style:solid; border-top-style:solid; border-width:2px !important; color:#0A47FF; font-family:'Century Gothic', Verdana, Arial; font-size:14px; font-weight:bold; padding:5px; } .status_not_selected { background-color:#1AC6FF; border-bottom-style:solid; border-top-style:solid; border-width:2px !important; color:#0A47FF; font-family:'Century Gothic', Verdana, Arial; font-size:12px; font-weight:bold; padding:5px; } .header_title { font-family:'century gothic'; font-size:35px; margin-bottom:10px; margin-left:40px; margin-top:0; } .header_cw { background-color:#1AC6FF; border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:30px; border-top-right-radius:30px; margin-top:25px; } .header_completed { background-color:#1AC6FF; border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:30px; border-top-right-radius:30px; margin-top:25px; } .header_onhold { background-color:#1AC6FF; border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:30px; border-top-right-radius:30px; margin-top:25px; } .header_dropped { background-color:#1AC6FF; border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:30px; border-top-right-radius:30px; margin-top:25px; } .header_ptw { background-color:#1AC6FF; border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:30px; border-top-right-radius:30px; margin-top:25px; } .category_totals { background-color:#1AC6FF; border-bottom-left-radius:30px; border-bottom-right-radius:30px; border-top-left-radius:0; border-top-right-radius:0; color:#001E99; font-size:10px; height:40px; text-align:center; } #grand_totals { background-position:50% 0; background-repeat:no-repeat no-repeat; color:#FFFFFF; font-family:Verdana, Arial; font-size:10px; height:25px; padding:29px; text-align:center; } #copyright { background-image:url(http://img7.imageshack.us/img7/7540/copyrightbackground.png); background-repeat:no-repeat no-repeat; color:#ECE0E3; font-size:9px; font-weight:normal; height:50px; margin:0 auto; padding-top:10px; text-align:center; text-shadow:#FFDEEE 0 0 0.5em; width:475px; } Menma: Code: @import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css"; body { background-attachment:fixed !important; background-clip:border-box !important; background-color:white; background-image:url(http://i45.tinypic.com/apej2b.jpg) !important; background-position:100% 100%; background-repeat:no-repeat no-repeat; } #list_surround { left:60px !important; position:absolute !important; } body { color:#FFFFFF; font-family:Verdana, Arial; font-size:10px; } #inlineContent { display:inline-block !important; height:362px !important; left:0 !important; position:absolute !important; top:0 !important; width:605px !important; z-index:-1 !important; } #grand_totals { background-color:transparent; 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; text-align:center; vertical-align:middle; } a { color:#FFFFFF; text-decoration:none; } a:visited { color:#FFFFFF; text-decoration:none; } a:hover { color:#FFFFFF; text-decoration:underline; } small { color:blue; font-size:9px !important; } #searchBox { background-color:#80BFFF; border:1px solid #FFFFFF; color:#FFFFFF; font-size:14px !important; height:14px; text-align:center; text-transform:uppercase; } #list_surround { background-color:transparent; background-position:50% 0; background-repeat:no-repeat no-repeat; margin-left:5px; padding-top:50px; text-transform:none; width:700px; } #list_surround tbody tr:hover { } #list_surround tr:hover .category_totals, #list_surround[align="center"] tbody tr:hover td, #list_surround[align="center"] + tbody tr:hover { background-color:#4DA6FF; } .td1, .td2 { background-color:#4DA6FF; background-position:50% 50%; border-style:hidden; color:blue; padding:3px; } .table_header { background-color:#4DA6FF; border-style:hidden; color:blue !important; padding:3px; } .td1[width="125"] { font-size:10px; padding:1px 20px 1px 1px; width:200px; } .td1[width="45"] { font-size:11px; font-weight:bold; } .td1[width="70"] { font-size:11px; font-weight:bold; } .td2[width="125"] { font-size:11px; padding:1px 20px 1px 1px; width:200px; } .td2[width="45"] { font-size:11px; font-weight:bold; } .td2[width="70"] { font-size:11px; font-weight:bold; } .td1:last-child, .td2:last-child, .table_header:last-child { background-position:100% 50%; } .table_header[width="125"] { padding-left:1px; padding-right:20px; width:200px; } .td1:first-child, .td2:first-child, .table_header:first-child { background-position:0 50%; padding-left:10px; text-align:center; width:20px; } [id^="menu"] .td1 { padding-left:50px; padding-right:20px; text-align:left; } [id^="menu"] .td2 { padding-left:50px; padding-right:20px; text-align:left; } small *, small { font-size:11px; } .table_headerLink { color:#0000FF; font-weight:normal; } .table_headerLink:visited { color:#000000; font-weight:normal; } .table_headerLink:hover { color:#FFFFFF; font-weight:normal; } .status_selected { background-color:#0080FF; border-bottom-style:solid; border-top-style:solid; border-width:2px !important; color:#0000FF; font-family:'Century Gothic', Verdana, Arial; font-size:14px; font-weight:bold; padding:5px; } .status_not_selected { background-color:#4DA6FF; border-bottom-style:solid; border-top-style:solid; border-width:2px !important; color:#0A47FF; font-family:'Century Gothic', Verdana, Arial; font-size:12px; font-weight:bold; padding:5px; } .header_title { font-family:'century gothic'; font-size:35px; margin-bottom:10px; margin-left:40px; margin-top:0; } .header_cw { background-color:#4DA6FF; border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:30px; border-top-right-radius:30px; margin-top:25px; } .header_completed { background-color:#4DA6FF; border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:30px; border-top-right-radius:30px; margin-top:25px; } .header_onhold { background-color:#4DA6FF; border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:30px; border-top-right-radius:30px; margin-top:25px; } .header_dropped { background-color:#4DA6FF; border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:30px; border-top-right-radius:30px; margin-top:25px; } .header_ptw { background-color:#4DA6FF; border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:30px; border-top-right-radius:30px; margin-top:25px; } .category_totals { background-color:#4DA6FF; border-bottom-left-radius:30px; border-bottom-right-radius:30px; border-top-left-radius:0; border-top-right-radius:0; color:#001E99; font-size:10px; height:40px; text-align:center; } #grand_totals { background-position:50% 0; background-repeat:no-repeat no-repeat; color:#FFFFFF; font-family:Verdana, Arial; font-size:10px; height:25px; padding:29px; text-align:center; } #copyright { background-image:url(http://img7.imageshack.us/img7/7540/copyrightbackground.png); background-repeat:no-repeat no-repeat; color:#ECE0E3; font-size:9px; font-weight:normal; height:50px; margin:0 auto; padding-top:10px; text-align:center; text-shadow:#FFDEEE 0 0 0.5em; width:475px; } |
TheHolyPotatoFeb 25, 2013 10:27 PM
Feb 26, 2013 8:30 PM
#49
Request complete for VanishingKira I tried doing both the manga and anime list designs: Ignore the "Reading" text; it will display the correct headers in the anime list ^^ Code: @import url(http://fonts.googleapis.com/css?family=Quicksand:700); @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; body { background-attachment: fixed !important; background-color: white !important; background-image: url("http://i3.minus.com/iEw6FLHRr2scn.png") !important; background-repeat: no-repeat !important; background-position: top right; } #list_surround { position: absolute !important; left: 60px !important; } body { color: #FFFFFF; font-family: Verdana,Arial; font-size: 10px; } #inlineContent { display: inline-block !important; height: 362px !important; left: 0 !important; position: absolute !important; top: 0 !important; width: 605px !important; z-index: -1 !important; } #grand_totals { background-color: transparent; border: 0 none; border-radius: 3px 3px 3px 3px; color: #EEEEEE; line-height: 20px; min-height: 20px; text-align: center; transition: all 0.25s ease-in-out 0s; vertical-align: middle; } a { color: #486caa; text-decoration: none; } a:visited { color: #486caa; text-decoration: none; } a:hover { color: #FFFFFF; text-decoration: none; } small { color: #7248b0; font-size: 8px !important; text-decoration: none; } #list_surround { background-color: transparent; background: transparent; background-position: center top; background-repeat: no-repeat; margin-left: 5px; padding-top: 50px; text-transform: none; width: 600px; } #list_surround tbody tr:hover { } #list_surround tr:hover .category_totals, #list_surround[align="center"] tbody tr:hover td, #list_surround[align="center"] + tbody tr:hover { background-color: transparent; } .td1, .td2 { background: rgba(171,219,242,0.8); background-position: center center; border-style: hidden; color: white; padding: 3px; } .table_header { background: rgba(171,219,242,0.8); border-style: hidden; color: #367add !important; padding: 3px; } .td1[width="125"] { font-size: 11px; padding: 1px 20px 0px 1px; width: 200px; } .td1[width="45"] { font-size: 11px; font-weight: bold; } .td1[width="70"] { font-size: 11px; font-weight: bold; } .td2[width="125"] { font-size: 11px; padding: 1px 20px 1px 1px; width: 200px; } .td2[width="45"] { font-size: 11px; font-weight: bold; } .td2[width="70"] { font-size: 11px; font-weight: bold; } .td1:last-child, .td2:last-child, .table_header:last-child { background-position: right center; } .table_header[width="125"] { padding-left: 1px; padding-right: 20px; width: 200px; } .td1:first-child, .td2:first-child, .table_header:first-child { background-position: left center; padding-left: 10px; text-align: center; width: 20px; } [id^="menu"] .td1 { padding-left: 50px; padding-right: 20px; text-align: left; } [id^="menu"] .td2 { padding-left: 50px; padding-right: 20px; text-align: left; } small *, small { font-size: 11px; } .table_headerLink { color: #FFFFFF; font-weight: normal; } .table_headerLink:visited { color: #FFFFFF; font-weight: normal; } .table_headerLink:hover { color: #FFFFFF; font-weight: normal; } .status_selected { color: #FFFFFF; font-family: Century Gothic,Verdana,Arial; font-size: 14px; font-weight: bold; padding: 5px; background: rgba(216,254,255, 0.8); border-bottom-style: solid; border-top-style: solid; border-width: 2px !important; } .status_not_selected { color: #FFFFFF; font-family: Century Gothic,Verdana,Arial; font-size: 12px; font-weight: bold; padding: 5px; background: rgba(171,219,242,0.8); border-bottom-style: solid; border-width: 2px !important; border-top-style: solid; } .header_title { font-size: 40px; font-family: quicksand; color: #367add; margin-top: -20px; margin-bottom: 10px; margin-left: 40px; } .header_cw { margin-top: 25px; background: rgba(171,219,242,0.8); border-radius: 30px 30px 0 0; } .header_completed { margin-top: 25px; background: rgba(171,219,242,0.8); border-radius: 30px 30px 0 0; } .header_onhold { margin-top: 25px; background: rgba(171,219,242,0.8); border-radius: 30px 30px 0 0; } .header_dropped { margin-top: 25px; background: rgba(171,219,242,0.8); border-radius: 30px 30px 0 0; } .header_ptw { margin-top: 25px; background: rgba(171,219,242,0.8); border-radius: 30px 30px 0 0; } .category_totals { background: rgba(171,219,242,0.8); font-size: 10px; color: white; height: 40px; text-align: center; border-radius: 0 0 30px 30px; } #grand_totals { background-position: center top; background-repeat: no-repeat; color: #bb3e46; font-family: Verdana,Arial; font-size: 10px; height: 25px; padding: 29px; text-align: center; } #copyright { background-image: url("http://i.imgur.com/XZrsPR4.png"); background-repeat: no-repeat; color: #fef1f8; font-size: 9px; font-weight: normal; height: 50px; margin: 0 auto; padding-top: 10px; text-align: center; text-shadow: 0 0 0.5em #FFDEEE; width: 475px; } Version without "vanishingkira's anime list" here. Code: @import url(http://fonts.googleapis.com/css?family=Skranji); @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; BODY { color: #f59f3a; font-size: 10.00px; font-family: Verdana, Arial; background-color: #f59f3a; background-image: url(http://i.imgur.com/KXyT6y7.jpg); background-repeat: repeat; background-position: top left } div#list_surround{width:1000px;padding-top:500px; margin: auto 0% auto auto; background-image: url(http://i.imgur.com/nCCdQ0V.jpg); background-position: top left; background-repeat: no-repeat; margin-left: 0px; margin-right:auto; margin-top: 0px; margin-bottom: 20px; width:1000px; position:absolute } a { color: #000000; text-decoration: none; } a:visited { color: #000000; text-decoration: none; } a:hover { color: #4ab3ed; text-decoration: line-through; } TD {filter:alpha(opacity=0); -moz-opacity:.80; opacity:.80;} .td1 { color: #000000; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #ffffff; padding: 2px; background-color: #ffffff; } .td2 { color: #000000; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #ffffff; padding: 2px; background-color: #ffffff; } .table_header { color: #000000; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #ffffff; background-color: #ffffff; padding: 2px; } .table_headerLink { color: ; } .table_headerLink:Visited { color: ; } .table_headerLink:Hover { color: ; } .form { border-width: 1px 1px 1px 1px; border-color: #ffffff; border-style: solid; color: #ffffff; padding: 0px; font-size: 11.00px; font-family: Verdana, Arial; } .status_selected { color: #000000; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #ffffff; padding: 0px; background-color: white; } .status_not_selected { color: #ffffff; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #ffffff; padding: 0px; background-color: #ffffff; } .header_title { font-size: 30px; font-family: skranji; color: #087d11; margin-top: -20px; margin-bottom: 5px; margin-left: 20px; } .header_cw { margin-top: 25px; background: white; border-radius: 30px 30px 0 0; } .header_completed { margin-top: 25px; background: white; } .header_onhold { margin-top: 25px; background: white; } .header_dropped { margin-top: 25px; background: white; } .header_ptw { margin-top: 25px; background: white; } .category_totals { color: #000000; } #grand_totals { text-align: left; color: #000000; } .header_al { font-weight: bold; font-size: 16px; } .header_al_links { } .animetitle { font-weight: bold; } /* copyright contains the "Producted by Garrett Gyssler" text DO NOT REMOVE OR HIDE THIS DIV IF FOUND TO BE REMOVED, YOUR LIST WILL BE REMOVED TOO */ #copyright { padding-top: 6px; text-align: left; margin: 0 auto; width: px; color: #000000; } |
Ichigo-SoraFeb 27, 2013 6:34 PM
Mar 1, 2013 10:51 AM
#50
Request complete for Vanllety Vallety said: Hi, I was trying to do a sword art online theme, but with a family theme.. It didn't turn out well so i was wondring if someone would help me out? The family theme is the only thing I personally want there, so i leave the rest your imagination :) Thanks for the help! It's a really simple layout, I hope you'll like it, let me know if you have some problems or something that you want to change. Here is how it look on my computer, maybe it will be a bit different on yours : And the code : @import url(http://dl.dropbox.com/u/49469857/MAL/premade/anime.css); @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; @import "http://fonts.googleapis.com/css?family=Quando"; BODY { background-attachment: fixed; background-color: #FFFFFF; background-image: url(http://www.tofuhaus.com/images/t/1280x720/25985-sword-art-online-family-crunch-1280x720.jpg); background-position: right; background-repeat: no-repeat; color: #15ebd9; font-family: Quando; font-size: 16px; line-height: 18px; } #list_surround { background-image: url(http://i1358.photobucket.com/albums/q762/KlinsK/601245-sao_title_logo_zps72ed3d35.png); background-position: top right !important; background-repeat: no-repeat !important; padding-top: 280px !important; line-height: 20px !important; left: -245px !important; position: absolute !important; } #list_surround tbody tr:hover { background-color: transparent; border-bottom: 1px solid #15ebd9; } x { background-color: transparent; border: 0 none; } #mal_cs_powered { bottom: auto !important; position: fixed !important; right: 0 !important; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: medium none !important; } #mal_cs_otherlinks, #mal_cs_otherlinks div, #mal_cs_otherlinks span, #mal_cs_otherlinks strong { color: #15ebd9 !important; font-family: trebuchet ms !important; font-size: 9px; font-weight: normal; } div#list_surround { float: left; margin: 0 auto; padding-left: 310px; padding-top: 100px; width: 800px; } a { color: #15ebd9; font-size: 11px; text-decoration: none; } a:visited { color: #15ebd9; font-size: 9px; text-decoration: none; } a:hover { color: #15ebd9; font-size: 11px; text-decoration: none; } .td1, .td2 { background-color: transparent; border: 1px dotted transparent; color: #8eaba8; font-size: 9px; } .table_header { color: #15ebd9; font-size: 9px; padding-bottom: 10px; } .table_headerLink { color: #15ebd9; font-size: 9px; } .table_headerLink:visited { color: #15ebd9; font-size: 9px; } .table_headerLink:hover { color: #15ebd9; font-size: 9px; } .header_cw { } .header_completed { } .header_onhold { } .header_dropped { } .header_ptw { } .header_title { color: #15ebd9; font-size: 30px; font-weight: bold; letter-spacing: -2px; padding-bottom: 30px; padding-top: 15px; text-align: center; } .category_totals { font-size: 9px; padding-top: 14px; text-align: center; color: black; } #grand_totals { font-size: 9px; text-align: center; color: black; } .header_al { } .header_al_links { } .animetitle { } small a { color: black; font-size: 8px; } small a:hover { color: #6495ED; font-size: 8px; } #copyright { font-size: 9px; margin: 0 auto; padding-bottom: 20px; padding-top: 20px; text-align: center; color : black; } #copyright:after { font-size: 11px; content: "Anime List made by KlinsK"; color: gold; } #inlineContent { bottom: 0; display: inline !important; height: 20px; margin-bottom: 0; position: fixed; right: 0; width: 100%; z-index: -10 !important; } :hover + .hide { background-size: cover; left: 1070px; top: 450px; height: 300px; width: 220px; 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: #15ebd9; background-position: center 50% !important; background-repeat: no-repeat !Important; display: block !important; position: fixed; opacity: 0.80; } .hide:before { background: transparent; content: "NEXT QUEST"; padding-bottom: 5px; position: absolute; text-align: center; width: 225px; top: 300px; border-radius: 25px 25px 0 0; color: blue; } |
Shishio-kunMar 6, 2013 4:59 PM
More topics from this board
» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )Shishio-kun - Apr 15, 2010 |
7822 |
by Thereisnoonehere
»»
May 27, 4:04 PM |
|
Sticky: » [ BBCODE ] All 2023 BBcodes, Guides, and TemplatesShishio-kun - Feb 16, 2023 |
41 |
by ohpishhposh
»»
May 25, 5:04 PM |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1207 |
by laBelphe
»»
May 23, 7:30 PM |
|
» [CSS - MODERN] ⭐️ All ways to customize individual anime and individual list rows (mark your favorites!)Shishio-kun - Sep 4, 2020 |
12 |
by takkun_
»»
May 12, 12:00 AM |
|
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2023 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
359 |
by CLModerno
»»
May 5, 7:50 PM |