Madara22 said: Noblesse Lay out. Bits and pieces of other designs and edited by me. I only have 2 links for this lay out. 1 is the Fellow writer link (online cover database that changes covers automatically without having to do anything.) and the other one is a Googledrive link for the list design. Preview Cursor   hey pretty cool set up. The colors and menus selected all work together and is easy to use and read. Love the background pic, like something I would use for a profile pic. good work! |
Shishio-kun said: Madara22 said: hey pretty cool set up. The colors and menus selected all work together and is easy to use and read. Love the background pic, like something I would use for a profile pic. good work! Thanks :D It really feels good to be praised by you, the one who made all those tutorials and one of the most list designs :D |
 |
| So after more than a year with the same crappy list layout, I decided it was time to change it. I just tweaked a bit one of the donated layouts tbh, 'cause I'm useless for this things, but I really like how it turned out, even if it's the opposite of what I was going to do (I started with the thought of dark cold colors) XD I was going to change the fonts too, but Google Fonts is hell. |
Baragaki_Soul said: So after more than a year with the same crappy list layout, I decided it was time to change it. I just tweaked a bit one of the donated layouts tbh, 'cause I'm useless for this things, but I really like how it turned out, even if it's the opposite of what I was going to do (I started with the thought of dark cold colors) XD I was going to change the fonts too, but Google Fonts is hell. this is probably a redesign of that one tokyo ghoul layout! quite nice work! |
nymphiae said: this is probably a redesign of that one tokyo ghoul layout! quite nice work! Exactly! Thanks~ |
| Think this is more or less done now :3 http://myanimelist.net/mangalist/Oiomi-chan |
         |
| I've worked on it for about a month now. I wanted to base my layout on covers and I was inspired by Oiomi-chan's horizontal list. I tried to stay on a SAO theme but I think I will change it soon since every category has its own characters. I also want to add the synopsis and various infos for hovered anime (using the "more" part as D_Cuy do), so I'm thinking of another way of displaying the infos. I'm open to suggestions =) here is a screenshot : |
Cateinya said: Well well well, and here I thought nobody but me and shishio even remembered it ;) and I have to say your version is absolutely superb. Not something I would use, but that's entirely because I only use those I make myself and feel something is of with everything someone else has touched ^^I've worked on it for about a month now. I wanted to base my layout on covers and I was inspired by Oiomi-chan's horizontal list. I tried to stay on a SAO theme but I think I will change it soon since every category has its own characters. I also want to add the synopsis and various infos for hovered anime (using the "more" part as D_Cuy do), so I'm thinking of another way of displaying the infos. I'm open to suggestions =) here is a screenshot : |
|
Oiomi-chan said: Cateinya said: Well well well, and here I thought nobody but me and shishio even remembered it ;) and I have to say your version is absolutely superb. Not something I would use, but that's entirely because I only use those I make myself and feel something is of with everything someone else has touched ^^I've worked on it for about a month now. I wanted to base my layout on covers and I was inspired by Oiomi-chan's horizontal list. I tried to stay on a SAO theme but I think I will change it soon since every category has its own characters. I also want to add the synopsis and various infos for hovered anime (using the "more" part as D_Cuy do), so I'm thinking of another way of displaying the infos. I'm open to suggestions =) here is a screenshot : Thanks, and yeah I know this feeling, but sometimes I'm just too lazy to make my own and I have basically no imagination at all when it comes to web design ^^" |
Cateinya said: I'm the same, that's why that is still my second newest layout and down to the pixel a copy of a visual novel ^^Oiomi-chan said: Well well well, and here I thought nobody but me and shishio even remembered it ;) and I have to say your version is absolutely superb. Not something I would use, but that's entirely because I only use those I make myself and feel something is of with everything someone else has touched ^^ Thanks, and yeah I know this feeling, but sometimes I'm just too lazy to make my own and I have basically no imagination at all when it comes to web design ^^" |
|
Looks awesome! Very creative look. The category links are half cut off in my view tho |
Cateinya said: I've worked on it for about a month now. I wanted to base my layout on covers and I was inspired by Oiomi-chan's horizontal list. I tried to stay on a SAO theme but I think I will change it soon since every category has its own characters. I also want to add the synopsis and various infos for hovered anime (using the "more" part as D_Cuy do), so I'm thinking of another way of displaying the infos. I'm open to suggestions =) here is a screenshot : Oh wow this is one of the best I've seen in a while. I love the buttons scheme and its a fun layout to play with. |
Shishio-kun said: Interesting.. what browser are you using? I had that problem on some of my screens to but I fixed that with z-index. Can you provide a screenshot?Looks awesome! Very creative look. The category links are half cut off in my view tho |
|
| Hi everyone. I am new to MAL and today I found out that we can customize the css of the lists. :D Because I have not much time, I dont wanted to start without anything. So I started using the Square Layout and edited it a bit. Here is what I got: and Live in my Lists: http://myanimelist.net/animelist/CoNfu5eD http://myanimelist.net/mangalist/CoNfu5eD (empty) I hope you like it, later when I have more time (next week maybe) I will start creating my own list style. :) And I hope my english is not to bad so you could understand me. :P |
| Greetz CoNfu5eD |
| One Punch Man layout (clickable)  |
 |
| Really nice hahaido |
 |
| Good job Hahaido! |
This is my current design, it has no distinct theme and is easily customizable. I also built in mobile responsiveness. I hope you like it ^_^ |
| -Start the day on wings- |
Ulyssesmoore said: This is my current design, it has no distinct theme and is easily customizable. I also built in mobile responsiveness. I hope you like it ^_^ Yeah it has a lovely bg and is a nice simple table/liist. What do you mean exactly by mobile responsiveness? |
| That it works on mobile and doesn't mess up. However I still need review on devices other than the Apple iPhone |
| -Start the day on wings- |
Ulyssesmoore said: well, since it is a simple table layout it works just fine. (I've tested)That it works on mobile and doesn't mess up. However I still need review on devices other than the Apple iPhone |
|
| Thanks Oiomi-chan, for learning me how to set random bg's ^_^ It was something I just couldn't figure out |
| -Start the day on wings- |
| Hitsugi no Chaika layout (clickable)  |
|
| Finally, someone did it, and it was the best person possible! I'll be waiting for you to donate the code. Awesome job! |
 |
| http://myanimelist.net/animelist/Takana_no_Hana So I have been having fun with testing lots of stuffs, here is my improved version of the previous list. Hmm there is one part I still couldn't figure out how it works, I probably should post this on the question topic but that would make me looks like I was spamming xD, so:  I want to specifically hover around the part above (to change its opacity). Right now hovering works on the entire list which I have no idea how to fix. |
| I have already posted my new layout a few weeks ago, but I made some changes so here is the new version : I re-enabled the more button which now shows interesting infos about the anime (visible in the firefox screenshot). This was really difficult, particularly the auto-scroll of the synospis that are too long. Also I made my own menu and, since the property I used was not present in firefox, I made two different versions (see the screenshot or directly on my list here : http://myanimelist.net/animelist/Cateinya) Firefox version (with more button clicked) Chrome version : I have another base ideas for a new list theme but I think I will appreciate my work for now and wait until I change it again. Takana_no_Hana said: http://myanimelist.net/animelist/Takana_no_Hana So I have been having fun with testing lots of stuffs, here is my improved version of the previous list. Hmm there is one part I still couldn't figure out how it works, I probably should post this on the question topic but that would make me looks like I was spamming xD, so: I want to specifically hover around the part above (to change its opacity). Right now hovering works on the entire list which I have no idea how to fix. I think I know what the problem is (correct me if I am wrong) : The part you are working on is a pseudo-element (:after) of the div which contains your main list (#list_surround). Therefore you can't define (with css) hovering purpose for them (such as #list_surround:after:hover) while it doesn't do anything when hovering the main div. So as your list is right now, I would advise your to either : - let the pseudo-element on the whole list (but hovering the list will trigger the hovering event) - move the pseudo-element to another division (for example copyright is a good choice since it's at the bottom of the list). It will still trigger the hovering event when you hover the copyright section of your list, but this is better than the whole list. In both solutions, you need to remove the pointer-events:none property on the pseudo-element if you want to trigger the hovering event. I personally prefer the second solution since I think it will be more ergonomic. |
Cateinya said: I think I know what the problem is (correct me if I am wrong) : The part you are working on is a pseudo-element (:after) of the div which contains your main list (#list_surround). Therefore you can't define (with css) hovering purpose for them (such as #list_surround:after:hover) while it doesn't do anything when hovering the main div. So as your list is right now, I would advise your to either : - let the pseudo-element on the whole list (but hovering the list will trigger the hovering event) - move the pseudo-element to another division (for example copyright is a good choice since it's at the bottom of the list). It will still trigger the hovering event when you hover the copyright section of your list, but this is better than the whole list. In both solutions, you need to remove the pointer-events:none property on the pseudo-element if you want to trigger the hovering event. I personally prefer the second solution since I think it will be more ergonomic. Thank you very much, this is a very insightful answer, and I followed your second advise and it works like magic xD. Oh and your list looks great, lots of interaction. I really like the idea of using atom shape to design the menu which suits well with the Mahouka theme (not sure if atom is the correct terminology to call). |
Takana_no_Hana said: Thank you very much, this is a very insightful answer, and I followed your second advise and it works like magic xD. Oh and your list looks great, lots of interaction. I really like the idea of using atom shape to design the menu which suits well with the Mahouka theme (not sure if atom is the correct terminology to call). Glad I could help =) Actually, I've used a different render and its appropriate background for each category (SAO, Log Horizon, Aldnoah Zero, Code Geass, Mahouka and Guilty Crown). The only negative point (to my mind) is I haven't found a way to highlight my favorites animes since there are too much covers and colors :/ If you have any idea it would be great. I really like your dynamic background too, particularly the evening clouds at the bottom. I'm searching for a way to add some animation to my background too (but it will be difficult since they all are different ^^) Shixma said: Heya, I just finished (well almost finished) a new list design! Its my take on a modern design! Live Demo Background by oTukiMi Install it here! Nice design, uncluttered and beautiful =) I found a bug (maybe it's me) when hovering the menu icon sometimes it won't show the menu because the icon moved and the mouse isn't hovering the menu anymore. |
This is my first time so I edited a premade layout ^^ |
Very sick graphics; I like the contrast with the background too it, doesn't clash at all Cateinya said: I have already posted my new layout a few weeks ago, but I made some changes so here is the new version : I re-enabled the more button which now shows interesting infos about the anime (visible in the firefox screenshot). This was really difficult, particularly the auto-scroll of the synospis that are too long. Also I made my own menu and, since the property I used was not present in firefox, I made two different versions (see the screenshot or directly on my list here : http://myanimelist.net/animelist/Cateinya)  I have another base ideas for a new list theme but I think I will appreciate my work for now and wait until I change it again. Oh nice I think I remember the previous version but this is a very creative layout idea and I like creativity more than anything else. Very impressive! Please keep making new ideas Really really good use of colors! |
| Thanks next time I will try to make something on my one *w* |
My new design.. http://myanimelist.net/animelist/phreeak :) minimalistic black flat. need to clean my css code.. lot of stuff i dont use anymore. |
| With the arrival of the new anime-list designs I quickly sketched a rough idea of how my new list should look like. I based the idea on my current list design. Can't wait to upload it and test it out. ^_^ |
| -Start the day on wings- |
| Right when I finished my list that responds to the resolution it's viewed on, there's a huge list update on MAL. FML Well if someone wants to see it, click on the image below. Re-size your browser window to see it in action. No elements will overlap one another or go off-screen, even on the weirdest resolutions you can imagine. (As long as it's wide enough for the MAL topbar.) EDIT: Turns out it also works on android: |
Szop_GraczFeb 16, 2016 4:09 PM
| The layout of Yato-sama (clickable)  |
|
| So here is my latest design http://myanimelist.net/animelist/Takana_no_Hana Any suggestion for improvement? I'm thinking of redoing the particles for the snow effect, they seem a bit big. Other than that, maybe I need to select a better background. |
Takana_no_Hana said: So here is my latest design http://myanimelist.net/animelist/Takana_no_Hana Any suggestion for improvement? I'm thinking of redoing the particles for the snow effect, they seem a bit big. Other than that, maybe I need to select a better background. it's epic! :D but for users who don't have a very good internet connection or have a low end laptop/pc, it may take them sometimes to views your list. |
 |
Takana_no_Hana said: Nice one, the sliding animation is a beautiful touch! A few things:So here is my latest design http://myanimelist.net/animelist/Takana_no_Hana Any suggestion for improvement? I'm thinking of redoing the particles for the snow effect, they seem a bit big. Other than that, maybe I need to select a better background. Scrollbar and topbar look left over from your previous list. I'm not really a fan of premade tobars etc. :P imo the the bottom edge of the header could be made to blend better with the background. Box-shadow and gradients are often very good for this. The glow on the categories is off. I'm not sure if it's intentional, but it looks a bit weird. Just my opinion Overall, it's really good! Question: Did you make the graphics (specifically the icons and the clapperboard above the list that says your name) yourself? bc they're done really well. |
|
orion_gospel said: it's epic! :D but for users who don't have a very good internet connection or have a low end laptop/pc, it may take them sometimes to views your list. Thanks, I've made some adjustments to the list, I got rid of the snow effect cause I reckon it would be too heavy having 2 animations in the list, I also changed the background and stuffs, should be loading a lot faster now. Doomcat55 said: Nice one, the sliding animation is a beautiful touch! A few things: Scrollbar and topbar look left over from your previous list. I'm not really a fan of premade tobars etc. :P I wanted to use a different topbars but it's too complicated for me to create a new one =/, I planned to modify Kiokuzoku's topbar but then I realized I haven't had his permission, so I resorted back to the old one. imo the the bottom edge of the header could be made to blend better with the background. Box-shadow and gradients are often very good for this. I'm not sure which part you're talking about, would you mind screenshot this? The glow on the categories is off. I'm not sure if it's intentional, but it looks a bit weird. Just my opinion Yeah I think so too, just got rid of that. I haven't found any ideas to make the selecting categories more distinguishable, hopefully changing opacity is enough. Overall, it's really good! Question: Did you make the graphics (specifically the icons and the clapperboard above the list that says your name) yourself? bc they're done really well. Thanks a lot, I want to create a list that can be modified easily later on for different themes, this one is a nice base. And yeah, beside the Satoru render(bottom right) which I took it from /r/, I designed the rest. You can easily search these icons on freepik.com, it's a great source for finding icons. |
| Thanks for the reference, I'll be sure to use that site. Takana_no_Hana said: http://puu.sh/ni0M8/014913ae21.jpgI'm not sure which part you're talking about, would you mind screenshot this? The edge looks odd with a shadow/glow/some sort of border, since images don't usually suddenly end like that. |
|
Doomcat55 said: Thanks for the reference, I'll be sure to use that site. Takana_no_Hana said: http://puu.sh/ni0M8/014913ae21.jpgI'm not sure which part you're talking about, would you mind screenshot this? The edge looks odd with a shadow/glow/some sort of border, since images don't usually suddenly end like that. Oh shit, here's what it should be if displayed correctly =// http://puu.sh/ni14y.jpg I'm not sure how to make it consistently displays across in all different screen resolution. |
Takana_no_Hana said: So here is my latest design http://myanimelist.net/animelist/Takana_no_Hana Any suggestion for improvement? I'm thinking of redoing the particles for the snow effect, they seem a bit big. Other than that, maybe I need to select a better background. Its lovely. I have to say tho the snow was epic, I saw it earlier on my tablet before you changed it, too bad you took that out with the bg that doubled the value of the layout imo. Little things like that go a big way. Can't tell if the snowflakes are too big now cuz they're gone, but they didn't stand out to me then. The background change to the dull blue is disappointing too. I would add those things back if you want improvement. |
Shishio-kun said: Takana_no_Hana said: So here is my latest design http://myanimelist.net/animelist/Takana_no_Hana Any suggestion for improvement? I'm thinking of redoing the particles for the snow effect, they seem a bit big. Other than that, maybe I need to select a better background. Its lovely. I have to say tho the snow was epic, I saw it earlier on my tablet before you changed it, too bad you took that out with the bg that doubled the value of the layout imo. Little things like that go a big way. Can't tell if the snowflakes are too big now cuz they're gone, but they didn't stand out to me then. The background change to the dull blue is disappointing too. I would add those things back if you want improvement. Thank you very much, it's a great pleasure to have the club creator compliment on my list xD. I just added the effect and the background back, I worked a bit on the snow to make it more realistic (reduced the size and more blur to it). Though it takes sometime to load and the list might be lagging when first loading. http://puu.sh/niaZY.jpg I'm not sure how to fix this problem, the background doesn't completely cover the left side. |
Takana_no_Hana said: Add border-width: 0; to body:afterhttp://puu.sh/niaZY.jpg I'm not sure how to fix this problem, the background doesn't completely cover the left side. |
|
| thanks to your video @Shishio-kun I finally customized my profile <3 Thanks a lot :D I'm so proud rn ^^ |
 |
Maikeru-kun136 said: thanks to your video @Shishio-kun I finally customized my profile <3 Thanks a lot :D I'm so proud rn ^^ Great work and thanks for letting me know- I'm glad to have helped you! |
http://myanimelist.net/animelist/Takana_no_Hana?status=1&tag= What do you guys think about my new design? |
Takana_no_HanaMar 3, 2016 6:07 AM
Takana_no_Hana said: Beautiful, but:http://myanimelist.net/animelist/Takana_no_Hana?status=1&tag= What do you guys think about my new design? It's horribly laggy in Firefox (could just be me though) Do something about shared anime/affinity in the topbar: http://puu.sh/ntV9S/6b161cd04d.png Add {}idk if you moved the copyright intentionally, but the way it is now, the icon in the bottom right doesn't work and your name only shows when you hover over the info at the bottom of the list. Overall great job, it seems like you're just churning out good lists lately. |
|
More topics from this board
» β Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )Shishio-kun - Apr 15, 2010 |
7924 |
by Shishio-kun
»»
Yesterday, 1:50 AM |
|
» [CSS - Modern] π° Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1262 |
by Shishio-kun
»»
Sep 22, 4:35 AM |
|
» [CSS - MODERN] β‘οΈ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
382 |
by Shishio-kun
»»
Sep 22, 4:29 AM |
|
Sticky: » [ BBCODE ] All 2023 BBcodes, Guides, and Templates ( 1 2 )Shishio-kun - Feb 16, 2023 |
57 |
by Shishio-kun
»»
Sep 22, 4:27 AM |
|
Sticky: » [ SIGNATURES ~ PROFILES] All guides, generators, and templatesShishio-kun - Feb 16, 2023 |
31 |
by Shishio-kun
»»
Sep 22, 4:14 AM |