Display your latest list and profile designs in this thread! Even if its old, show it off anyways! Customized premade layouts are welcome, too. The best designs will be included in our Hall of Fame threads. Please list the year it was made if you can. Feel free to post images, screenshots, or BBcode. If you want to post a screenshot but don't know, here's how its really easy just follow the quick steps: 2010 Neko Design My first and favorite profile design. I hadn't seen any animated About Me designs so I decided to be the first one! Since this came out in 2010, I've replaced most of the links with links to my animelist!                          2011 Legend of Miku point-and-click design Here's a ambitious project for an interactive game/profile made in summer 2011. I wanted to make a point and click style design, since no one had made it and wanted to see if I could. It was really fun to make and I love looking it over even now.                                                             2012 Manga-style Profile Design This is the last one I made where again I was trying to do something different from other people. This was pretty tough to slice and time just right!                                                     2010 Profile Picture Designs        2012 Member Card Designs     2018 Member Card Designs   btw there is no Fire Emblem club I know of, I just made the card as an example for an imaginary club.   2010 K-on! Dating Sim List Layout One of my favorites I ever made which I often go back to. My current layout has a lot of elements of this one. Each category has a different scenario!    2011 World of Moecraft List Layout I had this one up for almost a year in various stages of completion and added to it now and then. Similar to the dating sim except background changes with each World of Warcraft styled menu and graphics. I never played this game when I made this, but making this layout actually got me into trying the MMO out and I loved it! top  list  Alternate top bar design  Cover page  2012 Summer of Sena Parallax List Layout I made this to have a cool layout for my manga list over last summer that emulated parallax style websites which I thought were really cool. Its made for short lists like almost everyone's manga list! As you scroll down the category changes (see animated GIF). animated scrollthrough  2012 Poster List Layout I always wanted to make a style like 1n3zeru's classic list shown here which showed DVD covers from the site, but I had no easy way of doing that in 2011. But U5's brilliant cover generator made that possible for everyone including me so my first goal was to make a layout with it and this was it! I made it so all the info would be available on hover, kinda like when you pick a DVD at the store!  2012 Touhou List Layout Here's one I made for myself quickly one afternoon when I had this random idea in my head and wanted to see it made! I used it for a short time, but it was the last one I made purely for fun with no long term use in mind.  2012 Reviewer Style X List Layouts This is the last list layout I wanna make at least for a long time, its the perfect one for me imo. Its a personalized version of the layout I made for reviewers. I made sure it was practical and informative as possible with built-in recommendations and looks similar for all resolutions and devices. Plus it combines my favorite aspects of other designs- changing backgrounds, cute girls in the background, covers. Right now it has 5 themes, but I can add more to it whenever I want! Fantasy theme  Sci-fi theme  School theme (2013)  Summer themes (2015)   2015 Halloween-style List Layout A spooky Halloween layout for the 2015 Halloween contest. Won Member's Favorite and Most Creativity! Dropped Page  CW page  All Pages  2016 Game-style List Layout For the End-of-2015 contest. A mix of my signature Visual Novel layout style with an opening character menu. Won Most Creativity! Cover Page  CW page  2019 Living Manga List Layout  |
Shishio-kunFeb 11, 2023 1:05 PM
Posted this in the Creative Corner earlier, but it can't hurt to display my latest design here as well. I attempted to replicate the well-known Apple style. Key feature in this design is its ability to resize, as demonstrated below, without losing major functionalities. List entries will show their information when the mouse is hovered above the corresponding anime image or title, which also allows for editing entries. To try the list yourself at http://myanimelist.net/animelist/1NZ3RU, a browser that's capable of processing CSS3 is required. |
Shishio-kunJun 7, 2021 1:26 PM
| I edited Shishio's MIO DATING SIM CSS and made the YUI version. Graphic isn't ideal but I'm not good at this. All graphics was change to match Yui and menu now is on the bottom like in Visual Novels. http://myanimelist.net/animelist/Placek89 |
| I am a darkness beyond blackest pitch, deeper than the deepest night. I am the Sea of Chaos. The source of all chaos. That is how you describe me... I am... the Lord of Nightmares. |
| I edited a premade layout that you posted somewhere here :) http://myanimelist.net/animelist/Transvoid |
 |
| well heres my anime list its pretty simple you can scroll the side images to view the animes im currently watching^^~.... |
Shishio-kunJun 7, 2021 1:08 PM
     ...............................  ...............................I'll do things just like you Yakuza! |
This is my first design. Let me know what you think! Click on the image to see the list. |
DaizukoNov 5, 2011 8:32 AM
| http://users2.ml.mindenkilapja.hu/users/monalizy/uploads/printscreen.png I used parts of your layouts to put this together, so thank you! :) Though it still needs a little editing.. |
| Here is my first design as well. Thanks jnsnlssn for the "#list_surround br + :nth-child(2)" thingy ! http://i.imgur.com/yXoda.jpg update: http://i.imgur.com/34fBW.jpg |
u531355Jan 30, 2012 7:02 AM
| My list actually looks decent now ^.^ Thank you for all the helpful tutorials and codes :3 My List |
fluffy-luffyDec 31, 2011 10:55 PM
| I edited the premade channel list and it looks pretty good! Thanks for the help ^^ |
     |
| Hey, this is a pretty simple one since I have almost no knowlege of CSS HTML bla blub whatsoever but I googled my way around to make it look as it does. I'm sure the code is most inefficient but hey it does the job. http://myanimelist.net/animelist/AiNoKiseki If you want to use the designt just PM me. I'd be happy to share. |
| Been messing around with the code for a couple of days, came up with this: http://myanimelist.net/animelist/erlbaum It seems to work on my firefox/chrome but not on i.e |
| I’ve mess around whit some codes I’ve found in the club and did this Aria list style. This is how it looks when you first open the list:  And this is the list itself:  ((Better to see the list for yourself to understand what the hell I’m talking about)) It doesn’t seem to work well on Explorer, but it did well when I tested it on Mozilla/Chrome. Anyway, I’d appreciate constructive critics to make it look better. ;) |
UshiooJan 20, 2012 3:50 PM
| Its broken for me ushioo, those two pics you posted seem to overlap each other and the list seems to be pushed up to the top of the screen and isnt displaying any anime Its the same when i use chrome/firefox nice design though. |
monalizy said: Matryoskha!! I'm using that song for my anime list as well, but it's not done >_< I have to keep nagging shishio-kun for help >_<[url=http://users2.ml.mindenkilapja.hu/users/monalizy/uploads/printscreen.png]http://users2.ml.mindenkilapja.hu/users/monalizy/uploads/printscreen.png I used parts of your layouts to put this together, so thank you! :) Though it still needs a little editing.. |
  |
| Wow thanks for all the replies! Some of these are so good and original I've asked some of you to be in the hall of fame thread to keep the best of the best! |
| Updated my animelist again. I would be really gratefull if you could tell me if it works for you :) ( I already know it doesn't for I.E users) how it looks for me : |
erlbaum said: Its broken for me ushioo, those two pics you posted seem to overlap each other and the list seems to be pushed up to the top of the screen and isnt displaying any anime Its the same when i use chrome/firefox nice design though. Oh, this blows. I think it’s a problem whit the resolution. I’ll look in it when I have some time. Thanks for the feedback. =) |
| Thanks Veriti, i guess that overlap is to be expected. ill work on making it less noticable :) |
| Really good veriti, the selection bar at the bottom is nice. Also really like the the effect you have when you hover over a link. |
| Well, this is my anime list, is a very simple one I guess. Looks like this. And manga list is very alike. I really wanna do something different. |
| Been working make a few changes to my lists, If you guys could tell me if they work for you it would be nice :) animelist |
| @ayame-chan Love the custom headers and the colors only a couple of things, The text in the MAL-bar is hard to read in the animelist. The cursor in the mangalist annoys me. What did i do wrong in my last message? Only one spoiler tag came up. |
| @ erlbaum I still don't understand why don't you use simple 1px width image for gradient and have repeat done the work for you. Also there is a list header links and list content mismatch in Opera (scrn) due to the left and right padding mismatch (on list they are both 10px but 4px and 1px on the header) Oh, and I don't get the point why u used hacks there because without them everything looks nice. Also making status_selected and status_not_selected display:inline-block should do what you were trying to make with -moz-grid-layout, if you still want to. --- What did i do wrong in my last message? Only one spoiler tag came up. U put a spoiler with mangalist into a spoiler with animelist UPD: When you click "more" the text is messed up because you used body div#list_surround br. To avoid this use #list_surround > br instead. |
VeriTiFeb 11, 2012 7:13 AM
 |
| You confuse me. In my opera they were broken with or without the hacks, I put them in there to try fix it. ill try it again without them to be sure though.(theres a third spoiler tag under the manga list) Also im not sure which part you are talking about for that 1px gradient, i removed the gradient from my last revision becuase multiple backgrounds breaks IE8 (you mean the status_selected?) I wasnt sure of a way of making the same effect of -moz-linear-gradient that worked in the other browsers i thought a simple background color would be enough. I got over the inline-block selector becuase it looked funny when you changed categorys. |
| @ erlbaum You too :) In my opera 11.10 (main) and next 12.00 (testing) they work nicely without hacks. What version are you using? I mean, you can make an image say 1x20 px and make a gradient with your image editor, and then you'll be able to use background-image: url() with this new image, and if repeat is enabled, it will fill the whole block -- this should work, and 1x20 png will be <1Kb. I have background on my #mal_control_strip put this way, the file is 180 bytes. Okay then. |
|
| Version11.61 Build1250 I removed these :-o-prefocus,.table_header { padding: 5px 1px 5px 4px;} :-o-prefocus,.td1, .td2 { padding: 8px 10px;} and: I could probably fix the .header spacing, its just that the .td seem staggered. Ill also redownload opera to be sure. Thanks for all the input, im only new to css so excuse me for being a bit of a noob. |
| I had just dl'ed 11.61.1250, it seems to work nice. I'm not that experienced with it too, that's what we are here for: to help each other :) Also, you may check your layout in different (small) resolutions if you want maximum compatibility. |
|
erlbaum said: @ayame-chan Love the custom headers and the colors only a couple of things, The text in the MAL-bar is hard to read in the animelist. The cursor in the mangalist annoys me. What did i do wrong in my last message? Only one spoiler tag came up. Thanks. *-* In MAL bar? Hard to read? Why? It seems normal to me. Oo Haha I've changed mangalist's cursor, but I guess it's still a little annoying, I mean, is kind hard to click in the right place I guess. I'm not good with the codes, but I guess I'll try to do something new next time. Your list is really cute. ^^ |
| @ Ayame That's because background size is smaller than our display resolution and we get white text on bright-yellow bar. You should add background-size: cover; to your body style to fix that. Maybe you will get the same result if you open your list and then zoom out it in your browser. |
|
| Oh got it now what's wrong...I did already, is it alright now? |
Aya__Feb 11, 2012 3:16 PM
| It's my 1st try doing my own layout so I had some problems This is how it looks on firefox with res 1280x1024 |
Miketsukami-kunFeb 12, 2012 5:45 AM
 |
| @ayame much better :) @Miketsukami It looks amazing, Your background is a little broken at higher resolutions though, if you add the same thing veriti suggested for ayame it should fix it: add this to your body: background-size: cover; |
| I'm glad then. ^^ |
| @Ayame-chan: They looks great, especially the manga list. I really like the color schemes and graphics you used! You say you're not good with codes but I think you've done really good. Also its nice to see someone else using a custom cursor. I don't find them hard to use at all. Did you make those? If you want to make something different and not sure what to do, you can expand your skills and tools, there's a thread for that here I wrote and Veritas contributed. You can also play with other people's layouts. Then you'll get better with codes but you already are doing well. Hope to hear from you again! thread I mentioned: http://myanimelist.net/forum/?topicid=395971 @mikrtsukami: All I see is all white on your layout background, is something broken on it or were you just updating it when I looked? |
| @ Shishio-kun : Thanks a lot. ^^ I really like custom cursors, in every list I make, I make one different. Well, I usually pick up some image, almost only chibis, and make the cursors with it, using GIMP to make transparent the background and to resize it. That's awesome! Loved the tips, I'm still not sure what to do, but I'm thinking and this helped. ^^ Every list I make, I'm always using only those codes, that's why next time I wanna do something different you know, something like changing the list itself, I don't know if I made my point here. haha |
erlbaum said: @Miketsukami It looks amazing, Your background is a little broken at higher resolutions though, if you add the same thing veriti suggested for ayame it should fix it: add this to your body: background-size: cover; I add it, hope it's looking better now. Shishio-kun said: @Ayame-chan:@mikrtsukami: All I see is all white on your layout background, is something broken on it or were you just updating it when I looked? Maybe it is a problem on the codes or something but it seems normal to me. |
|
| @ Miketsukami Looks nice! One more thing I may suggest: add a top margin to your headers. Tables look too close to each other for me and top bar overlaps the first header a little. |
|
Thanks for the suggestion ^^ VeriTi said: @ Miketsukami Looks nice! One more thing I may suggest: add a top margin to your headers. Tables look too close to each other for me and top bar overlaps the first header a little. Did it, thanks for the suggestion ^^ |
|
| Looks great! It would make a great premade layout too for my group, hope you offer it up to the share CSS thread when you're bored with it! Add color and backgrounds Copyright section with this: #copyright { background-color:aquamarine; color:red; } You can also customize grand totals, its right above copyright when viewing all categories at once and is also transparent: #grand_totals { background-color: gray; color: green; } |
| Really? Thanks, I don't mind sharing the code while I'm still using, I'll put the codes in the group then, but I'm still working on it. ^^ And thanks for the help. XD I'm also having some problems with the spaces in the list, like on the top of the list, or between, the watching, completed, etc... |
| @ Ayame Opera 11.10 & FF10 @ 1600x1200 render your list like this:  I don't think there should be so much space between the table and those 'borders' |
|
| This is so troublesome...'cause here, my list seems normal, look : Is there any way to make it right in any resolution? |
| @ Ayame Simple higher/lower resolution test: Ctrl + MWheel down/up You may try adding a left & right padding to #list_surround and then put those red lines & list bg into it's background-image, and then add a bg without these elements to your list body, this should do. Or you can put multiple backgrounds to body with different properties separated by comma, so you can tweak secondary bg position, width, etc. I find it less 'natural' solution, it might also work in less browsers. Look at this thread if you need more info on this. |
|
| Errr.. I honestly didn't get it, as I said before, I'm not good with the codes, so I not sure of what they mean yet... I'm using a notebook, and that's why the resolution isn't that big, but I guess I'll just try to make a different list style again, I thought a little complicated what you suggested, but thank you anyway. ^^ |
More topics from this board
» [CSS - CLASSIC] Wishes of the heart ~ XXXholic layout by HahaidoShishio-kun - Dec 27, 2015 |
9 |
by tsyndi
»»
11 hours ago |
|
» [BBCODE + VIDEO GUIDE] ⭐️ Full list of BBcodes and BBcode setups on MAL ( 1 2 3 4 )Shishio-kun - Feb 3, 2012 |
159 |
by RackOrRuin
»»
Yesterday, 10:48 AM |
|
» [CSS-MODERN] ⭐️ Takana_No_Hana's LayoutsShishio-kun - Jun 5, 2021 |
6 |
by NemuSanjou
»»
Apr 9, 7:21 PM |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1204 |
by blickrella
»»
Apr 9, 4:55 PM |
|
» [MODERN - CSS] ⭐ Sailor Moon layout by 5cmShishio-kun - Sep 7, 2020 |
34 |
by Y3337
»»
Mar 31, 11:45 PM |