New
Dec 30, 2015 12:08 AM
#3401
Hi, is it possible to add a music video with the embed code on your profile that is not host on youtube? Youtube has been sh:t over the past years and multiple official video clips have been removed. Also, unrelated, Aria the animation cover is missing on my anime list, any idea what I should be doing for it to display again? |
betterthansaladDec 30, 2015 12:12 AM
Dec 30, 2015 2:07 AM
#3402
betterthansalad said: as far as I know the answer to the first question is no. The second one is due to it not being included in your cuss, you can fix this by following shishio's tutorial on generating cover-CSSHi, is it possible to add a music video with the embed code on your profile that is not host on youtube? Youtube has been sh:t over the past years and multiple official video clips have been removed. Also, unrelated, Aria the animation cover is missing on my anime list, any idea what I should be doing for it to display again? |
Dec 30, 2015 5:12 AM
#3403
I have a few questions: 1. In my current list layout (Manga and anime lists are designed to be identical) I'm having trouble with the copyright section. It keeps trying to cover the grand totals. If I move it down via "margin" it affects all of the pages 10 px works without the grand totals and 50px works with them. 2. Another problem with the copyright is when it enlarges due to hover the it get's cut off I want it to bump the page up slightly so it's not cut off. 3. Since I used SylakentH's Nisekoi Manga List as a base but changed it up I was wondering if I could change "Design by SylakentH, thanks to DeviantArt!" to "Original design by SylakentH, edited by Aoi_Yui, thanks to DeviantArt!" That way I give him credit for the base but not the part I did. 4. Also for the category links I want to place characters from Sakura Trick in place of Nisekoi but the image used cant be edited properly. Are there any circular category link codes that I can substitute images in. I don't care about the colors as long as I can edit them. Thank's in advance. EDIT:Update 1. grand totals are good 2. copyright is still giving me trouble 3. just gunna leave it 4. I got the links replace though it looks sloppy |
Aoi_YuiDec 31, 2015 4:46 AM
Dec 30, 2015 5:47 AM
#3404
Aoi_Yui said: 1. remove I have a few questions: 1. In my current list layout (Manga and anime lists are designed to be identical) I'm having trouble with the copyright section. It keeps trying to cover the grand totals. If I move it down via "margin" it affects all of the pages 10 px works without the grand totals and 50px works with them. 2. Another problem with the copyright is when it enlarges due to hover the it get's cut off I want it to bump the page up slightly so it's not cut off. 3. Since I used SylakentH's Nisekoi Manga List as a base but changed it up I was wondering if I could change "Design by SylakentH, thanks to DeviantArt!" to "Original design by SylakentH, edited by Aoi_Yui, thanks to DeviantArt!" That way I give him credit for the base but not the part I did. 4. Also for the category links I want to place characters from Sakura Trick in place of Nisekoi but the image used cant be edited properly. Are there any circular category link codes that I can substitute images in. I don't care about the colors as long as I can edit them. Thank's in advance. position: absolute; 2. It isn't really cut of, it's simply that you have to scroll down to see the rest. will try to look into that 3.change the content line #copyright:after { content: "Design by SylakentH, thanks to DeviantArt!"; font-size: 12px; color: #85D1E9; } 4. don't think any such codes are available at the moment, but you could make some of your own with the "borde-radius" property EDIT: after looking into #2 I think the easiest way to do this is to make the copyright section expand upwards over the list rather than bumping the list. This because to actually 'bump' the list you would, as far as I know, have to give the .listsurround a negative top margin and I don't know how to do that only when you hover the copyright. |
Pico-tanDec 30, 2015 6:15 AM
Dec 30, 2015 9:16 AM
#3405
What is the maximum width of the profile? |
Dec 30, 2015 9:44 AM
#3406
Dec 30, 2015 10:07 AM
#3407
Aoi_Yui said: It's 800 x 1000. Pictures at 800 width are resized to 798, and longer than 1000 gives you the spoiler at the bottom._Kaneki said: What is the maximum width of the profile? There is not really a maximum width as long as you use BB code. However it gets cut off at a certain point. There is a maximum that is allowed which is 600x140 I believe. |
Dec 30, 2015 4:54 PM
#3408
Doomcat55 said: Aoi_Yui said: It's 800 x 1000. Pictures at 800 width are resized to 798, and longer than 1000 gives you the spoiler at the bottom._Kaneki said: What is the maximum width of the profile? There is not really a maximum width as long as you use BB code. However it gets cut off at a certain point. There is a maximum that is allowed which is 600x140 I believe. Your probably right I was thinking signature not profile, so i'm definitely wrong. Disregard my post |
Dec 31, 2015 1:17 AM
#3409
Hello everyone ! Is it possible to put one theme for each category in my anime list? Not only the background but everything, Example : With this theme http://hlcss.ml/, can i use the Mirai Nikki theme for the category : Plan To Watch, the K-on! theme for the categroy On-Hold, the Guilty Crown theme for the category Complet ... Ty for the wanswers ! |
Dec 31, 2015 5:46 AM
#3410
Macwaw said: Working on it at the moment, have been able to randomize the themes but not set specifics as of yet.Hello everyone ! Is it possible to put one theme for each category in my anime list? Not only the background but everything, Example : With this theme http://hlcss.ml/, can i use the Mirai Nikki theme for the category : Plan To Watch, the K-on! theme for the categroy On-Hold, the Guilty Crown theme for the category Complet ... Ty for the wanswers ! edit: found as many times before that it is not possible, I really should stop getting my hopes up ^^ Aoi_Yui said: Thought I was rather clear on the copyright part. Find that part of the code that i showed you earlier and change what comes after content to your liking. The already existing text should give you a good idea of how and what to change.- The Code - Manga list - Anime List I have a couple more questions. 1. So at some point prior to recoloring the top menu, I lost the border and even thought it's set to five pixels and is white it wont show up. 2. Also I want to use the same code but make it so the manga covers import for the manga list and the anime civrs import for the anime list. Is that possible? If so how? Thanks in Advance. Edit: Update I found at that it's not possible to import things separately based on what kind of list it is so I just imported he top bar. Hopefully that works. End Edit: Edit 2: New Question I did not really get a definitive answer before, so I'll reword it. My current list is basically a re-skin of SylakentH's Nisekoi Manga List I wanted to change the copyright from "Design by SylakentH, thanks to DeviantArt!" to "Original design by SylakentH, edited by Aoi_Yui, thanks to DeviantArt! Original Images by Various Artists" End Edit 2: Edit 3: Typo corrections |
Pico-tanDec 31, 2015 5:50 AM
Jan 2, 2016 5:48 AM
#3411
Hi.I have trouble with my category links,i trying to make the plan to watch and all anime equal as the others.Can anyone help me? |
Jan 2, 2016 10:09 PM
#3412
Can you control the #copyright on "All Anime" separately from all the other #copyright on other categories (like dropped, etc...)? |
Jan 2, 2016 10:38 PM
#3413
Jan 2, 2016 11:41 PM
#3414
Doomcat55 said: FromZeroToZero said: Yeah, with this selector:Can you control the #copyright on "All Anime" separately from all the other #copyright on other categories (like dropped, etc...)? .header_dropped ~ .header_ptw ~ #copyright {} That worked but not quite. Ptw controls "All anime" and "Planning", so since #copyright is a bit lower in "All anime" than "planning" it results in this |
Jan 2, 2016 11:54 PM
#3415
Jan 3, 2016 12:07 AM
#3416
Doomcat55 said: @From What did you try to do? That looks more like a position problem than a selector error. Also, ptw is planning only. That selector should target #copyright when both dropped and ptw come before it - i.e. only in All Anime. It's all working right now because there was something wrong with what I copied from you lol, thanks a lot! |
Jan 3, 2016 4:46 AM
#3417
I wanted to learn how to change the position of sort options to place them anywhere on the list. Would you care to create a section for this in your list tutorials? |
phi10sopherJan 3, 2016 4:56 AM
Jan 3, 2016 2:24 PM
#3418
I have a problem, the CSS I've been using got borked (just noticed) and I don't know what is the fault trigger. I've used Tinypic for all the images, so should be fine, something else is going on with the actual framework of the list maybe? http://myanimelist.net/animelist/Red_Tuesday |
Jan 3, 2016 2:42 PM
#3419
Red_Tuesday said: fixed:I have a problem, the CSS I've been using got borked (just noticed) and I don't know what is the fault trigger. I've used Tinypic for all the images, so should be fine, something else is going on with the actual framework of the list maybe? http://myanimelist.net/animelist/Red_Tuesday /* Math part of the layout, don't change unless you know what you're doing */ @import 'https://cdn.rawgit.com/VeriTi/cfc167199f0e60518c4c/raw/5108a26ded514663b042591b3a97f1c8f7f5567e/alpha_geometry.css'; @import 'https://cdn.rawgit.com/VeriTi/060b14917bfd586af951/raw/5cbe2d300c3bc1f269277a7d3f117b6cf8f4b3dd/alpha_topbar_redux.css'; @import "https://dl.dropbox.com/u/78340470/MahouLayoutCSS/MahouCSS.css"; /* Top bar */ @import "https://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css"; body{ /* Set up a background image: */ background-image: url("http://files.enjin.com/60394/i/ml/hh1200p.jpg"); /* Set up a point of transformation. This is the point * of image that should always be at the top and * preserve it's location at these offsets. * If you don't understand how it works, 50% 50% should * be ok in most cases. Default: point to Okabe's face. */ background-position: 60% 18%; /* Set up fonts you want to use and preferred basic size. * It will look for the first font at the list, then for * the second, etc. The last parameter describes a generic * font family, which will be used if none of the fonts are * on the user PC. The size can be also set using keywords * like xx-small, google for font-size if you want more info */ font-family: 'Calibri', 'Segoe UI', 'Century Gothic', sans-serif; font-size: 13px; } /*LIST HOVER COLOR This configures the look of the part with sort links: * the border and the background. * Colors are in rgba format which means first three values * define a color in Red-Green-Blue mode and the last one * sets up an opacity of the color: rgba(R,G,B,a) * Use color picker in Photoshop (or other image editor), * Opera Dragonfly or Rainbow Firefox extension to get desired * RGB values and then play with opacity until you get what you * wanted. */ tr:hover [class^=td] { background-color: rgba(189, 83, 25, 0.9) !important; } .table_header{ background-color: rgba(0,0,0,0.4); border-color: rgba(255,255,255,0.25); } .table_header, .table_headerLink{ /* Color of the sort links. I used short hex notation here but * you may use whatever you want, rgb, rgba or full-hex. This * won't be mentioned below, the way to change colors is the same */ color: #FFF; /* Remove the following line if you want links to be underlined */ text-decoration: none; } .table_headerLink:hover{ /* This configures a light white glow on hovered links * Changing colors should be enough here so I'll leave it for you. * It's the same rgba we've encountered. */ text-shadow: rgba(255,255,255,0.4) -1px -1px 3px, rgba(255,255,255,0.4) 1px 1px 3px; } /* The look of the rest of the * Configures background, border and text color for non-links * I made it a bit more opaque than sorting headers */ .td1, .td2{ background-color: rgba(0,0,0,0.6); border-color: rgba(255,255,255,0.25); color: #FFF; } /* This is for the links in the rest of the */ .td1 a, .td2 a{ text-decoration: none; /* Removes underline for these */ color: #ffc700; /* Paints links orange */ } /* Glow effect on link hover. The same text-shadow property */ .td1 a:hover, .td2 a:hover{ text-shadow: #9d9d31 -1px -1px 3px, #9d9d31 1px 1px 3px; } /* This makes all text ins bold except for Edit - More */ #list_surround td[class^=td]:first-child, #list_surround td[class^=td]:nth-child(n+3), .animetitle{font-weight:bold} /* CSS sprite for Currently Watching, Completed, Dropped, etc... * Note there is only one image used for all headers. I've made an * own version: * or you can make one yourself. It's not that difficult. */ .header_title{ background-image: url("http://i61.tinypic.com/1075sue.png"); } /* Block displaying category totals * It's redesigned to be the part of the layout * and you've already encountered all the properties here * so it won't be hard for you to customise this. * Note that a different shadow colors used for glow effect */ .category_totals{ background-color: rgba(0,0,0,0.5); border-color: rgba(255,255,255,0.25); color: #fff; font-weight: bold; text-shadow: orange 1px 1px 2px,cyan -1px -1px 2px; } /* Text displaying global totals */ #grand_totals{ color: #fff; font-size: larger; font-weight: bold; text-shadow: #c51 -1px -1px 3px, #c51 1px 1px 3px, #c51 1px -1px 4px, #c51 -1px 1px 3px; /* The following line makes it ALL-CAPS */ text-transform: uppercase; } /* Modifying copyright section. It's designed to look similar * to the whole layout, ok? */ #copyright{ background-color: rgba(0,0,0,0.6); border-color: rgba(255,255,255,0.25); } #copyright:after { content: " Custom CSS by Veriti. Original background edit by Shishio-kun. Final background edit and headers by Red_Tuesday."; } /* Modifying the text color in copyright section */ #copyright, #copyright a{ color: #FFF; } /* Configures a CSS sprite for the bar at the bottom */ .status_not_selected a, .status_selected a{ background-image: url('http://i.imgur.com/rSgqF.png'); } /*FIX FOR END OF 2015*/ /* ---------- BACKGROUND & GLOBAL TEXT STYLING ---------- */ body{ background-repeat: no-repeat; background-position: 60% 18%; background-attachment: fixed; background-color: black; background-size: cover; color: #000; font-family: 'Segoe UI', 'Century Gothic', sans-serif; font-size: 11px; -moz-background-size: cover; } /* ---------- BLOCK SURROUNDING LIST ---------- */ #list_surround{ margin: -25px auto 0; width: 950px; } /* ---------- LAYOUT ---------- */ /* header & sort links */ .table_header{ background-color: rgba(0,0,0,0.4); border-bottom: 0px !important; border-color: rgba(255,255,255,0.25); border-style: solid; border-width: 1px 1px 0px 0px; color: #FFF; padding: 2px; } .table_headerLink{ color: #FFF; text-decoration: none; } .table_headerLink:visited{ color: #FFF; } .table_headerLink:hover{ text-shadow: rgba(255,255,255,0.4) -1px -1px 3px, rgba(255,255,255,0.4) 1px 1px 3px; } /* List body content (anime titles) */ .td1, .td2{ background-color: rgba(0,0,0,0.6); border-color: rgba(255,255,255,0.25); border-style: solid; border-width: 1px 1px 0 0; color: #FFF; padding: 2px; } /* Links in titles */ .td1 a, .td2 a{ color: #ffc700; text-decoration: none; } /* Glow effect on link hover */ .td1 a:hover, .td2 a:hover{ text-shadow: #9d9d31 -1px -1px 3px, #9d9d31 1px 1px 3px; } /* Highlighting hovered row */ t\d{ -o-transition: background-color .2s linear; -moz-transition: background-color .2s linear; -webkit-transition: background-color .2s linear; transition: background-color .2s linear; } /* Brackets for small text like 'rewatching' or 'airing' */ .td1 small:before, .td2 small:before{ content:'('; } .td1 small:after, .td2 small:after{ content:')'; } /* This makes all text in list body bold except for Edit - More */ #list_surround td[class^='td']:first-child, #list_surround td[class^='td']:nth-child(n+3), .animetitle{font-weight:bold} .borderRBL{ border-width: 1px 1px 0 36px !important; } /* Header image for Currently Watching, Completed, Dropped, etc... */ .header_title{ color: transparent; content: none; height: 60px; margin-bottom: 5px; margin-left: auto; margin-right: auto; margin-top: 25px; width: 520px; } .header_cw di\v{ background-position: 0px 0px; } .header_completed di\v{ background-position: 0px -60px; } .header_onhold di\v{ background-position: 0px -120px; } .header_dropped di\v{ background-position: 0px -240px; } .header_ptw di\v{ background-position: 0px -180px; } /* Block displaying category totals */ .category_totals{ background-color: rgba(0,0,0,0.5); border: solid 1px rgba(255,255,255,0.25); color: #fff; font-weight: bold; padding-left: 37px !important; padding: 2px; text-shadow: orange 1px 1px 2px,cyan -1px -1px 2px; } /* Text displaying global totals */ #grand_totals{ color: #fff; display: block; font-size: larger; font-weight: bold; padding: 5px; text-align: center; text-shadow: #c51 -1px -1px 3px, #c51 1px 1px 3px, #c51 1px -1px 4px, #c51 -1px 1px 3px; text-transform: uppercase; } /* Modifying copyright section */ #copyright{ background-color: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.25); color: white; margin-bottom: 40px; padding: 2px; } #copyright a{color: #FFF} #copyright br{display:none} /* ---------- BAR AT BOTTOM ---------- */ /* Setting a position */ #list_surround tab\le:first-of-type { bottom: 0; margin-left: -25px; position: fixed; width: 1000px; z-index: 1 !important; } /* Setting elements to display pure image */ #list_surround tab\le:first-of-type t\d { background-color: transparent; border-width: 0 !important; } .status_not_selected, .status_selected{ border-width: 0 !important; padding: 0 !important; width: auto !important; } .status_not_selected a, .status_selected a{ color: transparent !important; content: none; display: block; height: 30px; width: 150px; } /* Override size for wider parts */ .status_not_selected a[href*="status=1"],.status_selected a[href*="status=1"],.status_not_selected a[href*="status=7"], .status_selected a[href*="status=7"]{ width: 200px; } /* Currently watching */ .status_not_selected a[href*="status=1"]{background-position: 0px 0px} .status_not_selected a[href*="status=1"]:hover{background-position: 0px 30px} .status_not_selected a[href*="status=1"]:active, .status_selected a[href*="status=1"]{background-position: 0px 60px} /* Completed */ .status_not_selected a[href*="status=2"]{background-position: -200px 0px} .status_not_selected a[href*="status=2"]:hover{background-position: -200px 30px} .status_not_selected a[href*="status=2"]:active, .status_selected a[href*="status=2"]{background-position: -200px 60px} /* On Hold */ .status_not_selected a[href*="status=3"]{background-position: -350px 0px} .status_not_selected a[href*="status=3"]:hover{background-position: -350px 30px} .status_not_selected a[href*="status=3"]:active, .status_selected a[href*="status=3"]{background-position: -350px 60px} /* Dropped */ .status_not_selected a[href*="status=4"]{background-position: -500px 0px} .status_not_selected a[href*="status=4"]:hover{background-position: -500px 30px} .status_not_selected a[href*="status=4"]:active, .status_selected a[href*="status=4"]{background-position: -500px 60px} /* Plan to watch */ .status_not_selected a[href*="status=6"]{background-position: -650px 0px} .status_not_selected a[href*="status=6"]:hover{background-position: -650px 30px} .status_not_selected a[href*="status=6"]:active, .status_selected a[href*="status=6"]{background-position: -650px 60px} /* All Anime */ .status_not_selected a[href*="status=7"]{background-position: -800px 0px} .status_not_selected a[href*="status=7"]:hover{background-position: -800px 30px} .status_not_selected a[href*="status=7"]:active, .status_selected a[href*="status=7"]{background-position: -800px 60px} .status_not_selected a, .status_selected a{ background-image: url('http://i.imgur.com/rSgqF.png'); } /* TOP BAR SETTINGS the numbers in parenthesis change the color and opacity of the bar. Get a color number easily from this page: http://www.css3maker.com/css-3-rgba.html Change position to absolute to make the bar not scroll with the page. Change the background image out with the url in parenthesis. */ #mal\_control\_strip { background-color: rgba(1,1,1,.5) !important; background-image: url('http://i.imgur.com/hzPJrg4.png') !important; position:fixed; } /* OTHER CODES */ #mal\_control\_strip { background-position: bottom !important; top: -16px; height: 1px !important;} #mal\_control\_strip di\v {display:inline} #mal\_cs\_pic img {height: 24px !important; width: auto !important} #mal\_cs\_listinfo { width: 26% !important; height: 0 !important; padding-bottom: 18px !important; padding-top: 27px !important; background: ; position: absolute; top:-5px; border-right-color: rgba(0,0,0,0.8) !important;} #mal\_cs\_listinfo div:first-of-type:before {content:'Logged in as '} #mal\_cs\_listinfo div:last-of-type a {text-decoration: none} #mal\_cs\_listinfo div:last-of-type a:hover {text-decoration: underline} #mal\_cs\_listinfo div:last-of-type:before {font-weight:normal;content:'('} #mal\_cs\_listinfo div:last-of-type:after {font-weight:normal;content:')'} #mal\_cs\_links { width: 92px !important; height: 0 !important; padding-bottom: 20px !important; padding-top: 27px !important; left: 28%; top: -7px; position: absolute; border-right-color: rgba(0,0,0,0.8) !important;} #mal\_cs\_links a {background-image: url('http://i.imgur.com/PAEW4Q8.png') !important;width:16px;height:16px;content:none; display: inline-block !important;color: transparent !important; letter-spacing: -1ex;font-size:xx-small} #mal\_cs\_links div:first-of-type:after {content: '\a0'} #mal\_cs\_links div:first-of-type a:first-of-type {background-position: 0px 0px} #mal\_cs\_links div:first-of-type a:last-of-type {background-position: -16px 0px} #mal\_cs\_links div:last-of-type a:first-of-type {background-position:-32px 0px} #mal\_cs\_links div:last-of-type a:last-of-type {background-position:-48px 0px} #mal\_cs\_otherlinks strong{ width: 25% !important; height: 0 !important; padding-bottom: 20px !important; padding-top: 27px !important; left:28%; margin-left: 130px; top: -5px; position: absolute; border-right-color: rgba(0,0,0,0.8) !important;} #mal\_cs\_otherlinks div:last-of-type {float:right;padding-right:150px; margin-top: 19px;} #mal\_cs\_otherlinks div:first-of-type {float:left} #mal\_cs\_powered img {display:none} #searchBox {margin-top: 15px !important; width: 135px !important} #mal\_control\_strip img { margin-top: 15px !important; } #mal\_cs\_links a {background-image: url('http://i.imgur.com/PAEW4Q8.png') !important;} form[action*="logout"] { display: inline; } /* upd 1th March 2012*/ /* upd 20th December 2012 import links rehosted, images rehosted*/ |
Jan 3, 2016 5:03 PM
#3420
BL__NK said: You're better off asking in the club comments because I doubt your request will be seen here. If you explain how you want to customize them, though, one of us can help you out.I wanted to learn how to change the position of sort options to place them anywhere on the list. Would you care to create a section for this in your list tutorials? Vaisar said: First off, change this line from you category links' section:Hi.I have trouble with my category links,i trying to make the plan to watch and all anime equal as the others.Can anyone help me? width: 26.667% !important; width: 16.667% !important; .status_not_selected a, .status_selected a { background-color: transparent border-color: rgba(55, 55, 55, 0.5); border-radius: 12px 12px 12px 12px; border-style: solid; border-width: 1px; color: #FFFFFF; display: block !important; font-weight: bold; font-size: 10px; padding: 8px; text-shadow: 0 1px rgba(0, 0, 0, 0.1); } |
Doomcat55Jan 3, 2016 5:06 PM
Jan 3, 2016 5:59 PM
#3421
Oiomi-chan said: Red_Tuesday said: fixed:I have a problem, the CSS I've been using got borked (just noticed) and I don't know what is the fault trigger. I've used Tinypic for all the images, so should be fine, something else is going on with the actual framework of the list maybe? http://myanimelist.net/animelist/Red_Tuesday Thank you! |
Jan 3, 2016 7:53 PM
#3422
body{ background: url(http://i50.tinypic.com/15878uo.jpg) no-repeat fixed top center; background-size: cover; font-family: Candara; font-size: 15px; color: #f0304f; } #list_surround{ position: absolute; width:650px; margin-bottom:50px; margin:auto; left:0px; right:300px; } .td1, .td2{ padding:3px; } .animetitle + small{ color:#f0304f !important; } .animetitle + small:before{ content: " ( "; } .animetitle + small:after{ content: " ) "; } td:nth-of-type(2) small{ color: #f0304f; font-size:13px; padding-right:10px; } td:nth-of-type(2) small a{ color: #f0304f; } .td1:nth-of-type(1), .td2:nth-of-type(1){ border-left: 2px solid #82caff !important; background: url(http://i49.tinypic.com/2vrv8ye.png) -15% ; } .td1:nth-of-type(5), .td2:nth-of-type(5){ border-right: 2px solid #82caff;; background: url(http://i49.tinypic.com/2vrv8ye.png) 86%; } .td1:nth-of-type(4), .td2:nth-of-type(4), td.table_header:nth-of-type(4){ background: url(http://i49.tinypic.com/2vrv8ye.png) 74% ; } .td1:nth-of-type(3), .td2:nth-of-type(3){ background: url(http://i49.tinypic.com/2vrv8ye.png) 67% ; } @media screen and (-webkit-min-device-pixel-ratio:0){ .td1:nth-of-type(3), .td2:nth-of-type(3){ background: url(http://i49.tinypic.com/2vrv8ye.png) 63% ; }} td.table_header:nth-of-type(3){ background: url(http://i49.tinypic.com/2vrv8ye.png) 67% ; padding-right:7px; } @media screen and (-webkit-min-device-pixel-ratio:0){ td.table_header:nth-of-type(3){ background: url(http://i49.tinypic.com/2vrv8ye.png) 63% ; padding-right:7px; }} .td1:nth-of-type(2), .td2:nth-of-type(2){ background: url(http://i49.tinypic.com/2vrv8ye.png) 1% ; } a, a:visited{ text-decoration:none; color: #2030f0; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2{ color:green; } .table_header{ background: url(http://i49.tinypic.com/2vrv8ye.png); padding:2px; font-size: 15px; color:#2030f0; } td.table_header:nth-of-type(1){ border-left: 2px solid #82caff !important; border-top: 2px solid #82caff !important; background: url(http://i49.tinypic.com/2vrv8ye.png) -15% ; border-radius: 10px 0px 0px 0px; } td.table_header:nth-of-type(5){ border-right: 2px solid #82caff;; border-top: 2px solid #82caff;; background: url(http://i49.tinypic.com/2vrv8ye.png) 86% ; border-radius: 0px 10px 0px 0px; } td.table_header:nth-of-type(2), td.table_header:nth-of-type(3), td.table_header:nth-of-type(4){ border-top: 2px solid #82caff;; } .category_totals{ background: url(http://i46.tinypic.com/n3lmgx.png); padding:2px; border-bottom: 2px solid #82caff; border-left: 2px solid #82caff;; border-right: 2px solid #82caff; font-size: 12px; padding-left:40px; border-radius: 0px 0px 10px 10px; } .borderRBL { background: url(http://i46.tinypic.com/n3lmgx.png) !important; border-left: 2px solid #82caff !important; border-right: 2px solid #82caff !important; padding-left:39px; font-size:11px; color:#2030f0 !important; } .borderRBL a, .borderRBL a:visited{ color:#f0304f !important; text-decoration:underline; } .borderRBL a:hover{ color:#f0304f!important; } #copyright{ background: url(http://i46.tinypic.com/n3lmgx.png); position:relative!important; text-align: center !important; width:644px; padding:2px; top:10px; font-size:11px; border: 2px solid #82caff; border-radius: 8px; color: #2030f0; margin-bottom:70px; } #copyright:after{ content: "List Design By Ushioo" !important; background: url(http://i46.tinypic.com/n3lmgx.png) !important; width:650px !important; Position:absolute!important; top:40px !important; left: -3px; color: #f0304f !important; border: 2px solid #82caff; border-radius: 8px; } #copyright a{ color:#2030f0; } #grand_totals{ display:none; } .header_title{ display:none; } .header_cw{ height: 200px; background-image:url(http://i48.tinypic.com/e69fya.png); background-repeat: no-repeat; position:relative; top:9px; } .header_completed{ height: 200px; background-image:url(http://i45.tinypic.com/nxs107.png); background-repeat: no-repeat; position:relative; top:4px; } .header_onhold{ height: 200px; background-image:url(http://i48.tinypic.com/nwzgaw.png); background-repeat: no-repeat; position:relative; top:4px; } .header_dropped{ height: 200px; background-image:url(http://i47.tinypic.com/28ch5pd.png); background-repeat: no-repeat; position:relative; top:4px; } .header_ptw{ height: 200px; background-image:url(http://i50.tinypic.com/t5rgw8.png); background-repeat: no-repeat; position:relative; top:4px; } td:nth-of-type(2) small a { display:none; } td:nth-of-type(2) small{ color:transparent; } This is the layout i want to use but i want to widen "List Surround". I did but this time i got 2 another problems. #list_surround{ position: absolute; width:650px; margin-bottom:50px; margin:auto; left:0px; right:300px; } I changed 650 to 900 and this is the result: Original view: How can i fix these 2 problems? |
AshjnrJan 3, 2016 7:55 PM
Jan 4, 2016 6:09 AM
#3423
Hello there. I have a question about this layout http://pasted.co/4438bea9 - there only Fate theme, while on preview image there is Nanoha too (for manga list), where i can find it? Second - some buttons missed, but in preview image they exist. (http://i.imgur.com/tIZpl0l.png) Third - i don't have previews of anime in list (http://i.imgur.com/utYGXsQ.png) |
Jan 4, 2016 10:38 AM
#3424
Menius said: Hello there. I have a question about this layout http://pasted.co/4438bea9 - there only Fate theme, while on preview image there is Nanoha too (for manga list), where i can find it? Second - some buttons missed, but in preview image they exist. (http://i.imgur.com/tIZpl0l.png) Third - i don't have previews of anime in list (http://i.imgur.com/utYGXsQ.png) I forgot to add the Nanoha link, but I added it just now so clicking the pink will take you to it I don't see the missing buttons in either layout, which ones specifically. Add this to the top for anime covers @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); For manga covers, try soluton #3 and "try alternative cover import" (it goes at the top too) http://myanimelist.net/forum/?topicid=443333 but I'd suggest making your own as they say in the topic. |
Jan 4, 2016 10:54 AM
#3425
Shishio-kun said: I forgot to add the Nanoha link, but I added it just now so clicking the pink will take you to it I don't see the missing buttons in either layout, which ones specifically. Add this to the top for anime covers @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); For manga covers, try soluton #3 and "try alternative cover import" (it goes at the top too) http://myanimelist.net/forum/?topicid=443333 but I'd suggest making your own as they say in the topic. Thanks a lot, all works fine! =) |
Jan 4, 2016 10:56 AM
#3426
Oiomi-chan said: as far as I know the answer to the first question is no. The second one is due to it not being included in your cuss, you can fix this by following shishio's tutorial on generating cover-CSS Hello Oiomi-chan, thank you. I added a new image to my profile, but I'm afraid I did it the most inefficient way possible haha. The image is fairly big, and has dozens of hyperlink text tied to it, I decided to slice it in over a hundred smaller images with horizontal lines, to make it easy for me to display it on my profile without messing with the bbcode too much, but it's bit slow to load, and it took quite a bit of time. I also saved most images in png-24 instead of png-8, just because, is that a big deal? The total size went up to 2mo instead of 1mo, I don't know. Any thought? |
betterthansaladJan 4, 2016 10:59 AM
Jan 4, 2016 11:31 AM
#3427
Sadly, i still miss some buttons - for example i got "manga list" button at my manga list, but where is the button for "anime list"? http://i.imgur.com/GykXEdk.png Same in anime list - http://i.imgur.com/qFvklfm.png UPD: I found button - it hidden behind other O_o http://i.imgur.com/nwGmr1D.png |
MeniusJan 4, 2016 11:43 AM
Jan 4, 2016 12:06 PM
#3428
Menius said: Sadly, i still miss some buttons - for example i got "manga list" button at my manga list, but where is the button for "anime list"? http://i.imgur.com/GykXEdk.png Same in anime list - http://i.imgur.com/qFvklfm.png UPD: I found button - it hidden behind other O_o http://i.imgur.com/nwGmr1D.png Try adding #mal_cs_otherlinks div:nth-child(2) a:nth-child(4){ margin-left:235px; } #mal_cs_otherlinks div:nth-child(2) a:nth-child(3){ margin-left:310px; } #mal_cs_otherlinks div:nth-child(2) a:nth-child(2){ margin-left:235px; } #mal_cs_otherlinks div:nth-child(2) a:nth-child(1){ margin-left:385px; } |
Jan 6, 2016 8:03 PM
#3430
Is it possible to have my copyright text absolutely positioned over the bottom border of my list, while the list has "overflow-y: scroll;"? http://myanimelist.net/animelist/Doomcat55 |
Jan 7, 2016 1:57 AM
#3431
Doomcat55 said: yesIs it possible to have my copyright text absolutely positioned over the bottom border of my list, while the list has "overflow-y: scroll;"? http://myanimelist.net/animelist/Doomcat55 @import"https://dl.dropbox.com/s/p7dmefapn1szznc/Topbar.css"; @import"https://dl.dropbox.com/s/x22d59v0hxn2sgv/Categories.css"; body { /*background: black url(http://orig00.deviantart.net/8201/f/2014/162/2/5/kurumi_wallpaper__02_by_siimeo-d7lwp3a.jpg) no-repeat fixed right center;*/ background: black url(http://i.imgur.com/2HRtlhL.jpg) no-repeat fixed 150% 50%; background-size: contain; } a { color: white; } body:before { position: fixed; content: ""; background: url(http://i.imgur.com/X5jcVZ1.png) no-repeat fixed right bottom; background-size: 55%; width: 100%; height: 100%; bottom: 0; left: 0; pointer-events: none; } #list_surround { width: 600px; position: absolute; right: calc(95% - 654px); top: 14%; height: 500px; overflow-y: scroll; border: 28px solid transparent; border-image: url(http://i.imgur.com/8BTMbfo.png) 28 28 round; background-image: -moz-linear-gradient( 180deg, rgba(246,244,76, .5) 0%, rgba(254,217,0, .5) 41%, rgba(203,173,0, .5) 68%, rgba(151,128,0, .5) 100%); background-image: -webkit-linear-gradient( 180deg, rgba(246,244,76, .5) 0%, rgba(254,217,0, .5) 41%, rgba(203,173,0, .5) 68%, rgba(151,128,0, .5) 100%); background-image: -ms-linear-gradient( 180deg, rgba(246,244,76, .5) 0%, rgba(254,217,0, .5) 41%, rgba(203,173,0, .5) 68%, rgba(151,128,0, .5) 100%); margin-bottom: 50px; } #list_surround br {display: none;} .header_title span { display: block; text-align: center; font-size: 24px; } .td1, .td2 { padding: 1px 0; } .animetitle { overflow: hidden; white-space: nowrap; display: block; width: 193.797px; text-overflow: ellipsis; } .category_totals { position: fixed; width: 100%; bottom: 0; left: 0; z-index: 2; text-align: center; opacity: 0; transition: opacity 1s; } #list_surround > table:nth-of-type(n+2):hover ~ table .category_totals { opacity: 1; } #list_surround > table:nth-of-type(n+2):hover ~ br ~ table .category_totals { opacity: 0; } #grand_totals { position: fixed; width: 100%; bottom: 0; left: 0; z-index: 2; text-align: center; opacity: 1; transition: opacity 1s; } #list_surround > table:nth-of-type(n+2):hover ~ #grand_totals { opacity: 0; } #inlineContent { display: block !important; position: fixed; left: 0; top: 0; height: 100%; width: 100%; background-image: -moz-linear-gradient( 0deg, rgba(0,0,0, .4) 0%, rgba(255,255,255, 0) 100%), -moz-linear-gradient( top, rgba(216,203,2,0.94902) 0%, rgba(245,242,190,0) 10%, rgba(255,255,255,0) 50%, rgba(245,242,190,0) 90%, rgba(216,203,2,0.94902) 100%); background-image: -webkit-linear-gradient( 0deg, rgba(0,0,0, .4) 0%, rgba(255,255,255, 0) 100%), -webkit-linear-gradient( top, rgba(216,203,2,0.94902) 0%, rgba(245,242,190,0) 10%, rgba(255,255,255,0) 50%, rgba(245,242,190,0) 90%, rgba(216,203,2,0.94902) 100%); background-image: -ms-linear-gradient( 0deg, rgba(0,0,0, .4) 0%, rgba(255,255,255, 0) 100%), -webkit-ms-gradient( top, rgba(216,203,2,0.94902) 0%, rgba(245,242,190,0) 10%, rgba(255,255,255,0) 50%, rgba(245,242,190,0) 90%, rgba(216,203,2,0.94902) 100%); pointer-events: none; } #copyright { position:fixed; top:calc(14% + 525px) !important; } |
Jan 7, 2016 7:42 AM
#3432
Oiomi-chan said: Yes, but is it possible using absolute positioning? (Ignore the why for right now)Doomcat55 said: #copyrightIs it possible to have my copyright text absolutely positioned over the bottom border of my list, while the list has "overflow-y: scroll;"? http://myanimelist.net/animelist/Doomcat55 { position:fixed; top:calc(14% + 525px) !important; } |
Jan 7, 2016 9:48 AM
#3433
Doomcat55 said: then noOiomi-chan said: Yes, but is it possible using absolute positioning? (Ignore the why for right now)Doomcat55 said: Is it possible to have my copyright text absolutely positioned over the bottom border of my list, while the list has "overflow-y: scroll;"? http://myanimelist.net/animelist/Doomcat55 { position:fixed; top:calc(14% + 525px) !important; } |
Jan 7, 2016 9:55 AM
#3434
Oiomi-chan said: Oh well -_-Doomcat55 said: then noOiomi-chan said: Doomcat55 said: #copyrightIs it possible to have my copyright text absolutely positioned over the bottom border of my list, while the list has "overflow-y: scroll;"? http://myanimelist.net/animelist/Doomcat55 { position:fixed; top:calc(14% + 525px) !important; } Thanks! |
Jan 7, 2016 8:05 PM
#3435
Hey Guys, when I woke up this morning my Anime&Mangalist and some stuff on my profile were suddenly broken, because I don't understand a lot of Css BBCode etc. I almost 100% rely on you guys. Would you mind helping me? This is the code for my animelist @import 'http://cdn.rawgit.com/VeriTi/cfc167199f0e60518c4c/raw/5108a26ded514663b042591b3a97f1c8f7f5567e/alpha_geometry.css'; @import 'http://cdn.rawgit.com/VeriTi/060b14917bfd586af951/raw/5cbe2d300c3bc1f269277a7d3f117b6cf8f4b3dd/alpha_topbar_redux.css'; body{ /* Set up a background image: */ background-image: url("http://i.imgur.com/VWEqucI.jpg"); /* Set up a point of transformation. This is the point * of image that should always be at the top and * preserve it's location at these offsets. * If you don't understand how it works, 50% 50% should * be ok in most cases. Default: point to Okabe's face. */ background-position: 60% 18%; /* Set up fonts you want to use and preferred basic size. * It will look for the first font at the list, then for * the second, etc. The last parameter describes a generic * font family, which will be used if none of the fonts are * on the user PC. The size can be also set using keywords * like xx-small, google for font-size if you want more info */ font-family: 'Segoe UI', 'Century Gothic', sans-serif; font-size: 11px; } /*LIST HOVER COLOR This configures the look of the part with sort links: * the border and the background. * Colors are in rgba format which means first three values * define a color in Red-Green-Blue mode and the last one * sets up an opacity of the color: rgba(R,G,B,a) * Use color picker in Photoshop (or other image editor), * Opera Dragonfly or Rainbow Firefox extension to get desired * RGB values and then play with opacity until you get what you * wanted. */ tr:hover [class^=td] { background-color: rgba(4, 150, 100, 0.9) !important; } .table_header{ background-color: rgba(0,0,0,0.4); border-color: rgba(255,255,255,0.25); } .table_header, .table_headerLink{ /* Color of the sort links. I used short hex notation here but * you may use whatever you want, rgb, rgba or full-hex. This * won't be mentioned below, the way to change colors is the same */ color: #FFF; /* Remove the following line if you want links to be underlined */ text-decoration: none; } .table_headerLink:hover{ /* This configures a light white glow on hovered links * Changing colors should be enough here so I'll leave it for you. * It's the same rgba we've encountered. */ text-shadow: rgba(255,255,255,0.4) -1px -1px 3px, rgba(255,255,255,0.4) 1px 1px 3px; } /* The look of the rest of the table * Configures background, border and text color for non-links * I made it a bit more opaque than sorting headers */ .td1, .td2{ background-color: rgba(0,0,0,0.6); border-color: rgba(255,255,255,0.25); color: #FFF; } /* This is for the links in the rest of the table */ .td1 a, .td2 a{ text-decoration: none; /* Removes underline for these */ color: #ffc700; /* Paints links orange */ } /* Glow effect on link hover. The same text-shadow property */ .td1 a:hover, .td2 a:hover{ text-shadow: #9d9d31 -1px -1px 3px, #9d9d31 1px 1px 3px; } /* This makes all text in tables bold except for Edit - More */ #list_surround td[class^=td]:first-child, #list_surround td[class^=td]:nth-child(n+3), .animetitle{font-weight:bold} /* CSS sprite for Currently Watching, Completed, Dropped, etc... * Note there is only one image used for all headers. I've made an * inverted version for bright layouts: * http://i.imgur.com/VImNB.png * or you can make one yourself. It's not that difficult. */ .header_title{ background-image: url(http://i.imgur.com/VImNB.png); } /* Block displaying category totals * It's redesigned to be the part of the table layout * and you've already encountered all the properties here * so it won't be hard for you to customise this. * Note that a different shadow colors used for glow effect */ .category_totals{ background-color: rgba(0,0,0,0.5); border-color: rgba(255,255,255,0.25); color: #fff; font-weight: bold; text-shadow: orange 1px 1px 2px,cyan -1px -1px 2px; } /* Text displaying global totals */ #grand_totals{ color: #fff; font-size: larger; font-weight: bold; text-shadow: #c51 -1px -1px 3px, #c51 1px 1px 3px, #c51 1px -1px 4px, #c51 -1px 1px 3px; /* The following line makes it ALL-CAPS */ text-transform: uppercase; } /* Modifying copyright section. It's designed to look similar * to the whole layout, ok? */ #copyright{ background-color: rgba(0,0,0,0.6); border-color: rgba(255,255,255,0.25); } #copyright:after { content: " Custom CSS by Veriti. Background edit by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info."; } /* Modifying the text color in copyright section */ #copyright, #copyright a{ color: #FFF; } This is the code for my mangalist - for whatever reason even the background image changed @import 'http://cdn.rawgit.com/VeriTi/cfc167199f0e60518c4c/raw/5108a26ded514663b042591b3a97f1c8f7f5567e/alpha_geometry.css'; @import 'http://cdn.rawgit.com/VeriTi/060b14917bfd586af951/raw/5cbe2d300c3bc1f269277a7d3f117b6cf8f4b3dd/alpha_topbar_redux.css'; /*BACKGROUND Change the background image link below to get a new background.*/ body { background-image: url("http://i.imgur.com/FVz4M.jpg"); background-position: 60% 18%; } /*CATEGORY HEADER AND MENU IMAGES*/ .header_title { background-image: url("http://i.imgur.com/qNxEE.png"); } .status_not_selected a, .status_selected a { background-image: url("http://i.imgur.com/4rtZb.png"); } /*FONTS Change the properties below to change the list font style.*/ #list_surround, #list_surround a { font-family: tahoma !important; font-size: 8pt !important; font-style: inherit !important; font-variant: small-caps !important; font-weight: bold !important; text-decoration: none !important; text-rendering: auto !important; text-transform: uppercase !important; text-overflow: clip !important; } /*OTHER CODES The codes to change the colors are all at the top.*/ .table_header { background-color: rgba(70, 164, 225, 0.4); border-color: rgba(255, 255, 255, 0.25); } .table_header, .table_headerLink { color: #FFFFFF; text-decoration: none; } .table_headerLink:hover { text-shadow: -1px -1px 3px rgba(255, 255, 255, 0.4), 1px 1px 3px rgba(255, 255, 255, 0.4); } .td1, .td2 { background-color: rgba(70, 164, 150, 0.5); border-color: rgba(255, 255, 255, 0.25); color: #FFFFFF; } .td1 a, .td2 a { color: lightBlue; text-decoration: none; } .td1 a:hover, .td2 a:hover { text-shadow: -1px -1px 3px #56D9D3, 1px 1px 3px #56D9D3; } tr:hover [class^="td"] { background-color: rgba(80, 50, 225, 0.9) !important; } #list_surround td[class^="td"]:first-child, #list_surround td[class^="td"]:nth-child(n+3), .animetitle { font-weight: bold; } .category_totals { background-color: rgba(70, 164, 225, 0.5); border-color: rgba(255, 255, 255, 0.25); color: #FFFFFF; font-weight: bold; text-shadow: 0px 1px 2px orange, -1px -1px 2px #B514FF; } #grand_totals { color: #FFFFFF; font-size: larger; font-weight: bold; text-shadow: -1px -1px 3px #CC5511, 1px 1px 3px #B514FF, 1px -1px 4px #B514FF, -1px 1px 3px #B514FF; text-transform: uppercase; } #copyright { background-color: rgba(70, 164, 225, 0.6); border-color: rgba(255, 255, 255, 0.25); } #copyright, #copyright a { color: #FFFFFF; } #copyright:after { content: " Custom CSS by Veriti. Edits by Miketsukami-kun. Google 'Shishio's Custom Lists' for more designs and info."; } Thanks and have a nice Day =) |
Jan 7, 2016 8:29 PM
#3436
MsBloodySunday said: Replace your CSS with the updated codes for your lists from this topic: http://myanimelist.net/forum/?topicid=412713&show=0Hey Guys, when I woke up this morning my Anime&Mangalist and some stuff on my profile were suddenly broken, because I don't understand a lot of Css BBCode etc. I almost 100% rely on you guys. Would you mind helping me? This is the code for my animelist @import 'http://cdn.rawgit.com/VeriTi/cfc167199f0e60518c4c/raw/5108a26ded514663b042591b3a97f1c8f7f5567e/alpha_geometry.css'; @import 'http://cdn.rawgit.com/VeriTi/060b14917bfd586af951/raw/5cbe2d300c3bc1f269277a7d3f117b6cf8f4b3dd/alpha_topbar_redux.css'; body{ /* Set up a background image: */ background-image: url("http://i.imgur.com/VWEqucI.jpg"); /* Set up a point of transformation. This is the point * of image that should always be at the top and * preserve it's location at these offsets. * If you don't understand how it works, 50% 50% should * be ok in most cases. Default: point to Okabe's face. */ background-position: 60% 18%; /* Set up fonts you want to use and preferred basic size. * It will look for the first font at the list, then for * the second, etc. The last parameter describes a generic * font family, which will be used if none of the fonts are * on the user PC. The size can be also set using keywords * like xx-small, google for font-size if you want more info */ font-family: 'Segoe UI', 'Century Gothic', sans-serif; font-size: 11px; } /*LIST HOVER COLOR This configures the look of the part with sort links: * the border and the background. * Colors are in rgba format which means first three values * define a color in Red-Green-Blue mode and the last one * sets up an opacity of the color: rgba(R,G,B,a) * Use color picker in Photoshop (or other image editor), * Opera Dragonfly or Rainbow Firefox extension to get desired * RGB values and then play with opacity until you get what you * wanted. */ tr:hover [class^=td] { background-color: rgba(4, 150, 100, 0.9) !important; } .table_header{ background-color: rgba(0,0,0,0.4); border-color: rgba(255,255,255,0.25); } .table_header, .table_headerLink{ /* Color of the sort links. I used short hex notation here but * you may use whatever you want, rgb, rgba or full-hex. This * won't be mentioned below, the way to change colors is the same */ color: #FFF; /* Remove the following line if you want links to be underlined */ text-decoration: none; } .table_headerLink:hover{ /* This configures a light white glow on hovered links * Changing colors should be enough here so I'll leave it for you. * It's the same rgba we've encountered. */ text-shadow: rgba(255,255,255,0.4) -1px -1px 3px, rgba(255,255,255,0.4) 1px 1px 3px; } /* The look of the rest of the table * Configures background, border and text color for non-links * I made it a bit more opaque than sorting headers */ .td1, .td2{ background-color: rgba(0,0,0,0.6); border-color: rgba(255,255,255,0.25); color: #FFF; } /* This is for the links in the rest of the table */ .td1 a, .td2 a{ text-decoration: none; /* Removes underline for these */ color: #ffc700; /* Paints links orange */ } /* Glow effect on link hover. The same text-shadow property */ .td1 a:hover, .td2 a:hover{ text-shadow: #9d9d31 -1px -1px 3px, #9d9d31 1px 1px 3px; } /* This makes all text in tables bold except for Edit - More */ #list_surround td[class^=td]:first-child, #list_surround td[class^=td]:nth-child(n+3), .animetitle{font-weight:bold} /* CSS sprite for Currently Watching, Completed, Dropped, etc... * Note there is only one image used for all headers. I've made an * inverted version for bright layouts: * http://i.imgur.com/VImNB.png * or you can make one yourself. It's not that difficult. */ .header_title{ background-image: url(http://i.imgur.com/VImNB.png); } /* Block displaying category totals * It's redesigned to be the part of the table layout * and you've already encountered all the properties here * so it won't be hard for you to customise this. * Note that a different shadow colors used for glow effect */ .category_totals{ background-color: rgba(0,0,0,0.5); border-color: rgba(255,255,255,0.25); color: #fff; font-weight: bold; text-shadow: orange 1px 1px 2px,cyan -1px -1px 2px; } /* Text displaying global totals */ #grand_totals{ color: #fff; font-size: larger; font-weight: bold; text-shadow: #c51 -1px -1px 3px, #c51 1px 1px 3px, #c51 1px -1px 4px, #c51 -1px 1px 3px; /* The following line makes it ALL-CAPS */ text-transform: uppercase; } /* Modifying copyright section. It's designed to look similar * to the whole layout, ok? */ #copyright{ background-color: rgba(0,0,0,0.6); border-color: rgba(255,255,255,0.25); } #copyright:after { content: " Custom CSS by Veriti. Background edit by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info."; } /* Modifying the text color in copyright section */ #copyright, #copyright a{ color: #FFF; } This is the code for my mangalist - for whatever reason even the background image changed @import 'http://cdn.rawgit.com/VeriTi/cfc167199f0e60518c4c/raw/5108a26ded514663b042591b3a97f1c8f7f5567e/alpha_geometry.css'; @import 'http://cdn.rawgit.com/VeriTi/060b14917bfd586af951/raw/5cbe2d300c3bc1f269277a7d3f117b6cf8f4b3dd/alpha_topbar_redux.css'; /*BACKGROUND Change the background image link below to get a new background.*/ body { background-image: url("http://i.imgur.com/FVz4M.jpg"); background-position: 60% 18%; } /*CATEGORY HEADER AND MENU IMAGES*/ .header_title { background-image: url("http://i.imgur.com/qNxEE.png"); } .status_not_selected a, .status_selected a { background-image: url("http://i.imgur.com/4rtZb.png"); } /*FONTS Change the properties below to change the list font style.*/ #list_surround, #list_surround a { font-family: tahoma !important; font-size: 8pt !important; font-style: inherit !important; font-variant: small-caps !important; font-weight: bold !important; text-decoration: none !important; text-rendering: auto !important; text-transform: uppercase !important; text-overflow: clip !important; } /*OTHER CODES The codes to change the colors are all at the top.*/ .table_header { background-color: rgba(70, 164, 225, 0.4); border-color: rgba(255, 255, 255, 0.25); } .table_header, .table_headerLink { color: #FFFFFF; text-decoration: none; } .table_headerLink:hover { text-shadow: -1px -1px 3px rgba(255, 255, 255, 0.4), 1px 1px 3px rgba(255, 255, 255, 0.4); } .td1, .td2 { background-color: rgba(70, 164, 150, 0.5); border-color: rgba(255, 255, 255, 0.25); color: #FFFFFF; } .td1 a, .td2 a { color: lightBlue; text-decoration: none; } .td1 a:hover, .td2 a:hover { text-shadow: -1px -1px 3px #56D9D3, 1px 1px 3px #56D9D3; } tr:hover [class^="td"] { background-color: rgba(80, 50, 225, 0.9) !important; } #list_surround td[class^="td"]:first-child, #list_surround td[class^="td"]:nth-child(n+3), .animetitle { font-weight: bold; } .category_totals { background-color: rgba(70, 164, 225, 0.5); border-color: rgba(255, 255, 255, 0.25); color: #FFFFFF; font-weight: bold; text-shadow: 0px 1px 2px orange, -1px -1px 2px #B514FF; } #grand_totals { color: #FFFFFF; font-size: larger; font-weight: bold; text-shadow: -1px -1px 3px #CC5511, 1px 1px 3px #B514FF, 1px -1px 4px #B514FF, -1px 1px 3px #B514FF; text-transform: uppercase; } #copyright { background-color: rgba(70, 164, 225, 0.6); border-color: rgba(255, 255, 255, 0.25); } #copyright, #copyright a { color: #FFFFFF; } #copyright:after { content: " Custom CSS by Veriti. Edits by Miketsukami-kun. Google 'Shishio's Custom Lists' for more designs and info."; } Thanks and have a nice Day =) |
Jan 8, 2016 12:38 AM
#3437
Jan 8, 2016 12:48 AM
#3438
Hello all. A bit new to CSS here so bear with me and my question, which is probably ludicrously simple. Anyway, I'm using the Dark Minimalist Menu from this topic: http://myanimelist.net/forum/?topicid=1327757 . I've figured out everything I've wanted to change...except the text color. I'm trying to look at the other sections to figure out right code for whats probably a pretty simple thing, but all other instances only seem to have 'color: #hexcode' or something of the like when changing the text color... Would the code simply look like this for what I'm trying to do (changes in bold): .status_not_selected a, .status_selected a { background-color: #303030; height: 25px; width: 138px; display: block !important; line-height: 25px; padding-left: 12px; color: #hexcode } .status_selected a { background-color: #303030; height: 25px; width: 138px; line-height: 25px; padding-left: 12px; color: #hexcode } for each individual section? Or am I missing something completely in what I should be doing? |
Jan 8, 2016 7:51 AM
#3439
Garpachi said: yes but I cant see why you have a duplicate of the code section that is not even affecting anything that is not in the firstHello all. A bit new to CSS here so bear with me and my question, which is probably ludicrously simple. Anyway, I'm using the Dark Minimalist Menu from this topic: http://myanimelist.net/forum/?topicid=1327757 . I've figured out everything I've wanted to change...except the text color. I'm trying to look at the other sections to figure out right code for whats probably a pretty simple thing, but all other instances only seem to have 'color: #hexcode' or something of the like when changing the text color... Would the code simply look like this for what I'm trying to do (changes in bold): .status_not_selected a, .status_selected a { background-color: #303030; height: 25px; width: 138px; display: block !important; line-height: 25px; padding-left: 12px; color: #hexcode } .status_selected a { background-color: #303030; height: 25px; width: 138px; line-height: 25px; padding-left: 12px; color: #hexcode } for each individual section? Or am I missing something completely in what I should be doing? |
Jan 8, 2016 8:35 AM
#3440
Oiomi-chan said: I just got the code from the link in my post. This is quite literally the first time I've worked with CSS so if the code is redundant I'm not sure why.yes but I cant see why you have a duplicate of the code section that is not even affecting anything that is not in the first Thanks for the help, much appreciated. |
Jan 8, 2016 8:42 AM
#3441
Garpachi said: suspected as much, and it is completely understandable. It is in no way necessary, but you can delete the second half if you want the buttons to look the same no matter if they are selected or not.Oiomi-chan said: I just got the code from the link in my post. This is quite literally the first time I've worked with CSS so if the code is redundant I'm not sure why.yes but I cant see why you have a duplicate of the code section that is not even affecting anything that is not in the first Thanks for the help, much appreciated. |
Jan 9, 2016 8:37 PM
#3442
If you click on my list, and hover over the "Watching" category button, you will notice that the word "Watching" is becoming a bit transparent. I want to keep the image transparent but the word at full opacity but it's not happening and I don't know why. Categories codes: #list_surround > table:first-of-type { position: fixed !important; display: block !important; left: 10px; width: 500px; height: 600px; top: 150px; } .status_selected a[href*="status=1"], .status_not_selected a[href*="status=1"] { background-image: url(http://i.imgur.com/t8FhOGT.png); background-size: 220px; background-repeat: no-repeat; background-position: -35px -20px; display: block; width: 100px; height: 100px; border: solid; border-radius: 50px; position: absolute !important; top: 0; font-size: 0; transition: all 1s 0s ease; } .status_selected a[href*="status=1"]:hover, .status_not_selected a[href*="status=1"]:hover { margin-left: 10px; opacity: .5; } .status_selected a[href*="status=1"]:before , .status_not_selected a[href*="status=1"]:before { content: "Watching"; position: relative !important; top: 50px; font-size: 13px !important; visibility: hidden; } .status_selected a[href*="status=1"]:hover:before , .status_not_selected a[href*="status=1"]:hover:before { visibility: visible !important; opacity: 1.0 !important; } .status_selected a[href*="status=2"], .status_not_selected a[href*="status=2"] { background-color: orange; display: block; width: 100px; height: 100px; border: solid; border-radius: 50px; position: absolute !important; top: 120px; left: 0; font-size: 0 !important; } .status_selected a[href*="status=3"], .status_not_selected a[href*="status=3"] { background-color: orange; display: block; width: 100px; height: 100px; border: solid; border-radius: 50px; position: absolute !important; top: 240px; left: 0; font-size: 0 !important; } .status_selected a[href*="status=4"], .status_not_selected a[href*="status=4"] { background-color: orange; display: block; width: 100px; height: 100px; border: solid; border-radius: 50px; position: absolute !important; top: 360px; left: 0; font-size: 0 !important; } .status_selected a[href*="status=6"], .status_not_selected a[href*="status=6"] { background-color: orange; display: block; width: 100px; height: 100px; border: solid; border-radius: 50px; position: absolute !important; top: 480px; left: 0; font-size: 0 !important; } .status_selected a[href*="status=7"], .status_not_selected a[href*="status=7"] { background-color: orange; display: block; width: 100px; height: 100px; border: solid; border-radius: 50px; position: absolute !important; top: 600px; left: 0; font-size: 0 !important; } |
Jan 10, 2016 12:40 PM
#3443
Jan 11, 2016 8:14 PM
#3444
Doomcat55 said: @From The main issue is that you set the background-image to the link instead of its container. Either set the image to [class^="status"]:nth-of-type(1) or make a :before of the link and put it on that. Then set the opacity codes to that element, not the link itself. I understand what you're saying about putting it in the wrong selector but I'm still struggling. [class^="status"]:nth-of-type(1), [class^="status=1"]:nth-of-type(1), .status_selected [class^="status"]:nth-of-type(1) are not working, I'm I doing it wrong? I want to put 'watching' in :before and the image in the container. What I'm trying to say is what's the selector for the image selector and what I should put behind :before so that it doesn't get affected by the container's opacity? |
Jan 11, 2016 10:06 PM
#3445
how do i disable this? http://myanimelist.net/animelist/Shinobu-Oshino / / /I ABSTAINED FROM IMPORTING LINKS FROM DROPBOX SINCE THE CRASH /SO MOSTLY ADDED EVERYTHING TO THIS CODE / / / */ @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); @import url(http://fonts.googleapis.com/css?family=Viga); * { text-decoration: none; } body { background-attachment: fixed; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: url("http://i.imgur.com/kOwoC5N.jpg"); background-position: 80% 80%; background-repeat: no-repeat no-repeat; background-size: cover; font-family: Viga !important; } a { color: #4596f9; } a :hover { color: yellow !important; transition: all 0.4s ease 0s; } body { background-color: rgba(0, 0, 0, 0); color: #bbbbbb; } #list_surround { font-size: 14px; height: 200px; left: 5%; line-height: 1; padding-bottom: 10px; padding-left: 0; padding-right: 0; position: absolute; top: 50; width: 650px; } .table_header { padding-bottom: 4px; } .table_header span { display: none; } .table_header:nth-child(2) { text-align: left; } [cellspacing="0"] { line-height: 17px; } .td1, .td2 { background-color: rgba(255, 255, 255, 0.9); text-align: center; vertical-align: top; border-bottom:1px dashed #85d1e9; padding: 4px 0; transition: background-color 1s linear 0s; } .animetitle + small { color: #FFFFFF !important; visibility: visible !important; padding:2px; background: none repeat scroll 0% 0% #5c8ae6; border-radius:5px; box-shadow: inset 0 0 2px white; text-shadow: 0px 1px black; } #list_surround small { visibility: hidden; } td[class^="td"]:nth-child(2) { text-align: left; text-shadow: 1px 1px 3px #FFFFFF; } #list_surround a[href*="http://myanimelist.net/panel.php?go=edit"], #list_surround a[href*="http://myanimelist.net/editlist.php?type="], #list_surround a[href*="http://myanimelist.net/panel.php?go=add"] { margin-right: 10px; visibility: visible !important; } tr:hover td[class^="td"] { background-color: #7e99ff; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color: #FFFFFF; text-shadow: 0 0 1px #FFFFFF; /*transition: all 0.4s ease 0s;*/ } .table_headerLink { color: #FFFFFF ; line-height: 20px; } td[class^="td"]:nth-child(3), td[class^="td"]:nth-child(3) a { color: #4596f9; text-shadow: 1px 1px 3px #FFFFFF; } td[class^="td"]:nth-child(5), td[class^="td"]:nth-child(5) a { color: #4596f9; text-shadow: 1px 1px 3px #FFFFFF; } td[class^="td"]:first-child { border-left: 0px solid #92d6ed !important; } td[class^="td"]:last-child { border-right: 0px solid #FFFFFF !important; } .table_header { background-color: #6dbaf5; border-color: #FFFFFF; border-style: solid; border-width: 0px 0 0; letter-spacing: 1px; padding:2px; border-bottom: 3px solid #92d6ed; } .table_header:first-child { border-left: 0px solid #FFFFFF !important; border-radius: 16px 0 0 0; border-right: 0px; border-bottom: 3px solid #92d6ed !important; border-top: 0px solid #FFFFFF !important; } .table_header:nth-child(5) { border-radius: 0 16px 0 0; border-right: 0px solid #FFFFFF !important; } /* EDIT BUTTON */ #list_surround:nth-of-type(n+4) tbodysmall { letter-spacing: -25px; visibility: visible; color: transparent !important; } #list_surround:nth-of-type(n+4) tbody small a:first-of-type { display: inline-block !important; opacity: 0; } #list_surround:nth-of-type(n+4) tbody small a:last-of-type { display: none !important; } #list_surround:nth-of-type(n+4) tbody:hover small a:first-of-type { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none color: white ; display: inline-block !important; position: relative !important; text-align: left; visibility: visible; opacity: 1 !important; transition: all 0.8s ease 0s; letter-spacing: 1px; float: right; padding-left: 5px; } .td1 div, .td2{ color: visible !important; padding-left: 4px; } .td1 div:hover small a, .td2 div:hover small a { color:white; transition: all 0.8s ease 0s; } /* */ .category_totals { background-color: #55c2e3; border-top: 2px solid #FFFFFF; border-radius: 0 0 16px 16px; color: #FFFFFF; padding: 3px 3px 9px; text-align: center; } #grand_totals { background-color: #55c2e3; border-color: #FFFFFF; border-radius: 0 0 12px 12px; border-style: solid; border-width: 2px; color: #FFFFFF; display: block; margin-top: 35px; padding: 0 10px 10px; position: absolute; text-align: center; width: calc(100% - 24px); padding-top:10px; } td[class^="td"]:nth-of-type(2) { width: 454px !important; } /* COVER NECESSITIES */ .table_header:nth-of-type(6), span[id*="tagLinks"], div[id*="tagChangeRow"] { display: none !important; } td[class^="td"]:nth-of-type(6) { width: 0; } span[id*="tagRow"] { background-color: rgba( 0, 0, 0, 0.7) !important; /*border: 2px solid #FFFFFF;*/ border-radius: 0px 20px 20px 0px; display: block !important; line-height:15px !important; padding: 8px 8px 8px ; position: fixed; left: 980px; text-shadow: 0 0 0 #000000 !important; visibility: hidden; width: 199px; bottom: 20px !important; transition: all 0s ease 0s; height:282px; } span[id*="tagRow"]:before { content:"Tags: "; color:#85d1e9; } tr:hover span[id*="tagRow"] { color: white !important; visibility: visible; } :hover + .hide { background-color: #6dbaf5; background-position: 50% 50% !important; background-repeat: no-repeat !important; background-size: auto auto !important; border: 0px double #87d1ea; box-shadow: 0 2px 2px #000000; display: block !important; height: 250px; padding: 39px 22px 9px 10px; position: fixed; bottom: 200px; left: 770px; width: 183px; } /* HEADERS */ [class^="header_"] * { background-repeat: no-repeat no-repeat; font-size: 0; height: 345px; line-height: 24px; padding-bottom: 50px; 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); } .header_cw { background-color: transparent; background-image: url("http://i61.tinypic.com/qqpr36.png"); background-position: 50% 2px; background-repeat: no-repeat no-repeat; height: 350px; margin-bottom: -45px; } .header_completed { background-color: transparent; background-image: url("http://i59.tinypic.com/fu9jrd.png"); background-position: 50% 2px; background-repeat: no-repeat no-repeat; margin-bottom: -44px; z-index: 0; } .header_onhold { background-color: transparent; background-image: url("http://i60.tinypic.com/ifpjm0.png"); background-position: 50% 2px; background-repeat: no-repeat no-repeat; height: 200px; margin-bottom: -44px; } .header_dropped { background-color: transparent; background-image: url("http://i57.tinypic.com/htd455.png"); background-position: 50% 2px; background-repeat: no-repeat no-repeat; height: 200px; margin-bottom: -44px; } .header_ptw { background-color: transparent; background-image: url("http://i57.tinypic.com/4ljf34.jpg"); background-position: 50% 2px; background-repeat: no-repeat no-repeat; height: 200px; margin-bottom: -44px; } /* CATEGORY LINKS */ .status_selected:hover { opacity: 1 !important; transition: all 0.4s ease 0s; display:block; background-image:url(http://i62.tinypic.com/2lc41o6.png) !important; } .status_not_selected:hover { opacity: 1 !important; transition: all 0.4s ease 0s; right:20px !important; display:block; background-image:url(http://i62.tinypic.com/2lc41o6.png) !important; } .status_selected:hover a, .status_not_selected:hover a { color: #6495f0!important; text-shadow: 5px 5px 5px black; font-size: 15px; height: 75px; text-decoration: none; width: 150px !important; padding-top: 80px !important; text-align:center; transition:all 0.4s ease 0s; display:block; } .status_not_selected a { color:transparent; display:block; } .status_not_selected a, .status_selected a { height: 125px; width: 125px; transition: all 0.4s ease 0s; } .status_selected a { display: block; color:#83ceed; font-size: 15px; height: 125px; width: 150px; text-shadow: 2px 3px 2px black; padding-top:80px; word-wrap: break-word; } .status_selected { display: block; opacity: 1; transition: all 0.4s ease 0s; right:20px !important; background-image:url(http://i62.tinypic.com/2lc41o6.png) !important; } .status_not_selected { display: block; opacity: 1; transition: all 0.4s ease 0s; } #list_surround .status_selected, #list_surround .status_not_selected { background-attachment: scroll; background-color: transparent; background-image: url("http://i59.tinypic.com/4rzyjb.png"); background-repeat: no-repeat no-repeat ; display: block; height: 150px; right: 0%; padding: 0px; position: fixed; top: -5px; width: 150px; z-index:500; } #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-position: 0% 20% !important; top: 110px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background-attachment: scroll; background-color: transparent; background-position: 0px 40% !important; top:220px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-attachment: scroll; background-color: transparent; background-position: 0 60% !important; top:330px } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-attachment: scroll; background-color: transparent; background-position: 0 80% !important; background-repeat: repeat repeat; display: inline; top:440px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-attachment: scroll; background-color: transparent; background-position: 0 100% !important; background-repeat: no-repeat no-repeat; display: inline; top:550px; width: 150px; } /* COPYRIGHT */ #copyright:after { content: "Design by SylakentH and EvilWolf, thanks to DeviantArt!"; font-size: 12px; color:#85d1e9; } #copyright { background-color: #A0373C; border: 4px solid #f6985b; border-radius: 12px; color: #FFFFFF; display: block; margin-top: -10px !important; padding: 2px 14px 4px; position: relative; transition: all 0.4s ease-out 0s; } #copyright a { color: #FFFFFF; font-size: 14px; padding-right: 2px; text-shadow: 1px 1px #6dbaf5; } |
Jan 11, 2016 10:23 PM
#3446
Shinobu-Oshino said: how do i disable this? http://myanimelist.net/animelist/Shinobu-Oshino / / /I ABSTAINED FROM IMPORTING LINKS FROM DROPBOX SINCE THE CRASH /SO MOSTLY ADDED EVERYTHING TO THIS CODE / / / */ @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); @import url(http://fonts.googleapis.com/css?family=Viga); * { text-decoration: none; } body { background-attachment: fixed; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: url("http://i.imgur.com/kOwoC5N.jpg"); background-position: 80% 80%; background-repeat: no-repeat no-repeat; background-size: cover; font-family: Viga !important; } a { color: #4596f9; } a :hover { color: yellow !important; transition: all 0.4s ease 0s; } body { background-color: rgba(0, 0, 0, 0); color: #bbbbbb; } #list_surround { font-size: 14px; height: 200px; left: 5%; line-height: 1; padding-bottom: 10px; padding-left: 0; padding-right: 0; position: absolute; top: 50; width: 650px; } .table_header { padding-bottom: 4px; } .table_header span { display: none; } .table_header:nth-child(2) { text-align: left; } [cellspacing="0"] { line-height: 17px; } .td1, .td2 { background-color: rgba(255, 255, 255, 0.9); text-align: center; vertical-align: top; border-bottom:1px dashed #85d1e9; padding: 4px 0; transition: background-color 1s linear 0s; } .animetitle + small { color: #FFFFFF !important; visibility: visible !important; padding:2px; background: none repeat scroll 0% 0% #5c8ae6; border-radius:5px; box-shadow: inset 0 0 2px white; text-shadow: 0px 1px black; } #list_surround small { visibility: hidden; } td[class^="td"]:nth-child(2) { text-align: left; text-shadow: 1px 1px 3px #FFFFFF; } #list_surround a[href*="http://myanimelist.net/panel.php?go=edit"], #list_surround a[href*="http://myanimelist.net/editlist.php?type="], #list_surround a[href*="http://myanimelist.net/panel.php?go=add"] { margin-right: 10px; visibility: visible !important; } tr:hover td[class^="td"] { background-color: #7e99ff; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color: #FFFFFF; text-shadow: 0 0 1px #FFFFFF; /*transition: all 0.4s ease 0s;*/ } .table_headerLink { color: #FFFFFF ; line-height: 20px; } td[class^="td"]:nth-child(3), td[class^="td"]:nth-child(3) a { color: #4596f9; text-shadow: 1px 1px 3px #FFFFFF; } td[class^="td"]:nth-child(5), td[class^="td"]:nth-child(5) a { color: #4596f9; text-shadow: 1px 1px 3px #FFFFFF; } td[class^="td"]:first-child { border-left: 0px solid #92d6ed !important; } td[class^="td"]:last-child { border-right: 0px solid #FFFFFF !important; } .table_header { background-color: #6dbaf5; border-color: #FFFFFF; border-style: solid; border-width: 0px 0 0; letter-spacing: 1px; padding:2px; border-bottom: 3px solid #92d6ed; } .table_header:first-child { border-left: 0px solid #FFFFFF !important; border-radius: 16px 0 0 0; border-right: 0px; border-bottom: 3px solid #92d6ed !important; border-top: 0px solid #FFFFFF !important; } .table_header:nth-child(5) { border-radius: 0 16px 0 0; border-right: 0px solid #FFFFFF !important; } /* EDIT BUTTON */ #list_surround:nth-of-type(n+4) tbodysmall { letter-spacing: -25px; visibility: visible; color: transparent !important; } #list_surround:nth-of-type(n+4) tbody small a:first-of-type { display: inline-block !important; opacity: 0; } #list_surround:nth-of-type(n+4) tbody small a:last-of-type { display: none !important; } #list_surround:nth-of-type(n+4) tbody:hover small a:first-of-type { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none color: white ; display: inline-block !important; position: relative !important; text-align: left; visibility: visible; opacity: 1 !important; transition: all 0.8s ease 0s; letter-spacing: 1px; float: right; padding-left: 5px; } .td1 div, .td2{ color: visible !important; padding-left: 4px; } .td1 div:hover small a, .td2 div:hover small a { color:white; transition: all 0.8s ease 0s; } /* */ .category_totals { background-color: #55c2e3; border-top: 2px solid #FFFFFF; border-radius: 0 0 16px 16px; color: #FFFFFF; padding: 3px 3px 9px; text-align: center; } #grand_totals { background-color: #55c2e3; border-color: #FFFFFF; border-radius: 0 0 12px 12px; border-style: solid; border-width: 2px; color: #FFFFFF; display: block; margin-top: 35px; padding: 0 10px 10px; position: absolute; text-align: center; width: calc(100% - 24px); padding-top:10px; } td[class^="td"]:nth-of-type(2) { width: 454px !important; } /* COVER NECESSITIES */ .table_header:nth-of-type(6), span[id*="tagLinks"], div[id*="tagChangeRow"] { display: none !important; } td[class^="td"]:nth-of-type(6) { width: 0; } span[id*="tagRow"] { background-color: rgba( 0, 0, 0, 0.7) !important; /*border: 2px solid #FFFFFF;*/ border-radius: 0px 20px 20px 0px; display: block !important; line-height:15px !important; padding: 8px 8px 8px ; position: fixed; left: 980px; text-shadow: 0 0 0 #000000 !important; visibility: hidden; width: 199px; bottom: 20px !important; transition: all 0s ease 0s; height:282px; } span[id*="tagRow"]:before { content:"Tags: "; color:#85d1e9; } tr:hover span[id*="tagRow"] { color: white !important; visibility: visible; } :hover + .hide { background-color: #6dbaf5; background-position: 50% 50% !important; background-repeat: no-repeat !important; background-size: auto auto !important; border: 0px double #87d1ea; box-shadow: 0 2px 2px #000000; display: block !important; height: 250px; padding: 39px 22px 9px 10px; position: fixed; bottom: 200px; left: 770px; width: 183px; } /* HEADERS */ [class^="header_"] * { background-repeat: no-repeat no-repeat; font-size: 0; height: 345px; line-height: 24px; padding-bottom: 50px; 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); } .header_cw { background-color: transparent; background-image: url("http://i61.tinypic.com/qqpr36.png"); background-position: 50% 2px; background-repeat: no-repeat no-repeat; height: 350px; margin-bottom: -45px; } .header_completed { background-color: transparent; background-image: url("http://i59.tinypic.com/fu9jrd.png"); background-position: 50% 2px; background-repeat: no-repeat no-repeat; margin-bottom: -44px; z-index: 0; } .header_onhold { background-color: transparent; background-image: url("http://i60.tinypic.com/ifpjm0.png"); background-position: 50% 2px; background-repeat: no-repeat no-repeat; height: 200px; margin-bottom: -44px; } .header_dropped { background-color: transparent; background-image: url("http://i57.tinypic.com/htd455.png"); background-position: 50% 2px; background-repeat: no-repeat no-repeat; height: 200px; margin-bottom: -44px; } .header_ptw { background-color: transparent; background-image: url("http://i57.tinypic.com/4ljf34.jpg"); background-position: 50% 2px; background-repeat: no-repeat no-repeat; height: 200px; margin-bottom: -44px; } /* CATEGORY LINKS */ .status_selected:hover { opacity: 1 !important; transition: all 0.4s ease 0s; display:block; background-image:url(http://i62.tinypic.com/2lc41o6.png) !important; } .status_not_selected:hover { opacity: 1 !important; transition: all 0.4s ease 0s; right:20px !important; display:block; background-image:url(http://i62.tinypic.com/2lc41o6.png) !important; } .status_selected:hover a, .status_not_selected:hover a { color: #6495f0!important; text-shadow: 5px 5px 5px black; font-size: 15px; height: 75px; text-decoration: none; width: 150px !important; padding-top: 80px !important; text-align:center; transition:all 0.4s ease 0s; display:block; } .status_not_selected a { color:transparent; display:block; } .status_not_selected a, .status_selected a { height: 125px; width: 125px; transition: all 0.4s ease 0s; } .status_selected a { display: block; color:#83ceed; font-size: 15px; height: 125px; width: 150px; text-shadow: 2px 3px 2px black; padding-top:80px; word-wrap: break-word; } .status_selected { display: block; opacity: 1; transition: all 0.4s ease 0s; right:20px !important; background-image:url(http://i62.tinypic.com/2lc41o6.png) !important; } .status_not_selected { display: block; opacity: 1; transition: all 0.4s ease 0s; } #list_surround .status_selected, #list_surround .status_not_selected { background-attachment: scroll; background-color: transparent; background-image: url("http://i59.tinypic.com/4rzyjb.png"); background-repeat: no-repeat no-repeat ; display: block; height: 150px; right: 0%; padding: 0px; position: fixed; top: -5px; width: 150px; z-index:500; } #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-position: 0% 20% !important; top: 110px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background-attachment: scroll; background-color: transparent; background-position: 0px 40% !important; top:220px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-attachment: scroll; background-color: transparent; background-position: 0 60% !important; top:330px } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-attachment: scroll; background-color: transparent; background-position: 0 80% !important; background-repeat: repeat repeat; display: inline; top:440px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-attachment: scroll; background-color: transparent; background-position: 0 100% !important; background-repeat: no-repeat no-repeat; display: inline; top:550px; width: 150px; } /* COPYRIGHT */ #copyright:after { content: "Design by SylakentH and EvilWolf, thanks to DeviantArt!"; font-size: 12px; color:#85d1e9; } #copyright { background-color: #A0373C; border: 4px solid #f6985b; border-radius: 12px; color: #FFFFFF; display: block; margin-top: -10px !important; padding: 2px 14px 4px; position: relative; transition: all 0.4s ease-out 0s; } #copyright a { color: #FFFFFF; font-size: 14px; padding-right: 2px; text-shadow: 1px 1px #6dbaf5; } / / /I ABSTAINED FROM IMPORTING LINKS FROM DROPBOX SINCE THE CRASH /SO MOSTLY ADDED EVERYTHING TO THIS CODE / / / */ @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); @import url(http://fonts.googleapis.com/css?family=Viga); * { text-decoration: none; } body { background-attachment: fixed; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: url("http://i.imgur.com/kOwoC5N.jpg"); background-position: 80% 80%; background-repeat: no-repeat no-repeat; background-size: cover; font-family: Viga !important; } a { color: #4596f9; } a :hover { color: yellow !important; transition: all 0.4s ease 0s; } body { background-color: rgba(0, 0, 0, 0); color: #bbbbbb; } #list_surround { font-size: 14px; height: 200px; left: 5%; line-height: 1; padding-bottom: 10px; padding-left: 0; padding-right: 0; position: absolute; top: 50; width: 650px; } .table_header { padding-bottom: 4px; } .table_header span { display: none; } .table_header:nth-child(2) { text-align: left; } [cellspacing="0"] { line-height: 17px; } .td1, .td2 { background-color: rgba(255, 255, 255, 0.9); text-align: center; vertical-align: top; border-bottom:1px dashed #85d1e9; padding: 4px 0; transition: background-color 1s linear 0s; } .animetitle + small { color: #FFFFFF !important; visibility: visible !important; padding:2px; background: none repeat scroll 0% 0% #5c8ae6; border-radius:5px; box-shadow: inset 0 0 2px white; text-shadow: 0px 1px black; } #list_surround small { visibility: hidden; } td[class^="td"]:nth-child(2) { text-align: left; text-shadow: 1px 1px 3px #FFFFFF; } #list_surround a[href*="http://myanimelist.net/panel.php?go=edit"], #list_surround a[href*="http://myanimelist.net/editlist.php?type="], #list_surround a[href*="http://myanimelist.net/panel.php?go=add"] { margin-right: 10px; visibility: visible !important; } tr:hover td[class^="td"] { background-color: #7e99ff; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color: #FFFFFF; text-shadow: 0 0 1px #FFFFFF; /*transition: all 0.4s ease 0s;*/ } .table_headerLink { color: #FFFFFF ; line-height: 20px; } td[class^="td"]:nth-child(3), td[class^="td"]:nth-child(3) a { color: #4596f9; text-shadow: 1px 1px 3px #FFFFFF; } td[class^="td"]:nth-child(5), td[class^="td"]:nth-child(5) a { color: #4596f9; text-shadow: 1px 1px 3px #FFFFFF; } td[class^="td"]:first-child { border-left: 0px solid #92d6ed !important; } td[class^="td"]:last-child { border-right: 0px solid #FFFFFF !important; } .table_header { background-color: #6dbaf5; border-color: #FFFFFF; border-style: solid; border-width: 0px 0 0; letter-spacing: 1px; padding:2px; border-bottom: 3px solid #92d6ed; } .table_header:first-child { border-left: 0px solid #FFFFFF !important; border-radius: 16px 0 0 0; border-right: 0px; border-bottom: 3px solid #92d6ed !important; border-top: 0px solid #FFFFFF !important; } .table_header:nth-child(5) { border-radius: 0 16px 0 0; border-right: 0px solid #FFFFFF !important; } /* EDIT BUTTON */ #list_surround:nth-of-type(n+4) tbodysmall { letter-spacing: -25px; visibility: visible; color: transparent !important; } #list_surround:nth-of-type(n+4) tbody small a:first-of-type { display: inline-block !important; opacity: 0; } #list_surround:nth-of-type(n+4) tbody small a:last-of-type { display: none !important; } #list_surround:nth-of-type(n+4) tbody:hover small a:first-of-type { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none color: white ; display: inline-block !important; position: relative !important; text-align: left; visibility: visible; opacity: 1 !important; transition: all 0.8s ease 0s; letter-spacing: 1px; float: right; padding-left: 5px; } .td1 div, .td2{ color: visible !important; padding-left: 4px; } .td1 div:hover small a, .td2 div:hover small a { color:white; transition: all 0.8s ease 0s; } /* */ .category_totals { background-color: #55c2e3; border-top: 2px solid #FFFFFF; border-radius: 0 0 16px 16px; color: #FFFFFF; padding: 3px 3px 9px; text-align: center; } #grand_totals { background-color: #55c2e3; border-color: #FFFFFF; border-radius: 0 0 12px 12px; border-style: solid; border-width: 2px; color: #FFFFFF; display: block; margin-top: 35px; padding: 0 10px 10px; position: absolute; text-align: center; width: calc(100% - 24px); padding-top:10px; } td[class^="td"]:nth-of-type(2) { width: 454px !important; } /* HEADERS */ [class^="header_"] * { background-repeat: no-repeat no-repeat; font-size: 0; height: 345px; line-height: 24px; padding-bottom: 50px; 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); } .header_cw { background-color: transparent; background-image: url("http://i61.tinypic.com/qqpr36.png"); background-position: 50% 2px; background-repeat: no-repeat no-repeat; height: 350px; margin-bottom: -45px; } .header_completed { background-color: transparent; background-image: url("http://i59.tinypic.com/fu9jrd.png"); background-position: 50% 2px; background-repeat: no-repeat no-repeat; margin-bottom: -44px; z-index: 0; } .header_onhold { background-color: transparent; background-image: url("http://i60.tinypic.com/ifpjm0.png"); background-position: 50% 2px; background-repeat: no-repeat no-repeat; height: 200px; margin-bottom: -44px; } .header_dropped { background-color: transparent; background-image: url("http://i57.tinypic.com/htd455.png"); background-position: 50% 2px; background-repeat: no-repeat no-repeat; height: 200px; margin-bottom: -44px; } .header_ptw { background-color: transparent; background-image: url("http://i57.tinypic.com/4ljf34.jpg"); background-position: 50% 2px; background-repeat: no-repeat no-repeat; height: 200px; margin-bottom: -44px; } /* CATEGORY LINKS */ .status_selected:hover { opacity: 1 !important; transition: all 0.4s ease 0s; display:block; background-image:url(http://i62.tinypic.com/2lc41o6.png) !important; } .status_not_selected:hover { opacity: 1 !important; transition: all 0.4s ease 0s; right:20px !important; display:block; background-image:url(http://i62.tinypic.com/2lc41o6.png) !important; } .status_selected:hover a, .status_not_selected:hover a { color: #6495f0!important; text-shadow: 5px 5px 5px black; font-size: 15px; height: 75px; text-decoration: none; width: 150px !important; padding-top: 80px !important; text-align:center; transition:all 0.4s ease 0s; display:block; } .status_not_selected a { color:transparent; display:block; } .status_not_selected a, .status_selected a { height: 125px; width: 125px; transition: all 0.4s ease 0s; } .status_selected a { display: block; color:#83ceed; font-size: 15px; height: 125px; width: 150px; text-shadow: 2px 3px 2px black; padding-top:80px; word-wrap: break-word; } .status_selected { display: block; opacity: 1; transition: all 0.4s ease 0s; right:20px !important; background-image:url(http://i62.tinypic.com/2lc41o6.png) !important; } .status_not_selected { display: block; opacity: 1; transition: all 0.4s ease 0s; } #list_surround .status_selected, #list_surround .status_not_selected { background-attachment: scroll; background-color: transparent; background-image: url("http://i59.tinypic.com/4rzyjb.png"); background-repeat: no-repeat no-repeat ; display: block; height: 150px; right: 0%; padding: 0px; position: fixed; top: -5px; width: 150px; z-index:500; } #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-position: 0% 20% !important; top: 110px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background-attachment: scroll; background-color: transparent; background-position: 0px 40% !important; top:220px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-attachment: scroll; background-color: transparent; background-position: 0 60% !important; top:330px } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-attachment: scroll; background-color: transparent; background-position: 0 80% !important; background-repeat: repeat repeat; display: inline; top:440px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-attachment: scroll; background-color: transparent; background-position: 0 100% !important; background-repeat: no-repeat no-repeat; display: inline; top:550px; width: 150px; } /* COPYRIGHT */ #copyright:after { content: "Design by SylakentH and EvilWolf, thanks to DeviantArt!"; font-size: 12px; color:#85d1e9; } #copyright { background-color: #A0373C; border: 4px solid #f6985b; border-radius: 12px; color: #FFFFFF; display: block; margin-top: -10px !important; padding: 2px 14px 4px; position: relative; transition: all 0.4s ease-out 0s; } #copyright a { color: #FFFFFF; font-size: 14px; padding-right: 2px; text-shadow: 1px 1px #6dbaf5; } |
Jan 11, 2016 10:25 PM
#3447
Oiomi-chan said: Shinobu-Oshino said: how do i disable this? [img]http://i.imgur.com/xXhOr7H.jpg[*/img] http://myanimelist.net/animelist/Shinobu-Oshino / / /I ABSTAINED FROM IMPORTING LINKS FROM DROPBOX SINCE THE CRASH /SO MOSTLY ADDED EVERYTHING TO THIS CODE / / / */ @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); @import url(http://fonts.googleapis.com/css?family=Viga); * { text-decoration: none; } body { background-attachment: fixed; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: url("http://i.imgur.com/kOwoC5N.jpg"); background-position: 80% 80%; background-repeat: no-repeat no-repeat; background-size: cover; font-family: Viga !important; } a { color: #4596f9; } a :hover { color: yellow !important; transition: all 0.4s ease 0s; } body { background-color: rgba(0, 0, 0, 0); color: #bbbbbb; } #list_surround { font-size: 14px; height: 200px; left: 5%; line-height: 1; padding-bottom: 10px; padding-left: 0; padding-right: 0; position: absolute; top: 50; width: 650px; } .table_header { padding-bottom: 4px; } .table_header span { display: none; } .table_header:nth-child(2) { text-align: left; } [cellspacing="0"] { line-height: 17px; } .td1, .td2 { background-color: rgba(255, 255, 255, 0.9); text-align: center; vertical-align: top; border-bottom:1px dashed #85d1e9; padding: 4px 0; transition: background-color 1s linear 0s; } .animetitle + small { color: #FFFFFF !important; visibility: visible !important; padding:2px; background: none repeat scroll 0% 0% #5c8ae6; border-radius:5px; box-shadow: inset 0 0 2px white; text-shadow: 0px 1px black; } #list_surround small { visibility: hidden; } td[class^="td"]:nth-child(2) { text-align: left; text-shadow: 1px 1px 3px #FFFFFF; } #list_surround a[href*="http://myanimelist.net/panel.php?go=edit"], #list_surround a[href*="http://myanimelist.net/editlist.php?type="], #list_surround a[href*="http://myanimelist.net/panel.php?go=add"] { margin-right: 10px; visibility: visible !important; } tr:hover td[class^="td"] { background-color: #7e99ff; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color: #FFFFFF; text-shadow: 0 0 1px #FFFFFF; /*transition: all 0.4s ease 0s;*/ } .table_headerLink { color: #FFFFFF ; line-height: 20px; } td[class^="td"]:nth-child(3), td[class^="td"]:nth-child(3) a { color: #4596f9; text-shadow: 1px 1px 3px #FFFFFF; } td[class^="td"]:nth-child(5), td[class^="td"]:nth-child(5) a { color: #4596f9; text-shadow: 1px 1px 3px #FFFFFF; } td[class^="td"]:first-child { border-left: 0px solid #92d6ed !important; } td[class^="td"]:last-child { border-right: 0px solid #FFFFFF !important; } .table_header { background-color: #6dbaf5; border-color: #FFFFFF; border-style: solid; border-width: 0px 0 0; letter-spacing: 1px; padding:2px; border-bottom: 3px solid #92d6ed; } .table_header:first-child { border-left: 0px solid #FFFFFF !important; border-radius: 16px 0 0 0; border-right: 0px; border-bottom: 3px solid #92d6ed !important; border-top: 0px solid #FFFFFF !important; } .table_header:nth-child(5) { border-radius: 0 16px 0 0; border-right: 0px solid #FFFFFF !important; } /* EDIT BUTTON */ #list_surround:nth-of-type(n+4) tbodysmall { letter-spacing: -25px; visibility: visible; color: transparent !important; } #list_surround:nth-of-type(n+4) tbody small a:first-of-type { display: inline-block !important; opacity: 0; } #list_surround:nth-of-type(n+4) tbody small a:last-of-type { display: none !important; } #list_surround:nth-of-type(n+4) tbody:hover small a:first-of-type { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none color: white ; display: inline-block !important; position: relative !important; text-align: left; visibility: visible; opacity: 1 !important; transition: all 0.8s ease 0s; letter-spacing: 1px; float: right; padding-left: 5px; } .td1 div, .td2{ color: visible !important; padding-left: 4px; } .td1 div:hover small a, .td2 div:hover small a { color:white; transition: all 0.8s ease 0s; } /* */ .category_totals { background-color: #55c2e3; border-top: 2px solid #FFFFFF; border-radius: 0 0 16px 16px; color: #FFFFFF; padding: 3px 3px 9px; text-align: center; } #grand_totals { background-color: #55c2e3; border-color: #FFFFFF; border-radius: 0 0 12px 12px; border-style: solid; border-width: 2px; color: #FFFFFF; display: block; margin-top: 35px; padding: 0 10px 10px; position: absolute; text-align: center; width: calc(100% - 24px); padding-top:10px; } td[class^="td"]:nth-of-type(2) { width: 454px !important; } /* COVER NECESSITIES */ .table_header:nth-of-type(6), span[id*="tagLinks"], div[id*="tagChangeRow"] { display: none !important; } td[class^="td"]:nth-of-type(6) { width: 0; } span[id*="tagRow"] { background-color: rgba( 0, 0, 0, 0.7) !important; /*border: 2px solid #FFFFFF;*/ border-radius: 0px 20px 20px 0px; display: block !important; line-height:15px !important; padding: 8px 8px 8px ; position: fixed; left: 980px; text-shadow: 0 0 0 #000000 !important; visibility: hidden; width: 199px; bottom: 20px !important; transition: all 0s ease 0s; height:282px; } span[id*="tagRow"]:before { content:"Tags: "; color:#85d1e9; } tr:hover span[id*="tagRow"] { color: white !important; visibility: visible; } :hover + .hide { background-color: #6dbaf5; background-position: 50% 50% !important; background-repeat: no-repeat !important; background-size: auto auto !important; border: 0px double #87d1ea; box-shadow: 0 2px 2px #000000; display: block !important; height: 250px; padding: 39px 22px 9px 10px; position: fixed; bottom: 200px; left: 770px; width: 183px; } /* HEADERS */ [class^="header_"] * { background-repeat: no-repeat no-repeat; font-size: 0; height: 345px; line-height: 24px; padding-bottom: 50px; 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); } .header_cw { background-color: transparent; background-image: url("http://i61.tinypic.com/qqpr36.png"); background-position: 50% 2px; background-repeat: no-repeat no-repeat; height: 350px; margin-bottom: -45px; } .header_completed { background-color: transparent; background-image: url("http://i59.tinypic.com/fu9jrd.png"); background-position: 50% 2px; background-repeat: no-repeat no-repeat; margin-bottom: -44px; z-index: 0; } .header_onhold { background-color: transparent; background-image: url("http://i60.tinypic.com/ifpjm0.png"); background-position: 50% 2px; background-repeat: no-repeat no-repeat; height: 200px; margin-bottom: -44px; } .header_dropped { background-color: transparent; background-image: url("http://i57.tinypic.com/htd455.png"); background-position: 50% 2px; background-repeat: no-repeat no-repeat; height: 200px; margin-bottom: -44px; } .header_ptw { background-color: transparent; background-image: url("http://i57.tinypic.com/4ljf34.jpg"); background-position: 50% 2px; background-repeat: no-repeat no-repeat; height: 200px; margin-bottom: -44px; } /* CATEGORY LINKS */ .status_selected:hover { opacity: 1 !important; transition: all 0.4s ease 0s; display:block; background-image:url(http://i62.tinypic.com/2lc41o6.png) !important; } .status_not_selected:hover { opacity: 1 !important; transition: all 0.4s ease 0s; right:20px !important; display:block; background-image:url(http://i62.tinypic.com/2lc41o6.png) !important; } .status_selected:hover a, .status_not_selected:hover a { color: #6495f0!important; text-shadow: 5px 5px 5px black; font-size: 15px; height: 75px; text-decoration: none; width: 150px !important; padding-top: 80px !important; text-align:center; transition:all 0.4s ease 0s; display:block; } .status_not_selected a { color:transparent; display:block; } .status_not_selected a, .status_selected a { height: 125px; width: 125px; transition: all 0.4s ease 0s; } .status_selected a { display: block; color:#83ceed; font-size: 15px; height: 125px; width: 150px; text-shadow: 2px 3px 2px black; padding-top:80px; word-wrap: break-word; } .status_selected { display: block; opacity: 1; transition: all 0.4s ease 0s; right:20px !important; background-image:url(http://i62.tinypic.com/2lc41o6.png) !important; } .status_not_selected { display: block; opacity: 1; transition: all 0.4s ease 0s; } #list_surround .status_selected, #list_surround .status_not_selected { background-attachment: scroll; background-color: transparent; background-image: url("http://i59.tinypic.com/4rzyjb.png"); background-repeat: no-repeat no-repeat ; display: block; height: 150px; right: 0%; padding: 0px; position: fixed; top: -5px; width: 150px; z-index:500; } #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-position: 0% 20% !important; top: 110px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background-attachment: scroll; background-color: transparent; background-position: 0px 40% !important; top:220px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-attachment: scroll; background-color: transparent; background-position: 0 60% !important; top:330px } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-attachment: scroll; background-color: transparent; background-position: 0 80% !important; background-repeat: repeat repeat; display: inline; top:440px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-attachment: scroll; background-color: transparent; background-position: 0 100% !important; background-repeat: no-repeat no-repeat; display: inline; top:550px; width: 150px; } /* COPYRIGHT */ #copyright:after { content: "Design by SylakentH and EvilWolf, thanks to DeviantArt!"; font-size: 12px; color:#85d1e9; } #copyright { background-color: #A0373C; border: 4px solid #f6985b; border-radius: 12px; color: #FFFFFF; display: block; margin-top: -10px !important; padding: 2px 14px 4px; position: relative; transition: all 0.4s ease-out 0s; } #copyright a { color: #FFFFFF; font-size: 14px; padding-right: 2px; text-shadow: 1px 1px #6dbaf5; } / / /I ABSTAINED FROM IMPORTING LINKS FROM DROPBOX SINCE THE CRASH /SO MOSTLY ADDED EVERYTHING TO THIS CODE / / / */ @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); @import url(http://fonts.googleapis.com/css?family=Viga); * { text-decoration: none; } body { background-attachment: fixed; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: url("http://i.imgur.com/kOwoC5N.jpg"); background-position: 80% 80%; background-repeat: no-repeat no-repeat; background-size: cover; font-family: Viga !important; } a { color: #4596f9; } a :hover { color: yellow !important; transition: all 0.4s ease 0s; } body { background-color: rgba(0, 0, 0, 0); color: #bbbbbb; } #list_surround { font-size: 14px; height: 200px; left: 5%; line-height: 1; padding-bottom: 10px; padding-left: 0; padding-right: 0; position: absolute; top: 50; width: 650px; } .table_header { padding-bottom: 4px; } .table_header span { display: none; } .table_header:nth-child(2) { text-align: left; } [cellspacing="0"] { line-height: 17px; } .td1, .td2 { background-color: rgba(255, 255, 255, 0.9); text-align: center; vertical-align: top; border-bottom:1px dashed #85d1e9; padding: 4px 0; transition: background-color 1s linear 0s; } .animetitle + small { color: #FFFFFF !important; visibility: visible !important; padding:2px; background: none repeat scroll 0% 0% #5c8ae6; border-radius:5px; box-shadow: inset 0 0 2px white; text-shadow: 0px 1px black; } #list_surround small { visibility: hidden; } td[class^="td"]:nth-child(2) { text-align: left; text-shadow: 1px 1px 3px #FFFFFF; } #list_surround a[href*="http://myanimelist.net/panel.php?go=edit"], #list_surround a[href*="http://myanimelist.net/editlist.php?type="], #list_surround a[href*="http://myanimelist.net/panel.php?go=add"] { margin-right: 10px; visibility: visible !important; } tr:hover td[class^="td"] { background-color: #7e99ff; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color: #FFFFFF; text-shadow: 0 0 1px #FFFFFF; /*transition: all 0.4s ease 0s;*/ } .table_headerLink { color: #FFFFFF ; line-height: 20px; } td[class^="td"]:nth-child(3), td[class^="td"]:nth-child(3) a { color: #4596f9; text-shadow: 1px 1px 3px #FFFFFF; } td[class^="td"]:nth-child(5), td[class^="td"]:nth-child(5) a { color: #4596f9; text-shadow: 1px 1px 3px #FFFFFF; } td[class^="td"]:first-child { border-left: 0px solid #92d6ed !important; } td[class^="td"]:last-child { border-right: 0px solid #FFFFFF !important; } .table_header { background-color: #6dbaf5; border-color: #FFFFFF; border-style: solid; border-width: 0px 0 0; letter-spacing: 1px; padding:2px; border-bottom: 3px solid #92d6ed; } .table_header:first-child { border-left: 0px solid #FFFFFF !important; border-radius: 16px 0 0 0; border-right: 0px; border-bottom: 3px solid #92d6ed !important; border-top: 0px solid #FFFFFF !important; } .table_header:nth-child(5) { border-radius: 0 16px 0 0; border-right: 0px solid #FFFFFF !important; } /* EDIT BUTTON */ #list_surround:nth-of-type(n+4) tbodysmall { letter-spacing: -25px; visibility: visible; color: transparent !important; } #list_surround:nth-of-type(n+4) tbody small a:first-of-type { display: inline-block !important; opacity: 0; } #list_surround:nth-of-type(n+4) tbody small a:last-of-type { display: none !important; } #list_surround:nth-of-type(n+4) tbody:hover small a:first-of-type { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none color: white ; display: inline-block !important; position: relative !important; text-align: left; visibility: visible; opacity: 1 !important; transition: all 0.8s ease 0s; letter-spacing: 1px; float: right; padding-left: 5px; } .td1 div, .td2{ color: visible !important; padding-left: 4px; } .td1 div:hover small a, .td2 div:hover small a { color:white; transition: all 0.8s ease 0s; } /* */ .category_totals { background-color: #55c2e3; border-top: 2px solid #FFFFFF; border-radius: 0 0 16px 16px; color: #FFFFFF; padding: 3px 3px 9px; text-align: center; } #grand_totals { background-color: #55c2e3; border-color: #FFFFFF; border-radius: 0 0 12px 12px; border-style: solid; border-width: 2px; color: #FFFFFF; display: block; margin-top: 35px; padding: 0 10px 10px; position: absolute; text-align: center; width: calc(100% - 24px); padding-top:10px; } td[class^="td"]:nth-of-type(2) { width: 454px !important; } /* HEADERS */ [class^="header_"] * { background-repeat: no-repeat no-repeat; font-size: 0; height: 345px; line-height: 24px; padding-bottom: 50px; 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); } .header_cw { background-color: transparent; background-image: url("http://i61.tinypic.com/qqpr36.png"); background-position: 50% 2px; background-repeat: no-repeat no-repeat; height: 350px; margin-bottom: -45px; } .header_completed { background-color: transparent; background-image: url("http://i59.tinypic.com/fu9jrd.png"); background-position: 50% 2px; background-repeat: no-repeat no-repeat; margin-bottom: -44px; z-index: 0; } .header_onhold { background-color: transparent; background-image: url("http://i60.tinypic.com/ifpjm0.png"); background-position: 50% 2px; background-repeat: no-repeat no-repeat; height: 200px; margin-bottom: -44px; } .header_dropped { background-color: transparent; background-image: url("http://i57.tinypic.com/htd455.png"); background-position: 50% 2px; background-repeat: no-repeat no-repeat; height: 200px; margin-bottom: -44px; } .header_ptw { background-color: transparent; background-image: url("http://i57.tinypic.com/4ljf34.jpg"); background-position: 50% 2px; background-repeat: no-repeat no-repeat; height: 200px; margin-bottom: -44px; } /* CATEGORY LINKS */ .status_selected:hover { opacity: 1 !important; transition: all 0.4s ease 0s; display:block; background-image:url(http://i62.tinypic.com/2lc41o6.png) !important; } .status_not_selected:hover { opacity: 1 !important; transition: all 0.4s ease 0s; right:20px !important; display:block; background-image:url(http://i62.tinypic.com/2lc41o6.png) !important; } .status_selected:hover a, .status_not_selected:hover a { color: #6495f0!important; text-shadow: 5px 5px 5px black; font-size: 15px; height: 75px; text-decoration: none; width: 150px !important; padding-top: 80px !important; text-align:center; transition:all 0.4s ease 0s; display:block; } .status_not_selected a { color:transparent; display:block; } .status_not_selected a, .status_selected a { height: 125px; width: 125px; transition: all 0.4s ease 0s; } .status_selected a { display: block; color:#83ceed; font-size: 15px; height: 125px; width: 150px; text-shadow: 2px 3px 2px black; padding-top:80px; word-wrap: break-word; } .status_selected { display: block; opacity: 1; transition: all 0.4s ease 0s; right:20px !important; background-image:url(http://i62.tinypic.com/2lc41o6.png) !important; } .status_not_selected { display: block; opacity: 1; transition: all 0.4s ease 0s; } #list_surround .status_selected, #list_surround .status_not_selected { background-attachment: scroll; background-color: transparent; background-image: url("http://i59.tinypic.com/4rzyjb.png"); background-repeat: no-repeat no-repeat ; display: block; height: 150px; right: 0%; padding: 0px; position: fixed; top: -5px; width: 150px; z-index:500; } #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-position: 0% 20% !important; top: 110px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background-attachment: scroll; background-color: transparent; background-position: 0px 40% !important; top:220px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-attachment: scroll; background-color: transparent; background-position: 0 60% !important; top:330px } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-attachment: scroll; background-color: transparent; background-position: 0 80% !important; background-repeat: repeat repeat; display: inline; top:440px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-attachment: scroll; background-color: transparent; background-position: 0 100% !important; background-repeat: no-repeat no-repeat; display: inline; top:550px; width: 150px; } /* COPYRIGHT */ #copyright:after { content: "Design by SylakentH and EvilWolf, thanks to DeviantArt!"; font-size: 12px; color:#85d1e9; } #copyright { background-color: #A0373C; border: 4px solid #f6985b; border-radius: 12px; color: #FFFFFF; display: block; margin-top: -10px !important; padding: 2px 14px 4px; position: relative; transition: all 0.4s ease-out 0s; } #copyright a { color: #FFFFFF; font-size: 14px; padding-right: 2px; text-shadow: 1px 1px #6dbaf5; } Thank you! |
Jan 12, 2016 12:57 AM
#3448
ashjnr said: body{ background: url(http://i50.tinypic.com/15878uo.jpg) no-repeat fixed top center; background-size: cover; font-family: Candara; font-size: 15px; color: #f0304f; } #list_surround{ position: absolute; width:650px; margin-bottom:50px; margin:auto; left:0px; right:300px; } .td1, .td2{ padding:3px; } .animetitle + small{ color:#f0304f !important; } .animetitle + small:before{ content: " ( "; } .animetitle + small:after{ content: " ) "; } td:nth-of-type(2) small{ color: #f0304f; font-size:13px; padding-right:10px; } td:nth-of-type(2) small a{ color: #f0304f; } .td1:nth-of-type(1), .td2:nth-of-type(1){ border-left: 2px solid #82caff !important; background: url(http://i49.tinypic.com/2vrv8ye.png) -15% ; } .td1:nth-of-type(5), .td2:nth-of-type(5){ border-right: 2px solid #82caff;; background: url(http://i49.tinypic.com/2vrv8ye.png) 86%; } .td1:nth-of-type(4), .td2:nth-of-type(4), td.table_header:nth-of-type(4){ background: url(http://i49.tinypic.com/2vrv8ye.png) 74% ; } .td1:nth-of-type(3), .td2:nth-of-type(3){ background: url(http://i49.tinypic.com/2vrv8ye.png) 67% ; } @media screen and (-webkit-min-device-pixel-ratio:0){ .td1:nth-of-type(3), .td2:nth-of-type(3){ background: url(http://i49.tinypic.com/2vrv8ye.png) 63% ; }} td.table_header:nth-of-type(3){ background: url(http://i49.tinypic.com/2vrv8ye.png) 67% ; padding-right:7px; } @media screen and (-webkit-min-device-pixel-ratio:0){ td.table_header:nth-of-type(3){ background: url(http://i49.tinypic.com/2vrv8ye.png) 63% ; padding-right:7px; }} .td1:nth-of-type(2), .td2:nth-of-type(2){ background: url(http://i49.tinypic.com/2vrv8ye.png) 1% ; } a, a:visited{ text-decoration:none; color: #2030f0; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2{ color:green; } .table_header{ background: url(http://i49.tinypic.com/2vrv8ye.png); padding:2px; font-size: 15px; color:#2030f0; } td.table_header:nth-of-type(1){ border-left: 2px solid #82caff !important; border-top: 2px solid #82caff !important; background: url(http://i49.tinypic.com/2vrv8ye.png) -15% ; border-radius: 10px 0px 0px 0px; } td.table_header:nth-of-type(5){ border-right: 2px solid #82caff;; border-top: 2px solid #82caff;; background: url(http://i49.tinypic.com/2vrv8ye.png) 86% ; border-radius: 0px 10px 0px 0px; } td.table_header:nth-of-type(2), td.table_header:nth-of-type(3), td.table_header:nth-of-type(4){ border-top: 2px solid #82caff;; } .category_totals{ background: url(http://i46.tinypic.com/n3lmgx.png); padding:2px; border-bottom: 2px solid #82caff; border-left: 2px solid #82caff;; border-right: 2px solid #82caff; font-size: 12px; padding-left:40px; border-radius: 0px 0px 10px 10px; } .borderRBL { background: url(http://i46.tinypic.com/n3lmgx.png) !important; border-left: 2px solid #82caff !important; border-right: 2px solid #82caff !important; padding-left:39px; font-size:11px; color:#2030f0 !important; } .borderRBL a, .borderRBL a:visited{ color:#f0304f !important; text-decoration:underline; } .borderRBL a:hover{ color:#f0304f!important; } #copyright{ background: url(http://i46.tinypic.com/n3lmgx.png); position:relative!important; text-align: center !important; width:644px; padding:2px; top:10px; font-size:11px; border: 2px solid #82caff; border-radius: 8px; color: #2030f0; margin-bottom:70px; } #copyright:after{ content: "List Design By Ushioo" !important; background: url(http://i46.tinypic.com/n3lmgx.png) !important; width:650px !important; Position:absolute!important; top:40px !important; left: -3px; color: #f0304f !important; border: 2px solid #82caff; border-radius: 8px; } #copyright a{ color:#2030f0; } #grand_totals{ display:none; } .header_title{ display:none; } .header_cw{ height: 200px; background-image:url(http://i48.tinypic.com/e69fya.png); background-repeat: no-repeat; position:relative; top:9px; } .header_completed{ height: 200px; background-image:url(http://i45.tinypic.com/nxs107.png); background-repeat: no-repeat; position:relative; top:4px; } .header_onhold{ height: 200px; background-image:url(http://i48.tinypic.com/nwzgaw.png); background-repeat: no-repeat; position:relative; top:4px; } .header_dropped{ height: 200px; background-image:url(http://i47.tinypic.com/28ch5pd.png); background-repeat: no-repeat; position:relative; top:4px; } .header_ptw{ height: 200px; background-image:url(http://i50.tinypic.com/t5rgw8.png); background-repeat: no-repeat; position:relative; top:4px; } td:nth-of-type(2) small a { display:none; } td:nth-of-type(2) small{ color:transparent; } This is the layout i want to use but i want to widen "List Surround". I did but this time i got 2 another problems. #list_surround{ position: absolute; width:650px; margin-bottom:50px; margin:auto; left:0px; right:300px; } I changed 650 to 900 and this is the result: Original view: How can i fix these 2 problems? Any solution? |
Jan 12, 2016 1:00 AM
#3449
I liked the themes created by Lirina. They are just amazing. Thank you (@Lirina). Sorry, for bringing this up now - I used the code mentioned in the post - http://myanimelist.net/forum/?topicid=1071911 but for some reason - it is giving some problems - can you please help me? I did try to tweak somethings to check whether the fixed the issue or not, but it seems my knowledge is insufficient and reverted it the original code as was posted. I only have the basic HTML knowledge. Since I'm don't have any knowledge of CSS at all, I used the code as it was. Did I miss something to do? I even changed the list preferences as mentioned there. It currently looks like this - http://myanimelist.net/mangalist/Sid92 |
Jan 12, 2016 10:00 AM
#3450
@From So, turns out I was slightly off... you can't put the image directly in the container, bc when you change the opacity of the container, anything in it becomes transparent too (including the link). Solution is to put the image on :before of the container. Here's what I came up with for the first one: #list_surround > table:first-of-type { position: fixed !important; display: block !important; left: 10px; width: 500px; height: 600px; top: 150px; } /*GENERAL FORMAT FOR ALL CONTAINERS*/ [class^="status"] { position: relative; width: 100px; height: 100px; font-size: 0; border-radius: 50px; transition: all 1s 0s ease; } /*IMAGE IN FIRST CONTAINER*/ [class^="status"]:nth-of-type(1):before { content: ""; background-image: url(http://i.imgur.com/t8FhOGT.png); background-size: 220px; background-repeat: no-repeat; background-position: -35px -20px; display: block; width: 100px; height: 100px; border: 3px solid yellow; border-radius: 50px; position: absolute !important; top: 0; transition: all 1s 0s ease; } /*MOVE BUTTONS ON HOVER (ALL)*/ [class^="status"]:hover { padding-left: 10px !important; } /*CHANGE IMAGE OPACITY ON HOVER (ALL)*/ [class^="status"]:hover:before { opacity: .5; } /*FORMAT FOR LINK CONTAINER*/ [class^="status"]:nth-of-type(1) a { display: block; height: 100px; width: 100px; } /*LINK TEXT*/ [class^="status"]:nth-of-type(1) a:before { content: "Watching"; position: relative !important; width: 100px; height: 100px; font-size: 13px !important; visibility: hidden; color: yellow; display: block; line-height: 100px; } /*VISIBLE TEXT ON HOVER*/ [class^="status"]:nth-of-type(1):hover a:before { visibility: visible !important; } link = [class^="status"]:nth-of-type(1) a I put the image in the container's :before, then positioned the link over the button. |
More topics from this board
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
381 |
by KabukiChouNights
»»
Sep 13, 10:56 AM |
|
» theme helpthreat - Jul 5 |
5 |
by Zaryf
»»
Aug 21, 5:46 AM |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1261 |
by KiranaStarr
»»
Aug 16, 5:48 PM |
|
» [CSS] ⭐️ Customize your List Cursor + Cursor FixesShishio-kun - Mar 8, 2021 |
30 |
by Shishio-kun
»»
Jul 28, 3:17 AM |
|
» How To Have Different Banner/Cover image & Background Image For Manga & Anime ListsYasminaRegina - Jul 25 |
2 |
by YasminaRegina
»»
Jul 26, 1:02 AM |