New
Oct 26, 2015 8:27 AM
#3251
Deago said: To enable tags, go to this page and check off their boxHello I'm new here and I'm really n00b at editing layouts First, I don't how to show "add" "edit" options next to anime titles :( Second, making another version that features "Tags" (for short reviews) I would appreciate if you can help me body { background-attachment: fixed; background-image: url("http://i.imgur.com/Wu5nbo6.jpg") !important; background-position: 0 0; background-repeat: no-repeat no-repeat; background-size: cover; color: #FFFFFF; font-family: Century Gothic; font-size: 12px; } #list_surround { left: 10%; margin: auto; position: absolute; width: 550px; } .td1, .td2 { padding: 3px; border-color:#000; } .animetitle + small { color: black!important; } .animetitle + small:before { } null { } td:nth-of-type(2) small { color: black; font-size: 10px; padding-right: 10px; } td:nth-of-type(2) small a { color: #F0304F; } .td1:nth-of-type(1), .td2:nth-of-type(1) { background-color: rgba(0, 0, 0, 0.5); border-left-style: solid !important; border-left-width: 2px !important; } .td1:nth-of-type(5), .td2:nth-of-type(5) { background-color: rgba(0, 0, 0, 0.5); border-right-style: solid; border-right-width: 2px; } .td1:nth-of-type(4), .td2:nth-of-type(4), td.table_header:nth-of-type(4) { background-color: rgba(0, 0, 0, 0.5); } .td1:nth-of-type(3), .td2:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); } .td1:nth-of-type(3), .td2:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); } td.table_header:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); padding-right: 7px; } td.table_header:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); } .td1:nth-of-type(2), .td2:nth-of-type(2) { background-color: rgba(0, 0, 0, 0.5); } a, a:visited { color: #FFFFFF; text-decoration: initial; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color: #A17A59; } .table_header { background-color: rgba(0, 0, 0, 0.5); font-size: 10px; padding: 2px; } td.table_header:nth-of-type(1) { border-bottom-right-radius: 0; border-left: 2px solid black !important; border-top: 2px solid black !important; border-top-left-radius: 10px; border-top-right-radius: 0; } td.table_header:nth-of-type(5) { border-bottom-right-radius: 0; border-right: 2px solid black !important; border-top: 2px solid black !important; border-top-left-radius: 0; border-top-right-radius: 10px; } td.table_header:nth-of-type(2), td.table_header:nth-of-type(3), td.table_header:nth-of-type(4) { border-top: 2px solid black !important; } .category_totals { background-color: rgba(0, 0, 0, 0.5); border-bottom-style: solid; border-bottom-width: 2px; border-left: 2px solid black !important; border-radius: 0 0 10px 10px; border-right: 2px solid black ; font-size: 10px; padding: 2px 2px 2px 40px; border-color:#000; } .borderRBL { border-left-style: solid !important; border-left-width: 2px !important; border-right: 2px solid black !important; color: #2030F0 !important; font-size: 11px; padding-left: 39px; } .borderRBL a, .borderRBL a:visited { color: #F0304F !important; text-decoration: initial; } .borderRBL a:hover { color: #F0304F !important; } #copyright { border-radius: 8px 8px 8px 8px; color: #000000; font-size: 11px; margin-bottom: 70px; padding: 2px; position: relative !important; text-align: center !important; top: 10px; width: 650px; } #copyright:after { border-radius: 8px 8px 8px 8px; color: #000000 !important; content: "List Design By Ushioo, Edited By Adelia23" !important; left: -3px; position: absolute !important; top: 40px !important; width: 650px !important; } #copyright a { color: #000000; } #grand_totals { display: none; } td:nth-of-type(2) small a { display: none; } td:nth-of-type(2) small { color: transparent; } [class^="header_"] * { font-size: 0; height: 10px; line-height: 24px; padding-bottom: 4px; text-align: left; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; color: #000000; display: inline-block; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } .header_cw { background-color: transparent; background-image: url("http://i59.tinypic.com/hrym4i.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_completed { background-color: transparent; background-image: url("http://i58.tinypic.com/xd7alw.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_onhold { background-color: transparent; background-image: url("http://i60.tinypic.com/28he681.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_dropped { background-color: transparent; background-image: url("http://i61.tinypic.com/2j2yykx.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_ptw { background-color: transparent; background-image: url("http://i58.tinypic.com/2qkigs6.jpg"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 45px; margin-bottom: 0; } .header_title { background-color: transparent !important; color: transparent; } #copyright { border-width: 2px; border-color: black ; border-style: solid; width: 542px; padding-bottom: 47px; background-color: rgba(1,1,1,.5); } #copyright, #copyright a, #copyright:after { color: white !important; } border-radius: 25px 25px 25px 25px; border-style: solid !important; border-width: 1px; border-color: black; } To show the edit button, remove this text from your CSS: td:nth-of-type(2) small a { display: none; } td:nth-of-type(2) small { color: transparent; } |
Oct 26, 2015 3:56 PM
#3252
Doomcat55 said: Deago said: To enable tags, go to this page and check off their boxHello I'm new here and I'm really n00b at editing layouts First, I don't how to show "add" "edit" options next to anime titles :( Second, making another version that features "Tags" (for short reviews) I would appreciate if you can help me body { background-attachment: fixed; background-image: url("http://i.imgur.com/Wu5nbo6.jpg") !important; background-position: 0 0; background-repeat: no-repeat no-repeat; background-size: cover; color: #FFFFFF; font-family: Century Gothic; font-size: 12px; } #list_surround { left: 10%; margin: auto; position: absolute; width: 550px; } .td1, .td2 { padding: 3px; border-color:#000; } .animetitle + small { color: black!important; } .animetitle + small:before { } null { } td:nth-of-type(2) small { color: black; font-size: 10px; padding-right: 10px; } td:nth-of-type(2) small a { color: #F0304F; } .td1:nth-of-type(1), .td2:nth-of-type(1) { background-color: rgba(0, 0, 0, 0.5); border-left-style: solid !important; border-left-width: 2px !important; } .td1:nth-of-type(5), .td2:nth-of-type(5) { background-color: rgba(0, 0, 0, 0.5); border-right-style: solid; border-right-width: 2px; } .td1:nth-of-type(4), .td2:nth-of-type(4), td.table_header:nth-of-type(4) { background-color: rgba(0, 0, 0, 0.5); } .td1:nth-of-type(3), .td2:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); } .td1:nth-of-type(3), .td2:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); } td.table_header:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); padding-right: 7px; } td.table_header:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); } .td1:nth-of-type(2), .td2:nth-of-type(2) { background-color: rgba(0, 0, 0, 0.5); } a, a:visited { color: #FFFFFF; text-decoration: initial; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color: #A17A59; } .table_header { background-color: rgba(0, 0, 0, 0.5); font-size: 10px; padding: 2px; } td.table_header:nth-of-type(1) { border-bottom-right-radius: 0; border-left: 2px solid black !important; border-top: 2px solid black !important; border-top-left-radius: 10px; border-top-right-radius: 0; } td.table_header:nth-of-type(5) { border-bottom-right-radius: 0; border-right: 2px solid black !important; border-top: 2px solid black !important; border-top-left-radius: 0; border-top-right-radius: 10px; } td.table_header:nth-of-type(2), td.table_header:nth-of-type(3), td.table_header:nth-of-type(4) { border-top: 2px solid black !important; } .category_totals { background-color: rgba(0, 0, 0, 0.5); border-bottom-style: solid; border-bottom-width: 2px; border-left: 2px solid black !important; border-radius: 0 0 10px 10px; border-right: 2px solid black ; font-size: 10px; padding: 2px 2px 2px 40px; border-color:#000; } .borderRBL { border-left-style: solid !important; border-left-width: 2px !important; border-right: 2px solid black !important; color: #2030F0 !important; font-size: 11px; padding-left: 39px; } .borderRBL a, .borderRBL a:visited { color: #F0304F !important; text-decoration: initial; } .borderRBL a:hover { color: #F0304F !important; } #copyright { border-radius: 8px 8px 8px 8px; color: #000000; font-size: 11px; margin-bottom: 70px; padding: 2px; position: relative !important; text-align: center !important; top: 10px; width: 650px; } #copyright:after { border-radius: 8px 8px 8px 8px; color: #000000 !important; content: "List Design By Ushioo, Edited By Adelia23" !important; left: -3px; position: absolute !important; top: 40px !important; width: 650px !important; } #copyright a { color: #000000; } #grand_totals { display: none; } td:nth-of-type(2) small a { display: none; } td:nth-of-type(2) small { color: transparent; } [class^="header_"] * { font-size: 0; height: 10px; line-height: 24px; padding-bottom: 4px; text-align: left; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; color: #000000; display: inline-block; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } .header_cw { background-color: transparent; background-image: url("http://i59.tinypic.com/hrym4i.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_completed { background-color: transparent; background-image: url("http://i58.tinypic.com/xd7alw.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_onhold { background-color: transparent; background-image: url("http://i60.tinypic.com/28he681.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_dropped { background-color: transparent; background-image: url("http://i61.tinypic.com/2j2yykx.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_ptw { background-color: transparent; background-image: url("http://i58.tinypic.com/2qkigs6.jpg"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 45px; margin-bottom: 0; } .header_title { background-color: transparent !important; color: transparent; } #copyright { border-width: 2px; border-color: black ; border-style: solid; width: 542px; padding-bottom: 47px; background-color: rgba(1,1,1,.5); } #copyright, #copyright a, #copyright:after { color: white !important; } border-radius: 25px 25px 25px 25px; border-style: solid !important; border-width: 1px; border-color: black; } To show the edit button, remove this text from your CSS: td:nth-of-type(2) small a { display: none; } td:nth-of-type(2) small { color: transparent; } You're awesome! thank you |
Oct 28, 2015 3:03 PM
#3253
I have a question but I don't know where to post it... anyway, why this selector works(#list_surround tab/le:) and this one (#list_surround table:) doesn't go trough the editor? Thanks! |
Oct 28, 2015 5:26 PM
#3254
twitcraft said: I have a question but I don't know where to post it... anyway, why this selector works(#list_surround tab/le:) and this one (#list_surround table:) doesn't go trough the editor? Thanks! I have heard that the CSS box has some problems and one of them is what you mentioned. You can use #list_surround table within imports tho |
Oct 30, 2015 3:05 AM
#3255
Hi all, I noticed my list (http://myanimelist.net/animelist/Whom_Are_You) doesn't show up the same on Chrome and Firefox, in that the table isn't aligned right on Chrome. Also, this cat eye thing keeps popping up which I assume is some Halloween thing, but when it does it causes these weird looking folder icons to appear on my list in Chrome, and the misalignment only started today. Chrome screenshot here (http://i.imgur.com/Lq1ctXK.png) and Firefox here (http://i.imgur.com/BOtOnkW.png). Any help would be greatly appreciated, as I suck at CSS and want to avoid doing any further damage. EDIT: Fixed the alignment, but the cat eyes showing up still causes the weird looking folders. |
Whom_Are_YouOct 30, 2015 4:02 AM
Oct 30, 2015 4:26 AM
#3256
Kinda freaking out LOL. From time to time my anime list would go completely black and show a pair of cat's eyes. Sometimes it would say look behind you in red. How do i remove this? |
My anime list "When does a man die? When they are shot through the heart by the bullet of a pistol? No. When they are ravaged by an incurable disease? No. When they drink a soup made from a poisonous mushroom!? No! It’s when… they are forgotten." - Dr Hiluluk |
Oct 30, 2015 2:27 PM
#3257
PhsychicEnigma said: LOL, whoever's hosting the cover import (probably Shishio) is pulling a Halloween prank. If you want to remove it, try adding this to your CSS: Kinda freaking out LOL. From time to time my anime list would go completely black and show a pair of cat's eyes. Sometimes it would say look behind you in red. How do i remove this? .category_totals:before {display: none !important;} .header_cw span:after {display: none !important;} .category_totals:after {display: none !important;} |
Doomcat55Oct 31, 2015 4:36 PM
Oct 30, 2015 5:32 PM
#3258
PhsychicEnigma said: Kinda freaking out LOL. From time to time my anime list would go completely black and show a pair of cat's eyes. Sometimes it would say look behind you in red. How do i remove this? It doesn't even work properly. In Chrome, the broken icons appear, and in Firefox 13, I only get a white "Look behind you." on the black background, and that's it |
Oct 30, 2015 6:05 PM
#3259
Serhiyko said: It doesn't even work properly. In Chrome, the broken icons appear, and in Firefox 13, I only get a white "Look behind you." on the black background, and that's it The prank seems to be 100% working properly in both of the latest browsers for me tho? FF 13 is very long past, we're on 40 now or something I think. That might be the problem for your Firefox. I've fixed the broken icon problem tho, if thats also what you were referring to Whom_Are_You said: this cat eye thing keeps popping up which I assume is some Halloween thing, but when it does it causes these weird looking folder icons to appear on my list in Chrome I've fixed the folder thingie, thanks for bringing it to my attn. Now you can fully enjoy the evil eyes and any more Halloween pranks to come, right on your list! Its scary central! |
Oct 30, 2015 8:29 PM
#3260
Bump? Lagann_Taku said: I need some help getting the "My Profile" button working when I hover over the icon in the top right of my list. The link is basically dead and seems to be dead for everyone who used the original design as a base. In particular I need this for Chrome since it doesn't even show up in IE. Here's the code: @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); @import "http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/CSS/TopMenu/TopMenu.css"; @import "http://fonts.googleapis.com/css?family=Raleway"; body { background-attachment:fixed !important; background-image:url(http://i.imgur.com/v6xp4iu.png); background-position:0 0; background-size:cover; } #list_surround { left:5% !important; position:absolute !important; } #inlineContent { display:inline-block !important; height:1200px !important; left:0 !important; margin:auto !important; position:fixed !important; right:0 !important; top:0 !important; width:500px !important; z-index:-1 !important; } #list_surround { background-attachment:scroll; background-color:transparent; background-image:url(http://i41.tinypic.com/2egb4gm.png); background-position:-18px -134px; background-repeat:no-repeat no-repeat; font-size:12px; line-height:1; margin:0 auto; padding-bottom:10px; padding-top:100px; width:600px; } body { color:#FFFFFF; font-family:Raleway; } a { -webkit-transition:all 0.25s ease-in-out 0s; color:#FFFFFF; text-decoration:none; text-shadow:none; transition:all 0.25s ease-in-out 0s; } a:hover { } .table_header { background-color:rgba(0, 0, 0, 0.8); height:20px; } .table_header:first-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:10px; border-top-right-radius:0; } .table_header:nth-of-type(2) { text-align:left; } .table_header:last-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:0; border-top-right-radius:10px; } .td1 { -webkit-transition:all 0.25s ease-in-out 0s; background-color:rgba(0, 0, 0, 0.498039); height:20px; transition:all 0.25s ease-in-out 0s; } .td2 { -webkit-transition:all 0.25s ease-in-out 0s; background-color:rgba(0, 0, 0, 0.498039); height:20px; transition:all 0.25s ease-in-out 0s; } tr:hover [class^="td"] { background-color:rgba(0, 150, 250, 0.8); } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align:left; } .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border:0; padding:4px; text-align:center; vertical-align:middle; } .table_header, .td1, .td2, .category_totals { line-height:20px; } .borderRBL { line-height:normal !important; } [cellspacing="0"] { line-height:20px; } .category_totals { background-color:rgba(0, 0, 0, 0.8); border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:0; border-top-right-radius:0; color:#FFFFFF; line-height:15px; text-align:center; } [class^="header_"] * { font-size:30px; height:60px; line-height:20px; padding-bottom:10px; padding-left:6px; text-align:center; text-shadow:black 2px 1px; vertical-align:bottom; } .header_title { border-bottom-left-radius:4px; border-bottom-right-radius:4px; border-top-left-radius:4px; border-top-right-radius:4px; color:#FFFFFF; display:inline-block; font-style:italic; height:auto; padding:0 8px 0 0; text-shadow:rgba(0, 0, 0, 0.14902) 0 1px 1px; } .hide { background-size: cover; left: 830px; top: 160px; height: 350px; width: 226px; padding-bottom: 0px; border-style: solid; border-color: white; border-top: 1px solid white;; border-left: 1px solid white; border-right: 1px solid white; border-bottom: 1px solid white; border-radius: 25px 25px 25px 25px; background-color: rgba(200, 5, 200, 0.75); background-position: center 50% !important; background-repeat: no-repeat !Important; display: block !important; position: fixed; visibility: hidden; opacity: 0; } /* PREVIEW MSG ABOVE COVERS Remove content: "preview"; to remove the PREVIEW text. Change the text in quotations after content to what you want it to say above your cover pic. Top and width controls the position of the text. */ .hide:before { color: white; background: transparent; content: "PREVIEW"; padding-bottom: 5px; position: absolute; text-align: center; width: 225px; top: -25px; border-radius: 25px 25px 0 0; } /* OTHER SETTINGS */ :hover + .hide { visibility: visible; opacity: 1; } #grand_totals { background-color:rgba(0, 0, 0, 0); border:0 none; border-bottom-left-radius:3px; border-bottom-right-radius:3px; border-top-left-radius:3px; border-top-right-radius:3px; color:#FFFFFF; line-height:20px; min-height:20px; padding:8px; text-align:center; vertical-align:middle; } #copyright { background-color:rgba(0, 0, 0, 0.8); border-bottom-left-radius:3px; border-bottom-right-radius:3px; border-top-left-radius:3px; border-top-right-radius:3px; color:#EEEEEE; line-height:17px; margin-top:10px; padding:8px; text-align:center; } .animetitle + small { color:#F5B800 !important; text-shadow:black 1px 1px; } #copyright::after { } #list_surround .status_selected, #list_surround .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/QpgjDDm.jpg); background-position:0 100%; background-repeat:no-repeat no-repeat; border:2px solid white !important; border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:15px; border-top-right-radius:0; display:block; height:90px; padding:0; position:fixed; right:-178px; top:103px; width:320px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/J6lX64E.jpg); background-repeat:no-repeat no-repeat; border-bottom-right-radius:0; border-top-left-radius:0; border-top-right-radius:0; top:195px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/oMNIdtn.jpg); top:287px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/xhzvNZH.jpg); background-repeat:repeat repeat; top:379px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/C7gX6iR.jpg); top:471px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background-attachment:scroll; background-color:transparent; background-image:url(http://i.imgur.com/ti8Q58A.jpg); background-position:0 0; background-repeat:no-repeat no-repeat; border-bottom-left-radius:20px; border-bottom-right-radius:20px; top:563px; width:320px; } .status_not_selected { -webkit-transition:all 0.4s ease 0s; opacity:0.7; right:-178px !important; transition:all 0.4s ease 0s; } .status_not_selected:hover { -webkit-transition:all 0.25s ease 0s; color:transparent; opacity:1; right:-20px !important; transition:all 0.25s ease 0s; } .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a { color:transparent; display:block; height:100px; opacity:0; width:320px; } .status_selected { display:block; } .status_selected:hover { -webkit-transition:all 0.25s ease-in-out; color:transparent; opacity:1; right:-20px !important; transition:all 0.25s ease-in-out; } .status_selected { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; } #list_surround table:nth-of-type(n+4):hover td:nth-of-type(3), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(4), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(5), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(6), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(7), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(8) { display: table-cell; } #list_surround small a:last-of-type { display: none !important; } .animetitle + small { visibility: visible !important; } #list_surround a[href*="http://myanimelist.net/panel.php?go=edit"], #list_surround a[href*="http://myanimelist.net/editlist.php?type="], #list_surround a[href*="http://myanimelist.net/panel.php?go=add"] { visibility: visible !important; margin-right: 10px } .td1:nth-of-type(6) small, .td2:nth-of-type(6) small, .td1:nth-of-type(5) small, .td2:nth-of-type(5) small, .td1:nth-of-type(4) small, .td2:nth-of-type(4) small { visibility: visible !important; } .td1:nth-of-type(6) small:hover, .td2:nth-of-type(6) small:hover, .td1:nth-of-type(5) small:hover, .td2:nth-of-type(5) small:hover, .td1:nth-of-type(4) small:hover, .td2:nth-of-type(4) small:hover{ text-decoration: underline; } Thanks in advance. |
Oct 30, 2015 8:42 PM
#3261
Shishio-kun said: I've fixed the folder thingie, thanks for bringing it to my attn. Now you can fully enjoy the evil eyes and any more Halloween pranks to come, right on your list! Its scary central! No worries, thanks for the help! |
Oct 31, 2015 2:01 AM
#3262
Shishio-kun said: FF 13 is very long past, we're on 40 now or something I think. That might be the problem for your Firefox. You can add support for older browsers by adding "-webkit-" and "-moz-" before every "animation-name", "animation-iteration-count" and "animation-duration" property You can see an example here: https://dl.dropboxusercontent.com/s/tyndfiirvk0lg5b/prank.css |
Oct 31, 2015 3:47 AM
#3263
Hi guys, could someone have a look at this piece of CSS code. I don't know what changed on MAL but my background and header won't display anymore. Thank you *EDIT* Nevermind, I didn't know that imageshack had changed how direct links worked so although the image would show when I clicked the url, it wouldn't let me direct link it into my list. So I just re-uploaded all list design stuff to Imgur and now its looking great again. Love my list and all the help this club has given me over the years :) |
Gouko_TenrouNov 1, 2015 5:35 AM
Oct 31, 2015 3:13 PM
#3264
My list stopped working, the logout is weird and the "Watching,Completed" images are gone but the text is there when you shade it |
Oct 31, 2015 5:05 PM
#3265
Stilen173 said: For the logout, add this to the bottom of your CSS:My list stopped working, the logout is weird and the "Watching,Completed" images are gone but the text is there when you shade it form[action*="logout"] { display: inline; } Not sure about the images, sorry. If you mean the bar on the bottom, it shows up fine for me: http://imgur.com/Rcvz6qT |
Nov 1, 2015 10:32 AM
#3266
For the logout, add this to the bottom of your CSS: form[action*="logout"] { display: inline; } Not sure about the images, sorry. If you mean the bar on the bottom, it shows up fine for me: http://imgur.com/Rcvz6qT Thanks! the logout is now fixed This is what i mean http://i39.tinypic.com/i1wk90.jpg |
Nov 2, 2015 5:58 AM
#3267
I need help with thing I want to cut the name and the girl but keep the filter I used the overlay thing |
Nov 2, 2015 4:12 PM
#3268
MADEVIL said: You can't, the image is already flattened to a JPG. Either get the original PSD file from whoever made it and disable the layers there, or manually cut the name out with an eraser. (I don't think background remover going to work here)I need help with thing I want to cut the name and the girl but keep the filter I used the overlay thing |
Nov 3, 2015 4:37 AM
#3269
Looking for some help to make an animelist into usable as a mangalist i've tried but i'm obviously a novice when it comes to css the theme i really liked is deviantMAL by jkun from this topic http://myanimelist.net/forum/?topicid=393503&show=50 code here: @charset "utf-8"; @import url(); .animetitle { background: none repeat scroll 0 0 transparent; border-radius: 0 0 0 0; color: #121516 !important; display: block; font-family: "Trebuchet MS"; font-size: 14px !important; font-weight: 600; height: 20px; left: 0; margin-top: 199px; overflow: hidden; padding: 2px; position: absolute; text-align: left; text-overflow: ellipsis; visibility: visible !important; white-space: nowrap; width: 170px !important; z-index: 1; } .animetitle:visited { } .animetitle:hover { color: #337287 !important; } .animetitle + small { color: #66CCFF; display: none; font-family: arial; font-size: 14px !important; font-weight: bold; margin-right: 0; margin-top: 190px; position: absolute; text-align: right; width: 163px !important; } .form { border-color: #ABABAB; border-style: solid; border-width: 1px; color: #000000; font-family: Verdana,Arial; font-size: 11px; padding: 2px; } .header_al { font-size: 16px; font-weight: bold; } .header_title { display: none; } .status_selected { background: none repeat scroll 0 0 #E18D43; display: block; } .status_selected a:after { display: block; } .status_Selected a:hover { color: #FFFFFF; display: block; } .status_not_selected { color: #337287; display: block; } .status_not_selected:hover { background: none repeat scroll 0 0 #348AA1; color: #337287; display: block; } .status_not_selected a:hover { color: #FFFFFF; display: block; } .status_not_selected a { color: #337287; display: block; } td.table_header:nth-of-type(1) { display: none; } .td1, .td2 { color: #000000; } .td1[width="70"], .td2[width="70"] { color: #8C9A88; line-height: 24px; margin-left: 2px; margin-top: 220px; position: relative; text-align: left; z-index: 2; } .td1[width="70"] a, .td2[width="70"] a { color: #8C9A88; font-size: 12px; } .td1[width="70"] a:hover, .td2[width="70"] a:hover { color: #8C9A88; } .td1[width="70"]:before, .td2[width="70"]:before { } .td1[width="70"]:after, .td2[width="70"]:after { content: " episodes"; } .td1[align="center"][width="20"] a, .td2[align="center"][width="20"] a { color: #FFFFFF !important; font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif; font-size: 14px !important; font-weight: 600; text-align: left; text-shadow: 2px 2px 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000; } .td1[align="center"][width="45"] a:hover, .td2[align="center"][width="45"] a:hover { } .td1[width="30"], .td2[width="30"] { display: none !important; } .td1[width="50"], .td2[width="50"] { display: none !important; } .td1[width="125"], .td2[width="125"] { display: none !important; } .td1[width="30"] + .td1 div small, .td2[width="30"] + .td2 div small { display: none; } .td1[width="30"] + .td1 div small a, .td2[width="30"] + .td2 div small a { color: #FFFFFF; } .td1[width="30"] + .td1 div small a:hover, .td2[width="30"] + .td2 div small a:hover { color: #FF00FF; } .td1[align="center"][width="45"], .td2[align="center"][width="45"] { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.3); display: none; margin-left: 100px; margin-top: -36px; position: relative; width: 20px; z-index: 2; } .table_header { display: none; } .table_header a { color: #000000; padding: 5px; } .table_header a:hover { color: #000000; } .table_header:nth-of-type(1):after { display: none; } .table_header:nth-of-type(2) { display: none; } .table_header:nth-of-type(3) { display: none; } .table_header:nth-of-type(4) { display: none; } .table_header:nth-of-type(5) { display: none; } .table_header:nth-of-type(6) { display: none; } html { padding-bottom: 20px; } a { color: #FFFFFF; text-decoration: none; } a:visited { text-decoration: none; } a:hover { color: #FFFFFF; text-decoration: none; } body { background-attachment: fixed; background-clip: border-box; background-color: #D4DFD0 !important; background-image: url(""); background-origin: padding-box; background-position: center center; background-repeat: no-repeat; background-size: cover; color: #000000; font: 12px/1.4em arial,helvetica,"liberation sans","dejavu sans condensed",sans-serif; } body:before { background-color: #FFFFFF; position:absolute;top: 0px; left: 50%;margin-left: -50%; background: url(); width: 100%; height: 50px; color: #FFF; content:''; } body:after { background-color: #FFFFFF; position:absolute; top: 0px;left: 50%; margin-left: -50%; background: url(); width: 100%; height: 50px; color: #FFF; content:''; z-index: -2; } #copyright { text-align: left !important; display:inline-block !important; float: left; margin-left: 20px; margin-top: 40px !important; height: 40px; width: 100%; color: rgba(140, 154, 136, 0.3) !important; text-decoration: none !important; padding-top: 40px; padding-left: 0px; background-image: url('http://i.imgur.com/beRIv.png'); background-repeat: no-repeat; } #copyright a { text-decoration: none !important; padding-top: 50px; color: rgba(140, 154, 136, 0.3) !important; } #copyright a:visited { color: rgba(140, 154, 136, 0.3) !important; } #copyright a:hover { color: rgba(140, 154, 136, 0.3) !important; } #grand_totals { text-align: center; } #list_surround { margin-top: 0px; margin-left: 160px; margin-right: auto; margin-bottom: auto; width: 90%; height: 48px; } #list_surround table:first-of-type { position: absolute; top: 40px; margin-left: -140px; width: 150px !important; height: 200px !important; color:#FFF; z-index: 4; padding: 0px; } #list_surround table:first-of-type a { padding: 0px 0px; text-align: left; font-size: 11px; font-family: Verdana,sans-serif; } #list_surround table:first-of-type a:hover { display: block; color: #ffffff; } #list_surround table:first-of-type td { display: block; position: absolute; width: 140px !important; height: auto !important; margin-left: 0px; padding: 5px 5px; } #list_surround table:first-of-type td:nth-of-type(1) { display: block; margin-left: -10px; margin-top: 30px; text-align: left; border-radius: 3px 3px 3px 3px; } #list_surround table:first-of-type td:nth-of-type(2) { display: block; margin-left: -10px; margin-top: 59px; text-align: left; border-radius: 3px 3px 3px 3px; } #list_surround table:first-of-type td:nth-of-type(3) { display: block; margin-left: -10px; margin-top: 88px; text-align: left; border-radius: 3px 3px 3px 3px; } #list_surround table:first-of-type td:nth-of-type(4) { display: block;margin-left: -10px;margin-top: 117px;text-align: left;border-radius: 3px 3px 3px 3px;} #list_surround table:first-of-type td:nth-of-type(5) { display: block; margin-left: -10px; margin-top: 146px; text-align: left; border-radius: 3px 3px 3px 3px; } #list_surround table:first-of-type td:nth-of-type(6) { display:none; } #list_surround table:nth-of-type(1n+4) { float: left; position: relative; width: 173px !important; height: 230px !important; margin-bottom: 10px; margin-top: 60px; margin-left: 25px; table-layout:fixed; } #list_surround table:last-of-type { display: none; } #list_surround table:nth-of-type(1n+4) td { position: absolute; width: 120px; } #list_surround .hide { display:inline-block !important; float: left; position: relative; margin-left: -173px; margin-top: 20px; margin-bottom: 10px; visibility: visible !important; height: 230px !important; width: 173px !important; background-position: center; border: 0px solid rgba(0,0,0,1.0); border-radius: 0px 0px 0px 0px; -webkit-background-size: 180px 240px; -moz-background-size: 120px 160px; -o-background-size: 120px 160px; background-size: 180px 240px; z-index: -1; box-shadow: 1px 2px 0px 0px rgba(0,0,0, 0.2); } #list_surround table:nth-of-type(1n+4) tbody { position: relative; } #list_surround table:nth-of-type(1n+4) { border-radius: 10px 10px 10px 10px; } #list_surround table:nth-of-type(1n+4):hover { } #list_surround table:nth-of-type(1n+4) tbody:hover .td1, #list_surround table:nth-of-type(1n+4) tbody:hover .td2 { visibility: visible !important; } #list_surround table:nth-of-type(1n+4) tbody:hover .animetitle + small { visibility: visible !important; } /* deviantMAL by jkun @ http://myanimelist.net/profile/jkun */ #mal_control_strip { position: absolute; top: 0px;margin: 0 auto !important; z-index: 7; background: url('http://i.imgur.com/dC1Mh.png') repeat-x scroll 0 0 #CCD9C8 !important; height: 41px !important; width: 100% !important; text-decoration: none !important; } #mal_control_strip a { text-decoration: none !important; } ----- What i would like help with is to add a my score to the animelist same for the mangalist, titledisplay, chapters, volumes and my score. As displayed in the picture below |
Nov 3, 2015 8:45 AM
#3270
jicks said: MADEVIL said: You can't, the image is already flattened to a JPG. Either get the original PSD file from whoever made it and disable the layers there, or manually cut the name out with an eraser. (I don't think background remover going to work here)I need help with thing I want to cut the name and the girl but keep the filter I used the overlay thing I'm the one who made it and if I disabled the layers the overlay filtter won't work |
Nov 3, 2015 11:45 AM
#3271
Hello everyone. I have a minor problem with opacity on my list. Exactly I mean parts of the list table with titles, scores etc. You can see it directly here: http://myanimelist.net/animelist/Laki98 . Looks weird? Yes, because now the opacity is "shut down" (I didn't make any changes, it just stopped working few days ago). How can I enable it again? -> it should be looking like here: |
Nov 3, 2015 1:41 PM
#3272
Laki98 said: Hello everyone. I have a minor problem with opacity on my list. Exactly I mean parts of the list table with titles, scores etc. You can see it directly here: http://myanimelist.net/animelist/Laki98 . Looks weird? Yes, because now the opacity is "shut down" (I didn't make any changes, it just stopped working few days ago). How can I enable it again? -> it should be looking like here: I know on the forum there are tutorials like this one, but I just cannot solve the problem (actually did my list-style myself, but it was a long time ago). Might someone help me? I would be so grateful. ADD THIS CODE TO YOUR LIST (I CHOOSE RANDOM COLOR, IF YOU DON'T LIKE YOU CAN MODIFY THEM) [size=90].category_totals, #grand_totals, #copyright {background-color: rgba(205, 24, 214, 0.69);} .td1, .td2 {background-color: rgba(79, 116, 200, 0.7);}[/size] cbt said: Looking for some help to make an animelist into usable as a mangalist i've tried but i'm obviously a novice when it comes to css the theme i really liked is deviantMAL by jkun from this topic http://myanimelist.net/forum/?topicid=393503&show=50 What i would like help with is to add a my score to the animelist same for the mangalist, titledisplay, chapters, volumes and my score. As displayed in the picture below MMMH, SOMETHING LIKE THIS IT'S OK? FOR ANIME AND MANGA |
Nadeko_Nov 4, 2015 6:24 AM
Nov 3, 2015 1:55 PM
#3273
Nadeko_ said: btw if you want your original color, find thisLaki98 said: Hello everyone. I have a minor problem with opacity on my list. Exactly I mean parts of the list table with titles, scores etc. You can see it directly here: http://myanimelist.net/animelist/Laki98 . Looks weird? Yes, because now the opacity is "shut down" (I didn't make any changes, it just stopped working few days ago). How can I enable it again? -> it should be looking like here: I know on the forum there are tutorials like this one, but I just cannot solve the problem (actually did my list-style myself, but it was a long time ago). Might someone help me? I would be so grateful. ADD THIS CODE TO YOUR LIST (I CHOOSE RANDOM COLOR, IF YOU DON'T LIKE YOU CAN MODIFY THEM) [size=90].category_totals, #grand_totals, #copyright {background-color: rgba(205, 24, 214, 0.69);} .td1, .td2 {background-color: rgba(79, 116, 200, 0.7);}[/size] .category_totals, .td1, .td2, #grand_totals, #copyright { background-image:url(http://img15.imageshack.us/img15/228/frame6518.png); border-width:0; padding:2px; } and change the link in red to this: http://i.imgur.com/pGJ7oQi.png (instead of what Nadeko_ did). As someone mentioned above, imageshack changed something about their links, so rehosting the pic on imgur solves the problem. |
Nov 3, 2015 2:09 PM
#3274
Indeed, it was a problem with Imageshack. Now it's working. Arigato guys, you're awesome! |
Nov 4, 2015 6:24 AM
#3275
Nadeko_ said: MMMH, SOMETHING LIKE THIS IT'S OK? yep that looks amazing! exactly what i was looking for |
Nov 4, 2015 7:01 AM
#3276
[quote=cbt][quote=Nadeko_]MMMH, SOMETHING LIKE THIS IT'S OK?[/quote]yep that looks amazing! exactly what i was looking for[/quote][/size] OK, THEN! FOR ANIMELIST: [PREVIEW] @import url([b]insert your cover css here[/b]); @import url(https://db.tt/s9Eqm9yY); {} USE THIS SETTING: × NUMBERS × SCORE × TYPE × EPISODES FOR MANGA: [PREVIEW] @import url([b]insert your cover css here[/b]); @import url(https://db.tt/zC3WTZ8O); {} USE THIS SETTING: × NUMBERS × SCORE × CHAPTERS × VOLUMES |
Nov 4, 2015 12:12 PM
#3278
cbt said: thankyouverymuch Nadeko_! works perfectly I’m glad you like it :) |
Nov 5, 2015 11:55 AM
#3279
Can someone help me to fix problem with banners @import url(http://storage.live.com/items/4A07C1EEED420167%21162); @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); /*bottom category menu*/ @import url("http://dl.dropbox.com/u/61796201/css/Suzune-chan/bottommenu.css") all; /*thin top bar*/ @import url("http://dl.dropbox.com/u/61796201/css/Suzune-chan/topbar.css") all; /*Fonts*/ @import url("http://fonts.googleapis.com/css?family=Tangerine"); @import url("http://fonts.googleapis.com/css?family=Lemon"); @import url("http://fonts.googleapis.com/css?family=Nova+Slim"); /* Got a question or want to learn more? Try this link: http://myanimelist.net/forum/?topicid=419405&show=0#post1 */ /* Theme for Suzune-chan by Al_eXs */ /* BACKGROUND IMAGE This is the main background image for the whole page. Change the image link to the background you want! If you're not seeing a background, make sure you are copied the entire CSS code or added any new background image codes correctly. Also your image link may be broken, try uploading a new background then! */ /* CURRENT BACKGROUND */ .header_cw:before { position: fixed; display: block; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-image: url(http://imageshack.us/a/img242/4272/frame01.jpg); background-repeat: no-repeat; background-position: center top; background-size: cover; z-index: -1; } /* COMPLETED BACKGROUND */ .header_completed:before { position: fixed; display: block; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-image: url(http://i1380.photobucket.com/albums/ah183/SpartehAnime/Alist/completed_zpseyw8c9fp.jpg); background-repeat: no-repeat; background-position: center top; background-size: cover; z-index: -1; } /* ON-HOLD BACKGROUND */ .header_onhold:before { position: fixed; display: block; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-image: url(http://i.imgur.com/mVqiP.jpg); background-repeat: no-repeat; background-position: center top; background-size: cover; z-index: -1; } /* DROPPED BACKGROUND */ .header_dropped:before { position: fixed; display: block; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-image: url(http://i.imgur.com/YeYj1.jpg); background-repeat: no-repeat; background-position: center top; background-size: cover; z-index: -1; } /* PLANNED BACKGROUND */ .header_ptw:before { position: fixed; display: block; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-image: url(http://i.imgur.com/CKMEP.jpg); background-repeat: no-repeat; background-position: center top; background-size: cover; z-index: -1; } /* Anime List only CURRENTLY WATCHING HEADER This is the header above currently watching/reading. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_cw { background-image:url(http://i1380.photobucket.com/albums/ah183/SpartehAnime/Alist/watching_zpsirebqtbl.jpg); height: 260px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* COMPLETED HEADER This is the header above your anime/manga that's completed. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_completed { background-image:url(http://i1380.photobucket.com/albums/ah183/SpartehAnime/Alist/completed_zps7fwcfnd5.jpg); height: 260px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* ON-HOLD HEADER This is the header above your animes/mangas on-hold. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_onhold { background-image:url(http://i1380.photobucket.com/albums/ah183/SpartehAnime/Alist/on-hold_zpsaslybptf.jpg); height: 260px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* DROPPED HEADER This is the header above your dropped animes/mangas. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_dropped { background-image:url(http://i1380.photobucket.com/albums/ah183/SpartehAnime/Alist/dropped_zpsob4u7vhh.jpg); height: 260px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* PLAN TO WATCH HEADER This is the header above the anime/manga you plan to see or read on your list. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_ptw { background-image:url(http://i1380.photobucket.com/albums/ah183/SpartehAnime/Alist/ptw_zpsjbk7anep.jpg); height: 260px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { display:none; } /* REMOVE HEADER COLOR You need this code to remove the default background colors from the header and override any related codes. You're supposed to use your own images or the default ones for the header, so this color is set to transparent so it won't get in the way. If you want the color back for some reason, remove this section. */ .header_title { background-color: transparent !important; } /* OTHER CODES Stuff I had to add after site changes. You need this otherwise the headers won't be visible. */ tbody {background-color: transparent; background-image: none;} /* REMOVE HEADER TEXT These codes remove the original text like "Completed" and "Currently Watching" from each category on the list. Some people will want the text gone so they can have their own custom logos. But if you want the text back, you have to remove this whole section. It shouldn't affect the images in any way. */ .header_title { color: gray !important; color: transparent !important; font-size: 1px !important; font-size: 0px !important; font-size: 0 !important; font-size: 0pt !important; } /* ANIME/MANGA TITLE FONTS This is the type and color of the anime/manga titles on your list, like Bleach, Vampire Knight, etc. */ .animetitle, .animetitle:visited { color:white; font-family: "Lemon"; font-size:14px; } /* LIST FONTS This is the type and color for more of the numbers, links, and words on the list itself! */ .td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright { color:white; font-size:14px; font-family: "Nova Slim"; } /* LIST WIDTH Use this to increase the width of your list! */ #list_surround { margin: -25px auto 0; width: 700px; } /* LIST POSITION Change "left" to "right" to switch the list side, or vice versa. */ #list_surround { position: absolute !important; left: 1px !important;} } /*OTHER CODES Important codes for the layout's setup. Please don't mess with these unless you know what you're doing. If you want to customize more on the page, use the link at the top of this CSS or ask in my club! */ body { font-weight: light; background-repeat: no-repeat; background-color: #FFFFFF; } a { text-decoration:none; } a:visited { text-decoration:none; } a:hover, a:visited:hover { color:rgba(255, 159, 89, 1); text-decoration:none; } .category_totals, .td1, .td2, #grand_totals, #copyright { background-image:url(http://i1232.photobucket.com/albums/ff367/coolspot21/frame6518-1.png); border-width:0; transition: all .8s ease 0s;/* CSS3 reference */ -o-transition: all .8s ease 0s; /* for Opera compatibility */ -ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */ -moz-transition: all .8s ease 0s; /* for Firefox compatibility */ -webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */ } .category_totals a, .td1 a, .td2 a, #grand_totals a, #copyright a { transition: all .8s ease 0s;/* CSS3 reference */ -o-transition: all .8s ease 0s; /* for Opera compatibility */ -ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */ -moz-transition: all .8s ease 0s; /* for Firefox compatibility */ -webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */ } .category_totals:HOVER, .td1:HOVER, .td2:HOVER, #grand_totals:HOVER, #copyright:HOVER {background-color:rgba(0, 0, 0, 0.400); border-width:0; } #copyright:after { content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info. Theme by Al_eXs."; } #copyright { margin-bottom: 30px !important; border-radius: 20px; padding: 10px; } .status_selected { background-color:black; padding:2px; color:white; text-decoration: blink; } .status_not_selected { background-color:black; padding:2px; color:white; } .status_selected a{ color:blue; } .status_not_selected a{ color:white; } .thickbox { color:cyan; font-family:fantasy; font-size:12px; } .header_title { padding:2px; } .table_header { border-width:0; font-weight:bold; padding:2px; } .category_totals { border-radius: 0px 0px 20px 20px; height: 40px; text-align: center; } #grand_totals { text-align: center; margin:0 auto; border-radius: 20px; padding: 10px 20px; width: 600px; } /* DISPLAY ANIME/MANGA TITLE PICS This is the CSS to control and reveal title pics. You'll need #more CSS or a import link to one in your CSS too. Got a question or want to learn more? Try this link: Change background-size from "auto" to "contain" and then adjust height to change the size of the pics. Move the pics to the left with margin-left, by adding an amount to it. */ .hide { background-size: auto; height: 310px; margin-left: 0px; background-position: left top; background-repeat: no-repeat; display: inline-block !important; margin-top: 5px; position: relative; width: 245px !important; } Problem is that when I added background code my banner suddenly shrank to this. How can I fix it? Also how could I move my banners for each category would be in glued to the top of screen? |
Signature removed. Please follow the signature rules, as defined in the Site & Forum Guidelines. |
Nov 5, 2015 6:01 PM
#3280
Sparteh said: Find the code for the headers and follow the instructions there (change height to padding-top). To get the headers to stay on the top of the screen, position: fixed; should work, but it made the headers disappear entirely when I tried it. Beyond me.Can someone help me to fix problem with banners @import url(http://storage.live.com/items/4A07C1EEED420167%21162); @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); /*bottom category menu*/ @import url("http://dl.dropbox.com/u/61796201/css/Suzune-chan/bottommenu.css") all; /*thin top bar*/ @import url("http://dl.dropbox.com/u/61796201/css/Suzune-chan/topbar.css") all; /*Fonts*/ @import url("http://fonts.googleapis.com/css?family=Tangerine"); @import url("http://fonts.googleapis.com/css?family=Lemon"); @import url("http://fonts.googleapis.com/css?family=Nova+Slim"); /* Got a question or want to learn more? Try this link: http://myanimelist.net/forum/?topicid=419405&show=0#post1 */ /* Theme for Suzune-chan by Al_eXs */ /* BACKGROUND IMAGE This is the main background image for the whole page. Change the image link to the background you want! If you're not seeing a background, make sure you are copied the entire CSS code or added any new background image codes correctly. Also your image link may be broken, try uploading a new background then! */ /* CURRENT BACKGROUND */ .header_cw:before { position: fixed; display: block; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-image: url(http://imageshack.us/a/img242/4272/frame01.jpg); background-repeat: no-repeat; background-position: center top; background-size: cover; z-index: -1; } /* COMPLETED BACKGROUND */ .header_completed:before { position: fixed; display: block; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-image: url(http://i1380.photobucket.com/albums/ah183/SpartehAnime/Alist/completed_zpseyw8c9fp.jpg); background-repeat: no-repeat; background-position: center top; background-size: cover; z-index: -1; } /* ON-HOLD BACKGROUND */ .header_onhold:before { position: fixed; display: block; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-image: url(http://i.imgur.com/mVqiP.jpg); background-repeat: no-repeat; background-position: center top; background-size: cover; z-index: -1; } /* DROPPED BACKGROUND */ .header_dropped:before { position: fixed; display: block; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-image: url(http://i.imgur.com/YeYj1.jpg); background-repeat: no-repeat; background-position: center top; background-size: cover; z-index: -1; } /* PLANNED BACKGROUND */ .header_ptw:before { position: fixed; display: block; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-image: url(http://i.imgur.com/CKMEP.jpg); background-repeat: no-repeat; background-position: center top; background-size: cover; z-index: -1; } /* Anime List only CURRENTLY WATCHING HEADER This is the header above currently watching/reading. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_cw { background-image:url(http://i1380.photobucket.com/albums/ah183/SpartehAnime/Alist/watching_zpsirebqtbl.jpg); height: 260px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* COMPLETED HEADER This is the header above your anime/manga that's completed. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_completed { background-image:url(http://i1380.photobucket.com/albums/ah183/SpartehAnime/Alist/completed_zps7fwcfnd5.jpg); height: 260px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* ON-HOLD HEADER This is the header above your animes/mangas on-hold. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_onhold { background-image:url(http://i1380.photobucket.com/albums/ah183/SpartehAnime/Alist/on-hold_zpsaslybptf.jpg); height: 260px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* DROPPED HEADER This is the header above your dropped animes/mangas. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_dropped { background-image:url(http://i1380.photobucket.com/albums/ah183/SpartehAnime/Alist/dropped_zpsob4u7vhh.jpg); height: 260px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* PLAN TO WATCH HEADER This is the header above the anime/manga you plan to see or read on your list. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_ptw { background-image:url(http://i1380.photobucket.com/albums/ah183/SpartehAnime/Alist/ptw_zpsjbk7anep.jpg); height: 260px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { display:none; } /* REMOVE HEADER COLOR You need this code to remove the default background colors from the header and override any related codes. You're supposed to use your own images or the default ones for the header, so this color is set to transparent so it won't get in the way. If you want the color back for some reason, remove this section. */ .header_title { background-color: transparent !important; } /* OTHER CODES Stuff I had to add after site changes. You need this otherwise the headers won't be visible. */ tbody {background-color: transparent; background-image: none;} /* REMOVE HEADER TEXT These codes remove the original text like "Completed" and "Currently Watching" from each category on the list. Some people will want the text gone so they can have their own custom logos. But if you want the text back, you have to remove this whole section. It shouldn't affect the images in any way. */ .header_title { color: gray !important; color: transparent !important; font-size: 1px !important; font-size: 0px !important; font-size: 0 !important; font-size: 0pt !important; } /* ANIME/MANGA TITLE FONTS This is the type and color of the anime/manga titles on your list, like Bleach, Vampire Knight, etc. */ .animetitle, .animetitle:visited { color:white; font-family: "Lemon"; font-size:14px; } /* LIST FONTS This is the type and color for more of the numbers, links, and words on the list itself! */ .td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright { color:white; font-size:14px; font-family: "Nova Slim"; } /* LIST WIDTH Use this to increase the width of your list! */ #list_surround { margin: -25px auto 0; width: 700px; } /* LIST POSITION Change "left" to "right" to switch the list side, or vice versa. */ #list_surround { position: absolute !important; left: 1px !important;} } /*OTHER CODES Important codes for the layout's setup. Please don't mess with these unless you know what you're doing. If you want to customize more on the page, use the link at the top of this CSS or ask in my club! */ body { font-weight: light; background-repeat: no-repeat; background-color: #FFFFFF; } a { text-decoration:none; } a:visited { text-decoration:none; } a:hover, a:visited:hover { color:rgba(255, 159, 89, 1); text-decoration:none; } .category_totals, .td1, .td2, #grand_totals, #copyright { background-image:url(http://i1232.photobucket.com/albums/ff367/coolspot21/frame6518-1.png); border-width:0; transition: all .8s ease 0s;/* CSS3 reference */ -o-transition: all .8s ease 0s; /* for Opera compatibility */ -ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */ -moz-transition: all .8s ease 0s; /* for Firefox compatibility */ -webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */ } .category_totals a, .td1 a, .td2 a, #grand_totals a, #copyright a { transition: all .8s ease 0s;/* CSS3 reference */ -o-transition: all .8s ease 0s; /* for Opera compatibility */ -ms-transition: all 08s ease 0s; /* for IE compatibility(I think) */ -moz-transition: all .8s ease 0s; /* for Firefox compatibility */ -webkit-transition: all .8s ease 0s; /* for Chrome, Safari compatibility */ } .category_totals:HOVER, .td1:HOVER, .td2:HOVER, #grand_totals:HOVER, #copyright:HOVER {background-color:rgba(0, 0, 0, 0.400); border-width:0; } #copyright:after { content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info. Theme by Al_eXs."; } #copyright { margin-bottom: 30px !important; border-radius: 20px; padding: 10px; } .status_selected { background-color:black; padding:2px; color:white; text-decoration: blink; } .status_not_selected { background-color:black; padding:2px; color:white; } .status_selected a{ color:blue; } .status_not_selected a{ color:white; } .thickbox { color:cyan; font-family:fantasy; font-size:12px; } .header_title { padding:2px; } .table_header { border-width:0; font-weight:bold; padding:2px; } .category_totals { border-radius: 0px 0px 20px 20px; height: 40px; text-align: center; } #grand_totals { text-align: center; margin:0 auto; border-radius: 20px; padding: 10px 20px; width: 600px; } /* DISPLAY ANIME/MANGA TITLE PICS This is the CSS to control and reveal title pics. You'll need #more CSS or a import link to one in your CSS too. Got a question or want to learn more? Try this link: Change background-size from "auto" to "contain" and then adjust height to change the size of the pics. Move the pics to the left with margin-left, by adding an amount to it. */ .hide { background-size: auto; height: 310px; margin-left: 0px; background-position: left top; background-repeat: no-repeat; display: inline-block !important; margin-top: 5px; position: relative; width: 245px !important; } Problem is that when I added background code my banner suddenly shrank to this. How can I fix it? Also how could I move my banners for each category would be in glued to the top of screen? |
Nov 5, 2015 6:03 PM
#3281
Nov 7, 2015 3:18 AM
#3282
So whenever I add more columns like "Tags" for example, I get something like this: How do I allow more columns? body { background-attachment: fixed; background-image: url("http://i.imgur.com/Wu5nbo6.jpg") !important; background-position: 0 0; background-repeat: no-repeat no-repeat; background-size: cover; color: #FFFFFF; font-family: Century Gothic; font-size: 12px; } #list_surround { left: 10%; margin: auto; position: absolute; width: 600px; } .td1, .td2 { padding: 3px; border-color:#000; } .animetitle + small { color: black!important; } .animetitle + small:before { } null { } td:nth-of-type(2) small { color: black; font-size: 10px; padding-right: 10px; } td:nth-of-type(2) small a { color: #F0304F; } .td1:nth-of-type(1), .td2:nth-of-type(1) { background-color: rgba(0, 0, 0, 0.5); border-left-style: solid !important; border-left-width: 2px !important; } /* Tags Row Width */ .td1:nth-of-type(5), .td2:nth-of-type(5) { background-color: rgba(0, 0, 0, 0.5); border-right-style: solid; border-right-width: 2px; } .td1:nth-of-type(4), .td2:nth-of-type(4), td.table_header:nth-of-type(4) { background-color: rgba(0, 0, 0, 0.5); } .td1:nth-of-type(3), .td2:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); } .td1:nth-of-type(3), .td2:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); } td.table_header:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); padding-right: 7px; } td.table_header:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); } .td1:nth-of-type(2), .td2:nth-of-type(2) { background-color: rgba(0, 0, 0, 0.5); } a, a:visited { color: #FFFFFF; text-decoration: initial; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color: #A17A59; } .table_header { background-color: rgba(0, 0, 0, 0.5); font-size: 10px; padding: 2px; } td.table_header:nth-of-type(1) { border-bottom-right-radius: 0; border-left: 2px solid black !important; border-top: 2px solid black !important; border-top-left-radius: 10px; border-top-right-radius: 0; } td.table_header:nth-of-type(5) { border-bottom-right-radius: 0; border-right: 2px solid black !important; border-top: 2px solid black !important; border-top-left-radius: 0; border-top-right-radius: 10px; } td.table_header:nth-of-type(2), td.table_header:nth-of-type(3), td.table_header:nth-of-type(4) { border-top: 2px solid black !important; } .category_totals { background-color: rgba(0, 0, 0, 0.5); border-bottom-style: solid; border-bottom-width: 2px; border-left: 2px solid black !important; border-radius: 0 0 10px 10px; border-right: 2px solid black ; font-size: 10px; padding: 2px 2px 2px 40px; border-color:#000; } .borderRBL { border-left-style: solid !important; border-left-width: 2px !important; border-right: 2px solid black !important; color: #2030F0 !important; font-size: 11px; padding-left: 39px; } .borderRBL a, .borderRBL a:visited { color: #F0304F !important; text-decoration: initial; } .borderRBL a:hover { color: #F0304F !important; } #copyright { border-radius: 8px 8px 8px 8px; color: #000000; font-size: 11px; margin-bottom: 70px; padding: 2px; position: relative !important; text-align: center !important; top: 10px; width: 650px; } #copyright:after { border-radius: 8px 8px 8px 8px; color: #000000 !important; content: "List Design By Ushioo, Edited By Adelia23 & Deago" !important; left: -3px; position: absolute !important; top: 40px !important; width: 650px !important; } #copyright a { color: #000000; } #grand_totals { display: none; } [class^="header_"] * { font-size: 0; height: 10px; line-height: 24px; padding-bottom: 4px; text-align: left; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; color: #000000; display: inline-block; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } .header_cw { background-color: transparent; background-image: url("http://i59.tinypic.com/hrym4i.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_completed { background-color: transparent; background-image: url("http://i58.tinypic.com/xd7alw.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_onhold { background-color: transparent; background-image: url("http://i60.tinypic.com/28he681.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_dropped { background-color: transparent; background-image: url("http://i61.tinypic.com/2j2yykx.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_ptw { background-color: transparent; background-image: url("http://i58.tinypic.com/2qkigs6.jpg"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 45px; margin-bottom: 0; } .header_title { background-color: transparent !important; color: transparent; } #copyright { border-width: 2px; border-color: black ; border-style: solid; width: 542px; padding-bottom: 47px; background-color: rgba(1,1,1,.5); } #copyright, #copyright a, #copyright:after { color: white !important; } border-radius: 25px 25px 25px 25px; border-style: solid !important; border-width: 1px; border-color: black; } |
Nov 7, 2015 6:19 PM
#3283
Deago said: It looks fine to me: http://puu.sh/ldpny/81878f0df8.pngSo whenever I add more columns like "Tags" for example, I get something like this: How do I allow more columns? body { background-attachment: fixed; background-image: url("http://i.imgur.com/Wu5nbo6.jpg") !important; background-position: 0 0; background-repeat: no-repeat no-repeat; background-size: cover; color: #FFFFFF; font-family: Century Gothic; font-size: 12px; } #list_surround { left: 10%; margin: auto; position: absolute; width: 600px; } .td1, .td2 { padding: 3px; border-color:#000; } .animetitle + small { color: black!important; } .animetitle + small:before { } null { } td:nth-of-type(2) small { color: black; font-size: 10px; padding-right: 10px; } td:nth-of-type(2) small a { color: #F0304F; } .td1:nth-of-type(1), .td2:nth-of-type(1) { background-color: rgba(0, 0, 0, 0.5); border-left-style: solid !important; border-left-width: 2px !important; } /* Tags Row Width */ .td1:nth-of-type(5), .td2:nth-of-type(5) { background-color: rgba(0, 0, 0, 0.5); border-right-style: solid; border-right-width: 2px; } .td1:nth-of-type(4), .td2:nth-of-type(4), td.table_header:nth-of-type(4) { background-color: rgba(0, 0, 0, 0.5); } .td1:nth-of-type(3), .td2:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); } .td1:nth-of-type(3), .td2:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); } td.table_header:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); padding-right: 7px; } td.table_header:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); } .td1:nth-of-type(2), .td2:nth-of-type(2) { background-color: rgba(0, 0, 0, 0.5); } a, a:visited { color: #FFFFFF; text-decoration: initial; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color: #A17A59; } .table_header { background-color: rgba(0, 0, 0, 0.5); font-size: 10px; padding: 2px; } td.table_header:nth-of-type(1) { border-bottom-right-radius: 0; border-left: 2px solid black !important; border-top: 2px solid black !important; border-top-left-radius: 10px; border-top-right-radius: 0; } td.table_header:nth-of-type(5) { border-bottom-right-radius: 0; border-right: 2px solid black !important; border-top: 2px solid black !important; border-top-left-radius: 0; border-top-right-radius: 10px; } td.table_header:nth-of-type(2), td.table_header:nth-of-type(3), td.table_header:nth-of-type(4) { border-top: 2px solid black !important; } .category_totals { background-color: rgba(0, 0, 0, 0.5); border-bottom-style: solid; border-bottom-width: 2px; border-left: 2px solid black !important; border-radius: 0 0 10px 10px; border-right: 2px solid black ; font-size: 10px; padding: 2px 2px 2px 40px; border-color:#000; } .borderRBL { border-left-style: solid !important; border-left-width: 2px !important; border-right: 2px solid black !important; color: #2030F0 !important; font-size: 11px; padding-left: 39px; } .borderRBL a, .borderRBL a:visited { color: #F0304F !important; text-decoration: initial; } .borderRBL a:hover { color: #F0304F !important; } #copyright { border-radius: 8px 8px 8px 8px; color: #000000; font-size: 11px; margin-bottom: 70px; padding: 2px; position: relative !important; text-align: center !important; top: 10px; width: 650px; } #copyright:after { border-radius: 8px 8px 8px 8px; color: #000000 !important; content: "List Design By Ushioo, Edited By Adelia23 & Deago" !important; left: -3px; position: absolute !important; top: 40px !important; width: 650px !important; } #copyright a { color: #000000; } #grand_totals { display: none; } [class^="header_"] * { font-size: 0; height: 10px; line-height: 24px; padding-bottom: 4px; text-align: left; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; color: #000000; display: inline-block; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } .header_cw { background-color: transparent; background-image: url("http://i59.tinypic.com/hrym4i.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_completed { background-color: transparent; background-image: url("http://i58.tinypic.com/xd7alw.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_onhold { background-color: transparent; background-image: url("http://i60.tinypic.com/28he681.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_dropped { background-color: transparent; background-image: url("http://i61.tinypic.com/2j2yykx.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_ptw { background-color: transparent; background-image: url("http://i58.tinypic.com/2qkigs6.jpg"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 45px; margin-bottom: 0; } .header_title { background-color: transparent !important; color: transparent; } #copyright { border-width: 2px; border-color: black ; border-style: solid; width: 542px; padding-bottom: 47px; background-color: rgba(1,1,1,.5); } #copyright, #copyright a, #copyright:after { color: white !important; } border-radius: 25px 25px 25px 25px; border-style: solid !important; border-width: 1px; border-color: black; } Did you change your CSS recently? |
Nov 8, 2015 8:38 AM
#3284
I decided to have a list with anime covers directely on it, like this one (all the other stuff like the banner don't interrest me, I only like the way that the Anime cover are set): http://myanimelist.net/animelist/Samuji I followed instructions from the Shishio-Kun's CSS guide, and I attempt on this result. http://myanimelist.net/animelist/AzoR-HarKs Which code should I add? Have I done an error? (here is my code: http://textup.fr/144682St ) Thanks a lot for your answers :D PS: Sorry if my english is bad, I'm French ;) ) |
Nov 8, 2015 11:46 PM
#3285
The AzoR-HarKs said: the thing is, for you to get that result you need to use the code for a layout called "square layout". You have used the guide to add covers to an existing layout but since you want the exact settings it's easier to take the finished layout and take away the parts you don't want.I decided to have a list with anime covers directely on it, like this one (all the other stuff like the banner don't interrest me, I only like the way that the Anime cover are set): http://myanimelist.net/animelist/Samuji I followed instructions from the Shishio-Kun's CSS guide, and I attempt on this result. http://myanimelist.net/animelist/AzoR-HarKs Which code should I add? Have I done an error? (here is my code: http://textup.fr/144682St ) Thanks a lot for your answers :D PS: Sorry if my english is bad, I'm French ;) ) |
Nov 9, 2015 9:36 AM
#3286
Thanks for your help! :D Here's the result :) myanimelist.net/animelist/BlueTroelix (cause that's not my real account huhu... ) |
Nov 9, 2015 5:13 PM
#3287
So I was wondering how you would go about trying to make your list in the style where instead of the entire list being moved on the webpage it would have its own box somewhere on the screen with its own scroll bar etc. I've seen it around and wanted to have a go at it :) thanks in advance! |
Nov 9, 2015 6:52 PM
#3288
Jowell said: Add this to the bottom of your CSS:So I was wondering how you would go about trying to make your list in the style where instead of the entire list being moved on the webpage it would have its own box somewhere on the screen with its own scroll bar etc. I've seen it around and wanted to have a go at it :) thanks in advance! #list_surround { height: 700px; overflow: auto; } and you can adjust the height by changing the px. |
Nov 9, 2015 10:01 PM
#3289
Doomcat55 said: Jowell said: Add this to the bottom of your CSS:So I was wondering how you would go about trying to make your list in the style where instead of the entire list being moved on the webpage it would have its own box somewhere on the screen with its own scroll bar etc. I've seen it around and wanted to have a go at it :) thanks in advance! #list_surround { height: 700px; overflow: auto; } and you can adjust the height by changing the px. thanks so much man :) |
Nov 10, 2015 4:27 AM
#3290
For some reason i can't get the image to take up the whole width. I even tried resizing it but it didn't make a difference. Thanks in advance! |
My anime list "When does a man die? When they are shot through the heart by the bullet of a pistol? No. When they are ravaged by an incurable disease? No. When they drink a soup made from a poisonous mushroom!? No! It’s when… they are forgotten." - Dr Hiluluk |
Nov 10, 2015 11:44 AM
#3291
Is there any way I can do header_cw:after { content:" "; background-color: #26448f; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; width: 12px; height: 12px; } and have it display without creating a line break? I'd like to position the bullet point that creates to be in front of the .header_title to style it separately. |
Nov 10, 2015 2:02 PM
#3292
PsychicEnigma said: For some reason i can't get the image to take up the whole width. I even tried resizing it but it didn't make a difference. Thanks in advance! I think the limit is 690 px on width. I'm not sure but I saw it somewhere in this tutorial http://myanimelist.net/forum/?topicid=544347 |
Nov 10, 2015 5:18 PM
#3293
Doomcat55 said: Deago said: It looks fine to me: http://puu.sh/ldpny/81878f0df8.pngSo whenever I add more columns like "Tags" for example, I get something like this: How do I allow more columns? body { background-attachment: fixed; background-image: url("http://i.imgur.com/Wu5nbo6.jpg") !important; background-position: 0 0; background-repeat: no-repeat no-repeat; background-size: cover; color: #FFFFFF; font-family: Century Gothic; font-size: 12px; } #list_surround { left: 10%; margin: auto; position: absolute; width: 600px; } .td1, .td2 { padding: 3px; border-color:#000; } .animetitle + small { color: black!important; } .animetitle + small:before { } null { } td:nth-of-type(2) small { color: black; font-size: 10px; padding-right: 10px; } td:nth-of-type(2) small a { color: #F0304F; } .td1:nth-of-type(1), .td2:nth-of-type(1) { background-color: rgba(0, 0, 0, 0.5); border-left-style: solid !important; border-left-width: 2px !important; } /* Tags Row Width */ .td1:nth-of-type(5), .td2:nth-of-type(5) { background-color: rgba(0, 0, 0, 0.5); border-right-style: solid; border-right-width: 2px; } .td1:nth-of-type(4), .td2:nth-of-type(4), td.table_header:nth-of-type(4) { background-color: rgba(0, 0, 0, 0.5); } .td1:nth-of-type(3), .td2:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); } .td1:nth-of-type(3), .td2:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); } td.table_header:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); padding-right: 7px; } td.table_header:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); } .td1:nth-of-type(2), .td2:nth-of-type(2) { background-color: rgba(0, 0, 0, 0.5); } a, a:visited { color: #FFFFFF; text-decoration: initial; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color: #A17A59; } .table_header { background-color: rgba(0, 0, 0, 0.5); font-size: 10px; padding: 2px; } td.table_header:nth-of-type(1) { border-bottom-right-radius: 0; border-left: 2px solid black !important; border-top: 2px solid black !important; border-top-left-radius: 10px; border-top-right-radius: 0; } td.table_header:nth-of-type(5) { border-bottom-right-radius: 0; border-right: 2px solid black !important; border-top: 2px solid black !important; border-top-left-radius: 0; border-top-right-radius: 10px; } td.table_header:nth-of-type(2), td.table_header:nth-of-type(3), td.table_header:nth-of-type(4) { border-top: 2px solid black !important; } .category_totals { background-color: rgba(0, 0, 0, 0.5); border-bottom-style: solid; border-bottom-width: 2px; border-left: 2px solid black !important; border-radius: 0 0 10px 10px; border-right: 2px solid black ; font-size: 10px; padding: 2px 2px 2px 40px; border-color:#000; } .borderRBL { border-left-style: solid !important; border-left-width: 2px !important; border-right: 2px solid black !important; color: #2030F0 !important; font-size: 11px; padding-left: 39px; } .borderRBL a, .borderRBL a:visited { color: #F0304F !important; text-decoration: initial; } .borderRBL a:hover { color: #F0304F !important; } #copyright { border-radius: 8px 8px 8px 8px; color: #000000; font-size: 11px; margin-bottom: 70px; padding: 2px; position: relative !important; text-align: center !important; top: 10px; width: 650px; } #copyright:after { border-radius: 8px 8px 8px 8px; color: #000000 !important; content: "List Design By Ushioo, Edited By Adelia23 & Deago" !important; left: -3px; position: absolute !important; top: 40px !important; width: 650px !important; } #copyright a { color: #000000; } #grand_totals { display: none; } [class^="header_"] * { font-size: 0; height: 10px; line-height: 24px; padding-bottom: 4px; text-align: left; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; color: #000000; display: inline-block; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } .header_cw { background-color: transparent; background-image: url("http://i59.tinypic.com/hrym4i.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_completed { background-color: transparent; background-image: url("http://i58.tinypic.com/xd7alw.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_onhold { background-color: transparent; background-image: url("http://i60.tinypic.com/28he681.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_dropped { background-color: transparent; background-image: url("http://i61.tinypic.com/2j2yykx.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_ptw { background-color: transparent; background-image: url("http://i58.tinypic.com/2qkigs6.jpg"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 45px; margin-bottom: 0; } .header_title { background-color: transparent !important; color: transparent; } #copyright { border-width: 2px; border-color: black ; border-style: solid; width: 542px; padding-bottom: 47px; background-color: rgba(1,1,1,.5); } #copyright, #copyright a, #copyright:after { color: white !important; } border-radius: 25px 25px 25px 25px; border-style: solid !important; border-width: 1px; border-color: black; } Did you change your CSS recently? No, Try to add more columns; (more than 5) and see what happens. I want to add 6 columns but when I do, it looks broken |
Nov 10, 2015 8:20 PM
#3294
Deago said: Oh, I thought you meant specifically the tags column. My bad. Either way, your code was full of extra stuff which was messing stuff up, so I simplified it to work no matter how many columns you add. Just replace your CSS with this: Doomcat55 said: Deago said: So whenever I add more columns like "Tags" for example, I get something like this: How do I allow more columns? body { background-attachment: fixed; background-image: url("http://i.imgur.com/Wu5nbo6.jpg") !important; background-position: 0 0; background-repeat: no-repeat no-repeat; background-size: cover; color: #FFFFFF; font-family: Century Gothic; font-size: 12px; } #list_surround { left: 10%; margin: auto; position: absolute; width: 600px; } .td1, .td2 { padding: 3px; border-color:#000; } .animetitle + small { color: black!important; } .animetitle + small:before { } null { } td:nth-of-type(2) small { color: black; font-size: 10px; padding-right: 10px; } td:nth-of-type(2) small a { color: #F0304F; } .td1:nth-of-type(1), .td2:nth-of-type(1) { background-color: rgba(0, 0, 0, 0.5); border-left-style: solid !important; border-left-width: 2px !important; } /* Tags Row Width */ .td1:nth-of-type(5), .td2:nth-of-type(5) { background-color: rgba(0, 0, 0, 0.5); border-right-style: solid; border-right-width: 2px; } .td1:nth-of-type(4), .td2:nth-of-type(4), td.table_header:nth-of-type(4) { background-color: rgba(0, 0, 0, 0.5); } .td1:nth-of-type(3), .td2:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); } .td1:nth-of-type(3), .td2:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); } td.table_header:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); padding-right: 7px; } td.table_header:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); } .td1:nth-of-type(2), .td2:nth-of-type(2) { background-color: rgba(0, 0, 0, 0.5); } a, a:visited { color: #FFFFFF; text-decoration: initial; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color: #A17A59; } .table_header { background-color: rgba(0, 0, 0, 0.5); font-size: 10px; padding: 2px; } td.table_header:nth-of-type(1) { border-bottom-right-radius: 0; border-left: 2px solid black !important; border-top: 2px solid black !important; border-top-left-radius: 10px; border-top-right-radius: 0; } td.table_header:nth-of-type(5) { border-bottom-right-radius: 0; border-right: 2px solid black !important; border-top: 2px solid black !important; border-top-left-radius: 0; border-top-right-radius: 10px; } td.table_header:nth-of-type(2), td.table_header:nth-of-type(3), td.table_header:nth-of-type(4) { border-top: 2px solid black !important; } .category_totals { background-color: rgba(0, 0, 0, 0.5); border-bottom-style: solid; border-bottom-width: 2px; border-left: 2px solid black !important; border-radius: 0 0 10px 10px; border-right: 2px solid black ; font-size: 10px; padding: 2px 2px 2px 40px; border-color:#000; } .borderRBL { border-left-style: solid !important; border-left-width: 2px !important; border-right: 2px solid black !important; color: #2030F0 !important; font-size: 11px; padding-left: 39px; } .borderRBL a, .borderRBL a:visited { color: #F0304F !important; text-decoration: initial; } .borderRBL a:hover { color: #F0304F !important; } #copyright { border-radius: 8px 8px 8px 8px; color: #000000; font-size: 11px; margin-bottom: 70px; padding: 2px; position: relative !important; text-align: center !important; top: 10px; width: 650px; } #copyright:after { border-radius: 8px 8px 8px 8px; color: #000000 !important; content: "List Design By Ushioo, Edited By Adelia23 & Deago" !important; left: -3px; position: absolute !important; top: 40px !important; width: 650px !important; } #copyright a { color: #000000; } #grand_totals { display: none; } [class^="header_"] * { font-size: 0; height: 10px; line-height: 24px; padding-bottom: 4px; text-align: left; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; color: #000000; display: inline-block; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } .header_cw { background-color: transparent; background-image: url("http://i59.tinypic.com/hrym4i.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_completed { background-color: transparent; background-image: url("http://i58.tinypic.com/xd7alw.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_onhold { background-color: transparent; background-image: url("http://i60.tinypic.com/28he681.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_dropped { background-color: transparent; background-image: url("http://i61.tinypic.com/2j2yykx.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_ptw { background-color: transparent; background-image: url("http://i58.tinypic.com/2qkigs6.jpg"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 45px; margin-bottom: 0; } .header_title { background-color: transparent !important; color: transparent; } #copyright { border-width: 2px; border-color: black ; border-style: solid; width: 542px; padding-bottom: 47px; background-color: rgba(1,1,1,.5); } #copyright, #copyright a, #copyright:after { color: white !important; } border-radius: 25px 25px 25px 25px; border-style: solid !important; border-width: 1px; border-color: black; } Did you change your CSS recently? No, Try to add more columns; (more than 5) and see what happens. I want to add 6 columns but when I do, it looks broken body { background-attachment: fixed; background-image: url("http://i.imgur.com/Wu5nbo6.jpg") !important; background-position: 0 0; background-repeat: no-repeat no-repeat; background-size: cover; color: #FFFFFF; font-family: Century Gothic; font-size: 12px; } #list_surround { left: 10%; margin: auto; position: absolute; width: 600px; } .td1, .td2 { padding: 3px; border-color:#000; } .animetitle + small { color: black!important; } .animetitle + small:before { } null { } td:nth-of-type(2) small { color: black; font-size: 10px; padding-right: 10px; } td:nth-of-type(2) small a { color: #F0304F; } .td1, .td2, .table_header { background-color: rgba(0, 0, 0, 0.5); } /* LEFT/RIGHT BORDERS */ .td1:first-of-type, .td2:first-of-type { border-left-style: solid !important; border-left-width: 2px !important; } .td1:last-of-type, .td2:last-of-type { border-right-style: solid; border-right-width: 2px; } /* TOP/BOTTOM BORDERS */ .table_header { font-size: 10px; padding: 2px; border-top: 2px solid black !important; } td.table_header:first-of-type { border-bottom-right-radius: 0; border-left: 2px solid black !important; border-top-left-radius: 10px; border-top-right-radius: 0; } td.table_header:last-of-type { border-bottom-right-radius: 0; border-right: 2px solid black !important; border-top-left-radius: 0; border-top-right-radius: 10px; } td.table_header:nth-of-type(3) { padding-right: 7px; } a, a:visited { color: #FFFFFF; text-decoration: initial; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color: #A17A59; } .category_totals { background-color: rgba(0, 0, 0, 0.5); border-bottom-style: solid; border-bottom-width: 2px; border-left: 2px solid black !important; border-radius: 0 0 10px 10px; border-right: 2px solid black ; font-size: 10px; padding: 2px 2px 2px 40px; border-color:#000; } .borderRBL { border-left-style: solid !important; border-left-width: 2px !important; border-right: 2px solid black !important; color: #2030F0 !important; font-size: 11px; padding-left: 39px; } .borderRBL a, .borderRBL a:visited { color: #F0304F !important; text-decoration: initial; } .borderRBL a:hover { color: #F0304F !important; } #copyright { border-radius: 8px 8px 8px 8px; color: #000000; font-size: 11px; margin-bottom: 70px; padding: 2px; position: relative !important; text-align: center !important; top: 10px; width: 650px; } #copyright:after { border-radius: 8px 8px 8px 8px; color: #000000 !important; content: "List Design By Ushioo, Edited By Adelia23 & Deago" !important; left: -3px; position: absolute !important; top: 40px !important; width: 650px !important; } #copyright a { color: #000000; } #grand_totals { display: none; } [class^="header_"] * { font-size: 0; height: 10px; line-height: 24px; padding-bottom: 4px; text-align: left; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; color: #000000; display: inline-block; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } .header_cw { background-color: transparent; background-image: url("http://i59.tinypic.com/hrym4i.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_completed { background-color: transparent; background-image: url("http://i58.tinypic.com/xd7alw.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_onhold { background-color: transparent; background-image: url("http://i60.tinypic.com/28he681.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_dropped { background-color: transparent; background-image: url("http://i61.tinypic.com/2j2yykx.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_ptw { background-color: transparent; background-image: url("http://i58.tinypic.com/2qkigs6.jpg"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 45px; margin-bottom: 0; } .header_title { background-color: transparent !important; color: transparent; } #copyright { border-width: 2px; border-color: black ; border-style: solid; width: 542px; padding-bottom: 47px; background-color: rgba(1,1,1,.5); } #copyright, #copyright a, #copyright:after { color: white !important; } border-radius: 25px 25px 25px 25px; border-style: solid !important; border-width: 1px; border-color: black; } SamPolus22 said: The width has changed quite a bit from the time that tutorial was made, and the width of the box is now 800 px. Just to be sure that nothing gets resized though, I would make it a bit smaller - my current profile is 794 px across.PsychicEnigma said: For some reason i can't get the image to take up the whole width. I even tried resizing it but it didn't make a difference. Thanks in advance! I think the limit is 690 px on width. I'm not sure but I saw it somewhere in this tutorial http://myanimelist.net/forum/?topicid=544347 |
Doomcat55Nov 10, 2015 8:34 PM
Nov 11, 2015 6:35 AM
#3295
Doomcat55 said: Deago said: Oh, I thought you meant specifically the tags column. My bad. Either way, your code was full of extra stuff which was messing stuff up, so I simplified it to work no matter how many columns you add. Just replace your CSS with this: Doomcat55 said: Deago said: It looks fine to me: http://puu.sh/ldpny/81878f0df8.pngSo whenever I add more columns like "Tags" for example, I get something like this: How do I allow more columns? body { background-attachment: fixed; background-image: url("http://i.imgur.com/Wu5nbo6.jpg") !important; background-position: 0 0; background-repeat: no-repeat no-repeat; background-size: cover; color: #FFFFFF; font-family: Century Gothic; font-size: 12px; } #list_surround { left: 10%; margin: auto; position: absolute; width: 600px; } .td1, .td2 { padding: 3px; border-color:#000; } .animetitle + small { color: black!important; } .animetitle + small:before { } null { } td:nth-of-type(2) small { color: black; font-size: 10px; padding-right: 10px; } td:nth-of-type(2) small a { color: #F0304F; } .td1:nth-of-type(1), .td2:nth-of-type(1) { background-color: rgba(0, 0, 0, 0.5); border-left-style: solid !important; border-left-width: 2px !important; } /* Tags Row Width */ .td1:nth-of-type(5), .td2:nth-of-type(5) { background-color: rgba(0, 0, 0, 0.5); border-right-style: solid; border-right-width: 2px; } .td1:nth-of-type(4), .td2:nth-of-type(4), td.table_header:nth-of-type(4) { background-color: rgba(0, 0, 0, 0.5); } .td1:nth-of-type(3), .td2:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); } .td1:nth-of-type(3), .td2:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); } td.table_header:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); padding-right: 7px; } td.table_header:nth-of-type(3) { background-color: rgba(0, 0, 0, 0.5); } .td1:nth-of-type(2), .td2:nth-of-type(2) { background-color: rgba(0, 0, 0, 0.5); } a, a:visited { color: #FFFFFF; text-decoration: initial; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color: #A17A59; } .table_header { background-color: rgba(0, 0, 0, 0.5); font-size: 10px; padding: 2px; } td.table_header:nth-of-type(1) { border-bottom-right-radius: 0; border-left: 2px solid black !important; border-top: 2px solid black !important; border-top-left-radius: 10px; border-top-right-radius: 0; } td.table_header:nth-of-type(5) { border-bottom-right-radius: 0; border-right: 2px solid black !important; border-top: 2px solid black !important; border-top-left-radius: 0; border-top-right-radius: 10px; } td.table_header:nth-of-type(2), td.table_header:nth-of-type(3), td.table_header:nth-of-type(4) { border-top: 2px solid black !important; } .category_totals { background-color: rgba(0, 0, 0, 0.5); border-bottom-style: solid; border-bottom-width: 2px; border-left: 2px solid black !important; border-radius: 0 0 10px 10px; border-right: 2px solid black ; font-size: 10px; padding: 2px 2px 2px 40px; border-color:#000; } .borderRBL { border-left-style: solid !important; border-left-width: 2px !important; border-right: 2px solid black !important; color: #2030F0 !important; font-size: 11px; padding-left: 39px; } .borderRBL a, .borderRBL a:visited { color: #F0304F !important; text-decoration: initial; } .borderRBL a:hover { color: #F0304F !important; } #copyright { border-radius: 8px 8px 8px 8px; color: #000000; font-size: 11px; margin-bottom: 70px; padding: 2px; position: relative !important; text-align: center !important; top: 10px; width: 650px; } #copyright:after { border-radius: 8px 8px 8px 8px; color: #000000 !important; content: "List Design By Ushioo, Edited By Adelia23 & Deago" !important; left: -3px; position: absolute !important; top: 40px !important; width: 650px !important; } #copyright a { color: #000000; } #grand_totals { display: none; } [class^="header_"] * { font-size: 0; height: 10px; line-height: 24px; padding-bottom: 4px; text-align: left; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; color: #000000; display: inline-block; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } .header_cw { background-color: transparent; background-image: url("http://i59.tinypic.com/hrym4i.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_completed { background-color: transparent; background-image: url("http://i58.tinypic.com/xd7alw.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_onhold { background-color: transparent; background-image: url("http://i60.tinypic.com/28he681.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_dropped { background-color: transparent; background-image: url("http://i61.tinypic.com/2j2yykx.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_ptw { background-color: transparent; background-image: url("http://i58.tinypic.com/2qkigs6.jpg"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 45px; margin-bottom: 0; } .header_title { background-color: transparent !important; color: transparent; } #copyright { border-width: 2px; border-color: black ; border-style: solid; width: 542px; padding-bottom: 47px; background-color: rgba(1,1,1,.5); } #copyright, #copyright a, #copyright:after { color: white !important; } border-radius: 25px 25px 25px 25px; border-style: solid !important; border-width: 1px; border-color: black; } Did you change your CSS recently? No, Try to add more columns; (more than 5) and see what happens. I want to add 6 columns but when I do, it looks broken body { background-attachment: fixed; background-image: url("http://i.imgur.com/Wu5nbo6.jpg") !important; background-position: 0 0; background-repeat: no-repeat no-repeat; background-size: cover; color: #FFFFFF; font-family: Century Gothic; font-size: 12px; } #list_surround { left: 10%; margin: auto; position: absolute; width: 600px; } .td1, .td2 { padding: 3px; border-color:#000; } .animetitle + small { color: black!important; } .animetitle + small:before { } null { } td:nth-of-type(2) small { color: black; font-size: 10px; padding-right: 10px; } td:nth-of-type(2) small a { color: #F0304F; } .td1, .td2, .table_header { background-color: rgba(0, 0, 0, 0.5); } /* LEFT/RIGHT BORDERS */ .td1:first-of-type, .td2:first-of-type { border-left-style: solid !important; border-left-width: 2px !important; } .td1:last-of-type, .td2:last-of-type { border-right-style: solid; border-right-width: 2px; } /* TOP/BOTTOM BORDERS */ .table_header { font-size: 10px; padding: 2px; border-top: 2px solid black !important; } td.table_header:first-of-type { border-bottom-right-radius: 0; border-left: 2px solid black !important; border-top-left-radius: 10px; border-top-right-radius: 0; } td.table_header:last-of-type { border-bottom-right-radius: 0; border-right: 2px solid black !important; border-top-left-radius: 0; border-top-right-radius: 10px; } td.table_header:nth-of-type(3) { padding-right: 7px; } a, a:visited { color: #FFFFFF; text-decoration: initial; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2 { color: #A17A59; } .category_totals { background-color: rgba(0, 0, 0, 0.5); border-bottom-style: solid; border-bottom-width: 2px; border-left: 2px solid black !important; border-radius: 0 0 10px 10px; border-right: 2px solid black ; font-size: 10px; padding: 2px 2px 2px 40px; border-color:#000; } .borderRBL { border-left-style: solid !important; border-left-width: 2px !important; border-right: 2px solid black !important; color: #2030F0 !important; font-size: 11px; padding-left: 39px; } .borderRBL a, .borderRBL a:visited { color: #F0304F !important; text-decoration: initial; } .borderRBL a:hover { color: #F0304F !important; } #copyright { border-radius: 8px 8px 8px 8px; color: #000000; font-size: 11px; margin-bottom: 70px; padding: 2px; position: relative !important; text-align: center !important; top: 10px; width: 650px; } #copyright:after { border-radius: 8px 8px 8px 8px; color: #000000 !important; content: "List Design By Ushioo, Edited By Adelia23 & Deago" !important; left: -3px; position: absolute !important; top: 40px !important; width: 650px !important; } #copyright a { color: #000000; } #grand_totals { display: none; } [class^="header_"] * { font-size: 0; height: 10px; line-height: 24px; padding-bottom: 4px; text-align: left; vertical-align: bottom; } .header_title { border-radius: 4px 4px 4px 4px; color: #000000; display: inline-block; height: auto; padding: 0 8px 0 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } .header_cw { background-color: transparent; background-image: url("http://i59.tinypic.com/hrym4i.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_completed { background-color: transparent; background-image: url("http://i58.tinypic.com/xd7alw.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_onhold { background-color: transparent; background-image: url("http://i60.tinypic.com/28he681.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_dropped { background-color: transparent; background-image: url("http://i61.tinypic.com/2j2yykx.png"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 50px; margin-bottom: 0; } .header_ptw { background-color: transparent; background-image: url("http://i58.tinypic.com/2qkigs6.jpg"); background-position: left 0; background-repeat: no-repeat no-repeat; height: 45px; margin-bottom: 0; } .header_title { background-color: transparent !important; color: transparent; } #copyright { border-width: 2px; border-color: black ; border-style: solid; width: 542px; padding-bottom: 47px; background-color: rgba(1,1,1,.5); } #copyright, #copyright a, #copyright:after { color: white !important; } border-radius: 25px 25px 25px 25px; border-style: solid !important; border-width: 1px; border-color: black; } Great! It works; thank you very much Doomcat |
Nov 11, 2015 6:58 AM
#3296
My list doesn't have the edit button for tags. The tags are there but I can't edit them from within the list without having to edit each entry from it's separate page. Can anyone help? Here is the code. /* ------------------------------------------------------------ */ /* Font imports */ @import url(http://fonts.googleapis.com/css?family=Roboto:400,300,500); @import url(http://fonts.googleapis.com/css?family=Alegreya+Sans+SC:800); /* ------------------------------------------------------------ */ /* Color scheme and setup */ #grand_totals, .category_totals, [class^=status_], [style^="float: right"] { display: none; } [href] { text-decoration: none; color: #555555; } [href]:hover, [id^="scor"]:hover { color: #a264cf; } tr:hover [class^="td"] { background-color: #9eb3e2; } #list_surround { position: relative; background-image: url('https://i.imgur.com/bYJ3by0.jpg'); background-repeat: no-repeat; background-position: right bottom; background-size: 38% auto; background-attachment: fixed; font-family: "Roboto", "Arial"; font-size: 13px; color: #555555; } #list_surround [cellpadding="0"] { position: relative; width: 55%; left: 5%; } [class^=header_] { margin-right: 100%; margin-top: 10px; white-space: nowrap; } .header_title { font-family: "Alegreya Sans SC", "Arial"; font-size: 32px; font-weight: 800; } .table_header { padding: 8px 9px 8px; } .td1 { background-color: #dae2f4; } .td2 { background-color: #FAFAFA; } .td1, .td2 { padding: 5px 8px 5px; border-right: 1px solid white; border-left: 1px solid white; } td[align="left"] { text-align: center; font-size: 12px; } #copyright { font-size: 12px; font-weight: 250; padding-top: 25px; margin-bottom: 25px; } /* ------------------------------------------------------------ */ /* Custom MAL banner setup */ #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered { box-sizing: border-box; background: none no-repeat scroll 100% 0 transparent; border: 0 none; height: 0 !important; overflow: hidden; padding: 32px 0 0 !important; position: fixed; right: 4px; text-align: right; top: 4px; z-index: 10; width: 210px !important; } #mal_cs_listinfo:hover, #mal_cs_links:hover, #mal_cs_otherlinks:hover, #mal_cs_powered:hover { height: 500px !important; padding-top: 32px !important; } #mal_cs_listinfo div, #mal_cs_links div, #mal_cs_otherlinks div, #mal_cs_powered div, #mal_cs_powered dd { background-color: transparent; font-size: 0 !important; line-height: 0; margin: 0 !important; opacity: 0; padding: 4px 0 0 !important; } #mal_cs_listinfo:hover div, #mal_cs_links:hover div, #mal_cs_otherlinks:hover div, #mal_cs_powered:hover div, #mal_cs_powered:hover dd { opacity: 1; } #mal_cs_listinfo div:nth-of-type(2), #mal_cs_links div:nth-of-type(2), #mal_cs_otherlinks div:nth-of-type(2), #mal_cs_powered div:nth-of-type(2) { padding: 4px 0 0 !important; } #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a { background-color: #555555 !important; display: block; font: 18px/17px 'Arial', sans-serif !important; font-weight: bold; margin: 4px 0 0; padding: 8px 8px 8px !important; text-decoration: none !important; } #mal_cs_listinfo a:nth-of-type(1), #mal_cs_links a:nth-of-type(1), #mal_cs_otherlinks a:nth-of-type(1), #mal_cs_powered a:nth-of-type(1) { margin-top: 0; } #mal_cs_listinfo a:hover, #mal_cs_links a:hover, #mal_cs_otherlinks a:hover { background-color: #444444 !important; } #mal_cs_listinfo strong a strong { font-weight: normal; } #mal_cs_otherlinks strong { color: #555555; display: block; font: bold 13px/17px 'Arial',sans-serif !important; padding: 0 4px 4px; } #mal_cs_otherlinks strong a { background: none transparent !important; color: #555555; display: inline; font: bold 13px/17px 'Arial',sans-serif !important; margin: 0; padding: 0; } #mal_cs_powered a { background-color: white !important; display: block !important; margin: 0 !important; opacity: 0; padding: 4px 0 0 !important; } #mal_cs_powered:hover a { opacity: 1; } #mal_cs_powered #search { padding: 8px 2px 0px 0px !important; position: relative; } #searchBox { box-sizing: border-box; border-color: #555555; border-style: solid; border-width: 1px; color: #555555; padding: 0 8px 0 !important; display: inline-block; font-family: arial, sans-serif; font-size: 14px !important; height: 32px; vertical-align: top; width: 210px !important; } #searchBox:hover, #searchBox:focus { border-color: #444444; } #searchListButton { display: none !important; } #mal_cs_listinfo { background-image: url("http://i.imgur.com/LSwncOV.jpg"); right: 106px !important; } #mal_cs_links { background-image: url("http://i.imgur.com/vl379rT.jpg"); right: 72px !important; z-index: 9; } #mal_cs_otherlinks { background-image: url("http://i.imgur.com/Rz4IQCY.jpg"); right: 38px !important; z-index: 8; } #mal_cs_powered { background-image: url("http://i.imgur.com/SzwsIrV.jpg"); right: 4px !important; z-index: 7; position: fixed !important; } #mal_control_strip { background: transparent !important; } #mal_cs_pic img { display: none !important; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 0 none !important; } |
Nov 11, 2015 8:59 AM
#3297
Ridoraun said: Change thisMy list doesn't have the edit button for tags. The tags are there but I can't edit them from within the list without having to edit each entry from it's separate page. Can anyone help? Here is the code. /* ------------------------------------------------------------ */ /* Font imports */ @import url(http://fonts.googleapis.com/css?family=Roboto:400,300,500); @import url(http://fonts.googleapis.com/css?family=Alegreya+Sans+SC:800); /* ------------------------------------------------------------ */ /* Color scheme and setup */ #grand_totals, .category_totals, [class^=status_], [style^="float: right"] { display: none; } [href] { text-decoration: none; color: #555555; } [href]:hover, [id^="scor"]:hover { color: #a264cf; } tr:hover [class^="td"] { background-color: #9eb3e2; } #list_surround { position: relative; background-image: url('https://i.imgur.com/bYJ3by0.jpg'); background-repeat: no-repeat; background-position: right bottom; background-size: 38% auto; background-attachment: fixed; font-family: "Roboto", "Arial"; font-size: 13px; color: #555555; } #list_surround [cellpadding="0"] { position: relative; width: 55%; left: 5%; } [class^=header_] { margin-right: 100%; margin-top: 10px; white-space: nowrap; } .header_title { font-family: "Alegreya Sans SC", "Arial"; font-size: 32px; font-weight: 800; } .table_header { padding: 8px 9px 8px; } .td1 { background-color: #dae2f4; } .td2 { background-color: #FAFAFA; } .td1, .td2 { padding: 5px 8px 5px; border-right: 1px solid white; border-left: 1px solid white; } td[align="left"] { text-align: center; font-size: 12px; } #copyright { font-size: 12px; font-weight: 250; padding-top: 25px; margin-bottom: 25px; } /* ------------------------------------------------------------ */ /* Custom MAL banner setup */ #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered { box-sizing: border-box; background: none no-repeat scroll 100% 0 transparent; border: 0 none; height: 0 !important; overflow: hidden; padding: 32px 0 0 !important; position: fixed; right: 4px; text-align: right; top: 4px; z-index: 10; width: 210px !important; } #mal_cs_listinfo:hover, #mal_cs_links:hover, #mal_cs_otherlinks:hover, #mal_cs_powered:hover { height: 500px !important; padding-top: 32px !important; } #mal_cs_listinfo div, #mal_cs_links div, #mal_cs_otherlinks div, #mal_cs_powered div, #mal_cs_powered dd { background-color: transparent; font-size: 0 !important; line-height: 0; margin: 0 !important; opacity: 0; padding: 4px 0 0 !important; } #mal_cs_listinfo:hover div, #mal_cs_links:hover div, #mal_cs_otherlinks:hover div, #mal_cs_powered:hover div, #mal_cs_powered:hover dd { opacity: 1; } #mal_cs_listinfo div:nth-of-type(2), #mal_cs_links div:nth-of-type(2), #mal_cs_otherlinks div:nth-of-type(2), #mal_cs_powered div:nth-of-type(2) { padding: 4px 0 0 !important; } #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a { background-color: #555555 !important; display: block; font: 18px/17px 'Arial', sans-serif !important; font-weight: bold; margin: 4px 0 0; padding: 8px 8px 8px !important; text-decoration: none !important; } #mal_cs_listinfo a:nth-of-type(1), #mal_cs_links a:nth-of-type(1), #mal_cs_otherlinks a:nth-of-type(1), #mal_cs_powered a:nth-of-type(1) { margin-top: 0; } #mal_cs_listinfo a:hover, #mal_cs_links a:hover, #mal_cs_otherlinks a:hover { background-color: #444444 !important; } #mal_cs_listinfo strong a strong { font-weight: normal; } #mal_cs_otherlinks strong { color: #555555; display: block; font: bold 13px/17px 'Arial',sans-serif !important; padding: 0 4px 4px; } #mal_cs_otherlinks strong a { background: none transparent !important; color: #555555; display: inline; font: bold 13px/17px 'Arial',sans-serif !important; margin: 0; padding: 0; } #mal_cs_powered a { background-color: white !important; display: block !important; margin: 0 !important; opacity: 0; padding: 4px 0 0 !important; } #mal_cs_powered:hover a { opacity: 1; } #mal_cs_powered #search { padding: 8px 2px 0px 0px !important; position: relative; } #searchBox { box-sizing: border-box; border-color: #555555; border-style: solid; border-width: 1px; color: #555555; padding: 0 8px 0 !important; display: inline-block; font-family: arial, sans-serif; font-size: 14px !important; height: 32px; vertical-align: top; width: 210px !important; } #searchBox:hover, #searchBox:focus { border-color: #444444; } #searchListButton { display: none !important; } #mal_cs_listinfo { background-image: url("http://i.imgur.com/LSwncOV.jpg"); right: 106px !important; } #mal_cs_links { background-image: url("http://i.imgur.com/vl379rT.jpg"); right: 72px !important; z-index: 9; } #mal_cs_otherlinks { background-image: url("http://i.imgur.com/Rz4IQCY.jpg"); right: 38px !important; z-index: 8; } #mal_cs_powered { background-image: url("http://i.imgur.com/SzwsIrV.jpg"); right: 4px !important; z-index: 7; position: fixed !important; } #mal_control_strip { background: transparent !important; } #mal_cs_pic img { display: none !important; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 0 none !important; } #grand_totals, .category_totals, [class^=status_], [style^="float: right"] { display: none; } #grand_totals, .category_totals, [class^=status_] { display: none; } |
Nov 11, 2015 9:22 AM
#3298
Doomcat55 said: Ridoraun said: Change thisMy list doesn't have the edit button for tags. The tags are there but I can't edit them from within the list without having to edit each entry from it's separate page. Can anyone help? Here is the code. /* ------------------------------------------------------------ */ /* Font imports */ @import url(http://fonts.googleapis.com/css?family=Roboto:400,300,500); @import url(http://fonts.googleapis.com/css?family=Alegreya+Sans+SC:800); /* ------------------------------------------------------------ */ /* Color scheme and setup */ #grand_totals, .category_totals, [class^=status_], [style^="float: right"] { display: none; } [href] { text-decoration: none; color: #555555; } [href]:hover, [id^="scor"]:hover { color: #a264cf; } tr:hover [class^="td"] { background-color: #9eb3e2; } #list_surround { position: relative; background-image: url('https://i.imgur.com/bYJ3by0.jpg'); background-repeat: no-repeat; background-position: right bottom; background-size: 38% auto; background-attachment: fixed; font-family: "Roboto", "Arial"; font-size: 13px; color: #555555; } #list_surround [cellpadding="0"] { position: relative; width: 55%; left: 5%; } [class^=header_] { margin-right: 100%; margin-top: 10px; white-space: nowrap; } .header_title { font-family: "Alegreya Sans SC", "Arial"; font-size: 32px; font-weight: 800; } .table_header { padding: 8px 9px 8px; } .td1 { background-color: #dae2f4; } .td2 { background-color: #FAFAFA; } .td1, .td2 { padding: 5px 8px 5px; border-right: 1px solid white; border-left: 1px solid white; } td[align="left"] { text-align: center; font-size: 12px; } #copyright { font-size: 12px; font-weight: 250; padding-top: 25px; margin-bottom: 25px; } /* ------------------------------------------------------------ */ /* Custom MAL banner setup */ #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered { box-sizing: border-box; background: none no-repeat scroll 100% 0 transparent; border: 0 none; height: 0 !important; overflow: hidden; padding: 32px 0 0 !important; position: fixed; right: 4px; text-align: right; top: 4px; z-index: 10; width: 210px !important; } #mal_cs_listinfo:hover, #mal_cs_links:hover, #mal_cs_otherlinks:hover, #mal_cs_powered:hover { height: 500px !important; padding-top: 32px !important; } #mal_cs_listinfo div, #mal_cs_links div, #mal_cs_otherlinks div, #mal_cs_powered div, #mal_cs_powered dd { background-color: transparent; font-size: 0 !important; line-height: 0; margin: 0 !important; opacity: 0; padding: 4px 0 0 !important; } #mal_cs_listinfo:hover div, #mal_cs_links:hover div, #mal_cs_otherlinks:hover div, #mal_cs_powered:hover div, #mal_cs_powered:hover dd { opacity: 1; } #mal_cs_listinfo div:nth-of-type(2), #mal_cs_links div:nth-of-type(2), #mal_cs_otherlinks div:nth-of-type(2), #mal_cs_powered div:nth-of-type(2) { padding: 4px 0 0 !important; } #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a { background-color: #555555 !important; display: block; font: 18px/17px 'Arial', sans-serif !important; font-weight: bold; margin: 4px 0 0; padding: 8px 8px 8px !important; text-decoration: none !important; } #mal_cs_listinfo a:nth-of-type(1), #mal_cs_links a:nth-of-type(1), #mal_cs_otherlinks a:nth-of-type(1), #mal_cs_powered a:nth-of-type(1) { margin-top: 0; } #mal_cs_listinfo a:hover, #mal_cs_links a:hover, #mal_cs_otherlinks a:hover { background-color: #444444 !important; } #mal_cs_listinfo strong a strong { font-weight: normal; } #mal_cs_otherlinks strong { color: #555555; display: block; font: bold 13px/17px 'Arial',sans-serif !important; padding: 0 4px 4px; } #mal_cs_otherlinks strong a { background: none transparent !important; color: #555555; display: inline; font: bold 13px/17px 'Arial',sans-serif !important; margin: 0; padding: 0; } #mal_cs_powered a { background-color: white !important; display: block !important; margin: 0 !important; opacity: 0; padding: 4px 0 0 !important; } #mal_cs_powered:hover a { opacity: 1; } #mal_cs_powered #search { padding: 8px 2px 0px 0px !important; position: relative; } #searchBox { box-sizing: border-box; border-color: #555555; border-style: solid; border-width: 1px; color: #555555; padding: 0 8px 0 !important; display: inline-block; font-family: arial, sans-serif; font-size: 14px !important; height: 32px; vertical-align: top; width: 210px !important; } #searchBox:hover, #searchBox:focus { border-color: #444444; } #searchListButton { display: none !important; } #mal_cs_listinfo { background-image: url("http://i.imgur.com/LSwncOV.jpg"); right: 106px !important; } #mal_cs_links { background-image: url("http://i.imgur.com/vl379rT.jpg"); right: 72px !important; z-index: 9; } #mal_cs_otherlinks { background-image: url("http://i.imgur.com/Rz4IQCY.jpg"); right: 38px !important; z-index: 8; } #mal_cs_powered { background-image: url("http://i.imgur.com/SzwsIrV.jpg"); right: 4px !important; z-index: 7; position: fixed !important; } #mal_control_strip { background: transparent !important; } #mal_cs_pic img { display: none !important; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 0 none !important; } #grand_totals, .category_totals, [class^=status_], [style^="float: right"] { display: none; } #grand_totals, .category_totals, [class^=status_] { display: none; } It worked! Thank you so much! |
Nov 12, 2015 6:00 PM
#3299
So I made this theme waaay back, and it was working well until I realised today, that the header titles (Watching, completed etc.) were missing. I checked and the images have yet to be deleted. Something like this: http://img585.imageshack.us/img585/2636/watching1.png I've also noticed that the background behind the title is also missing as well. CSS code is in the spoiler tag, so help would be greatly appreciated.. @import url(http://fonts.googleapis.com/css?family=Dosis:600); @import "https://dl.dropbox.com/s/qs1ucmwouyadrs8/anim.css"; /* Got a question or want to learn more? Try this link: http://myanimelist.net/forum/?topicid=419405&show=0#post1 */ /*SHINRYAKU IKA MUSUME STYLE */ /* BACKGROUND IMAGE This is the main background image for the whole page. Change the image link to the background you want! If you're not seeing a background, make sure you are copied the entire CSS code or added any new background image codes correctly. Also your image link may be broken, try uploading a new background then! */ body { background-image: url(http://i46.tinypic.com/2qnwl8p.jpg); } /* HEADER COLOR AND FONT These codes control the main headers' fonts and colors. Every header is above each part of your list (they say things like Currently Watching, Completed, Dropped, etc). */ .header_title { background-color:transparent; color: white; font-family: Georgia; font-size: 26px; } /* REMOVE HEADER TEXT These codes remove the original text like "Completed" and "Currently Watching" from each category on the list. Some people will want the text gone so they can have their own custom logos. But if you want the text back, you have to remove this whole section. It shouldn't affect the images in any way. */ .header_title { color: gray !important; color: transparent !important; font-size: 1px !important; font-size: 0px !important; font-size: 0 !important; font-size: 0pt !important; } .header_cw { background-image:url(http://img585.imageshack.us/img585/2636/watching1.png); height: 200px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* COMPLETED HEADER This is the header above completed animes and manga. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_completed { background-image:url(http://img21.imageshack.us/img21/5861/completed1.png); height: 200px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } .header_onhold { background-image:url(http://img194.imageshack.us/img194/4331/onhold1.png); height: 200px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } .header_dropped { background-image:url(http://img109.imageshack.us/img109/3251/dropped1.png); height: 200px; margin-bottom:-10px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } .header_ptw { background-image:url(http://img690.imageshack.us/img690/2504/plantowatch1.png); height: 200px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* SUB-HEADERS BACKGROUND COLOR COLOR Below each main header is the sub-header which says Score, Episodes, Tags, etc. */ .table_header { background-color: DodgerBlue; } /* ANIME/MANGA TITLE FONTS This is the type and color of the anime/manga titles on your list, like Bleach, Vampire Knight, etc. */ .animetitle, .animetitle:visited { color:white; font-family: microsoft sans-serif; font-size:22px; } /* LIST FONTS This is the type and color for more of the numbers, links, and words on the list itself! */ .td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright { color:wheat; font-family: microsoft sans-serif; font-size:14px; } /* LIST POSITION Change left to right to set it on the right side. Add to the px amount (5px by default) to change how far from the side it is. To center a list, see this tutorial: http://myanimelist.net/forum/?topicid=393437&show=0#post1 */ #list_surround { position: absolute !important; width: 600px; left: 0; margin: auto; right: 0; } /* CUSTOM BANNER "Background image" controls the image seen, change out the link to change the banner pic. Please leave everything else alone unless you know exactly what you're doing! */ #list_surround { background-image: url(http://img443.imageshack.us/img443/2731/bannerots.png); background-position: right top; background-repeat: no-repeat; padding-top: 179px; } .table_header:first-child { padding-left: .5em; border-top-left-radius: 5em; -o-border-top-left-radius: 5em; -moz-border-top-left-radius: 5em; -webkit-border-top-left-radius: 5em; } .table_header[width="70"] { padding-right: .5em; border-top-right-radius: 5em; -o-border-top-ight-radius: 5em; -moz-border-top-ight-radius: 5em; -webkit-border-top-ight-radius: 5em; } .category_totals { padding: 0 2em 0 2em !important; text-align: center; border-radius: 0 0 5em 5em; -o-border-tradius: 0 0 5em 5em; -moz-border-radius: 0 0 5em 5em; -webkit-border-radius: 0 0 5em 5em; } /* DISPLAY ANIME/MANGA TITLE PICS This is the CSS to control and reveal title pics. You'll need #more CSS or a import link to one in your CSS too. Got a question or want to learn more? Try this link: http://myanimelist.net/forum/?topicid=444247 Change background-size from "auto" to "contain" and then adjust height to change the size of the pics. They will resize automatically. */ .hide { background-size: auto; height: 310px; background-position: left top; background-repeat: no-repeat; display: inline-block !important; margin-top: 0; margin-left: 0; margin-bottom: 0; position: relative; width: 600px !important; background-color: rgba(17, 54, 81, .5); } /* REPOSITION MAIN BACKGROUND Change the position your background starts on your screen from with the two properties after "background-position" below. For example, the default code starts it from the left and top corner of the screen. You change 'left' and 'top' other properties, they can be any of the following: left, top, bottom, right, or center. So if you want your background to start from the center of the screen, use "center center". If you want it to start from the top and center, use "top center". If you want it to start from the right and top, use "right top" If you want it to start from the right and bottom, use "right bottom" and so forth... Additionally, you can change "left" to a % to determine how far left or right the background starts from. For example "30% top" will start the background from the top but 30% of the pic's width from the left of the layout. You can also change top to a % to change the amount you want to start it from the top or bottom. Finally, you can change the scrolling of the main background by changing 'fixed' to 'scroll', and 'cover' to 'auto'. */ body{ background-position: left top; background-attachment: fixed; background-size: cover; } /* SCORE FONT AND POSITIONING Fonts for the score and the text before it. The first set of codes controls the score for anyone logged in. The second is for when someone is logged out. The third is for the text before the score regardless. You can move it a certain pixel amount by adjusting the numbers after margin-top and right codes. */ .td1[align="center"][width="45"], .td2[align="center"][width="45"] { color: gold !important; font-size: 40px; margin-top: 65px; position: absolute; right: 209px; width: 70px; z-index: 5; } .td1[align="center"][width="45"] a, .td2[align="center"][width="45"] a { color: gold; font-size: 40px; } .td1[align="center"][width="45"]:before, .td2[align="center"][width="45"]:before { position: absolute; margin-left: -28px; color: white; white-space: nowrap; content: ''; font-size: 15px; } .table_header a[href$="order=4"] { background: transparent; position: absolute; right: 24px; top: 220px; width: 106px; } .table_header a[href$="order=4"] { background: black; } .table_header a[href$="order=4"]:before { color: white; content: " Sort by: "; font-size: 14px; font-weight: normal; } td[width="125"] { background: none repeat scroll 0 0 transparent; margin-left: -370px; margin-top: 141px; height: 146px !important; position: absolute; width: 359px; z-index: 10; } td[width="125"] a { font-size: 14px; color: white; } td[width="125"] small { margin-top: 130px; margin-left: -20px; position: absolute; } .table_header[width="125"] { display: none; } body { font-weight: light; background-repeat: no-repeat; background-color: black; } a { text-decoration:none; } a:visited { text-decoration:none; } a:hover, a:visited:hover { color:red; text-decoration:underline; } .category_totals, .td1, .td2, #grand_totals, #copyright { background-image:url(http://img854.imageshack.us/img854/565/72569673.png); border-width:0; padding:2px; } .td1[align="center"][width="45"]:hover, .td2[align="center"][width="45"]:hover { background: url("http://img15.imageshack.us/img15/228/frame6518.png");} .category_totals:HOVER, .td1:HOVER, .td2:HOVER, #grand_totals:HOVER, #copyright:HOVER {background-color:black; border-width:0; padding:2px; } #copyright:after { content: " Custom CSS by Shishio-kun. #more import by u531355. Google 'Shishio's Custom Lists' for more designs and info. "; } .status_selected { background-color:black; padding:2px; color:white; text-decoration: blink; } .status_not_selected { background-color:black; padding:2px; color:white; } .status_selected a{ color:blue; } .status_not_selected a{ color:white; } .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected{ position: relative !important; background: black; height: 20px !important; margin-left: 0px; margin-top:0px; width: 100px; padding-top: 0 !important; } .thickbox { color:cyan; font-family:fantasy; font-size:12px; } .header_title { height:32px; padding:2px; } .table_header { border-width:0; font-weight:bold; padding:2px; } .category_totals { height:30px; } #copyright, #grand_totals { text-align: center; margin:0 auto; } #inlineContent { background-image: url(http://i39.tinypic.com/2exr03p.png); background-position: center center; background-repeat: repeat-x; bottom: 0; display: block !important; height: 80px; left: 0; margin-bottom: 0; position: fixed; width: 100%; z-index: -1; } * { font-family:Dosis !important; } |
Nov 12, 2015 6:04 PM
#3300
Zelteza said: Imageshack changed something with their download links. Try using Imgur insteadSo I made this theme waaay back, and it was working well until I realised today, that the header titles (Watching, completed etc.) were missing. I checked and the images have yet to be deleted. Something like this: http://img585.imageshack.us/img585/2636/watching1.png I've also noticed that the background behind the title is also missing as well. CSS code is in the spoiler tag, so help would be greatly appreciated.. @import url(http://fonts.googleapis.com/css?family=Dosis:600); @import "https://dl.dropbox.com/s/qs1ucmwouyadrs8/anim.css"; /* Got a question or want to learn more? Try this link: http://myanimelist.net/forum/?topicid=419405&show=0#post1 */ /*SHINRYAKU IKA MUSUME STYLE */ /* BACKGROUND IMAGE This is the main background image for the whole page. Change the image link to the background you want! If you're not seeing a background, make sure you are copied the entire CSS code or added any new background image codes correctly. Also your image link may be broken, try uploading a new background then! */ body { background-image: url(http://i46.tinypic.com/2qnwl8p.jpg); } /* HEADER COLOR AND FONT These codes control the main headers' fonts and colors. Every header is above each part of your list (they say things like Currently Watching, Completed, Dropped, etc). */ .header_title { background-color:transparent; color: white; font-family: Georgia; font-size: 26px; } /* REMOVE HEADER TEXT These codes remove the original text like "Completed" and "Currently Watching" from each category on the list. Some people will want the text gone so they can have their own custom logos. But if you want the text back, you have to remove this whole section. It shouldn't affect the images in any way. */ .header_title { color: gray !important; color: transparent !important; font-size: 1px !important; font-size: 0px !important; font-size: 0 !important; font-size: 0pt !important; } .header_cw { background-image:url(http://img585.imageshack.us/img585/2636/watching1.png); height: 200px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* COMPLETED HEADER This is the header above completed animes and manga. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_completed { background-image:url(http://img21.imageshack.us/img21/5861/completed1.png); height: 200px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } .header_onhold { background-image:url(http://img194.imageshack.us/img194/4331/onhold1.png); height: 200px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } .header_dropped { background-image:url(http://img109.imageshack.us/img109/3251/dropped1.png); height: 200px; margin-bottom:-10px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } .header_ptw { background-image:url(http://img690.imageshack.us/img690/2504/plantowatch1.png); height: 200px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* SUB-HEADERS BACKGROUND COLOR COLOR Below each main header is the sub-header which says Score, Episodes, Tags, etc. */ .table_header { background-color: DodgerBlue; } /* ANIME/MANGA TITLE FONTS This is the type and color of the anime/manga titles on your list, like Bleach, Vampire Knight, etc. */ .animetitle, .animetitle:visited { color:white; font-family: microsoft sans-serif; font-size:22px; } /* LIST FONTS This is the type and color for more of the numbers, links, and words on the list itself! */ .td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright { color:wheat; font-family: microsoft sans-serif; font-size:14px; } /* LIST POSITION Change left to right to set it on the right side. Add to the px amount (5px by default) to change how far from the side it is. To center a list, see this tutorial: http://myanimelist.net/forum/?topicid=393437&show=0#post1 */ #list_surround { position: absolute !important; width: 600px; left: 0; margin: auto; right: 0; } /* CUSTOM BANNER "Background image" controls the image seen, change out the link to change the banner pic. Please leave everything else alone unless you know exactly what you're doing! */ #list_surround { background-image: url(http://img443.imageshack.us/img443/2731/bannerots.png); background-position: right top; background-repeat: no-repeat; padding-top: 179px; } .table_header:first-child { padding-left: .5em; border-top-left-radius: 5em; -o-border-top-left-radius: 5em; -moz-border-top-left-radius: 5em; -webkit-border-top-left-radius: 5em; } .table_header[width="70"] { padding-right: .5em; border-top-right-radius: 5em; -o-border-top-ight-radius: 5em; -moz-border-top-ight-radius: 5em; -webkit-border-top-ight-radius: 5em; } .category_totals { padding: 0 2em 0 2em !important; text-align: center; border-radius: 0 0 5em 5em; -o-border-tradius: 0 0 5em 5em; -moz-border-radius: 0 0 5em 5em; -webkit-border-radius: 0 0 5em 5em; } /* DISPLAY ANIME/MANGA TITLE PICS This is the CSS to control and reveal title pics. You'll need #more CSS or a import link to one in your CSS too. Got a question or want to learn more? Try this link: http://myanimelist.net/forum/?topicid=444247 Change background-size from "auto" to "contain" and then adjust height to change the size of the pics. They will resize automatically. */ .hide { background-size: auto; height: 310px; background-position: left top; background-repeat: no-repeat; display: inline-block !important; margin-top: 0; margin-left: 0; margin-bottom: 0; position: relative; width: 600px !important; background-color: rgba(17, 54, 81, .5); } /* REPOSITION MAIN BACKGROUND Change the position your background starts on your screen from with the two properties after "background-position" below. For example, the default code starts it from the left and top corner of the screen. You change 'left' and 'top' other properties, they can be any of the following: left, top, bottom, right, or center. So if you want your background to start from the center of the screen, use "center center". If you want it to start from the top and center, use "top center". If you want it to start from the right and top, use "right top" If you want it to start from the right and bottom, use "right bottom" and so forth... Additionally, you can change "left" to a % to determine how far left or right the background starts from. For example "30% top" will start the background from the top but 30% of the pic's width from the left of the layout. You can also change top to a % to change the amount you want to start it from the top or bottom. Finally, you can change the scrolling of the main background by changing 'fixed' to 'scroll', and 'cover' to 'auto'. */ body{ background-position: left top; background-attachment: fixed; background-size: cover; } /* SCORE FONT AND POSITIONING Fonts for the score and the text before it. The first set of codes controls the score for anyone logged in. The second is for when someone is logged out. The third is for the text before the score regardless. You can move it a certain pixel amount by adjusting the numbers after margin-top and right codes. */ .td1[align="center"][width="45"], .td2[align="center"][width="45"] { color: gold !important; font-size: 40px; margin-top: 65px; position: absolute; right: 209px; width: 70px; z-index: 5; } .td1[align="center"][width="45"] a, .td2[align="center"][width="45"] a { color: gold; font-size: 40px; } .td1[align="center"][width="45"]:before, .td2[align="center"][width="45"]:before { position: absolute; margin-left: -28px; color: white; white-space: nowrap; content: ''; font-size: 15px; } .table_header a[href$="order=4"] { background: transparent; position: absolute; right: 24px; top: 220px; width: 106px; } .table_header a[href$="order=4"] { background: black; } .table_header a[href$="order=4"]:before { color: white; content: " Sort by: "; font-size: 14px; font-weight: normal; } td[width="125"] { background: none repeat scroll 0 0 transparent; margin-left: -370px; margin-top: 141px; height: 146px !important; position: absolute; width: 359px; z-index: 10; } td[width="125"] a { font-size: 14px; color: white; } td[width="125"] small { margin-top: 130px; margin-left: -20px; position: absolute; } .table_header[width="125"] { display: none; } body { font-weight: light; background-repeat: no-repeat; background-color: black; } a { text-decoration:none; } a:visited { text-decoration:none; } a:hover, a:visited:hover { color:red; text-decoration:underline; } .category_totals, .td1, .td2, #grand_totals, #copyright { background-image:url(http://img854.imageshack.us/img854/565/72569673.png); border-width:0; padding:2px; } .td1[align="center"][width="45"]:hover, .td2[align="center"][width="45"]:hover { background: url("http://img15.imageshack.us/img15/228/frame6518.png");} .category_totals:HOVER, .td1:HOVER, .td2:HOVER, #grand_totals:HOVER, #copyright:HOVER {background-color:black; border-width:0; padding:2px; } #copyright:after { content: " Custom CSS by Shishio-kun. #more import by u531355. Google 'Shishio's Custom Lists' for more designs and info. "; } .status_selected { background-color:black; padding:2px; color:white; text-decoration: blink; } .status_not_selected { background-color:black; padding:2px; color:white; } .status_selected a{ color:blue; } .status_not_selected a{ color:white; } .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected{ position: relative !important; background: black; height: 20px !important; margin-left: 0px; margin-top:0px; width: 100px; padding-top: 0 !important; } .thickbox { color:cyan; font-family:fantasy; font-size:12px; } .header_title { height:32px; padding:2px; } .table_header { border-width:0; font-weight:bold; padding:2px; } .category_totals { height:30px; } #copyright, #grand_totals { text-align: center; margin:0 auto; } #inlineContent { background-image: url(http://i39.tinypic.com/2exr03p.png); background-position: center center; background-repeat: repeat-x; bottom: 0; display: block !important; height: 80px; left: 0; margin-bottom: 0; position: fixed; width: 100%; z-index: -1; } * { font-family:Dosis !important; } |
More topics from this board
» 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 |
|
Sticky: » 💚 [REPAIR STICKY] Repair/speed up layouts + Request layout fixes ( 1 2 )Shishio-kun - Nov 17, 2023 |
52 |
by LucaBalsa
»»
Jul 6, 2:02 PM |