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:  Manga List Version The code: |
Shishio-kunSep 21, 2017 6:32 AM
| wow nice one iam using it now thank you so much ^^ |
| Amazing! Thank you very much. |
| haha thanks for this and the dimensions =D |
 |
| Thanks! I'm Using it now! ^^ |
     |
| i like it im gona make my images now ^_^ sankyu |
| um the " plan to watch " is showing the Dropt page... |
| 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. |
| 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? |
GeosenJun 25, 2010 10:25 AM
| 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 =] |
| Looks sexy. Rather, it's FREAKIN AWESOME. ^^b D: no +rep button? D: |
| 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? |
 |
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  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
| 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:   |
RodnessAug 10, 2010 2:30 PM
|
| Good work! Now we have a dropped version. |
| 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: 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
|
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: This CSS includes a red picture at the top instead of mine. |
RodnessAug 11, 2010 11:24 AM
|
| 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. |
| 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. |
|
| Почему у меня надписи уехали? Why at me inscriptions have left? |
 |
| 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. |
|
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. |
| 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; } |
| Проблема оказывается только в Opera AC, в Mozilla Firefox всё нормально. Не знаю почему так. The problem appears only in Opera AC, in Mozilla Firefox all is normal. I do not know why so. |
|
| Did you try the code I gave you? Anyhow, Opera is known to have issues with any site coding that is beyond simple. |
| 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. 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
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 (( |
|
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. 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...? |
|
| 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
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 |
| 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. |
|
| o_o |
| Okey, today it says they changed back to how it was before, haha. Also, all pictures seem to be restored. Great. xD |
|
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 |
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. |
|
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.. |
| O MY GOSH, THANKS A LOT!!! That's just awesome!!! I make my own banner, and it looks good, but I will remake it in a while, also completed, watching and those blocks.. anyway - THANKS FOR THE LESSON!! IT HELPS A LOT! |
   |
| thanks a lot for this. now using ^^ |
    |
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. |
|
| 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. |
 |
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. |
| thank you for this |
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
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
381 |
by KabukiChouNights
»»
Sep 13, 10:56 AM |
|
» theme helpthreat - Jul 5 |
5 |
by Zaryf
»»
Aug 21, 5:46 AM |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1261 |
by KiranaStarr
»»
Aug 16, 5:48 PM |
|
» [CSS] ⭐️ Customize your List Cursor + Cursor FixesShishio-kun - Mar 8, 2021 |
30 |
by Shishio-kun
»»
Jul 28, 3:17 AM |
|
» How To Have Different Banner/Cover image & Background Image For Manga & Anime ListsYasminaRegina - Jul 25 |
2 |
by YasminaRegina
»»
Jul 26, 1:02 AM |