New
Feb 23, 2012 11:58 AM
#101
Oh, that's because universal selector is used here, and I've tried the code on my layout where it worked. I try to avoid universal selector because it feels like using a rocketlauncher to kill a fly, I set up font size and family in body (common practice) and we have enough classes to deal with colors. |
![]() |
Feb 23, 2012 1:03 PM
#102
I feel the same way about it too actually! For those who might be wondering, universal selector is :* { lmao at "rocket launcher to kill a fly", thats how Epic Meal Time would do pest control |
Mar 1, 2012 6:24 AM
#103
Thanks for the Anime list, is very good. But i want doing some diffrent about it, just like this.. but i dont know what i need to modificate on the CSS. Someone can help me? Please :'( ![]() |
Mar 1, 2012 9:38 AM
#104
Whose list does that screenshot come from? |
Mar 1, 2012 5:38 PM
#105
Someone, i dont remember.. i need search from the history of the browser lol why? |
LukaPochiMar 1, 2012 6:08 PM
Mar 1, 2012 11:56 PM
#107
Luka87XD said: Someone, i dont remember.. i need search from the history of the browser lol why? Yeah I want to just take their code and put it into yours, rather than write an original header code |
Mar 2, 2012 6:45 AM
#108
Oh really? Thank you very much Shishio.. i appreciate your kindness (・ω・) Anyway i found it http://myanimelist.net/animelist/Shing02 |
Mar 2, 2012 8:01 AM
#109
Ripped code: /* // Self-explanatory */ BODY * { color:#DBDBDB; border:0; font-family:Verdana; font-size:9px; font-weight:normal; text-decoration:none; } a:hover { text-decoration:underline; } body { background:#181818 url(http://i49.tinypic.com/246thj5.jpg) repeat-y scroll center bottom; } #list_surround { background:#181818; border-bottom:1px solid #292929; border-left:1px solid #292929; border-right:1px solid #292929; height:100%; left:0px; margin:0 auto; position:relative; width:600px; } #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:5px; padding:252px 5px 5px 5px; width:590px; } #list_surround .header_cw { background:transparent url(http://www.cantilux.net/files6/1558757859.jpg) no-repeat 0 0; } #list_surround .header_completed { background:transparent url(http://www.cantilux.net/files6/2081612168.jpg) no-repeat 0 0; } #list_surround .header_onhold { background:transparent url(http://www.cantilux.net/files6/1679696950.jpg) no-repeat 0 0; } #list_surround .header_ptw { background:transparent url(http://www.cantilux.net/files6/2190227007.jpg) no-repeat 0 0; } #list_surround .header_dropped { background:transparent url(http://www.cantilux.net/files6/1349697064.jpg) no-repeat 0 0; } #list_surround .animetitle + small { color:#00FF00; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #copyright { padding-top: 6px; text-align: center; margin: 0 auto; width: px; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { margin-left:-209px; } } |
![]() |
Mar 9, 2012 5:52 PM
#111
Hello thanks for the layout! I'm wondering how I can change the header that says Plan to Read/Dropped/Reading/Etc.? Is it an actual image or can I change the font and color inside it? Also, is there a way to remove the border under it? Thanks in advance! Code: * { color:white; border:0; font-family:monotype corsiva; font-size:20px; font-weight:normal; text-decoration:none; } a:hover { text-decoration:underline; } body { background:#181818 url(http://i39.tinypic.com/nowwsp.jpg) repeat-y scroll center top; } #list_surround { background:pink; border-bottom:1px #292929; border-left:1px #292929; border-right:1px #292929; height:100%; left:141px; margin:239px auto 30px auto; position:relative; width:584px; } #list_surround .status_selected { background:url(http://i41.tinypic.com/zurzgh.jpg); display:block; height:130px; left:-284px; padding:0; position:absolute; top:0; width:273px; } #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 { background:url(http://i41.tinypic.com/zurzgh.jpg); display:block; height:130px; left:-284px; padding:0; position:absolute; top:0; width:273px; } #list_surround .status_not_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #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://i41.tinypic.com/vqnoef.jpg); top: 140px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i42.tinypic.com/2ltriuo.jpg); top: 280px; } #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://i44.tinypic.com/dgh4qe.jpg) repeat scroll 0 0 transparent; top:420px; } #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://i44.tinypic.com/29w4kgn.jpg); display:inline; top: 560px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i41.tinypic.com/2aam2p3.jpg) no-repeat 0 0; display:inline; padding-bottom:30px; top: 700px; }#list_surround br { display:none; } #list_surround .header_title { background:url(http://i39.tinypic.com/15s7r13.jpg); height:169px; left:-283px; padding:25px; position:absolute; top:-229px; width:819px; } #list_surround .header_title span { color:red; 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 5px; width:586px; } #list_surround .header_cw { background:transparent url(http://i21.photobucket.com/albums/b298/LudvigP/currentlyreading12.png) no-repeat 0 0; } #list_surround .header_completed { background:transparent url(http://i38.tinypic.com/e9hdud.png) no-repeat 0 0; } #list_surround .header_onhold { background:transparent url(http://i33.tinypic.com/oiaged.png) no-repeat 0 0; } #list_surround .header_ptw { background:transparent url(http://i21.photobucket.com/albums/b298/LudvigP/plantoread11.png) no-repeat 0 0; } #list_surround .header_dropped { background:transparent url(http://i38.tinypic.com/t7fi8w.png) no-repeat 0 0; } #list_surround .animetitle + big { color: red; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #copyright { background:url(http://i34.tinypic.com/e1vup.png) no-repeat 0 0; color:#181818; height:15px; margin-left:-349px; padding-top:5px; position:fixed; bottom:0; width:1000px; font-family: Monotype corsiva; font-size: 10px; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { margin-left:-209px; } } } |
Mar 9, 2012 9:25 PM
#112
@ Beedlebud It is an image: you can't select the text with your mouse. And, since border is embedded into the pic, you can only hide it Beedlebud said: #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 5px; width:586px; } replace the value in bold with say 15px, this should do |
![]() |
Mar 10, 2012 7:42 AM
#113
Aw darn. Okay, thanks for the help with hiding that border though! |
Mar 17, 2012 6:18 PM
#114
Tinypic has removed some of the menu bars :c Can someone restore them ? |
Mar 18, 2012 1:18 AM
#115
It looks like the person who uploaded them closed their account and the images were taken with them. I can replace these, actually a lot of people could lol since Rodness made them on the Manga List. I just need to find out what the font was. I'm terrible as determining font type/weight and all that actually. Does anyone know what it is? ![]() Closest thing looks like: font-family: Trebuchet MS; font-size: 11px; font-weight: bold; but its not exact, I'll use it tho if no one can tell me the original font used. |
Shishio-kunMar 18, 2012 1:29 AM
Mar 18, 2012 8:32 AM
#117
Mar 18, 2012 8:43 AM
#118
By the way, I may still have got the original green bars left on my computer. I'm gonna search for 'em right away, but there's a chance that I deleted 'em as soon as I was done with 'em. ^^' EDIT: ![]() Not sure if I've still got the others... Doesn't look like I have. Only the "dropped header", but that one isn't deleted from Tinypic. |
RodnessMar 18, 2012 8:49 AM
Mar 18, 2012 12:07 PM
#119
Rodness said: Nope, it's not Calibri. I have no idea which font it is 'cause I ain't got the .psd file left. I'll try go through similar fonts. I've found plenty of similar fonts already, but none of them have got this nice small Y in them. I know it seems perfect then theres always one damn letter thats off lol! |
Mar 18, 2012 12:14 PM
#120
Haha Calibri was close enough, 'cause R, r, y, l & g were the same from my point of view (other letters as well, but I looked for font that matches these) |
![]() |
Mar 18, 2012 12:19 PM
#121
http://i40.tinypic.com/15669zk.png Found a copy of the whole layout in original size in my hall of fame thread. I can cut the headers out from here! |
Mar 18, 2012 1:09 PM
#122
Mar 18, 2012 3:38 PM
#123
nam86 said: Tinypic has removed some of the menu bars :c Can someone restore them ? The problem has been solved, you can get a fix from the first post in this thread! Its a simple copy and paste to the bottom of your CSS. In addition, I have modified the original codes with the restored headers (menu bars) and fixed some other issues that came out over the month like font size on the menu bar. Also the codes for the list font, banner and buttons have been moved to the top of the CSS to make it easier to customize in the future! Sadly, I noticed the original four button layout was all messed up and missing all its images, so I took it out completely. If anyone has a fixed copy please post it here. But fortunately, screenshots in the Hall of Fame thread are for viewing the original and ironically it helped restore the header bars of the updated 5-button layout. http://myanimelist.net/forum/?topicid=318017 |
Shishio-kunMar 18, 2012 8:36 PM
Mar 18, 2012 8:32 PM
#124
Shishio-kun said: nam86 said: Tinypic has removed some of the menu bars :c Can someone restore them ? The problem has been solved, you can get a fix from the first post in this thread! Its a simple copy and paste to the bottom of your CSS. Thanks a lot, you saved the day ^o^ |
Mar 22, 2012 7:52 PM
#125
Apr 17, 2012 4:34 AM
#126
The "Plan to Watch" picture is gone now.. I was wondering if anyone could if it? Thanks |
Apr 18, 2012 2:51 PM
#127
Nexas00 said: The "Plan to Watch" picture is gone now.. I was wondering if anyone could if it? Thanks OK, I updated the Header Fix patch at the bottom of the first post. You just copy and paste it to the bottom of your CSS. It contains a fix for the plan to watch header. Here it is to add to the bottom for convenience sake: #list_surround .header_ptw { background:url(http://i43.tinypic.com/sdioar.jpg) no-repeat scroll 0 0 transparent; } |
Apr 19, 2012 10:30 AM
#128
Using :) |
Apr 25, 2012 1:49 PM
#129
Hi , i'm using this style right now,and i was wondering if i can change the background color (Dark Gray)!,because it doesn't match with the header and the side buttons my list's link http://myanimelist.net/animelist/PANIK-HIPA&status=7&order=0 |
Apr 28, 2012 8:18 PM
#130
PANIK-HIPA said: Hi , i'm using this style right now,and i was wondering if i can change the background color (Dark Gray)!,because it doesn't match with the header and the side buttons my list's link http://myanimelist.net/animelist/PANIK-HIPA&status=7&order=0 Try adding this to the bottom of your CSS. This is your new code to control the background. Its going to remove both a black graphic from the layout and the black background color. #D6D6D6 is the name of a HTML color some thats similar one of the gray graphics on your layout. You can replace it with another named color or HTML color tho if it doesn't suit you tho. Google "HTML colors" if you want some more HTML colors (other shades of gray). body { background: url("none") repeat-y scroll center bottom #D6D6D6; } |
Apr 28, 2012 10:43 PM
#131
@ Shishio-kun Something I found out today: Just noticed in Dragonfly, url("none") is actually incorrect because it leads to non-existent image e.g. http://myanimelist.net/animelist/VeriTi/none instead of no image at all, it's just another useless request for server to handle. And this means, there is nothing to repeat or position either: body { background: #D6D6D6; } This will be enough. |
![]() |
May 9, 2012 11:31 AM
#132
Shishio-kun,thank you so much for your help,i hope i didn't bother you ^^ |
Jul 10, 2012 4:00 PM
#133
What's the code to change the position of the buttons Watching, Plan To Watch, On-Hold, etc. to the top instead of on the left? If it's possible, I would prefer that. |
Jul 13, 2012 11:38 PM
#134
Todd_Jensen said: What's the code to change the position of the buttons Watching, Plan To Watch, On-Hold, etc. to the top instead of on the left? If it's possible, I would prefer that. Not really made imo for that but I guess you could add to the buttons codes: position: absolute; left: 0px; top: 0px; And move them from there by adjusting the 0px amounts. Just an educated guess tho, you might need more (maybe someone else can chime in) and you can use relative or fixed in place of absolute for more options. |
Jul 17, 2012 6:26 PM
#135
Hi! I'm currently using an edited version of this layout. However, I've run in some problems with the top banner image. I'm using an image with some semi-transparent parts. When I choose to view "All Anime" on my list, the opacity of the banner becomes a lot more opaque. However, it is fine when I view the other sections (Currently Watching, Completed, etc.) Some screenshots: How it looks like for "All Anime": http://puu.sh/Jrw7 How it looks like for the other sections: http://puu.sh/Jrvi Code: body { background:url(http://i.imgur.com/qbx5T.jpg) fixed center top #000000; } /* LIST FONT These codes control the font on the list itself (anime titles, etc). */ * { border:0 none; color:#DBDBDB; font-family:Verdana; font-size:9px; font-weight:normal; 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://i.imgur.com/4RuXt.png) no-repeat scroll 0 0 transparent; height:375px; left:-282px; padding:25px; position:absolute; top:-425px; width:850px; } /* 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/VygiI.png) repeat scroll 0 0 transparent; display:block; height:100px; left:-283px; padding:0; position:absolute; top:0px; width:270px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/EypFX.png) repeat scroll 0 0 transparent; top:110px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/XfIAq.png) repeat scroll 0 0 transparent; top:220px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/Djnon.png) repeat scroll 0 0 transparent; top:330px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/y93VK.png) repeat scroll 0 0 transparent; display:inline; top:440px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/sqCLu.png) no-repeat scroll 0 0 transparent; display:inline; padding-bottom:30px; top:550px; } /* HEADERS */ #list_surround .header_cw { background:url(http://i.imgur.com/djaJO.png) no-repeat scroll 0 0 transparent; } #list_surround .header_completed { background:url(http://i.imgur.com/3jcgG.png) no-repeat scroll 0 0 transparent; } #list_surround .header_onhold { background:url(http://i.imgur.com/L4bVw.png) no-repeat scroll 0 0 transparent; } #list_surround .header_ptw { background:url(http://i.imgur.com/cJTI9.png) no-repeat scroll 0 0 transparent; } #list_surround .header_dropped { background:url(http://i.imgur.com/gWhVk.png) no-repeat scroll 0 0 transparent; } /* OTHER CODES */ a:hover { text-decoration:underline; } #list_surround { background:none repeat scroll 0 0 rgba(4, 18, 50, 0.75); border-bottom:0px solid #292929; border-left:0px solid #292929; border-right:0px solid #292929; height:100%; left:141px; top:140px; margin:239px auto 30px; position:relative; width:618px; } #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 { padding:28px 5px 5px; margin-left:0px; width:586px; } #list_surround .animetitle + small { color:#ff9e96; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #mal_cs_listinfo a strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal; font-weight: normal; text-decoration: underline; text-transform: none;} #mal_cs_otherlinks strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal;} .borderRBL { color: 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 { -moz-background-inline-policy:continuous; text-align: right !important; color:#3a4358; height:15px; margin-left:735px; padding-top:5px; position:fixed; bottom:50px; width:250px; font-family: sans-serif; font-size: 10px; } #copyright a { color:#3a4358; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { margin-left:-209px; } } Any help would much appreciated ^^ |
![]() ![]() ![]() ![]() ![]() ![]() |
Jul 17, 2012 11:52 PM
#136
Ichigo-Sora said: Hi! I'm currently using an edited version of this layout. However, I've run in some problems with the top banner image. I'm using an image with some semi-transparent parts. When I choose to view "All Anime" on my list, the opacity of the banner becomes a lot more opaque. However, it is fine when I view the other sections (Currently Watching, Completed, etc.) Some screenshots: How it looks like for "All Anime": http://puu.sh/Jrw7 How it looks like for the other sections: http://puu.sh/Jrvi Code: body { background:url(http://i.imgur.com/qbx5T.jpg) fixed center top #000000; } /* LIST FONT These codes control the font on the list itself (anime titles, etc). */ * { border:0 none; color:#DBDBDB; font-family:Verdana; font-size:9px; font-weight:normal; 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://i.imgur.com/4RuXt.png) no-repeat scroll 0 0 transparent; height:375px; left:-282px; padding:25px; position:absolute; top:-425px; width:850px; } /* 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/VygiI.png) repeat scroll 0 0 transparent; display:block; height:100px; left:-283px; padding:0; position:absolute; top:0px; width:270px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/EypFX.png) repeat scroll 0 0 transparent; top:110px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/XfIAq.png) repeat scroll 0 0 transparent; top:220px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/Djnon.png) repeat scroll 0 0 transparent; top:330px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/y93VK.png) repeat scroll 0 0 transparent; display:inline; top:440px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/sqCLu.png) no-repeat scroll 0 0 transparent; display:inline; padding-bottom:30px; top:550px; } /* HEADERS */ #list_surround .header_cw { background:url(http://i.imgur.com/djaJO.png) no-repeat scroll 0 0 transparent; } #list_surround .header_completed { background:url(http://i.imgur.com/3jcgG.png) no-repeat scroll 0 0 transparent; } #list_surround .header_onhold { background:url(http://i.imgur.com/L4bVw.png) no-repeat scroll 0 0 transparent; } #list_surround .header_ptw { background:url(http://i.imgur.com/cJTI9.png) no-repeat scroll 0 0 transparent; } #list_surround .header_dropped { background:url(http://i.imgur.com/gWhVk.png) no-repeat scroll 0 0 transparent; } /* OTHER CODES */ a:hover { text-decoration:underline; } #list_surround { background:none repeat scroll 0 0 rgba(4, 18, 50, 0.75); border-bottom:0px solid #292929; border-left:0px solid #292929; border-right:0px solid #292929; height:100%; left:141px; top:140px; margin:239px auto 30px; position:relative; width:618px; } #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 { padding:28px 5px 5px; margin-left:0px; width:586px; } #list_surround .animetitle + small { color:#ff9e96; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #mal_cs_listinfo a strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal; font-weight: normal; text-decoration: underline; text-transform: none;} #mal_cs_otherlinks strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal;} .borderRBL { color: 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 { -moz-background-inline-policy:continuous; text-align: right !important; color:#3a4358; height:15px; margin-left:735px; padding-top:5px; position:fixed; bottom:50px; width:250px; font-family: sans-serif; font-size: 10px; } #copyright a { color:#3a4358; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { margin-left:-209px; } } Any help would much appreciated ^^ I am pretty sure its because when you have it on a single category, like Currently watching, the banner for CW is only seen once at the top of the page. But on All Anime all the category pages get their banner at the top in the same place. So they all end up behind each other and seem to increase the opacity of the front image. Hard to explain.. nice layout btw |
Jul 18, 2012 10:53 AM
#137
Thanks! Is there anyway to prevent it from happening? |
![]() ![]() ![]() ![]() ![]() ![]() |
Jul 18, 2012 9:21 PM
#138
Ichigo-Sora said: Thanks! Is there anyway to prevent it from happening? Yeah, you can use another code for the banner besides the header. This way it will be the same on all pages. I would suggest #inline_content since you're not using it. First remove the banner from your old codes, then use this add on: http://myanimelist.net/forum/?topicid=393581 Just use the one that goes behind the list (by default its the snow) and set that to contain your banner image instead of the snow- the background position will need to be centered top and set to no repeat. If its hard to get right you can post back here and I can adjust the settings. |
Jul 19, 2012 5:41 AM
#139
Jul 19, 2012 6:14 AM
#140
See this tutorial on removing stuff easily: http://myanimelist.net/forum/?topicid=464437&show=0#post1 Then use that display: none code on the LEFT SIDE BUTTONS in your custom CSS. Then increase the width of the #list_surround to your liking (found after OTHER CODES). You may also need to adjust the left amount to move it to the left, and the position of the BANNER. |
Jul 19, 2012 9:17 PM
#141
Shishio-kun said: Ichigo-Sora said: Thanks! Is there anyway to prevent it from happening? Yeah, you can use another code for the banner besides the header. This way it will be the same on all pages. I would suggest #inline_content since you're not using it. First remove the banner from your old codes, then use this add on: http://myanimelist.net/forum/?topicid=393581 Just use the one that goes behind the list (by default its the snow) and set that to contain your banner image instead of the snow- the background position will need to be centered top and set to no repeat. If its hard to get right you can post back here and I can adjust the settings. That did the trick! Thanks for all the help ^^ |
![]() ![]() ![]() ![]() ![]() ![]() |
Aug 29, 2012 4:09 AM
#142
i think my picture for the banner is quite big, how can i make it the right size??? only a part of the picture shows up because of the big pixels, and i tried adjusting the width and height but the results are not the ones i want?? please help. |
Aug 29, 2012 4:26 AM
#143
moon_love said: i think my picture for the banner is quite big, how can i make it the right size??? only a part of the picture shows up because of the big pixels, and i tried adjusting the width and height but the results are not the ones i want?? please help. Try to put following line in the code: #list_surround .header_title { background:url(http://i46.tinypic.com/29y5is7.jpg) repeat scroll 0 0 transparent; background-size: cover; height:169px; left:-283px; padding:25px; position:absolute; top:-229px; width:819px; } Or simply resize your background in any graphic editor |
Sep 11, 2012 5:23 PM
#144
Thanks for the layout! ^^ Will probably mess around with CSS code more though...been awhile since I used it lol. Changed pictures but idk about them still... |
Sep 12, 2012 9:02 AM
#145
Ok I ended up leaving it like this...first two images on both are a little animated for the text on it. Anime List ![]() Code: 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:Verdana; font-size:9px; font-weight:normal; 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://dl.dropbox.com/u/104589359/ALIST-Banner.gif) repeat scroll 0 0 transparent; height:169px; left:-283px; padding:25px; position:absolute; top:-229px; width:819px; } /* 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://dl.dropbox.com/u/104589359/CurrentlyWatchingA.gif) repeat scroll 0 0 transparent; display:block; height:130px; left:-284px; padding:0; position:absolute; top:0; 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://dl.dropbox.com/u/104589359/CompletedA.jpg) repeat scroll 0 0 white; top:140px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://dl.dropbox.com/u/104589359/OnHoldA.jpg) repeat scroll 0 0 transparent; top:280px; } #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://dl.dropbox.com/u/104589359/DroppedA.jpg) repeat scroll 0 0 transparent; top:420px; } #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://dl.dropbox.com/u/104589359/PlanToWatchA.jpg) repeat scroll 0 0 transparent; display:inline; top:560px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://dl.dropbox.com/u/104589359/All%20Anime.jpg) no-repeat scroll 0 0 transparent; display:inline; padding-bottom:30px; top:700px; } /* HEADERS */ #list_surround .header_cw { background:url(http://dl.dropbox.com/u/104589359/Cw.jpg) no-repeat scroll 0 0 transparent; } #list_surround .header_completed { background:url(http://dl.dropbox.com/u/104589359/completed.jpg) no-repeat scroll 0 0 transparent; } #list_surround .header_onhold { background:url(http://dl.dropbox.com/u/104589359/On-Hold.jpg) no-repeat scroll 0 0 transparent; } #list_surround .header_ptw { background:url(http://dl.dropbox.com/u/104589359/plan%20to%20watch.jpg) no-repeat scroll 0 0 transparent; } #list_surround .header_dropped { background:url(http://dl.dropbox.com/u/104589359/dropped.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:141px; margin:239px auto 30px; position:relative; width:584px; } #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:#00c0ff; } #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://dl.dropbox.com/u/104589359/bar.jpg) no-repeat 0 0; color:#181818; height:15px; margin-left:-349px; padding-top:5px; position:fixed; bottom:0; width:1000px; font-family: sans-serif; font-size: 10px; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { margin-left:-209px; } } Manga List ![]() Code: 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). You can change the color of the font, the font-family, and the font-size easily here. */ * { border:0 none; color:#DBDBDB; font-family:Verdana; font-size:9px; font-weight:normal; text-decoration:none; } /* BANNER This controls the image at the top that by default says "Manga 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://dl.dropbox.com/u/104589359/MLIST.gif); height:169px; left:-283px; padding:25px; position:absolute; top:-229px; width:819px; } /* 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 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://dl.dropbox.com/u/104589359/CurrentlyReadingM.gif); display:block; height:130px; left:-284px; padding:0; position:absolute; top:0; 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://dl.dropbox.com/u/104589359/CompletedM.jpg); top: 140px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://dl.dropbox.com/u/104589359/OnHoldM.jpg); top: 280px; } #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://dl.dropbox.com/u/104589359/DroppedM.jpg) repeat scroll 0 0 transparent; top:420px; } #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://dl.dropbox.com/u/104589359/PlanToReadM.jpg); display:inline; top: 560px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://dl.dropbox.com/u/104589359/All%20mANGA.jpg) no-repeat 0 0; display:inline; padding-bottom:30px; top: 700px; } /* HEADERS */ #list_surround .header_cw { background:transparent url(http://dl.dropbox.com/u/104589359/Cr.jpg) no-repeat 0 0; } #list_surround .header_completed { background:transparent url(http://dl.dropbox.com/u/104589359/completed.jpg) no-repeat 0 0; } #list_surround .header_onhold { background:transparent url(http://dl.dropbox.com/u/104589359/On-Hold.jpg) no-repeat 0 0; } #list_surround .header_ptw { background:transparent url(http://dl.dropbox.com/u/104589359/Plan%20to%20Read.jpg) no-repeat 0 0; } #list_surround .header_dropped { background:transparent url(http://dl.dropbox.com/u/104589359/Dropped.jpg) no-repeat 0 0; } /* 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:141px; margin:239px auto 30px; position:relative; width:584px; } #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:#00c0ff; } #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://dl.dropbox.com/u/104589359/bar.jpg) no-repeat 0 0; color:#181818; height:15px; margin-left:-349px; padding-top:5px; position:fixed; bottom:0; width:1000px; font-family: sans-serif; font-size: 10px; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { margin-left:-209px; } } |
-Deactivated-Sep 12, 2012 9:09 AM
Sep 14, 2012 8:20 AM
#146
lolwutfool said: Ok I ended up leaving it like this...first two images on both are a little animated for the text on it. Anime List ![]() Code: 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:Verdana; font-size:9px; font-weight:normal; 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://dl.dropbox.com/u/104589359/ALIST-Banner.gif) repeat scroll 0 0 transparent; height:169px; left:-283px; padding:25px; position:absolute; top:-229px; width:819px; } /* 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://dl.dropbox.com/u/104589359/CurrentlyWatchingA.gif) repeat scroll 0 0 transparent; display:block; height:130px; left:-284px; padding:0; position:absolute; top:0; 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://dl.dropbox.com/u/104589359/CompletedA.jpg) repeat scroll 0 0 white; top:140px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://dl.dropbox.com/u/104589359/OnHoldA.jpg) repeat scroll 0 0 transparent; top:280px; } #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://dl.dropbox.com/u/104589359/DroppedA.jpg) repeat scroll 0 0 transparent; top:420px; } #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://dl.dropbox.com/u/104589359/PlanToWatchA.jpg) repeat scroll 0 0 transparent; display:inline; top:560px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://dl.dropbox.com/u/104589359/All%20Anime.jpg) no-repeat scroll 0 0 transparent; display:inline; padding-bottom:30px; top:700px; } /* HEADERS */ #list_surround .header_cw { background:url(http://dl.dropbox.com/u/104589359/Cw.jpg) no-repeat scroll 0 0 transparent; } #list_surround .header_completed { background:url(http://dl.dropbox.com/u/104589359/completed.jpg) no-repeat scroll 0 0 transparent; } #list_surround .header_onhold { background:url(http://dl.dropbox.com/u/104589359/On-Hold.jpg) no-repeat scroll 0 0 transparent; } #list_surround .header_ptw { background:url(http://dl.dropbox.com/u/104589359/plan%20to%20watch.jpg) no-repeat scroll 0 0 transparent; } #list_surround .header_dropped { background:url(http://dl.dropbox.com/u/104589359/dropped.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:141px; margin:239px auto 30px; position:relative; width:584px; } #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:#00c0ff; } #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://dl.dropbox.com/u/104589359/bar.jpg) no-repeat 0 0; color:#181818; height:15px; margin-left:-349px; padding-top:5px; position:fixed; bottom:0; width:1000px; font-family: sans-serif; font-size: 10px; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { margin-left:-209px; } } Manga List ![]() Code: 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). You can change the color of the font, the font-family, and the font-size easily here. */ * { border:0 none; color:#DBDBDB; font-family:Verdana; font-size:9px; font-weight:normal; text-decoration:none; } /* BANNER This controls the image at the top that by default says "Manga 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://dl.dropbox.com/u/104589359/MLIST.gif); height:169px; left:-283px; padding:25px; position:absolute; top:-229px; width:819px; } /* 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 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://dl.dropbox.com/u/104589359/CurrentlyReadingM.gif); display:block; height:130px; left:-284px; padding:0; position:absolute; top:0; 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://dl.dropbox.com/u/104589359/CompletedM.jpg); top: 140px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://dl.dropbox.com/u/104589359/OnHoldM.jpg); top: 280px; } #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://dl.dropbox.com/u/104589359/DroppedM.jpg) repeat scroll 0 0 transparent; top:420px; } #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://dl.dropbox.com/u/104589359/PlanToReadM.jpg); display:inline; top: 560px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { background:url(http://dl.dropbox.com/u/104589359/All%20mANGA.jpg) no-repeat 0 0; display:inline; padding-bottom:30px; top: 700px; } /* HEADERS */ #list_surround .header_cw { background:transparent url(http://dl.dropbox.com/u/104589359/Cr.jpg) no-repeat 0 0; } #list_surround .header_completed { background:transparent url(http://dl.dropbox.com/u/104589359/completed.jpg) no-repeat 0 0; } #list_surround .header_onhold { background:transparent url(http://dl.dropbox.com/u/104589359/On-Hold.jpg) no-repeat 0 0; } #list_surround .header_ptw { background:transparent url(http://dl.dropbox.com/u/104589359/Plan%20to%20Read.jpg) no-repeat 0 0; } #list_surround .header_dropped { background:transparent url(http://dl.dropbox.com/u/104589359/Dropped.jpg) no-repeat 0 0; } /* 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:141px; margin:239px auto 30px; position:relative; width:584px; } #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:#00c0ff; } #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://dl.dropbox.com/u/104589359/bar.jpg) no-repeat 0 0; color:#181818; height:15px; margin-left:-349px; padding-top:5px; position:fixed; bottom:0; width:1000px; font-family: sans-serif; font-size: 10px; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { margin-left:-209px; } } Very good, like the colors! |
Jan 6, 2013 1:29 AM
#147
Hi there, I was wondering where I could change the background of the theme from a grey color to an image? I tried messing about with the CSS, but I wasn't successful. Please help! |
- Louise ~ ^^ |
Jan 6, 2013 10:06 AM
#148
lettertothewind said: Hi there, I was wondering where I could change the background of the theme from a grey color to an image? I tried messing about with the CSS, but I wasn't successful. Please help! The very top line of code- it has an image link in parenthesis. You change it out with one of your own like I did here (see the part in bold at the top). body { background: url("http://i46.tinypic.com/29x83o8.jpg") repeat-y fixed center bottom #181818; } * { border: 0 none; color: #DBDBDB; font-family: Verdana; font-size: 9px; font-weight: normal; text-decoration: none; } #list_surround .header_title { background: url("http://i35.tinypic.com/x2nrrt.png") repeat scroll 0 0 transparent; height: 169px; left: -283px; padding: 25px; position: absolute; top: -229px; width: 819px; } #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; } #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; } #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; } #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; } #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; } #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; } #list_surround .header_cw { background: url("http://i40.tinypic.com/11tq78o.jpg") no-repeat scroll 0 0 transparent; } #list_surround .header_completed { background: url("http://i42.tinypic.com/n539z7.jpg") no-repeat scroll 0 0 transparent; } #list_surround .header_onhold { background: url("http://i44.tinypic.com/b90sy.jpg") no-repeat scroll 0 0 transparent; } #list_surround .header_ptw { background: url("http://i43.tinypic.com/sdioar.jpg") no-repeat scroll 0 0 transparent; } #list_surround .header_dropped { background: url("http://i41.tinypic.com/160wut.jpg") no-repeat scroll 0 0 transparent; } 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: 141px; margin: 239px auto 30px; position: relative; width: 584px; } #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; } #copyright { background: url("http://i48.tinypic.com/dyty1i.jpg") no-repeat scroll 0 0 transparent; bottom: 0; color: #181818; font-family: sans-serif; font-size: 10px; height: 15px; margin-left: -349px; padding-top: 5px; position: fixed; width: 1000px; } #copyright { margin-left: -209px; } Make sure you save changes with the blue button at the bottom under the box and don't save it twice in a row or else it will revert back to the unchanged CSS. |
Jan 10, 2013 10:39 PM
#149
What happened to the question about changing the bar color at the bottom lol? Well, it is the copyright image which is at the bottom of the CSS. You can change the image there with the manga list version for a blue bottom bar. Otherwise, you'll have to recolor the image yourself in a graphics program. here it is for easy downloading: http://i34.tinypic.com/e1vup.png |
More topics from this board
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
381 |
by KabukiChouNights
»»
Yesterday, 10:56 AM |
|
» theme helpthreat - Jul 5 |
5 |
by Zaryf
»»
Aug 21, 5:46 AM |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1261 |
by KiranaStarr
»»
Aug 16, 5:48 PM |
|
» [CSS] ⭐️ Customize your List Cursor + Cursor FixesShishio-kun - Mar 8, 2021 |
30 |
by Shishio-kun
»»
Jul 28, 3:17 AM |
|
» How To Have Different Banner/Cover image & Background Image For Manga & Anime ListsYasminaRegina - Jul 25 |
2 |
by YasminaRegina
»»
Jul 26, 1:02 AM |