New
Feb 25, 2014 10:31 AM
#101
| Here's a layout that I have been altering for the last 4 days, so I wanted to donate it, and who knows maybe someone will like it. It's kind of a review layout I guess, but take a look at it and see for yourself to determine that. Also a big thanks to Shishio-kun, I couldn't have done it without your tips and tutorials man. Also I kinda borrowed some stuff from you, but I hope your not mad. c: @import url(http://fonts.googleapis.com/css?family=Flamenco); @import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css"; @import "https://dl.dropboxusercontent.com/u/78340470/anime.css"; @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; @import url(http://fonts.googleapis.com/css?family=Allura); @import url(http://fonts.googleapis.com/css?family=Mystery+Quest); /* 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(); background-attachment: fixed; } body { background-size: cover; } /* HEADER COLOR AND FONT These codes control the main headers' fonts and colors. Every header is above each part of your list (they say things like Currently Watching, Completed, Dropped, etc). if you don't want a solid color there, go to the line that starts with background-color and replace it the color type (blue for example) with the word "transparent" (no quotations). */ .header_title { background-color:gray; color:black; font-family:allura; font-size:48px; opacity: .7; } /* SUB-HEADERS BACKGROUND COLOR COLOR Below each main header is the sub-header which says Score, Episodes, Tags, etc. */ .table_header { background-color:gray; opacity: 1; } /* ANIME/MANGA TITLE FONTS This is the type and color of the anime/manga titles on your list, like Bleach, Vampire Knight, etc. */ .animetitle, .animetitle:visited { color:black; font-family:mystery quest; font-size:20px; } /* 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:flamenco; } /* LIST WIDTH Use this to increase the width of your list! */ #list_surround { width:750px; } /* REPOSITION MAIN BACKGROUND Change the position your background starts on your screen from with the two properties after "background-position" below. You replace 'center' and '43%' with two other properties, they can be any of the following: left, top, bottom, right, or center. So if you want your background to start from the center of the screen, use "center center" after background-position in the code below, replacing "center 43%". If you want it to start from the top and left, use "top left" If you want it to start from the top and center, use "top center". If you want it to start from the right and top, use "right top" If you want it to start from the right and bottom, use "right bottom" and so forth... Additionally, you can change "left" to a % to determine how far left or right the background starts from. For example "30% top" will start the background from the top but 30% of the pic's width from the left of the layout. You can also change top to a % to change the amount you want to start it from the top or bottom. */ body{ background-position: center 43%;} /*OTHER CODES Important codes for the layout's setup. Don't mess with these unless you know exactly what you're doing. If you want to customize more on the page, use the link at the top of this CSS, or ask in my club! */ body { font-weight: light; background-repeat: no-repeat; background-color: black; } #list_surround { margin:auto; background-image:url(); } a { text-decoration:none; } a:visited { text-decoration:none; } a:hover, a:visited:hover { color:black; text-decoration:none; } .category_totals, .td1, .td2, #grand_totals, #copyright { background-image:url(http://img15.imageshack.us/img15/228/frame6518.png); border-width:0; padding:2px; } .category_totals:HOVER, .td1:HOVER, .td2:HOVER, #grand_totals:HOVER, #copyright:HOVER {background-color:black; border-width:0; padding:2px; } #copyright:after { content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs or info."; } .status_selected { background-color:black; padding:2px; color:white; text-decoration: blink; } .status_not_selected { background-color:black; padding:2px; color:white; } .status_selected a{ color:gray; } .status_not_selected a{ color:white; } .thickbox { color:cyan; font-family:fantasy; font-size:12px; } .header_title { height:52px; padding:2px; } .table_header { border-width:2; font-weight:bold; padding:2px; } .category_totals { height:30px; } #copyright, #grand_totals { text-align: center; margin:0 auto; } #list_surround { position: absolute !important; left: 50px !important;} } .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 { display:none; } .status_not_selected { opacity: 0.8; right: -210px !important; transition: all 0.4s ease 0s; z-index: 0; } .status_not_selected:hover { color: transparent; opacity: 1 !important; right: 2% !important; transition: all 0.4s ease 0s; z-index: 2 !important; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color: transparent; display: block; height: 100px; opacity: 0; right: 4px; width: 300px; } .status_selected, .status_not_selected { display: block; } #list_surround .status_selected, #list_surround .status_not_selected { background-attachment: scroll; background-color: transparent; background-image: url("http://i44.tinypic.com/33mbj1h.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; display: block; height: 100px; padding: 0; position: fixed; right: 24px; top: 160px; width: 300px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-attachment: scroll; background-color: transparent; background-image: url("http://i40.tinypic.com/2w33igk.png"); right: 24px; top: 260px; } #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://i43.tinypic.com/2ibyya1.png"); background-position: 0 0; background-size: 300px 100px !important; height: 100px !important; right: 24px; top: 360px; width: 300px !important; } #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://i42.tinypic.com/2nla7h0.png"); right: 24px; top: 460px; } #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://i44.tinypic.com/iqdjpu.png"); right: 24px; top: 560px; } #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 { display: none; } /* COVER AREA The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS). Left and top adjust the position it appears on screen. Control the height and width of the pic with height and width. Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away. Increase height and width to make the pics bigger. Delete border-style: solid; to remove the border. */ :hover + .hide { background-size: cover; right: 430px; top: 100px; height: 350px; width: 226px; padding-bottom: 0px; border-style: solid; border-color: white; border-top: 3px solid white;; border-left: 3px solid white; border-right: 3px solid white; border-bottom: 3px solid white; border-radius: 25px 25px 25px 25px; background-color: rgba(200, 5, 200, 0.75); background-position: center 50% !important; background-repeat: no-repeat !Important; display: block !important; position: fixed; } /* PREVIEW MSG ABOVE COVERS Remove content: "preview"; to remove the PREVIEW text. Change the text in quotations after content to what you want it to say above your cover pic. Top and width controls the position of the text. */ .hide:before { background: transparent; color: white; padding-bottom: 5px; position: absolute; text-align: center; width: 225px; top: -25px; border-radius: 25px 25px 0 0; } /* TAGS AREA Move the area around with the left and top codes. Adjust the surrounding area of the tags by adjusting the padding. Control the height and width of the section with the height and width codes. If your tags/mini-reviews aren't hovering correctly or you need help understanding or adjusting the background color code, see the bottom of the original tutorial: http://myanimelist.net/forum/?topicid=563993&show=0#post1 */ .td1:nth-of-type(6), .td2:nth-of-type(6) { background-color: rgba(20, 30, 255, 0.85) !important; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 3px; display: none; height: 145px; width: 312px; padding: 10px 10px 0px 24px; position: fixed; top: 470px; right: 365px; z-index: 1; } /* HEADER Deletes the header Tags which isn't necessary. */ .table_header:nth-of-type(6) { display: none; } /* TAG EDIT BUTTON Deletes the Tag's edit link which will is inaccessible with this setup, use the edit button by Animetitle to edit your tags. */ td:nth-of-type(6)a { display: none; } /* CURRENTLY WATCHING RENDER AND BACKGROUND */ .header_cw:before { background-image: url(http://imageshack.com/a/img571/5791/b7qs.png); } /* COMPLETED RENDER AND BACKGROUND */ .header_completed:before { background-image: url(http://images6.alphacoders.com/311/311015.jpg); } /* ON-HOLD RENDER AND BACKGROUND */ .header_onhold:before { background-image: url(http://www.megami-sama.net/files/ljpics03/souleater_pmook_27.jpg); } /* DROPPED RENDER AND BACKGROUND */ .header_dropped:before { background-image: url(http://p1.pichost.me/i/22/1447744.jpg); } /* PLANNED RENDER AND BACKGROUND */ .header_ptw:before { background-image: url(http://images5.alphacoders.com/374/374837.jpg); } /* CURRENT RENDER AND BACKGROUND SETTINGS*/ .header_cw:before { position: fixed; display: block; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: left top, center top; background-size: cover; z-index: -1; } /* COMPLETED RENDER AND BACKGROUND SETTINGS*/ .header_completed:before { position: fixed; display: block; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: left top, center top; background-size: cover; z-index: -1; } /* ON-HOLD RENDER AND BACKGROUND SETTINGS */ .header_onhold:before { position: fixed; display: block; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: left top, center top; background-size: cover; z-index: -1; } /* DROPPED RENDER AND BACKGROUND SETTINGS */ .header_dropped:before { position: fixed; display: block; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: left top, center top; background-size: cover; z-index: -1; } /* PLANNED RENDER AND BACKGROUND SETTINGS */ .header_ptw:before { position: fixed; display: block; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: left top, center center; background-size: cover; z-index: -1; } #list_surround { position: absolute !important; left: 10px !important;} #list_surround { width: 520px !important; } /* LIST BACKGROUND COLOR AND OPACITY Go to this page for instructions on customizing this part, under: Changing the list background color + opacity of the list background http://myanimelist.net/forum/?topicid=440525 */ .category_totals, .td1, .td2, #grand_totals, #copyright { background: rgba(0, 150, 185, 0.5) !important; } /*LIST BORDERS You can change the color of the border with border-color. You can increase the size of the border by increasing the px amount after any of the border-width codes. They're all set to 1px- make sure you increase all the border widths the same amount. Leave the border amounts that are set to zero alone. */ #copyright { border-color: white; border-style: solid; border-width: 2px; } .td1, .td2, .table_header { border-color: white; border-style: solid; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 0; border-top-width: 0 !important; } .td1, .td2, .list_surround { border-color: white; border-style: solid; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 0; border-top-width: 0 !important; } .category_totals{ border-color: white; border-style: solid; border-width: 0 2px 2px; } .category_totals{ border-radius: 0 0 25px 25px; } /****************************/ /* Blue Highlight on Hover */ /****************************/ tr:hover [class^=td] { background-color: rgba(80, 50, 225, 0.9) !important; -moz-transition: .4s ease; -webkit-transition: .4s ease; -o-transition: .4s ease; } /* Anime List only CURRENTLY WATCHING HEADER This is the header above currently watching/reading. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_cw { background-image:url(http://209.190.33.194/images/752/7521a870657bb65276801c594bab8ee2256e0870.png); height: 150px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* COMPLETED HEADER This is the header above your anime/manga that's completed. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_completed { background-image:url(http://209.190.33.194/images/d4d/d4da93b0cf5cd25414590ce87e1114c7c9cfe5af.png); height: 150px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* ON-HOLD HEADER This is the header above your animes/mangas on-hold. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_onhold { background-image:url(http://209.190.33.194/images/07b/07b59669f09ee3778f6da1e6d729446b2f275e62.png); 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 amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_dropped { background-image:url(http://209.190.33.194/images/947/94741b87f41e584dc05e66b573982b5a14c1edac.png); height: 150px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* PLAN TO WATCH HEADER This is the header above the anime/manga you plan to see or read on your list. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_ptw { background-image:url(http://209.190.33.194/images/063/0638d7dd7067682ce6cd0ba38e0afbce3d0d4960.png); height: 150px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* REMOVE HEADER COLOR You need this code to remove the default background colors from the header and override any related codes. You're supposed to use your own images or the default ones for the header, so this color is set to transparent so it won't get in the way. If you want the color back for some reason, remove this section. */ .header_title { background-color: transparent !important; } /* OTHER CODES Stuff I had to add after site changes. You need this otherwise the headers won't be visible. */ tbody {background-color: transparent; background-image: none;} /* REMOVE HEADER TEXT These codes remove the original text like "Completed" and "Currently Watching" from each category on the list. Some people will want the text gone so they can have their own custom logos. But if you want the text back, you have to remove this whole section. It shouldn't affect the images in any way. */ .header_title { color: gray !important; color: transparent !important; font-size: 1px !important; font-size: 0px !important; font-size: 0 !important; font-size: 0pt !important; } #list_surround { position: absolute !important; top: 100px;} |
Saber is so cool! |
Apr 4, 2014 5:10 AM
#102
| I donate my Hunter x Hunter layout, maybe someone would like to use it. previews: The code (For anime lists only) Edit: changed the topbar and preview screenshots. |
NarushistoMay 31, 2015 4:48 AM
 |
Apr 25, 2014 7:02 AM
#103
Apr 26, 2014 10:12 AM
#104
Oiomi said: I thought I'd donate my "ef: a fairy tale of the two" layout. Though I should mention that it's not exactly the most user friendly one out there ;) the code settings you HAVE to set it like this. Preview  Whoa the date sim one! This is awesome, ty. I really like the menu on the right side. |
Apr 26, 2014 12:07 PM
#105
Shishio-kun said: Thank you :3Oiomi said: I thought I'd donate my "ef: a fairy tale of the two" layout. Though I should mention that it's not exactly the most user friendly one out there ;) the code settings you HAVE to set it like this. Preview Whoa the date sim one! This is awesome, ty. I really like the menu on the right side. It's a exact replica of the game menu :P In combination with the in-game Dialogue box and sprites |
         |
May 13, 2014 2:33 PM
#106
| Minimalist V5.2 [May 20, 2014] Preview: http://i.imgur.com/DI0jSXq.gif Theme code: (with customizable usertitle) - http://pastebin.com/81k2i0Fh (without customizable usertitle) - http://pastebin.com/pu6wDUnp Patch notes: 5.2 [May 20, 2014] - fixed "more" info format. 5.1 [May 13, 2014] - copyright section visiblity - removed grand total category 5.0 [May 10, 2014] - new customizable usertitle - banner adjustments - 850x200 - removed white border - added grand total category in the bottom - new copyright mod - border radius adjustment - hovercover mod adjustments - wallpaper adjustments Notes: - How to apply theme: http://myanimelist.net/forum/?topicid=200320 - How to change banner image: locate ":nth-child(5) .header_title {" and change the background url. You can use any size image for the banner, it will auto re-size. however, preferably use a 850x250 image. - How to change usertitle: locate "MyAnimeList" and change to your username. For updates, visit my profile at http://myanimelist.net/profile/isaychris Credits / Thank you to: Shishio - for the awesome tutorials Ins - for sword art online theme as base for my theme. kuronekodesu - for help and the copyright mod. VeriTi - for banner help. ----------------------------------------------------------------------------------- ADD-ON: HOVER COVER MOD instructions: Add one of these to the top of the theme code: 1a) Anime list @import url("https://dl.dropboxusercontent.com/u/78340470/anime.css"); 1b) Manga list @import "http://dl.dropbox.com/u/78340470/mangatitle.css"; If you want BOTH anime and manga hovercover mod, you will need two seperate layouts for anime and manga. You cannot have both @imports on the same theme. 2) add either [Style 1] or [Style 2] to the bottom of the theme code. [Style 1] v5 (May 10, 2014) [compatible with minimalist 5.0 - 5.2] Hovering over list shows anime cover on the side Preview: http://i.imgur.com/i7PYD6D.gif Code: http://pastebin.com/eyF4ehyg [Style 2] v5.1 (May 10, 2014) [combatiable with minimalist 5.0 - 5.2] Rectangle anime cover shown next to anime title. Hovering over rectangle enlarges anime cover. Preview: http://i.imgur.com/AiUrpz3.gif Code: http://pastebin.com/iiD3v6hU Notes: * When Hover cover mod is added, the "More" link next to Add or Edit will stop working. * Users with long lists, i suggest setting default page to "watching" when using style 2 as it will take abit longer for your list to load. |
isaychrisMay 20, 2014 6:43 PM
May 17, 2014 9:58 AM
#107
 No Game No Life layout This used to be a Mahou Shoujo Madoka Magica Layout. @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); @import url(http://storage.live.com/items/4A07C1EEED420167%21151); /* HOW TO USE Use and COMPLETE this simple tutorial if you never installed CSS, it only takes a few minutes: http://myanimelist.net/forum/?topicid=200320 When you're done with the tutorial and can see the starter layout on your list, copy and paste this entire page of codes (including this part and the codes above and below) to your CSS edit box (the box titled Edit Advanced CSS File) replacing any other codes in the box. Save with the blue button at the bottom. It will put this premade layout on your list instead of the starter one from the tutorial! If the layout looks weird on your list after installing, you can try to alter your settings here. Common solutions are to set Default Status Settings to Watching or All Anime, check or uncheck tags (make sure you save afterwards): http://myanimelist.net/editprofile.php?go=listpreferences If your list still has problems you can ask us about it here, or other questions: http://myanimelist.net/forum/?topicid=200323 And you'll find further ways to customize your list here: http://myanimelist.net/forum/?topicid=419405 */ body { background-attachment:fixed; background-clip:border-box; background-color:transparent; background-image:url(http://i1.wp.com/angryanimebitches.com/wp-content/uploads/2014/04/No-Game-No-Life-1-Img034.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:1080px !important; left:0 !important; margin:auto !important; position:fixed !important; right:0 !important; top:0 !important; width:1920px !important; z-index:-1 !important; } #list_surround { background-attachment:scroll; background-color:transparent; background-image:url(http://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/No-Game-No-Life-anime-logo.svg/600px-No-Game-No-Life-anime-logo.svg.png); background-position:30px -40px; background-repeat:no-repeat no-repeat; font-size:100%; line-height:1; margin:0 auto; padding-bottom:10px; padding-top:320px; position:absolute; right:-4px !important; width:700px; } a { color:#FFFFFF; text-decoration:none; text-shadow:none; } a:hover { color:#fff; text-decoration:underline; } .table_header { background-color:rgba(255, 255, 255, 0.4); } .table_header:first-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:10px; border-top-right-radius:0; } .table_header:nth-of-type(2) { padding-left:35px; text-align:left; } .table_header:last-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:0; border-top-right-radius:10px; } .td1 { background-color:rgba(0, 0, 0, 0.4); height:65px; } .td2 { background-color:rgba(0, 0, 0, 0.4); height:65px; } .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border:0 none; padding:4px; text-align:center; vertical-align:top; } .table_header, .td1, .td2, .category_totals { color:white; } .borderRBL { line-height:normal !important; } [cellspacing="0"] { line-height:17px; } .category_totals { background-color:rgba(255, 255, 255, 0.4); border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:0; border-top-right-radius:0; color:white; text-align:center; } [class^="header_"] * { background-repeat:no-repeat no-repeat; font-size:0; height:200px; line-height:24px; padding-bottom:4px; text-align:right; vertical-align:bottom; } .header_title { border-bottom-left-radius:4px; border-bottom-right-radius:4px; border-top-left-radius:4px; border-top-right-radius:4px; color:#FFFFFF; display:inline-block; font-style:italic; height:auto; padding:0 8px 0 0; text-shadow:rgba(0, 0, 0, 0.14902) 0 1px 1px; } #grand_totals { background-color:transparent; border:0 none; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; color:#FFFFFF; line-height:20px; min-height:20px; padding:8px; text-align:center; vertical-align:middle; } #copyright { background-color:rgba(180, 32, 48, 0.6); border-bottom-left-radius:3px; border-bottom-right-radius:3px; border-top-left-radius:3px; border-top-right-radius:3px; color:#EEEEEE; line-height:17px; margin-top:10px; padding:8px; text-align:center; } #copyright::after { } .hide { background-color:rgba(248, 162, 200, 0.701961); background-position:50% 50%; background-repeat:no-repeat no-repeat; background-size:cover; border:1px solid #FFFFFF; border-bottom-left-radius:7px; border-bottom-right-radius:7px; border-top-left-radius:7px; border-top-right-radius:7px; display:inline-block !important; height:55px; margin-left:33px; margin-top:-65px; position:absolute; width:35px; } .hide:hover { background-color:transparent; background-repeat:no-repeat no-repeat; background-size:cover; border-bottom-left-radius:20px; border-bottom-right-radius:20px; border-top-left-radius:20px; border-top-right-radius:20px; box-shadow:rgba(63, 52, 60, 0.54902) 0 0 8px 8px; margin-left:-130px; padding-right:150px; padding-top:220px !important; position:absolute; z-index:1; } .td1:nth-of-type(2), .td2:nth-of-type(2) { padding-left:35px; text-align:left; } .td1:nth-of-type(6), .td2:nth-of-type(6) { background-attachment:scroll; background-color:transparent; background-image:none; background-position:0 0; background-repeat:repeat repeat; border-bottom-style:none !important; border-bottom-width:medium !important; display:inline-block; font-family:cursive; font-size:9pt; height:0 !important; left:70px; line-height:16px !important; margin-top:16px; position:absolute; text-align:justify !important; width:720px; z-index:2; } .table_header:nth-of-type(6) { display:none; } span[id*="tagRow"] { display:block !important; } span[id*="tagLinks"] { display:none !important; } a, .td1, .td2, .category_totals { -webkit-transition:all 0.25s ease-in-out 0s; transition:all 0.25s ease-in-out 0s; } #list_surround .status_selected, #list_surround .status_not_selected { -webkit-background-clip:padding-box !important; background-clip:padding-box !important; background-color:transparent; background-image:url(http://i93.photobucket.com/albums/l75/chanwit453/Nuevo-anuncio-para-televisioacuten-de-No-Game-No-Life_zps74e555b4.png); background-position:0 0; background-repeat:no-repeat no-repeat; background-size:contain; border:1px solid transparent; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; display:block; left:-300px; padding:0; position:absolute; top:20px; width:263px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-image:url(http://i93.photobucket.com/albums/l75/chanwit453/no-game-no-life-episode-2-22_zpsc73866b1.png); background-position:100% 0; top:140px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i93.photobucket.com/albums/l75/chanwit453/AzoGW4A_zpse258b92f.png); background-position:0 0; top:260px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i93.photobucket.com/albums/l75/chanwit453/maxresdefault_zpsb7863315.png); background-position:100% 0; top:380px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i93.photobucket.com/albums/l75/chanwit453/no-game-no-life_zps6621f32d.png); background-position:0 0; top:500px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i93.photobucket.com/albums/l75/chanwit453/anime-No-Game-No-Life-415x260_zpsba930039.png); background-position:100% 0; top:620px; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color:transparent; display:block; font-size:0; height:113px; width:263px; } .header_cw { background-color:transparent; background-image:url(http://i47.tinypic.com/1juk9s.png); background-position:50% 150px; background-repeat:no-repeat no-repeat; height:50px; margin-bottom:0; margin-top:-300px; } .header_completed { background-color:transparent; background-image:url(http://i49.tinypic.com/snmjia.png); background-position:50% 150px; background-repeat:no-repeat no-repeat; height:100px; margin-bottom:0; margin-top:-100px; } .header_onhold { background-color:transparent; background-image:url(http://i48.tinypic.com/2n8deth.png); background-position:50% 150px; background-repeat:no-repeat no-repeat; height:50px; margin-bottom:0; margin-top:-100px; } .header_dropped { background-color:transparent; background-image:url(http://i50.tinypic.com/ehk8b7.jpg); background-position:50% 150px; background-repeat:no-repeat no-repeat; height:50px; margin-bottom:0; margin-top:-100px; } .header_ptw { background-color:transparent; background-image:url(http://i50.tinypic.com/bimm44.png); background-position:50% 150px; background-repeat:no-repeat no-repeat; height:75px; margin-bottom:0; margin-top:-100px; } .status_selected { display:block; } .status_not_selected { display:block; } .status_not_selected { opacity:0.7; } .status_not_selected:hover { color:transparent; opacity:1; } #list_surround { left:0 !important; margin:auto !important; position:absolute !important; right:0 !important; } /*COLOR OF THE "AIRING EXT." TEXT*/ .animetitle + small { color:#CC33FF !important; font-weight:bold; } * { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out;} /*DVD COVER HOVER GLITCH FIX (Chrome/Safari/Firefox/Opera only)*/ .hide:hover:after { background: transparent; content: " "; height: 75px; left: 0; position: absolute; top: 0; width: 210px; z-index: 20; } |
ScarLight778Jul 19, 2015 6:27 AM
May 26, 2014 5:45 AM
#108
| 50 Shades Of Brown layout (Mushishi) Preview Image http://i.imgur.com/1YU20Dh.jpg Code @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; @import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css"; @import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css"; @import "http://fonts.googleapis.com/css?family=Advent+Pro"; * { text-decoration: none; } body { background-attachment: fixed; background-clip: border-box; background-color: transparent; background-image: url("http://i.imgur.com/aAe64wm.jpg"); background-position: 24% 8%; background-repeat: no-repeat no-repeat; background-size: cover; font-family: advent; } #list_surround { background-attachment: fixed; background-position: 24% 0; background-repeat: no-repeat no-repeat; font-size: 15px; height: 25px; left: 15% !important; line-height: 1; margin: 0 auto; padding-bottom: 13px; padding-top: 133px; position: absolute; width: 700px; z-index: 0; } a { color: white; text-shadow: none; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color: khaki; font-weight: bold; transition: all 0.4s ease 0s; } a:hover { color: #D8CF7E; text-shadow: 0 1px rgba(255, 255, 255, 0.15); } .table_header { } .table_header:first-of-type { border-radius: 20px 0 0 0; } .table_header:nth-of-type(2) { text-align: left; } .table_header:nth-of-type(5) { border-bottom-right-radius: 0; border-top-left-radius: 0; border-top-right-radius: 20px; } .table_header, .category_totals { background-color: #000000; border: 0 none; opacity: 1; padding: 4px; text-align: center; vertical-align: top; } .td1, .td2 { background-image: url("http://t1.gstatic.com/images?q=tbn:ANd9GcSZNvZLYLEOqv7vw4o7yDn3jRDIAq7WTtUgCpCVjb8eR1QR0E0p&t=1"); padding: 4px; } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } .table_header:nth-of-type(6) { display: none; width: 0; } small { color: khaki; font-weight: bold; } .table_header, .td1, .td2, .category_totals { color: grey; } .borderRBL { line-height: normal !important; } [cellspacing="0"] { line-height: 18px; } .category_totals { background-color: black; border-radius: 0 0 12px 12px; text-align: center; } .category_totals:hover { background-color: #D8CF7E; color: #FFFFFF; } [class^="header_"] * { background-repeat: no-repeat no-repeat; font-size: 0; height: 80px; line-height: 80px; padding-bottom: 0px; text-align: right; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; color: #FFFFFF; display: inline-block; font-style: italic; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } #grand_totals { background-color: rgba(234, 203, 82, 0.8); border: 0 none; border-radius: 3px 3px 3px 3px; color: white; line-height: 20px; min-height: 20px; padding: 8px; text-align: center; vertical-align: middle; } .status_not_selected { opacity: 0.7; right: -183px !important; transition: all 0.4s ease 0s; } .status_not_selected:hover { color: transparent; opacity: 1; right: 3px !important; transition: all 0.4s ease 0s; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color: transparent; display: block; height: 100px; opacity: 0; width: 271px; } .status_selected { display: block; } .status_not_selected { display: block; } .header_cw { background-color: transparent; background-image: url("http://i.imgur.com/uGXuBAV.png"); background-position: 0% 0; background-repeat: no-repeat no-repeat; height: 30px; } .header_completed { background-color: transparent; background-image: url("http://i.imgur.com/ox6A4QK.png"); background-position: 0% 0; background-repeat: no-repeat no-repeat; height: 30px; } .header_onhold { background-color: transparent; background-image: url("http://i.imgur.com/Ep8QYH8.png"); background-position: 0% 0; background-repeat: no-repeat no-repeat; height: 30px; } .header_dropped { background-color: transparent; background-image: url("http://i.imgur.com/mxOCAu4.png"); background-position: 0% 0; background-repeat: no-repeat no-repeat; height: 30px; } .header_ptw { background-color: transparent; background-image: url("http://i.imgur.com/1K4SJYk.png"); background-position: 0% 0; background-repeat: no-repeat no-repeat; height: 30px; } #list_surround .status_selected, #list_surround .status_not_selected { background-attachment: scroll; background-color: transparent; background-image: url("http://i.imgur.com/xQxLaBN.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; border: 2px solid black !important; border-radius: 20px 0 0 0; display: block; height: 83px; padding: 0; position: fixed; right: -3px; top: 274px; width: 271px; } #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://i.imgur.com/yktORXl.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; border-top-left-radius: 0; border-top-right-radius: 0; top: 360px; } #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://i.imgur.com/vNIBILy.png"); background-position: 0 0; background-repeat: repeat repeat; top: 446px; } #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://i.imgur.com/skssIOh.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; top: 531px; } #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://i.imgur.com/m0Cxg70.png"); background-position: 0 0; background-repeat: repeat repeat; top: 617px; } #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://i.imgur.com/T7LFUp8.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 20px !important; top: 702px; width: 271px; } :hover + .hide { background-color: rgba(200, 5, 200, 0.75); background-position: center 50% !important; background-repeat: no-repeat !important; background-size: cover; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; display: block !important; height: 280px; left: 1%; padding-bottom: 0; position: fixed; top: 160px; width: 181px; } .hide:before { background: none repeat scroll 0 0 transparent; border-radius: 25px 25px 0 0; color: white; content: ""; padding-bottom: 5px; position: absolute; text-align: center; top: -25px; width: 225px; } .td1:nth-of-type(6), .td2:nth-of-type(6) { background-color: rgba(20, 30, 255, 0.85) !important; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; display: none; height: auto; left: 0; padding: 12px 17px 16px 23px; position: fixed; top: 462px; width: 184px; z-index: 1; } Code 2 If some category buttons aren't showing you can use this, it moves the category buttons up. @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; @import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css"; @import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css"; @import "http://fonts.googleapis.com/css?family=Advent+Pro"; * { text-decoration: none; } body { background-attachment: fixed; background-clip: border-box; background-color: transparent; background-image: url("http://i.imgur.com/aAe64wm.jpg"); background-position: 24% 8%; background-repeat: no-repeat no-repeat; background-size: cover; font-family: advent; } #list_surround { background-attachment: fixed; background-position: 24% 0; background-repeat: no-repeat no-repeat; font-size: 15px; height: 25px; left: 15% !important; line-height: 1; margin: 0 auto; padding-bottom: 13px; padding-top: 133px; position: absolute; width: 700px; z-index: 0; } a { color: white; text-shadow: none; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color: khaki; font-weight: bold; transition: all 0.4s ease 0s; } a:hover { color: #D8CF7E; text-shadow: 0 1px rgba(255, 255, 255, 0.15); } .table_header { } .table_header:first-of-type { border-radius: 20px 0 0 0; } .table_header:nth-of-type(2) { text-align: left; } .table_header:nth-of-type(5) { border-bottom-right-radius: 0; border-top-left-radius: 0; border-top-right-radius: 20px; } .table_header, .category_totals { background-color: #000000; border: 0 none; opacity: 1; padding: 4px; text-align: center; vertical-align: top; } .td1, .td2 { background-image: url("http://t1.gstatic.com/images?q=tbn:ANd9GcSZNvZLYLEOqv7vw4o7yDn3jRDIAq7WTtUgCpCVjb8eR1QR0E0p&t=1"); padding: 4px; } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } .table_header:nth-of-type(6) { display: none; width: 0; } small { color: khaki; font-weight: bold; } .table_header, .td1, .td2, .category_totals { color: grey; } .borderRBL { line-height: normal !important; } [cellspacing="0"] { line-height: 18px; } .category_totals { background-color: black; border-radius: 0 0 12px 12px; text-align: center; } .category_totals:hover { background-color: #D8CF7E; color: #FFFFFF; } [class^="header_"] * { background-repeat: no-repeat no-repeat; font-size: 0; height: 80px; line-height: 80px; padding-bottom: 0px; text-align: right; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; color: #FFFFFF; display: inline-block; font-style: italic; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } #grand_totals { background-color: rgba(234, 203, 82, 0.8); border: 0 none; border-radius: 3px 3px 3px 3px; color: white; line-height: 20px; min-height: 20px; padding: 8px; text-align: center; vertical-align: middle; } .status_not_selected { opacity: 0.7; right: -183px !important; transition: all 0.4s ease 0s; } .status_not_selected:hover { color: transparent; opacity: 1; right: 3px !important; transition: all 0.4s ease 0s; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color: transparent; display: block; height: 100px; opacity: 0; width: 271px; } .status_selected { display: block; } .status_not_selected { display: block; } .header_cw { background-color: transparent; background-image: url("http://i.imgur.com/uGXuBAV.png"); background-position: 0% 0; background-repeat: no-repeat no-repeat; height: 30px; } .header_completed { background-color: transparent; background-image: url("http://i.imgur.com/ox6A4QK.png"); background-position: 0% 0; background-repeat: no-repeat no-repeat; height: 30px; } .header_onhold { background-color: transparent; background-image: url("http://i.imgur.com/Ep8QYH8.png"); background-position: 0% 0; background-repeat: no-repeat no-repeat; height: 30px; } .header_dropped { background-color: transparent; background-image: url("http://i.imgur.com/mxOCAu4.png"); background-position: 0% 0; background-repeat: no-repeat no-repeat; height: 30px; } .header_ptw { background-color: transparent; background-image: url("http://i.imgur.com/1K4SJYk.png"); background-position: 0% 0; background-repeat: no-repeat no-repeat; height: 30px; } #list_surround .status_selected, #list_surround .status_not_selected { background-attachment: scroll; background-color: transparent; background-image: url("http://i.imgur.com/xQxLaBN.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; border: 2px solid black !important; border-radius: 20px 0 0 0; display: block; height: 83px; padding: 0; position: fixed; right: -3px; top: 96px; width: 271px; } #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://i.imgur.com/yktORXl.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; border-top-left-radius: 0; border-top-right-radius: 0; top: 185px; } #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://i.imgur.com/vNIBILy.png"); background-position: 0 0; background-repeat: repeat repeat; top: 271px; } #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://i.imgur.com/skssIOh.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; top: 360px; } #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://i.imgur.com/m0Cxg70.png"); background-position: 0 0; background-repeat: repeat repeat; top: 446px; } #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://i.imgur.com/T7LFUp8.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 20px !important; top: 531px; width: 271px; } :hover + .hide { background-color: rgba(200, 5, 200, 0.75); background-position: center 50% !important; background-repeat: no-repeat !important; background-size: cover; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; display: block !important; height: 280px; left: 1%; padding-bottom: 0; position: fixed; top: 160px; width: 181px; } .hide:before { background: none repeat scroll 0 0 transparent; border-radius: 25px 25px 0 0; color: white; content: ""; padding-bottom: 5px; position: absolute; text-align: center; top: -25px; width: 225px; } .td1:nth-of-type(6), .td2:nth-of-type(6) { background-color: rgba(20, 30, 255, 0.85) !important; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; display: none; height: auto; left: 0; padding: 12px 17px 16px 23px; position: fixed; top: 462px; width: 184px; z-index: 1; Hope you guys like it :) |
KokkoJun 29, 2014 3:08 PM
Jun 11, 2014 6:26 PM
#109
This was my first layout I made so don't Expect something great about it d: , also there was a lot of things here I wanted to change it for a better look but I was too lazy for that so I let it alone forever, haha. Code: (Fixed) @import "http://fonts.googleapis.com/css?family=Nothing+You+Could+Do"; @import "http://fonts.googleapis.com/css?family=Carrois+Gothic+SC"; @import "https://dl-web.dropbox.com/get/Public/2.txt?w=AAC15tgTkrApjl8VNGSa3XDUZeqTJDSnU0K4hTy16Uk-8Q"; @import"http://dl.dropbox.com/u/78192465/MyAnimeList/Kimi%20ni%20Todoke/TopMenu.css"; @import "https://dl-web.dropbox.com/get/Menu.css?_subject_uid=157146789&w=AAC6oKE2DU4Qc_apYJoJsQZ7j71sk-sHy_LwH3kEt4GD8Q"; @import "https://dl-web.dropbox.com/get/Public/3.txt?w=AABXlm-rBmK9-Zdtqx2zPtTraKnb1Qq_LFb3uU_dTPwquA"; body { color: #000000; cursor: url("Images/cursor.png") 1 2, auto; font-family: Verdana,Arial; font-size: 11px; } a, a:visited { color: #ffcc99; text-decoration: none; } a:hover { color: #ffcc99; } #list_surround { padding-top: 40px; width: 521px; } .category_totals { padding-bottom: 18px; text-align: right; } #grand_totals { display: none; } .category_totals, #grand_totals { color: #ffffff; font-family: 'Carrois Gothic SC',sans-serif; text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000; } .animetitle { display: block; line-height: 24px !important; max-width: 276px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .animetitle + small { background-color: #ffffff; border: 1px solid #efefef; border-radius: 120px 0 0 120px / 12px 0 0; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset; color: #ffcc99; font-size: 14px !important; line-height: 14px !important; margin-left: 470px; padding: 4px; position: absolute !important; text-align: center; transform: rotate(25deg); visibility: visible !important; white-space: nowrap !important; width: 150px; } .animetitle + small:after { height: 40px !important; left: 10px; pointer-events: none; position: absolute !important; top: 10px; width: 34px !important; } .hide { background-size: 200px 0; display: inline-block !important; height: 0 !important; left: 25px; line-height: 24px !important; opacity: 0; pointer-events: none; position: fixed; top: 5px; transform: rotate(-9deg); transition: opacity 1s ease-in-out 0s; visibility: hidden; width: 0 !important; z-index: 20; } :hover + .hide:before { border: 1px solid rgba(137, 130, 48, 0.2); border-radius: 10px; content: " "; font-size: 14px !important; margin-left: 114%; margin-top: 0; padding: 0.2em; pointer-events: none; position: absolute; visibility: hidden; width: 160%; } :hover + .hide:after { content: " "; height: 50%; left: 0; position: absolute; top: 50%; width: 100%; } .td1, .td2 { background-color: rgba(255, 255, 255, 0.5); border-bottom: 1px solid #297bba; font-family: 'Nothing You Could Do',cursive; font-size: 18px; transition: all 1s ease-in-out 0s; z-index: 15; } .td1 a, .td2 a { color: #000000; } #list_surround .header_title span, #list_surround .header_title .thickbox { display: none; } .table_header[width="30"] { display: none !important; } .table_header span, .table_headerLink, .table_headerLink:visited { color: #ffffff !important; } .table_headerLink:hover { text-shadow: 0 0 0.2em #ffffff; } .table_header a { background: none repeat scroll 0 0 #ffcc99; } .table_header a[href$="order=4"] { margin-top: 12px; transform: none; } .table_header a[href$="order=12"] { margin-left: -518px; margin-top: -108px; } .form { border-color: #ababab; border-style: solid; border-width: 1px; color: #000000; font-family: Verdana,Arial; font-size: 11px; padding: 2px; } #mal_cs_powered #search #searchBox { background: none repeat scroll 0 0 rgba(255, 255, 255, 0); border: 2px solid #ffcc99; color: #ffffff; font-family: 'Carrois Gothic SC',sans-serif; font-size: 16px !important; font-weight: bold; height: 35px !important; overflow: hidden; padding: 5px; right: 50px !important; text-shadow: 0.1em 0.1em 0.2em #ffcc99, 0.1em 0.1em 0.2em #ffcc99; top: 250px !important; width: 175px !important; z-index: 20; } .header_al { font-size: 16px; font-weight: bold; } #copyright { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5); border: 2px solid #bdc9e1; color: #000000; float: right; font-family: 'Carrois Gothic SC',sans-serif; padding: 2px; text-align: right !important; width: 246px; z-index: 15; } #copyright a { color: #ffffff; } #copyright a:hover { color: #ffffff; text-shadow: 0 0 0.2em #ffffff; } #copyright:after { content: "List designed by Hahaido."; display: block; } body:before { background: url("http://i.minus.com/i1poPHwatfgfR.png") repeat scroll center center, -moz-linear-gradient(center bottom , #fdaf85 37%, #ffecb4 70%) repeat scroll 0 0 transparent; content: " "; height: 100%; position: fixed; width: 100%; z-index: -2; } body:after { display: block !important; height: 569px; left: 0; pointer-events: none; position: fixed !important; width: 900px; z-index: -1; } #inlineContent { border-bottom-right-radius: 50%; box-shadow: 0 0 20px #ffcc99 inset; content: " "; display: block !important; position: fixed !important; right: 0; top: 0; width: 500px; z-index: 10; } #inlineContent:after { height: 600px; pointer-events: none !important; position: fixed !important; right: 0; top: 0; width: 550px; z-index: 10; } sometimes it take time for the wallpaper to appears especially if it's new so be Patient, also I changed it because there was something a bit wrong with it in the last time I checked it but don't know about the colors because I don't use my computer currently to know that or make it like before. |
RemuresuJun 23, 2014 11:56 AM
Jun 12, 2014 8:04 PM
#110
Lemres said: [size=90]This was my first layout I made so don't Expect something great about it d: , also there was a lot of things here I wanted to change it for a better look but I was too lazy for that so I let it alone forever, haha. Code: @import "http://fonts.googleapis.com/css?family=Nothing +You+Could+Do"; @import "http://fonts.googleapis.com/css?family=Carrois +Gothic+SC"; @import "https://dl-web.dropbox.com/get/Public/2.txt? w=AAC15tgTkrApjl8VNGSa3XDUZeqTJDSnU0K4hTy16Uk-8Q"; @import "http://dl.dropbox.com/u/78192465/MyAnimeList/Kimi%20ni %20Todoke/TopMenu.css"; @import "http://dl.dropbox.com/u/78192465/MyAnimeList/Kimi%20ni %20Todoke/CategoryMenu.css"; @import "https://dl-web.dropbox.com/get/Public/3.txt? w=AABXlm-rBmK9-Zdtqx2zPtTraKnb1Qq_LFb3uU_dTPwquA"; body { color: #000000; cursor: url("Images/cursor.png") 1 2, auto; font-family: Verdana,Arial; font-size: 11px; } a, a:visited { color: #FFCC99; text-decoration: none; } a:hover { color: #FFCC99; cursor: url ("http://dl.dropbox.com/u/157146789/cur451.cur") 1 2, auto; } #list_surround { padding-top: 40px; width: 521px; } .category_totals { padding-bottom: 18px; text-align: right; } #grand_totals { display: none; } .category_totals, #grand_totals { color: #FFFFFF; font-family: 'Carrois Gothic SC',sans-serif; text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000; } .animetitle { display: block; line-height: 24px !important; max-width: 276px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .animetitle + small { background-color: #FFFFFF; border: 1px solid #EFEFEF; border-radius: 120px 0 0 120px / 12px 0 0 0; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset; color: #FFCC99; font-size: 14px !important; line-height: 14px !important; margin-left: 470px; padding: 4px; position: absolute !important; text-align: center; transform: rotate(25deg); visibility: visible !important; white-space: nowrap !important; width: 150px } .animetitle + small:after { background: url ("http://dl.dropbox.com/u/78192465/MyAnimeList/Kimi%20ni %20Todoke/Images/pinn.png") no-repeat scroll 0 0 transparent; height: 40px !important; left: 10px; pointer-events: none; position: absolute !important; top: 10px; width: 34px !important; } .hide { background-size: 200px 0; display: inline-block !important; height: 0 !important; left: 25px; line-height: 24px !important; opacity: 0; pointer-events: none; position: fixed; top: 5px; transform: rotate(-9deg); transition: opacity 1s ease-in-out 0s; visibility: hidden; width: 0 !important; z-index: 20; } :hover + .hide:before { border: 1px solid rgba(137, 130, 48, 0.2); border-radius: 10px 10px 10px 10px; content: " "; font-size: 14px !important; margin-left: 114%; margin-top: 0; padding: 0.2em; pointer-events: none; position: absolute; visibility: hidden; width: 160%; } :hover + .hide:after { background: -moz-linear-gradient(center top , rgba (255, 255, 255, 0) 0%, #FFFFFF 100%) repeat scroll 0 0 transparent; content: " "; height: 50%; left: 0; position: absolute; top: 50%; width: 100%; } .td1, .td2 { background-color: rgba(255, 255, 255, 0.5); border-bottom: 1px solid #297BBA; font-family: 'Nothing You Could Do',cursive; font-size: 18px; transition: all 1s ease-in-out 0s; z-index: 15; } .td1 a, .td2 a { color: #000000; } #list_surround .header_title span, #list_surround .header_title .thickbox { display: none; Block; } .table_header[width="30"] { display: none !important; } .table_header span, .table_headerLink, .table_headerLink:visited { color: #FFFFFF !important; } .table_headerLink:hover { text-shadow: 0 0 0.2em #FFFFFF; } .table_header a { background: none repeat scroll 0 0 #FFCC99; } .table_header a[href$="order=4"] { margin-left: px; margin-top: 12px; position: npne; transform: none; } .table_header a[href$="order=12"] { margin-left: -518px; margin-top: -108px; } .form { border-color: #ABABAB; border-style: solid; border-width: 1px; color: #000000; font-family: Verdana,Arial; font-size: 11px; padding: 2px; } #mal_cs_powered #search #searchBox { background: none repeat scroll 0 0 rgba(255, 255, 255, 0); border: 2px solid #FFCC99; color: #FFFFFF; font-family: 'Carrois Gothic SC',sans-serif; font-size: 16px !important; font-weight: bold; height: 35px !important; overflow: hidden; padding: 5px; right: 50px !important; text-shadow: 0.1em 0.1em 0.2em #FFCC99, 0.1em 0.1em 0.2em #FFCC99; top: 250px !important; width: 175px !important; z-index: 20; } .header_al { font-size: 16px; font-weight: bold; } #copyright { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5); Block; border: 2px solid #BDC9E1; color: #000000; float: right; font-family: 'Carrois Gothic SC',sans-serif; padding: 2px; text-align: right !important; width: 246px; z-index: 15; } #copyright a { color: #FFFFFF; } #copyright a:hover { color: #FFFFFF; text-shadow: 0 0 0.2em #FFFFFF; } #copyright:after { content: "List designed by Hahaido."; display: block; } body:before { background: url ("http://i.minus.com/ib0zoIbcBMYY7V.png") repeat scroll center center, -moz-linear-gradient(center bottom , #FDAF85 37%, #FFECB4 70%) repeat scroll 0 0 transparent; content: " "; height: 100%; position: fixed; width: 100%; z-index: -2; } body:after { background: url ("http://dl.dropbox.com/u/78192465/MyAnimeList/Kimi%20ni %20Todoke/Images/extra_friends.png") no-repeat scroll 0 0 transparent; Block; display: block !important; height: 569px; left: 0; pointer-events: none; position: fixed !important; width: 900px; z-index: -1; } #inlineContent { background: url ("http://dl.dropbox.com/u/78192465/MyAnimeList/Kimi%20ni %20Todoke/Images/extra_couple.png") no-repeat scroll 0 0 transparent; Block; border-bottom-right-radius: 50%; box-shadow: 0 0 20px #FFCC99 inset; content: " "; display: block !important;Block; position: fixed !important; right: 0; top: 0; width: 500px; z-index: 10; } #inlineContent:after { background: url ("http://dl.dropbox.com/u/78192465/MyAnimeList/Kimi%20ni %20Todoke/Images/extra_leaves.png") no-repeat scroll 0 0 transparent;Block; height: 600px; pointer-events: none !important; position: fixed !important; right: 0; top: 0; width: 550px; z-index: 10; } it take ages for the wallpaper and other things to appears but if it didn't work then sorry guys , that was the last code I have before I deleted it.. (not like anyone will use it anyway XD) I uh tried using that code and it didn't work.. Like the list doesn't look anything like in the preview, and the wallpaper didn't show up. idk how to explain so have a screenshot (just thought I'd let you know it wasn't working) I know you're probably not going to edit/fix it but if someone wants to.. >.> just thought I'd point this out.  |
 |
Jun 22, 2014 12:03 PM
#111
nBlur said: Hi everyone! I'm new at this css thingy but after reading and watching a lot of tutorials i managed to do this layout for the anime list. I checked it on chrome and firefox and for me and a friend of mine works. I hope you'll like it. Code: https://dl.dropbox.com/s/1hxx8bm248phl2p/Itachi.txt I have to say that i used u531355's covers file. The wallpaper is made by Paulusk. I'm using that layout now, It's awesome~! No way you're new to css ;) |
   |
Jun 23, 2014 3:03 AM
#112
AboveAllSanity said: Lemres said: [size=90]This was my first layout I made so don't Expect something great about it d: , also there was a lot of things here I wanted to change it for a better look but I was too lazy for that so I let it alone forever, haha. Code: @import "http://fonts.googleapis.com/css?family=Nothing +You+Could+Do"; @import "http://fonts.googleapis.com/css?family=Carrois +Gothic+SC"; @import "https://dl-web.dropbox.com/get/Public/2.txt? w=AAC15tgTkrApjl8VNGSa3XDUZeqTJDSnU0K4hTy16Uk-8Q"; @import "http://dl.dropbox.com/u/78192465/MyAnimeList/Kimi%20ni %20Todoke/TopMenu.css"; @import "http://dl.dropbox.com/u/78192465/MyAnimeList/Kimi%20ni %20Todoke/CategoryMenu.css"; @import "https://dl-web.dropbox.com/get/Public/3.txt? w=AABXlm-rBmK9-Zdtqx2zPtTraKnb1Qq_LFb3uU_dTPwquA"; body { color: #000000; cursor: url("Images/cursor.png") 1 2, auto; font-family: Verdana,Arial; font-size: 11px; } a, a:visited { color: #FFCC99; text-decoration: none; } a:hover { color: #FFCC99; cursor: url ("http://dl.dropbox.com/u/157146789/cur451.cur") 1 2, auto; } #list_surround { padding-top: 40px; width: 521px; } .category_totals { padding-bottom: 18px; text-align: right; } #grand_totals { display: none; } .category_totals, #grand_totals { color: #FFFFFF; font-family: 'Carrois Gothic SC',sans-serif; text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000; } .animetitle { display: block; line-height: 24px !important; max-width: 276px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .animetitle + small { background-color: #FFFFFF; border: 1px solid #EFEFEF; border-radius: 120px 0 0 120px / 12px 0 0 0; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset; color: #FFCC99; font-size: 14px !important; line-height: 14px !important; margin-left: 470px; padding: 4px; position: absolute !important; text-align: center; transform: rotate(25deg); visibility: visible !important; white-space: nowrap !important; width: 150px } .animetitle + small:after { background: url ("http://dl.dropbox.com/u/78192465/MyAnimeList/Kimi%20ni %20Todoke/Images/pinn.png") no-repeat scroll 0 0 transparent; height: 40px !important; left: 10px; pointer-events: none; position: absolute !important; top: 10px; width: 34px !important; } .hide { background-size: 200px 0; display: inline-block !important; height: 0 !important; left: 25px; line-height: 24px !important; opacity: 0; pointer-events: none; position: fixed; top: 5px; transform: rotate(-9deg); transition: opacity 1s ease-in-out 0s; visibility: hidden; width: 0 !important; z-index: 20; } :hover + .hide:before { border: 1px solid rgba(137, 130, 48, 0.2); border-radius: 10px 10px 10px 10px; content: " "; font-size: 14px !important; margin-left: 114%; margin-top: 0; padding: 0.2em; pointer-events: none; position: absolute; visibility: hidden; width: 160%; } :hover + .hide:after { background: -moz-linear-gradient(center top , rgba (255, 255, 255, 0) 0%, #FFFFFF 100%) repeat scroll 0 0 transparent; content: " "; height: 50%; left: 0; position: absolute; top: 50%; width: 100%; } .td1, .td2 { background-color: rgba(255, 255, 255, 0.5); border-bottom: 1px solid #297BBA; font-family: 'Nothing You Could Do',cursive; font-size: 18px; transition: all 1s ease-in-out 0s; z-index: 15; } .td1 a, .td2 a { color: #000000; } #list_surround .header_title span, #list_surround .header_title .thickbox { display: none; Block; } .table_header[width="30"] { display: none !important; } .table_header span, .table_headerLink, .table_headerLink:visited { color: #FFFFFF !important; } .table_headerLink:hover { text-shadow: 0 0 0.2em #FFFFFF; } .table_header a { background: none repeat scroll 0 0 #FFCC99; } .table_header a[href$="order=4"] { margin-left: px; margin-top: 12px; position: npne; transform: none; } .table_header a[href$="order=12"] { margin-left: -518px; margin-top: -108px; } .form { border-color: #ABABAB; border-style: solid; border-width: 1px; color: #000000; font-family: Verdana,Arial; font-size: 11px; padding: 2px; } #mal_cs_powered #search #searchBox { background: none repeat scroll 0 0 rgba(255, 255, 255, 0); border: 2px solid #FFCC99; color: #FFFFFF; font-family: 'Carrois Gothic SC',sans-serif; font-size: 16px !important; font-weight: bold; height: 35px !important; overflow: hidden; padding: 5px; right: 50px !important; text-shadow: 0.1em 0.1em 0.2em #FFCC99, 0.1em 0.1em 0.2em #FFCC99; top: 250px !important; width: 175px !important; z-index: 20; } .header_al { font-size: 16px; font-weight: bold; } #copyright { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5); Block; border: 2px solid #BDC9E1; color: #000000; float: right; font-family: 'Carrois Gothic SC',sans-serif; padding: 2px; text-align: right !important; width: 246px; z-index: 15; } #copyright a { color: #FFFFFF; } #copyright a:hover { color: #FFFFFF; text-shadow: 0 0 0.2em #FFFFFF; } #copyright:after { content: "List designed by Hahaido."; display: block; } body:before { background: url ("http://i.minus.com/ib0zoIbcBMYY7V.png") repeat scroll center center, -moz-linear-gradient(center bottom , #FDAF85 37%, #FFECB4 70%) repeat scroll 0 0 transparent; content: " "; height: 100%; position: fixed; width: 100%; z-index: -2; } body:after { background: url ("http://dl.dropbox.com/u/78192465/MyAnimeList/Kimi%20ni %20Todoke/Images/extra_friends.png") no-repeat scroll 0 0 transparent; Block; display: block !important; height: 569px; left: 0; pointer-events: none; position: fixed !important; width: 900px; z-index: -1; } #inlineContent { background: url ("http://dl.dropbox.com/u/78192465/MyAnimeList/Kimi%20ni %20Todoke/Images/extra_couple.png") no-repeat scroll 0 0 transparent; Block; border-bottom-right-radius: 50%; box-shadow: 0 0 20px #FFCC99 inset; content: " "; display: block !important;Block; position: fixed !important; right: 0; top: 0; width: 500px; z-index: 10; } #inlineContent:after { background: url ("http://dl.dropbox.com/u/78192465/MyAnimeList/Kimi%20ni %20Todoke/Images/extra_leaves.png") no-repeat scroll 0 0 transparent;Block; height: 600px; pointer-events: none !important; position: fixed !important; right: 0; top: 0; width: 550px; z-index: 10; } it take ages for the wallpaper and other things to appears but if it didn't work then sorry guys , that was the last code I have before I deleted it.. (not like anyone will use it anyway XD) I uh tried using that code and it didn't work.. Like the list doesn't look anything like in the preview, and the wallpaper didn't show up. idk how to explain so have a screenshot (just thought I'd let you know it wasn't working) I know you're probably not going to edit/fix it but if someone wants to.. >.> just thought I'd point this out. things were missed up a bit so I edit it, thanks for telling me. |
RemuresuJun 23, 2014 3:12 AM
Jun 25, 2014 10:24 AM
#113
Hello guys! So.. I want to share with you the CSS layout I reedited It's a really simple list as shown below but you are free to do or add what you want. ^ ^ Even though it's hard for me to learn manually because i'm an actual learner, i'll try and make/reedit another layout (or more) that I can share with you people. CSS CODE @import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css"; @import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css"; @import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css"; body { background-attachment: fixed; background-image: url("http://i62.tinypic.com/n1f22h.png") !important; background-position: 0 0; background-repeat: no-repeat no-repeat; background-size: cover; color: #FFFFFF; font-family: Century Gothic; font-size: 12px; } #list_surround { left: 10%; margin: auto; position: absolute; width: 550px; } .td1, .td2 { padding: 3px; border-color:#000; } .animetitle + small { color: black!important; } .animetitle + small:before { } null { } td:nth-of-type(2) small { color: black; font-size: 10px; padding-right: 10px; } td:nth-of-type(2) small a { color: #F0304F; } .td1:nth-of-type(1), .td2:nth-of-type(1) { background-color: rgba(0, 0, 0, 0.5); border-left-style: solid !important; border-left-width: 2px !important; } .td1:nth-of-type(5), .td2:nth-of-type(5) { background-color: rgba(0, 0, 0, 0.5); border-right-style: solid; border-right-width: 2px; } .td1:nth-of-type(4), .td2:nth-of-type(4), td.table_header:nth-of-type(4) { background-color: rgba(0, 0, 0, 0.5); } .td1:nth-of-type(3), .td2:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); } .td1:nth-of-type(3), .td2:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); } td.table_header:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); padding-right: 7px; } td.table_header:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); } .td1:nth-of-type(2), .td2:nth-of-type(2) { background-color: rgba(0, 0, 0, 0.5); } a, a:visited { color: #FFFFFF; text-decoration: initial; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color: #A17A59; } .table_header { background-color: rgba(0, 0, 0, 0.5); font-size: 10px; padding: 2px; } td.table_header:nth-of-type(1) { border-bottom-right-radius: 0; border-left: 2px solid black !important; border-top: 2px solid black !important; border-top-left-radius: 10px; border-top-right-radius: 0; } td.table_header:nth-of-type(5) { border-bottom-right-radius: 0; border-right: 2px solid black !important; border-top: 2px solid black !important; border-top-left-radius: 0; border-top-right-radius: 10px; } td.table_header:nth-of-type(2), td.table_header:nth-of-type(3), td.table_header:nth-of-type(4) { border-top: 2px solid black !important; } .category_totals { background-color: rgba(0, 0, 0, 0.5); border-bottom-style: solid; border-bottom-width: 2px; border-left: 2px solid black !important; border-radius: 0 0 10px 10px; border-right: 2px solid black ; font-size: 10px; padding: 2px 2px 2px 40px; border-color:#000; } .borderRBL { border-left-style: solid !important; border-left-width: 2px !important; border-right: 2px solid black !important; color: #2030F0 !important; font-size: 11px; padding-left: 39px; } .borderRBL a, .borderRBL a:visited { color: #F0304F !important; text-decoration: initial; } .borderRBL a:hover { color: #F0304F !important; } #copyright { border-radius: 8px 8px 8px 8px; color: #000000; font-size: 11px; margin-bottom: 70px; padding: 2px; position: relative !important; text-align: center !important; top: 10px; width: 650px; } #copyright:after { border-radius: 8px 8px 8px 8px; color: #000000 !important; content: "List Design By Ushioo, Edited By Adelia23" !important; left: -3px; position: absolute !important; top: 40px !important; width: 650px !important; } #copyright a { color: #000000; } #grand_totals { display: none; } td:nth-of-type(2) small a { display: none; } td:nth-of-type(2) small { color: transparent; } [class^="header_"] * { font-size: 0; height: 10px; line-height: 24px; padding-bottom: 4px; text-align: left; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; color: #000000; display: inline-block; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } .header_cw { background-color: transparent; background-image: url("http://i59.tinypic.com/hrym4i.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_completed { background-color: transparent; background-image: url("http://i58.tinypic.com/xd7alw.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_onhold { background-color: transparent; background-image: url("http://i60.tinypic.com/28he681.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_dropped { background-color: transparent; background-image: url("http://i61.tinypic.com/2j2yykx.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_ptw { background-color: transparent; background-image: url("http://i58.tinypic.com/2qkigs6.jpg"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 45px; margin-bottom: 0; } .header_title { background-color: transparent !important; color: transparent; } #copyright { border-width: 2px; border-color: black ; border-style: solid; width: 542px; padding-bottom: 47px; background-color: rgba(1,1,1,.5); } #copyright, #copyright a, #copyright:after { color: white !important; } border-radius: 25px 25px 25px 25px; border-style: solid !important; border-width: 1px; border-color: black; } |
Jul 4, 2014 4:25 PM
#114
| I bounce around list themes a lot, but here are three of my better ones that I'm not currently using. I also have 2.5 UtaPri themes (one of the themes has two backgrounds) that I can share if people are interested. These themes were made for the exact dimensions of my browser (1366x643). They're kind of simple but the graphics are nice I think. My Little Pony (Fluttershy, but you can switch out the render to another character): Picture  Code /* Got a question or want to learn more? Try this link: http://myanimelist.net/forum/?topicid=419405&show=0#post1 */ /* BACKGROUND IMAGE This is the main background image for the whole page. Change the image link to the background you want! If you're not seeing a background, make sure you are copied the entire CSS code or added any new background image codes correctly. Also your image link may be broken, try uploading a new background then! */ @import "https://dl.dropbox.com/s/4u9v39e5go65aoq/PinkTopBar.css"; @import url(http://fonts.googleapis.com/css?family=Englebert); @import url(http://fonts.googleapis.com/css?family=Architects+Daughter); @import url(http://fonts.googleapis.com/css?family=Ruluko); body { background-image: url(http://i62.tinypic.com/2enno0k.jpg); background-attachment: fixed; } #inlineContent { background: url(http://i61.tinypic.com/9rlqmf.jpg) no-repeat scroll left bottom transparent; background-size: ; display: inline-block !important; height: 100%; left: 20 !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 100%; z-index: -1 !important; } /* Anime List only CURRENTLY WATCHING HEADER This is the header above currently watching/reading. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_cw { background-image:url(http://i60.tinypic.com/2n6zpzn.jpg); height: 150px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* COMPLETED HEADER This is the header above your anime/manga that's completed. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_completed { background-image:url(http://i58.tinypic.com/sq6tjt.jpg); height: 150px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* ON-HOLD HEADER This is the header above your animes/mangas on-hold. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_onhold { background-image:url(http://i58.tinypic.com/25zqkag.jpg); 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 amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_dropped { background-image:url(http://i58.tinypic.com/20629hx.jpg); height: 150px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* PLAN TO WATCH HEADER This is the header above the anime/manga you plan to see or read on your list. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_ptw { background-image:url(http://i57.tinypic.com/2ufpmcg.jpg); height: 150px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* REMOVE HEADER COLOR You need this code to remove the default background colors from the header and override any related codes. You're supposed to use your own images or the default ones for the header, so this color is set to transparent so it won't get in the way. If you want the color back for some reason, remove this section. */ .header_title { background-color: transparent !important; } /* OTHER CODES Stuff I had to add after site changes. You need this otherwise the headers won't be visible. */ tbody {background-color: transparent; background-image: none;} /* REMOVE HEADER TEXT These codes remove the original text like "Completed" and "Currently Watching" from each category on the list. Some people will want the text gone so they can have their own custom logos. But if you want the text back, you have to remove this whole section. It shouldn't affect the images in any way. */ .header_title { color: gray !important; color: transparent !important; font-size: 1px !important; font-size: 0px !important; font-size: 0 !important; font-size: 0pt !important; } Read more at http://myanimelist.net/forum/?topicid=314657#LYP79puQCgA0PpWq.99 /* SUB-HEADERS BACKGROUND COLOR COLOR Below each main header is the sub-header which says Score, Episodes, Tags, etc. */ .table_header { background-color:transparent; } /* 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:#FF69B4; font-family:architects daughter; font-size:20px; } /* 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:#DB7093; font-family:ruluko; } /* LIST WIDTH Use this to increase the width of your list! */ #list_surround { width:725px; } /* REPOSITION MAIN BACKGROUND Change the position your background starts on your screen from with the two properties after "background-position" below. You replace 'center' and '43%' with two other properties, they can be any of the following: left, top, bottom, right, or center. So if you want your background to start from the center of the screen, use "center center" after background-position in the code below, replacing "center 43%". If you want it to start from the top and left, use "top left" If you want it to start from the top and center, use "top center". If you want it to start from the right and top, use "right top" If you want it to start from the right and bottom, use "right bottom" and so forth... Additionally, you can change "left" to a % to determine how far left or right the background starts from. For example "30% top" will start the background from the top but 30% of the pic's width from the left of the layout. You can also change top to a % to change the amount you want to start it from the top or bottom. */ body{ background-position: center 43%;} /*OTHER CODES Important codes for the layout's setup. Don't mess with these unless you know exactly what you're doing. If you want to customize more on the page, use the link at the top of this CSS, or ask in my club! */ body { font-weight: light; background-repeat: repeat; background-color: white; } #list_surround { margin:auto; background-image:url(); } a { text-decoration:none; } a:visited { text-decoration:none; } a:hover, a:visited:hover { color:white; text-decoration:underline; } .category_totals, .td1, .td2, #grand_totals, #copyright { background-image:url(http://img15.imageshack.us/img15/228/frame6518.png); border-width:0; padding:2px; } .category_totals:HOVER, .td1:HOVER, .td2:HOVER, #grand_totals:HOVER, #copyright:HOVER {background-color:black; border-width:0; padding:2px; } #copyright:after { content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs or info."; } .status_selected { background-color:transparent; padding:2px; color:white; text-decoration: blink; } .status_not_selected { background-color:transparent; padding:2px; color:white; } .status_selected a{ color:#C71585; } .status_not_selected a{ color:#DB7093; } .thickbox { color:cyan; font-family:fantasy; font-size:12px; } .header_title { height:52px; padding:2px; } .table_header { border-width:0; font-weight:bold; padding:2px; } .category_totals { height:30px; } #copyright, #grand_totals { text-align: center; margin:0 auto; } body { background-size: cover; } /* LIST BACKGROUND COLOR AND OPACITY Go to this page for instructions on customizing this part, under: Changing the list background color + opacity of the list background http://myanimelist.net/forum/?topicid=440525 */ .category_totals, .td1, .td2, #grand_totals, #copyright { background: rgba(255, 192, 203, 0.5) !important; } .table_header { background-color: rgba(127, 255, 212, 0.5) !important;} /****************************/ /* Highlight on Hover */ /****************************/ tr:hover [class^=td] { background-color: rgba(127, 255, 212, 0.9) !important; -moz-transition: .4s ease; -webkit-transition: .4s ease; -o-transition: .4s ease; } /* COPYRIGHT SECTION If you remove the color it will be the default color set by the layout. You can add a new background image in the parenthesis, or change the color of the copyright section from transparent to something else. You can also change the color of the text which is white by default. You can increase height with padding top and bottom, these are the spaces above and below the copyright text. If you want the copyright section fixed to the bottom, put "fixed" after position: but without quotations. You can increase width too by adding a px amount, for example 600px, after width: */ #copyright, #copyright:hover { background: transparent; padding-top: 2px; padding-bottom: 2px; padding-right: 2px; padding-left: 2px; width: ; color: white; position:; bottom: 0; } /* COPYRIGHT SECTION WHEN CURSOR IS ON IT This is just the background or color you'd see with your cursor on the copyright section. By default, it turns it black to make it readable. Remove it to have no change. */ #copyright:hover { background:; } /* COPYRIGHT STARTING TEXT MSG Whats posted after Content is what it will say before the main copyright info. It can be a huge long message and you can change the color of the text here. You can change it to what you want and it will leave the main copyright text alone. Make sure you leave a space between the quotation mark after Content: and beginning of msg. By default is says This is my list! Increase padding-right number to put some space between your text and the next default text. If you remove the color it will be the default color of the copyright. */ #copyright:before { color:; Content: "Background from ribon.shueisha.co.jp, code frankensteined from shishio's tutorials :)"; text-allign: left; padding-right: 10px; font-family: times new roman; font-size:16px; } /* COPYRIGHT AFTER TEXT MSG Whats posted after Content is what it will say after the main copyright info. You can change it to what you want and it will leave the main copyright text alone. It can be a huge long message and you can change the color of the text here. Make sure you leave a space between the quotation mark after Content: and beginning of msg. Please have the courtesy to leave a link to my group somehow (as in by default). If you remove the color it will be the default color of the copyright. Increase padding-left number to put some space between your text and the previous default text. */ #copyright:after { color:; Content: " Google 'Shishio's Custom Lists' for more designs or info."; text-allign: left; padding-left: 20px; } /* COPYRIGHT LINKS Change the color of the links in your text here. To have it the same as the copyright default text, remove 'blue'. */ #copyright a{ background:; color:; } /* LIST BACKGROUND COLOR AND OPACITY Go to this page for instructions on customizing this part, under: Changing the list background color + opacity of the list background http://myanimelist.net/forum/?topicid=440525 The codes control the list in this order: odd numbered rows, even numbered rows, category totals, grand totals, copyright. */ .td1 { background: none repeat scroll 0 0 rgba(255, 250, 205, 0.5) !important; } .td2 { background: none repeat scroll 0 0 rgba(255, 192, 203, 0.5) !important; } .category_totals { background: none repeat scroll 0 0 rgba(127, 255, 212, 0.5) !important; } #grand_totals { background: none repeat scroll 0 0 rgba(127, 255, 212, 0.5) !important; } #copyright { background: none repeat scroll 0 0 rgba(127, 255, 212, 0.5) !important; } #list_surround { position: absolute !important; right: 20px !important;} Rurouni Kenshin (super basic but it looks really good...I didn't make the background though. It looks official but I don't know it's provenance) Picture  Code /* Got a question or want to learn more? Try this link: http://myanimelist.net/forum/?topicid=419405&show=0#post1 */ /* BACKGROUND IMAGE This is the main background image for the whole page. Change the image link to the background you want! If you're not seeing a background, make sure you are copied the entire CSS code or added any new background image codes correctly. Also your image link may be broken, try uploading a new background then! */ @import url(http://fonts.googleapis.com/css?family=Jacques+Francois); @import url(http://fonts.googleapis.com/css?family=Bilbo); body { background-image: url(http://i1076.photobucket.com/albums/w452/ArtistJenny/Japanese-movie-Rurouni-Kenshin-stills-wallpapers-1366x768-02.jpg); background-attachment: fixed; } /* HEADER COLOR AND FONT These codes control the main headers' fonts and colors. Every header is above each part of your list (they say things like Currently Watching, Completed, Dropped, etc). if you don't want a solid color there, go to the line that starts with background-color and replace it the color type (blue for example) with the word "transparent" (no quotations). */ .header_title { background-color: rgba(105, 105, 105, 0.5); color:red; font-family:jacques francois; font-size:44px; border-radius: 25px 25px 0px 0px; } /* SUB-HEADERS BACKGROUND COLOR COLOR Below each main header is the sub-header which says Score, Episodes, Tags, etc. */ .table_header { background-color: rgba(105, 105, 105, 0.5); } /* 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:bilbo; font-size:22px; } /* 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:century gothic; } /* LIST WIDTH Use this to increase the width of your list! */ #list_surround { width:800px; } /* REPOSITION MAIN BACKGROUND Change the position your background starts on your screen from with the two properties after "background-position" below. You replace 'center' and '43%' with two other properties, they can be any of the following: left, top, bottom, right, or center. So if you want your background to start from the center of the screen, use "center center" after background-position in the code below, replacing "center 43%". If you want it to start from the top and left, use "top left" If you want it to start from the top and center, use "top center". If you want it to start from the right and top, use "right top" If you want it to start from the right and bottom, use "right bottom" and so forth... Additionally, you can change "left" to a % to determine how far left or right the background starts from. For example "30% top" will start the background from the top but 30% of the pic's width from the left of the layout. You can also change top to a % to change the amount you want to start it from the top or bottom. */ body{ background-position: center 43%;} /*OTHER CODES Important codes for the layout's setup. Don't mess with these unless you know exactly what you're doing. If you want to customize more on the page, use the link at the top of this CSS, or ask in my club! */ body { font-weight: light; background-repeat: repeat; background-color: white; } #list_surround { margin:auto; background-image:url(); } a { text-decoration:none; } a:visited { text-decoration:none; } a:hover, a:visited:hover { color:red; text-decoration:underline; } .category_totals, .td1, .td2, #grand_totals, #copyright { background-image:url(http://img15.imageshack.us/img15/228/frame6518.png); border-width:0; padding:2px; } .category_totals:HOVER, .td1:HOVER, .td2:HOVER, #grand_totals:HOVER, #copyright:HOVER {background-color:black; border-width:0; padding:2px; } #copyright:after { content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs or info."; } .status_selected { background-color:transparent; padding:2px; color:red; text-decoration: blink; } .status_not_selected { background-color:transparent; padding:2px; color:#696969; } .status_selected a{ color:red; } .status_not_selected a{ color:#696969; } .thickbox { color:cyan; font-family:fantasy; font-size:12px; } .header_title { height:52px; padding:2px; } .table_header { border-width:0; font-weight:bold; padding:2px; } .category_totals { height:30px; } #copyright, #grand_totals { text-align: center; margin:0 auto; } body { background-size: cover; } /* LIST BACKGROUND COLOR AND OPACITY Go to this page for instructions on customizing this part, under: Changing the list background color + opacity of the list background http://myanimelist.net/forum/?topicid=440525 */ .category_totals, .td1, .td2, #grand_totals, #copyright { background: rgba(105, 105, 105, 0.5) !important; } .table_header { background-color: rgba(105, 105, 105, 0.5) !important;} #list_surround { position: absolute !important; left: 25px !important;} /****************************/ /* Aqua Highlight on Hover */ /****************************/ tr:hover [class^=td] { background-color: rgba(105, 105, 105, 0.9) !important; -moz-transition: .4s ease; -webkit-transition: .4s ease; -o-transition: .4s ease; } 'Procrastination' (I think I was actually procrastinating something when I made it, too) Picture  Code /* Got a question or want to learn more? Try this link: http://myanimelist.net/forum/?topicid=419405&show=0#post1 */ /* BACKGROUND IMAGE This is the main background image for the whole page. Change the image link to the background you want! If you're not seeing a background, make sure you are copied the entire CSS code or added any new background image codes correctly. Also your image link may be broken, try uploading a new background then! */ @import url(http://fonts.googleapis.com/css?family=Pacifico); @import url(http://fonts.googleapis.com/css?family=Just+Me+Again+Down+Here); @import url(http://fonts.googleapis.com/css?family=Ruluko); body { background-image: url(http://i57.tinypic.com/24d0aj8.jpg); background-attachment: fixed; } /* HEADER COLOR AND FONT These codes control the main headers' fonts and colors. Every header is above each part of your list (they say things like Currently Watching, Completed, Dropped, etc). if you don't want a solid color there, go to the line that starts with background-color and replace it the color type (blue for example) with the word "transparent" (no quotations). */ .header_title { background-color: rgba(135, 206, 235, 0.5); color:#FF1493; font-family:pacifico; font-size:45px; border-radius: 25px 25px 0px 0px; } /* SUB-HEADERS BACKGROUND COLOR COLOR Below each main header is the sub-header which says Score, Episodes, Tags, etc. */ .table_header { background-color:transparent; } /* 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:#C71585; font-family:just me again down here; font-size:20px; } /* 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:#FF1493; font-family:ruluko; } /* LIST WIDTH Use this to increase the width of your list! */ #list_surround { width:600px; } /* REPOSITION MAIN BACKGROUND Change the position your background starts on your screen from with the two properties after "background-position" below. You replace 'center' and '43%' with two other properties, they can be any of the following: left, top, bottom, right, or center. So if you want your background to start from the center of the screen, use "center center" after background-position in the code below, replacing "center 43%". If you want it to start from the top and left, use "top left" If you want it to start from the top and center, use "top center". If you want it to start from the right and top, use "right top" If you want it to start from the right and bottom, use "right bottom" and so forth... Additionally, you can change "left" to a % to determine how far left or right the background starts from. For example "30% top" will start the background from the top but 30% of the pic's width from the left of the layout. You can also change top to a % to change the amount you want to start it from the top or bottom. */ body{ background-position: center 43%;} /*OTHER CODES Important codes for the layout's setup. Don't mess with these unless you know exactly what you're doing. If you want to customize more on the page, use the link at the top of this CSS, or ask in my club! */ body { font-weight: light; background-repeat: repeat; background-color: white; } #list_surround { margin:auto; background-image:url(); } a { text-decoration:none; } a:visited { text-decoration:none; } a:hover, a:visited:hover { color:white; text-decoration:underline; } .category_totals, .td1, .td2, #grand_totals, #copyright { background-image:url(http://img15.imageshack.us/img15/228/frame6518.png); border-width:0; padding:2px; } .category_totals:HOVER, .td1:HOVER, .td2:HOVER, #grand_totals:HOVER, #copyright:HOVER {background-color:black; border-width:0; padding:2px; } #copyright:after { content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs or info."; } .status_selected { background-color:transparent; padding:2px; color:white; text-decoration: blink; } .status_not_selected { background-color:transparent; padding:2px; color:white; } .status_selected a{ color:#FF1493; } .status_not_selected a{ color:#FF1493; } .thickbox { color:cyan; font-family:fantasy; font-size:12px; } .header_title { height:52px; padding:2px; } .table_header { border-width:0; font-weight:bold; padding:2px; } .category_totals { height:30px; } #copyright, #grand_totals { text-align: center; margin:0 auto; } body { background-size: cover; } /* LIST BACKGROUND COLOR AND OPACITY Go to this page for instructions on customizing this part, under: Changing the list background color + opacity of the list background http://myanimelist.net/forum/?topicid=440525 */ .category_totals, .td1, .td2, #grand_totals, #copyright { background: rgba(135, 206, 235, 0.5) !important; } .table_header { background-color: rgba(135, 206, 235, 0.5) !important;} #list_surround { position: absolute !important; right: 20px !important;} /****************************/ /* Highlight on Hover */ /****************************/ tr:hover [class^=td] { background-color: rgba(135, 206, 235, 0.9) !important; -moz-transition: .4s ease; -webkit-transition: .4s ease; -o-transition: .4s ease; } |
Jul 6, 2014 10:48 PM
#115
| My first Nisekoi list: Picture:  Code: @import url(http://dl.dropboxusercontent.com/u/188037746/topbars/light-brown-topbar.css); @import url(http://fonts.googleapis.com/css?family=Lily++One); @import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/covers_more.css); body { background-image: url(http://i.imgur.com/SBf4GGo.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: top left; background-size: cover; color: #ffffff; font-size: 12px; font-family: Verdana; } #list_surround br { display: none; } #list_surround { width: 650px; position: absolute !important; margin: auto !important; right: 0px !important; left: 0px !important; margin-top: 10% !important; } .header_title { padding-top: 0px; font-family: Lily One; text-align: center; font-size: 30px; text-shadow: 5px 0px 7px rgba(46, 21, 113, 1); } .td1, .td2, .table_header, .category_totals { background-color: rgba(0, 0, 0, 0.5); height: 20px; } a, a:visited, a:hover { color: #ffffff; text-decoration: none; } .animetitle { color: #fae8ff; text-transform: uppercase; font-size: 9px; font-weight: bold; } tr:hover [class^=td] { color: #000000; background-color: rgba(255, 255, 255, 0.5) !important; transition: all 0.3s ease-in-out; } tr:hover [class^=td] a { color: #2e1571; } tr:hover [class^=td] .animetitle { font-weight: bold; text-transform: uppercase; font-size: 9px; } .table_header:first-child { border-top-left-radius: 10px 10px; } .table_header:last-child { border-top-right-radius: 10px 10px; } .category_totals { text-align: center; border-bottom-left-radius: 10px 10px; border-bottom-right-radius: 10px 10px; text-transform: uppercase; font-size: 10px; } .status_selected a, .status_not_selected a {color:transparent; display:block; font-size:0; height: 74px; width: 250px; } .status_selected a, .status_not_selected a { top: 50%; } .status_selected, .status_not_selected { display: block !important; position: fixed; left: 20px; height: 74px; width: 250px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .status_selected:first-of-type, .status_not_selected:first-of-type { background-image: url(http://i.imgur.com/dp2kzM4.png); top: 20px; border-radius: 10px; } .status_selected:first-of-type:hover, .status_not_selected:first-of-type:hover { background-image: url(http://i.imgur.com/8wBJjRX.png); } .status_selected:nth-of-type(2), .status_not_selected:nth-of-type(2) { top: 95px; border-radius: 10px; background-image: url(http://i.imgur.com/mgOSKnj.png); } .status_selected:nth-of-type(2):hover, .status_not_selected:nth-of-type(2):hover { background-image: url(http://i.imgur.com/OmiWgsz.png); } .status_selected:nth-of-type(3), .status_not_selected:nth-of-type(3) { top: 170px; border-radius: 10px; background-image: url(http://i.imgur.com/ijunomO.png); } .status_selected:nth-of-type(3):hover, .status_not_selected:nth-of-type(3):hover { background-image: url(http://i.imgur.com/gVQ6N9X.png); } .status_selected:nth-of-type(4), .status_not_selected:nth-of-type(4) { top:245px; border-radius: 10px; background-image: url(http://i.imgur.com/UpjkgyE.png); } .status_selected:nth-of-type(4):hover, .status_not_selected:nth-of-type(4):hover { background-image: url(http://i.imgur.com/XHmVXwX.png); } .status_selected:nth-of-type(5), .status_not_selected:nth-of-type(5) { top: 320px; border-radius: 10px; background-image: url(http://i.imgur.com/aRzkaMS.png); } .status_selected:nth-of-type(5):hover, .status_not_selected:nth-of-type(5):hover { background-image: url(http://i.imgur.com/f2jUnjO.png); } .status_selected:nth-of-type(6), .status_not_selected:nth-of-type(6) { top: 395px; border-radius: 10px; background-image: url(http://i.imgur.com/aVNi93B.png); } .status_selected:nth-of-type(6):hover, .status_not_selected:nth-of-type(6):hover { background-image: url(http://i.imgur.com/9WHTaCD.png); } #grand_totals, #copyright { display: block; height: 20px; line-height: 20px; border-radius: 10px; background-color: rgba(0, 0, 0, 0.5); margin-top: 20px; text-align: center; text-transform: uppercase; font-size: 8px; font-weight: bold; } :hover + .hide { background-size: 200px 300px; right: 150px; bottom: 150px; width: 200px; height: 300px; padding-bottom: 0px; background-position: center 50% !important; background-repeat: no-repeat !important; display: block !important; position: fixed; background-color: rgba(0, 0, 0, 0.5); border-radius: 10px; } |
DivachiApr 27, 2015 11:19 AM
Jul 10, 2014 1:16 AM
#116
Narushisto20 said: I donate my Hunter x Hunter layout, maybe someone would like to use it. previews:  Full preview The code (For anime lists only) First of all I wanna say thank you! <3 2nd, I have an issue with the "mal_control_strip" being located across the upper-middle portion of my list-site, I hope there's a way to fix that. Seriously though, it's an awesome list! :D much appreciated |
Jul 14, 2014 6:36 PM
#117
| Hello! The long awaited code (really?) is finally here! Here's the coding for my anime list! If you request the code for my manga list as well, I'll put it up for sharing also! [spoiler]   *PTW = Plan to WreckCode : [spoiler] [quote]/* ************ **** ANIME LIST ***** ************* */ /* Importation of anime covers - replace TYPE by anime or manga and NAME by your username! */ @import url("http://mal-fellow-writer.appspot.com/TYPE/NAME/?covers=http://dl.dropbox.com/u/49469857/MAL/premade/formats/covers/more"); /* Importation of font for the header title */ @import url("http://fonts.googleapis.com/css?family=Give+You+Glory"); /* Hiding the More button - became useless because of the cover hovering option */ @import url("http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css"); /* Coding */ @import url("https://dl.dropboxusercontent.com/s/xisy431nge87d50/blob_anime_list_body_coding.css"); /* *NOTE* Removing this upcoming code will turn the list into mine! */ /* Customize your list background image by replacing the link inside the URL! */ body { background-attachment: fixed ! important; background-image: url("http://moodanime.files.wordpress.com/2013/03/ixxxxxxx.jpg") !important; background-size: cover; } /* Customize your list header image by replacing the link inside the URL! */ :nth-child(5) .header_title { background: url("http://media.giphy.com/media/ywkUk5y6kvrNK/giphy.gif") no-repeat scroll center center / 100% 100% rgba(255, 255, 255, 0); } /* Customize the message you want to show up on your main header */ :nth-child(5) .header_title:before { content: "INSERT FUN MESSAGE HERE"; } |
| _____________________________________________________________ Come visit the Rec club! Everyone gets confused as to what they want to watch or read next. :T Here is the Official Rec Club list of Recommendations! |
Jul 18, 2014 11:50 AM
#118
| I donate my very old and first skin, 'Hajime no Ippo'. Screenshot:  Code: @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSS.css"; /* Skin name: 'Hajime no Ippo'. Creator: ShadowRealm. */ body { font-family: tahoma; font-size: 16px; background: url(http://images4.alphacoders.com/180/180934.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; background-attachment: fixed; color: #fafafa; } /* LIST BACKGROUND COLOR AND OPACITY Go to this page for instructions on customizing this part, under: Changing the list background color + opacity of the list background http://myanimelist.net/forum/?topicid=440525 */ .category_totals, .td1, .td2, .table_headerLink, .table_headerLink:Visited, .table_headerLink:Hover { background: rgba(11, 23, 59, 0.2) !important; } /*PADDING The space around the words in your list. */ .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; } /*LIST OPACITY The amount of opacity (between .01 and .99) determines how see-thru it is. .01 is almost completely clear. .99 is almost completely opaque. You can choose any number between .01 and .99 to find your desired settings. */ .status_selected, .header_title, .category_totals, .td1, #grand_totals, #copyright, .status_not_selected, .table_header, .td2 { opacity: 0.85;} /* // Determines the positioning of your list */ #list_surround { margin-top: 350px; margin-right: auto; margin-left: auto; width: 60%; background-repeat: no-repeat; background-attachment:fixed; text-shadow: 1px 0 0 #fff; } /* // All links on your list */ a { color: #fafafa; text-decoration: none; text-shadow: 1px 1px #000; } a:visited { color: #fafafa; text-decoration: none; } a:hover { text-shadow: 0 0 10px #fafafa; color:#fafafa; } /* // Alternating row color 1 */ .td1 { background-color: #0B173B; } .td2 { background-color: #0B173B; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ _header { color: #fafafa; margin: left; padding: bottom; background-repeat: no-repeat; background-attachment:fixed; text-shadow: 1px 0 0 #fff; } /* // headerLink represents the color of the links inside the_header */ .table_headerLink { } .table_headerLink:visited { } .table_headerLink:hover { } /* Which 'status' up top is selected? */ .status_selected { color: gray !important; color: transparent !important; font-size: 1px !important; font-size: 0px !important; font-size: 0 !important; font-size: 0pt !important; } .status_not_selected { color: gray !important; color: transparent !important; font-size: 1px !important; font-size: 0px !important; font-size: 0 !important; font-size: 0pt !important; } /* Header classes for Currently Watching, Completed, Dropped, etc... */ .header_cw { margin-right: auto; margin-left: auto; background-image: url(http://images.cooltext.com/3749164.png); height: 100px; width: 400px; background-repeat: no-repeat; } .header_completed { margin-right: auto; margin-left: auto; background-image: url(http://images.cooltext.com/3749165.png); height: 101px; width: 429px; background-repeat: no-repeat; } .header_onhold { margin-right: auto; margin-left: auto; background-image: url(http://images.cooltext.com/3749168.png); height: 82px; width: 324px; background-repeat: no-repeat; } .header_dropped { margin-right: auto; margin-left: auto; background-image: url(http://images.cooltext.com/3749169.png); height: 85px; width: 325px; background-repeat: no-repeat; } .header_ptw { margin-right: auto; margin-left: auto; background-image: url(http://images.cooltext.com/3749170.png); height: 101px; width: 753px; background-repeat: no-repeat; } /* REMOVE HEADER TEXT These codes remove the original text like "Completed" and "Currently Watching" from each category on the list. Some people will want the text gone so they can have their own custom logos. But if you want the text back, you have to remove this whole section. It shouldn't affect the images in any way. */ .header_title { color: gray !important; color: transparent !important; font-size: 1px !important; font-size: 0px !important; font-size: 0 !important; font-size: 0pt !important; } .category_totals { color: #fafafa; text-shadow: 0 0 10px #fafafa; } } #grand_totals { background: rgba(11, 23, 59, 0.5); text-shadow: 1px 0 0 #fff; color: #fafafa; } /* header_al is the surrounding "User's Anime List" at the top */ .header_al { font-weight: bold; font-size: 16px; color: #fafafa; } /* header_al_links is thewith your "Profile" and "MyAnimeList home" links */ .header_al_links { color: #fafafa; } /* controls what styles you can give to all the anime titles in your list */ /* 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: -5px; text-shadow: 1px 1 1 #fff; background: rgba(11, 23, 59, 0.5) !important; } #copyright:before { content: "List style designed by ShadowRealm."; } .table_header { background-color: rgba(11, 23, 59, 0.4); } |
 |
Jul 23, 2014 6:59 AM
#119
erlbaum said: Another basic one. body { background-attachment: fixed; background-color: Black; background-image: url("http://i39.tinypic.com/19qq0n.jpg"); background-position: right top; background-repeat: no-repeat; } #list_surround .header_title { 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: 50; } .td2 { background-color: Black; color: #000000; padding: 4px; } .td1:hover, .td2:hover { } .header_title { background-color: #282222; color: white; font-family: Tahoma,Arial; font-size: 48px; } .table_header { background-color: #282222; } .animetitle, .animetitle:visited { color: AliceBlue; font-family: Lucida Console,Arial; font-size: 15px; } .td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright { color: aliceBlue; font-family: arial; } #list_surround { width: 895px; } #list_surround { left: 20px !important; position: absolute !important; } a:hover, a:visited:hover { color: coral; text-decoration: underline; } .category_totals, .td1, .td2, #grand_totals, #copyright { background-image: url(""); border-width: 0; padding: 0; } .status_selected { background-color: windowframe; color: white; padding: 8px; text-decoration: blink; } .status_not_selected { background-color: #282222; color: white; padding: 6px; } .status_selected a { color: white; } .status_not_selected a { color: white; } .thickbox { color: cyan; font-family: fantasy; font-size: 12px; } .header_title { height: 55px; padding: 4px; } .table_header { border-width: 0; font-weight: bold; padding: 0; } .category_totals { height: 30px; } #copyright, #grand_totals { margin: 0 auto; text-align: center; } .td1:hover, .td2:hover { background: url("http://i42.tinypic.com/snktjs.png") repeat scroll 0 0 transparent; } hope you don't mind me using this layout, although i changed it around a bit. if you want me to take it off, just let me know |
 |
Jul 23, 2014 4:32 PM
#120
DaxHim said: Hey, I've already made a yt video where I share my Animotion theme, so i share it here as well. Preview: https://dl.dropboxusercontent.com/u/47426858/Animotion%20Preview.png The code: http://pastebin.com/xVxnUGSS That looks really awesome, good job. |
Aug 6, 2014 9:49 AM
#121
nBlur said: I edited a bit u531355's Square layout.. I like it, I was actually thinking about re-making Square Layout with the same kind of design as you got going on. Perhaps I will just build on top of what you have already done, if you don't mind. I also noticed 2 issues when viewing your list as a visitor:   Good job nonetheless. |
Aug 7, 2014 8:18 AM
#122
nBlur said: Thanks for noticing me about those issues! I fixed the first one but the second one doesn't show up for me and i can't find the problem within the code either. Maybe it didnt load completely ( i hope so ). As for building on this code, I have no problem but I wish you good luck on that because it's a total mess. I checked again and it appears to have been a loading issue last night. The button is no longer misplaced. It looks like this now:  I'll play around with your style next time I have some free time. Thanks. |
Aug 11, 2014 5:04 AM
#123
MagnaAnima said: Thanks! Fixed the issue on the same day you posted ^^;First of all I wanna say thank you! <3 2nd, I have an issue with the "mal_control_strip" being located across the upper-middle portion of my list-site, I hope there's a way to fix that. Seriously though, it's an awesome list! :D much appreciated Donating a Kara no Kyoukai Layout. (that was originally the ef layout, buttons changing on hover code part taken from Date a Live layout) Preview:   The code: For anime lists, For manga lists EDIT: Also donating a similar style Detective Conan layout. Preview: The code: For anime lists, For manga lists EDIT: Changed all links from dropbox to imgur ones |
NarushistoMay 31, 2015 4:47 AM
|
Sep 5, 2014 1:02 AM
#124
| Donating my first layout. Black Butler Preview:  Code: @import "https://dl.dropboxusercontent.com/u/78340470/anime.css"; @import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css"; @import "http://dl.dropbox.com/u/78340470/Past%20Stuff/bottommenuimport.css"; /*thin top bar*/ @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; /*Fonts*/ @import url("http://fonts.googleapis.com/css?family=Tangerine"); @import url("http://fonts.googleapis.com/css?family=Lemon"); @import url("http://fonts.googleapis.com/css?family=Nova+Slim"); @import url(http://fonts.googleapis.com/css?family=Handlee); @import url(http://fonts.googleapis.com/css?family=Petit+Formal+); /* Got a question or want to learn more? Try this link: http://myanimelist.net/forum/?topicid=419405&show=0#post1 */ /* */ /* BACKGROUND IMAGE This is the main background image for the whole page. Change the image link to the background you want! If you're not seeing a background, make sure you are copied the entire CSS code or added any new background image codes correctly. Also your image link may be broken, try uploading a new background then! */ body { background-image: url(http://i1370.photobucket.com/albums/ag264/TheLegendOfJose/MAL/sebastian-and-ciel-black-butler-anime-hd-wallpaper-1920x1080-9715_zpseec63f1c.jpg); background-attachment: fixed; background-size: cover; } /* HEADER COLOR AND FONT These codes control the main headers' fonts and colors. Every header is above each part of your list (they say things like Currently Watching, Completed, Dropped, etc). */ .header_title { background-color: rgba(25, 56, 76, 0.440); color: #FFFFFF; font-family: 'Handlee', cursive; font-size:20px; border-radius: 20px 20px 0px 0px; font-weight: 700; text-align: center; text-shadow: 3px -1px 5px #0C0C0C; } /* SUB-HEADERS BACKGROUND COLOR COLOR Below each main header is the sub-header which says Score, Episodes, Tags, etc. */ .table_header { background-color: rgba(25, 56, 76, 0.450); } /* ANIME/MANGA TITLE FONTS This is the type and color of the anime/manga titles on your list, like Bleach, Vampire Knight, etc. */ .animetitle, .animetitle:visited { color:white; font-family: 'Petit Formal ', cursive; font-size:14px; text-shadow: 2px 1px 2px #000000; } .animetitle + small { color:#B5D3D3; font-family: "Nova Slim"; font-size:12px; } /* LIST FONTS This is the type and color for more of the numbers, links, and words on the list itself! */ .td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright { color:white; font-size:13px; font-family: 'Petit Formal ', cursive; text-shadow: 2px 1px 2px #000000; } /* LIST WIDTH Use this to increase the width of your list! */ #list_surround { margin: -25px auto 0; width:950px; } /* LIST POSITION Change "left" to "right" to switch the list side, or vice versa. */ #list_surround { position: relative; } /*OTHER CODES Important codes for the layout's setup. Please don't mess with these unless you know what you're doing. If you want to customize more on the page, use the link at the top of this CSS or ask in my club! */ body { font-weight: light; background-repeat: no-repeat; background-color: #FFFFFF; } a { text-decoration:none; } a:visited { text-decoration:none; } a:hover, a:visited:hover { color:#98C1C1; text-decoration:none; } .category_totals, .td1, .td2, #grand_totals, #copyright { background-color: rgba(25, 56, 76, 0.450); border-width:0; transition: all .8s ease 0s;/* CSS3 reference */ -o-transition: all .8s ease 0s; /* for Opera compatibility */ -ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */ -moz-transition: all .8s ease 0s; /* for Firefox compatibility */ -webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */ } .category_totals a, .td1 a, .td2 a, #grand_totals a, #copyright a { transition: all .8s ease 0s;/* CSS3 reference */ -o-transition: all .8s ease 0s; /* for Opera compatibility */ -ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */ -moz-transition: all .8s ease 0s; /* for Firefox compatibility */ -webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */ } .category_totals:HOVER, .td1:HOVER, .td2:HOVER, #grand_totals:HOVER, #copyright:HOVER {background-color:rgba(25, 56, 76, 0.600); border-width:0; } #copyright:after { content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info. Theme by TheLegendOfJose."; } #copyright { margin-bottom: 30px !important; border-radius: 20px; padding: 10px; } .status_selected { background-color:black; padding:2px; color:white; visibility: hidden; text-decoration: blink; } .status_not_selected { background-color:black; padding:2px; visibility: hidden; color:white; } .status_selected a{ visibility: hidden; color:blue; } .status_not_selected a{ visibility: hidden; color:white; } .thickbox { color:cyan; font-family:fantasy; font-size:12px; } .header_title { padding:2px; } .table_header { border-width:0; font-weight:bold; padding:2px; } .category_totals { border-radius: 0px 0px 20px 20px; height: 40px; text-align: center; } #grand_totals { text-align: center; margin:0 auto; border-radius: 20px; padding: 10px 20px; width: 600px; } /* THUMBNAIL SETTINGS Settings for the thumbnails of covers seen on your list. Height and width control the size, while margin-left and top can be added or taken away to change the position. Change the border size, type, or color, with the first border code.*/ .hide { height:55px; width:35px; margin-left:33px; margin-top:-65px; border:1px solid #FFFFFF; background-color:rgba(248, 162, 200, 0.7); background-position:50% 50%; background-repeat:no-repeat no-repeat; background-size:cover; border-bottom-left-radius:7px; border-bottom-right-radius:7px; border-top-left-radius:7px; border-top-right-radius:0; display:inline-block !important; position: absolute; } /*THUMBNAIL HOVER SETTING This is the setting for the cover when you point to a thumbnail. Move the cover's position with the margin codes. Change its size with the padding codes. */ .hide:hover { margin-left:-140px; padding-right:150px; padding-top:220px !important; background-color:transparent; background-repeat:no-repeat no-repeat; background-size:cover; border-bottom-left-radius:20px; border-bottom-right-radius:20px; border-top-left-radius:20px; border-top-right-radius:20px; box-shadow:rgba(63, 52, 60, 0.55) 0 0 8px 8px; position:absolute; z-index:1; } /*THUMBNAIL HOVER FLICKER FIX If you reposition your covers, and notice flickering, color this red, then reload your layout. Notice where the red bar appears when you point to your covers. Move that box with this code, over the parts where you point and see flickering. Then change it back to transparent! */ .hide:hover:after { background: transparent; content: " "; height: 75px; left: 0; position: absolute; top: 0; width: 210px; z-index: 20; } /*ANIMATION FOR ZOOM Change the timing of how long it takes for it zoom out here! Its set to .25 seconds by default. */ * { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; } /*ROW WIDTH AND SPACING This will increase the height of your rows and move the anime title to the left. It might look funny on some layouts so you'll have to adjust it or ask for help! Height is the height, padding left is the space the anime title moves from the left. */ .td1:nth-of-type(2), .td2:nth-of-type(2) { height: 62px; padding-left: 42px; } /* Anime List only CURRENTLY WATCHING HEADER This is the header above currently watching/reading. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_cw { background-image:url(http://i1370.photobucket.com/albums/ag264/TheLegendOfJose/MAL/0a85668ce0b3d6e60a018946bd0ca790_zpsdf1f187c.png); height: 290px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* COMPLETED HEADER This is the header above your anime/manga that's completed. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_completed { background-image:url(http://i1370.photobucket.com/albums/ag264/TheLegendOfJose/MAL/COMP_zpse1d0795d.png); height: 290px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* ON-HOLD HEADER This is the header above your animes/mangas on-hold. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_onhold { background-image:url(http://i1370.photobucket.com/albums/ag264/TheLegendOfJose/MAL/OnHoldGrell_zps6c1ab3b2.png); height: 290px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* DROPPED HEADER This is the header above your dropped animes/mangas. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_dropped { background-image:url(http://i1370.photobucket.com/albums/ag264/TheLegendOfJose/MAL/BlondieDropped_zpsd0cac1a7.png); height: 290px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* PLAN TO WATCH HEADER This is the header above the anime/manga you plan to see or read on your list. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_ptw { background-image:url(http://i1370.photobucket.com/albums/ag264/TheLegendOfJose/MAL/PTW_zpsb9e41a78.png); height: 290px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* REMOVE HEADER COLOR You need this code to remove the default background colors from the header and override any related codes. You're supposed to use your own images or the default ones for the header, so this color is set to transparent so it won't get in the way. If you want the color back for some reason, remove this section. */ .header_title { background-color: transparent !important; } /* OTHER CODES Stuff I had to add after site changes. You need this otherwise the headers won't be visible. */ tbody {background-color: transparent; background-image: none;} /* REMOVE HEADER TEXT These codes remove the original text like "Completed" and "Currently Watching" from each category on the list. Some people will want the text gone so they can have their own custom logos. But if you want the text back, you have to remove this whole section. It shouldn't affect the images in any way. */ .header_title { color: gray !important; color: transparent !important; font-size: 1px !important; font-size: 0px !important; font-size: 0 !important; font-size: 0pt !important; } Read more at http://myanimelist.net/forum/?topicid=314657#VChg3gWrKPZoI71g.99 |
 |
Sep 30, 2014 1:18 PM
#125
| Donating an alternative version of Square Layout with Hahaido's menu. Optimized for 1920x1080 screen resolution. Based on Vocaloid (Hatsune Miku & Megurine Luka) Preview:  Code: /* Square Layout u531355 - 2012 Alternative version by -Mio- */ /* 1) Generated covers */ @\import "https://malscraper.azurewebsites.net/covers/auto/presets/more"; /* 2) Base layout */ @\import "https://dl.dropbox.com/s/9mv32q7c2tm3m9u/current.css"; /* 3) Top-bar icons */ @\import "https://dl.dropbox.com/s/vev0ahto1f2hsl4/TopMenu.css"; /* 5) Addons - Add as many as you want */ @\import "http://dl.dropbox.com/u/49469857/MAL/premade/square/addons/longcovers/addon.css"; /* 6) Options */ /* Determines the number of covers on each row, it should be a multiple of 242px */ body {max-width: 1210px;} /* Header picture NO NEED TO EDIT*/ #inlineContent {background-image: url();} /* Background Image */ body {background-image:url(https://dl.dropbox.com/s/6eki4mqo2xul02u/bg3.png);} /* Default picture when no cover is found */ .hide {background-image: url();} /* Links color */ a {color: #8ce5ff !important;} /* Left and right pictures */ #list_surround >:nth-of-type(n+4):not(.header_cw):not(.header_completed):not(.header_onhold):not(.header_dropped):not(.header_ptw):hover { z-index: 4; } #list_surround >:hover + .hide { z-index: 3; } body:before { pointer-events: none; position: fixed; bottom: -10px; margin-left: -350px; content: url(https://dl.dropbox.com/s/jc5su7ek3eeump4/left.png); z-index: 2; } body:after { pointer-events: none; position: fixed; bottom: -80px; width: inherit; min-width: inherit; max-width: inherit; margin-left: 370px; content: url(https://dl.dropbox.com/s/gmxch8azxa92fh6/right.png); text-align: right; z-index: 1; } /* More infos on http://myanimelist.net/forum/?topicid=459189 */ |
-Mio-Jan 7, 2021 2:19 AM
 |
Sep 30, 2014 4:48 PM
#126
| heyy, i was just looking through the pre made anime lists and quite liked the magica one (clean version) by TheHolyPotato but i would like it if the images were of kuroko no basket. can somebody please help? |
Sep 30, 2014 4:59 PM
#127
-Mio- said: Donating an alternative version of Square Layout with Hahaido's menu. Optimized for 1920x1080 screen resolution. Based on Vocaloid (Hatsune Miku & Megurine Luka) Preview: Code: /* Square Layout u531355 - 2012 Alternative version by -Mio- */ /* 1) Generated covers */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/anime.css); @import url(http://dl.dropbox.com/s/u7q303kv0wwjn9f/mycovers.css); /* 2) Base layout */ @import url('https://dl.dropbox.com/s/9mv32q7c2tm3m9u/current.css'); /* 3) Top-bar icons */ @import url(https://dl.dropbox.com/s/vev0ahto1f2hsl4/TopMenu.css); /* 5) Addons - Add as many as you want */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/addons/longcovers/addon.css); /* 6) Options */ /* Determines the number of covers on each row, it should be a multiple of 242px */ body {max-width: 1210px;} /* Header picture NO NEED TO EDIT*/ #inlineContent {background-image: url();} /* Background Image */ body {background-image:url(https://dl.dropbox.com/s/6eki4mqo2xul02u/bg3.png?dl=0);} /* Default picture when no cover is found */ .hide {background-image: url();} /* Links color */ a {color: #8ce5ff !important;} /* Mettre 2 images a gauche et a droite */ #list_surround >:nth-of-type(n+4):not(.header_cw):not(.header_completed):not(.header_onhold):not(.header_dropped):not(.header_ptw):hover { z-index: 4; } #list_surround >:hover + .hide { z-index: 3; } body:before { pointer-events: none; position: fixed; bottom: -10px; margin-left: -350px; content: url(https://dl.dropbox.com/s/jc5su7ek3eeump4/left.png); z-index: 2; } body:after { pointer-events: none; position: fixed; bottom: -80px; width: inherit; min-width: inherit; max-width: inherit; margin-left: 370px; content: url(https://dl.dropbox.com/s/gmxch8azxa92fh6/right.png); text-align: right; z-index: 1; } /* More infos on http://myanimelist.net/forum/?topicid=459189 */ oh holy shit awesome wallpaper/background the layout is also nicely done. (y) thecookiemonster said: heyy, i was just looking through the pre made anime lists and quite liked the magica one (clean version) by TheHolyPotato but i would like it if the images were of kuroko no basket. can somebody please help? It's possible but wrong topic to ask this, suggest it here http://myanimelist.net/forum/?topicid=1099375 |
Oct 10, 2014 1:47 PM
#128
Preview: Code: /* @import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/CSS/TopMenu/TopMenu.css); @import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/CSS/TopMenu/Colors/Scheme.css); @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; body { background-attachment:fixed !important; background-image:url(http://imageshack.us/a/img853/802/a86q.jpg); background-position:100px 0; background-size:cover; } #list_surround { left:10px !important; position:absolute !important; } #inlineContent { display:inline-block !important; height:1200px !important; left:0 !important; margin:auto !important; position:fixed !important; right:0 !important; top:0 !important; width:500px !important; z-index:-1 !important; } #list_surround { background-attachment:scroll; background-color:transparent; background-position:50% 1px; background-repeat:no-repeat no-repeat; font-size:12px; line-height:1; margin:0 auto; padding-bottom:10px; padding-top:40px; width:59%; } body { color:#FFFFFF; font-family:'Comic Sans MS'; } a { -webkit-transition:all 0.25s ease-in-out 0s; color:#FFFFFF; text-decoration:initial; text-shadow:none; } a:hover { color:#8000FF; } .status_not_selected, .status_selected { border:0 none !important; height:auto !important; padding:0 8px; text-align:center !important; width:10.667% !important; } .status_not_selected a, .status_selected a { background-color:rgba(100, 0, 70, 0.8); border-bottom-left-radius:15px; border-bottom-right-radius:15px; border-top-left-radius:15px; border-top-right-radius:15px; color:#FFFFFF; display:block !important; font-weight:bold; padding:8px; text-shadow:rgba(0, 0, 0, 0.0980392) 0 1px; } .status_selected a { background-color:rgba(110, 0, 200, 0.6); } .status_not_selected a:hover { background-color:rgba(150, 0, 130, 0.901961); text-shadow:rgba(0, 0, 0, 0.298039) 0 1px; } .status_selected a:hover { background-color:rgba(150, 0, 255, 0.901961); text-shadow:rgba(0, 0, 0, 0.298039) 0 1px; } .table_header { background-color:rgba(100, 0, 70, 0.298039); height:20px; } .table_header:first-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:20px; border-top-right-radius:0; } .table_header:nth-of-type(2) { text-align:left; } .table_header:last-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:0; border-top-right-radius:20px; } .td1 { -webkit-transition:all 0.25s ease-in-out 0s; background-color:rgba(51, 0, 26, 0.298039); height:30px; } .td2 { -webkit-transition:all 0.25s ease-in-out 0s; background-color:rgba(61, 0, 30, 0.298039); height:30px; } tr:hover [class^="td"] { background-color:rgba(150, 0, 110, 0.4); } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align:left; } .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border:0; padding:4px; text-align:center; vertical-align:middle; } .table_header, .td1, .td2, .category_totals { line-height:20px; } .borderRBL { line-height:normal !important; } [cellspacing="0"] { line-height:20px; } .category_totals { background-color:rgba(100, 0, 70, 0.298039); border-bottom-left-radius:20px; border-bottom-right-radius:20px; border-top-left-radius:0; border-top-right-radius:0; color:#FFFFFF; line-height:20px; text-align:center; } null { } [class^="header_"] * { font-size:30px; height:60px; line-height:25px; padding-bottom:10px; padding-left:6px; text-align:left; vertical-align:bottom; } .header_title { border-bottom-left-radius:4px; border-bottom-right-radius:4px; border-top-left-radius:4px; border-top-right-radius:4px; color:#FFFFFF; display:inline-block; font-style:italic; height:auto; padding:0 8px 0 0; text-shadow:rgba(0, 0, 0, 0.14902) 0 1px 1px; } #grand_totals { background-color:rgba(0, 0, 0, 0); border:0 none; border-bottom-left-radius:3px; border-bottom-right-radius:3px; border-top-left-radius:3px; border-top-right-radius:3px; color:#FFFFFF; line-height:20px; min-height:20px; padding:8px; text-align:center; vertical-align:middle; } #copyright { background-color:rgba(180, 32, 48, 0.6); border-bottom-left-radius:3px; border-bottom-right-radius:3px; border-top-left-radius:3px; border-top-right-radius:3px; color:#EEEEEE; line-height:17px; margin-top:10px; padding:8px; text-align:center; } .animetitle + small { color:#CC33FF !important; } #copyright::after { content:' CSS by Kyouhansha. Edits by TheHolyPotato. Google 'Shishio's Custom Lists' for more designs and info.'; } /* COVER AREA The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS to see a DVD or manga cover). Move the cover's location around with left and top. Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away. Increase height and width to make the pics bigger. Delete border-style: solid; to remove the border. For changing the original background color see the bottom of the original post: */ :hover + .hide { background-size: cover; left: 970px; top: 260px; height: 350px; width: 226px; padding-bottom: 0px; border-style: solid; border-color: white; border-top: 1px solid white;; border-left: 1px solid white; border-right: 1px solid white; border-bottom: 1px solid white; border-radius: 25px 25px 25px 25px; background-color: rgba(200, 5, 200, 0.75); background-position: center 50% !important; background-repeat: no-repeat !Important; display: block !important; position: fixed; } /* PREVIEW MSG ABOVE COVERS Remove content: "preview"; to remove the PREVIEW text. Change the text in quotations after content to what you want it to say above your cover pic. Top and width controls the position of the text. */ .hide:before { background: transparent; content: "PREVIEW"; padding-bottom: 5px; position: absolute; text-align: center; width: 225px; top: -25px; border-radius: 25px 25px 0 0; } |
muaniOct 19, 2014 12:57 AM
Oct 22, 2014 5:57 PM
#129
| Ok so this is like my test layout, first one I've ever tried and i'm gonna changed it up a lot, but it looks nice and simple as it is so i thought i would donate this as is. Pic: http://i.imgur.com/TTDE4zL.jpg Any helpful tips would be greatly appreciated :) /* HALF CSS IS CUSTOM MADE BUY SHI ARUKU & THE OTHER HALF ARE FROM "Shishio's Custom Lists & Profiles" Link For Help Or Info : http://myanimelist.net/forum/?clubid=19736 */ @import "https://dl.dropbox.com/s/4u9v39e5go65aoq/PinkTopBar.css"; body { background-size:cover; background-image: url(http://i.imgur.com/PhMh9mh.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: center right; color: ; font-size: 12.00px; font-family: Verdana, Arial; background-color: ; } #list_surround { margin-left: auto; margin-right: 950px; width: 800px; } /* CUSTOM BANNER "Background image" controls the image seen, change out the link to change the banner pic. Please leave everything else alone unless you know exactly what you're doing! */ #list_surround { background-image: url( ); background-position: center top; background-repeat: no-repeat; padding-top: 50px; opacity:0.85; filter:alpha(opacity=85); } /* // All links on your list */ a { color: #0099FF; text-decoration: none; } a:visited { color: #0099FF; text-decoration: none; } a:hover { color: #0033CC; text-decoration: bold; } /* // Alternating row color 1 */ .td1 { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #0099FF; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #FF6666; padding: 2px; background-color: #FF99CC; } /* // Alternating row color 2 */ .td2 { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #0099FF; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #FFFF00; padding: 2px; background-color: #FF99FF; } /* headers: watching, completed, on-hold, dropped, plan to watch */ .header_title { color: #FF00FF; font-size: 24px; font-family: Leckerli One; padding-bottom: 3px; text-align: center; } .category_totals { color: #6666CC; padding-top: 8px; font-size: 9px; text-align: center; } #grand_totals { color: #6666CC; font-size: 10px; text-align: center; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ .table_header { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #3399FF; text-decoration: italic; |
Oct 23, 2014 1:20 AM
#130
ShiAruku said: it really does look great (*^-^*) what anime is it based on?Ok so this is like my test layout, first one I've ever tried and i'm gonna changed it up a lot, but it looks nice and simple as it is so i thought i would donate this as is. Pic: http://i.imgur.com/TTDE4zL.jpg Any helpful tips would be greatly appreciated :) /* HALF CSS IS CUSTOM MADE BUY SHI ARUKU & THE OTHER HALF ARE FROM "Shishio's Custom Lists & Profiles" Link For Help Or Info : http://myanimelist.net/forum/?clubid=19736 */ @import "https://dl.dropbox.com/s/4u9v39e5go65aoq/PinkTopBar.css"; body { background-size:cover; background-image: url(http://i.imgur.com/PhMh9mh.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: center right; color: ; font-size: 12.00px; font-family: Verdana, Arial; background-color: ; } #list_surround { margin-left: auto; margin-right: 950px; width: 800px; } /* CUSTOM BANNER "Background image" controls the image seen, change out the link to change the banner pic. Please leave everything else alone unless you know exactly what you're doing! */ #list_surround { background-image: url( ); background-position: center top; background-repeat: no-repeat; padding-top: 50px; opacity:0.85; filter:alpha(opacity=85); } /* // All links on your list */ a { color: #0099FF; text-decoration: none; } a:visited { color: #0099FF; text-decoration: none; } a:hover { color: #0033CC; text-decoration: bold; } /* // Alternating row color 1 */ .td1 { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #0099FF; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #FF6666; padding: 2px; background-color: #FF99CC; } /* // Alternating row color 2 */ .td2 { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #0099FF; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #FFFF00; padding: 2px; background-color: #FF99FF; } /* headers: watching, completed, on-hold, dropped, plan to watch */ .header_title { color: #FF00FF; font-size: 24px; font-family: Leckerli One; padding-bottom: 3px; text-align: center; } .category_totals { color: #6666CC; padding-top: 8px; font-size: 9px; text-align: center; } #grand_totals { color: #6666CC; font-size: 10px; text-align: center; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ .table_header { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #3399FF; text-decoration: italic; |
|
Oct 23, 2014 10:09 AM
#131
Oiomi-chan said: None i just like pink XD, that background could be from an anime i'm not sure , someone else made it for me :)ShiAruku said: it really does look great (*^-^*) what anime is it based on?Ok so this is like my test layout, first one I've ever tried and i'm gonna changed it up a lot, but it looks nice and simple as it is so i thought i would donate this as is. Pic: http://i.imgur.com/TTDE4zL.jpg Any helpful tips would be greatly appreciated :) /* HALF CSS IS CUSTOM MADE BUY SHI ARUKU & THE OTHER HALF ARE FROM "Shishio's Custom Lists & Profiles" Link For Help Or Info : http://myanimelist.net/forum/?clubid=19736 */ @import "https://dl.dropbox.com/s/4u9v39e5go65aoq/PinkTopBar.css"; body { background-size:cover; background-image: url(http://i.imgur.com/PhMh9mh.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: center right; color: ; font-size: 12.00px; font-family: Verdana, Arial; background-color: ; } #list_surround { margin-left: auto; margin-right: 950px; width: 800px; } /* CUSTOM BANNER "Background image" controls the image seen, change out the link to change the banner pic. Please leave everything else alone unless you know exactly what you're doing! */ #list_surround { background-image: url( ); background-position: center top; background-repeat: no-repeat; padding-top: 50px; opacity:0.85; filter:alpha(opacity=85); } /* // All links on your list */ a { color: #0099FF; text-decoration: none; } a:visited { color: #0099FF; text-decoration: none; } a:hover { color: #0033CC; text-decoration: bold; } /* // Alternating row color 1 */ .td1 { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #0099FF; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #FF6666; padding: 2px; background-color: #FF99CC; } /* // Alternating row color 2 */ .td2 { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #0099FF; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #FFFF00; padding: 2px; background-color: #FF99FF; } /* headers: watching, completed, on-hold, dropped, plan to watch */ .header_title { color: #FF00FF; font-size: 24px; font-family: Leckerli One; padding-bottom: 3px; text-align: center; } .category_totals { color: #6666CC; padding-top: 8px; font-size: 9px; text-align: center; } #grand_totals { color: #6666CC; font-size: 10px; text-align: center; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ .table_header { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #3399FF; text-decoration: italic; |
Oct 23, 2014 2:06 PM
#132
ShiAruku said: NVM found it :POiomi-chan said: None i just like pink XD, that background could be from an anime i'm not sure , someone else made it for me :)ShiAruku said: Ok so this is like my test layout, first one I've ever tried and i'm gonna changed it up a lot, but it looks nice and simple as it is so i thought i would donate this as is. Pic: http://i.imgur.com/TTDE4zL.jpg Any helpful tips would be greatly appreciated :) /* HALF CSS IS CUSTOM MADE BUY SHI ARUKU & THE OTHER HALF ARE FROM "Shishio's Custom Lists & Profiles" Link For Help Or Info : http://myanimelist.net/forum/?clubid=19736 */ @import "https://dl.dropbox.com/s/4u9v39e5go65aoq/PinkTopBar.css"; body { background-size:cover; background-image: url(http://i.imgur.com/PhMh9mh.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: center right; color: ; font-size: 12.00px; font-family: Verdana, Arial; background-color: ; } #list_surround { margin-left: auto; margin-right: 950px; width: 800px; } /* CUSTOM BANNER "Background image" controls the image seen, change out the link to change the banner pic. Please leave everything else alone unless you know exactly what you're doing! */ #list_surround { background-image: url( ); background-position: center top; background-repeat: no-repeat; padding-top: 50px; opacity:0.85; filter:alpha(opacity=85); } /* // All links on your list */ a { color: #0099FF; text-decoration: none; } a:visited { color: #0099FF; text-decoration: none; } a:hover { color: #0033CC; text-decoration: bold; } /* // Alternating row color 1 */ .td1 { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #0099FF; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #FF6666; padding: 2px; background-color: #FF99CC; } /* // Alternating row color 2 */ .td2 { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #0099FF; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #FFFF00; padding: 2px; background-color: #FF99FF; } /* headers: watching, completed, on-hold, dropped, plan to watch */ .header_title { color: #FF00FF; font-size: 24px; font-family: Leckerli One; padding-bottom: 3px; text-align: center; } .category_totals { color: #6666CC; padding-top: 8px; font-size: 9px; text-align: center; } #grand_totals { color: #6666CC; font-size: 10px; text-align: center; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ .table_header { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #3399FF; text-decoration: italic; |
|
Oct 23, 2014 7:01 PM
#133
Oiomi-chan said: OH what was it?ShiAruku said: NVM found it :POiomi-chan said: ShiAruku said: it really does look great (*^-^*) what anime is it based on?Ok so this is like my test layout, first one I've ever tried and i'm gonna changed it up a lot, but it looks nice and simple as it is so i thought i would donate this as is. Pic: http://i.imgur.com/TTDE4zL.jpg Any helpful tips would be greatly appreciated :) /* HALF CSS IS CUSTOM MADE BUY SHI ARUKU & THE OTHER HALF ARE FROM "Shishio's Custom Lists & Profiles" Link For Help Or Info : http://myanimelist.net/forum/?clubid=19736 */ @import "https://dl.dropbox.com/s/4u9v39e5go65aoq/PinkTopBar.css"; body { background-size:cover; background-image: url(http://i.imgur.com/PhMh9mh.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: center right; color: ; font-size: 12.00px; font-family: Verdana, Arial; background-color: ; } #list_surround { margin-left: auto; margin-right: 950px; width: 800px; } /* CUSTOM BANNER "Background image" controls the image seen, change out the link to change the banner pic. Please leave everything else alone unless you know exactly what you're doing! */ #list_surround { background-image: url( ); background-position: center top; background-repeat: no-repeat; padding-top: 50px; opacity:0.85; filter:alpha(opacity=85); } /* // All links on your list */ a { color: #0099FF; text-decoration: none; } a:visited { color: #0099FF; text-decoration: none; } a:hover { color: #0033CC; text-decoration: bold; } /* // Alternating row color 1 */ .td1 { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #0099FF; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #FF6666; padding: 2px; background-color: #FF99CC; } /* // Alternating row color 2 */ .td2 { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #0099FF; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #FFFF00; padding: 2px; background-color: #FF99FF; } /* headers: watching, completed, on-hold, dropped, plan to watch */ .header_title { color: #FF00FF; font-size: 24px; font-family: Leckerli One; padding-bottom: 3px; text-align: center; } .category_totals { color: #6666CC; padding-top: 8px; font-size: 9px; text-align: center; } #grand_totals { color: #6666CC; font-size: 10px; text-align: center; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ .table_header { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #3399FF; text-decoration: italic; |
Oct 25, 2014 1:10 PM
#134
xbpxsh0cks said: Yozakura Quartet: Hana no UtaOiomi-chan said: OH what was it?ShiAruku said: Oiomi-chan said: None i just like pink XD, that background could be from an anime i'm not sure , someone else made it for me :)ShiAruku said: it really does look great (*^-^*) what anime is it based on?Ok so this is like my test layout, first one I've ever tried and i'm gonna changed it up a lot, but it looks nice and simple as it is so i thought i would donate this as is. Pic: http://i.imgur.com/TTDE4zL.jpg Any helpful tips would be greatly appreciated :) /* HALF CSS IS CUSTOM MADE BUY SHI ARUKU & THE OTHER HALF ARE FROM "Shishio's Custom Lists & Profiles" Link For Help Or Info : http://myanimelist.net/forum/?clubid=19736 */ @import "https://dl.dropbox.com/s/4u9v39e5go65aoq/PinkTopBar.css"; body { background-size:cover; background-image: url(http://i.imgur.com/PhMh9mh.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: center right; color: ; font-size: 12.00px; font-family: Verdana, Arial; background-color: ; } #list_surround { margin-left: auto; margin-right: 950px; width: 800px; } /* CUSTOM BANNER "Background image" controls the image seen, change out the link to change the banner pic. Please leave everything else alone unless you know exactly what you're doing! */ #list_surround { background-image: url( ); background-position: center top; background-repeat: no-repeat; padding-top: 50px; opacity:0.85; filter:alpha(opacity=85); } /* // All links on your list */ a { color: #0099FF; text-decoration: none; } a:visited { color: #0099FF; text-decoration: none; } a:hover { color: #0033CC; text-decoration: bold; } /* // Alternating row color 1 */ .td1 { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #0099FF; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #FF6666; padding: 2px; background-color: #FF99CC; } /* // Alternating row color 2 */ .td2 { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #0099FF; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #FFFF00; padding: 2px; background-color: #FF99FF; } /* headers: watching, completed, on-hold, dropped, plan to watch */ .header_title { color: #FF00FF; font-size: 24px; font-family: Leckerli One; padding-bottom: 3px; text-align: center; } .category_totals { color: #6666CC; padding-top: 8px; font-size: 9px; text-align: center; } #grand_totals { color: #6666CC; font-size: 10px; text-align: center; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ .table_header { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #3399FF; text-decoration: italic; |
|
Oct 27, 2014 8:24 PM
#135
| Hey guys, any Kino no Tabi lovers? No? Ok. This is my first layout, be kind ;-; Preview: http://goo.gl/w2UgiA Code: http://goo.gl/7PdiBZ |
 |
Oct 28, 2014 4:24 PM
#136
Oiomi-chan said: Thank you.xbpxsh0cks said: Yozakura Quartet: Hana no UtaOiomi-chan said: ShiAruku said: NVM found it :POiomi-chan said: None i just like pink XD, that background could be from an anime i'm not sure , someone else made it for me :)ShiAruku said: it really does look great (*^-^*) what anime is it based on?Ok so this is like my test layout, first one I've ever tried and i'm gonna changed it up a lot, but it looks nice and simple as it is so i thought i would donate this as is. Pic: http://i.imgur.com/TTDE4zL.jpg Any helpful tips would be greatly appreciated :) /* HALF CSS IS CUSTOM MADE BUY SHI ARUKU & THE OTHER HALF ARE FROM "Shishio's Custom Lists & Profiles" Link For Help Or Info : http://myanimelist.net/forum/?clubid=19736 */ @import "https://dl.dropbox.com/s/4u9v39e5go65aoq/PinkTopBar.css"; body { background-size:cover; background-image: url(http://i.imgur.com/PhMh9mh.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: center right; color: ; font-size: 12.00px; font-family: Verdana, Arial; background-color: ; } #list_surround { margin-left: auto; margin-right: 950px; width: 800px; } /* CUSTOM BANNER "Background image" controls the image seen, change out the link to change the banner pic. Please leave everything else alone unless you know exactly what you're doing! */ #list_surround { background-image: url( ); background-position: center top; background-repeat: no-repeat; padding-top: 50px; opacity:0.85; filter:alpha(opacity=85); } /* // All links on your list */ a { color: #0099FF; text-decoration: none; } a:visited { color: #0099FF; text-decoration: none; } a:hover { color: #0033CC; text-decoration: bold; } /* // Alternating row color 1 */ .td1 { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #0099FF; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #FF6666; padding: 2px; background-color: #FF99CC; } /* // Alternating row color 2 */ .td2 { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #0099FF; border-width: 0px 0px 0px 0px; border-style: solid; border-color: #FFFF00; padding: 2px; background-color: #FF99FF; } /* headers: watching, completed, on-hold, dropped, plan to watch */ .header_title { color: #FF00FF; font-size: 24px; font-family: Leckerli One; padding-bottom: 3px; text-align: center; } .category_totals { color: #6666CC; padding-top: 8px; font-size: 9px; text-align: center; } #grand_totals { color: #6666CC; font-size: 10px; text-align: center; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ .table_header { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; color: #3399FF; text-decoration: italic; |
Oct 28, 2014 4:51 PM
#137
rothrock said: Hey guys, any Kino no Tabi lovers? No? Ok. This is my first layout, be kind ;-; Preview: http://goo.gl/w2UgiA Code: http://goo.gl/7PdiBZ simple and neat layout good job. one thing's bothering me though. If you hover a row you're not able to read the row at all. The white font melts with the white background of the row. Try to add this code, maybe it's better tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color: black; } |
Oct 29, 2014 10:39 PM
#138
SylakentH said: simple and neat layout good job. one thing's bothering me though. If you hover a row you're not able to read the row at all. The white font melts with the white background of the row. Try to add this code, maybe it's better tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color: black; } Thank you Sylaken ｡◕‿◕｡ , it's added. |
|
Oct 30, 2014 3:08 PM
#139
| Black Rock Shooter - Square-styled layout With background and cursor. Preview: http://i.imgur.com/VvJiQNh.jpg Cursor: http://fc02.deviantart.net/fs70/i/2012/363/f/e/black_rock_shooter_cursor_by_anime_rai-d4wwk78.gif Code: /* Square Layout u531355 - 2012 */ /* 1) Generated covers */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/anime.css); /* 2) Base layout */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/style.css); /* 3) Top-bar icons */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/bars/japan/bar.css); /* 4) Layout theme */ @import url(http://dl.dropbox.com/u/49469857/MAL/premade/square/themes/dark/theme.css); /* 5) Addons - Add as many as you want */ body { background-image: url(http://i.imgur.com/reG1ijw.jpg); background-size: cover; background-attachment: fixed; /* Crusor */ cursor:url(http://fc02.deviantart.net/fs70/i/2012/363/f/e/black_rock_shooter_cursor_by_anime_rai-d4wwk78.gif) 1 2, auto; } a:hover { cursor: url(http://fc02.deviantart.net/fs70/i/2012/363/f/e/black_rock_shooter_cursor_by_anime_rai-d4wwk78.gif) 1 2, auto; } /* 6) Options */ /* Determines the number of covers on each row, it should be a multiple of 242px */ #mal_control_strip, #list_surround {max-width: 1452px;} /* Header picture */ #inlineContent {background-image: url(http://i.imgur.com/bQraOD5.jpg);} /* Default picture when no cover is found */ .hide {background-image: url(http://dl.dropbox.com/u/49469857/MAL/premade/square/nopic/mal.jpg);} /* Links color */ a {color: ;} /* More infos on http://myanimelist.net/forum/?topicid=459189 */ |
Nov 8, 2014 12:41 AM
#140
| Ghibli List Style preview: https://db.tt/pNT1K1Hq code: http://myanimelist.net/blog.php?eid=762701 |
Nov 8, 2014 5:53 AM
#141
seaven said: Ghibli List Style preview: https://db.tt/pNT1K1Hq code: http://myanimelist.net/blog.php?eid=762701 tbh never seen a Ghibli layout before, glad that your donating it. Good job :) |
Nov 8, 2014 7:23 AM
#142
SylakentH said: tbh never seen a Ghibli layout before, glad that your donating it. Good job :) Always happy to help. I got few other ideas while making this style so probably I'll be doing something new soon. |
Nov 12, 2014 12:35 AM
#143
| Donating my current Tokyo Ghoul layout. (worst readability ever seen for a list, I know that^^) Optimized for 1080p. Preview : (clickable)  Checked Settings : Numbers Score Type Episodes The code https://noblueskydropfiles.github.io/animelist%20TG.css Update Dec 16th, 2016 : new imports+fellow writer Update Jan 27th 2017 : switched from fellow writer to malcat |
NoblueskyJan 27, 2017 12:30 PM
Nov 14, 2014 1:06 PM
#144
kuronekodesu said: Hello everyone~ It's my first post in this club, actually I'm a new member :) I'm into CSS (although I'm no pro :p) so I've decided that I'll make some list styles (until college starts =_=). So, here's the first style, featuring Naruto! :D screenshot: http://i.imgur.com/cZ0JfAN.jpg download (with resources credits and instructions): http://www.sendspace.com/file/128mk4 Also - thanks to Shishio-kun for the tutorials :) FOR ME THE BEST ONE!!! THANKS!!!!! |
Maybe you want see what i watching? CLICK! [/center] |
Nov 26, 2014 2:21 PM
#145
| I just created a profile layout for an anime called Ushinawareta Mirai wo Motomete, and I've decided to donate it. Preview:  Code: @import "https://dl.dropboxusercontent.com/u/78340470/Icon%20Style%20Menu%20Bar/pinkversion/pinkiconbar.css"; @import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css"; /* MAIN BACKGROUND The space background by default. */ body { background-attachment:fixed; background-clip:border-box; background-color: black; background-image: url(https://calamitousintents.files.wordpress.com/2012/03/ushi22.jpg); background-position:0 50%, 0 0; background-repeat:no-repeat no-repeat; background-size:cover; font-family:calibri; } /* SECONDARY BACKGROUND Goes behind the list but in front of the main background. Image links to a character render in the parenthesis after background. Add or remove the word "contain" (without quotations) after background-size if you want them to be fit or not fit into the entire page. */ #inlineContent { background: url() no-repeat scroll right bottom transparent; background-size: ; display: inline-block !important; height: 100%; left: 0 !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 100%; z-index: -1 !important; } /* LIST BACKGROUND COLOR, ROW HEIGHT AND FLASH Adjust the opacity and color of the list itself with the first two sets of code, as well as the height of the rows. td1 is odd numbered rows, td2 is even. The third set of code is for the row color and opacity on height. Google RGBA color generator for easy to copy color and opacity numbers customized for you. */ .td1 { background-color:rgba(0, 0, 0, 0.5); height:65px; } .td2 { background-color:rgba(0, 0, 0, 0.5); height:65px; } tr:hover [class^="td"] { transition: .1s linear; background-color: rgba(208, 32, 144, 0.6); } /* SIDE BUTTONS */ #list_surround .status_selected, #list_surround .status_not_selected { -webkit-background-clip:padding-box !important; background-clip:padding-box !important; background-color:transparent; background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/WatchingKaori_zps292861ba.png); background-position:0 0; background-repeat:no-repeat no-repeat; background-size:contain; border:1px solid transparent; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; display:block; left:-300px; padding:0; position:absolute; top:20px; width:263px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/CompletedYui_zps954dd114.png); background-position:100% 0; top:140px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/OnHoldAiri_zpsff6870fb.png); background-position:0 0; top:260px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/DroppedNagisa_zps799d9518.png); background-position:100% 0; top:380px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/PlantoWatchKennySou_zps820b9d1f.jpg); background-position:0 0; top:500px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/AllAnimeUshinawareta_zpsf9fc1bd3.jpg); background-position:100% 0; top:620px; } /* CUSTOM HEADERS */ .header_cw { background-color: transparent; background-image: url("http://i.imgur.com/mWK77Ng.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } .header_completed { background-color: transparent; background-image: url("http://i.imgur.com/wF8MQkE.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } .header_onhold { background-color: transparent; background-image: url("http://i.imgur.com/ZWprtND.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } .header_dropped { background-color: transparent; background-image: url("http://i.imgur.com/3ve4Yod.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } .header_ptw { background-color: transparent; background-image: url("http://i.imgur.com/zRGEVZy.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } /* OTHER CODES Ask in the original topic for this layout of in my club if you need to learn more about customizing this layout. */ a { color:#FFFFFF; text-decoration:none; text-shadow:none; } a:hover { color:#fff; text-decoration:underline; } .table_header { background-color:rgba(255, 255, 255, 0.4); } .table_header:first-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:10px; border-top-right-radius:0; } .table_header:nth-of-type(2) { padding-left:35px; text-align:left; } .table_header:last-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:0; border-top-right-radius:10px; } .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border:0 none; padding:4px; text-align:center; vertical-align:top; } .table_header, .td1, .td2, .category_totals { color:white; } .borderRBL { line-height:normal !important; } [cellspacing="0"] { line-height:17px; } .category_totals { background-color:rgba(255, 255, 255, 0.4); border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:0; border-top-right-radius:0; color:white; text-align:center; } [class^="header_"] * { background-repeat:no-repeat no-repeat; font-size:0; height:200px; line-height:24px; padding-bottom:4px; text-align:right; vertical-align:bottom; } .header_title { border-bottom-left-radius:4px; border-bottom-right-radius:4px; border-top-left-radius:4px; border-top-right-radius:4px; color:#FFFFFF; display:inline-block; font-style:italic; height:auto; padding:0 8px 0 0; text-shadow:rgba(0, 0, 0, 0.14902) 0 1px 1px; } #grand_totals { background-color:transparent; border:0 none; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; color:#FFFFFF; line-height:20px; min-height:20px; padding:8px; text-align:center; vertical-align:middle; } #copyright { background-color:rgba(180, 32, 48, 0.6); border-bottom-left-radius:3px; border-bottom-right-radius:3px; border-top-left-radius:3px; border-top-right-radius:3px; color:#EEEEEE; line-height:17px; margin-top:10px; padding:8px; text-align:center; } #copyright::after { } .hide { background-color:rgba(248, 162, 200, 0.701961); background-position:50% 50%; background-repeat:no-repeat no-repeat; background-size:cover; border:1px solid #FFFFFF; border-bottom-left-radius:7px; border-bottom-right-radius:7px; border-top-left-radius:7px; border-top-right-radius:7px; display:inline-block !important; height:55px; margin-left:33px; margin-top:-65px; position:absolute; width:35px; } .hide:hover { background-color:transparent; background-repeat:no-repeat no-repeat; background-size:cover; border-bottom-left-radius:20px; border-bottom-right-radius:20px; border-top-left-radius:20px; border-top-right-radius:20px; box-shadow:rgba(63, 52, 60, 0.54902) 0 0 8px 8px; margin-left:-115px; padding-right:150px; padding-top:220px !important; position:absolute; z-index:1; } .td1:nth-of-type(2), .td2:nth-of-type(2) { padding-left:35px; text-align:left; } .td1:nth-of-type(6), .td2:nth-of-type(6) { background-attachment:scroll; background-color:transparent; background-image:none; background-position:0 0; background-repeat:repeat repeat; border-bottom-style:none !important; border-bottom-width:medium !important; display:inline-block; font-family:cursive; font-size:9pt; height:0 !important; left:70px; line-height:16px !important; margin-top:16px; position:absolute; text-align:justify !important; width:720px; z-index:2; } .table_header:nth-of-type(6) { display:none; } span[id*="tagRow"] { display:block !important; } span[id*="tagLinks"] { display:none !important; } a, .td1, .td2, .category_totals { -webkit-transition:all 0.25s ease-in-out 0s; transition:all 0.25s ease-in-out 0s; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color:transparent; display:block; font-size:0; height:113px; width:263px; } .status_selected { display:block; } .status_not_selected { display:block; } .status_not_selected { opacity:0.7; } .status_not_selected:hover { color:transparent; opacity:1; } #list_surround { left:0 !important; margin:auto !important; position:absolute !important; right:0 !important; } .animetitle { font-weight: bold;} .animetitle + small { color:#CC33FF !important; font-weight:bold; } * { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out;} .table_header:nth-last-of-type(2) { border-radius: 0 10px 0 0;} .td1:nth-of-type(6), .td2:nth-of-type(6){ background-color: transparent !important; font-family: helvetica;} td:nth-of-type(6) small { font-size: 0; color: cyan; left: 42px; position: relative; } td:nth-of-type(6) small:after { font-size: 12px !important; content: "Tags" } /* Media query for devices above 1000px */ @media all and (min-device-width:1001px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -270px;} #list_surround { left: 24% !important;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 7pt !important; width: 370px !important; padding-top: 8px;} } /* Media query for devices above 1024px */ @media all and (min-device-width:1025px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -300px;} #list_surround { left: 17% !important;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 7pt !important; width: 370px !important;} } /* Media query for devices above 1140px */ @media all and (min-device-width:1141px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -290px;} #list_surround { left: 17% !important; width: 850px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 530px !important;} } /* Media query for devices above 1280px */ @media all and (min-device-width:1281px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -330px;} #list_surround { left: 18% !important; width: 900px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 575px !important;} } /* Media query for devices above 1440px */ @media all and (min-device-width:1441px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -385px;} #list_surround { left: 17% !important; width: 960px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 635px !important;} #list_surround { background-position: center -40px;} } /* Media query for devices above 1680px */ @media all and (min-device-width:1681px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -430px;} #list_surround { left: 16% !important; width: 1050px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 720px !important;} } /* Media query for devices above 1920px */ @media all and (min-device-width:1921px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -530px;} #list_surround { left: 10% !important; width: 1100px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 770px !important;} } EDIT: I made a little edit to this layout, so here's the new code~! @import "https://dl.dropboxusercontent.com/u/78340470/Icon%20Style%20Menu%20Bar/pinkversion/pinkiconbar.css"; @import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css"; /* MAIN BACKGROUND The space background by default. */ body { background-attachment:fixed; background-clip:border-box; background-color: black; background-image: url(https://calamitousintents.files.wordpress.com/2012/03/ushi22.jpg); background-position:0 50%, 0 0; background-repeat:no-repeat no-repeat; background-size:cover; font-family:calibri; } /* SECONDARY BACKGROUND Goes behind the list but in front of the main background. Image links to a character render in the parenthesis after background. Add or remove the word "contain" (without quotations) after background-size if you want them to be fit or not fit into the entire page. */ #inlineContent { background: url() no-repeat scroll right bottom transparent; background-size: ; display: inline-block !important; height: 100%; left: 0 !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 100%; z-index: -1 !important; } /* LIST BACKGROUND COLOR, ROW HEIGHT AND FLASH Adjust the opacity and color of the list itself with the first two sets of code, as well as the height of the rows. td1 is odd numbered rows, td2 is even. The third set of code is for the row color and opacity on height. Google RGBA color generator for easy to copy color and opacity numbers customized for you. */ .td1 { background-color:rgba(0, 0, 0, 0.5); height:65px; } .td2 { background-color:rgba(0, 0, 0, 0.5); height:65px; } tr:hover [class^="td"] { transition: .1s linear; background-color: rgba(208, 32, 144, 0.6); } /* SIDE BUTTONS */ #list_surround .status_selected, #list_surround .status_not_selected { -webkit-background-clip:padding-box !important; background-clip:padding-box !important; background-color:transparent; background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/WatchingKaori_zps292861ba.png); background-position:0 0; background-repeat:no-repeat no-repeat; background-size:contain; border:1px solid transparent; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; display:block; left:-300px; padding:0; position:absolute; top:20px; width:263px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/CompletedYui_zps954dd114.png); background-position:100% 0; top:140px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/OnHoldAiri_zpsff6870fb.png); background-position:0 0; top:260px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/DroppedNagisa_zps799d9518.png); background-position:100% 0; top:380px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/PlantoWatchKennySou_zps820b9d1f.jpg); background-position:0 0; top:500px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/AllAnimeUshinawareta_zpsf9fc1bd3.jpg); background-position:100% 0; top:620px; } /* CUSTOM HEADERS */ .header_cw { background-color: transparent; background-image: url("http://i.imgur.com/mWK77Ng.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } .header_completed { background-color: transparent; background-image: url("http://i.imgur.com/wF8MQkE.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } .header_onhold { background-color: transparent; background-image: url("http://i.imgur.com/ZWprtND.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } .header_dropped { background-color: transparent; background-image: url("http://i.imgur.com/3ve4Yod.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } .header_ptw { background-color: transparent; background-image: url("http://i.imgur.com/zRGEVZy.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } /* OTHER CODES Ask in the original topic for this layout of in my club if you need to learn more about customizing this layout. */ a { color:#FFFFFF; text-decoration:none; text-shadow:none; } a:hover { color:#fff; text-decoration:underline; } .table_header { background-color:rgba(255, 255, 255, 0.4); } .table_header:first-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:10px; border-top-right-radius:0; } .table_header:nth-of-type(2) { padding-left:35px; text-align:left; } .table_header:last-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:0; border-top-right-radius:10px; } .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border:0 none; padding:4px; text-align:center; vertical-align:top; } .table_header, .td1, .td2, .category_totals { color:white; } .borderRBL { line-height:normal !important; } [cellspacing="0"] { line-height:17px; } .category_totals { background-color:rgba(255, 255, 255, 0.4); border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:0; border-top-right-radius:0; color:white; text-align:center; } [class^="header_"] * { background-repeat:no-repeat no-repeat; font-size:0; height:200px; line-height:24px; padding-bottom:4px; text-align:right; vertical-align:bottom; } .header_title { border-bottom-left-radius:4px; border-bottom-right-radius:4px; border-top-left-radius:4px; border-top-right-radius:4px; color:#FFFFFF; display:inline-block; font-style:italic; height:auto; padding:0 8px 0 0; text-shadow:rgba(0, 0, 0, 0.14902) 0 1px 1px; } #grand_totals { background-color:transparent; border:0 none; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; color:#FFFFFF; line-height:20px; min-height:20px; padding:8px; text-align:center; vertical-align:middle; } #copyright { background-color:rgba(180, 32, 48, 0.6); border-bottom-left-radius:3px; border-bottom-right-radius:3px; border-top-left-radius:3px; border-top-right-radius:3px; color:#EEEEEE; line-height:17px; margin-top:10px; padding:8px; text-align:center; } #copyright::after { } .hide { background-color:rgba(248, 162, 200, 0.701961); background-position:50% 50%; background-repeat:no-repeat no-repeat; background-size:cover; border:1px solid #FFFFFF; border-bottom-left-radius:7px; border-bottom-right-radius:7px; border-top-left-radius:7px; border-top-right-radius:7px; display:inline-block !important; height:55px; margin-left:33px; margin-top:-65px; position:absolute; width:35px; } .hide:hover { background-color:transparent; background-repeat:no-repeat no-repeat; background-size:cover; border-bottom-left-radius:20px; border-bottom-right-radius:20px; border-top-left-radius:20px; border-top-right-radius:20px; box-shadow:rgba(63, 52, 60, 0.54902) 0 0 8px 8px; margin-left:-115px; padding-right:150px; padding-top:220px !important; position:absolute; z-index:1; } .td1:nth-of-type(2), .td2:nth-of-type(2) { padding-left:35px; text-align:left; } .td1:nth-of-type(6), .td2:nth-of-type(6) { background-attachment:scroll; background-color:transparent; background-image:none; background-position:0 0; background-repeat:repeat repeat; border-bottom-style:none !important; border-bottom-width:medium !important; display:inline-block; font-family:cursive; font-size:9pt; height:0 !important; left:70px; line-height:16px !important; margin-top:16px; position:absolute; text-align:justify !important; width:720px; z-index:2; } .table_header:nth-of-type(6) { display:none; } span[id*="tagRow"] { display:block !important; } span[id*="tagLinks"] { display:none !important; } a, .td1, .td2, .category_totals { -webkit-transition:all 0.25s ease-in-out 0s; transition:all 0.25s ease-in-out 0s; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color:transparent; display:block; font-size:0; height:113px; width:263px; } .status_selected { display:block; } .status_not_selected { display:block; } .status_not_selected { opacity:0.7; } .status_not_selected:hover { color:transparent; opacity:1; } #list_surround { left:0 !important; margin:auto !important; position:absolute !important; right:0 !important; } .animetitle { font-weight: bold;} .animetitle + small { color:#CC33FF !important; font-weight:bold; } * { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out;} .table_header:nth-last-of-type(2) { border-radius: 0 10px 0 0;} .td1:nth-of-type(6), .td2:nth-of-type(6){ background-color: transparent !important; font-family: helvetica;} td:nth-of-type(6) small { font-size: 0; color: cyan; left: 42px; position: relative; } td:nth-of-type(6) small:after { font-size: 12px !important; content: "Tags" } /* Media query for devices above 1000px */ @media all and (min-device-width:1001px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -270px;} #list_surround { left: 24% !important;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 7pt !important; width: 370px !important; padding-top: 8px;} } /* Media query for devices above 1024px */ @media all and (min-device-width:1025px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -300px;} #list_surround { left: 17% !important;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 7pt !important; width: 370px !important;} } /* Media query for devices above 1140px */ @media all and (min-device-width:1141px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -290px;} #list_surround { left: 17% !important; width: 850px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 530px !important;} } /* Media query for devices above 1280px */ @media all and (min-device-width:1281px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -330px;} #list_surround { left: 18% !important; width: 900px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 575px !important;} } /* Media query for devices above 1440px */ @media all and (min-device-width:1441px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -385px;} #list_surround { left: 17% !important; width: 960px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 635px !important;} #list_surround { background-position: center -40px;} } /* Media query for devices above 1680px */ @media all and (min-device-width:1681px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -430px;} #list_surround { left: 16% !important; width: 1050px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 720px !important;} } /* Media query for devices above 1920px */ @media all and (min-device-width:1921px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -530px;} #list_surround { left: 10% !important; width: 1100px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 770px !important;} } /* ANIMATED SCROLLING BANNER Z-index is the position of the scrolling pic (in front of or behind the list). A high z-index will move the list in front of other parts. A lower index will move the scrollbar behind other parts (-1 will be behind most lists). */ #inlineContent { position: fixed; display: block !important; left: 0; top: 0; width: 100%; height: 145px; overflow: hidden; z-index: 10; } /* SCROLLING IMAGE Change image and animation speeds here (20s). */ #inlineContent:before { pointer-events: none; position: absolute; content: ''; width: 300%; height: 100%; background-image: url("http://i1364.photobucket.com/albums/r730/kanako78/Scroll2_zpspvs3p4rt.png"); -moz-animation: scroll 50s linear infinite; -webkit-animation: scroll 50s linear infinite; } @-moz-keyframes scroll { 0% { background-position: 0; } 100% { background-position: -200%; } } @-webkit-keyframes scroll { 0% { background-position: 0; } 100% { background-position: -200%; } } /* LOWER WALLPAPER Lower the body wallpaper here so that your animated banner doesn't cover up the top of it. */ body { background-position: 0 145px !important; } |
HidamariSeashoreFeb 1, 2015 11:44 AM
Nov 26, 2014 3:17 PM
#146
| Here, I'll donate this Madan No Ou To Vanadis Anime list layout. I just edited it from another List on here, but I thought someone might like it~ @import "https://dl.dropbox.com/s/0rb5a1wq0b8ev5w/LastChapterAnimeListCSS.css"; @import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css"; @import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Lineage/TopMenu.css); @import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Lineage/CategoryMenu.css); @import url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Lineage/Favorites.css); /* Delete this line */ @import url(http://dl.dropboxusercontent.com/u/78340470/anime.css); @font-face { font-family: 'SAO'; src: url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Fonts/SAO.woff) format('woff'); } @font-face { font-family: 'Philosopher'; src: url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Fonts/Philosopher.woff) format('woff'); } /* HOW TO USE Use and COMPLETE this simple tutorial if you never installed CSS, it only takes a few minutes: http://myanimelist.net/forum/?topicid=200320 When you're done with the tutorial and can see the starter layout on your list, copy and paste this entire page of codes (including this part and the codes above and below) to your CSS edit box (the box titled Edit Advanced CSS File) replacing any other codes in the box. Save with the blue button at the bottom. It will put this premade layout on your list instead of the starter one from the tutorial! If the layout looks weird on your list after installing, you can try to alter your settings here. Common solutions are to set Default Status Settings to Watching or All Anime, check or uncheck tags (make sure you save afterwards): http://myanimelist.net/editprofile.php?go=listpreferences If your list still has problems you can ask us about it here, or other questions: http://myanimelist.net/forum/?topicid=200323 And you'll find further ways to customize your list here: http://myanimelist.net/forum/?topicid=419405 */ td[class^='td']:nth-of-type(2) { width: 454px !important; } .table_header[width="125"], span[id*="tagLinks"], div[id*="tagChangeRow"] { display: none !important; } td[class^='td'][width="125"] { width: 0; } .hide { background-position: center; background-repeat: no-repeat; background-size: auto; } .borderRBL { border-style: solid; border-color: #FFFFFF; border-width: 2px 0 !important; } .borderRBL small { visibility: visible !important; } /* Custom cursor */ body { cursor:url(http://i60.tinypic.com/vzcxo9.png) 1 2, auto; } a:hover { cursor: url(http://i60.tinypic.com/vzcxo9.png) 1 2, auto; } /* Custom cursor */ a { text-decoration: none; } body { font-family: 'Philosopher'; font-size: 13px; color: #7f7e7e; letter-spacing: .5px; background-color: transparent; } /* LIST SETTINGS */ #list_surround { position: relative; left: 100%; margin-left: -960px; top: 0; width: 650px; padding-top: 200px; } .table_header span { display: none; } .table_header:nth-child(2) { text-align: left; } .td1, .td2 { padding: 6px 0 3px; line-height: 13px; vertical-align: top; transition: background-color .4s ease; -webkit-transition: background-color .4s ease; } .animetitle, .animetitle + small { display:-cell; } .animetitle span { display: inline-block; } .animetitle + small:before { content: ' '; white-space: pre-wrap; } .animetitle + small { visibility: visible !important; color: #f2a603; font-size: 11px; text-transform: lowercase; letter-spacing: .5px; } #list_surround small { visibility: hidden; } #list_surround small a:last-of-type:before { position: absolute; display: inline-block !important; content: '...'; margin-left: -8px; font-family: Arial; line-height: 7px; font-size: 18px; font-weight: bold; letter-spacing: .5px; color: #7f7e7e; } #list_surround small a:first-of-type { position: relative; left: 44px; padding: 10px; font-size: 0; background-image: url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Lineage/Images/small.png); background-repeat: no-repeat; background-position: 0 -1px; } #list_surround small a[href*="edit"] { background-position: 0 -22px; } #list_surround tr:hover small a:first-of-type, #list_surround tr:hover small a:last-of-type:before { visibility: visible; } td[class^='td']:nth-child(2) { text-align: left; } td[class^='td'][width="45"] { background-image: url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Lineage/Images/circle.png); background-repeat: no-repeat; background-position: 11px 2px; } /* LIST COLOR */ .table_header, .td1, .td2 { text-align: center; background-color: rgba(255, 255, 255, .75); } tr:hover td[class^='td']:not(.borderRBL) { background-color: rgba(255, 255 , 255, 1); } /* LIST FONT COLOR */ a { color: #7f7e7e; } .table_headerLink { line-height: 24px; font-size: 10px; color: #f2a603 !important; font-weight: normal; text-transform: uppercase; } .table_headerLink strong { font-weight: normal !important; } td[class^='td'][width="45"], td[class^='td'][width="45"] a { color: #FFFFFF; } /* BORDER COLORS */ td[class^='td']:first-child { border-left: 2px solid #FFFFFF !important; box-shadow: -1px 0 0 #7f7e7e; } td[class^='td']:last-child { border-right: 2px solid #FFFFFF !important; box-shadow: 1px 0 0 #7f7e7e; } .table_header { border-style: solid; border-color: #FFFFFF; border-width: 2px 0; background-color: rgb(255, 255, 255); box-shadow: 0 1px 0 #000000, 0 -1px 0 #7f7e7e; } .table_header:first-child { border-left: 2px solid white !important; box-shadow: 0 -1px 0 #7f7e7e, 0 1px 0 #000000, -1px 0 0 #7f7e7e; } .table_header:nth-child(5) { border-right: 2px solid white !important; box-shadow: 0 -1px 0 #7f7e7e, 1px 0 0 #7f7e7e, 0 1px 0 #000000; border-radius: 0 16px 0 0; } /* HEADERS */ .header_title { pointer-events: none; display: inline-block; height: 100px; } /* Headers pics*/ .header_cw span, .header_completed span, .header_onhold span, .header_dropped span, .header_ptw span { position: absolute; display: inline-block; width: 650px; height: 131px; font-size: 0; background-image: url(http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Lineage/Images/headers_bg.png); background-repeat: no-repeat; z-index: 1; } .header_cw span { background-position: center 0; } .header_completed span { background-position: center -131px; } .header_onhold span { background-position: center -262px; } .header_dropped span { background-position: center -393px; } .header_ptw span { background-position: center -524px; } /* CURRENTLY WATCHING RENDER AND BACKGROUND */ .status_selected:first-child { background-image: url(http://i60.tinypic.com/2eykfg1.png), url(http://i59.tinypic.com/amz1tx.jpg); background-position: left bottom, left top; } /* COMPLETED RENDER AND BACKGROUND */ .status_selected:nth-child(2) { background-image: url(http://i59.tinypic.com/elcoy1.png), url(http://i58.tinypic.com/2gvkgp2.jpg); background-position: left bottom, left top; } /* ON-HOLD RENDER AND BACKGROUND */ .status_selected:nth-child(3) { background-image: url(http://i59.tinypic.com/344p4zc.png), url(http://i60.tinypic.com/294nl8w.jpg); background-position: left bottom, left top; } /* DROPPED RENDER AND BACKGROUND */ .status_selected:nth-child(4) { background-image: url(http://i58.tinypic.com/35aombq.png), url(http://i62.tinypic.com/123kvnp.jpg); background-position: left bottom, left top; } /* PLANNED RENDER AND BACKGROUND */ .status_selected:nth-child(5) { background-image: url(http://i61.tinypic.com/20k3rep.png), url(http://i57.tinypic.com/2rh1fcy.jpg); background-position: left bottom, left top; } /* ALL RENDER AND BACKGROUND */ .status_selected:last-child { background-image: url(none), url(http://i61.tinypic.com/29uoxmh.jpg); background-position: left bottom, left top; } .category_totals { padding: 3px 3px 9px 3px; text-align: center; font-size: 11px; color: #FFFFFF; border: 2px solid #FFFFFF; background-color: rgb(242, 166, 3); box-shadow: 1px 0 0 #7f7e7e, 0 1px 0 #7f7e7e, -1px 0 0 #7f7e7e; border-radius: 0 0 16px 16px; } #grand_totals:before { diplay: inline-block; content: '< '; } #grand_totals:after { diplay: inline-block; content: ' >'; } #grand_totals { position: absolute; display: block; margin-top: -28px; width: calc(100% - 24px); padding: 0 10px 10px; text-align: center; font-size: 11px; color: #FFFFFF; border-color: #FFFFFF; border-style: solid; border-width: 0 2px; background-color: rgb(242, 166, 3); box-shadow: 1px 0 0 #7f7e7e, 0 1px 0 #7f7e7e, -1px 0 0 #7f7e7e; border-radius: 0 0 12px 12px; } #copyright:before { diplay: block; content: "Design by SylakentH_"; font-size: 12px; } #copyright:after { diplay: block; content: "Edited by LastChapter."; font-size: 12px; } #copyright { position: relative; display: block; margin-top: -10px !important; padding: 2px 0 4px; font-size: 12px; color: #FFFFFF; border: solid 4px #da6358; background-color: rgb(160, 55, 60); border-radius: 16px; } #copyright a { padding-right: 2px; font-size: 14px; color: #FFFFFF; text-shadow: 1px 1px #f11c26; } /* Put your text here */ #:before { position: fixed; display: block; content: "From now on, you belong to me, as my prisoner of war! - Ellen Viltaria (Madan No Ou To Vanadis)"; right: 0; top: 0; padding-right: 4px; font-family: 'SAO'; line-height: 24px; color: #FFFFFF; font-size: 18px; letter-spacing: 1px; text-shadow: 1px 1px #000000; } @-moz-document url-prefix() { #list_surround small a:last-of-type:before { line-height: 6px; } .td1, .td2 { line-height: 14px; padding: 4px 0; } } /*Covers*/ :hover + .hide { position: fixed !important; display: block !important; left: 730px; top: 120px; width: 193px; height: 316px; background-repeat: no-repeat !important; background-size: 193px 312px !important; } :hover + .hide:after { position: fixed; display: block; content: ''; left: 730px; top: 120px; width: 193px; height: 316px; background-image: url('https://dl.dropboxusercontent.com/u/113316285/hxh/all.png'); background-size: 193px 316px; } .hide:before { background: none repeat scroll 0 0 transparent; border-radius: 15px 15px 15px 15px; color: white; content: ""; padding-bottom: 5px; position: absolute; text-align: center; top: 10px; width: 262px; } } |
Nov 28, 2014 10:04 AM
#147
| I found this list theme in my file don't remember why i made it. screenshot: http://i.imgur.com/qS49O6I.png code: @import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro"); @import url("http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/CSS/TopMenu/TopMenu.css"); @import url("http://dl.dropbox.com/u/78340470/Past%20Stuff/bottommenuimportblue.css"); Body { background-image: url("http://i.imgur.com/IRNKztF.png"); background-position: 200px 10px ! important; background-repeat: no-repeat; font-family: Source Sans Pro; padding-top: 11px; } #list_surround { left: 0px ! important; margin: auto ! important; padding-top: 532px; position: absolute ! important; right: 0px ! important; width: 700px; } #list_surround table:first-of-type td:nth-of-type(1), table:first-of-type td:nth-of-type(2), table:first-of-type td:nth-of-type(3), table:first-of-type td:nth-of-type(4), table:first-of-type td:nth-of-type(5), table:first-of-type td:nth-of-type(6) { background: #daedfb; border-radius: 11px; font-weight: lighter; text-transform: lowercase; text-shadow: 2px 3px 3px #F2FD01;} a { color: #686868; text-decoration: none; } a:visited { color: #686868; text-decoration: none; } .header_title { background-color: #daedfb; border-radius: 25px; color: #686868; font-size: 11px; height: 26px; padding-top: 15px; text-align: center; text-transform: lowercase; } .table_header { -moz-text-decoration-line: overline; font-size: 14px; font-weight: lighter; padding: 2px; text-shadow: 2px 2px 6px #F2FD01; text-transform: capitalize; } .List_LightBox { visibility: hidden; } .grand_totals { visibility: hidden ! important; } tr:hover [class^="td"] { background-color: white! important; font-style: italic; transition: all 0.4s ease 0s; } .category_totals { color: #686868; font-size: 11px; text-align: center; text-transform: lowercase; } #copyright { font-size: 10px; margin: auto ! important; text-align: center; text-transform: lowercase; } #copyright:after{ content:"Theme By thekittennx3"; } #grand_totals { visibility: hidden; } |
Dec 11, 2014 4:50 PM
#148
| About this one, I'll only say this, "Merry Christmas!" @import "https://dl.dropboxusercontent.com/u/78340470/Icon%20Style%20Menu%20Bar/pinkversion/pinkiconbar.css"; @import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css"; /* MAIN BACKGROUND The space background by default. */ body { background-attachment:fixed; background-clip:border-box; background-color: black; background-image: url(http://paulabrown.net/anime-christmas-tree-22.jpg); background-position:0 50%, 0 0; background-repeat:no-repeat no-repeat; background-size:cover; font-family:calibri; } /* SECONDARY BACKGROUND Goes behind the list but in front of the main background. Image links to a character render in the parenthesis after background. Add or remove the word "contain" (without quotations) after background-size if you want them to be fit or not fit into the entire page. */ #inlineContent { background: url() no-repeat scroll right bottom transparent; background-size: ; display: inline-block !important; height: 100%; left: 0 !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 100%; z-index: -1 !important; } /* LIST BACKGROUND COLOR, ROW HEIGHT AND FLASH Adjust the opacity and color of the list table itself with the first two sets of code, as well as the height of the rows. td1 is odd numbered rows, td2 is even. The third set of code is for the row color and opacity on height. Google RGBA color generator for easy to copy color and opacity numbers customized for you. */ .td1 { background-color:rgba(0, 0, 0, 0.5); height:65px; } .td2 { background-color:rgba(0, 0, 0, 0.5); height:65px; } tr:hover [class^="td"] { transition: .1s linear; background-color: rgba(208, 32, 144, 0.6); } /* MAGICA LOGO Background-image is the Magica logo at page top. You can move it with background position. */ #list_surround { background-attachment:scroll; background-color:transparent; background-image: url(http://i1364.photobucket.com/albums/r730/kanako78/HappyHolidays_zps1451fed8.png); background-position: -50px -40px; background-repeat:no-repeat no-repeat; font-size:100%; line-height:1; margin:0 auto; padding-bottom:10px; padding-top:320px; position:absolute; right:-4px !important; width:700px; } /* SIDE BUTTONS */ #list_surround .status_selected, #list_surround .status_not_selected { -webkit-background-clip:padding-box !important; background-clip:padding-box !important; background-color:transparent; background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/WatchingMikoto_zps4f1325ba.png); background-position:0 0; background-repeat:no-repeat no-repeat; background-size:contain; border:1px solid transparent; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; display:block; left:-300px; padding:0; position:absolute; top:20px; width:263px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/CompletedHaruhi_zps63a6de2f.png); background-position:100% 0; top:140px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/OnHoldFSN_zps38e23b51.png); background-position:0 0; top:260px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/Dropped11eyes_zpsc14e79c4.png); background-position:100% 0; top:380px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/PlantoWatchSugar_zps30676dac.png); background-position:0 0; top:500px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1364.photobucket.com/albums/r730/kanako78/AllAnimeFMA_zps2002d52e.png); background-position:100% 0; top:620px; } /* CUSTOM HEADERS */ .header_cw { background-color: transparent; background-image: url("http://i1364.photobucket.com/albums/r730/kanako78/WatchingCandyCane_zps45a5ef4a.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } .header_completed { background-color: transparent; background-image: url("http://i1364.photobucket.com/albums/r730/kanako78/CompletedCandyCane_zpse327b72b.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } .header_onhold { background-color: transparent; background-image: url("http://i1364.photobucket.com/albums/r730/kanako78/OnHoldCandyCane_zpsd9ac3a4b.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } .header_dropped { background-color: transparent; background-image: url("http://i1364.photobucket.com/albums/r730/kanako78/DroppedCandyCane_zps7d01b1ad.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } .header_ptw { background-color: transparent; background-image: url("http://i1364.photobucket.com/albums/r730/kanako78/PlantoWatchCandyCane_zps4af8747e.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } /* OTHER CODES Ask in the original topic for this layout of in my club if you need to learn more about customizing this layout. */ a { color:#FFFFFF; text-decoration:none; text-shadow:none; } a:hover { color:#fff; text-decoration:underline; } .table_header { background-color:rgba(255, 255, 255, 0.4); } .table_header:first-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:10px; border-top-right-radius:0; } .table_header:nth-of-type(2) { padding-left:35px; text-align:left; } .table_header:last-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:0; border-top-right-radius:10px; } .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border:0 none; padding:4px; text-align:center; vertical-align:top; } .table_header, .td1, .td2, .category_totals { color:white; } .borderRBL { line-height:normal !important; } [cellspacing="0"] { line-height:17px; } .category_totals { background-color:rgba(255, 255, 255, 0.4); border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:0; border-top-right-radius:0; color:white; text-align:center; } [class^="header_"] * { background-repeat:no-repeat no-repeat; font-size:0; height:200px; line-height:24px; padding-bottom:4px; text-align:right; vertical-align:bottom; } .header_title { border-bottom-left-radius:4px; border-bottom-right-radius:4px; border-top-left-radius:4px; border-top-right-radius:4px; color:#FFFFFF; display:inline-block; font-style:italic; height:auto; padding:0 8px 0 0; text-shadow:rgba(0, 0, 0, 0.14902) 0 1px 1px; } #grand_totals { background-color:transparent; border:0 none; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; color:#FFFFFF; line-height:20px; min-height:20px; padding:8px; text-align:center; vertical-align:middle; } #copyright { background-color:rgba(180, 32, 48, 0.6); border-bottom-left-radius:3px; border-bottom-right-radius:3px; border-top-left-radius:3px; border-top-right-radius:3px; color:#EEEEEE; line-height:17px; margin-top:10px; padding:8px; text-align:center; } #copyright::after { } .hide { background-color:rgba(248, 162, 200, 0.701961); background-position:50% 50%; background-repeat:no-repeat no-repeat; background-size:cover; border:1px solid #FFFFFF; border-bottom-left-radius:7px; border-bottom-right-radius:7px; border-top-left-radius:7px; border-top-right-radius:7px; display:inline-block !important; height:55px; margin-left:33px; margin-top:-65px; position:absolute; width:35px; } .hide:hover { background-color:transparent; background-repeat:no-repeat no-repeat; background-size:cover; border-bottom-left-radius:20px; border-bottom-right-radius:20px; border-top-left-radius:20px; border-top-right-radius:20px; box-shadow:rgba(63, 52, 60, 0.54902) 0 0 8px 8px; margin-left:-115px; padding-right:150px; padding-top:220px !important; position:absolute; z-index:1; } .td1:nth-of-type(2), .td2:nth-of-type(2) { padding-left:35px; text-align:left; } .td1:nth-of-type(6), .td2:nth-of-type(6) { background-attachment:scroll; background-color:transparent; background-image:none; background-position:0 0; background-repeat:repeat repeat; border-bottom-style:none !important; border-bottom-width:medium !important; display:inline-block; font-family:cursive; font-size:9pt; height:0 !important; left:70px; line-height:16px !important; margin-top:16px; position:absolute; text-align:justify !important; width:720px; z-index:2; } .table_header:nth-of-type(6) { display:none; } span[id*="tagRow"] { display:block !important; } span[id*="tagLinks"] { display:none !important; } a, .td1, .td2, .category_totals { -webkit-transition:all 0.25s ease-in-out 0s; transition:all 0.25s ease-in-out 0s; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color:transparent; display:block; font-size:0; height:113px; width:263px; } .status_selected { display:block; } .status_not_selected { display:block; } .status_not_selected { opacity:0.7; } .status_not_selected:hover { color:transparent; opacity:1; } #list_surround { left:0 !important; margin:auto !important; position:absolute !important; right:0 !important; } .animetitle { font-weight: bold;} .animetitle + small { color:#CC33FF !important; font-weight:bold; } * { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out;} .table_header:nth-last-of-type(2) { border-radius: 0 10px 0 0;} .td1:nth-of-type(6), .td2:nth-of-type(6){ background-color: transparent !important; font-family: helvetica;} td:nth-of-type(6) small { font-size: 0; color: cyan; left: 42px; position: relative; } td:nth-of-type(6) small:after { font-size: 12px !important; content: "Tags" } /* Media query for devices above 1000px */ @media all and (min-device-width:1001px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -270px;} #list_surround { left: 24% !important;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 7pt !important; width: 370px !important; padding-top: 8px;} } /* Media query for devices above 1024px */ @media all and (min-device-width:1025px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -300px;} #list_surround { left: 17% !important;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 7pt !important; width: 370px !important;} } /* Media query for devices above 1140px */ @media all and (min-device-width:1141px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -290px;} #list_surround { left: 17% !important; width: 850px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 530px !important;} } /* Media query for devices above 1280px */ @media all and (min-device-width:1281px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -330px;} #list_surround { left: 18% !important; width: 900px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 575px !important;} } /* Media query for devices above 1440px */ @media all and (min-device-width:1441px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -385px;} #list_surround { left: 17% !important; width: 960px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 635px !important;} #list_surround { background-position: center -40px;} } /* Media query for devices above 1680px */ @media all and (min-device-width:1681px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -430px;} #list_surround { left: 16% !important; width: 1050px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 720px !important;} } /* Media query for devices above 1920px */ @media all and (min-device-width:1921px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -530px;} #list_surround { left: 10% !important; width: 1100px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 770px !important;} } |
Dec 13, 2014 3:01 PM
#149
| Minimalist Kenshin samurai layout - Preview Code @import url(http://fonts.googleapis.com/css?family=Roboto+Condensed); @import url(http://pastebin.com/raw.php?i=QKaKmNrn); /* body */ body { background-color: #000000; background-image: url(http://i.imgur.com/MoKbpEd.jpg); background-attachment: fixed; background-position: right top; background-repeat: no-repeat; font-family: Roboto Condensed; font-size: 10px; letter-spacing: 1px; color: #ffffff; } /* list positioning */ #list_surround { position: left !important; padding-left: 20px !important; width: 600px; } /* // all links on your list */ a { color: #ffffff; text-decoration: none; transition: color 1s linear; } a:visited { color: #ffffff; text-decoration: none; } a:hover { color: #ffffff; text-decoration: none; } /* // row color */ .td1 { background-color: rgba(0, 0, 0, 0); padding: 6px; } .td2 { background-color: rgba(0, 0, 0, 0); padding: 6px; } /* // header */ .table_header { background-color: rgba(0, 0, 0, 0); padding: 6px; } /* // header links */ .table_headerLink { color: #ffffff; text-decoration: none; font-weight: bold; font-size: 12px; } .table_headerLink:Visited { color: #ffffff; text-decoration: none; font-weight: bold; font-size: 12px; } .table_headerLink:Hover { color: #ffffff; text-decoration: none; font-weight: bold; font-size: 12px; } /* headers: watching, completed, on-hold, dropped, plan to watch */ .header_title { font-size: 20px; color: #ffffff; font-family: GodOfWar; text-transform: uppercase; letter-spacing: 2px; padding-bottom:10px; } .category_totals { padding-top:10px; text-align: center; font-color: #ffffff; } #grand_totals { font-size: 12px; text-align: center; font-color: #ffffff; } /* top menu bar full customization (thanks to shishio-kun's tutorial) */ /* first part: "username, logout" */ #mal_cs_listinfo { } #mal_cs_listinfo a { color: #ffffff !important; text-decoration: none !important; font-size: 10px !important; font-family: Roboto Condensed !important; font-style: italic; letter-spacing: 1px; } #mal_cs_listinfo a strong { color: #ffffff !important; text-decoration: none !important; font-size: 10px !important; font-family: Roboto Condensed !important; font-style: italic; letter-spacing: 1px; } /* second part: "add to list, home, anime list, manga list" */ #mal_cs_links { } #mal_cs_links div:first-of-type a:first-of-type { color: #ffffff !important; text-decoration: none !important; font-size: 10px !important; font-family: Roboto Condensed !important; font-style: italic; letter-spacing: 1px; } #mal_cs_links div:first-of-type a:last-of-type { color: #ffffff !important; text-decoration: none !important; font-size: 10px !important; font-family: Roboto Condensed !important; font-style: italic; letter-spacing: 1px; } #mal_cs_links div:last-of-type a:first-of-type { color: #ffffff !important; text-decoration: none !important; font-size: 10px !important; font-family: Roboto Condensed !important; font-style: italic; letter-spacing: 1px; } #mal_cs_links div:last-of-type a:last-of-type { color: #ffffff !important; text-decoration: none !important; font-size: 10px !important; font-family: Roboto Condensed !important; font-style: italic; letter-spacing: 1px; } /* third part: "you are viewing your/username's list" */ #mal_cs_otherlinks { } #mal_cs_otherlinks strong { color: #ffffff !important; text-decoration: none !important; font-size: 10px !important; font-family: Roboto Condensed !important; letter-spacing: 1px; } #mal_cs_otherlinks a[href="http://myanimelist.net/history/Kiyori"] { color: #ffffff !important; text-decoration: none !important; font-size: 10px !important; font-family: Roboto Condensed !important; font-style: italic; letter-spacing: 1px; } #mal_cs_otherlinks a[href="http://myanimelist.net/forum/"] { color: #ffffff !important; text-decoration: none !important; font-size: 10px !important; font-family: Roboto Condensed !important; font-style: italic; letter-spacing: 1px; } #mal_cs_otherlinks a[href="http://myanimelist.net/panel.php?go=export"] { color: #ffffff !important; text-decoration: none !important; font-size: 10px !important; font-family: Roboto Condensed !important; font-style: italic; letter-spacing: 1px; } #mal_cs_otherlinks a[href="http://myanimelist.net/profile/Kiyori"] { color: #ffffff !important; text-decoration: none !important; font-size: 10px !important; font-family: Roboto Condensed !important; font-style: italic; letter-spacing: 1px; } #mal_cs_otherlinks a { color: #ffffff !important; text-decoration: none !important; font-size: 10px !important; font-family: Roboto Condensed !important; font-style: italic; letter-spacing: 1px; } #mal_cs_otherlinks div:last-of-type a:first-of-type { color: #ffffff !important; text-decoration: none !important; font-size: 10px !important; font-family: Roboto Condensed !important; font-style: italic; letter-spacing: 1px; } #mal_cs_otherlinks span { color: #ffffff !important; text-decoration: none !important; font-size: 10px !important; font-family: Roboto Condensed !important; font-style: italic; letter-spacing: 1px; } #mal_cs_otherlinks a[href="http://myanimelist.net/modules.php?go=faq"] { color: #ffffff !important; text-decoration: none !important; font-size: 10px !important; font-family: Roboto Condensed !important; font-style: italic; letter-spacing: 1px; } /* top menu bar full customization end */ /* do not remove this */ #copyright:before { content: "List style by blingbling@mal |"; } #copyright { padding-top: 6px; padding-bottom: 6px; text-align: center; } Mezamero horror layout - Preview Code @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; @import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css"; @import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css"; @import "http://fonts.googleapis.com/css?family=Advent+Pro"; * { text-decoration: none; } body { background-attachment: fixed; background-clip: border-box; background-color: transparent; background-image: url("http://i.imgur.com/kXXXb8t.jpg"); background-position: 24% 8%; background-repeat: no-repeat no-repeat; background-size: cover; font-family: advent; } #list_surround { background-attachment: fixed; background-position: 24% 0; background-repeat: no-repeat no-repeat; font-size: 15px; height: 25px; left: 15% !important; line-height: 1; margin: 0 auto; padding-bottom: 13px; padding-top: 133px; position: absolute; width: 700px; z-index: 0; } a { color: white; text-shadow: none; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color: #DA0000; font-weight: bold; transition: all 0.4s ease 0s; } a:hover { color: #DA0000; text-shadow: 0 1px rgba(255, 0, 0, 0.0); } .table_header { } .table_header:first-of-type { border-radius: 20px 0 0 0; } .table_header:nth-of-type(2) { text-align: left; } .table_header:nth-of-type(5) { border-bottom-right-radius: 0; border-top-left-radius: 0; border-top-right-radius: 20px; } .table_header, .category_totals { background-color: #000000; border: 0 none; opacity: 1; padding: 4px; text-align: center; vertical-align: top; } .td1, .td2 { background-image: url("http://i.imgur.com/F3fON31.jpg"); padding: 4px; } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align: left; } .table_header:nth-of-type(6) { display: none; width: 0; } small { color: #DA0000; font-weight: bold; } .table_header, .td1, .td2, .category_totals { color: grey; } .borderRBL { line-height: normal !important; } [cellspacing="0"] { line-height: 18px; } .category_totals { background-color: black; border-radius: 0 0 12px 12px; text-align: center; } .category_totals:hover { background-color: #DA0000; color: #ffffff; } [class^="header_"] * { background-repeat: no-repeat no-repeat; font-size: 0; height: 80px; line-height: 80px; padding-bottom: 0px; text-align: right; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; color: #DA0000; display: inline-block; font-style: italic; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } #grand_totals { background-color: #DA0000; border: 0 none; border-radius: 3px 3px 3px 3px; color: white; line-height: 20px; min-height: 20px; padding: 8px; text-align: center; vertical-align: middle; } .status_not_selected { opacity: 0.7; right: -183px !important; transition: all 0.4s ease 0s; } .status_not_selected:hover { color: transparent; opacity: 1; right: 3px !important; transition: all 0.4s ease 0s; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color: transparent; display: block; height: 100px; opacity: 0; width: 271px; } .status_selected { display: block; } .status_not_selected { display: block; } .header_cw { background-color: transparent; background-image: url("http://i.imgur.com/faCge42.png"); background-position: 0% 0; background-repeat: no-repeat no-repeat; height: 30px; } .header_completed { background-color: transparent; background-image: url("http://i.imgur.com/Esghy96.png"); background-position: 0% 0; background-repeat: no-repeat no-repeat; height: 30px; } .header_onhold { background-color: transparent; background-image: url("http://i.imgur.com/pREJO1j.png"); background-position: 0% 0; background-repeat: no-repeat no-repeat; height: 30px; } .header_dropped { background-color: transparent; background-image: url("http://i.imgur.com/mM7OrOw.png"); background-position: 0% 0; background-repeat: no-repeat no-repeat; height: 30px; } .header_ptw { background-color: transparent; background-image: url("http://i.imgur.com/UfhU1SG.png"); background-position: 0% 0; background-repeat: no-repeat no-repeat; height: 30px; } #list_surround .status_selected, #list_surround .status_not_selected { background-attachment: scroll; background-color: black; background-image: url("http://i.imgur.com/5n1vlop.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; border: 2px solid black !important; border-radius: 20px 0 0 0; display: block; height: 83px; padding: 0; position: fixed; right: 3px; top: 96px; width:300px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-attachment: scroll; background-color: black; background-image: url("http://i.imgur.com/D6605N8.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; border-top-left-radius: 0; border-top-right-radius: 0; top: 183px; width:300px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background-attachment: scroll; background-color: black; background-image: url("http://i.imgur.com/5eCvvUx.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; top: 270px; width:300px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-attachment: scroll; background-color: black; background-image: url("http://i.imgur.com/B8h6Mno.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; top: 357px; width:300px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-attachment: scroll; background-color: black; background-image: url("http://i.imgur.com/BUpwlUb.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; top: 444px; width: 300px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-attachment: scroll; background-color: black; background-image: url("http://i.imgur.com/B4DgB2E.png"); background-position: 0 0; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 20px !important; top: 531px; } .td1:nth-of-type(6), .td2:nth-of-type(6) { background-color: #DA0000 !important; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; display: none; height: auto; left: 0; padding: 12px 17px 16px 23px; position: fixed; top: 462px; width: 184px; z-index: 1; I wouldn't call either finished. Both could be improved a little, e.g. the annoying brighter white text in the Kenshin one and the top bar in the Mezamero one. But hopefully someone will like these. Also, props to whoever made the original list layouts. The Mezamero one I tweaked from a Mushishi list design which was donated (called 50 Shades of Brown, I think) and the Kenshin one I tweaked from a Blue Exorcist list design. |
removed-userDec 17, 2014 10:52 AM
Dec 28, 2014 7:04 AM
#150
| This is a customization of magica girl with detective conan Preview: http://i1283.photobucket.com/albums/a544/kiotsuga/previewmal_zps2da8ab1a.png Enjoy Code: */ /* MAIN BACKGROUND The space background by default. */ body { background-attachment:fixed; background-clip:border-box; background-color: black; background-image: url(http://i1283.photobucket.com/albums/a544/kiotsuga/goputin_zps2ef0aa4a.jpg); background-position:0 0%, 0 0; background-repeat:no-repeat no-repeat; background-size:cover; font-family:calibri } /* SECONDARY BACKGROUND Goes behind the list but in front of the main background. Image links to a character render in the parenthesis after background. Add or remove the word "contain" (without quotations) after background-size if you want them to be fit or not fit into the entire page. */ #inlineContent { background: url() no-repeat scroll right bottom transparent; background-size: ; display: inline-block !important; height: 100%; left: 0 !important; margin: auto !important; position: fixed !important; right: 0 !important; top: 0 !important; width: 100%; z-index: -1 !important; } /* LIST BACKGROUND COLOR, ROW HEIGHT AND FLASH Adjust the opacity and color of the list itself with the first two sets of code, as well as the height of the rows. td1 is odd numbered rows, td2 is even. The third set of code is for the row color and opacity on height. Google RGBA color generator for easy to copy color and opacity numbers customized for you. */ .td1 { background-color:rgba(0, 0, 0, 0.5); height:65px; } .td2 { background-color:rgba(0, 0, 0, 0.5); height:65px; } tr:hover [class^="td"] { transition: .1s linear; background-color: rgba(208, 32, 144, 0.6); } /* MAGICA LOGO Background-image is the Magica logo at page top. You can move it with background position. */ #list_surround { background-attachment:scroll; background-color:transparent; background-image: url(http://i1283.photobucket.com/albums/a544/kiotsuga/bbb_zpsfc3578ab.png); background-position: 120px 0px; background-repeat:no-repeat no-repeat; font-size:100%; line-height:1; margin:0 auto; padding-bottom:10px; padding-top:320px; position:absolute; right:-4px !important; width:700px; } /* SIDE BUTTONS */ #list_surround .status_selected, #list_surround .status_not_selected { -webkit-background-clip:padding-box !important; background-clip:padding-box !important; background-color:transparent; background-image:url(http://i1283.photobucket.com/albums/a544/kiotsuga/image1_zps7dd2c1fa.png); background-position:0 0; background-repeat:no-repeat no-repeat; background-size:contain; border:1px solid transparent; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; display:block; left:-300px; padding:0; position:absolute; top:20px; width:263px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-image:url(http://i1283.photobucket.com/albums/a544/kiotsuga/secondcompleted_zps5cc0bb5a.png); background-position:100% 0; top:140px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1283.photobucket.com/albums/a544/kiotsuga/troisiemecomplete_zps47690fc1.png); background-position:0 0; top:260px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1283.photobucket.com/albums/a544/kiotsuga/4emefini_zpsba161405.png); background-position:100% 0; top:380px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1283.photobucket.com/albums/a544/kiotsuga/5emefini_zpscf3aa82e.png); background-position:0 0; top:500px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-image:url(http://i1283.photobucket.com/albums/a544/kiotsuga/6emefini_zps2ad9d87e.png); background-position:100% 0; top:620px; } /* CUSTOM HEADERS */ .header_cw { background-color: transparent; background-image: url("http://i.imgur.com/mWK77Ng.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } .header_completed { background-color: transparent; background-image: url("http://i.imgur.com/wF8MQkE.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } .header_onhold { background-color: transparent; background-image: url("http://i.imgur.com/ZWprtND.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } .header_dropped { background-color: transparent; background-image: url("http://i.imgur.com/3ve4Yod.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } .header_ptw { background-color: transparent; background-image: url("http://i.imgur.com/zRGEVZy.png"); background-position: 50% 150px; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; margin-top: -200px; } /* TOP COLORS The colors for the top text (#, anime title, score, etc) and the panel iteself. */ .table_header { background-color: rgba(255, 225, 255, 0.4); } .table_header, .table_header a{ color: white; } /* LIST FONT COLOR */ .td1, .td2, .category_totals { color:white; } /* OTHER CODES Ask in the original topic for this layout of in my club if you need to learn more about customizing this layout. */ a { color:#FFFFFF; text-decoration:none; text-shadow:none; } a:hover { color:#fff; text-decoration:underline; } .table_header:first-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:10px; border-top-right-radius:0; } .table_header:nth-of-type(2) { padding-left:35px; text-align:left; } .table_header:last-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:0; border-top-right-radius:10px; } .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border:0 none; padding:4px; text-align:center; vertical-align:top; } .borderRBL { line-height:normal !important; } [cellspacing="0"] { line-height:17px; } .category_totals { background-color:rgba(255, 255, 255, 0.4); border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:0; border-top-right-radius:0; color:white; text-align:center; } [class^="header_"] * { background-repeat:no-repeat no-repeat; font-size:0; height:200px; line-height:24px; padding-bottom:4px; text-align:right; vertical-align:bottom; } .header_title { border-bottom-left-radius:4px; border-bottom-right-radius:4px; border-top-left-radius:4px; border-top-right-radius:4px; color:#FFFFFF; display:inline-block; font-style:italic; height:auto; padding:0 8px 0 0; text-shadow:rgba(0, 0, 0, 0.14902) 0 1px 1px; } #grand_totals { background-color:transparent; border:0 none; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; color:#FFFFFF; line-height:20px; min-height:20px; padding:8px; text-align:center; vertical-align:middle; } #copyright { background-color:rgba(180, 32, 48, 0.6); border-bottom-left-radius:3px; border-bottom-right-radius:3px; border-top-left-radius:3px; border-top-right-radius:3px; color:#EEEEEE; line-height:17px; margin-top:10px; padding:8px; text-align:center; } #copyright::after { } .hide { background-color:rgba(248, 162, 200, 0.701961); background-position:50% 50%; background-repeat:no-repeat no-repeat; background-size:cover; border:1px solid #FFFFFF; border-bottom-left-radius:7px; border-bottom-right-radius:7px; border-top-left-radius:7px; border-top-right-radius:0; display:inline-block !important; height:55px; margin-left:33px; margin-top:-65px; position:absolute; width:35px; } .hide:hover { background-color:transparent; background-repeat:no-repeat no-repeat; background-size:cover; border-bottom-left-radius:20px; border-bottom-right-radius:20px; border-top-left-radius:20px; border-top-right-radius:20px; box-shadow:rgba(63, 52, 60, 0.54902) 0 0 8px 8px; margin-left:-140px; padding-right:150px; padding-top:220px !important; position:absolute; z-index:1; } .hide:hover:after { background: transparent; content: " "; height: 75px; left: 0; position: absolute; top: 0; width: 210px; z-index: 20; } .td1:nth-of-type(2), .td2:nth-of-type(2) { padding-left:35px; text-align:left; } .td1:nth-of-type(6), .td2:nth-of-type(6) { background-attachment:scroll; background-color:transparent; background-image:none; background-position:0 0; background-repeat:repeat repeat; border-bottom-style:none !important; border-bottom-width:medium !important; display:inline-block; font-family:cursive; font-size:9pt; height:0 !important; left:70px; line-height:16px !important; margin-top:16px; position:absolute; text-align:justify !important; width:720px; z-index:2; } .table_header:nth-of-type(6) { display:none; } span[id*="tagRow"] { display:block !important; } span[id*="tagLinks"] { display:none !important; } a, .td1, .td2, .category_totals { -webkit-transition:all 0.25s ease-in-out 0s; transition:all 0.25s ease-in-out 0s; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color:transparent; display:block; font-size:0; height:113px; width:263px; } .status_selected { display:block; } .status_not_selected { display:block; } .status_not_selected { opacity:0.7; } .status_not_selected:hover { color:transparent; opacity:1; } #list_surround { left:0 !important; margin:auto !important; position:absolute !important; right:0 !important; } .animetitle { font-weight: bold;} .animetitle + small { color:#CC33FF !important; font-weight:bold; } * { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out;} .table_header:nth-last-of-type(2) { border-radius: 0 10px 0 0;} .td1:nth-of-type(6), .td2:nth-of-type(6){ background-color: transparent !important; font-family: helvetica;} td:nth-of-type(6) small { font-size: 0; color: cyan; left: 42px; position: relative; } td:nth-of-type(6) small:after { font-size: 12px !important; content: "Tags" } @media screen and (-webkit-min-device-pixel-ratio:0) { .td1:nth-of-type(2), .td2:nth-of-type(2){ width: 73% !important; } .animetitle { padding-left: 5px; } } /* Media query for devices above 1000px */ @media all and (min-device-width:1001px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -270px;} #list_surround { left: 24% !important;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 7pt !important; width: 370px !important; padding-top: 8px;} } /* Media query for devices above 1024px */ @media all and (min-device-width:1025px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -300px;} #list_surround { left: 17% !important;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 7pt !important; width: 370px !important;} } /* Media query for devices above 1140px */ @media all and (min-device-width:1141px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -290px;} #list_surround { left: 17% !important; width: 850px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 530px !important;} } /* Media query for devices above 1280px */ @media all and (min-device-width:1281px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -330px;} #list_surround { left: 18% !important; width: 900px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 575px !important;} } /* Media query for devices above 1440px */ @media all and (min-device-width:1441px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -385px;} #list_surround { left: 17% !important; width: 960px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 635px !important;} #list_surround { background-position: center -40px;} } /* Media query for devices above 1680px */ @media all and (min-device-width:1681px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -430px;} #list_surround { left: 16% !important; width: 1050px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 720px !important;} } /* Media query for devices above 1920px */ @media all and (min-device-width:1921px) { #list_surround .status_selected, #list_surround .status_not_selected { left: -530px;} #list_surround { left: 10% !important; width: 1100px;} .td1:nth-of-type(6), .td2:nth-of-type(6) { font-size: 9pt !important; width: 770px !important;} } |
  |
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 |
7862 |
by Pokitaru
»»
2 hours ago |
|
Sticky: » [ USERSTYLES & DARK THEMES ] All MyAnimeList themesShishio-kun - Jan 28, 2023 |
16 |
by Shishio-kun
»»
8 hours ago |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1222 |
by laBelphe
»»
Sep 20, 3:16 PM |
|
» [CLASSIC CSS] ⭐️Space Layout by nblur/U531355 ✨RESTORED AND UPSCALED✨Shishio-kun - Nov 17, 2023 |
7 |
by Recon911
»»
Sep 20, 4:43 AM |
|
» ✳️[NEWSLETTER] Any Broken Layouts? + Restored Designs so far + Frozen GIF Fix ( 1 2 )Shishio-kun - Nov 15, 2023 |
58 |
by AholePony
»»
Sep 19, 10:47 AM |