New
Sep 4, 2015 11:32 AM
#3051
D_Cuy said: SamPolus22 said: I want to move the MAL listinfo element to the right so it goes out of the page and stay hidden to make a transition, but every time I move it to the right the page width expands. I can't do anything with the top bar because of this. It happens to every element in the top bar http://imgur.com/NsZyCR9 try this : body { overflow-x: hidden; } or this : #mal_cs_listinfo { position: fixed; } The first one worked thank you. I tried the second one before but I don't want my element to scroll when I scroll the page |
Sep 5, 2015 11:07 PM
#3052
Shishio-kun said: Doomcat55 said: I'm using the layout for displaying renders for my manga list, but I have a problem. When I search for a title that has adaptations in more than one category, the renders for both categories overlap like this: It also appears to be messing up the background - I had set the checkered background to change with the categories, but none of them should have a blue and black pattern. Help, please? a solution would be to give each render an additional checkered background right behind it. So this way when the images overlap there will only be one render shown at the time even if multiple backgrounds are present on screen at once. it could turn out complicated tho. You'd have to add multiple backgrounds with the topic on that. Then you'd have to make sure that extra background doesn't overlap over the list. if you try to do this on your own and can't get it, you can keep asking and sooner or later someone we should just be able to do this for you (may be harder to get help till next week) Sorry I didn't respond earlier, I've been putting off thinking about this. What a pain... I'd imagine that my best bet would be to take a screenshot of the renders on their respective pages, just to make sure everything lines up correctly. Still though, I would need to figure out what's going on with the blue and black background, and that has me completely stumped... any ideas? My CSS: /* BACKGROUND IMAGE It starts off just as all black nothingness, but you can add an image to it. The renders which change with each category will stay behind it. */ body { background-attachment: fixed; background-color: #1E90FF; background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black); background-size:60px 60px; } /* CHANGING HEADERS These headers have renders (high quality cut out images with transparent backgrounds). They change with each category change, changing the background. */ .header_cw { background: url(http://i.imgur.com/UxE8Rll.png) no-repeat scroll top right transparent; padding-top: 1000px; position: fixed; right: 100px; top: 35px; width: 1250px; z-index: -1; } .header_completed { background: url(http://i.imgur.com/46LCxfY.png) no-repeat scroll top right transparent; padding-top: 1000px; position: fixed; right: 0; top: 35px; width: 1250px; z-index: -1; } .header_onhold { background: url(http://i.imgur.com/rhgLZY1.png) no-repeat scroll top right transparent; padding-top: 1000px; position: fixed; right: 15%; top: 35px; width: 1250px; z-index: -1; } .header_dropped { background: url(http://i.imgur.com/W9GILjt.png) no-repeat scroll top right transparent; padding-top: 1000px; position: fixed; right: 25px; top: 0; width: 1250px; z-index: -1; } .header_ptw { background: url(http://i.imgur.com/7ZSFFKo.png) no-repeat scroll top right transparent; padding-top: 1000px; position: fixed; right: 180px; top: 35px; width: 1250px; z-index: -1; } /* FADE The fade seen from the bottom of the screen. It is in front of the list on the bottom. */ #inlineContent { background-image: url(http://i39.tinypic.com/2exr03p.png); background-position: center center; background-repeat: repeat-x; bottom: 0; display: block !important; height: 60px; left: 0; margin-bottom: 0; position: fixed; width: 100%; z-index: 50; } /* FONT COLORS */ .animetitle, .animetitle:visited { color: yellow; font-family: Lucida Console,Arial; font-size: 15px; } .td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright { color: aliceBlue; font-family: arial; } .status_selected a { color: white; } .status_not_selected a { color: white; } /* ALTERNATING ROW COLOR */ .td2 { background-color: transparent; /* OTHER CODES */ padding: 4px; } .td1:hover, .td2:hover { } .header_title { background-color: #282222; color: white; font-family: Tahoma,Arial; font-size: 48px; } .table_header { background-color: rgba(1, 181, 19, .65); } #list_surround { width: 650px; } #list_surround { left: 22px !important; position: absolute !important; } a:hover, a:visited:hover { color: red !important; text-decoration: underline; font-weight: bold; } .category_totals, .td1, .td2, #grand_totals, #copyright { background-image: url(""); border-width: 0; padding: 0; } .status_selected { background-color: rgba(0, 150, 185, 0.75); color: white; padding: 8px; text-decoration: blink; } .status_not_selected { background-color: rgba(1, 181, 19, .65); color: white; padding: 6px; } .thickbox { color: cyan; font-family: fantasy; font-size: 12px; } .header_title { height: 55px; padding: 4px; } .table_header { border-width: 0; font-weight: bold; padding: 0; } .category_totals { height: 30px; } #copyright, #grand_totals { margin: 0 auto; text-align: center; } .td1:hover, .td2:hover { background: url(http://i42.tinypic.com/snktjs.png) repeat scroll 0 0 transparent; } .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:tan; display:none; } #copyright:after { content: " Custom CSS by Erlbaum. Edits and backgrounds by Shishio-kun. Google 'Shishio's Custom Lists' for more designs or info."; } /* LIST BACKGROUND COLOR AND OPACITY Go to this page for instructions on customizing this part, under: Changing the list background color + opacity of the list background http://myanimelist.net/forum/?topicid=440525 */ .category_totals, .td1, .td2, #grand_totals, #copyright { background: rgba(0, 150, 185, 0.75) !important; } /*LIST BORDERS You can change the color of the border with border-color. You can increase the size of the border by increasing the px amount after any of the border-width codes. They're all set to 1px- make sure you increase all the border widths the same amount. Leave the border amounts that are set to zero alone. */ .status_selected, #grand_totals, .status_not_selected, .header_title, #copyright { border-color: rgba(1, 181, 19, .65); border-style: solid; border-width: 2px; } .td1, .td2, .table_header { border-color: rgba(1, 181, 19, .65); border-style: solid; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 0; border-top-width: 0 !important; } .category_totals{ border-color: rgba(1, 181, 19, .65); border-style: solid; border-width: 0 2px 2px; } ****************************/ /* Silver highlight and font resize on Hover */ /****************************/ tr:hover td.td1, tr:hover td.td2 { font-size: 16px !Important; -moz-transition: .4s ease; -webkit-transition: .4.5s ease; -o-transition: .4s ease; } tr:hover [class^="td"] { background-color: rgba(1, 181, 19, .75) !important; -moz-transition: .4s ease; -webkit-transition: .4s ease; -o-transition: .4s ease; } /* TOP BAR SETTINGS the numbers in parenthesis change the color and opacity of the bar. Get a color number easily from this page: http://www.css3maker.com/css-3-rgba. Change position to absolute to make the bar not scroll with the page. Change the background image out with the url in parenthesis. */ #mal_control_strip { background-color: rgba(1, 181, 19, .75) !important; background-image: url('http://i.imgur.com/hzPJrg4.png') !important; position:absolute; } /* OTHER CODES */ #mal_control_strip { background-position: bottom !important; top: -16px; height: 1px !important;} #mal_control_strip div {display:inline} #mal_cs_pic img {height: 24px !important; width: auto !important} #mal_cs_listinfo { width: 26% !important; height: 0 !important; padding-bottom: 18px !important; padding-top: 27px !important; background: ; position: absolute; top:-5px; border-right-color: rgba(0,0,0,0.8) !important;} #mal_cs_listinfo div:first-of-type:before {content:'Logged in as '} #mal_cs_listinfo div:last-of-type a {text-decoration: none} #mal_cs_listinfo div:last-of-type a:hover {text-decoration: underline} #mal_cs_listinfo div:last-of-type:before {font-weight:normal;content:'('} #mal_cs_listinfo div:last-of-type:after {font-weight:normal;content:')'} #mal_cs_links { width: 92px !important; height: 0 !important; padding-bottom: 20px !important; padding-top: 27px !important; left: 28%; top: -7px; position: absolute; border-right-color: rgba(0,0,0,0.8) !important;} #mal_cs_links a {background-image: url('http://i.imgur.com/PAEW4Q8.png') !important;width:16px;height:16px;content:none; display: inline-block !important;color: transparent !important; letter-spacing: -1ex;font-size:xx-small} #mal_cs_links div:first-of-type:after {content: 'a0'} #mal_cs_links div:first-of-type a:first-of-type {background-position: 0px 0px} #mal_cs_links div:first-of-type a:last-of-type {background-position: -16px 0px} #mal_cs_links div:last-of-type a:first-of-type {background-position:-32px 0px} #mal_cs_links div:last-of-type a:last-of-type {background-position:-48px 0px} #mal_cs_otherlinks strong{ width: 25% !important; height: 0 !important; padding-bottom: 20px !important; padding-top: 27px !important; left:28%; margin-left: 130px; top: -5px; position: absolute; border-right-color: rgba(0,0,0,0.8) !important;} #mal_cs_otherlinks div:last-of-type {float:right;padding-right:150px; margin-top: 19px;} #mal_cs_otherlinks div:first-of-type {float:left} #mal_cs_powered img {display:none} #searchBox {margin-top: 15px !important; width: 135px !important} #mal_control_strip img { margin-top: 15px !important; } #list_surround { position: absolute !important; top: 24px !important;} /* 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://i.imgur.com/QcaobCv.png); background-position: right top; background-repeat: no-repeat; padding-top: 217px; width: 658px; } /* CURRENT BACKGROUND */ .status_selected a[href*="status=1"]:before { background-color: #eee; background-image: linear-gradient(45deg, gray 25%, transparent 25%, transparent 75%, gray 75%, gray), linear-gradient(-45deg, gray 25%, transparent 25%, transparent 75%, gray 75%, gray) !important; background-size:60px 60px !important; position: fixed !important; top: 0 !important; left: 0 !important; height: 100% !important; width: 100% !important; display: block !important; content: "" !important; z-index: -1 !important; } /* COMPLETE BACKGROUND */ .status_selected a[href*="status=2"]:before { background-color: #FFFFFF; background-image: linear-gradient(45deg, blue 25%, transparent 25%, transparent 75%, blue 75%, blue), linear-gradient(-45deg, blue 25%, transparent 25%, transparent 75%, blue 75%, blue) !important; background-size:60px 60px !important; position: fixed !important; top: 0 !important; left: 0 !important; height: 100% !important; width: 100% !important; display: block !important; content: "" !important; z-index: -1 !important; } /* ON-HOLD BACKGROUND */ .status_selected a[href*="status=3"]:before { background-color: #FFFFFF; background-image: linear-gradient(45deg, #9FBFDF 25%, transparent 25%, transparent 75%, #9FBFDF 75%, #9FBFDF), linear-gradient(-45deg, #9FBFDF 25%, transparent 25%, transparent 75%, #9FBFDF 75%, #9FBFDF) !important; background-size:60px 60px !important; position: fixed !important; top: 0 !important; left: 0 !important; height: 100% !important; width: 100% !important; display: block !important; content: "" !important; z-index: -1 !important; } /* DROPPED BACKGROUND */ .status_selected a[href*="status=4"]:before { background-color: #FFFFFF; background-image: linear-gradient(45deg, red 25%, transparent 25%, transparent 75%, red 75%, red), linear-gradient(-45deg, red 25%, transparent 25%, transparent 75%, red 75%, red) !important; background-size:60px 60px !important; position: fixed !important; top: 0 !important; left: 0 !important; height: 100% !important; width: 100% !important; display: block !important; content: "" !important; z-index: -1 !important; } /* PLANNED BACKGROUND */ .status_selected a[href*="status=6"]:before { background-color: #eee; background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black) !important; background-size:60px 60px !important; position: fixed !important; top: 0 !important; left: 0 !important; height: 100% !important; width: 100% !important; display: block !important; content: "" !important; z-index: -1 !important; } #list_surround { width: 654px !important; } form[action*="logout"] { display: inline; } /* PRIORITY HIGHLIGHTS Quotation marks may glitch when pasted. */ .animetitle[href*="manga/64549/"], .animetitle[href*="manga/57015/"], .animetitle[href*="manga/55869/"], .animetitle[href*="manga/8144/"], .animetitle[href*="manga/19896/"] { font-weight: bold !important; } |
Sep 6, 2015 7:50 AM
#3053
Okay, so recently seeing the cards @SylakentH did with the TG images I thought of doing one of my own, since I've been not doing cards for a little now. which can be found here: http://tinyurl.com/pcoubte The issues I'm facing are getting that logo/watermark off, if anyone could describe the steps to take it off easily, I'd be happy if you could help me to get rid of it (it's the green logo thingy). I'd also like to know, if anyone could describe how to do the card shape similar to this one or of something more suitable for the card image: http://prntscr.com/8d93up The card shape can be seen in between the red and green bit, where it has that sort of custom shape. If you could help me out with those that'd be great, thanks |
Sep 6, 2015 8:24 AM
#3054
Voidaxell said: Okay, so recently seeing the cards @SylakentH did with the TG images I thought of doing one of my own, since I've been not doing cards for a little now. which can be found here: http://tinyurl.com/pcoubte The issues I'm facing are getting that logo/watermark off, if anyone could describe the steps to take it off easily, I'd be happy if you could help me to get rid of it (it's the green logo thingy). I'd also like to know, if anyone could describe how to do the card shape similar to this one or of something more suitable for the card image: http://prntscr.com/8d93up The card shape can be seen in between the red and green bit, where it has that sort of custom shape. If you could help me out with those that'd be great, thanks Have to get out there that if you're not using Photoshop at this point, you are seriously gimping yourself not only because of the lack of tools but because there are not alot of good ppl who can tell you how to do such things without PS Go to the layer window and click on the layer with the logo/watermark, then use the eraser tool to rub it out from the card. If the image is one single layer tho, then you have to start over and erase the logo from the render first while its separate, then recreate the image. Either find a premade-border with that shape and throw your stuff in, or if your card PSD is using a shape as the basis of the card template/border (which you should), you can raise and narrow the shape size with (I think) Free Transform, under Edit |
Sep 6, 2015 8:27 AM
#3055
Doomcat55 said: Shishio-kun said: Doomcat55 said: I'm using the layout for displaying renders for my manga list, but I have a problem. When I search for a title that has adaptations in more than one category, the renders for both categories overlap like this: It also appears to be messing up the background - I had set the checkered background to change with the categories, but none of them should have a blue and black pattern. Help, please? a solution would be to give each render an additional checkered background right behind it. So this way when the images overlap there will only be one render shown at the time even if multiple backgrounds are present on screen at once. it could turn out complicated tho. You'd have to add multiple backgrounds with the topic on that. Then you'd have to make sure that extra background doesn't overlap over the list. if you try to do this on your own and can't get it, you can keep asking and sooner or later someone we should just be able to do this for you (may be harder to get help till next week) Sorry I didn't respond earlier, I've been putting off thinking about this. What a pain... I'd imagine that my best bet would be to take a screenshot of the renders on their respective pages, just to make sure everything lines up correctly. Still though, I would need to figure out what's going on with the blue and black background, and that has me completely stumped... any ideas? My CSS: /* BACKGROUND IMAGE It starts off just as all black nothingness, but you can add an image to it. The renders which change with each category will stay behind it. */ body { background-attachment: fixed; background-color: #1E90FF; background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black); background-size:60px 60px; } /* CHANGING HEADERS These headers have renders (high quality cut out images with transparent backgrounds). They change with each category change, changing the background. */ .header_cw { background: url(http://i.imgur.com/UxE8Rll.png) no-repeat scroll top right transparent; padding-top: 1000px; position: fixed; right: 100px; top: 35px; width: 1250px; z-index: -1; } .header_completed { background: url(http://i.imgur.com/46LCxfY.png) no-repeat scroll top right transparent; padding-top: 1000px; position: fixed; right: 0; top: 35px; width: 1250px; z-index: -1; } .header_onhold { background: url(http://i.imgur.com/rhgLZY1.png) no-repeat scroll top right transparent; padding-top: 1000px; position: fixed; right: 15%; top: 35px; width: 1250px; z-index: -1; } .header_dropped { background: url(http://i.imgur.com/W9GILjt.png) no-repeat scroll top right transparent; padding-top: 1000px; position: fixed; right: 25px; top: 0; width: 1250px; z-index: -1; } .header_ptw { background: url(http://i.imgur.com/7ZSFFKo.png) no-repeat scroll top right transparent; padding-top: 1000px; position: fixed; right: 180px; top: 35px; width: 1250px; z-index: -1; } /* FADE The fade seen from the bottom of the screen. It is in front of the list on the bottom. */ #inlineContent { background-image: url(http://i39.tinypic.com/2exr03p.png); background-position: center center; background-repeat: repeat-x; bottom: 0; display: block !important; height: 60px; left: 0; margin-bottom: 0; position: fixed; width: 100%; z-index: 50; } /* FONT COLORS */ .animetitle, .animetitle:visited { color: yellow; font-family: Lucida Console,Arial; font-size: 15px; } .td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright { color: aliceBlue; font-family: arial; } .status_selected a { color: white; } .status_not_selected a { color: white; } /* ALTERNATING ROW COLOR */ .td2 { background-color: transparent; /* OTHER CODES */ padding: 4px; } .td1:hover, .td2:hover { } .header_title { background-color: #282222; color: white; font-family: Tahoma,Arial; font-size: 48px; } .table_header { background-color: rgba(1, 181, 19, .65); } #list_surround { width: 650px; } #list_surround { left: 22px !important; position: absolute !important; } a:hover, a:visited:hover { color: red !important; text-decoration: underline; font-weight: bold; } .category_totals, .td1, .td2, #grand_totals, #copyright { background-image: url(""); border-width: 0; padding: 0; } .status_selected { background-color: rgba(0, 150, 185, 0.75); color: white; padding: 8px; text-decoration: blink; } .status_not_selected { background-color: rgba(1, 181, 19, .65); color: white; padding: 6px; } .thickbox { color: cyan; font-family: fantasy; font-size: 12px; } .header_title { height: 55px; padding: 4px; } .table_header { border-width: 0; font-weight: bold; padding: 0; } .category_totals { height: 30px; } #copyright, #grand_totals { margin: 0 auto; text-align: center; } .td1:hover, .td2:hover { background: url(http://i42.tinypic.com/snktjs.png) repeat scroll 0 0 transparent; } .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:tan; display:none; } #copyright:after { content: " Custom CSS by Erlbaum. Edits and backgrounds by Shishio-kun. Google 'Shishio's Custom Lists' for more designs or info."; } /* LIST BACKGROUND COLOR AND OPACITY Go to this page for instructions on customizing this part, under: Changing the list background color + opacity of the list background http://myanimelist.net/forum/?topicid=440525 */ .category_totals, .td1, .td2, #grand_totals, #copyright { background: rgba(0, 150, 185, 0.75) !important; } /*LIST BORDERS You can change the color of the border with border-color. You can increase the size of the border by increasing the px amount after any of the border-width codes. They're all set to 1px- make sure you increase all the border widths the same amount. Leave the border amounts that are set to zero alone. */ .status_selected, #grand_totals, .status_not_selected, .header_title, #copyright { border-color: rgba(1, 181, 19, .65); border-style: solid; border-width: 2px; } .td1, .td2, .table_header { border-color: rgba(1, 181, 19, .65); border-style: solid; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 0; border-top-width: 0 !important; } .category_totals{ border-color: rgba(1, 181, 19, .65); border-style: solid; border-width: 0 2px 2px; } ****************************/ /* Silver highlight and font resize on Hover */ /****************************/ tr:hover td.td1, tr:hover td.td2 { font-size: 16px !Important; -moz-transition: .4s ease; -webkit-transition: .4.5s ease; -o-transition: .4s ease; } tr:hover [class^="td"] { background-color: rgba(1, 181, 19, .75) !important; -moz-transition: .4s ease; -webkit-transition: .4s ease; -o-transition: .4s ease; } /* TOP BAR SETTINGS the numbers in parenthesis change the color and opacity of the bar. Get a color number easily from this page: http://www.css3maker.com/css-3-rgba. Change position to absolute to make the bar not scroll with the page. Change the background image out with the url in parenthesis. */ #mal_control_strip { background-color: rgba(1, 181, 19, .75) !important; background-image: url('http://i.imgur.com/hzPJrg4.png') !important; position:absolute; } /* OTHER CODES */ #mal_control_strip { background-position: bottom !important; top: -16px; height: 1px !important;} #mal_control_strip div {display:inline} #mal_cs_pic img {height: 24px !important; width: auto !important} #mal_cs_listinfo { width: 26% !important; height: 0 !important; padding-bottom: 18px !important; padding-top: 27px !important; background: ; position: absolute; top:-5px; border-right-color: rgba(0,0,0,0.8) !important;} #mal_cs_listinfo div:first-of-type:before {content:'Logged in as '} #mal_cs_listinfo div:last-of-type a {text-decoration: none} #mal_cs_listinfo div:last-of-type a:hover {text-decoration: underline} #mal_cs_listinfo div:last-of-type:before {font-weight:normal;content:'('} #mal_cs_listinfo div:last-of-type:after {font-weight:normal;content:')'} #mal_cs_links { width: 92px !important; height: 0 !important; padding-bottom: 20px !important; padding-top: 27px !important; left: 28%; top: -7px; position: absolute; border-right-color: rgba(0,0,0,0.8) !important;} #mal_cs_links a {background-image: url('http://i.imgur.com/PAEW4Q8.png') !important;width:16px;height:16px;content:none; display: inline-block !important;color: transparent !important; letter-spacing: -1ex;font-size:xx-small} #mal_cs_links div:first-of-type:after {content: 'a0'} #mal_cs_links div:first-of-type a:first-of-type {background-position: 0px 0px} #mal_cs_links div:first-of-type a:last-of-type {background-position: -16px 0px} #mal_cs_links div:last-of-type a:first-of-type {background-position:-32px 0px} #mal_cs_links div:last-of-type a:last-of-type {background-position:-48px 0px} #mal_cs_otherlinks strong{ width: 25% !important; height: 0 !important; padding-bottom: 20px !important; padding-top: 27px !important; left:28%; margin-left: 130px; top: -5px; position: absolute; border-right-color: rgba(0,0,0,0.8) !important;} #mal_cs_otherlinks div:last-of-type {float:right;padding-right:150px; margin-top: 19px;} #mal_cs_otherlinks div:first-of-type {float:left} #mal_cs_powered img {display:none} #searchBox {margin-top: 15px !important; width: 135px !important} #mal_control_strip img { margin-top: 15px !important; } #list_surround { position: absolute !important; top: 24px !important;} /* 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://i.imgur.com/QcaobCv.png); background-position: right top; background-repeat: no-repeat; padding-top: 217px; width: 658px; } /* CURRENT BACKGROUND */ .status_selected a[href*="status=1"]:before { background-color: #eee; background-image: linear-gradient(45deg, gray 25%, transparent 25%, transparent 75%, gray 75%, gray), linear-gradient(-45deg, gray 25%, transparent 25%, transparent 75%, gray 75%, gray) !important; background-size:60px 60px !important; position: fixed !important; top: 0 !important; left: 0 !important; height: 100% !important; width: 100% !important; display: block !important; content: "" !important; z-index: -1 !important; } /* COMPLETE BACKGROUND */ .status_selected a[href*="status=2"]:before { background-color: #FFFFFF; background-image: linear-gradient(45deg, blue 25%, transparent 25%, transparent 75%, blue 75%, blue), linear-gradient(-45deg, blue 25%, transparent 25%, transparent 75%, blue 75%, blue) !important; background-size:60px 60px !important; position: fixed !important; top: 0 !important; left: 0 !important; height: 100% !important; width: 100% !important; display: block !important; content: "" !important; z-index: -1 !important; } /* ON-HOLD BACKGROUND */ .status_selected a[href*="status=3"]:before { background-color: #FFFFFF; background-image: linear-gradient(45deg, #9FBFDF 25%, transparent 25%, transparent 75%, #9FBFDF 75%, #9FBFDF), linear-gradient(-45deg, #9FBFDF 25%, transparent 25%, transparent 75%, #9FBFDF 75%, #9FBFDF) !important; background-size:60px 60px !important; position: fixed !important; top: 0 !important; left: 0 !important; height: 100% !important; width: 100% !important; display: block !important; content: "" !important; z-index: -1 !important; } /* DROPPED BACKGROUND */ .status_selected a[href*="status=4"]:before { background-color: #FFFFFF; background-image: linear-gradient(45deg, red 25%, transparent 25%, transparent 75%, red 75%, red), linear-gradient(-45deg, red 25%, transparent 25%, transparent 75%, red 75%, red) !important; background-size:60px 60px !important; position: fixed !important; top: 0 !important; left: 0 !important; height: 100% !important; width: 100% !important; display: block !important; content: "" !important; z-index: -1 !important; } /* PLANNED BACKGROUND */ .status_selected a[href*="status=6"]:before { background-color: #eee; background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black) !important; background-size:60px 60px !important; position: fixed !important; top: 0 !important; left: 0 !important; height: 100% !important; width: 100% !important; display: block !important; content: "" !important; z-index: -1 !important; } #list_surround { width: 654px !important; } form[action*="logout"] { display: inline; } /* PRIORITY HIGHLIGHTS Quotation marks may glitch when pasted. */ .animetitle[href*="manga/64549/"], .animetitle[href*="manga/57015/"], .animetitle[href*="manga/55869/"], .animetitle[href*="manga/8144/"], .animetitle[href*="manga/19896/"] { font-weight: bold !important; } I'm not sure what you're asking and I don't see why you need to take any screenshots. Just add a background behind each render with the multiple background tutorial. You can have 2 or more backgrounds per selector. Then when it loads multiple renders, the front most render will have a background behind it masking everything behind it |
Sep 6, 2015 8:31 AM
#3056
Snowyboy said: Hey there, I just managed to finish my list design, and it seemed to be good. However I just got feedback that the pop-up screen is in the way of the text itself. I tried different things and this is what I ended up with; My normal screen: https://gyazo.com/337334dcf11046729c822a3618c97993 Minimised screen: https://gyazo.com/5228e21e2ce5e3590dcf49c44470608d It seems that the pop up screen is stuck to that location, not keeping in mind how big someone's screen is. How can I adjust this so that the pop up adjusts itself to screen size? Thanks in advance, You could use this advanced CSS topic http://myanimelist.net/forum/?topicid=524033 Set different settings for the pop up's position (codes on how to do that should be in the CSS, if it was taken from my topic) in each resolution "bracket". Hard for me to explain without taking a lot of time, so you have to read and play with the topic's codes to understand it better. But if you ask back in a week I will be less busy and may be able to write something simple for you |
Sep 6, 2015 8:39 AM
#3057
Shishio-kun said: Have to get out there that if you're not using Photoshop at this point, you are seriously gimping yourself not only because of the lack of tools but because there are not alot of good ppl who can tell you how to do such things without PS Go to the layer window and click on the layer with the logo/watermark, then use the eraser tool to rub it out from the card. If the image is one single layer tho, then you have to start over and erase the logo from the render first while its separate, then recreate the image. Either find a premade-border with that shape and throw your stuff in, or if your card PSD is using a shape as the basis of the card template/border (which you should), you can raise and narrow the shape size with (I think) Free Transform, under Edit I am using PS! The watermark thankfully disappeared with the eraser, so thank you on that advice. Regarding the border for the card, I couldn't find a premade one so if you know of any good sites which supply free HD/Good premade borders for PS then please tell me so. I didn't quite understand what you mean't by this though ' or if your card PSD is using a shape as the basis of the card template/border' so if you could please tell me what you mean't by that I would be grateful. |
Sep 6, 2015 1:55 PM
#3058
Hi, I'm using @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); but some of the image links appear to be broken, so they don't appear on my anime list properly (purple boxes): http://myanimelist.net/animelist/Tetimaru Any chance of fixing this? Do you know who the host is? |
Sep 6, 2015 2:52 PM
#3059
Tetimaru said: Hi, I'm using @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); but some of the image links appear to be broken, so they don't appear on my anime list properly (purple boxes): http://myanimelist.net/animelist/Tetimaru Any chance of fixing this? Do you know who the host is? Hi there. Try using this tutorial to fix your problem http://myanimelist.net/forum/?topicid=419405. Scroll down to "DVD and manga covers on your list" section, there's a sub-section called Fill in missing covers, all answers to your problem are there |
Sep 6, 2015 9:45 PM
#3060
I'm having a problem with my copyrights bar. On the "completed" page it's fine http://imgur.com/UD3UKqs but when I changed it to "Dropped" page it became like this http://imgur.com/Tq814c3 Is there a selector that selects the copyrights on each page individually (completed,on-hold, etc...). Thanks in advance Code: #copyright { display: inline-block !important; background-color: rgba(255, 255, 255, 0.8); background-clip: content-box; color: #FF0090; width: 200px; position: relative !important; left: 250px; top: -132px; text-align: center; visibility: hidden; z-index: 2; } #copyright:hover { visibility: visible !important; } #copyright:before { visibility: visible !important; content: "COPYRIGHTS"; display: block !important; position: relative !important; right: -40px; bottom: 0px; border: solid lime 2px; background-color: white; border-radius: 25px; text-align: center; width: 120px; } .category_totals { display: inline-block; background-color: rgba(255, 255, 255, 0.8); width: 200px; background-clip: content-box; position: relative !important; left: 700px; top: 20px; text-align: center; visibility: hidden; z-index: 1; } .category_totals:hover { visibility: visible !important; } .category_totals:before { visibility: visible !important; content: "STATS"; display: block !important; position: relative !important; right: -40px; bottom: 0px; border: solid lime 2px; background-color: white; border-radius: 25px; text-align: center; width: 120px; } #grand_totals { display: inline-block !important; background-color: rgba(255, 255, 255, 0.8); color: #FF0090; width: 200px; position: relative !important; left: 650px; top: -132px; text-align: center; visibility: hidden; } #grand_totals:hover { visibility: visible !important; } #grand_totals:before { visibility: visible !important; content: "TOTAL"; display: block !important; position: relative !important; right: -40px; bottom: 0px; border: solid lime 2px; background-color: white; border-radius: 25px; text-align: center; width: 120px; z-index:3 } |
Sep 7, 2015 2:03 PM
#3061
SamPolus22 said: Tetimaru said: Hi, I'm using @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); but some of the image links appear to be broken, so they don't appear on my anime list properly (purple boxes): http://myanimelist.net/animelist/Tetimaru Any chance of fixing this? Do you know who the host is? Hi there. Try using this tutorial to fix your problem http://myanimelist.net/forum/?topicid=419405. Scroll down to "DVD and manga covers on your list" section, there's a sub-section called Fill in missing covers, all answers to your problem are there So I was doing some digging and I discovered that google hosting is no longer available: http://googleappsdeveloper.blogspot.ca/2015/08/deprecating-web-hosting-support-in.html which appears to indicate the current @import url isn't even going to work in the future, so maybe it's not worth pursuing or fixing. |
Sep 7, 2015 2:54 PM
#3062
Hello, I was wondering if there was anything I could do in order to eliminate the little white lines that appear along the borders of the pictures when pieced together to make an "About Me" layout. I followed Shishio's video tutorial exactly but still seem to have these little gaps. I am thinking that it might be something to do with mal, but am not sure. You can see what I am talking about here: http://myanimelist.net/profile/AvianConfit under the About Me area. |
Sep 7, 2015 3:32 PM
#3063
Tetimaru said: SamPolus22 said: Tetimaru said: Hi, I'm using @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); but some of the image links appear to be broken, so they don't appear on my anime list properly (purple boxes): http://myanimelist.net/animelist/Tetimaru Any chance of fixing this? Do you know who the host is? Hi there. Try using this tutorial to fix your problem http://myanimelist.net/forum/?topicid=419405. Scroll down to "DVD and manga covers on your list" section, there's a sub-section called Fill in missing covers, all answers to your problem are there So I was doing some digging and I discovered that google hosting is no longer available: http://googleappsdeveloper.blogspot.ca/2015/08/deprecating-web-hosting-support-in.html which appears to indicate the current @import url isn't even going to work in the future, so maybe it's not worth pursuing or fixing. I host it, that is the public cover import. I update it once a month or so and I'll be doing that later this week. The reason you see broken covers is because MAL updates and changes their database constantly nowadays. In order for it to be perfect I would have to update it everyday which I'm not doing. This is why you're told to host your own (on Dropbox). Use the topic he gave you- you'd have your own cover CSS in minutes and you won't have to rely on anyone else to update it. It'd be faster and more productive than researching GoogleDrive and Hosting or w/e you're doing. Google Hosting appears to be available for another year according to that article, so its definitely worth updating for myself since a lot of ppl use it. You won't be hosting it on Google, individual users use Dropbox. I can't use Dropbox cuz too many hits crashes Dropbox but not Google |
Shishio-kunSep 7, 2015 3:37 PM
Sep 7, 2015 3:34 PM
#3064
AvianConfit said: Hello, I was wondering if there was anything I could do in order to eliminate the little white lines that appear along the borders of the pictures when pieced together to make an "About Me" layout. I followed Shishio's video tutorial exactly but still seem to have these little gaps. I am thinking that it might be something to do with mal, but am not sure. You can see what I am talking about here: http://myanimelist.net/profile/AvianConfit under the About Me area. Those look like they are a part of the images and not gaps. So when you make the graphic in GIMP, color them in or put something over them I guess |
Sep 7, 2015 3:39 PM
#3065
Voidaxell said: Shishio-kun said: Have to get out there that if you're not using Photoshop at this point, you are seriously gimping yourself not only because of the lack of tools but because there are not alot of good ppl who can tell you how to do such things without PS Go to the layer window and click on the layer with the logo/watermark, then use the eraser tool to rub it out from the card. If the image is one single layer tho, then you have to start over and erase the logo from the render first while its separate, then recreate the image. Either find a premade-border with that shape and throw your stuff in, or if your card PSD is using a shape as the basis of the card template/border (which you should), you can raise and narrow the shape size with (I think) Free Transform, under Edit I am using PS! The watermark thankfully disappeared with the eraser, so thank you on that advice. Regarding the border for the card, I couldn't find a premade one so if you know of any good sites which supply free HD/Good premade borders for PS then please tell me so. I didn't quite understand what you mean't by this though ' or if your card PSD is using a shape as the basis of the card template/border' so if you could please tell me what you mean't by that I would be grateful. Many cards and other PS designs use a Shape tool to make the "back" of the card. It will probably be on the backmost layer. Think of it as the cardboard a real trading card is printed on. If you are using a shape, its easy to add borders and stuff to it, or stretch it out later. |
Sep 7, 2015 3:53 PM
#3066
Shishio-kun said: AvianConfit said: Hello, I was wondering if there was anything I could do in order to eliminate the little white lines that appear along the borders of the pictures when pieced together to make an "About Me" layout. I followed Shishio's video tutorial exactly but still seem to have these little gaps. I am thinking that it might be something to do with mal, but am not sure. You can see what I am talking about here: http://myanimelist.net/profile/AvianConfit under the About Me area. Those look like they are a part of the images and not gaps. So when you make the graphic in GIMP, color them in or put something over them I guess Well, they're not part of the images themselves, I verified that. Must be something with MAL. Oh well, thanks anyway. P.S. I'm not talking about the white lines inside the box where the buttons are. It's more so the little tiny white lines that show up around the borders of the pictures where they were Guillotined. |
Sep 7, 2015 4:00 PM
#3067
AvianConfit said: Shishio-kun said: AvianConfit said: Hello, I was wondering if there was anything I could do in order to eliminate the little white lines that appear along the borders of the pictures when pieced together to make an "About Me" layout. I followed Shishio's video tutorial exactly but still seem to have these little gaps. I am thinking that it might be something to do with mal, but am not sure. You can see what I am talking about here: http://myanimelist.net/profile/AvianConfit under the About Me area. Those look like they are a part of the images and not gaps. So when you make the graphic in GIMP, color them in or put something over them I guess Well, they're not part of the images themselves, I verified that. Must be something with MAL. Oh well, thanks anyway. P.S. I'm not talking about the white lines inside the box where the buttons are. It's more so the little tiny white lines that show up around the borders of the pictures where they were Guillotined. Where are the tiny white lines at on your profile graphic? I don't see them. Can you screenshot and circle them or give us the exact place where they are. All I see are the white lines on the buttons |
Sep 7, 2015 4:08 PM
#3068
Shishio-kun said: AvianConfit said: Shishio-kun said: AvianConfit said: Hello, I was wondering if there was anything I could do in order to eliminate the little white lines that appear along the borders of the pictures when pieced together to make an "About Me" layout. I followed Shishio's video tutorial exactly but still seem to have these little gaps. I am thinking that it might be something to do with mal, but am not sure. You can see what I am talking about here: http://myanimelist.net/profile/AvianConfit under the About Me area. Those look like they are a part of the images and not gaps. So when you make the graphic in GIMP, color them in or put something over them I guess Well, they're not part of the images themselves, I verified that. Must be something with MAL. Oh well, thanks anyway. P.S. I'm not talking about the white lines inside the box where the buttons are. It's more so the little tiny white lines that show up around the borders of the pictures where they were Guillotined. Where are the tiny white lines at on your profile graphic? I don't see them. Can you screenshot and circle them or give us the exact place where they are. All I see are the white lines on the buttons It might be my PC's resolution or something. The line goes right up through "Shigeru". This is the most obvious example. there are more near the top but no need to show that. |
Sep 7, 2015 4:23 PM
#3069
AvianConfit said: It might be my PC's resolution or something. The line goes right up through "Shigeru". This is the most obvious example. there are more near the top but no need to show that. I don't see those at all. I would ask your friends if they see it, and if its just you, its something you need to resolve on your browser or computer, I guess. The images seem as close together as possible to me |
Sep 7, 2015 4:52 PM
#3070
Shishio-kun said: AvianConfit said: It might be my PC's resolution or something. The line goes right up through "Shigeru". This is the most obvious example. there are more near the top but no need to show that. I don't see those at all. I would ask your friends if they see it, and if its just you, its something you need to resolve on your browser or computer, I guess. The images seem as close together as possible to me I see what he's talking about. I also see the same thing on my profile, but only when zooming in. |
Sep 7, 2015 4:55 PM
#3071
Doomcat55 said: Shishio-kun said: AvianConfit said: It might be my PC's resolution or something. The line goes right up through "Shigeru". This is the most obvious example. there are more near the top but no need to show that. I don't see those at all. I would ask your friends if they see it, and if its just you, its something you need to resolve on your browser or computer, I guess. The images seem as close together as possible to me I see what he's talking about. I also see the same thing on my profile, but only when zooming in. Yeah, I can see that yours has the same issue. It's very clear to me. I'm on a Surface, so it might be an abnormal resolution which is doing it. |
Sep 9, 2015 6:41 PM
#3072
Hello, I have a profile/about me question. All of my sections so far have had a width of 688 px. They line up perfectly. I just finished a new section and exported it with 688 px in gimp, and it seems narrower on MAL. It does not line up with the previous 688 px. This new section is quite a bit taller than the other sections, is that the reason why it looks narrower? Why does this happen? Here is the image I'm referring to: http://i927.photobucket.com/albums/ad111/seal308/Gaming/gamingV9_zpsvkczwx2c.png |
Sep 10, 2015 4:41 PM
#3073
http://i.hizliresim.com/j2byLr.jpg How can i fix that point? I tried everything but did not fix it. I want it to look straight. My animelist code is: @import url(http://fonts.googleapis.com/css?family=Share); @import url('https://dl.dropbox.com/u/91214890/mal_add.css') all; body { background:url(http://i49.tinypic.com/246thj5.jpg) repeat-y scroll center bottom #181818; } /* LIST FONT These codes control the font on the list itself (anime titles, etc). */ * { border:0 none; color:#DBDBDB; font-family: 'Share', cursive; text-decoration:none; } /* BANNER This controls the image at the top that by default says "Anime List". You can replace the background image link in parenthesis with your own banner image you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ #list_surround .header_title { background:url(http://i1277.photobucket.com/albums/y490/ashjnrr/3331_zpsgfedhduf.png) repeat scroll 0 0 transparent; height:177px; left:0px; padding:25px; position:absolute; top:-229px; width:865px; } /* LEFT SIDE BUTTONS These codes control the buttons on the left side. You can replace these images as well for your own custom buttons! The first controls the Currently Watching panel, followed by Completed, On Hold, Dropped, Planned, and then All. You can replace the background image links of these buttons in parenthesis with your own images you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ #list_surround .status_selected, #list_surround .status_not_selected { background:url(http://i21.photobucket.com/albums/b298/LudvigP/watching2.png) repeat scroll 0 0 transparent; display:block; height:130px; left:-284px; padding:0; position:absolute; top:0; width:273px; display: none; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background:url(http://i21.photobucket.com/albums/b298/LudvigP/completed1.png) repeat scroll 0 0 white; top:140px; display: none; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i21.photobucket.com/albums/b298/LudvigP/on-hold1.png) repeat scroll 0 0 transparent; top:280px; display: none; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i21.photobucket.com/albums/b298/LudvigP/dropped1.png) repeat scroll 0 0 transparent; top:420px; display: none; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i21.photobucket.com/albums/b298/LudvigP/plantowatch1.png) repeat scroll 0 0 transparent; display:inline; top:560px; display: none; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i21.photobucket.com/albums/b298/LudvigP/allanime1.png) no-repeat scroll 0 0 transparent; display:inline; padding-bottom:30px; top:700px; display: none; } /* HEADERS */ #list_surround .header_cw { background:url(http://i1277.photobucket.com/albums/y490/ashjnrr/cw2_zpsgqhmroq8.jpg) no-repeat scroll 0 0 transparent; } #list_surround .header_completed { background:url(http://i1277.photobucket.com/albums/y490/ashjnrr/comp-12_zpsgfuewfwp.jpg) no-repeat scroll 0 0 transparent; } #list_surround .header_onhold { background:url(http://i1277.photobucket.com/albums/y490/ashjnrr/onh-12_zpssueuatjw.jpg) no-repeat scroll 0 0 transparent; } #list_surround .header_ptw { background:url(http://i1277.photobucket.com/albums/y490/ashjnrr/plant1_zpsz186vn6a.jpg) no-repeat scroll 0 0 transparent; } #list_surround .header_dropped { background:url(http://i1277.photobucket.com/albums/y490/ashjnrr/drop-12_zpsmy3r9hxy.jpg) no-repeat scroll 0 0 transparent; } /* OTHER CODES */ a:hover { text-decoration:underline; } #list_surround { background:none repeat scroll 0 0 #181818; border-bottom:1px solid #292929; border-left:1px solid #292929; border-right:1px solid #292929; height:100%; left:0px; margin:239px auto 30px; position:relative; width:915px; } #list_surround .status_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround .status_not_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround br { display:none; } #list_surround .header_title span { color:#000000; font-size:1px; } #list_surround .header_title .thickbox { display:none; } #list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped { margin-left:-1px; padding:28px 5px 5px; width:915px; } #list_surround .animetitle + small { color:#48D1CC; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #mal_cs_listinfo a strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal; font-weight: normal; text-decoration: underline; text-transform: none;} #mal_cs_otherlinks strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal;} .borderRBL { color: cyan !important; } #list_surround .header_title span { display:none; } #list_surround .status_not_selected a { opacity:0; } #list_surround .status_selected a { opacity:0; } #copyright { background:url(http://i1232.photobucket.com/albums/ff367/coolspot21/copyr-1.png) no-repeat 0 0; color:#181818; height:15px; margin-left:-76px; padding-top:5px; position:fixed; bottom:0; width:1000px; font-family: sans-serif; font-size: 10px; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { margin-left:-43px; } } #{background-size:100% 100%!important} #height:24px!important} #display:inline} #mal_cs_pic img{height:24px!important;width:auto!important} #mal_cs_listinfo{width:auto!important} #mal_cs_listinfo div:first-of-type:before{content:'Logged in as '} #mal_cs_listinfo div:last-of-type a{text-decoration:none} #mal_cs_listinfo div:last-of-type a:hover{text-decoration:underline} #mal_cs_listinfo div:last-of-type:before{font-weight:400;content:'('} #mal_cs_listinfo div:last-of-type:after{font-weight:400;content:')'} #mal_cs_links{padding-top:3px!important;width:85px!important} #mal_cs_links a{background-image:url(http://i39.tinypic.com/ekg6t5.png)!important;width:16px;height:16px;content:none;color:transparent!important;letter-spacing:-5px;display:inline-block!important} #mal_cs_links div:first-of-type a:first-of-type{background-position:0 0!important} #mal_cs_links div:first-of-type a:last-of-type{background-position:-16px 0!important} #mal_cs_links div:last-of-type a:first-of-type{background-position:-32px 0!important} #mal_cs_links div:last-of-type a:last-of-type{background-position:-48px 0!important} #mal_cs_links div:first-of-type:after{content:''} #mal_cs_otherlinks strong:before{content:'['} #mal_cs_otherlinks strong:after{content:']'} #mal_cs_otherlinks div:last-of-type{float:right;padding-right:150px} #mal_cs_otherlinks div:first-of-type{float:left} #mal_cs_powered img{display:none} #searchBox{margin-top:8px!important;width:135px!important} .td1:hover, .td2:hover { background: url("http://s2.hostingkartinok.com/uploads/images/2012/07/9eb7788c3edf8544201ed47b5040d094.png") repeat scroll 0 0 transparent; } |
AshjnrSep 10, 2015 4:45 PM
Sep 10, 2015 4:58 PM
#3074
ashjnr said: http://i.hizliresim.com/j2byLr.jpg How can i fix that point? I tried everything but did not fix it. I want it to look straight. My animelist code is: @import url(http://fonts.googleapis.com/css?family=Share); @import url('https://dl.dropbox.com/u/91214890/mal_add.css') all; body { background:url(http://i49.tinypic.com/246thj5.jpg) repeat-y scroll center bottom #181818; } /* LIST FONT These codes control the font on the list itself (anime titles, etc). */ * { border:0 none; color:#DBDBDB; font-family: 'Share', cursive; text-decoration:none; } /* BANNER This controls the image at the top that by default says "Anime List". You can replace the background image link in parenthesis with your own banner image you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ #list_surround .header_title { background:url(http://i1277.photobucket.com/albums/y490/ashjnrr/3331_zpsgfedhduf.png) repeat scroll 0 0 transparent; height:177px; left:0px; padding:25px; position:absolute; top:-229px; width:865px; } /* LEFT SIDE BUTTONS These codes control the buttons on the left side. You can replace these images as well for your own custom buttons! The first controls the Currently Watching panel, followed by Completed, On Hold, Dropped, Planned, and then All. You can replace the background image links of these buttons in parenthesis with your own images you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ #list_surround .status_selected, #list_surround .status_not_selected { background:url(http://i21.photobucket.com/albums/b298/LudvigP/watching2.png) repeat scroll 0 0 transparent; display:block; height:130px; left:-284px; padding:0; position:absolute; top:0; width:273px; display: none; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background:url(http://i21.photobucket.com/albums/b298/LudvigP/completed1.png) repeat scroll 0 0 white; top:140px; display: none; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i21.photobucket.com/albums/b298/LudvigP/on-hold1.png) repeat scroll 0 0 transparent; top:280px; display: none; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i21.photobucket.com/albums/b298/LudvigP/dropped1.png) repeat scroll 0 0 transparent; top:420px; display: none; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i21.photobucket.com/albums/b298/LudvigP/plantowatch1.png) repeat scroll 0 0 transparent; display:inline; top:560px; display: none; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i21.photobucket.com/albums/b298/LudvigP/allanime1.png) no-repeat scroll 0 0 transparent; display:inline; padding-bottom:30px; top:700px; display: none; } /* HEADERS */ #list_surround .header_cw { background:url(http://i1277.photobucket.com/albums/y490/ashjnrr/cw2_zpsgqhmroq8.jpg) no-repeat scroll 0 0 transparent; } #list_surround .header_completed { background:url(http://i1277.photobucket.com/albums/y490/ashjnrr/comp-12_zpsgfuewfwp.jpg) no-repeat scroll 0 0 transparent; } #list_surround .header_onhold { background:url(http://i1277.photobucket.com/albums/y490/ashjnrr/onh-12_zpssueuatjw.jpg) no-repeat scroll 0 0 transparent; } #list_surround .header_ptw { background:url(http://i1277.photobucket.com/albums/y490/ashjnrr/plant1_zpsz186vn6a.jpg) no-repeat scroll 0 0 transparent; } #list_surround .header_dropped { background:url(http://i1277.photobucket.com/albums/y490/ashjnrr/drop-12_zpsmy3r9hxy.jpg) no-repeat scroll 0 0 transparent; } /* OTHER CODES */ a:hover { text-decoration:underline; } #list_surround { background:none repeat scroll 0 0 #181818; border-bottom:1px solid #292929; border-left:1px solid #292929; border-right:1px solid #292929; height:100%; left:0px; margin:239px auto 30px; position:relative; width:915px; } #list_surround .status_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround .status_not_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround br { display:none; } #list_surround .header_title span { color:#000000; font-size:1px; } #list_surround .header_title .thickbox { display:none; } #list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped { margin-left:-1px; padding:28px 5px 5px; width:915px; } #list_surround .animetitle + small { color:#48D1CC; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #mal_cs_listinfo a strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal; font-weight: normal; text-decoration: underline; text-transform: none;} #mal_cs_otherlinks strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal;} .borderRBL { color: cyan !important; } #list_surround .header_title span { display:none; } #list_surround .status_not_selected a { opacity:0; } #list_surround .status_selected a { opacity:0; } #copyright { background:url(http://i1232.photobucket.com/albums/ff367/coolspot21/copyr-1.png) no-repeat 0 0; color:#181818; height:15px; margin-left:-76px; padding-top:5px; position:fixed; bottom:0; width:1000px; font-family: sans-serif; font-size: 10px; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { margin-left:-43px; } } #{background-size:100% 100%!important} #height:24px!important} #display:inline} #mal_cs_pic img{height:24px!important;width:auto!important} #mal_cs_listinfo{width:auto!important} #mal_cs_listinfo div:first-of-type:before{content:'Logged in as '} #mal_cs_listinfo div:last-of-type a{text-decoration:none} #mal_cs_listinfo div:last-of-type a:hover{text-decoration:underline} #mal_cs_listinfo div:last-of-type:before{font-weight:400;content:'('} #mal_cs_listinfo div:last-of-type:after{font-weight:400;content:')'} #mal_cs_links{padding-top:3px!important;width:85px!important} #mal_cs_links a{background-image:url(http://i39.tinypic.com/ekg6t5.png)!important;width:16px;height:16px;content:none;color:transparent!important;letter-spacing:-5px;display:inline-block!important} #mal_cs_links div:first-of-type a:first-of-type{background-position:0 0!important} #mal_cs_links div:first-of-type a:last-of-type{background-position:-16px 0!important} #mal_cs_links div:last-of-type a:first-of-type{background-position:-32px 0!important} #mal_cs_links div:last-of-type a:last-of-type{background-position:-48px 0!important} #mal_cs_links div:first-of-type:after{content:''} #mal_cs_otherlinks strong:before{content:'['} #mal_cs_otherlinks strong:after{content:']'} #mal_cs_otherlinks div:last-of-type{float:right;padding-right:150px} #mal_cs_otherlinks div:first-of-type{float:left} #mal_cs_powered img{display:none} #searchBox{margin-top:8px!important;width:135px!important} .td1:hover, .td2:hover { background: url("http://s2.hostingkartinok.com/uploads/images/2012/07/9eb7788c3edf8544201ed47b5040d094.png") repeat scroll 0 0 transparent; } Add this to the bottom of your CSS: form[action*="logout"] { display: inline; } |
Sep 10, 2015 5:15 PM
#3075
Doomcat55 said: ashjnr said: http://i.hizliresim.com/j2byLr.jpg How can i fix that point? I tried everything but did not fix it. I want it to look straight. My animelist code is: @import url(http://fonts.googleapis.com/css?family=Share); @import url('https://dl.dropbox.com/u/91214890/mal_add.css') all; body { background:url(http://i49.tinypic.com/246thj5.jpg) repeat-y scroll center bottom #181818; } /* LIST FONT These codes control the font on the list itself (anime titles, etc). */ * { border:0 none; color:#DBDBDB; font-family: 'Share', cursive; text-decoration:none; } /* BANNER This controls the image at the top that by default says "Anime List". You can replace the background image link in parenthesis with your own banner image you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ #list_surround .header_title { background:url(http://i1277.photobucket.com/albums/y490/ashjnrr/3331_zpsgfedhduf.png) repeat scroll 0 0 transparent; height:177px; left:0px; padding:25px; position:absolute; top:-229px; width:865px; } /* LEFT SIDE BUTTONS These codes control the buttons on the left side. You can replace these images as well for your own custom buttons! The first controls the Currently Watching panel, followed by Completed, On Hold, Dropped, Planned, and then All. You can replace the background image links of these buttons in parenthesis with your own images you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ #list_surround .status_selected, #list_surround .status_not_selected { background:url(http://i21.photobucket.com/albums/b298/LudvigP/watching2.png) repeat scroll 0 0 transparent; display:block; height:130px; left:-284px; padding:0; position:absolute; top:0; width:273px; display: none; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background:url(http://i21.photobucket.com/albums/b298/LudvigP/completed1.png) repeat scroll 0 0 white; top:140px; display: none; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i21.photobucket.com/albums/b298/LudvigP/on-hold1.png) repeat scroll 0 0 transparent; top:280px; display: none; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i21.photobucket.com/albums/b298/LudvigP/dropped1.png) repeat scroll 0 0 transparent; top:420px; display: none; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i21.photobucket.com/albums/b298/LudvigP/plantowatch1.png) repeat scroll 0 0 transparent; display:inline; top:560px; display: none; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i21.photobucket.com/albums/b298/LudvigP/allanime1.png) no-repeat scroll 0 0 transparent; display:inline; padding-bottom:30px; top:700px; display: none; } /* HEADERS */ #list_surround .header_cw { background:url(http://i1277.photobucket.com/albums/y490/ashjnrr/cw2_zpsgqhmroq8.jpg) no-repeat scroll 0 0 transparent; } #list_surround .header_completed { background:url(http://i1277.photobucket.com/albums/y490/ashjnrr/comp-12_zpsgfuewfwp.jpg) no-repeat scroll 0 0 transparent; } #list_surround .header_onhold { background:url(http://i1277.photobucket.com/albums/y490/ashjnrr/onh-12_zpssueuatjw.jpg) no-repeat scroll 0 0 transparent; } #list_surround .header_ptw { background:url(http://i1277.photobucket.com/albums/y490/ashjnrr/plant1_zpsz186vn6a.jpg) no-repeat scroll 0 0 transparent; } #list_surround .header_dropped { background:url(http://i1277.photobucket.com/albums/y490/ashjnrr/drop-12_zpsmy3r9hxy.jpg) no-repeat scroll 0 0 transparent; } /* OTHER CODES */ a:hover { text-decoration:underline; } #list_surround { background:none repeat scroll 0 0 #181818; border-bottom:1px solid #292929; border-left:1px solid #292929; border-right:1px solid #292929; height:100%; left:0px; margin:239px auto 30px; position:relative; width:915px; } #list_surround .status_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround .status_not_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround br { display:none; } #list_surround .header_title span { color:#000000; font-size:1px; } #list_surround .header_title .thickbox { display:none; } #list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped { margin-left:-1px; padding:28px 5px 5px; width:915px; } #list_surround .animetitle + small { color:#48D1CC; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #mal_cs_listinfo a strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal; font-weight: normal; text-decoration: underline; text-transform: none;} #mal_cs_otherlinks strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal;} .borderRBL { color: cyan !important; } #list_surround .header_title span { display:none; } #list_surround .status_not_selected a { opacity:0; } #list_surround .status_selected a { opacity:0; } #copyright { background:url(http://i1232.photobucket.com/albums/ff367/coolspot21/copyr-1.png) no-repeat 0 0; color:#181818; height:15px; margin-left:-76px; padding-top:5px; position:fixed; bottom:0; width:1000px; font-family: sans-serif; font-size: 10px; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { margin-left:-43px; } } #{background-size:100% 100%!important} #height:24px!important} #display:inline} #mal_cs_pic img{height:24px!important;width:auto!important} #mal_cs_listinfo{width:auto!important} #mal_cs_listinfo div:first-of-type:before{content:'Logged in as '} #mal_cs_listinfo div:last-of-type a{text-decoration:none} #mal_cs_listinfo div:last-of-type a:hover{text-decoration:underline} #mal_cs_listinfo div:last-of-type:before{font-weight:400;content:'('} #mal_cs_listinfo div:last-of-type:after{font-weight:400;content:')'} #mal_cs_links{padding-top:3px!important;width:85px!important} #mal_cs_links a{background-image:url(http://i39.tinypic.com/ekg6t5.png)!important;width:16px;height:16px;content:none;color:transparent!important;letter-spacing:-5px;display:inline-block!important} #mal_cs_links div:first-of-type a:first-of-type{background-position:0 0!important} #mal_cs_links div:first-of-type a:last-of-type{background-position:-16px 0!important} #mal_cs_links div:last-of-type a:first-of-type{background-position:-32px 0!important} #mal_cs_links div:last-of-type a:last-of-type{background-position:-48px 0!important} #mal_cs_links div:first-of-type:after{content:''} #mal_cs_otherlinks strong:before{content:'['} #mal_cs_otherlinks strong:after{content:']'} #mal_cs_otherlinks div:last-of-type{float:right;padding-right:150px} #mal_cs_otherlinks div:first-of-type{float:left} #mal_cs_powered img{display:none} #searchBox{margin-top:8px!important;width:135px!important} .td1:hover, .td2:hover { background: url("http://s2.hostingkartinok.com/uploads/images/2012/07/9eb7788c3edf8544201ed47b5040d094.png") repeat scroll 0 0 transparent; } Add this to the bottom of your CSS: form[action*="logout"] { display: inline; } Thank you so much! <3 |
Sep 13, 2015 6:48 AM
#3076
Hey everyone. Some time ago i used a template but changed the image and then after a while i realised that i can't edit the tags on both my anime and manga lists. I've searched the forums for someone else that had the same problem but i couldn't find the solution. I'm sorry for taking your time with something this simple but i would appreciate the help. Thank in advance. |
Sep 13, 2015 9:52 AM
#3077
Xirome said: Hey everyone. Some time ago i used a template but changed the image and then after a while i realised that i can't edit the tags on both my anime and manga lists. I've searched the forums for someone else that had the same problem but i couldn't find the solution. I'm sorry for taking your time with something this simple but i would appreciate the help. Thank in advance. Check if you have it disabled in your list settings. If it's not disabled, then your template doesn't support tags. You can add a tag section but that could be hard if you're a beginner in CSS. You can change your template with one that supports it. BTW, do you want only tags or tags and cover pictures of anime/manga together. I can make you one if I have free time |
Sep 13, 2015 1:36 PM
#3078
Xirome said: Hey everyone. Some time ago i used a template but changed the image and then after a while i realised that i can't edit the tags on both my anime and manga lists. I've searched the forums for someone else that had the same problem but i couldn't find the solution. I'm sorry for taking your time with something this simple but i would appreciate the help. Thank in advance. Turn on tags here by checking the box. You must save changes http://myanimelist.net/editprofile.php?go=listpreferences You also need to find this in your code (bottom). /*Add/Edit - More*/ [style^="float: right"] { display: none; } and remove it. If you keep it in your CSS removes the buttons that let you edit these things right on your list. You can re-add it after |
Sep 14, 2015 1:20 PM
#3079
Shishio-kun said: Xirome said: Hey everyone. Some time ago i used a template but changed the image and then after a while i realised that i can't edit the tags on both my anime and manga lists. I've searched the forums for someone else that had the same problem but i couldn't find the solution. I'm sorry for taking your time with something this simple but i would appreciate the help. Thank in advance. Turn on tags here by checking the box. You must save changes http://myanimelist.net/editprofile.php?go=listpreferences You also need to find this in your code (bottom). /*Add/Edit - More*/ [style^="float: right"] { display: none; } and remove it. If you keep it in your CSS removes the buttons that let you edit these things right on your list. You can re-add it after Really appreciated. <3 you so much XD. GL with everything. I'm staying in this club tho, hella interesting. |
Sep 16, 2015 6:52 PM
#3080
Hello, so on my anime list, this is what my header and bottom portion look like: The top is cut off, while both, the top and bottom, are a little bit out of place. This is the link for the header: Here's my code: @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; @import "https://dl.dropboxusercontent.com/u/78340470/CSSforfoxgirls.css"; /* Ask questions and review common questions about this layout here: http://myanimelist.net/forum/?topicid=445485 MAIN BACKGROUND */ body { background-attachment: fixed; background-clip: border-box; background-color: #000000; background-image: url("http://media.animevice.com/uploads/4/43468/788989-mahouka_tatsuya_shiba.jpg"); background-origin: background-position: center bottom; background-repeat: no-repeat; background-size: cover; color: #FFEBCD; font-family: Tempus Sans ITC; font-size: 14px; } /* POSITION/SIZE OF ANIME POSTERS ON LIST Use margin left to move the posters to the left or right. */ .hide { background-position: left center; background-repeat: no-repeat; background-size: contain; display: inline-block !important; height: 110px; margin-left: 385px; margin-top: -118px; position: absolute; width: 85px !important; } /* POSITION AND SIZE OF ANIME POSTERS (with cursor on it) Use margin-left to change their position. */ .hide:hover{ background-color: transparent; background-repeat: no-repeat; background-size: auto auto; margin-left: 128px; padding-right: 251px; padding-top: 241px; position: absolute; } /* BACKGROUND RENDER AND LOGO The first backgroun image url is the Fate/Stay Night logo up at the upper left and the second is the background render (Saber by default). */ #inlineContent { background: url(https://upload.wikimedia.org/wikipedia/commons/8/8f/Mahouka-Koukou-no-Rettousei_title.png) 1% 5% fixed no-repeat, url(http://orig15.deviantart.net/5eb0/f/2014/100/6/0/shiba_miyuki_render_by_blovao-d7dzbef.png) fixed 15% center no-repeat; background-size: auto, contain; bottom: 0; display: inline !important; height: 100%; margin-bottom: 0; position: fixed; right: 0; width: 100%; z-index: -2 !important; } /* LIST POSITION Use this to adjust the list position. Adding to right will move it more from the edge. Adding to margin-top will lower the list. */ div#list_surround { background-image: url("none"); background-repeat: no-repeat; margin-top: -10px; position: absolute; right: 39px; width: 730px; } /* LIST ROWS The list row colors, background graphics, and fonts. */ .td1 { background: url("http://i.imgur.com/XSVkN6w.png") repeat scroll 0 0 transparent; color: #FFEBCD; font-family: Tempus Sans ITC; font-size: 14px; height: 125px; padding: 5px; } .td2 { background: url("http://i.imgur.com/hy43iNu.png") repeat scroll 0 0 transparent; color: #FFEBCD; font-family: Tempus Sans ITC; font-size: 14px; height: 125px; padding: 5px; } /* HEADERS They say completed, dropped, etc. */ .header_cw { background-image: url("http://i.imgur.com/ZpYvEs0.png"); background-repeat: no-repeat; height: 130px; } .header_completed { background-image: url("http://i.imgur.com/47nhuHV.png"); background-repeat: no-repeat; height: 130px; } .header_onhold { background-image: url("http://i.imgur.com/TG5L8iZ.png"); background-repeat: no-repeat; height: 130px; } .header_dropped { background-image: url("http://i.imgur.com/qD55Dfa.png"); background-repeat: no-repeat; height: 130px; } .header_ptw { background-image: url("http://i.imgur.com/1glODEU.png"); background-repeat: no-repeat; height: 130px; } /* LEFT SIDE BUTTONS These codes control the buttons on the left side. You can replace these images as well for your own custom buttons! The first controls the Currently Watching panel, followed by Completed, On Hold, Dropped, Planned, and then All. You can replace the background image links of these buttons in parenthesis with your own images you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ #list_surround .status_selected, #list_surround .status_not_selected { background:url(http://i.imgur.com/Tb4E2iB.jpg) repeat scroll 0 0 transparent; display:block; height:130px; left:-284px; padding:0; position:absolute; top:140px; width:273px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/wwYe2r3.jpg) repeat scroll 0 0 white; top:280px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/ccfygJi.jpg) repeat scroll 0 0 transparent; top:420px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/sZCO0Sm.jpg) repeat scroll 0 0 transparent; top:560px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/fOK6cBX.jpg) repeat scroll 0 0 transparent; display:inline; top:700px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/jtaqOUE.jpg) no-repeat scroll 0 0 transparent; display:inline; padding-bottom:30px; top:840px; } /* LINK COLORS */ .animetitle { color: white; } a { color: wheat; } a:hover{ color: blue; } .table_headerLink { color: #FFEBCD; } .table_headerLink:visited { color: #FFEBCD; } .table_headerLink:hover { color: #FFEBCD; } #list_surround .animetitle + small { color: #FFEBCD; font-family: Tempus Sans ITC; font-size: 11px; } /* PARTS, COPYRIGHT AND TOTALS */ .table_header { background: url("http://i.imgur.com/aDkizcU.png") repeat scroll 0 0 transparent; padding: 5px; } .table_header { background: url("http://i.imgur.com/aDkizcU.png") repeat scroll 0 0 transparent; color: #FFEBCD; font-family: Tempus Sans ITC; font-size: 12px; padding: 5px; } .category_totals { background-image: url("http://i.imgur.com/m0CyIfp.png"); color: #FFEBCD; height: 38px; text-align: center; background-repeat: no-repeat; padding-bottom: 244px; } #grand_totals { background: url("http://i.imgur.com/aDkizcU.png") no-repeat scroll 0 0 transparent; color: #FFEBCD; } #copyright { background: url() repeat scroll 0 0 transparent; color: #FFEBCD; font-family: verdana; font-size: 9px; font-weight: normal; height: 86px; left: 20px; padding: 5px; position: fixed; text-align: left; text-shadow: 0 0 15px #181818; top: 500px; width: 280px; } #copyright a{ text-decoration: none; } #copyright:after{ content: "The list is a Custom CSS, originally a Fate/Stay Night Layout, by Ayame_chan_ additions by Shishio-kun and Kyouhansha. #more generated by u531355. The category buttons are from Drize's Channel-style layout. Google Shishios Custom Lists for more info and designs."; } /* OTHER CODES Ask in the thread you got this layout from or my club for help on changing it. */ .header_title { display: none; } .status_selected { background-image: url("http://i.imgur.com/7QTYqeD.png"); color: #FFEBCD; font-family: Tempus Sans ITC; padding: 2px; text-decoration: underline; } .status_not_selected { background-image: url("http://i.imgur.com/Or2nAaL.png"); color: #FFEBCD; font-family: Tempus Sans ITC; padding: 2px; } #list_surround .header_title span { display: none; } #list_surround .status_not_selected a { background: none repeat scroll 0 0 transparent !important; opacity: 0; } #list_surround .status_selected a { background: none repeat scroll 0 0 transparent !important; opacity: 0; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 0 none !important; } td:nth-of-type(2) { padding-right: 5px; } a:hover { text-decoration:underline; } #list_surround .status_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround .status_not_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround br { display:none; } #list_surround .header_title span { color:#000000; font-size:1px; } #list_surround .header_title .thickbox { display:none; } #list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped { margin-left:-1px; padding:28px 5px 5px; width:586px; } #list_surround .animetitle + small { color:#00FF00; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #mal_cs_listinfo a strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal; font-weight: normal; text-decoration: underline; text-transform: none;} #mal_cs_otherlinks strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal;} .borderRBL { color: cyan !important; } #list_surround .header_title span { display:none; } #list_surround .status_not_selected a { opacity:0; } #list_surround .status_selected a { opacity:0; } Thanks! |
Sep 16, 2015 7:38 PM
#3081
Zeroskye said: Hello, so on my anime list, this is what my header and bottom portion look like: The top is cut off, while both, the top and bottom, are a little bit out of place. This is the link for the header: Here's my code: @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; @import "https://dl.dropboxusercontent.com/u/78340470/CSSforfoxgirls.css"; /* Ask questions and review common questions about this layout here: http://myanimelist.net/forum/?topicid=445485 MAIN BACKGROUND */ body { background-attachment: fixed; background-clip: border-box; background-color: #000000; background-image: url("http://media.animevice.com/uploads/4/43468/788989-mahouka_tatsuya_shiba.jpg"); background-origin: background-position: center bottom; background-repeat: no-repeat; background-size: cover; color: #FFEBCD; font-family: Tempus Sans ITC; font-size: 14px; } /* POSITION/SIZE OF ANIME POSTERS ON LIST Use margin left to move the posters to the left or right. */ .hide { background-position: left center; background-repeat: no-repeat; background-size: contain; display: inline-block !important; height: 110px; margin-left: 385px; margin-top: -118px; position: absolute; width: 85px !important; } /* POSITION AND SIZE OF ANIME POSTERS (with cursor on it) Use margin-left to change their position. */ .hide:hover{ background-color: transparent; background-repeat: no-repeat; background-size: auto auto; margin-left: 128px; padding-right: 251px; padding-top: 241px; position: absolute; } /* BACKGROUND RENDER AND LOGO The first backgroun image url is the Fate/Stay Night logo up at the upper left and the second is the background render (Saber by default). */ #inlineContent { background: url(https://upload.wikimedia.org/wikipedia/commons/8/8f/Mahouka-Koukou-no-Rettousei_title.png) 1% 5% fixed no-repeat, url(http://orig15.deviantart.net/5eb0/f/2014/100/6/0/shiba_miyuki_render_by_blovao-d7dzbef.png) fixed 15% center no-repeat; background-size: auto, contain; bottom: 0; display: inline !important; height: 100%; margin-bottom: 0; position: fixed; right: 0; width: 100%; z-index: -2 !important; } /* LIST POSITION Use this to adjust the list position. Adding to right will move it more from the edge. Adding to margin-top will lower the list. */ div#list_surround { background-image: url("none"); background-repeat: no-repeat; margin-top: -10px; position: absolute; right: 39px; width: 730px; } /* LIST ROWS The list row colors, background graphics, and fonts. */ .td1 { background: url("http://i.imgur.com/XSVkN6w.png") repeat scroll 0 0 transparent; color: #FFEBCD; font-family: Tempus Sans ITC; font-size: 14px; height: 125px; padding: 5px; } .td2 { background: url("http://i.imgur.com/hy43iNu.png") repeat scroll 0 0 transparent; color: #FFEBCD; font-family: Tempus Sans ITC; font-size: 14px; height: 125px; padding: 5px; } /* HEADERS They say completed, dropped, etc. */ .header_cw { background-image: url("http://i.imgur.com/ZpYvEs0.png"); background-repeat: no-repeat; height: 130px; } .header_completed { background-image: url("http://i.imgur.com/47nhuHV.png"); background-repeat: no-repeat; height: 130px; } .header_onhold { background-image: url("http://i.imgur.com/TG5L8iZ.png"); background-repeat: no-repeat; height: 130px; } .header_dropped { background-image: url("http://i.imgur.com/qD55Dfa.png"); background-repeat: no-repeat; height: 130px; } .header_ptw { background-image: url("http://i.imgur.com/1glODEU.png"); background-repeat: no-repeat; height: 130px; } /* LEFT SIDE BUTTONS These codes control the buttons on the left side. You can replace these images as well for your own custom buttons! The first controls the Currently Watching panel, followed by Completed, On Hold, Dropped, Planned, and then All. You can replace the background image links of these buttons in parenthesis with your own images you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ #list_surround .status_selected, #list_surround .status_not_selected { background:url(http://i.imgur.com/Tb4E2iB.jpg) repeat scroll 0 0 transparent; display:block; height:130px; left:-284px; padding:0; position:absolute; top:140px; width:273px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/wwYe2r3.jpg) repeat scroll 0 0 white; top:280px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/ccfygJi.jpg) repeat scroll 0 0 transparent; top:420px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/sZCO0Sm.jpg) repeat scroll 0 0 transparent; top:560px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/fOK6cBX.jpg) repeat scroll 0 0 transparent; display:inline; top:700px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/jtaqOUE.jpg) no-repeat scroll 0 0 transparent; display:inline; padding-bottom:30px; top:840px; } /* LINK COLORS */ .animetitle { color: white; } a { color: wheat; } a:hover{ color: blue; } .table_headerLink { color: #FFEBCD; } .table_headerLink:visited { color: #FFEBCD; } .table_headerLink:hover { color: #FFEBCD; } #list_surround .animetitle + small { color: #FFEBCD; font-family: Tempus Sans ITC; font-size: 11px; } /* PARTS, COPYRIGHT AND TOTALS */ .table_header { background: url("http://i.imgur.com/aDkizcU.png") repeat scroll 0 0 transparent; padding: 5px; } .table_header { background: url("http://i.imgur.com/aDkizcU.png") repeat scroll 0 0 transparent; color: #FFEBCD; font-family: Tempus Sans ITC; font-size: 12px; padding: 5px; } .category_totals { background-image: url("http://i.imgur.com/m0CyIfp.png"); color: #FFEBCD; height: 38px; text-align: center; background-repeat: no-repeat; padding-bottom: 244px; } #grand_totals { background: url("http://i.imgur.com/aDkizcU.png") no-repeat scroll 0 0 transparent; color: #FFEBCD; } #copyright { background: url() repeat scroll 0 0 transparent; color: #FFEBCD; font-family: verdana; font-size: 9px; font-weight: normal; height: 86px; left: 20px; padding: 5px; position: fixed; text-align: left; text-shadow: 0 0 15px #181818; top: 500px; width: 280px; } #copyright a{ text-decoration: none; } #copyright:after{ content: "The list is a Custom CSS, originally a Fate/Stay Night Layout, by Ayame_chan_ additions by Shishio-kun and Kyouhansha. #more generated by u531355. The category buttons are from Drize's Channel-style layout. Google Shishios Custom Lists for more info and designs."; } /* OTHER CODES Ask in the thread you got this layout from or my club for help on changing it. */ .header_title { display: none; } .status_selected { background-image: url("http://i.imgur.com/7QTYqeD.png"); color: #FFEBCD; font-family: Tempus Sans ITC; padding: 2px; text-decoration: underline; } .status_not_selected { background-image: url("http://i.imgur.com/Or2nAaL.png"); color: #FFEBCD; font-family: Tempus Sans ITC; padding: 2px; } #list_surround .header_title span { display: none; } #list_surround .status_not_selected a { background: none repeat scroll 0 0 transparent !important; opacity: 0; } #list_surround .status_selected a { background: none repeat scroll 0 0 transparent !important; opacity: 0; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 0 none !important; } td:nth-of-type(2) { padding-right: 5px; } a:hover { text-decoration:underline; } #list_surround .status_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround .status_not_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround br { display:none; } #list_surround .header_title span { color:#000000; font-size:1px; } #list_surround .header_title .thickbox { display:none; } #list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped { margin-left:-1px; padding:28px 5px 5px; width:586px; } #list_surround .animetitle + small { color:#00FF00; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #mal_cs_listinfo a strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal; font-weight: normal; text-decoration: underline; text-transform: none;} #mal_cs_otherlinks strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal;} .borderRBL { color: cyan !important; } #list_surround .header_title span { display:none; } #list_surround .status_not_selected a { opacity:0; } #list_surround .status_selected a { opacity:0; } Thanks! Go to the HEADERS section of your code, and on a new line, enter width: 700px !important; e.g. the code for your currently watching header would look like this: .header_cw { background-image: url("http://i.imgur.com/ZpYvEs0.png"); background-repeat: no-repeat; height: 130px; width: 700px !important } Add the same line where it says .category_totals |
Doomcat55Sep 16, 2015 7:46 PM
Sep 16, 2015 7:48 PM
#3082
Doomcat55 said: Zeroskye said: Hello, so on my anime list, this is what my header and bottom portion look like: The top is cut off, while both, the top and bottom, are a little bit out of place. This is the link for the header: Here's my code: @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; @import "https://dl.dropboxusercontent.com/u/78340470/CSSforfoxgirls.css"; /* Ask questions and review common questions about this layout here: http://myanimelist.net/forum/?topicid=445485 MAIN BACKGROUND */ body { background-attachment: fixed; background-clip: border-box; background-color: #000000; background-image: url("http://media.animevice.com/uploads/4/43468/788989-mahouka_tatsuya_shiba.jpg"); background-origin: background-position: center bottom; background-repeat: no-repeat; background-size: cover; color: #FFEBCD; font-family: Tempus Sans ITC; font-size: 14px; } /* POSITION/SIZE OF ANIME POSTERS ON LIST Use margin left to move the posters to the left or right. */ .hide { background-position: left center; background-repeat: no-repeat; background-size: contain; display: inline-block !important; height: 110px; margin-left: 385px; margin-top: -118px; position: absolute; width: 85px !important; } /* POSITION AND SIZE OF ANIME POSTERS (with cursor on it) Use margin-left to change their position. */ .hide:hover{ background-color: transparent; background-repeat: no-repeat; background-size: auto auto; margin-left: 128px; padding-right: 251px; padding-top: 241px; position: absolute; } /* BACKGROUND RENDER AND LOGO The first backgroun image url is the Fate/Stay Night logo up at the upper left and the second is the background render (Saber by default). */ #inlineContent { background: url(https://upload.wikimedia.org/wikipedia/commons/8/8f/Mahouka-Koukou-no-Rettousei_title.png) 1% 5% fixed no-repeat, url(http://orig15.deviantart.net/5eb0/f/2014/100/6/0/shiba_miyuki_render_by_blovao-d7dzbef.png) fixed 15% center no-repeat; background-size: auto, contain; bottom: 0; display: inline !important; height: 100%; margin-bottom: 0; position: fixed; right: 0; width: 100%; z-index: -2 !important; } /* LIST POSITION Use this to adjust the list position. Adding to right will move it more from the edge. Adding to margin-top will lower the list. */ div#list_surround { background-image: url("none"); background-repeat: no-repeat; margin-top: -10px; position: absolute; right: 39px; width: 730px; } /* LIST ROWS The list row colors, background graphics, and fonts. */ .td1 { background: url("http://i.imgur.com/XSVkN6w.png") repeat scroll 0 0 transparent; color: #FFEBCD; font-family: Tempus Sans ITC; font-size: 14px; height: 125px; padding: 5px; } .td2 { background: url("http://i.imgur.com/hy43iNu.png") repeat scroll 0 0 transparent; color: #FFEBCD; font-family: Tempus Sans ITC; font-size: 14px; height: 125px; padding: 5px; } /* HEADERS They say completed, dropped, etc. */ .header_cw { background-image: url("http://i.imgur.com/ZpYvEs0.png"); background-repeat: no-repeat; height: 130px; } .header_completed { background-image: url("http://i.imgur.com/47nhuHV.png"); background-repeat: no-repeat; height: 130px; } .header_onhold { background-image: url("http://i.imgur.com/TG5L8iZ.png"); background-repeat: no-repeat; height: 130px; } .header_dropped { background-image: url("http://i.imgur.com/qD55Dfa.png"); background-repeat: no-repeat; height: 130px; } .header_ptw { background-image: url("http://i.imgur.com/1glODEU.png"); background-repeat: no-repeat; height: 130px; } /* LEFT SIDE BUTTONS These codes control the buttons on the left side. You can replace these images as well for your own custom buttons! The first controls the Currently Watching panel, followed by Completed, On Hold, Dropped, Planned, and then All. You can replace the background image links of these buttons in parenthesis with your own images you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ #list_surround .status_selected, #list_surround .status_not_selected { background:url(http://i.imgur.com/Tb4E2iB.jpg) repeat scroll 0 0 transparent; display:block; height:130px; left:-284px; padding:0; position:absolute; top:140px; width:273px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/wwYe2r3.jpg) repeat scroll 0 0 white; top:280px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/ccfygJi.jpg) repeat scroll 0 0 transparent; top:420px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/sZCO0Sm.jpg) repeat scroll 0 0 transparent; top:560px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/fOK6cBX.jpg) repeat scroll 0 0 transparent; display:inline; top:700px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/jtaqOUE.jpg) no-repeat scroll 0 0 transparent; display:inline; padding-bottom:30px; top:840px; } /* LINK COLORS */ .animetitle { color: white; } a { color: wheat; } a:hover{ color: blue; } .table_headerLink { color: #FFEBCD; } .table_headerLink:visited { color: #FFEBCD; } .table_headerLink:hover { color: #FFEBCD; } #list_surround .animetitle + small { color: #FFEBCD; font-family: Tempus Sans ITC; font-size: 11px; } /* PARTS, COPYRIGHT AND TOTALS */ .table_header { background: url("http://i.imgur.com/aDkizcU.png") repeat scroll 0 0 transparent; padding: 5px; } .table_header { background: url("http://i.imgur.com/aDkizcU.png") repeat scroll 0 0 transparent; color: #FFEBCD; font-family: Tempus Sans ITC; font-size: 12px; padding: 5px; } .category_totals { background-image: url("http://i.imgur.com/m0CyIfp.png"); color: #FFEBCD; height: 38px; text-align: center; background-repeat: no-repeat; padding-bottom: 244px; } #grand_totals { background: url("http://i.imgur.com/aDkizcU.png") no-repeat scroll 0 0 transparent; color: #FFEBCD; } #copyright { background: url() repeat scroll 0 0 transparent; color: #FFEBCD; font-family: verdana; font-size: 9px; font-weight: normal; height: 86px; left: 20px; padding: 5px; position: fixed; text-align: left; text-shadow: 0 0 15px #181818; top: 500px; width: 280px; } #copyright a{ text-decoration: none; } #copyright:after{ content: "The list is a Custom CSS, originally a Fate/Stay Night Layout, by Ayame_chan_ additions by Shishio-kun and Kyouhansha. #more generated by u531355. The category buttons are from Drize's Channel-style layout. Google Shishios Custom Lists for more info and designs."; } /* OTHER CODES Ask in the thread you got this layout from or my club for help on changing it. */ .header_title { display: none; } .status_selected { background-image: url("http://i.imgur.com/7QTYqeD.png"); color: #FFEBCD; font-family: Tempus Sans ITC; padding: 2px; text-decoration: underline; } .status_not_selected { background-image: url("http://i.imgur.com/Or2nAaL.png"); color: #FFEBCD; font-family: Tempus Sans ITC; padding: 2px; } #list_surround .header_title span { display: none; } #list_surround .status_not_selected a { background: none repeat scroll 0 0 transparent !important; opacity: 0; } #list_surround .status_selected a { background: none repeat scroll 0 0 transparent !important; opacity: 0; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 0 none !important; } td:nth-of-type(2) { padding-right: 5px; } a:hover { text-decoration:underline; } #list_surround .status_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround .status_not_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround br { display:none; } #list_surround .header_title span { color:#000000; font-size:1px; } #list_surround .header_title .thickbox { display:none; } #list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped { margin-left:-1px; padding:28px 5px 5px; width:586px; } #list_surround .animetitle + small { color:#00FF00; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #mal_cs_listinfo a strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal; font-weight: normal; text-decoration: underline; text-transform: none;} #mal_cs_otherlinks strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal;} .borderRBL { color: cyan !important; } #list_surround .header_title span { display:none; } #list_surround .status_not_selected a { opacity:0; } #list_surround .status_selected a { opacity:0; } Thanks! Go to the HEADERS section of your code, and on a new line, enter width: 700px !important; e.g. the code for your currently watching header would look like this: .header_cw { background-image: url("http://i.imgur.com/ZpYvEs0.png"); background-repeat: no-repeat; height: 130px; width: 700px !important } Add the same line where it says .category_totals I don't think the width property will work because the whole header and category totals are images not normal elements |
Sep 16, 2015 7:51 PM
#3083
Zeroskye said: Hello, so on my anime list, this is what my header and bottom portion look like: The top is cut off, while both, the top and bottom, are a little bit out of place. This is the link for the header: Here's my code: @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; @import "https://dl.dropboxusercontent.com/u/78340470/CSSforfoxgirls.css"; /* Ask questions and review common questions about this layout here: http://myanimelist.net/forum/?topicid=445485 MAIN BACKGROUND */ body { background-attachment: fixed; background-clip: border-box; background-color: #000000; background-image: url("http://media.animevice.com/uploads/4/43468/788989-mahouka_tatsuya_shiba.jpg"); background-origin: background-position: center bottom; background-repeat: no-repeat; background-size: cover; color: #FFEBCD; font-family: Tempus Sans ITC; font-size: 14px; } /* POSITION/SIZE OF ANIME POSTERS ON LIST Use margin left to move the posters to the left or right. */ .hide { background-position: left center; background-repeat: no-repeat; background-size: contain; display: inline-block !important; height: 110px; margin-left: 385px; margin-top: -118px; position: absolute; width: 85px !important; } /* POSITION AND SIZE OF ANIME POSTERS (with cursor on it) Use margin-left to change their position. */ .hide:hover{ background-color: transparent; background-repeat: no-repeat; background-size: auto auto; margin-left: 128px; padding-right: 251px; padding-top: 241px; position: absolute; } /* BACKGROUND RENDER AND LOGO The first backgroun image url is the Fate/Stay Night logo up at the upper left and the second is the background render (Saber by default). */ #inlineContent { background: url(https://upload.wikimedia.org/wikipedia/commons/8/8f/Mahouka-Koukou-no-Rettousei_title.png) 1% 5% fixed no-repeat, url(http://orig15.deviantart.net/5eb0/f/2014/100/6/0/shiba_miyuki_render_by_blovao-d7dzbef.png) fixed 15% center no-repeat; background-size: auto, contain; bottom: 0; display: inline !important; height: 100%; margin-bottom: 0; position: fixed; right: 0; width: 100%; z-index: -2 !important; } /* LIST POSITION Use this to adjust the list position. Adding to right will move it more from the edge. Adding to margin-top will lower the list. */ div#list_surround { background-image: url("none"); background-repeat: no-repeat; margin-top: -10px; position: absolute; right: 39px; width: 730px; } /* LIST ROWS The list row colors, background graphics, and fonts. */ .td1 { background: url("http://i.imgur.com/XSVkN6w.png") repeat scroll 0 0 transparent; color: #FFEBCD; font-family: Tempus Sans ITC; font-size: 14px; height: 125px; padding: 5px; } .td2 { background: url("http://i.imgur.com/hy43iNu.png") repeat scroll 0 0 transparent; color: #FFEBCD; font-family: Tempus Sans ITC; font-size: 14px; height: 125px; padding: 5px; } /* HEADERS They say completed, dropped, etc. */ .header_cw { background-image: url("http://i.imgur.com/ZpYvEs0.png"); background-repeat: no-repeat; height: 130px; } .header_completed { background-image: url("http://i.imgur.com/47nhuHV.png"); background-repeat: no-repeat; height: 130px; } .header_onhold { background-image: url("http://i.imgur.com/TG5L8iZ.png"); background-repeat: no-repeat; height: 130px; } .header_dropped { background-image: url("http://i.imgur.com/qD55Dfa.png"); background-repeat: no-repeat; height: 130px; } .header_ptw { background-image: url("http://i.imgur.com/1glODEU.png"); background-repeat: no-repeat; height: 130px; } /* LEFT SIDE BUTTONS These codes control the buttons on the left side. You can replace these images as well for your own custom buttons! The first controls the Currently Watching panel, followed by Completed, On Hold, Dropped, Planned, and then All. You can replace the background image links of these buttons in parenthesis with your own images you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ #list_surround .status_selected, #list_surround .status_not_selected { background:url(http://i.imgur.com/Tb4E2iB.jpg) repeat scroll 0 0 transparent; display:block; height:130px; left:-284px; padding:0; position:absolute; top:140px; width:273px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/wwYe2r3.jpg) repeat scroll 0 0 white; top:280px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/ccfygJi.jpg) repeat scroll 0 0 transparent; top:420px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/sZCO0Sm.jpg) repeat scroll 0 0 transparent; top:560px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/fOK6cBX.jpg) repeat scroll 0 0 transparent; display:inline; top:700px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/jtaqOUE.jpg) no-repeat scroll 0 0 transparent; display:inline; padding-bottom:30px; top:840px; } /* LINK COLORS */ .animetitle { color: white; } a { color: wheat; } a:hover{ color: blue; } .table_headerLink { color: #FFEBCD; } .table_headerLink:visited { color: #FFEBCD; } .table_headerLink:hover { color: #FFEBCD; } #list_surround .animetitle + small { color: #FFEBCD; font-family: Tempus Sans ITC; font-size: 11px; } /* PARTS, COPYRIGHT AND TOTALS */ .table_header { background: url("http://i.imgur.com/aDkizcU.png") repeat scroll 0 0 transparent; padding: 5px; } .table_header { background: url("http://i.imgur.com/aDkizcU.png") repeat scroll 0 0 transparent; color: #FFEBCD; font-family: Tempus Sans ITC; font-size: 12px; padding: 5px; } .category_totals { background-image: url("http://i.imgur.com/m0CyIfp.png"); color: #FFEBCD; height: 38px; text-align: center; background-repeat: no-repeat; padding-bottom: 244px; } #grand_totals { background: url("http://i.imgur.com/aDkizcU.png") no-repeat scroll 0 0 transparent; color: #FFEBCD; } #copyright { background: url() repeat scroll 0 0 transparent; color: #FFEBCD; font-family: verdana; font-size: 9px; font-weight: normal; height: 86px; left: 20px; padding: 5px; position: fixed; text-align: left; text-shadow: 0 0 15px #181818; top: 500px; width: 280px; } #copyright a{ text-decoration: none; } #copyright:after{ content: "The list is a Custom CSS, originally a Fate/Stay Night Layout, by Ayame_chan_ additions by Shishio-kun and Kyouhansha. #more generated by u531355. The category buttons are from Drize's Channel-style layout. Google Shishios Custom Lists for more info and designs."; } /* OTHER CODES Ask in the thread you got this layout from or my club for help on changing it. */ .header_title { display: none; } .status_selected { background-image: url("http://i.imgur.com/7QTYqeD.png"); color: #FFEBCD; font-family: Tempus Sans ITC; padding: 2px; text-decoration: underline; } .status_not_selected { background-image: url("http://i.imgur.com/Or2nAaL.png"); color: #FFEBCD; font-family: Tempus Sans ITC; padding: 2px; } #list_surround .header_title span { display: none; } #list_surround .status_not_selected a { background: none repeat scroll 0 0 transparent !important; opacity: 0; } #list_surround .status_selected a { background: none repeat scroll 0 0 transparent !important; opacity: 0; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 0 none !important; } td:nth-of-type(2) { padding-right: 5px; } a:hover { text-decoration:underline; } #list_surround .status_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround .status_not_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround br { display:none; } #list_surround .header_title span { color:#000000; font-size:1px; } #list_surround .header_title .thickbox { display:none; } #list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped { margin-left:-1px; padding:28px 5px 5px; width:586px; } #list_surround .animetitle + small { color:#00FF00; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #mal_cs_listinfo a strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal; font-weight: normal; text-decoration: underline; text-transform: none;} #mal_cs_otherlinks strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal;} .borderRBL { color: cyan !important; } #list_surround .header_title span { display:none; } #list_surround .status_not_selected a { opacity:0; } #list_surround .status_selected a { opacity:0; } Thanks! Hi there, try adding the following codes: #list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped { background-size: cover !important; } .category_totals { background-size: contain !important; } |
Sep 16, 2015 8:27 PM
#3084
Doomcat55 said: Zeroskye said: Hello, so on my anime list, this is what my header and bottom portion look like: The top is cut off, while both, the top and bottom, are a little bit out of place. This is the link for the header: Here's my code: @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; @import "https://dl.dropboxusercontent.com/u/78340470/CSSforfoxgirls.css"; /* Ask questions and review common questions about this layout here: http://myanimelist.net/forum/?topicid=445485 MAIN BACKGROUND */ body { background-attachment: fixed; background-clip: border-box; background-color: #000000; background-image: url("http://media.animevice.com/uploads/4/43468/788989-mahouka_tatsuya_shiba.jpg"); background-origin: background-position: center bottom; background-repeat: no-repeat; background-size: cover; color: #FFEBCD; font-family: Tempus Sans ITC; font-size: 14px; } /* POSITION/SIZE OF ANIME POSTERS ON LIST Use margin left to move the posters to the left or right. */ .hide { background-position: left center; background-repeat: no-repeat; background-size: contain; display: inline-block !important; height: 110px; margin-left: 385px; margin-top: -118px; position: absolute; width: 85px !important; } /* POSITION AND SIZE OF ANIME POSTERS (with cursor on it) Use margin-left to change their position. */ .hide:hover{ background-color: transparent; background-repeat: no-repeat; background-size: auto auto; margin-left: 128px; padding-right: 251px; padding-top: 241px; position: absolute; } /* BACKGROUND RENDER AND LOGO The first backgroun image url is the Fate/Stay Night logo up at the upper left and the second is the background render (Saber by default). */ #inlineContent { background: url(https://upload.wikimedia.org/wikipedia/commons/8/8f/Mahouka-Koukou-no-Rettousei_title.png) 1% 5% fixed no-repeat, url(http://orig15.deviantart.net/5eb0/f/2014/100/6/0/shiba_miyuki_render_by_blovao-d7dzbef.png) fixed 15% center no-repeat; background-size: auto, contain; bottom: 0; display: inline !important; height: 100%; margin-bottom: 0; position: fixed; right: 0; width: 100%; z-index: -2 !important; } /* LIST POSITION Use this to adjust the list position. Adding to right will move it more from the edge. Adding to margin-top will lower the list. */ div#list_surround { background-image: url("none"); background-repeat: no-repeat; margin-top: -10px; position: absolute; right: 39px; width: 730px; } /* LIST ROWS The list row colors, background graphics, and fonts. */ .td1 { background: url("http://i.imgur.com/XSVkN6w.png") repeat scroll 0 0 transparent; color: #FFEBCD; font-family: Tempus Sans ITC; font-size: 14px; height: 125px; padding: 5px; } .td2 { background: url("http://i.imgur.com/hy43iNu.png") repeat scroll 0 0 transparent; color: #FFEBCD; font-family: Tempus Sans ITC; font-size: 14px; height: 125px; padding: 5px; } /* HEADERS They say completed, dropped, etc. */ .header_cw { background-image: url("http://i.imgur.com/ZpYvEs0.png"); background-repeat: no-repeat; height: 130px; } .header_completed { background-image: url("http://i.imgur.com/47nhuHV.png"); background-repeat: no-repeat; height: 130px; } .header_onhold { background-image: url("http://i.imgur.com/TG5L8iZ.png"); background-repeat: no-repeat; height: 130px; } .header_dropped { background-image: url("http://i.imgur.com/qD55Dfa.png"); background-repeat: no-repeat; height: 130px; } .header_ptw { background-image: url("http://i.imgur.com/1glODEU.png"); background-repeat: no-repeat; height: 130px; } /* LEFT SIDE BUTTONS These codes control the buttons on the left side. You can replace these images as well for your own custom buttons! The first controls the Currently Watching panel, followed by Completed, On Hold, Dropped, Planned, and then All. You can replace the background image links of these buttons in parenthesis with your own images you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ #list_surround .status_selected, #list_surround .status_not_selected { background:url(http://i.imgur.com/Tb4E2iB.jpg) repeat scroll 0 0 transparent; display:block; height:130px; left:-284px; padding:0; position:absolute; top:140px; width:273px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/wwYe2r3.jpg) repeat scroll 0 0 white; top:280px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/ccfygJi.jpg) repeat scroll 0 0 transparent; top:420px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/sZCO0Sm.jpg) repeat scroll 0 0 transparent; top:560px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/fOK6cBX.jpg) repeat scroll 0 0 transparent; display:inline; top:700px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/jtaqOUE.jpg) no-repeat scroll 0 0 transparent; display:inline; padding-bottom:30px; top:840px; } /* LINK COLORS */ .animetitle { color: white; } a { color: wheat; } a:hover{ color: blue; } .table_headerLink { color: #FFEBCD; } .table_headerLink:visited { color: #FFEBCD; } .table_headerLink:hover { color: #FFEBCD; } #list_surround .animetitle + small { color: #FFEBCD; font-family: Tempus Sans ITC; font-size: 11px; } /* PARTS, COPYRIGHT AND TOTALS */ .table_header { background: url("http://i.imgur.com/aDkizcU.png") repeat scroll 0 0 transparent; padding: 5px; } .table_header { background: url("http://i.imgur.com/aDkizcU.png") repeat scroll 0 0 transparent; color: #FFEBCD; font-family: Tempus Sans ITC; font-size: 12px; padding: 5px; } .category_totals { background-image: url("http://i.imgur.com/m0CyIfp.png"); color: #FFEBCD; height: 38px; text-align: center; background-repeat: no-repeat; padding-bottom: 244px; } #grand_totals { background: url("http://i.imgur.com/aDkizcU.png") no-repeat scroll 0 0 transparent; color: #FFEBCD; } #copyright { background: url() repeat scroll 0 0 transparent; color: #FFEBCD; font-family: verdana; font-size: 9px; font-weight: normal; height: 86px; left: 20px; padding: 5px; position: fixed; text-align: left; text-shadow: 0 0 15px #181818; top: 500px; width: 280px; } #copyright a{ text-decoration: none; } #copyright:after{ content: "The list is a Custom CSS, originally a Fate/Stay Night Layout, by Ayame_chan_ additions by Shishio-kun and Kyouhansha. #more generated by u531355. The category buttons are from Drize's Channel-style layout. Google Shishios Custom Lists for more info and designs."; } /* OTHER CODES Ask in the thread you got this layout from or my club for help on changing it. */ .header_title { display: none; } .status_selected { background-image: url("http://i.imgur.com/7QTYqeD.png"); color: #FFEBCD; font-family: Tempus Sans ITC; padding: 2px; text-decoration: underline; } .status_not_selected { background-image: url("http://i.imgur.com/Or2nAaL.png"); color: #FFEBCD; font-family: Tempus Sans ITC; padding: 2px; } #list_surround .header_title span { display: none; } #list_surround .status_not_selected a { background: none repeat scroll 0 0 transparent !important; opacity: 0; } #list_surround .status_selected a { background: none repeat scroll 0 0 transparent !important; opacity: 0; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 0 none !important; } td:nth-of-type(2) { padding-right: 5px; } a:hover { text-decoration:underline; } #list_surround .status_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround .status_not_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround br { display:none; } #list_surround .header_title span { color:#000000; font-size:1px; } #list_surround .header_title .thickbox { display:none; } #list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped { margin-left:-1px; padding:28px 5px 5px; width:586px; } #list_surround .animetitle + small { color:#00FF00; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #mal_cs_listinfo a strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal; font-weight: normal; text-decoration: underline; text-transform: none;} #mal_cs_otherlinks strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal;} .borderRBL { color: cyan !important; } #list_surround .header_title span { display:none; } #list_surround .status_not_selected a { opacity:0; } #list_surround .status_selected a { opacity:0; } Thanks! Go to the HEADERS section of your code, and on a new line, enter width: 700px !important; e.g. the code for your currently watching header would look like this: .header_cw { background-image: url("http://i.imgur.com/ZpYvEs0.png"); background-repeat: no-repeat; height: 130px; width: 700px !important } Add the same line where it says .category_totals Thank you very much! I added in the 700px width to the headers and it still wasn't in the correct area, but then I found out that my list was at 730 px, so once I changed that, it worked! I also didn't need to add anything to the category_totals line, it was already fixed along with the header. Thanks again! :D SamPolus22 said: Zeroskye said: Hello, so on my anime list, this is what my header and bottom portion look like: The top is cut off, while both, the top and bottom, are a little bit out of place. This is the link for the header: Here's my code: @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css"; @import "https://dl.dropboxusercontent.com/u/78340470/CSSforfoxgirls.css"; /* Ask questions and review common questions about this layout here: http://myanimelist.net/forum/?topicid=445485 MAIN BACKGROUND */ body { background-attachment: fixed; background-clip: border-box; background-color: #000000; background-image: url("http://media.animevice.com/uploads/4/43468/788989-mahouka_tatsuya_shiba.jpg"); background-origin: background-position: center bottom; background-repeat: no-repeat; background-size: cover; color: #FFEBCD; font-family: Tempus Sans ITC; font-size: 14px; } /* POSITION/SIZE OF ANIME POSTERS ON LIST Use margin left to move the posters to the left or right. */ .hide { background-position: left center; background-repeat: no-repeat; background-size: contain; display: inline-block !important; height: 110px; margin-left: 385px; margin-top: -118px; position: absolute; width: 85px !important; } /* POSITION AND SIZE OF ANIME POSTERS (with cursor on it) Use margin-left to change their position. */ .hide:hover{ background-color: transparent; background-repeat: no-repeat; background-size: auto auto; margin-left: 128px; padding-right: 251px; padding-top: 241px; position: absolute; } /* BACKGROUND RENDER AND LOGO The first backgroun image url is the Fate/Stay Night logo up at the upper left and the second is the background render (Saber by default). */ #inlineContent { background: url(https://upload.wikimedia.org/wikipedia/commons/8/8f/Mahouka-Koukou-no-Rettousei_title.png) 1% 5% fixed no-repeat, url(http://orig15.deviantart.net/5eb0/f/2014/100/6/0/shiba_miyuki_render_by_blovao-d7dzbef.png) fixed 15% center no-repeat; background-size: auto, contain; bottom: 0; display: inline !important; height: 100%; margin-bottom: 0; position: fixed; right: 0; width: 100%; z-index: -2 !important; } /* LIST POSITION Use this to adjust the list position. Adding to right will move it more from the edge. Adding to margin-top will lower the list. */ div#list_surround { background-image: url("none"); background-repeat: no-repeat; margin-top: -10px; position: absolute; right: 39px; width: 730px; } /* LIST ROWS The list row colors, background graphics, and fonts. */ .td1 { background: url("http://i.imgur.com/XSVkN6w.png") repeat scroll 0 0 transparent; color: #FFEBCD; font-family: Tempus Sans ITC; font-size: 14px; height: 125px; padding: 5px; } .td2 { background: url("http://i.imgur.com/hy43iNu.png") repeat scroll 0 0 transparent; color: #FFEBCD; font-family: Tempus Sans ITC; font-size: 14px; height: 125px; padding: 5px; } /* HEADERS They say completed, dropped, etc. */ .header_cw { background-image: url("http://i.imgur.com/ZpYvEs0.png"); background-repeat: no-repeat; height: 130px; } .header_completed { background-image: url("http://i.imgur.com/47nhuHV.png"); background-repeat: no-repeat; height: 130px; } .header_onhold { background-image: url("http://i.imgur.com/TG5L8iZ.png"); background-repeat: no-repeat; height: 130px; } .header_dropped { background-image: url("http://i.imgur.com/qD55Dfa.png"); background-repeat: no-repeat; height: 130px; } .header_ptw { background-image: url("http://i.imgur.com/1glODEU.png"); background-repeat: no-repeat; height: 130px; } /* LEFT SIDE BUTTONS These codes control the buttons on the left side. You can replace these images as well for your own custom buttons! The first controls the Currently Watching panel, followed by Completed, On Hold, Dropped, Planned, and then All. You can replace the background image links of these buttons in parenthesis with your own images you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ #list_surround .status_selected, #list_surround .status_not_selected { background:url(http://i.imgur.com/Tb4E2iB.jpg) repeat scroll 0 0 transparent; display:block; height:130px; left:-284px; padding:0; position:absolute; top:140px; width:273px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/wwYe2r3.jpg) repeat scroll 0 0 white; top:280px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/ccfygJi.jpg) repeat scroll 0 0 transparent; top:420px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/sZCO0Sm.jpg) repeat scroll 0 0 transparent; top:560px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/fOK6cBX.jpg) repeat scroll 0 0 transparent; display:inline; top:700px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/jtaqOUE.jpg) no-repeat scroll 0 0 transparent; display:inline; padding-bottom:30px; top:840px; } /* LINK COLORS */ .animetitle { color: white; } a { color: wheat; } a:hover{ color: blue; } .table_headerLink { color: #FFEBCD; } .table_headerLink:visited { color: #FFEBCD; } .table_headerLink:hover { color: #FFEBCD; } #list_surround .animetitle + small { color: #FFEBCD; font-family: Tempus Sans ITC; font-size: 11px; } /* PARTS, COPYRIGHT AND TOTALS */ .table_header { background: url("http://i.imgur.com/aDkizcU.png") repeat scroll 0 0 transparent; padding: 5px; } .table_header { background: url("http://i.imgur.com/aDkizcU.png") repeat scroll 0 0 transparent; color: #FFEBCD; font-family: Tempus Sans ITC; font-size: 12px; padding: 5px; } .category_totals { background-image: url("http://i.imgur.com/m0CyIfp.png"); color: #FFEBCD; height: 38px; text-align: center; background-repeat: no-repeat; padding-bottom: 244px; } #grand_totals { background: url("http://i.imgur.com/aDkizcU.png") no-repeat scroll 0 0 transparent; color: #FFEBCD; } #copyright { background: url() repeat scroll 0 0 transparent; color: #FFEBCD; font-family: verdana; font-size: 9px; font-weight: normal; height: 86px; left: 20px; padding: 5px; position: fixed; text-align: left; text-shadow: 0 0 15px #181818; top: 500px; width: 280px; } #copyright a{ text-decoration: none; } #copyright:after{ content: "The list is a Custom CSS, originally a Fate/Stay Night Layout, by Ayame_chan_ additions by Shishio-kun and Kyouhansha. #more generated by u531355. The category buttons are from Drize's Channel-style layout. Google Shishios Custom Lists for more info and designs."; } /* OTHER CODES Ask in the thread you got this layout from or my club for help on changing it. */ .header_title { display: none; } .status_selected { background-image: url("http://i.imgur.com/7QTYqeD.png"); color: #FFEBCD; font-family: Tempus Sans ITC; padding: 2px; text-decoration: underline; } .status_not_selected { background-image: url("http://i.imgur.com/Or2nAaL.png"); color: #FFEBCD; font-family: Tempus Sans ITC; padding: 2px; } #list_surround .header_title span { display: none; } #list_surround .status_not_selected a { background: none repeat scroll 0 0 transparent !important; opacity: 0; } #list_surround .status_selected a { background: none repeat scroll 0 0 transparent !important; opacity: 0; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 0 none !important; } td:nth-of-type(2) { padding-right: 5px; } a:hover { text-decoration:underline; } #list_surround .status_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround .status_not_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround br { display:none; } #list_surround .header_title span { color:#000000; font-size:1px; } #list_surround .header_title .thickbox { display:none; } #list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped { margin-left:-1px; padding:28px 5px 5px; width:586px; } #list_surround .animetitle + small { color:#00FF00; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #mal_cs_listinfo a strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal; font-weight: normal; text-decoration: underline; text-transform: none;} #mal_cs_otherlinks strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal;} .borderRBL { color: cyan !important; } #list_surround .header_title span { display:none; } #list_surround .status_not_selected a { opacity:0; } #list_surround .status_selected a { opacity:0; } Thanks! Hi there, try adding the following codes: #list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped { background-size: cover !important; } .category_totals { background-size: contain !important; } I was able to get it to work with Doomcat's advice, but thanks a bunch for helping! :D |
Sep 17, 2015 1:17 AM
#3085
I've been working on this design, http://tinyurl.com/pescrlz But I cannot get the border (it's a premade border of google images) to change it's colour from the default to the one of my choice. Anyone help? |
Sep 17, 2015 3:30 AM
#3086
Hi, I can't seem to get my wallpaper to show up for my manga list. I had it before but now I don't, but I know it's still there. I just copied the CSS from the MAL source code. I wanted it to look like my anime list which I made without using CSS, except different background/position/colour. Here's what it looks like... /* // Self-explanatory */ BODY { /* TODO: use SITE_CDNHOST */ background-image: url(http://www.imgbase.info/images/safe-wallpapers/anime/tokyo_ghoul/45599_tokyo_ghoul.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: center center; background-size: cover; color: #828282; font-size: 11.00px; font-family: Verdana, Arial; background-color:transparent; } /* // Determines the positioning of your list */ #list_surround { margin-left: 20px; margin-right: auto; width: 750px; } /* // All links on your list */ a { color: #FF0000; text-decoration: none; } a:visited { color: #FF0000; text-decoration: none; } a:hover { color: #FFFFFF; text-decoration: underline; } /* // Alternating row color 1 */ .td1 { filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; color: #FFFFFF; border-width: 0px 1px 1px 0px; border-style: transparent; border-color: #FFFFFF; padding: 2px; background-color: #000000; } /* // Alternating row color 2 */ .td2 { filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; color: #FFFFFF; border-width: 0px 1px 1px 0px; border-style: transparent; border-color: #FFFFFF; padding: 2px; background-color: #000000; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ .table_header { filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; color: #FFFFFF; border-width: 1px 1px 1px 0px; border-style: transparent; border-color: #FFFFFF; background-color: #000000; padding: 2px; } /* // headerLink represents the color of the links inside the_header */ .table_headerLink { color: ; } .table_headerLink:Visited { color: ; } .table_headerLink:Hover { color: ; } /* // Controls the select form decoration (the drop down select box) */ .form { border-width: 1px 1px 1px 1px; border-color: #FFFFFF; border-style: solid; color: #FFFFFF; padding: 2px; font-size: 11.00px; font-family: Verdana, Arial; } /* Which 'status' up top is selected? */ .status_selected { filter: alpha(opacity=50; -moz-opacity: 0.5; opacity: 0.5; color: #FFFFFF; border-width: 0px 1px 1px 0px; border-style: transparent; border-color: #FFFFFF; padding: 2px; background-color: #000000; } .status_not_selected { filter: alpha(opacity=50; -moz-opacity: 0.5; opacity: 0.5; color: #FFFFFF; border-width: 0px 1px 1px 0px; border-style: transparent; border-color: #FFFFFF; padding: 2px; background-color: #000000; } /* Header classes for Currently Watching, Completed, Dropped, etc... */ .header_cw { } .header_completed { } .header_onhold { } .header_dropped { } .header_ptw { } .header_title { font-size: 14px; font-weight: bold; } .category_totals { } #grand_totals { text-align: center; } /* header_al is thesurrounding "User's Anime List" at the top */ .header_al { font-weight: bold; font-size: 16px; } /* header_al_links is thewith your "Profile" and "MyAnimeList home" links */ .header_al_links { } /* controls what styles you can give to all the anime titles in your list */ .animetitle { font-weight: bold; } /* copyright contains the "Producted by Garrett Gyssler" text DO NOT REMOVE OR HIDE THIS DIV IF FOUND TO BE REMOVED, YOUR LIST WILL BE REMOVED TOO */ #copyright { padding-top: 6px; text-align: center; margin: 0 auto; width: 750px; } Thanks |
Sep 17, 2015 4:21 AM
#3087
@VilkaTheWolf I do see the wallpaper for your manga list. No prob for me. Maybe you should rehost the wallpaper at some other image hosting site such as imgur. |
Hi there! Nice to meet you. I'm Lycelra ~❤- Signature by Isa - |
Sep 17, 2015 4:36 AM
#3088
@Lycelra_ That worked thanks! |
Sep 17, 2015 2:05 PM
#3089
Voidaxell said: I've been working on this design, http://tinyurl.com/pescrlz But I cannot get the border (it's a premade border of google images) to change it's colour from the default to the one of my choice. Anyone help? are you using photoshop? if yes, select the layer with the border, go to [dropdown menu] layer > layer style > colour overlay, then just choose the colour you want. |
Sep 20, 2015 6:27 AM
#3090
Hi, I have asked this question before but it hasn't been solved yet. How can I make the mini-review section flexible? I mean it can expand if the text is long. |
Takana_no_HanaSep 20, 2015 6:32 AM
Sep 20, 2015 8:50 AM
#3091
It's quite silly but i cant figure out how to draw a white outline cover the list table (like the copyright box below) can anyone help me out? Also is there anyway to bring the header up a bit, seems like it can only go lower not higher? http://myanimelist.net/animelist/Kaiwan?status=2&order=0 My code: @import url(http://fonts.googleapis.com/css?family=Oswald); @import url(http://fonts.googleapis.com/css?family=Salsa); @import url(http://fonts.googleapis.com/css?family=Amatic+SC); @import url(http://fonts.googleapis.com/css?family=Voltaire); @import url(http://pastebin.com/raw.php?i=QKaKmNrn); /* body */ body { background-color: #000000; background-image: url(http://i.imgur.com/m4PuETv.jpg); background-position: right top; background-size: auto !important; background-attachment: fixed; background-repeat: no-repeat; font-family: Salsa; font-size: 13px; letter-spacing: 1px; color: #ffffff; } /* list positioning */ #list_surround { position: left !important; padding-left: 5px !important; width: 670px; opacity: 1; } /* all links on your list */ a { color: #ffffff; text-decoration: none; outline: 0; font-size: 13px; text-shadow: #000 0px 0px 1px; -webkit-font-smoothing: antialiased; } a:visited { color: #ffffff; text-decoration: none; } a:hover { color: #ffffff; text-decoration: none; text-shadow: #ffffff 0 0 10px; } /* row color */ .td1 { background-color: rgba(32, 32, 32, 0.9); padding: 5px; } .td2 { background-color: rgba(32, 32, 32, 0.9); padding: 5px; } /* header */ .table_header { background-color: rgba(32, 32, 32, 0.9); padding: 6px; } /* header links */ .table_headerLink { color: #ffffff; text-decoration: none; font-family: Voltaire; font-size: 15px; } .table_headerLink:Visited { color: #ffffff; text-decoration: none; font-family: Voltaire; font-size: 15px; } .table_headerLink:Hover { color: #ffffff; text-decoration: none; font-family: Voltaire; font-size: 15px; text-shadow: #ffffff 0 0 10px; } /* completed header */ .header_completed { background-image:url(http://i.imgur.com/lgc6kpk.png); height: 90px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* plan to watch header */ .header_ptw { background-image:url(http://i.imgur.com/NQjFZ5S.png); height: 90px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* on hold header */ .header_onhold { background-image:url(http://i.imgur.com/WOSG3hO.png); height: 90px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* dropped header */ .header_dropped { background-image:url(http://i.imgur.com/583hNQv.png); height: 90px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* watching header */ .header_cw { background-image:url(http://i.imgur.com/826lTEp.png); height: 90px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* remove header text */ .header_title { color: gray !important; color: transparent !important; font-size: 1px !important; font-size: 0px !important; font-size: 0 !important; font-size: 0pt !important; } /* do not remove this */ #copyright { padding-top: 6px; padding-bottom: 6px; text-align: center; font-family: Amatic SC; letter-spacing: 1px; font-size: 26px; background-color: rgba(32, 32, 32, 0.9); border-style: solid; border-width: 1px; border-color: white; } #copyright:hover { background-color: #DC381F; -moz-transition: .1s ease; -webkit-transition: .1s ease; -o-transition: .1s ease; } /* highlight hover */ tr:hover [class^=td] { background-color: #DC381F !important; -moz-transition: .1s ease; -webkit-transition: .1s ease; -o-transition: .1s ease; } div[style="float: right;"] {opacity: 0; visibility: hidden;} tr:hover div {opacity: 1; transition: .6s ease; } .category_totals { display: none !important;} #grand_totals { display: none !important;} /************************************************* * FONT * ----------------------------------------------- * This bar was designed to use Cuprum font * (imported from Google here). You can remove the * import link and set it to some other font here *************************************************/ #list_surround table:first-of-type[align] td:not(fucked) a:before { font-family : Oswald; text-shadow: none; } td[class^="status_"] a {text-shadow: none;} /************************************************* * AFTER-LIST MARGIN * ----------------------------------------------- * Due to fixed positioning of this it may happen * that your copyright is covered by the menu. * I therefore added this little offset to add * some empty space after your list. It may not * work even this way or might be unnecessary for * your layout. Contact me if any issues arise *************************************************/ #list_surround { margin-bottom : 57px; } /************************************************* * HANDLE COLOR * ----------------------------------------------- * Background and border of the handle *************************************************/ #inlineContent { background : hsla(260, 50%, 10%, 0.75); border : white solid; } /************************************************* * HANDLE WIDTH * ----------------------------------------------- * I'm using 1000px. And it has to be replaced in * both of these to also affect positioning. *************************************************/ #inlineContent { left : calc(50% - 1000px / 2); width : 1000px; } /************************************************* * HEADINGS TEXT * ----------------------------------------------- * This changes text that appears in bubbles on * hovering the button. There wasn't a way I * could re-use existing code so I had to dup it * in my CSS. More flexibility, anyways *************************************************/ /* OPTION: ANIME LIST */ #list_surround table:first-of-type[align] td:nth-of-type(1) a:before { content : "Watching" } #list_surround table:first-of-type[align] td:nth-of-type(2) a:before { content : "Completed" } #list_surround table:first-of-type[align] td:nth-of-type(3) a:before { content : "On-Hold" } #list_surround table:first-of-type[align] td:nth-of-type(4) a:before { content : "Dropped" } #list_surround table:first-of-type[align] td:nth-of-type(5) a:before { content : "Plan To Watch" } #list_surround table:first-of-type[align] td:nth-of-type(6) a:before { content : "All Anime" } /* END OPTIONS */ /************************************************* * HEADINGS THEME * ----------------------------------------------- * Colors to use for bubbles. I suggest trying out * black, and if it blends too much, use white. * The border code just *has* to be here to work. * It doesn't need to be changed. It's for small * triangles under the rounded box. *************************************************/ /* OPTION: BLACK */ #list_surround table:first-of-type[align] td:not(fucked) a:before { background-color : hsla(0, 0%, 10%, 0.8); color : hsla(0, 100%, 100%, 0.8); } #list_surround table:first-of-type[align] td:not(fucked) a:after { border : 7px solid; border-top-color : hsla(0, 0%, 10%, .8); } /* END OPTIONS */ /************************************************* * ORB ICONS, COLORS, TRANSITIONS * ----------------------------------------------- * Orbs use images as masks, the color transition * is actually the background-color switching, not * the image swapping, cuz due to standards it can * not be animated. *************************************************/ /* Icons */ #list_surround table:first-of-type[align] td:not(fucked) a { background-image : url("http://i.imgur.com/uJRss3C.png"); } /* Normal color*/ #list_surround table:first-of-type[align] td:not(fucked) a { background-color : hsl(220, 30%, 50%); } /* Hover color */ #list_surround table:first-of-type[align] td:not(fucked) a:hover { background-color : #8AFB17; } /* Clicked and current color */ #list_surround table:first-of-type[align] td:not(fucked) a:active, .status_selected a { background-color : #DC381F !important; } /* Color transition */ #list_surround table:first-of-type[align] td:not(fucked) a { transition : background-color .3s linear; } /* Bubble transition */ #list_surround table:first-of-type[align] td:not(fucked) a:before, #list_surround table:first-of-type[align] td:not(fucked) a:after { transition : bottom .3s ease-out, opacity .3s ease-out; } /************************************************* * ORBS POSITION * ----------------------------------------------- * This needs to be changed if your list has * all anime category disabled *************************************************/ /* OPTION: SIX CATEGORY BUTTONS */ #list_surround table:first-of-type[align] { margin-left : -158px; } /* END OPTIONS */ /************************************************* * BASIC CODE * ----------------------------------------------- * This is the rest codes that I didn't categorize * Feel free to tweak it to your liking. *************************************************/ /* Handle */ #inlineContent { border-radius : 800px/100px; border-width : 3px 2px 2px; bottom : -35px; display : block !important; height : 57px; position : fixed; z-index : 100; } /* Nav panel */ #list_surround table:first-of-type[align] { bottom : 5px; display : block; left : 50%; position : fixed; width : 360px !important; z-index : 120; } /* Nav panel items */ #list_surround table:first-of-type[align] td:not(fucked) { display : inline-block; height : 42px; padding : 5px; width : 42px; } /* Nav panel links */ #list_surround table:first-of-type[align] td:not(fucked) a { display : block; border-radius : 50%; border : 2px solid white; box-shadow : inset 0 0 2px black, 0 3px 3px black; color : transparent; overflow : hidden; height : 100%; width : 100%; } /* Bubbles */ #list_surround table:first-of-type[align] td:not(fucked) a:before { -moz-box-sizing : border-box; box-sizing : border-box; pointer-events : none; border-radius : 25px; bottom : 45px; content : "error!"; display : block; font-size : small; height : 30px; margin-left : -30px; opacity : 0; overflow : hidden; padding-left : 1px; padding-top : 3px; position : fixed; width : 100px; } /* Small triangle below the bubble */ #list_surround table:first-of-type[align] td:not(fucked) a:after { bottom : 45px; content : ""; display : block; margin-bottom : -14px; margin-left : 13px; opacity : 0; position : fixed; } #list_surround table:first-of-type[align] td:not(fucked) a:hover:before, #list_surround table:first-of-type td:not(fucked) a:hover:after { bottom : 60px; opacity : 1; } /* Forcing overlay behaviour to prevent flicker */ #list_surround table:first-of-type[align] td:nth-of-type(1) a:before { z-index : 121 } #list_surround table:first-of-type[align] td:nth-of-type(2) a:before { z-index : 122 } #list_surround table:first-of-type[align] td:nth-of-type(3) a:before { z-index : 123 } #list_surround table:first-of-type[align] td:nth-of-type(4) a:before { z-index : 124 } #list_surround table:first-of-type[align] td:nth-of-type(5) a:before { z-index : 125 } #list_surround table:first-of-type[align] td:nth-of-type(6) a:before { z-index : 126 } /* Moving the background offset to draw different icons for different categories */ #list_surround table:first-of-type[align] td:nth-of-type(1) a { background-position : 0 0; } #list_surround table:first-of-type[align] td:nth-of-type(2) a { background-position : -42px 0; } #list_surround table:first-of-type[align] td:nth-of-type(3) a { background-position : -84px 0; } #list_surround table:first-of-type[align] td:nth-of-type(4) a { background-position : -126px 0; } #list_surround table:first-of-type[align] td:nth-of-type(5) a { background-position : -168px 0; } #list_surround table:first-of-type[align] td:nth-of-type(6) a { background-position : -210px 0; } /* cursor */ body { cursor:url(http://i.imgur.com/fAB3SUY.png) 1 2, auto; } a:hover { cursor: url(http://i.imgur.com/fAB3SUY.png) 1 2, auto; } #mal_control_strip { display: none !important;} |
Sep 20, 2015 11:02 AM
#3092
So I'm attempting to render an image I tried using this tutorial but it was a failure due to the light colors on the edges of the image. The background of the image is white but the light colors cause jagged edges that show up on a colored bg. I spent over an hour fooling with the settings and whatnot. I'd use a different image but I can only find 4 of his characters and this is in only one with a bg that wont cause trouble. Here is the image after cropping. (in spoiler) Here is the original Image (in spoilers) Here is my best result I pretty much hit a dead end here. I tried the lasso tool but my hand is nowhere near steady enough. The magic wand tool ignores the unwanted pixels or only selects a few. I attempted pixel by pixel but after over an hour of that my patience ran out. If you need anymore info just ask! Thanks in advance! |
Sep 20, 2015 11:24 AM
#3093
Kaiwan said: It's quite silly but i cant figure out how to draw a white outline cover the list table (like the copyright box below) can anyone help me out? Also is there anyway to bring the header up a bit, seems like it can only go lower not higher? http://myanimelist.net/animelist/Kaiwan?status=2&order=0 My code: @import url(http://fonts.googleapis.com/css?family=Oswald); @import url(http://fonts.googleapis.com/css?family=Salsa); @import url(http://fonts.googleapis.com/css?family=Amatic+SC); @import url(http://fonts.googleapis.com/css?family=Voltaire); @import url(http://pastebin.com/raw.php?i=QKaKmNrn); /* body */ body { background-color: #000000; background-image: url(http://i.imgur.com/m4PuETv.jpg); background-position: right top; background-size: auto !important; background-attachment: fixed; background-repeat: no-repeat; font-family: Salsa; font-size: 13px; letter-spacing: 1px; color: #ffffff; } /* list positioning */ #list_surround { position: left !important; padding-left: 5px !important; width: 670px; opacity: 1; } /* all links on your list */ a { color: #ffffff; text-decoration: none; outline: 0; font-size: 13px; text-shadow: #000 0px 0px 1px; -webkit-font-smoothing: antialiased; } a:visited { color: #ffffff; text-decoration: none; } a:hover { color: #ffffff; text-decoration: none; text-shadow: #ffffff 0 0 10px; } /* row color */ .td1 { background-color: rgba(32, 32, 32, 0.9); padding: 5px; } .td2 { background-color: rgba(32, 32, 32, 0.9); padding: 5px; } /* header */ .table_header { background-color: rgba(32, 32, 32, 0.9); padding: 6px; } /* header links */ .table_headerLink { color: #ffffff; text-decoration: none; font-family: Voltaire; font-size: 15px; } .table_headerLink:Visited { color: #ffffff; text-decoration: none; font-family: Voltaire; font-size: 15px; } .table_headerLink:Hover { color: #ffffff; text-decoration: none; font-family: Voltaire; font-size: 15px; text-shadow: #ffffff 0 0 10px; } /* completed header */ .header_completed { background-image:url(http://i.imgur.com/lgc6kpk.png); height: 90px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* plan to watch header */ .header_ptw { background-image:url(http://i.imgur.com/NQjFZ5S.png); height: 90px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* on hold header */ .header_onhold { background-image:url(http://i.imgur.com/WOSG3hO.png); height: 90px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* dropped header */ .header_dropped { background-image:url(http://i.imgur.com/583hNQv.png); height: 90px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* watching header */ .header_cw { background-image:url(http://i.imgur.com/826lTEp.png); height: 90px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* remove header text */ .header_title { color: gray !important; color: transparent !important; font-size: 1px !important; font-size: 0px !important; font-size: 0 !important; font-size: 0pt !important; } /* do not remove this */ #copyright { padding-top: 6px; padding-bottom: 6px; text-align: center; font-family: Amatic SC; letter-spacing: 1px; font-size: 26px; background-color: rgba(32, 32, 32, 0.9); border-style: solid; border-width: 1px; border-color: white; } #copyright:hover { background-color: #DC381F; -moz-transition: .1s ease; -webkit-transition: .1s ease; -o-transition: .1s ease; } /* highlight hover */ tr:hover [class^=td] { background-color: #DC381F !important; -moz-transition: .1s ease; -webkit-transition: .1s ease; -o-transition: .1s ease; } div[style="float: right;"] {opacity: 0; visibility: hidden;} tr:hover div {opacity: 1; transition: .6s ease; } .category_totals { display: none !important;} #grand_totals { display: none !important;} /************************************************* * FONT * ----------------------------------------------- * This bar was designed to use Cuprum font * (imported from Google here). You can remove the * import link and set it to some other font here *************************************************/ #list_surround table:first-of-type[align] td:not(fucked) a:before { font-family : Oswald; text-shadow: none; } td[class^="status_"] a {text-shadow: none;} /************************************************* * AFTER-LIST MARGIN * ----------------------------------------------- * Due to fixed positioning of this it may happen * that your copyright is covered by the menu. * I therefore added this little offset to add * some empty space after your list. It may not * work even this way or might be unnecessary for * your layout. Contact me if any issues arise *************************************************/ #list_surround { margin-bottom : 57px; } /************************************************* * HANDLE COLOR * ----------------------------------------------- * Background and border of the handle *************************************************/ #inlineContent { background : hsla(260, 50%, 10%, 0.75); border : white solid; } /************************************************* * HANDLE WIDTH * ----------------------------------------------- * I'm using 1000px. And it has to be replaced in * both of these to also affect positioning. *************************************************/ #inlineContent { left : calc(50% - 1000px / 2); width : 1000px; } /************************************************* * HEADINGS TEXT * ----------------------------------------------- * This changes text that appears in bubbles on * hovering the button. There wasn't a way I * could re-use existing code so I had to dup it * in my CSS. More flexibility, anyways *************************************************/ /* OPTION: ANIME LIST */ #list_surround table:first-of-type[align] td:nth-of-type(1) a:before { content : "Watching" } #list_surround table:first-of-type[align] td:nth-of-type(2) a:before { content : "Completed" } #list_surround table:first-of-type[align] td:nth-of-type(3) a:before { content : "On-Hold" } #list_surround table:first-of-type[align] td:nth-of-type(4) a:before { content : "Dropped" } #list_surround table:first-of-type[align] td:nth-of-type(5) a:before { content : "Plan To Watch" } #list_surround table:first-of-type[align] td:nth-of-type(6) a:before { content : "All Anime" } /* END OPTIONS */ /************************************************* * HEADINGS THEME * ----------------------------------------------- * Colors to use for bubbles. I suggest trying out * black, and if it blends too much, use white. * The border code just *has* to be here to work. * It doesn't need to be changed. It's for small * triangles under the rounded box. *************************************************/ /* OPTION: BLACK */ #list_surround table:first-of-type[align] td:not(fucked) a:before { background-color : hsla(0, 0%, 10%, 0.8); color : hsla(0, 100%, 100%, 0.8); } #list_surround table:first-of-type[align] td:not(fucked) a:after { border : 7px solid; border-top-color : hsla(0, 0%, 10%, .8); } /* END OPTIONS */ /************************************************* * ORB ICONS, COLORS, TRANSITIONS * ----------------------------------------------- * Orbs use images as masks, the color transition * is actually the background-color switching, not * the image swapping, cuz due to standards it can * not be animated. *************************************************/ /* Icons */ #list_surround table:first-of-type[align] td:not(fucked) a { background-image : url("http://i.imgur.com/uJRss3C.png"); } /* Normal color*/ #list_surround table:first-of-type[align] td:not(fucked) a { background-color : hsl(220, 30%, 50%); } /* Hover color */ #list_surround table:first-of-type[align] td:not(fucked) a:hover { background-color : #8AFB17; } /* Clicked and current color */ #list_surround table:first-of-type[align] td:not(fucked) a:active, .status_selected a { background-color : #DC381F !important; } /* Color transition */ #list_surround table:first-of-type[align] td:not(fucked) a { transition : background-color .3s linear; } /* Bubble transition */ #list_surround table:first-of-type[align] td:not(fucked) a:before, #list_surround table:first-of-type[align] td:not(fucked) a:after { transition : bottom .3s ease-out, opacity .3s ease-out; } /************************************************* * ORBS POSITION * ----------------------------------------------- * This needs to be changed if your list has * all anime category disabled *************************************************/ /* OPTION: SIX CATEGORY BUTTONS */ #list_surround table:first-of-type[align] { margin-left : -158px; } /* END OPTIONS */ /************************************************* * BASIC CODE * ----------------------------------------------- * This is the rest codes that I didn't categorize * Feel free to tweak it to your liking. *************************************************/ /* Handle */ #inlineContent { border-radius : 800px/100px; border-width : 3px 2px 2px; bottom : -35px; display : block !important; height : 57px; position : fixed; z-index : 100; } /* Nav panel */ #list_surround table:first-of-type[align] { bottom : 5px; display : block; left : 50%; position : fixed; width : 360px !important; z-index : 120; } /* Nav panel items */ #list_surround table:first-of-type[align] td:not(fucked) { display : inline-block; height : 42px; padding : 5px; width : 42px; } /* Nav panel links */ #list_surround table:first-of-type[align] td:not(fucked) a { display : block; border-radius : 50%; border : 2px solid white; box-shadow : inset 0 0 2px black, 0 3px 3px black; color : transparent; overflow : hidden; height : 100%; width : 100%; } /* Bubbles */ #list_surround table:first-of-type[align] td:not(fucked) a:before { -moz-box-sizing : border-box; box-sizing : border-box; pointer-events : none; border-radius : 25px; bottom : 45px; content : "error!"; display : block; font-size : small; height : 30px; margin-left : -30px; opacity : 0; overflow : hidden; padding-left : 1px; padding-top : 3px; position : fixed; width : 100px; } /* Small triangle below the bubble */ #list_surround table:first-of-type[align] td:not(fucked) a:after { bottom : 45px; content : ""; display : block; margin-bottom : -14px; margin-left : 13px; opacity : 0; position : fixed; } #list_surround table:first-of-type[align] td:not(fucked) a:hover:before, #list_surround table:first-of-type td:not(fucked) a:hover:after { bottom : 60px; opacity : 1; } /* Forcing overlay behaviour to prevent flicker */ #list_surround table:first-of-type[align] td:nth-of-type(1) a:before { z-index : 121 } #list_surround table:first-of-type[align] td:nth-of-type(2) a:before { z-index : 122 } #list_surround table:first-of-type[align] td:nth-of-type(3) a:before { z-index : 123 } #list_surround table:first-of-type[align] td:nth-of-type(4) a:before { z-index : 124 } #list_surround table:first-of-type[align] td:nth-of-type(5) a:before { z-index : 125 } #list_surround table:first-of-type[align] td:nth-of-type(6) a:before { z-index : 126 } /* Moving the background offset to draw different icons for different categories */ #list_surround table:first-of-type[align] td:nth-of-type(1) a { background-position : 0 0; } #list_surround table:first-of-type[align] td:nth-of-type(2) a { background-position : -42px 0; } #list_surround table:first-of-type[align] td:nth-of-type(3) a { background-position : -84px 0; } #list_surround table:first-of-type[align] td:nth-of-type(4) a { background-position : -126px 0; } #list_surround table:first-of-type[align] td:nth-of-type(5) a { background-position : -168px 0; } #list_surround table:first-of-type[align] td:nth-of-type(6) a { background-position : -210px 0; } /* cursor */ body { cursor:url(http://i.imgur.com/fAB3SUY.png) 1 2, auto; } a:hover { cursor: url(http://i.imgur.com/fAB3SUY.png) 1 2, auto; } #mal_control_strip { display: none !important;} To move your header add this to your codes: [spoiler] .header_completed, .header_onhold, .header_dropped, .header_cw, .header_ptw { position: relative !important; bottom: 10px; /* Increase number to move up*/ } |
Sep 20, 2015 12:12 PM
#3094
Aoi_Yui said: So I'm attempting to render an image I tried using this tutorial but it was a failure due to the light colors on the edges of the image. The background of the image is white but the light colors cause jagged edges that show up on a colored bg. I spent over an hour fooling with the settings and whatnot. I'd use a different image but I can only find 4 of his characters and this is in only one with a bg that wont cause trouble. Here is the image after cropping. (in spoiler) Here is the original Image (in spoilers) Here is my best result I pretty much hit a dead end here. I tried the lasso tool but my hand is nowhere near steady enough. The magic wand tool ignores the unwanted pixels or only selects a few. I attempted pixel by pixel but after over an hour of that my patience ran out. If you need anymore info just ask! Thanks in advance! http://myanimelist.net/forum/?topicid=400287 Did you try the video tutorial here? |
Sep 20, 2015 2:53 PM
#3095
Aoi_Yui said: I strongly suggest that you use the pen tool, I think that is the method in the tutorial shishio linked and I use it every time. you wont get better results than with that.So I'm attempting to render an image I tried using this tutorial but it was a failure due to the light colors on the edges of the image. The background of the image is white but the light colors cause jagged edges that show up on a colored bg. I spent over an hour fooling with the settings and whatnot. I'd use a different image but I can only find 4 of his characters and this is in only one with a bg that wont cause trouble. Here is the image after cropping. (in spoiler) Here is the original Image (in spoilers) Here is my best result I pretty much hit a dead end here. I tried the lasso tool but my hand is nowhere near steady enough. The magic wand tool ignores the unwanted pixels or only selects a few. I attempted pixel by pixel but after over an hour of that my patience ran out. If you need anymore info just ask! Thanks in advance! |
Sep 20, 2015 3:48 PM
#3096
Ok tried that. Got as far as the outline but my image has white parts inside and I cant figure out how to vector mask those as well. I tried delete but that just got rid of the path. I tried convert to selection but it only selected the outside. Also I don't want to delete the vector mask and completely redo my path except as a last resort. |
Aoi_YuiSep 20, 2015 4:07 PM
Sep 20, 2015 6:53 PM
#3097
Sep 20, 2015 7:09 PM
#3098
Aoi_Yui said: Ok tried that. Got as far as the outline but my image has white parts inside and I cant figure out how to vector mask those as well. I tried delete but that just got rid of the path. I tried convert to selection but it only selected the outside. Also I don't want to delete the vector mask and completely redo my path except as a last resort. Well if Oiomi's advice doesn't work for you (and no one else can help with it) I guess you could follow along with rendering tutorials online that show the actual act of rendering and you try to do what they do with your own image, and if you're looking to get into rendering try other easier images and then come back to this one later. And it may not be worth pursuing, you can always ask someone else to do it for you in that thread |
Sep 21, 2015 3:28 AM
#3099
Shishio-kun said: Aoi_Yui said: Ok tried that. Got as far as the outline but my image has white parts inside and I cant figure out how to vector mask those as well. I tried delete but that just got rid of the path. I tried convert to selection but it only selected the outside. Also I don't want to delete the vector mask and completely redo my path except as a last resort. Well if Oiomi's advice doesn't work for you (and no one else can help with it) I guess you could follow along with rendering tutorials online that show the actual act of rendering and you try to do what they do with your own image, and if you're looking to get into rendering try other easier images and then come back to this one later. And it may not be worth pursuing, you can always ask someone else to do it for you in that thread I reviewed the video several times and it appears at least for him the additional paths he drew worked. There's no indication of him changing additional setting before or after creating those paths. The last idea I have is to try combining all the paths as 1 which I'm not sure is even possible. If that doesn't work I'll just ask someone else to do it for me. |
Sep 21, 2015 9:44 AM
#3100
Kaiwan said: It's quite silly but i cant figure out how to draw a white outline cover the list table (like the copyright box below) can anyone help me out? http://myanimelist.net/animelist/Kaiwan?status=2&order=0 My code: @import url(http://fonts.googleapis.com/css?family=Oswald); @import url(http://fonts.googleapis.com/css?family=Salsa); @import url(http://fonts.googleapis.com/css?family=Amatic+SC); @import url(http://fonts.googleapis.com/css?family=Voltaire); @import url(http://pastebin.com/raw.php?i=QKaKmNrn); /* body */ body { background-color: #000000; background-image: url(http://i.imgur.com/m4PuETv.jpg); background-position: right top; background-size: auto !important; background-attachment: fixed; background-repeat: no-repeat; font-family: Salsa; font-size: 13px; letter-spacing: 1px; color: #ffffff; } /* list positioning */ #list_surround { position: left !important; padding-left: 5px !important; width: 670px; opacity: 1; } /* all links on your list */ a { color: #ffffff; text-decoration: none; outline: 0; font-size: 13px; text-shadow: #000 0px 0px 1px; -webkit-font-smoothing: antialiased; } a:visited { color: #ffffff; text-decoration: none; } a:hover { color: #ffffff; text-decoration: none; text-shadow: #ffffff 0 0 10px; } /* row color */ .td1 { background-color: rgba(32, 32, 32, 0.9); padding: 5px; } .td2 { background-color: rgba(32, 32, 32, 0.9); padding: 5px; } /* header */ .table_header { background-color: rgba(32, 32, 32, 0.9); padding: 6px; } /* header links */ .table_headerLink { color: #ffffff; text-decoration: none; font-family: Voltaire; font-size: 15px; } .table_headerLink:Visited { color: #ffffff; text-decoration: none; font-family: Voltaire; font-size: 15px; } .table_headerLink:Hover { color: #ffffff; text-decoration: none; font-family: Voltaire; font-size: 15px; text-shadow: #ffffff 0 0 10px; } /* completed header */ .header_completed { background-image:url(http://i.imgur.com/lgc6kpk.png); height: 90px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* plan to watch header */ .header_ptw { background-image:url(http://i.imgur.com/NQjFZ5S.png); height: 90px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* on hold header */ .header_onhold { background-image:url(http://i.imgur.com/WOSG3hO.png); height: 90px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* dropped header */ .header_dropped { background-image:url(http://i.imgur.com/583hNQv.png); height: 90px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* watching header */ .header_cw { background-image:url(http://i.imgur.com/826lTEp.png); height: 90px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* remove header text */ .header_title { color: gray !important; color: transparent !important; font-size: 1px !important; font-size: 0px !important; font-size: 0 !important; font-size: 0pt !important; } /* do not remove this */ #copyright { padding-top: 6px; padding-bottom: 6px; text-align: center; font-family: Amatic SC; letter-spacing: 1px; font-size: 26px; background-color: rgba(32, 32, 32, 0.9); border-style: solid; border-width: 1px; border-color: white; } #copyright:hover { background-color: #DC381F; -moz-transition: .1s ease; -webkit-transition: .1s ease; -o-transition: .1s ease; } /* highlight hover */ tr:hover [class^=td] { background-color: #DC381F !important; -moz-transition: .1s ease; -webkit-transition: .1s ease; -o-transition: .1s ease; } div[style="float: right;"] {opacity: 0; visibility: hidden;} tr:hover div {opacity: 1; transition: .6s ease; } .category_totals { display: none !important;} #grand_totals { display: none !important;} /************************************************* * FONT * ----------------------------------------------- * This bar was designed to use Cuprum font * (imported from Google here). You can remove the * import link and set it to some other font here *************************************************/ #list_surround table:first-of-type[align] td:not(fucked) a:before { font-family : Oswald; text-shadow: none; } td[class^="status_"] a {text-shadow: none;} /************************************************* * AFTER-LIST MARGIN * ----------------------------------------------- * Due to fixed positioning of this it may happen * that your copyright is covered by the menu. * I therefore added this little offset to add * some empty space after your list. It may not * work even this way or might be unnecessary for * your layout. Contact me if any issues arise *************************************************/ #list_surround { margin-bottom : 57px; } /************************************************* * HANDLE COLOR * ----------------------------------------------- * Background and border of the handle *************************************************/ #inlineContent { background : hsla(260, 50%, 10%, 0.75); border : white solid; } /************************************************* * HANDLE WIDTH * ----------------------------------------------- * I'm using 1000px. And it has to be replaced in * both of these to also affect positioning. *************************************************/ #inlineContent { left : calc(50% - 1000px / 2); width : 1000px; } /************************************************* * HEADINGS TEXT * ----------------------------------------------- * This changes text that appears in bubbles on * hovering the button. There wasn't a way I * could re-use existing code so I had to dup it * in my CSS. More flexibility, anyways *************************************************/ /* OPTION: ANIME LIST */ #list_surround table:first-of-type[align] td:nth-of-type(1) a:before { content : "Watching" } #list_surround table:first-of-type[align] td:nth-of-type(2) a:before { content : "Completed" } #list_surround table:first-of-type[align] td:nth-of-type(3) a:before { content : "On-Hold" } #list_surround table:first-of-type[align] td:nth-of-type(4) a:before { content : "Dropped" } #list_surround table:first-of-type[align] td:nth-of-type(5) a:before { content : "Plan To Watch" } #list_surround table:first-of-type[align] td:nth-of-type(6) a:before { content : "All Anime" } /* END OPTIONS */ /************************************************* * HEADINGS THEME * ----------------------------------------------- * Colors to use for bubbles. I suggest trying out * black, and if it blends too much, use white. * The border code just *has* to be here to work. * It doesn't need to be changed. It's for small * triangles under the rounded box. *************************************************/ /* OPTION: BLACK */ #list_surround table:first-of-type[align] td:not(fucked) a:before { background-color : hsla(0, 0%, 10%, 0.8); color : hsla(0, 100%, 100%, 0.8); } #list_surround table:first-of-type[align] td:not(fucked) a:after { border : 7px solid; border-top-color : hsla(0, 0%, 10%, .8); } /* END OPTIONS */ /************************************************* * ORB ICONS, COLORS, TRANSITIONS * ----------------------------------------------- * Orbs use images as masks, the color transition * is actually the background-color switching, not * the image swapping, cuz due to standards it can * not be animated. *************************************************/ /* Icons */ #list_surround table:first-of-type[align] td:not(fucked) a { background-image : url("http://i.imgur.com/uJRss3C.png"); } /* Normal color*/ #list_surround table:first-of-type[align] td:not(fucked) a { background-color : hsl(220, 30%, 50%); } /* Hover color */ #list_surround table:first-of-type[align] td:not(fucked) a:hover { background-color : #8AFB17; } /* Clicked and current color */ #list_surround table:first-of-type[align] td:not(fucked) a:active, .status_selected a { background-color : #DC381F !important; } /* Color transition */ #list_surround table:first-of-type[align] td:not(fucked) a { transition : background-color .3s linear; } /* Bubble transition */ #list_surround table:first-of-type[align] td:not(fucked) a:before, #list_surround table:first-of-type[align] td:not(fucked) a:after { transition : bottom .3s ease-out, opacity .3s ease-out; } /************************************************* * ORBS POSITION * ----------------------------------------------- * This needs to be changed if your list has * all anime category disabled *************************************************/ /* OPTION: SIX CATEGORY BUTTONS */ #list_surround table:first-of-type[align] { margin-left : -158px; } /* END OPTIONS */ /************************************************* * BASIC CODE * ----------------------------------------------- * This is the rest codes that I didn't categorize * Feel free to tweak it to your liking. *************************************************/ /* Handle */ #inlineContent { border-radius : 800px/100px; border-width : 3px 2px 2px; bottom : -35px; display : block !important; height : 57px; position : fixed; z-index : 100; } /* Nav panel */ #list_surround table:first-of-type[align] { bottom : 5px; display : block; left : 50%; position : fixed; width : 360px !important; z-index : 120; } /* Nav panel items */ #list_surround table:first-of-type[align] td:not(fucked) { display : inline-block; height : 42px; padding : 5px; width : 42px; } /* Nav panel links */ #list_surround table:first-of-type[align] td:not(fucked) a { display : block; border-radius : 50%; border : 2px solid white; box-shadow : inset 0 0 2px black, 0 3px 3px black; color : transparent; overflow : hidden; height : 100%; width : 100%; } /* Bubbles */ #list_surround table:first-of-type[align] td:not(fucked) a:before { -moz-box-sizing : border-box; box-sizing : border-box; pointer-events : none; border-radius : 25px; bottom : 45px; content : "error!"; display : block; font-size : small; height : 30px; margin-left : -30px; opacity : 0; overflow : hidden; padding-left : 1px; padding-top : 3px; position : fixed; width : 100px; } /* Small triangle below the bubble */ #list_surround table:first-of-type[align] td:not(fucked) a:after { bottom : 45px; content : ""; display : block; margin-bottom : -14px; margin-left : 13px; opacity : 0; position : fixed; } #list_surround table:first-of-type[align] td:not(fucked) a:hover:before, #list_surround table:first-of-type td:not(fucked) a:hover:after { bottom : 60px; opacity : 1; } /* Forcing overlay behaviour to prevent flicker */ #list_surround table:first-of-type[align] td:nth-of-type(1) a:before { z-index : 121 } #list_surround table:first-of-type[align] td:nth-of-type(2) a:before { z-index : 122 } #list_surround table:first-of-type[align] td:nth-of-type(3) a:before { z-index : 123 } #list_surround table:first-of-type[align] td:nth-of-type(4) a:before { z-index : 124 } #list_surround table:first-of-type[align] td:nth-of-type(5) a:before { z-index : 125 } #list_surround table:first-of-type[align] td:nth-of-type(6) a:before { z-index : 126 } /* Moving the background offset to draw different icons for different categories */ #list_surround table:first-of-type[align] td:nth-of-type(1) a { background-position : 0 0; } #list_surround table:first-of-type[align] td:nth-of-type(2) a { background-position : -42px 0; } #list_surround table:first-of-type[align] td:nth-of-type(3) a { background-position : -84px 0; } #list_surround table:first-of-type[align] td:nth-of-type(4) a { background-position : -126px 0; } #list_surround table:first-of-type[align] td:nth-of-type(5) a { background-position : -168px 0; } #list_surround table:first-of-type[align] td:nth-of-type(6) a { background-position : -210px 0; } /* cursor */ body { cursor:url(http://i.imgur.com/fAB3SUY.png) 1 2, auto; } a:hover { cursor: url(http://i.imgur.com/fAB3SUY.png) 1 2, auto; } #mal_control_strip { display: none !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 |