List Design Updated - Check It Out

Offline

Mar 2007

722

Kayrhandros said:

All-Star: Only thing I dislike is the purple border on the tables.

Yep, agree.

@Deceptive621: The best way to learn is to see the source code for other people anime lists and see how they managed to do it. And have the w3c webpage open for reference to what the things actually mean,, and what you can do extra.

Jul 2, 2007 3:59 AM

#154

Cloudrayne

Offline

May 2007

271

Deceptive621 said:
~List Updated~

I just messed around with the style sheet and based my colors on the background. I wanted it to look slightly compact but there are still a lot of things I don't like about it.

Oh well. Here's to the learning process.

this helped me alot to understand CSS
http://www.w3schools.com/css/default.asp

i hope it helps you

Jul 2, 2007 4:06 AM

#155

Offline

Oct 2006

1665

TheTsunami said:
Better or worse?

hmm... better, but imo the yellows are too faded now... I'd try using color codes like those:
#a2845e
#3e2601
#8f6e41
#5e4018

--------

Deceptive621: Looks good except for 2 things. One, the links color make them unreadable if they don't have the orange bg from the table. e.g. : "Deceptive621's Profile | MyAnimeList Home" . And 2, the font size is too small, thus in higher resolutions it's pretty difficult to read.

Jul 2, 2007 8:27 AM

#156

Offline

Jun 2007

~List Updated~

Thanks for all the tips guys, I really appreciate it, especially considering all of your lists look so professional. I changed the link color so now you can read it with or without the table color behind it. Also increased the font size so it should be more readable on higher resolutions.

I'm definitely going to study those CSS guides. I want my list to look better and better each time I change it. Thanks again everyone. :)

[url=http://myanimelist.net/clubs.php?cid=327]*The Asuka Appreciation Club* Join Now![/url

Jul 2, 2007 10:49 AM

#157

kirAth-shiAue

Offline

Mar 2007

843

Kayrhandros said:
All-Star: Only thing I dislike is the purple border on the tables.

I changed it to blue now.

Jul 2, 2007 11:16 AM

#158

Offline

Mar 2007

722

All-Star said:

Kayrhandros said:
All-Star: Only thing I dislike is the purple border on the tables.

I changed it to blue now.

A little better =)

Jul 2, 2007 12:26 PM

#159

Offline

Oct 2006

1665

I've re-edited the headers on my style.

Previews on my resolution:
Before
After

I'm probably keeping the second style as IMO, it looks better.
I also tested decreasing the saturation on the wallpaper, like Krelian suggested but I didn't like the outcome. The Character looked pretty pale...
Still here's the preview:
Less Saturation

EDIT: Actually, I changed colors on the headers now, too. Thanks to cyruz for the input

Red

Gray

I kinda like both so... I dunno which one to pick... Tell me what you guys think.

------

All-Star said:
I changed it to blue now.

Looks better
------

Deceptive621: The link are still unreadable because of the color code on the "visted link color":

Also, I'd say you should probably increase the table width a lil bit now that the font size is higher.

KayrhandrosJul 2, 2007 1:46 PM

Jul 2, 2007 4:20 PM

#160

Offline

Jun 2007

~List Updated~

All right..I think I got it down. Thanks for the tip kayrhandros i definitely like the way it looks now with the link color changed and the widened table.

Also I like the Red Headers. They remind me more of Rei...

[url=http://myanimelist.net/clubs.php?cid=327]*The Asuka Appreciation Club* Join Now![/url

Jul 3, 2007 2:56 AM

#161

Offline

Oct 2006

1665

Np, definitely looks good now :)

And thanks for the input on the headers.

Jul 3, 2007 2:03 PM

#162

Offline

Mar 2007

722

Gave my list a top header to accompany the theme of the list. Suggestions/Critic/Opinions welcome.

Jul 3, 2007 2:20 PM

#163

kirAth-shiAue

Offline

Mar 2007

843

Kayrhandros said:

All-Star said:
I changed it to blue now.

Looks better

Thanks so much for the tip. I just saw your list and wow. It's my most fave design I've seen so far.

Jul 3, 2007 3:09 PM

#164

Offline

Oct 2006

1665

All-Star said:
Thanks so much for the tip. I just saw your list and wow. It's my most fave design I've seen so far.

Thanks a lot :). though I'm still working on the headers.

Zirgo said:
Gave my list a top header to accompany the theme of the list. Suggestions/Critic/Opinions welcome.

Zirgo, I'd suggest you use the same font style on the top header. Otherwise it looks a bit outta place imo.

Jul 3, 2007 5:53 PM

#165

Neverender

Offline

Apr 2007

4158

I know a few people asked me to keep the Shana design until the next competition, but the end of FSN inspired me to make a new one. I can always switch it back later lol. I don't know if I like this one as much as the last, but oh well.

version04

Signature removed. Please follow the signature rules, as defined in the Site & Forum Guidelines.

Jul 3, 2007 9:18 PM

#166

Zel

Offline

Mar 2007

835

Looks good, but Saber seems a bit blurry

Jul 4, 2007 1:14 AM

#167

Offline

Mar 2007

722

Yeah I know =/,, made the header on another computer that didn't have that font installed,, will do something about that. Thanks! =)

ZirgoJul 4, 2007 10:25 AM

Jul 4, 2007 10:25 AM

#168

Offline

Mar 2007

722

So, now the header has the same font as the other elements,, better for sure =)

Jul 4, 2007 1:10 PM

#169

Offline

Jul 2007

In getting to know the structuring of the List section, and tinkering with it for a few hours I made a very simplistic natured design. It's nothing fancy, nor did it take very much effort to make.

List

Jul 4, 2007 1:15 PM

#170

BACK FOR MORE?

Offline

Jan 2007

12689

You know, simple is good. And without exaggerating, I really like that sig of yours, it's awesome. :D

staff.applications　▼　
guidelines.faq　▼　

report.abuse　▼　

thx.skittles　▼　
thx.kina　▼　

[H+] ³　▼　

Jul 4, 2007 1:23 PM

#171

Offline

Mar 2007

722

@Fenrir - Yep a simple and very nice design indeed. Like it alot!

Jul 4, 2007 1:27 PM

#172

Offline

Jul 2007

cyruz said:
You know, simple is good.

Oh, I didn't mean to make it sound as if simple is bad. In all honesty, I prefer it simple.

And without exaggerating, I really like that sig of yours, it's awesome. :D

You've got me a little confused here since I don't have a signature. Although I assume you refer to my profile picture and/or the image used in the background on my list?

Zirgo said:
@Fenrir - Yep a simple and very nice design indeed. Like it alot!

I appreciate it. Thanks.

Jul 4, 2007 1:29 PM

#173

BACK FOR MORE?

Offline

Jan 2007

12689

Fenrir said:
You've got me a little confused here since I don't have a signature. Although I assume you refer to my profile picture and/or the image used in the background on my list?

Haha, I should get sleep. I actually meant to type list and not sig. Sorry ^^.

staff.applications　▼　
guidelines.faq　▼　

report.abuse　▼　

thx.skittles　▼　
thx.kina　▼　

[H+] ³　▼　

Jul 4, 2007 1:31 PM

#174

Offline

Jul 2007

cyruz said:
Haha, I should get sleep. I actually meant to type list and not sig. Sorry ^^.

Oh, it's not a problem at all. It happens.
I appreciate it in any case.

Jul 4, 2007 1:35 PM

#175

Offline

Oct 2006

1665

Zirgo said:
So, now the header has the same font as the other elements,, better for sure =)

Does indeed :)

Fenrir said:
In getting to know the structuring of the List section, and tinkering with it for a few hours I made a very simplistic natured design. It's nothing fancy, nor did it take very much effort to make.

List

I like it too. Pretty simple but it works :)

Jul 4, 2007 4:08 PM

#176

Krelian

Offline

Oct 2006

1569

Zel said:
Looks good, but Saber seems a bit blurry

Ditto.

Fenrir: I like the whole minimalist thing a lot, but drop the black bar under each heading - it looks kinda bad. Perhaps you could try light grey, but black is far too much contrast - it throws the whole thing out of balance.

Jul 4, 2007 11:39 PM

#177

BACK FOR MORE?

Offline

Jan 2007

12689

I like that black bar, gives the list the little bit of contrast it needs. But that's just me. :)

staff.applications　▼　
guidelines.faq　▼　

report.abuse　▼　

thx.skittles　▼　
thx.kina　▼　

[H+] ³　▼　

Jul 5, 2007 12:33 AM

#178

Offline

Jul 2007

Kayrhandros said:
I like it too. Pretty simple but it works :)

Thanks.

Krelian said:
Fenrir: I like the whole minimalist thing a lot, but drop the black bar under each heading - it looks kinda bad. Perhaps you could try light grey, but black is far too much contrast - it throws the whole thing out of balance.

I made it dark with the purpose of rough contrast as to seperate the sections and make it stand out. In any case, I took your suggestion into consideration and toned down its color.

List

Jul 5, 2007 1:01 AM

#179

BACK FOR MORE?

Offline

Jan 2007

12689

I updated my list a few days ago as well. I only enhanced the wallpaper contrast a bit and added the torture tools from Higurashi to the headers. I know it's not completely new but it's sort of refreshing heh.

staff.applications　▼　
guidelines.faq　▼　

report.abuse　▼　

thx.skittles　▼　
thx.kina　▼　

[H+] ³　▼　

Jul 5, 2007 2:08 AM

#180

Offline

Mar 2007

722

Watch out for knives, they are sharp =),, nice headers cyruz!

Jul 5, 2007 10:49 AM

#181

BACK FOR MORE?

Offline

Jan 2007

12689

They sure are. :D

Thanks!

Yours looks great too btw, very nice job!

staff.applications　▼　
guidelines.faq　▼　

report.abuse　▼　

thx.skittles　▼　
thx.kina　▼　

[H+] ³　▼　

Jul 5, 2007 1:18 PM

#182

Offline

Jun 2007

@Fenrir: I like your list setup. It is very simple, but I think that makes it look very clean and carefree. I like it alot. :)

I was looking @ your sig and the extension (With the girls face) is off vertically by a few pixels. You can tell by looking at her eye. although it's also very pretty.

[url=http://myanimelist.net/clubs.php?cid=327]*The Asuka Appreciation Club* Join Now![/url

Jul 5, 2007 1:20 PM

#183

BACK FOR MORE?

Offline

Jan 2007

12689

It is off? Can you point it out, or mark it on a screenshot or something since I can't spot anything.

staff.applications　▼　
guidelines.faq　▼　

report.abuse　▼　

thx.skittles　▼　
thx.kina　▼　

[H+] ³　▼　

Jul 5, 2007 1:33 PM

#184

Offline

Jul 2007

I didn't notice that it was off. It should have been fixed now.
Thanks for noticing.

Deceptive621 said:
@Fenrir: I like your list setup. It is very simple, but I think that makes it look very clean and carefree. I like it alot. :)

Thanks. :)

cyruz said:
I updated my list a few days ago as well. I only enhanced the wallpaper contrast a bit and added the torture tools from Higurashi to the headers. I know it's not completely new but it's sort of refreshing heh.

Ah, yes. The dreaded tools from Higurashi. They provided some creepy scenarios.
It serves as a very nice addition if I must say so.

It is off? Can you point it out, or mark it on a screenshot or something since I can't spot anything.

The right section was off by 2 pixels as shown here.

Fenrir_Jul 5, 2007 1:45 PM

Jul 6, 2007 10:37 PM

#185

Sidestep

Offline

Jun 2007

Working on a new style to match my signature. Got most of it done, but I'm probably gonna add/fix a few things tomorrow.

Jul 9, 2007 11:19 PM

#186

LostSQ

Offline

Apr 2007

Updated my list yesterday. went with a Death Note theme. Lmk what u think

Jul 10, 2007 2:41 AM

#187

Offline

Mar 2007

722

@LostHartSQ - Just one thing I think. Make the white background you have for the headers transparent instead so that they don't cut out the page background ryuuk character.

Jul 10, 2007 6:39 AM

#188

LostSQ

Offline

Apr 2007

Lol, i did not even think of that... thanks alot. I have my resolution set at 1280x1024.. forgot that not the whole world is like me lol. ill definitely change that so other resolutions look ok as well. Thanks again Zirgo, never would have thought of it.

Jul 10, 2007 9:26 AM

#189

Offline

Mar 2007

722

Ah ok =),, I run 1024*768 max solution so I have the reverse problem when ever I do a design,, so I try to keep it as "safe" as possible.

Jul 13, 2007 11:42 AM

#190

Offline

Jun 2007

~List Updated~

So I got bored of all the oranges and browns. Reminded me too much of fall and it's summer! So I made a fresh new list. Uses more whites, blacks and blues but is still quite dark. For some reason I seem to move toward darker themes. Also incorporated some transparent graphics which are a first for me. I think they came out pretty well. Tell me what you think! :)

Also, I might just be blind and too new to CSS but where is the code that lets me change the header that says 'Deceptive621's List', right next to the drop down menu? I can't find it and I want to put a graphic there instead. Thanks. :)

[url=http://myanimelist.net/clubs.php?cid=327]*The Asuka Appreciation Club* Join Now![/url

Jul 13, 2007 1:26 PM

#191

Krelian

Offline

Oct 2006

1569

2 things: The headers look a little blurry and kinda odd over the darker parts of the image (you may want to make use of PNG alpha transparency instead of GIF transparency there) and I really think it'd look better if you kept the alternating row colors on the list (they only need to be slightly different... just enough to notice) rather than making them all the same.

That said, I like the colors and I'm quite fond of the background. Good job with that.

Jul 14, 2007 2:08 AM

#192

Neverender

Offline

Apr 2007

4158

Sidestep said:
Working on a new style to match my signature. Got most of it done, but I'm probably gonna add/fix a few things tomorrow.

That's pretty sweet.

I just switched up the wallpaper on my list as a temporary fix since the last one was kind of blurry and a little too light but I think it actually made it look a lot better. <_>

Signature removed. Please follow the signature rules, as defined in the Site & Forum Guidelines.

Jul 14, 2007 2:45 AM

#193

Offline

Mar 2007

722

Deceptive621 said:
~List Updated~
Also, I might just be blind and too new to CSS but where is the code that lets me change the header that says 'Deceptive621's List', right next to the drop down menu? I can't find it and I want to put a graphic there instead. Thanks. :)

The code for doing that is first in the "div#list_surround". I'll do a copy of my code.
----------------------------------------------------------------
div#list_surround
{
margin-left:400px;
background: url(http://img529.imageshack.us/img529/2936/bigheaddz3.jpg) top right no-repeat;
width: 600px;
padding-top: 250px;
}
------------------------------------------------------------------
background: should be set to point to the images that you want for the top header
padding-top: should be set to the height of you top header image so that you can view it full out. Also I set a width property here but not certain if it's needed.

Now you will see the image but you still have the Deceptives Anime List as text placed on top. To remove this you need to add a line to the ".header_al" Code as follows.
------------------------------------------------------------------
.header_al
{
font-weight: bold;
font-size: 16px;
display:none;
}
-------------------------------------------------------------------
The only one you need to add is the display:none;

Hope it works out!

Jul 14, 2007 5:32 AM

#194

itainteazy

Offline

Oct 2006

2044

Changed mine again another collabo with cyruz. Turned out really awesome if I do say so myself :D http://itainteazy.myanimelist.net/

Jul 14, 2007 7:51 AM

#195

Kanashimi

Offline

Sep 2006

1886

itainteazy said:
Changed mine again another collabo with cyruz. Turned out really awesome if I do say so myself :D http://itainteazy.myanimelist.net/

Now that's what I call some kickass headers. I liked it and thought it was well-made, good job~

Jul 14, 2007 8:32 AM

#196

25letters

Offline

Jan 2007

875

Awh, Eazy`s so creative. [[;
I updated mine as well <3

Jul 14, 2007 8:38 AM

#197

tainteddonut

Offline

Apr 2007

2117

Very nice design Eazy. The only slight problem I could note was that your headers are a few pixels off to the right.

Noelle_x3, I'd suggest aligning the background to the top left corner so that the list is over it when viewed at higher resolutions.

tainteddonutJul 14, 2007 8:55 AM

...even a saint needs a soldier to do the dirty work.

Jul 14, 2007 8:48 AM

#198

BACK FOR MORE?

Offline

Jan 2007

12689

tainteddonut said:
The only slight problem I could note was that your headers are a few pixels off to the right.

That should be fixed.

staff.applications　▼　
guidelines.faq　▼　

report.abuse　▼　

thx.skittles　▼　
thx.kina　▼　

[H+] ³　▼　

Jul 14, 2007 9:10 AM

#199

tainteddonut

Offline

Apr 2007

2117

cyruz said:

tainteddonut said:
The only slight problem I could note was that your headers are a few pixels off to the right.

That should be fixed.

This is what I see when I check it out with Opera 9. It also appears a few pixels off with IE 7 too. On Firefox 2 it looks lined up nicely though.

...even a saint needs a soldier to do the dirty work.

Jul 14, 2007 9:26 AM

#200