This topic is part of our Tools, Tips, and Feedback section: http://xss.now.cc/forum/?topicid=513201 Please read: This thread is for requesting feedback to improve your work, or asking how you can use any suggestions given to you. Questions like "How do I fix my broken topbar/covers/links/etc" isn't the same as asking for feedback/advice, since you're looking for specific solutions and already know what you want. Ask such things here instead, especially if you're unsure: http://xss.now.cc/forum/?topicid=200323 If you want to get a constructive criticism, or any kind of advice on improving your current list layout or profile design, feel free to ask for it here. Of course, everyone has his own feeling of perfection but you will definitely get a response if you've made a common mistake or if something is wrong on other's resolution or browser. You can also ask for specific advice if you need it. Like fonts or sizes you should use, etc. Anyone can give or request the feedback. You can also ask for ratings on your work now! Note to critics: if you're replying then don't post senseless comments like "cool layout I like it" or "omg it suxx loozer" or other general opinion stuff. Try to be as specific as possible and to suggest alternatives, if you can. Example of what a good comment should look like: Black text merges with dark parts of layout rendering some text in the list unreadable. Consider changing background, text color, putting a light bg-layer under the text, or probably adding a glow with a text-shadow (though it may hit performance if the list is long) |
Shishio-kunApr 20, 2022 9:56 AM
 |
| Well here's the first thing I would like feedback on: the club menu! lol imo, I feel I catered to beginners (primary goal) as well as returning members and people looking for a particular customization or updates. They should know where to go quickly with the menu (ask questions option at the very least). But I don't like the low quality of the GIF, however, I really like it in a way since it displays all the latest club updates and can be updated whenever I want. Why couldn't they have APNG in all browsers......? |
 |
| IMO: Quality of the GIF is, well, awful, I was actually going to tell it lol. Also while idea of animation is good, the problem is that it takes quite much time to get to the least recent info (there is no way to scroll through it) and also a while to load at all (it's pretty large). I understand that there is no other way to make such thing, but it comes out quite bad. |
|
| I wish there was some way to post flash, that'd be too sick. That'd be so fun too. Maybe I can make the GIF's window a little smaller to increase quality tho. No one thinks there are too many table choices? I wanted only 11 not 12, but then its uneven. |
|
| Or Javascript, yes... Not sure if it will work, since GIF is limited to 255 colors IMO it is just ok. You may reduce it to 10 if you can, and it will still be just ok. But probably more than 12 will be weird. Hmm, maybe two different styles of icons (WoW icons + "Themes for MAL" icon and all other 'vector-graphics' alike elements) do not look well together, not sure... |
|
VeriTi said: Or Javascript, yes... Not sure if it will work, since GIF is limited to 255 colors IMO it is just ok. You may reduce it to 10 if you can, and it will still be just ok. But probably more than 12 will be weird. Hmm, maybe two different styles of icons (WoW icons + "Themes for MAL" icon and all other 'vector-graphics' alike elements) do not look well together, not sure... Wonder if anyone actually sits through the whole animation? It might be better to just list latest updates on one frame, although they'd be cramped with little room for detail. The only icon I personally think doesn't match is the paint one, but I can't find a better one. |
|
| http://xss.now.cc/mangalist/Shishio-kun I want to make my manga list layout into a premade layout, as I think its ideal for small lists (like most manga lists) and there is a lot of creative potential to this style! I'm asking for feedback on the proper colors and font colors for the table actually! Some people seem to find really good color schemes but I'm just not good at that. Everything else about this list I'm pretty much done with, I even have the premade list notes already in the code, but I'm open to suggestions on the rest of the layout if anyone has any. |
Shishio-kunApr 3, 2012 1:47 AM
|
Shishio-kun said: Wonder if anyone actually sits through the whole animation? It might be better to just list latest updates on one frame, although they'd be cramped with little room for detail. The only icon I personally think doesn't match is the paint one, but I can't find a better one. Well, in Opera animation isn't played if it is out of visible area (it starts from the beginning when the image is visible again), so I do not lol. Maybe you could use something like Arclight Spanner? |
|
VeriTi said: Shishio-kun said: Wonder if anyone actually sits through the whole animation? It might be better to just list latest updates on one frame, although they'd be cramped with little room for detail. The only icon I personally think doesn't match is the paint one, but I can't find a better one. Well, in Opera animation isn't played if it is out of visible area (it starts from the beginning when the image is visible again), so I do not lol. Maybe you could use something like Arclight Spanner? Ok, then I will not use any more long animations for the club if this is the case! I don't really like the look of Arclight Spanner for that particular part of the table, but if there was a "Fix" table link that would be perfect. In the future a fix thread might be necessary if there's more Tinypic incidents, but hopefully people will just learn to go back to the original thread and get the patch there. I should make that a regular thing in all premade layout posts, so when people grab the code they know where to go back to. |
Shishio-kunApr 20, 2012 7:01 PM
|
| @ Hinaya The color scheme is not that bad actually, I probably won't change it at all. There is an annoying effect when you hover over table header or sort links, so the element "jumps" higher, I'd probably remove it. You should use high-quality pics without stretching them to sides and with more clear font. That's what your current setup is suffering from IMO. Probably you should also get rid of the text in category bar, it makes no sense having big blocks and still need to click on the small text. |
|
| @ Hinaya Good luck with that. I think this code can be removed: .status_selected:hover, .header_title:hover, .td1:hover, #grand_totals:hover, .status_not_selected:hover, .table_header:hover, .category_totals:hover, .td2:hover, #copyright:hover, .status_selected, .header_title, .td1, #grand_totals, .status_not_selected, .table_header, .category_totals, .td2, #copyright { padding-bottom: 20px; } In my Opera it causes the thing I've mentioned but seem not to change anything else because it's already overridden for other parts |
|
| http://xss.now.cc/animelist/Shishio-kun&status=2&show=0&order=4 This is my new premade list style using U5's application to turn the titles into thumbnails- was hoping to get feedback on the design to see if there was anything I could tweak which I'm not seeing or thinking about. Its supposed to look like this:  |
|
| In my Opera there is a small space between table header (e.g. Watching) with sort links and list itself. Something bad is also happening with image quality 'cause it's being stretched to more than it actually is. You should also probably try to center blocks so that right 'padding' on the list has the same size as the left one. |
|
| I noticed something with the Icon-style top bar. when i put my mouse on the house image some small text appears to the left of the icons. Also what VeriTi said, the list is a little off center, and for the "Plan to Watch", and the "Currently Watching" lists theres a pretty sizable gap between the bottom of the list and the bottom of the page. Other than that I like it, definitely very cool. |
| Alright thanks guys, I'll make a separate import for thumbnail sizing and imported animes this way it'll have more options on how it looks. |
|
VeriTi said: Something bad is also happening with image quality 'cause it's being stretched to more than it actually is. VeriTi is right you made the posters 239 px wide while the width of the pictures is only 225px. VeriTi said: You should also probably try to center blocks so that right 'padding' on the list has the same size as the left one. Just change the width of #list_surround and put it to 225*4 + 5*5 (width of pictures + margins) which is 925px. LordSilen said: for the "Plan to Watch", and the "Currently Watching" lists theres a pretty sizable gap between the bottom of the list and the bottom of the page. That's because of this line in #list_surround: height: 1200px !important; Remove it. Also you put the #inlineContent in the back in a weird way. replace you code on #inlineContent with this one: #inlineContent { display: block !important; clear: both; } One more problem is the #copyright which is not centered. All you have to do is remove the right: 174px; |
u531355 said: VeriTi said: Something bad is also happening with image quality 'cause it's being stretched to more than it actually is. VeriTi is right you made the posters 239 px wide while the width of the pictures is only 225px. VeriTi said: You should also probably try to center blocks so that right 'padding' on the list has the same size as the left one. Just change the width of #list_surround and put it to 225*4 + 5*5 (width of pictures + margins) which is 925px. LordSilen said: for the "Plan to Watch", and the "Currently Watching" lists theres a pretty sizable gap between the bottom of the list and the bottom of the page. That's because of this line in #list_surround: height: 1200px !important; Remove it. Also you put the #inlineContent in the back in a weird way. replace you code on #inlineContent with this one: #inlineContent { display: block !important; clear: both; } One more problem is the #copyright which is not centered. All you have to do is remove the right: 174px; Ok thanks I'll keep that width in mind for later. The inline content is there so the list background stays consistent as you scroll down a long page, if I remove it and use your code it vanishes after some scrolling. Whats the reason for these properties you've suggested? I don't think the reason for the gap is the list surround height, I think its the totals which are invisible and I've forgotten to customize it. You can see their presence by hovering over the bottom. I had these height settings on the list surrond so that when it loads on a new category you don't see the body background behind it for a few seconds, which happens occasionally. When I remove the height, this problem returns, and the gaps still there on those categories- unless we're seeing a different gap? Its about 200px high and on all categories actually. But I'm not too concerned about the gap anyhow since the loading thing is worse, and the gap appears to be something category totals might be able to fill. Really hmm I don't see how copyright is better in the middle? I set it deliberately on the right, as it looks weird in the middle and clashes with the links below it. The way it is now it offsets the links better than in the middle imo. |
|
Shishio-kun said: The inline content is there so the list background stays consistent as you scroll down a long page, if I remove it and use your code it vanishes after some scrolling. Whats the reason for these properties you've suggested? It vanishes because you didn't remove the height: 1200px; from #list_surround. The reason for these properties is that it's how you're supposed to do when you put divs after elements with a float property. The clear property says that you want your div to be back in the normal flow of the page. Shishio-kun said: I don't think the reason for the gap is the list surround height Sorry I didn't read well what LordSilen wrote. I was talking about the gap in the on hold category where 1200px is way too much for 1 entry. Shishio-kun said: Really hmm I don't see how copyright is better in the middle? I set it deliberately on the right, as it looks weird in the middle and clashes with the links below it. The way it is now it offsets the links better than in the middle imo. By centered I meant on #list_surround. There you put it in absolute position at 174px from the right border which will only be on #list_surround in your resolution. Here is how it looks in mine: http://i.imgur.com/qVr3y.jpg But the thing is that you don't need to specify the right: 174px; because if you don't it keeps it's original x position which is what you want. You only need to change the y position and you did it by specifying the top property. |
u531355May 15, 2012 7:14 AM
u531355 said: It vanishes because you didn't remove the height: 1200px; from #list_surround. The reason for these properties is that it's how you're supposed to do when you put divs after elements with a float property. The clear property says that you want your div to be back in the normal flow of the page. The reason I put height on list is to cover the startup time someone sees on the layout, so the list doesn't vanish for a second during load (happens randomly but too often on category change, you see the body background behind the loading title posters. But it doesn't happen to me when I have list_surrond set to 1200px). Then of course the list won't be consistent as you scroll down past 1200px, so I set inline_content how I had it is to be the list background on scroll down. So I can't take away height cuz I get the lag. I see the startup lag still sometimes when I use your combination of codes and take away list height unfortunately, however I can make display block and clear both in inline_content and the layout is fine when I leave the height on list. Is there any negative side effect you're seeing when I leave the list with 1200px height? Oh no I didn't know it wasn't in the same place on different resolutions! Thanks for telling me, I can fix that easily. |
Shishio-kunMay 15, 2012 12:56 PM
|
Shishio-kun said: u531355 said: It vanishes because you didn't remove the height: 1200px; from #list_surround. The reason for these properties is that it's how you're supposed to do when you put divs after elements with a float property. The clear property says that you want your div to be back in the normal flow of the page. The reason I put height on list is to cover the startup time someone sees on the layout, so the list doesn't vanish for a second during load (happens randomly but too often on category change, you see the body background behind the loading title posters. But it doesn't happen to me when I have list_surrond set to 1200px). Then of course the list won't be consistent as you scroll down past 1200px, so I set inline_content how I had it is to be the list background on scroll down. So I can't take away height cuz I get the lag. I see the startup lag still sometimes when I use your combination of codes and take away list height unfortunately, however I can make display block and clear both in inline_content and the layout is fine when I leave the height on list. Is there any negative side effect you're seeing when I leave the list with 1200px height? Oh no I didn't know it wasn't in the same place on different resolutions! Thanks for telling me, I can fix that easily. Ah nm I've fixed the lag and height issue by putting the list background as a second bg with body! Now I can remove height from list_surround so there's no more gap. Also, I now have inline_content free for w/e maybe alternate list background esp for pre-CSS3 and list_surrond can be the default header behind the category headers, if they wish to make those. Will still need to tweak it for Chrome tho... |
|
| Yeah it's nice this way. But what's the problem in chrome? I don't see any |
u531355 said: Yeah it's nice this way. But what's the problem in chrome? I don't see any There's a couple annoying padding and font-size issues, but biggest of all the transitions aren't visible but a Chrome transition code is in there. My mistake I took them out on accident at some point ha |
Shishio-kunMay 17, 2012 2:32 AM
|
| http://xss.now.cc/animelist/Shishio-kun&status=2&show=0&order=4 Can anyone give me tips to make the title hover transition smoother as you scroll through the list please? It feels jittery to me. Also how can I add opacity effects with transition to these titles? |
Shishio-kunMay 27, 2012 2:43 AM
|
transition: line-height 1s linear; -o-transition: line-height 1s linear; -moz-transition: line-height 1s linear; -webkit-transition: line-height 1s linear; ? |
 |
Hahaido said: transition: line-height 1s linear; -o-transition: line-height 1s linear; -moz-transition: line-height 1s linear; -webkit-transition: line-height 1s linear; ? Oh wow that works much better, thanks! |
|
| I've had fun making a Touhou premade layout for this club lately: http://xss.now.cc/animelist/Shishio-kun&status=7&order=0 and I can't really decide on what the list background should be. I was thinking shitty paper like this: http://students.davincischools.org/ariana_chavez/paper-background.jpg But it clashes and I can't seem to find the right paper or something else that goes nicely with the hover titles and stuff. Any suggestions or ideas??? I might have to resort to using notebook paper for it.. Please ignore the purple/blue lines too btw they're only temporary. |
|
| This is the best I could find: http://fl0urish.deviantart.com/art/old-yellowed-paper-124478067?q=boost%3Apopular%20in%3Aresources%2Ftextures%20torn&qo=84 The grid on the left page looked pretty promising. |
Shishio-kun said: But it clashes and I can't seem to find the right paper or something else that goes nicely with the hover titles and stuff. Any suggestions or ideas??? I might have to resort to using notebook paper for it.. Please ignore the purple/blue lines too btw they're only temporary. I've made one: |
|
Hahaido said: Shishio-kun said: But it clashes and I can't seem to find the right paper or something else that goes nicely with the hover titles and stuff. Any suggestions or ideas??? I might have to resort to using notebook paper for it.. Please ignore the purple/blue lines too btw they're only temporary. I've made one: Hmm ok I'll try it out later! |
|
| I would like My list looked at too. Since I am getting high in the number of anime I want input as to if it's taking a long time to load, and if I should get rid of the show dvd covers addon, or something else that could bring down the time it takes to load. And of course any other input that might make my list look better. Here's my code if you need it. |
     Short of the day: Monotonous Purgatory(MAL) ✰Public Domain Club | One Piece Club✰ |
| @IntroverTurtle I stopped trying to load your page on 35Mb when it was like 850 of 4500 pics loaded (I have only 1Mbit/s). You can, of course, reduce the number images required to load using covers generator, or maybe remove it all. I personally never liked that caterpillar add-on so if you remove it you'll only win in my eyes, but if you really like it yourself you should use generator to make covers list from scratch so it only includes anime you have. |
|
IntroverTurtle said: I would like My list looked at too. Since I am getting high in the number of anime I want input as to if it's taking a long time to load, and if I should get rid of the show dvd covers addon, or something else that could bring down the time it takes to load. And of course any other input that might make my list look better. Here's my code if you need it. I like how the top stuff and heading blends in well with the background pic, thats really clever. Its a little uncomfortable to read. Maybe turn the opacity up. I like the background, however purple and black on the list may not be right for it (but picking colors is not a talent of mine). The load time is a little long but I think the bigger problem is the transition time, I would cut that down from 1.8 s to much less. After that I think it will be much better. |
|
Beaten to the buzzer! *Jeopardy rage* |
|
| First of all thanks for the fast replies. @VeriTi If I use the generator how much faster do you think it will make it? because if it isn't that much then I will take your advice and completely remove it. I like it because it's unique and cool but I am getting close to the 1000 anime mark and I've already had someone mention how they can't get into my lit. Yeah the way to use the generator is in a tutorial right? I think I remember seeing a link to that in the DVD cover thread. @Shishio-kun Yeah I was thinking about turning the opacity up and maybe moving it to the right. I kinda like those colors now, but like you said it's kind of hard to read it, do you have any recommendations? I might try turning the font color to the same gold as the crown to see how it looks. Does changing the transition time make the load time longer? because I made the transition time longer because I watch a lot of airing shows and I was having a hard time trying to catch the + button before it expanded and messed me up. |
Short of the day: Monotonous Purgatory(MAL) ✰Public Domain Club | One Piece Club✰ |
| He makes a good point about generating animetitle CSS specifically for your list to speed things up. I don't think transition will affect your load time, thats separate. If the transition is immediate, you can just go to the plus sign right after the transition ends. Also a better layout for your anime list might be U531335's Square layout or the Poster style layout I made. You can move your current style to your manga list where it will look good since the background is drawn similar to a manga. idk of the best colors I'm not good at that but .95 opacity will probably be a big difference and make it way easier to read. |
|
| @IntroverTurtle It will finish loading more than four times faster, but still gonna take few minutes on my 1Mbit/s which is considered really long and will still use >30Mbytes of bandwidth for which web-developer could lose his job. However, the only thing that is really noticeable will be browser showing the page is still loading (waiting cursor, 'stop' instead of 'refresh' on button, etc). So if you really like it, you can even leave it as it is. Still, removing it isn't going to hit your style at all. |
|
| @Shishio-kun @VeriTi I will generate the animetitle thingy myself and try it out, if it is still too slow for me and other people to use then I will get rid of it. And I will mess with the opacity and colors a little for easier reading. Thank you guys for the help. |
Short of the day: Monotonous Purgatory(MAL) ✰Public Domain Club | One Piece Club✰ |
| Well what do you guys thing of this Christmas card design ??? |
| @ Asilva IMO: The picture is quite too wide, maybe it'll look a bit cooler if you reduce the inner picture to, say, 280-310 px. I'd also remove the text shadow on 'Christmas Edition GLW' and make it white with red glow, and also make bg quite more vibrant/contrasty and maybe added some snowflakes on it, it doesn't feels like holiday when I look on it. |
|
| You did a good job, the Christmas Polaroid is a really good idea so far. Is it a member card tho? Its unconventional but thats a unique idea. But like he said the font and font color isn't good at all for this kinda thing. If you're going for a "real looking" card than you could use handwritten font and write it on the photo, as if someone wrote on it with marker. Also why is the Polaroid red anyways- I thought they were white. Because I never seen a red Polaroid, it looks less like one to me. A white one would look better. The pic chosen is good but her eyes and head are a little big and kinda takes away ecchi appeal. Honestly feels more non-anime cartoony than anime. So, I think you could choose a better pic. Also the pic chosen could be more Christmasy with colors and stuff. If you want to choose from a wide variety of high quality images you should be using all these sites: http://xss.now.cc/forum/?topicid=504129 |
Shishio-kunNov 15, 2012 12:14 AM
|
| Ok guys ... thanks for the ideas. For the fonts ... i will try and Improve Them, i thought they were good ... this is the frist time i used that font. As for the Red polaroid ... thought that by making it whit a red texture, it would look more like Xmas like card. But thanks for the tips ... i will try and improve the design. I will post here the improved version. |
| Well there ... Here is my improved version of the card. Please say what you have to say :) Regards ASilva :) |
Asilva said: Well there ... Here is my improved version of the card. Please say what you have to say :) Regards ASilva :) Much better, overall good- nice handwritten font. Might be a little hard to uncomfortable for some people to read over the dark background you've chosen; this is because of background not font color choice. imo picture choice is ok but there's still better ones out there, with more color and cuter faces. But if this picture is what you like than its great. |
|
| Thanks a lot Shishio :) I have tried ... and those letter at the top, with a outer glow, they look good. |
Fire11ize said: What do you say about the list that I'm having right now? My List The reason I'm asking for feedback is that I'm pretty lousy when it comes to decorating something of my own. I get really bad at colorplay so I need some tips over making my list better. Thank you~ ^^ I like this list, its appealing to look at it. Pink list is readable (which is real important) over the blue backdrop. It doesn't clash at all and they compliment nicely imo. Characters match the backdrop and they match the list color's feeling. The icon style tool bar doens't really match but it doesn't stand out bad or anything and its probably the best choice atm- there aren't other toolbars that will match a wintery feeling right now. But maybe you can use the pink one from the Utena layout in the donation thread of the Touhou icon bar and see how it looks, or try some snowy icons to replace the ones in it. One thing you should def do is lower the characters so they start from the bottom, it'll look more natural. Cuz now its fine but also they're sorta appearing out of thing air with a little snow around them. This isn't really important, but if I were you I would also look for another choice of background to see if theres one that will let the list stand out like your current one but also has snowy scenery that will match the render even better. That would be cool but is hard to find, plus it has to be darker to match the list. But the one you have now is real good too so its no problem if you can't find one. Here's some pink color schemes to maybe give you some ideas on picking colors on your list: http://www.colorcombos.com/pink-color-schemes.html |
|
| Looks pretty good, but I think that if you add a little gap in the left side between the edge an the list it looks better. |
| Thank you so much for all your feedback, Shishio-kun and al_exs! :D Really appreciate it.~ |
More topics from this board
» [CSS- MODERN] ⭐ Minimal Dashboard layout by 5cm ~ Compact and convenient! ( 1 2 3 )Shishio-kun - Sep 4, 2020 |
133 |
by Shishio-kun
»»
Dec 2, 10:24 AM |
|
» ⭐Ready to be amazed? View the Bunkasai graphic and list design contest (VOTE YOUR FAVES!)Shishio-kun - Nov 22 |
3 |
by Shishio-kun
»»
Nov 28, 9:02 PM |
|
Sticky: » [ BBCODE ] All 2023 BBcodes, Guides, and Templates ( 1 2 )Shishio-kun - Feb 16, 2023 |
65 |
by F124N
»»
Nov 11, 1:31 AM |
|
» ✳️[9-7-24] New even higher quality Cover Imports! + Fixes for Takana Grids and moreShishio-kun - Sep 7, 2024 |
37 |
by Shishio-kun
»»
Oct 30, 4:42 AM |
|
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
388 |
by Shishio-kun
»»
Oct 14, 1:27 PM |