New
Mar 24, 2010 9:44 PM
#1
This layout is custom CSS. If you don't know how to install it, use the easy Beginner's Tutorial in this section: http://myanimelist.net/forum/?topicid=419405 The design has a version for anime lists and another for manga lists. For more layouts check the full list of Premade Layouts: http://myanimelist.net/forum/?topicid=318587[/b] Original design by Moronicidiot aka Drize. Just copy codes and paste into your CSS edit box! edit by Shishio: Rodness and I updated the original version code from Moronicidiot/Drize to include a Dropped button with other small fixes and a manga version. Unfortunately the original is no longer available, but you can still view it here in our 2010 Hall of Fame here! Also added this update on 5-30-2013: Light text which appears in editing boxes is now fixed and added to the codes below! You can simply recopy the CSS; or if you used and customized the layout before this date you simply need to replace the * under LIST FONT with this #list_surround, #list_surround a Anime List Version The 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). */ #list_surround, #list_surround a { 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://i35.tinypic.com/x2nrrt.png) 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://i.imgur.com/DGR75yJ.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://i.imgur.com/YRg3w4h.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://i.imgur.com/o1dwfnJ.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://i.imgur.com/KvuOq8y.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://i.imgur.com/IK931Vd.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://i.imgur.com/QOUKu4f.png) no-repeat scroll 0 0 transparent; display:inline; padding-bottom:30px; top:700px; } /* HEADERS */ #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; } /* 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:#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 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 Version The 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. */ #list_surround, #list_surround a { 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://i34.tinypic.com/29f5sfb.png); 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-image:url(http://i.imgur.com/QYOVa1Z.jpg); background-size: cover; 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://i.imgur.com/6UR6v2S.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://i.imgur.com/FNkbGUv.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://i.imgur.com/j5v7xCr.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://i.imgur.com/dGlkL8a.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://i.imgur.com/bw6A8iR.jpg) no-repeat 0 0; display:inline; padding-bottom:30px; top: 700px; } /* HEADERS */ #list_surround .header_cw { background:transparent url(https://i.imgur.com/6VpKH1y.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(https://i.imgur.com/Lq6jMxz.png) no-repeat 0 0; } #list_surround .header_dropped { background:transparent url(http://i38.tinypic.com/t7fi8w.png) 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:#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://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: sans-serif; font-size: 10px; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { margin-left:-209px; } } |
Shishio-kunSep 21, 2017 6:32 AM
May 20, 2010 5:41 PM
#5
Thanks! I'm Using it now! ^^ |
May 20, 2010 6:47 PM
#6
Thanks a lot man, you're a beast at making profiles. |
Jun 18, 2010 1:15 AM
#8
um the " plan to watch " is showing the Dropt page... |
Jun 18, 2010 3:13 PM
#9
Since MAL updated thesettings of the anime/manga lists, my pre-made CSS has a problem with the tabs on the side. I've fixed the problem for CSS so now it'll work for the current MAL anime/manga lists. Just copy the CSS again (if you've used it before) and replace the current style that your using with this new one. |
Jun 25, 2010 7:37 AM
#10
I just copied the code but I have this problem, there isn't any drop category. Look. If there isn't any mistake, :P can I make a "Drop" category? |
Napster_GeoJun 25, 2010 10:25 AM
Jul 9, 2010 3:21 PM
#11
When I made the CSS for my anime list, I never had a drop section because I've never droped any animes, so I didnt bother making a header for dropped animes. If you can, you can make a drop category =] |
Jul 11, 2010 4:44 PM
#12
Oh I see...Thank for your reply. I will make one. |
Jul 20, 2010 10:48 AM
#13
Looks sexy. Rather, it's FREAKIN AWESOME. ^^b D: no +rep button? D: |
Aug 7, 2010 6:43 PM
#14
Thanks for the pre-made CSS, it looks really great! ^^ Anyway, I want to add a picture/button for the "Dropped" list. I added an own "Dropped" banner to the list, but I would also like a picture together with the other big buttons above "All Anime"/"Show all". I've tested some stuff myself but it seems like I don't get it right... Can somebody, please, help me with this? } #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/51ug7r.png); display:inline; top: 420px; } Isn't the solution just to add another set of .status_not_selected right here? Also change the one below to top: 700px; and change this one to 560... Is it something like this that has to be done? } #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://i39.tinypic.com/wb5p1i.png) no-repeat 0 0; display:inline; padding-bottom:30px; top: 560px; }#list_surround br { display:none; } |
Aug 9, 2010 7:42 PM
#15
Rodness said: Thanks for the pre-made CSS, it looks really great! ^^ Anyway, I want to add a picture/button for the "Dropped" list. I added an own "Dropped" banner to the list, but I would also like a picture together with the other big buttons above "All Anime"/"Show all". I've tested some stuff myself but it seems like I don't get it right... Can somebody, please, help me with this? He already had the dropped button in the code but it was set to display:none; plus it was also obscured by the top settings of the various sections. I modified and added in the codes you'd need so you can customize that button and header, as you can see in the pic the header is red and the button blue. You'd have to replace the pics themselves with your own design, though you already had that in mind. #list_surround .header_dropped is the header #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 is the code for the button * { border:0 none; color:#DBDBDB; font-family:Verdana; font-size:9px; font-weight:normal; text-decoration:none; } a:hover { text-decoration:underline; } body { background:url(http://i49.tinypic.com/246thj5.jpg) repeat-y scroll center bottom #181818; } #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 { background:url(http://i41.tinypic.com/1iokm0.png) repeat scroll 0 0 transparent; 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/1iokm0.png) repeat scroll 0 0 transparent; 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://i44.tinypic.com/2lk7crt.png) repeat scroll 0 0 transparent; 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://i44.tinypic.com/6o0k01.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:none repeat scroll 0 0 blue; 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/51ug7r.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://i39.tinypic.com/wb5p1i.png) no-repeat scroll 0 0 transparent; display:inline; padding-bottom:30px; top:700px; } #list_surround br { display:none; } #list_surround .header_title { background:url(http://i44.tinypic.com/2lxuvxh.png) repeat scroll 0 0 transparent; height:169px; left:-283px; padding:25px; position:absolute; top:-229px; width:819px; } #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 .header_cw { background:url(http://i43.tinypic.com/ngxduw.png) no-repeat scroll 0 0 transparent; } #list_surround .header_completed { background:url(http://i43.tinypic.com/1yv9c5.png) no-repeat scroll 0 0 transparent; } #list_surround .header_onhold { background:url(http://i42.tinypic.com/160zpc9.png) no-repeat scroll 0 0 transparent; } #list_surround .header_dropped { background:none repeat scroll 0 0 red; } #list_surround .header_ptw { background:url(http://i44.tinypic.com/30rs4qo.png) no-repeat scroll 0 0 transparent; } #list_surround .animetitle + small { color:#00FF00; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #copyright { background:url(http://i48.tinypic.com/dyty1i.jpg) no-repeat scroll 0 0 transparent; bottom:0; color:#181818; height:15px; margin-left:-349px; padding-top:5px; position:fixed; width:1000px; } If you do it list it here so we can have an alternative for the people who want one with dropped codes! |
Shishio-kunAug 9, 2010 8:06 PM
Aug 10, 2010 2:20 PM
#16
Hello, here's the pre-made CSS modified by me (with some help from others; so don't give me all credits for the job). I've added a Dropped button, among the other pictures, and a Dropped banner for the Dropped category. This means it's a complete Anime List including all pictures and links required for reaching each category. Those pictures are chosen by me, so be sure to add your own pictures if you decide to use this CSS. Here's the CSS code: * { 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:141px; margin:239px auto 30px auto; position:relative; width:584px; } #list_surround .status_selected { background:url(http://i21.photobucket.com/albums/b298/LudvigP/watching2_bw.png); 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://i21.photobucket.com/albums/b298/LudvigP/watching2.png); 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://i21.photobucket.com/albums/b298/LudvigP/completed1.png); 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); 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); 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 0 0; display:inline; padding-bottom:30px; top: 700px; }#list_surround br { display:none; } #list_surround .header_title { background:url(http://i34.tinypic.com/167jfy8.png); height:169px; left:-283px; padding:25px; position:absolute; top:-229px; width:819px; } #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 5px; width:586px; } #list_surround .header_cw { background:transparent url(http://i43.tinypic.com/ngxduw.png) no-repeat 0 0; } #list_surround .header_completed { background:transparent url(http://i43.tinypic.com/1yv9c5.png) no-repeat 0 0; } #list_surround .header_onhold { background:transparent url(http://i42.tinypic.com/160zpc9.png) no-repeat 0 0; } #list_surround .header_ptw { background:transparent url(http://i44.tinypic.com/30rs4qo.png) no-repeat 0 0; } #list_surround .header_dropped { background:transparent url(http://i36.tinypic.com/a0wapl.png) 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 { background:url(http://i48.tinypic.com/dyty1i.jpg) no-repeat 0 0; color:#181818; height:15px; margin-left:-349px; padding-top:5px; position:fixed; bottom:0; width:1000px; } |
RodnessAug 10, 2010 2:30 PM
Aug 10, 2010 10:06 PM
#17
Good work! Now we have a dropped version. |
Aug 11, 2010 3:47 AM
#18
If people would like other colors of this green theme it's just to mark the green color for each section banner separately and mixture with the Hue, Saturation and Lightness. This is easily done with Paint.NET. Here's the links to the banners so that you can save 'em and pick your own color: } #list_surround .header_cw { background:transparent url(http://i43.tinypic.com/ngxduw.png) no-repeat 0 0; } #list_surround .header_completed { background:transparent url(http://i43.tinypic.com/1yv9c5.png) no-repeat 0 0; } #list_surround .header_onhold { background:transparent url(http://i42.tinypic.com/160zpc9.png) no-repeat 0 0; } #list_surround .header_ptw { background:transparent url(http://i44.tinypic.com/30rs4qo.png) no-repeat 0 0; } #list_surround .header_dropped { background:transparent url(http://i36.tinypic.com/a0wapl.png) no-repeat 0 0; } When you're done it's just to upload the pictures and replace the new links with the old ones. |
RodnessAug 11, 2010 3:51 AM
Aug 11, 2010 11:20 AM
#19
Here's a Manga List edition of this CSS. I've replaced stuff in it so that it's fully adapted into a list for manga. Feel free to replace the pictures and change the colors to personalize it. The section banners may not be so very well made, the reason is that I didn't edit 'em in Photoshop, so there are no lights or shadows on the text. Anyway, here it is: * { 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:141px; margin:239px auto 30px auto; position:relative; width:584px; } #list_surround .status_selected { background:url(http://i21.photobucket.com/albums/b298/LudvigP/currently-reading2.png); 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://i21.photobucket.com/albums/b298/LudvigP/currently-reading2.png); 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://i21.photobucket.com/albums/b298/LudvigP/completed2.png); 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-hold2.png); 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/dropped2.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/plan-to-read2.png); 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/all-manga2.png) no-repeat 0 0; display:inline; padding-bottom:30px; top: 700px; }#list_surround br { display:none; } #list_surround .header_title { background:url(http://i37.tinypic.com/ddpa49.png); height:169px; left:-283px; padding:25px; position:absolute; top:-229px; width:819px; } #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 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 + small { color:#00FF00; } #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; } This CSS includes a red picture at the top instead of mine. |
RodnessAug 11, 2010 11:24 AM
Aug 11, 2010 1:27 PM
#20
OH wow nice blue effect on the headers! Another nice addition to the roster. If you want glowy text, I make it with this engine, I'm bet there's something like that in Fireworks, but I never looked: http://cooltext.com/Logo-Design?LogoID=534463176 For the banner graphics, I used Artbrush font at like 100 size. |
Aug 11, 2010 2:56 PM
#21
Which font is it that is used for the section bars? I was testing many different fonts, but each one looked wrong. I'm gonna try with some effects in Photoshop to make the category names look like the ones saying "Completed" and "On-hold", they've got some surrounding light; my own bars looks just simple and plain. |
Aug 12, 2010 1:12 PM
#22
Aug 12, 2010 3:58 PM
#23
Your list looks fine to me. It could be your web browser which makes the list look weird. MyAnimeList supports Mozilla Firefox better than any other web browser, if I'm not mistaken. If that's not your problem you may have been editing the list yourself... No other people have had any problems like that with it, from what I've seen. You know there is a CSS code which adds the Drop button? You've chosen the one without it. |
Aug 12, 2010 7:59 PM
#24
Hentaro said: Почему у меня надписи уехали? Why at me inscriptions have left? Maybe its your current browser. IE does not support on some of the code. It is fine on my screen. I can check and see if its fine with Opera.If you want to remove inscriptions on the left, you could also either fix it or play with the code for IE. My best answer for you to fix your problem is switch to a different browser. It will work fine. Any browser will work. Recommendation on browsers: Google Chrome Opera Mozilla Firefox They are excellent to work with if you are wanting to make a website or codes for your MAL List. All browsers are free. I hope this help a little if not I can try to fix it probably. |
Aug 12, 2010 10:03 PM
#25
Its hard to fix something I can't see, but try this. Save your current code. Then, add this code to the bottom of your custom CSS after everything else. It should push the anime title down. If it makes it worse, just go back to the old code. #list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw { margin-bottom:20px; } |
Aug 13, 2010 10:52 AM
#26
Aug 13, 2010 12:50 PM
#27
Did you try the code I gave you? Anyhow, Opera is known to have issues with any site coding that is beyond simple. |
Aug 14, 2010 12:55 AM
#28
Hey guys. I changed 1 of your layouts (you even said people could do this.) So If anyone want to use this blue color version that I'm using cuz I changed the colors, feel free to. Oh and don't mind the banner, It's just something I put there randomly. Just replace It with your own. * { 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:141px; margin:239px auto 30px auto; position:relative; width:584px; } #list_surround .status_selected { background:url(http://i35.tinypic.com/u66h0.png); 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://i35.tinypic.com/u66h0.png); 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://i37.tinypic.com/ct6v6.png); 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://i35.tinypic.com/15mbaf8.png); 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 { 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://i35.tinypic.com/70u8t2.jpg); display:inline; top: 420px; } #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://i37.tinypic.com/2ywwacj.png) no-repeat 0 0; display:inline; padding-bottom:30px; top: 560px; }#list_surround br { display:none; } /* The background below is a banner that has my name on it.. [http://i34.tinypic.com/2s1vipl.jpg] You gunna have to make your own banner and replace my banner with yours o_O */ #list_surround .header_title { background:url(http://i34.tinypic.com/2s1vipl.jpg); height:169px; left:-283px; padding:25px; position:absolute; top:-229px; width:819px; } #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 { margin-left:-1px; padding:28px 5px 5px 5px; width:586px; } #list_surround .header_cw { background:transparent url(http://i33.tinypic.com/wl866e.png) no-repeat 0 0; } #list_surround .header_completed { background:transparent url(http://i33.tinypic.com/zxntpy.png) no-repeat 0 0; } #list_surround .header_onhold { background:transparent url(http://i38.tinypic.com/2mdghzo.png) no-repeat 0 0; } #list_surround .header_ptw { background:transparent url(http://i33.tinypic.com/2z68d4i.png) 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 { background:url(http://i38.tinypic.com/2m3pch5.png) no-repeat 0 0; color:#181818; height:15px; margin-left:-349px; padding-top:5px; position:fixed; bottom:0; width:1000px; } THIS Is how It looks like: http://myanimelist.net/animelist/byakuya17 ALTHOUGH mine seems to have gotten a bit glitched somehow, so yours will probably look better on your list, hopefully. And ofc you'll use a way better banner than the 1 I just randomly put there. I will change mine later too but I have to make 1 first. |
TheMageApostateAug 14, 2010 1:09 AM
Aug 14, 2010 4:45 AM
#29
Shishio-kun said: Did you try the code I gave you? Anyhow, Opera is known to have issues with any site coding that is beyond simple. Пробовал, в Opera стало нормально, но в Mazila уехало слишком вниз. Эти баги наблюдается даже на аниме листе byakuya17. Видимо придётся отказаться от такого стиля(( Tried, in Opera it became normal, but in Mazila has left too downwards. These bugs it is observed even on an animelist byakuya17 . Probably it is necessary to refuse such style (( |
Aug 14, 2010 1:11 PM
#30
byakuya17 said: Hey guys. I changed 1 of your layouts (you even said people could do this.) So If anyone want to use this blue color version that I'm using cuz I changed the colors, feel free to. Oh and don't mind the banner, It's just something I put there randomly. Just replace It with your own. * { 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:141px; margin:239px auto 30px auto; position:relative; width:584px; } #list_surround .status_selected { background:url(http://i35.tinypic.com/u66h0.png); 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://i35.tinypic.com/u66h0.png); 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://i37.tinypic.com/ct6v6.png); 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://i35.tinypic.com/15mbaf8.png); 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 { 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://i35.tinypic.com/70u8t2.jpg); display:inline; top: 420px; } #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://i37.tinypic.com/2ywwacj.png) no-repeat 0 0; display:inline; padding-bottom:30px; top: 560px; }#list_surround br { display:none; } /* The background below is a banner that has my name on it.. [http://i34.tinypic.com/2s1vipl.jpg] You gunna have to make your own banner and replace my banner with yours o_O */ #list_surround .header_title { background:url(http://i34.tinypic.com/2s1vipl.jpg); height:169px; left:-283px; padding:25px; position:absolute; top:-229px; width:819px; } #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 { margin-left:-1px; padding:28px 5px 5px 5px; width:586px; } #list_surround .header_cw { background:transparent url(http://i33.tinypic.com/wl866e.png) no-repeat 0 0; } #list_surround .header_completed { background:transparent url(http://i33.tinypic.com/zxntpy.png) no-repeat 0 0; } #list_surround .header_onhold { background:transparent url(http://i38.tinypic.com/2mdghzo.png) no-repeat 0 0; } #list_surround .header_ptw { background:transparent url(http://i33.tinypic.com/2z68d4i.png) 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 { background:url(http://i38.tinypic.com/2m3pch5.png) no-repeat 0 0; color:#181818; height:15px; margin-left:-349px; padding-top:5px; position:fixed; bottom:0; width:1000px; } THIS Is how It looks like: http://myanimelist.net/animelist/byakuya17 ALTHOUGH mine seems to have gotten a bit glitched somehow, so yours will probably look better on your list, hopefully. And ofc you'll use a way better banner than the 1 I just randomly put there. I will change mine later too but I have to make 1 first. Dude, it's just a little brighter than my color version. But anyway, it looks good. :P Good thing that you uploaded it 'cause this blue color of mine only appears in the Manga List in the first post. Also, just why are people taking the version which is missing the Dropped button...? |
Aug 14, 2010 1:21 PM
#31
Rodness: I didn't see a blue color version, I must have missed It. Sorry. I was and Is tired after all. (nice excuse right? xD) But anyway what I simply did was use the green version as a template and then just use rectangular marque tool+Hue/saturation to change the colors. Very simple. Oh nvm, so It wasn't a total waste after all <.< Errr... I just picked a random version that looked good and changed It, I didn't really care about anything other than that, lol. |
TheMageApostateAug 14, 2010 1:33 PM
Aug 14, 2010 7:14 PM
#32
Hentaro said: Shishio-kun said: Did you try the code I gave you? Anyhow, Opera is known to have issues with any site coding that is beyond simple. Tried, in Opera it became normal, but in Mazila has left too downwards. These bugs it is observed even on an animelist byakuya17 . Probably it is necessary to refuse such style (( OK. Well its an Opera-only bug then. You could just use it since you use Opera and other people with Firefox won't mind, I think. It requires an Opera CSS hack which I don't have one tested and working now. I can look into it and ask some people about it so I might have one in the future. I'll tell you if on your page and fix it here. Rodness said: Also, just why are people taking the version which is missing the Dropped button...? I was thinking the same thing, what the hell... the dropped list is the first thing I go to. It tells you a lot about the person's taste, even if they have none (means they're committed). And I love seeing them low score animes and comments like WORSE THAN CANCER haha |
Aug 18, 2010 1:56 PM
#33
Wow, it's awesome now. Good job!!! |
Sep 23, 2010 12:29 PM
#34
Hey, I just wanted to inform people that Tinypic is no longer available for fast-uploading for guest users and such. Therfore, many pictures have been removed from the website and will no longer be visible on the anime/manga lists. I'm replacing some stuff right now on my own list, but I won't complete it until tomorrow, I think, due to my laziness. xD Also, I would like you to upload a picture of that long picture that is behind the copyright text, please, it is no longer visible. :/ A better choice would be Photobucket. |
Sep 25, 2010 6:50 AM
#36
Sep 26, 2010 3:26 PM
#37
Rodness said: Okey, today it says they changed back to how it was before, haha. Also, all pictures seem to be restored. Great. xD Changed what? o_o |
Sep 27, 2010 2:33 PM
#38
Moronicidiot said: Rodness said: Okey, today it says they changed back to how it was before, haha. Also, all pictures seem to be restored. Great. xD Changed what? o_o If you would've read the whole message that I wrote (message #34) you would've probably understand. :P A couple of days ago Tinypic disabled guest users from uploading pictures to their database. This action made a lot of pictures, uploaded on the website by guest users, not visible anymore. Luckily they took back this action due to many complains and changed it back to how it was before. During this period they suggested people to sign up on Photobucket instead. But well, today this is history and nothing to worry about anymore since it's back to normal again, and they said it won't probably happen again. |
Sep 27, 2010 6:27 PM
#39
Rodness said: Moronicidiot said: Rodness said: Okey, today it says they changed back to how it was before, haha. Also, all pictures seem to be restored. Great. xD Changed what? o_o If you would've read the whole message that I wrote (message #34) you would've probably understand. :P A couple of days ago Tinypic disabled guest users from uploading pictures to their database. This action made a lot of pictures, uploaded on the website by guest users, not visible anymore. Luckily they took back this action due to many complains and changed it back to how it was before. During this period they suggested people to sign up on Photobucket instead. But well, today this is history and nothing to worry about anymore since it's back to normal again, and they said it won't probably happen again. Ohh.. I see.. |
Sep 30, 2010 7:40 PM
#40
wow thats awzm, thanks so much! too bad im an opera user :/ oh well (: |
Oct 31, 2010 8:18 AM
#41
Nov 10, 2010 7:21 AM
#42
Nov 11, 2010 9:42 AM
#43
Nov 12, 2010 5:23 PM
#44
Fuko-Brian said: Wow, Nice One :D How Do You Change The Picture Where It says "Anime List" Im really Stuck =.=' Thanxs ~ You must enter the Advanced CSS File Editing and scroll down till you see these lines: } #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; } You'll find this section after the longer section with all the "+ .status_not_selected +". All you have to do is simply just replace the URL with an URL representating the picture that you would like instead. It's recommended to set the dimensions of your picture to 869x219. |
Nov 17, 2010 1:41 PM
#45
Nov 17, 2010 11:19 PM
#46
SeventhMist said: Hi, I`m new here and I love your design. Eveything is working fine but I can`t seem to get the "Anime Stats" section working with your CSS. Everything stays at 0. Can someone help me fix this. Thx. Thats odd. Anime stats on the front of your page isn't something affected by CSS. I would think it was a network error then. So you probably have to wait for it to update or ask a mod or the administrator later to help update your stats. |
Dec 19, 2010 9:17 PM
#49
Fuko-Brian said: How Do you Change The Pictures ? D; In the code, you will see some image links. For example go down about halfway and you find this part in the CSS: #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; } that http://i35.tinypic.com/x2nrrt.png is the image link. If you click it or paste it in your address bar, you will see a pic thats on the layout. Its the header. The image link in the code is linking that header pic from another site and it shows up on MAL, on your list layout. Now, if you replace this image link with another image link that goes to a different pic, you will get that different pic on the page where that header pic that said ANIME LIST was. All the pics on your layout have their own image link in the code, you can replace them all. So its easy: in the code, change the image links with links to the ones you want. btw if you upload an image to Tinypic or Photobucket, it will give you "direct link", that is the one you want to use for this site. If that doesn't make sense, then you should go through my beginner's tutorial, which is fast and simple. I covered this in step 8 (but you can probably skip to that part). http://myanimelist.net/forum/?topicid=200320 |
Shishio-kunDec 19, 2010 9:28 PM
More topics from this board
» [BBCODE + VIDEO GUIDE] ⭐️ Full list of BBcodes and BBcode setups on MAL ( 1 2 3 4 )Shishio-kun - Feb 3, 2012 |
158 |
by KeyiOs
»»
8 hours ago |
|
» [MODERN - CSS] ⭐ Sailor Moon layout by 5cmShishio-kun - Sep 7, 2020 |
32 |
by Y3337
»»
10 hours ago |
|
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2023 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
351 |
by claymorwan
»»
10 hours ago |
|
» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )Shishio-kun - Apr 15, 2010 |
7808 |
by Gippy
»»
Mar 25, 12:45 AM |
|
» [CSS] [VIDEO GUIDE] ⭐️ How to change fonts on a list layoutShishio-kun - Jul 15, 2019 |
16 |
by XxTHEncsEXPERTxX
»»
Mar 12, 3:17 PM |