ryuu-00 said: Is there a tutorial on how to make a good looking list? like with the pictures saying "currently watching" etc? or is it common sense? http://myanimelist.net/forum/?topicid=130580 |
| Ammm isnt Moronicidiot`s profile against the rules? Talking about removing the top-mal-bar? |
| Hey, Just finished my first attempt at anything remotely called a customized list. prior to now I've just used the generic red on black and blue on black, decided it was about time to add some spice. I know next to nothing about CSS myself, the only way I really got most of it the way it was was by using MAL's CSS for Dummies fill in the blank editor then I just dove into the source code and copied out what would go in the Advanced CSS box, pasted it in and positioned my list accordingly because you can't do that in the CSS for Dummies section. Enough of my blabbering though... what do you think? it's pretty basic so... yeah :D http://myanimelist.net/animelist/-Pawn |
| Leader of Whiteout Scans Current project: ReLIFE |
| @-Pawn: Not bad for a first try. One thing to improve on is the background image, which doesn't scale well in its current form. (Image of 1920x1200.) @Moronicidiot: Just have to agree with everyone else that the concept is very cool. Working with this mess of tables is annoying enough for regular lists, so kudos for doing something like that. Now for some shameless self-promotion: my list. I wanted something clean for a while, so the focus is on the type. It makes use of Rockwell (comes with MS Office) and Cambria (Vista, 7, Office 07), so if you're missing those, it will look a bit broken. Naturally, there's also some CSS3 and vendor-specific properties in there, so it should look best in recent versions of FF/Safari/Chrome. I only build for myself, so I've only tested in FF. Hopefully it's not a disaster for everyone else. :P |
| @Moronicidiot: I don't know what I'm supposed to say that hasn't already been said. Thinking outside the box is always great. @-Pawn: Seems like you're using 1440x900 or the likes, since that's where the list aligns itself to the darkened background. (1920x1200 here, and the end result doesn't look that good as you can see from Mobb's screenshot :p) You can fix this using CSS though. I suppose this would be the positioning tutorial you were missing, sort of. Find #list_surround and change "margin: 0 auto;" to "margin: 0px auto auto 412px;" (Syntax: margin: top right bottom left;) Then your list will stick to the darkened area and will look better in different resolutions or resized windows. Finally I'm going to say something that makes the above (almost) irrelevant. Keep in mind that your lists will be mainly viewed and used by yourself. Therefore, in the end there's no real need to cater to everyone. If your list looks good on your screen and you're happy with it, that's great. If you want to take others into account, that's great too. @Mobb: I'm using Opera 10.50, 1920x1200 and got the fonts mentioned. I really like the simply clean and stylish look. Really refreshing, the CSS3 tricks look nice. One very small thing though: the "<number> Shared Anime <compatibility>%" text in the top bar is white, or rather the numbers are white. A simple "#mal\_control_strip td div { color:#cccccc !important; }" should fix it. (edit: ninja'd by scorpedo, I took way too long to write all this) Now for the main reason I'm posting here:  Yet another list design following the same old trusty formula: list on the left, character(s) on the right. This time I basically took the simplicity and format of my mangalist, plus made use of some of a previous list's graphics. Nothing too fancy CSS- or graphics-wise but I'm content with the result. Searching by tags messes it up slightly, but I doubt that I'm going to fix it. Intended resolution 1920x1200, but should look fine with smaller ones as usual. |
SpawwvyApr 25, 2010 5:41 PM
| Thanks for the nice words guys! @poketonip: I'm sorry, but I'm not really sure what you mean. If you mean the gray header, it is simply a background image on the body. :) @scorpedo, Spawwvy: Thanks for pointing that out, didn't know about it. For some reason, #mal_control_strip td div won't work for me though. The editor seems to screw up descendant selectors involving div's and/or going more than one level deep for some reason, so I tried something else, still white? Anyways, nice list Spawwvy, pretty color scheme matching the image. Agree with poketonip about the constellations, they fit so nicely. |
| Okay, so I should have covered everything except #mal\_cs_otherlinks div, which won't work, still screwed up? Thanks for the help so far, pretty annoying to test when I can't view the result myself. |
| Now it works, good job. Such a hassle to fix such a small issue. |
| Indeed. Good thing it only has to be done once, since the code now is available for future designs. Thanks. |
| What you need to do now is to fix your forum signature. Btw how do you put new fonts like that im sorta 'new' on that topic. I've been seeing alot of unique fonts lately. |
  "What happens when we die?" I know that the ones who love us will miss us. |
| Hi, I'm trying to use and old anime list that someone lent me but the some of the old codes don't seem to work with the "updated" css. I cleaned up most of the problems but I realized that my grand totals image refuses to show. is putting background images in the grand totals not allowed anymore? My second problem is trying to make the hover bar cross over all the columns, where should i put the hover command? Also, can you look at my code and see if it can be cleaned up a little better? Thanks in advance |
| Was having some alignment issues with my list though I think I fixed it. Can someone double check for me please? :) Also some comments on my list would be nice. my first attempt at anything remotely customized. |
| Leader of Whiteout Scans Current project: ReLIFE |
| Is there a way to make the background image resizeable? A couple of months back I tried 2-3 codes but to no avail. Thanks in advance. |
| AFAIK no way to make it resizeable, if there is itll appear choppy or wierd when you scroll through it. What i do is i just make a 2000x1024 (2000x1080 would be best) background image and position it the way i want it through manipulation. background-attachment: fixed; background-repeat: no-repeat; background-position: 80% 25%; Theres always a center point on what you want in the frame. |
| "What happens when we die?" I know that the ones who love us will miss us. |
| FFFFFFFFFFFFFFF;_; Ok, thanks. I guess I'll scrap my initial design idea since it would only work with a resizeable bg :/ |
| @Ranivus: Do you mean like me using Rockwell for the headings? If so then it simply has be first in the font stack, like: font-family: Rockwell, Baskerville, Georgia; People without Rockwell would then see Baskerville instead and if they don't have Baskerville either, they will see Georgia. @NagatoFan: The problem is that grand totals is targeted as a class when it is an id, so ".grand_totals" should be "#grand_totals". The hover thing is a bit tricky, since the table headers, anime titles and totals are all the same in the markup. Something like tr:hover {background: #ccf;} would therefore apply to basically every element in the list. Perhaps some clever use of advanced pseudo-selectors could take care of it, but I can't come up with anything at the moment. Some cleaning you could do, is using shorthand for stuff like backgrounds. Have a look here: http://www.dustindiaz.com/css-shorthand/ You can also style multiple elements within the same block, like: .td1:hover, .td2:hover { color: #fff; background-color: #ccf; } I would be careful though, since some things tend to break when you do that. For example, header_cw, header_completed etc. would not work when I did it. Font shorthand also tend to be ignored for some reason. @-Pawn: Aligned nicely now. A tip would be to center the totals: .category_totals {text-align: center;} |
| Yeah i tried that TD:hover but it turned everything including the headers as a hoverable item. Even when i did try that it still only hovered by column. Oh well It looks better although i dont know how to get rid of the bold type of the anime titles. Ill mess with it later. Thanks for the heads up on the short handing. |
| It's only on columns because of td, which is table cell. Using tr would make the hover span the entire row. But yeah, that would apply the hover effect on everything, which looks kinda bad. Remove font-weight: bold; on .animetitle to get rid of bolding. |
| Yeah thanks for the help. Really wish hover rows could only affect the anime titles but im sure im just missing something. |
| I can't really think of a way that would be possible, unfortunately, due to how the list marked up. table headers = <table width="100%" cellspacing="0" cellpadding="0" border="0"> anime title rows = <table width="100%" cellspacing="0" cellpadding="0" border="0"> totals = <table width="100%" cellspacing="0" cellpadding="0" border="0"> In other words, they're identical, so having them styled differently and keeping them that way is next to impossible. Xinil would need to implement classes to the tables, similar to .td1 and .td2, for it to work. |
| That won't affect the rows, only the cells. |
| Hey, I've made several designs from just learning as I went along but i'm wondering if there is a way to change the area in which the list scrolls, but that is hard to word. I want to set the MAL bar at the top to a fixed position, but I don't want the list to be scrolling underneath it, so is it possible to have the list scroll to a certain point below the bar and then disappear? I can think of one way to do it but it means using a small background leaving most of the background transparent and changing the background level to be on top of the list, so it appears to disappear before the MAL bar when really it is just going under and being hidden by the background. That all seems like a lot of text, sorry. =P Any help would be great. |
 |
Mobb said: I can't really think of a way that would be possible, unfortunately, due to how the list marked up. table headers = <table width="100%" cellspacing="0" cellpadding="0" border="0"> anime title rows = <table width="100%" cellspacing="0" cellpadding="0" border="0"> totals = <table width="100%" cellspacing="0" cellpadding="0" border="0"> In other words, they're identical, so having them styled differently and keeping them that way is next to impossible. Xinil would need to implement classes to the tables, similar to .td1 and .td2, for it to work. you actually can still get to them using table:nth-child(3) { ... } or something, though it's not really maintainable since every new entry you add to your list means you'll need to adjust your css. I can think of ways to do it automatically actually, but they would require some complicated trickery and some external scripting. MajorJoseph said: Hey, I've made several designs from just learning as I went along but i'm wondering if there is a way to change the area in which the list scrolls, but that is hard to word. I want to set the MAL bar at the top to a fixed position, but I don't want the list to be scrolling underneath it, so is it possible to have the list scroll to a certain point below the bar and then disappear? I can think of one way to do it but it means using a small background leaving most of the background transparent and changing the background level to be on top of the list, so it appears to disappear before the MAL bar when really it is just going under and being hidden by the background. That all seems like a lot of text, sorry. =P Any help would be great. If you do it that way, I think you'll find that when you scroll the page, your bottom overlay image is going to scroll up too. What I think you're looking for is overflow:scroll... something like: #list_surround { width:700px; height:700px; overflow:scroll; ... } ...hopefully Xinil's filtering won't screw it up, but there's ways to get around that too. |
 I am a banana. |
| I've decided making my custom Anime List. So far I was able to add the background but I've been really wondering for something. You can use an image for a header on top of the list but is it possible adding another image to the bottom of the list? link:http://myanimelist.net/animelist/Black_Rock |
Thank you so much Santa! Merry Christmas & a wonderful new year! |
| Does anyone knows how can i fix this little problem : |
    |
Black_Rock said: You can use the #copyright div at the bottom and put a background on that, then increase its top-padding to move the text lower.I've decided making my custom Anime List. So far I was able to add the background but I've been really wondering for something. You can use an image for a header on top of the list but is it possible adding another image to the bottom of the list? link:[url=http://myanimelist.net/animelist/Black_Rock]http://myanimelist.net/animelist/Black_Rock Jarvas said: The div expanded because the text wrapped. Decreasing the text size in the .category_totals divs should be enough, but you can also set background-repeat: no-repeat and overflow:hidden to make sure the bottom background doesn't tile like that and to hide text that manages to extend past the bottom.Does anyone knows how can i fix this little problem : |
I am a banana. |
| Never thought of the font size decreasing but sure worked :D Thanks saka ;) |
|
| I've finally updated my anime list!! Yotsuba&! Theme! |
 |
| Updated my list since I haven't updated it since first joining back in 2008..... I use Mal Updater and basically never see my list, but wanted to solve NagatoFan's problem quoted below and ended up making a very functional and minimal list in the process. super minimal list: http://myanimelist.net/animelist/saka saka said: Mobb said: I can't really think of a way that would be possible, unfortunately, due to how the list marked up. table headers = <table width="100%" cellspacing="0" cellpadding="0" border="0"> anime title rows = <table width="100%" cellspacing="0" cellpadding="0" border="0"> totals = <table width="100%" cellspacing="0" cellpadding="0" border="0"> In other words, they're identical, so having them styled differently and keeping them that way is next to impossible. Xinil would need to implement classes to the tables, similar to .td1 and .td2, for it to work. you actually can still get to them using table:nth-child(3) { ... } or something, though it's not really maintainable since every new entry you add to your list means you'll need to adjust your css. I can think of ways to do it automatically actually, but they would require some complicated trickery and some external scripting. Here's my solution for accomplishing row highlighting without highlighting the headings and top links and such: /* highlight table rows on hover */ #list_surround table tbody tr:hover td { background-color: #f0f0f0; } /* ...but don't highlight the category headers, column labels, or top links */ #list_surround table[align=center] tbody tr:hover td, #list_surround table[align=center] + table tbody tr:hover td { background-color: transparent; } I notated them as tr:hover td but just tr:hover is enough of course. It might be a little nicer this way to browsers with poor CSS2 support and generally overrides better since most of the styles are on the cells and not the rows. Replace background-color:transparent with whatever your normal background is for those elements (if you have any defined on the td's specifically, but probably not). You can see the result on my list. |
I am a banana. |
| Ooh I must have missed the center align on the headers, cleaver. :) Nth-child is pretty unusable here like you say, so I didn't mention it. Me likey the list too, I'm a sucker for clean design. Same to you ShiroYuki1, looking good. |
| even without using the center align, you can do it using the category headers... just that it's a bit longer: /* ...but don't highlight the category headers or column labels */ ...but that doesn't cover the top category links. I discovered the 'align=center' when I was trying to add those in, and it works much better.#list_surround .header_cw tbody tr:hover td, #list_surround .header_onhold tbody tr:hover td, #list_surround .header_ptw tbody tr:hover td, #list_surround .header_completed tbody tr:hover td, #list_surround .header_dropped tbody tr:hover td, #list_surround .header_cw + table tbody tr:hover td, #list_surround .header_onhold + table tbody tr:hover td , #list_surround .header_ptw + table tbody tr:hover td, #list_surround .header_completed + table tbody tr:hover td, #list_surround .header_dropped + table tbody tr:hover td { background-color: transparent; } |
I am a banana. |
| @ShiroYuki: So cute! I really like it. :O |
| wow .. there is some realy good list's designs .. it's amazing just looking at them =) my list is so simple though -__-" |
| |
| It's nice though~ =O I just made something simple too. |
| So.. one question. :) How to align whole list to right? |
 |
| float: right; |
Mimi_Taylor said: float: right; Thanks. :) And where do I add it? After what...? |
|
| It just goes right underneath div#list_surround where you control the position of your list. Div#list_surround { float: right; margin-right: 0px; (increase this if you want it shifted towards the left a bit) } |
| Doesn't work. D; And it's still centered. EDIT: Don't worry, problem resolved. :3 |
ainthemixMay 16, 2010 10:03 AM
|
| Awesome! And that's a cool Hakuouki design~ :3 |
| I recently updated my profile, it's not very extravagant - i like keeping things simple, though i'm glad about the result :3 Check it out! |
Mimi_Taylor said: Yep, looks neat. Nice work SnG (+helpers :P).And that's a cool Hakuouki design~ :3 AsianLucas said: I like it but this isn't the Updated Profile thread. 8DI recently updated my profile, it's not very extravagant - i like keeping things simple, though i'm glad about the result :3 Check it out! |
 staff.applications ▼ guidelines.faq ▼ report.abuse ▼ thx.skittles ▼ thx.kina ▼ [H+] ³ ▼ |
| My bad, i called it my profile, it's actually my list that i want people to look at, lol. :3 |
More topics from this board
» MAL Analog HorrorWendy-- - Yesterday |
10 |
by Malakira
»»
2 hours ago |
|
» MyAnimeList x Honeyfeed Writing Contest 2025 SubmissionAvarion - 4 hours ago |
0 |
by Avarion
»»
4 hours ago |
|
» New Clashing Feelings volume after a decadeShiratori-san - Yesterday |
2 |
by Shiratori-san
»»
4 hours ago |
|
» Vladimir Volfovich Zhirinovsky's MAL Diary of Kawai MemoriesV_V_Zhirinovsky - Today |
1 |
by V_V_Zhirinovsky
»»
Today, 1:00 AM |
|
» New Android App – Shimeji Mascot Screen Petsshimejimascot - Sep 26 |
8 |
by hacker09
»»
Sep 26, 10:03 PM |