List Design Updated - Check It Out

Offline

Jul 2010

2285

Blue-Rei said:
hi , i need a little help here .. i'm making a new style & i want the list header's code
by the header i mean this part
http://img804.imageshack.us/img804/3195/unled1fn.jpg

=

#list_surround {
margin: 0 auto;
width: 750px;
background: url(header.png) no-repeat; /* header image url */
padding-top: 250px; /* define image height */
}

Jul 30, 2011 10:14 AM

#4653

Aneime

Offline

Dec 2009

479

Well I updated mine, nothing special like CSS or something. Just a plain simple BG with some settings from what MAL has to offer. Check it out if u want, tell me what you think etc.

(:

Jul 30, 2011 3:39 PM

#4654

Emotocon

Offline

Jun 2010

121

Han-yuu said:

Sake said:
So I finally decided to dabble into the mysterious world of CSS list making. I started out simple, using a free to use template from here here

It's good as for your first try. you can play with css by changing colors, font size, padding etc and it will become unique.

What would you suggest? The only real stylistic change I made was make the fonts a little larger (easier on the eyes). It took all my CSS skill to figure out just how to make the headers larger, so everything beyond that is new to me.

Jul 30, 2011 8:53 PM

#4655

Tzu

Offline

May 2011

426

Took forever for my wallpaper to change
I know the servers here aren't all that great and theres a line system.

If business wasn't going as bad for me I'd donate this blade server in my shop, things been sitting in there forever.

I do like how my new list looks though :D

Jul 31, 2011 1:50 PM

#4656

Nythe

Offline

Nov 2010

163

@Applecrack - I like the colour scheme!

I just updated mine, read up on some CSS tutorials a bit a couple of days ago and thought I'd try. Pretty much plain and simple for now, but should be fun messing around with it a tad more, now that I'm familiar with the element names.

Jul 31, 2011 2:31 PM

#4657

KoPT

Offline

Aug 2010

156

I just updated my lists:

These will probably be placeholders until I learn a few other tricks.

Aneime said:
Well I updated mine, nothing special like CSS or something. Just a plain simple BG with some settings from what MAL has to offer. Check it out if u want, tell me what you think etc.

(:

It's probably my screen resolution, but the list is covering the girl on my screen, unless it's supposed to look that way. Maybe if you can post a screenshot of how it looks to you, I can see it better. What I do see looks nice, though.

Nythe said:
@Applecrack - I like the colour scheme!

I just updated mine, read up on some CSS tutorials a bit a couple of days ago and thought I'd try. Pretty much plain and simple for now, but should be fun messing around with it a tad more, now that I'm familiar with the element names.

For a plain and simple list, it looks nice to me. If I were to change anything, I would make the category totals, grand totals, and copyright the same color as the animes.

Anime List | Manga List

Aug 1, 2011 3:39 AM

#4658

Aneime

Offline

Dec 2009

479

@KoPT

That might have been a good idea, since on every other resolution it looks horrible LOL
Here it is:

As to yours, I like it very much, as my memory can recall those are one of the god knows how much legendary pokemon? rofl. I like the Manga version better. Can't say I like the bg a lot but it's nice (:
P.S.: Nice image sharing site, me likes it :D

AneimeAug 1, 2011 3:46 AM

Aug 1, 2011 4:27 AM

#4659

Channeru

Offline

Mar 2010

59

Aneime said:
@KoPT

That might have been a good idea, since on every other resolution it looks horrible LOL
Here it is:

As to yours, I like it very much, as my memory can recall those are one of the god knows how much legendary pokemon? rofl. I like the Manga version better. Can't say I like the bg a lot but it's nice (:
P.S.: Nice image sharing site, me likes it :D

IIRC, you can make your background image stretch to fullscreen for a lot of browsers by using the following code:

background: url(http://somewebsite.com/image.jpg) no-repeat center center fixed;

/* Making the screenshot fullscreen */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Aug 1, 2011 10:21 PM

#4660

Offline

Mar 2010

122

I updated my anime list today! :D Theres still some minor things that I have to work on for the list~ I'd like some feedback on my list so I can include those ideas when I finish up my list design :P (Compatible with FF4 & IE9, idk about other browsers)

Anime List: http://myanimelist.net/animelist/Moronicidiot

Aug 2, 2011 1:09 AM

#4661

Obinderu

Offline

Sep 2010

1133

Moronicidiot said:
I updated my anime list today! :D Theres still some minor things that I have to work on for the list~ I'd like some feedback on my list so I can include those ideas when I finish up my list design :P (Compatible with FF4 & IE9, idk about other browsers)

Anime List: http://myanimelist.net/animelist/Moronicidiot

Wow, that looks awesome. Have you based your layout on something or is it a whole new idea?
I personally prefer having a link to at least the profile of the person the list is from, and that is absent. I also prefer some more data on things, but if you think less is better you should keep it the way it is, it's not bad at all.

Aug 2, 2011 1:17 AM

#4662

AlexSadist-sama

Offline

Mar 2009

65239

Moronicidiot said:
I updated my anime list today! :D Theres still some minor things that I have to work on for the list~ I'd like some feedback on my list so I can include those ideas when I finish up my list design :P (Compatible with FF4 & IE9, idk about other browsers)

Anime List: http://myanimelist.net/animelist/Moronicidiot

Definitely the most unqiue list I've seen.
It would look better if the orange colour was changed to another colour.
Changing the font colour of the anime title to white would be better in my opinion.

Aug 2, 2011 1:39 AM

#4663

eL_marco

Offline

Nov 2008

5287

@Moronicidiot: Did you know that your list looks like the Pokemon website?: http://www.pokemon.com/us/
Any connection by chance?

Anyway, my only suggestions would be to change the images from squares into something in the portrait format. It bugs me when images get cropped in such a way :P
And you probably should add more info/data in those containers. It feels a bit empty with only the series type and values.

Aug 2, 2011 4:57 AM

#4664

Obinderu

Offline

Sep 2010

1133

eL_marco said:
@Moronicidiot: Did you know that your list looks like the Pokemon website?: http://www.pokemon.com/us/
Any connection by chance?

I found it already familiar, but that's the one I was looking for.

Aug 2, 2011 5:34 AM

#4665

Offline

Jul 2010

2285

@Moronicidiot: it looks great.
the only thing i suggest would be to change font color gray to light gray or white in those blocks.

Aug 2, 2011 6:36 AM

#4666

Offline

Mar 2010

122

@Ovindel Its based on the pokemon site :D Yeah I plan to add more stuff to it

@AlexSadist-sama Hmm.. Ill try to change the font to white and see how that looks :D

@eL_marco Yep its based on the pokemon site =] Ehh I tried portrait thumbs and it didnt look that great =| Yeah Im gunna add more info/data to the containers

@Han-yuu Will do :D

Aug 3, 2011 7:18 PM

#4667

spineslayer

Offline

Aug 2008

2006

@Moronicidiot- I must say that is pretty innovative and new. Are you into web design as a hobby or do you do it for a profession?

Anime List l Manga List

Aug 4, 2011 8:22 AM

#4668

Offline

Mar 2010

122

Rikuunojuu said:
http://myanimelist.net/animelist/Rikuunojuu

Nothing special since I am a pure beginner with css and a noob at graphics...
But I like its simple looks^^

For a beginner, it looks amazing~ :D

@spineslayer - Its just a hobby =]

Aug 6, 2011 12:40 PM

#4669

Kuma-chii

Offline

Sep 2008

51

Moronicidiot: awesome as always. Too bad I dont have much time (and anyway, i need a new lappy for it. This netbook cant hold even my OS properly, not even a gimp) to inovate my design. Maybe when I came back home ill try something new :o

Aug 7, 2011 2:11 PM

#4670

Sorbet

Offline

Dec 2010

3

Heya ^^

You people who are pros on CSS, I wish you could help me with some things ;3;
I've been editing my list for a while, but there are some things that I can't do, they are too hard >_<
some of those things are:
changing text color in hover effect; In my list, the animes titles only changes the collor when I pass my mouse over it (from gray to black) I wanted to knew if there is an way to make they change the color to black if I just pass the mouse over the line (1 EDIT - MORE AFRO SAMURAI - TV -/5 +) and if there is a way to apply it to the entire line (tv, edit...) instead of just links..

another thing is the color fading effect on hover, not a simple fast effect (see my list XD), but something that shines a while before, until become blue.

and last, my top image (ciel phantomhive) is too close to the MAL bar, I wish I could move it a little, so it leave a white space, a distance from the bar.. I know it looks a little dumb of my part, and sounds easy to fix, but I can't find how to do it anywhere :(

thank you since now, and sorry for my bad english ><

^-^

Aug 8, 2011 8:34 AM

#4671

Honaris

Offline

Apr 2009

118

Sorbet said:
Heya ^^

You people who are pros on CSS, I wish you could help me with some things ;3;
I've been editing my list for a while, but there are some things that I can't do, they are too hard >_<
some of those things are:
changing text color in hover effect; In my list, the animes titles only changes the collor when I pass my mouse over it (from gray to black) I wanted to knew if there is an way to make they change the color to black if I just pass the mouse over the line (1 EDIT - MORE AFRO SAMURAI - TV -/5 +) and if there is a way to apply it to the entire line (tv, edit...) instead of just links..

another thing is the color fading effect on hover, not a simple fast effect (see my list XD), but something that shines a while before, until become blue.

and last, my top image (ciel phantomhive) is too close to the MAL bar, I wish I could move it a little, so it leave a white space, a distance from the bar.. I know it looks a little dumb of my part, and sounds easy to fix, but I can't find how to do it anywhere :(

thank you since now, and sorry for my bad english ><

^-^

Wow, how long since i've looked at CSS properly, ashamed of myself. For the first issue...

#list_surround table tbody tr:hover td a, #list_surround table tbody tr:hover td
{
color: #000;
}

Sorted.

As for colour fading i've been out of the loop for a bit but the best I could find was

#list_surround table tbody tr
{
-moz-transition: background-color 1s;
-o-transition: background-color 1s;
-webkit-transition: background-color 1s;
transition: background-color 1s;
}

This will just make it fade to the blue. Changing the 1s at the end will make it fade faster/slower.

As for adding space at the top just add

margin-top: 50px;

to #list_surround, change the 50px if you want more/less space.

Hope all that helps.

HonarisAug 8, 2011 8:38 AM

Aug 8, 2011 12:59 PM

#4672

Sorbet

Offline

Dec 2010

3

@MajorJoseph

Thaaaaank you veeeeery much :D:D:D

You helped a looot, it worked well ^-^

The fading effect was exatcly this, that I was looking for XD

But i'm having some problems with the line font change, it actually works pretty well, exactly how I was trying to do also, but it somehow removes the hover background, it no longer shows the blue box :<

I'll try to mix them together XD

Well, thanks again, I'd be stuck yet if it was not u ^-^

Edit: It's working nowwwwwww XD
Apparentely it was not coyping right, some parts went wrong, and It was hard to notice, but its fixed now, just perfect XD
Thanks!!

SorbetAug 8, 2011 1:37 PM

Aug 10, 2011 12:46 PM

#4673

Lirina

Offline

Feb 2008

685

Hi everyone! I saw some really nice designs here, I hope can make something like this someday, too. ^^

As for now I want to remove the black color of the header where this "you are viewing xy's list" stands. Can anybody help me?

Here is my list: http://myanimelist.net/animelist/Caydra

Aug 10, 2011 1:19 PM

#4674

Offline

Jul 2010

2285

Caydra said:
Hi everyone! I saw some really nice designs here, I hope can make something like this someday, too. ^^

As for now I want to remove the black color of the header where this "you are viewing xy's list" stands. Can anybody help me?

Here is my list: http://myanimelist.net/animelist/Caydra

If you want to remove complete header bar.. then use this code.

#mal_control_strip { display: none; }

if you want to change background image:
#mal_control_strip, #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks { background: url(http://image_url_here) repeat-x;}

for color:
#mal_control_strip, #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks { background-color: #DDDDDD;}

transparent:
#mal_control_strip, #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks { background: transparent !important;}

nice list btw.

Aug 10, 2011 6:20 PM

#4675

Wizzdoom

Offline

Dec 2010

3

So there is this function @import...
I read that it is used for big codes, and its easier to edit, but, I dont understand it very well..
I know that I have to host my list code in a site, but which site would it be?
Can I edit #mal_control_strip using this method?

Aug 10, 2011 8:42 PM

#4676

Rukayex

Offline

Mar 2009

2096

Wizzdoom said:
So there is this function @import...
I read that it is used for big codes, and its easier to edit, but, I dont understand it very well..
I know that I have to host my list code in a site, but which site would it be?
Can I edit #mal_control_strip using this method?

Doesn't matter which site, though 000webhost is a start. And @mal_cs, yes you can. :3

anime list | manga list

Aug 11, 2011 2:28 AM

#4677

Lirina

Offline

Feb 2008

685

Han-yuu said:

If you want to remove complete header bar.. then use this code.

#mal_control_strip { display: none; }

if you want to change background image:
#mal_control_strip, #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks { background: url(http://image_url_here) repeat-x;}

for color:
#mal_control_strip, #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks { background-color: #DDDDDD;}

transparent:
#mal_control_strip, #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks { background: transparent !important;}

nice list btw.

Thanks!

If I just add this to the css nothing happens. Do I need to paste the code into a special place?

Aug 11, 2011 7:48 AM

#4678

Offline

Jul 2010

2285

Caydra said:
Thanks!

If I just add this to the css nothing happens. Do I need to paste the code into a special place?

You can post it anywhere and it should work. i checked your list code but i can''t find it. instead there is.

# { display: none; }

you need to paste this:

#mal_control_strip { display: none; }

or any above code, if you want to change background image/color.

Aug 11, 2011 7:52 AM

#4679

Wizzdoom

Offline

Dec 2010

3

Han-yuu said:

Caydra said:
Thanks!

If I just add this to the css nothing happens. Do I need to paste the code into a special place?

You can post it anywhere and it should work. i checked your list code but i can''t find it. instead there is.

# { display: none; }

you need to paste this:

#mal_control_strip { display: none; }

or any above code, if you want to change background image/color.

It won't work :P
I dont know very much, but I read somewhere that the only thing u can do with MAL bar is changing color, whenever I tried to use #mal_control_strip, it automatically renamed to "#"
But I know that it can be changed if an external sheet is used @_@

Aug 11, 2011 7:54 AM

#4680

Wizzdoom

Offline

Dec 2010

3

Rukayex said:

Wizzdoom said:
So there is this function @import...
I read that it is used for big codes, and its easier to edit, but, I dont understand it very well..
I know that I have to host my list code in a site, but which site would it be?
Can I edit #mal_control_strip using this method?

Doesn't matter which site, though 000webhost is a start. And @mal_cs, yes you can. :3

Thanks,

I tried this site, but somehow they didnt send me the activation code, i'm still waiting, tried 2 e-mails btw
I tried also Google Code, but I can't work well with that, I just don't understant that site haha
But I'll start my list code, so I dont waste many time
Thanks

Aug 11, 2011 8:22 AM

#4681

Offline

Jul 2010

2285

Wizzdoom said:
It won't work :P
I dont know very much, but I read somewhere that the only thing u can do with MAL bar is changing color, whenever I tried to use #mal_control_strip, it automatically renamed to "#"
But I know that it can be changed if an external sheet is used @_@

I see.. i didn't used MAL editor much because it was slow to update.

@Cydra: if you want better editing experience then paste this code in your notepad.

save it as style sheet.. > style.css
Make account on any free webshoting site and upload your style sheet file there.
add this code in your MAL editor.

@import url(http://website_url/style.css);
body { };

this will work and next time if you need to do any update. just upload your new style sheet on webhosting.

Wizzdoom said:

Rukayex said:
Doesn't matter which site, though 000webhost is a start. And @mal_cs, yes you can. :3

Thanks,
I tried this site, but somehow they didnt send me the activation code, i'm still waiting, tried 2 e-mails btw
I tried also Google Code, but I can't work well with that, I just don't understant that site haha
But I'll start my list code, so I dont waste many time
Thanks

You can also try byethost.com

Aug 11, 2011 9:07 PM

#4682

chocolaetmaelk

Offline

Sep 2009

1984

I just made a new list. Fairly simple to make...nothing too fancy.

Any thoughts/ways to make it better?

Aug 11, 2011 9:28 PM

#4683

itsthatguy

Offline

Mar 2011

569

I just changed my colors and some fonts around and I thought that my list was pretty fancy.

After seeing all of these though...I'm just ashamed.

Harems don't exist in America. If one guy is constantly surrounded by beautiful girls, then he's probably the gay friend.

Aug 13, 2011 7:09 AM

#4684

Channeru

Offline

Mar 2010

59

New list design:

Click the image for large screenshot in FF5 or visit my list below:

http://myanimelist.net/animelist/1NZ3RU

Used lots of CSS3 again, which causes IE and some other browsers to not display my list correctly.
I might optimise it for speed more, even though most of the content already gets cached, meaning the list will load faster after the first time it's visited.
Will finetune the graphics whenever.

Aug 13, 2011 3:38 PM

#4685

Offline

Mar 2010

122

Wingull said:
I just made a new list. Fairly simple to make...nothing too fancy.

Any thoughts/ways to make it better?

For the currently selected tab, you have the font color as white and the background as yellow, I think you should change the font color or background color because its very hard to see white on yellow. Other than that, I think its reallly good :D

1NZ3RU said:
New list design:

Click the image for large screenshot in FF5 or visit my list below:

[url=http://myanimelist.net/animelist/1NZ3RU]http://myanimelist.net/animelist/1NZ3RU

Used lots of CSS3 again, which causes IE and some other browsers to not display my list correctly.
I might optimise it for speed more, even though most of the content already gets cached, meaning the list will load faster after the first time it's visited.
Will finetune the graphics whenever.

I like your new list design~ You should center the {sort by #, animetitle, etc} links because its so far so the left and it kinda bothers me D:

---------------------------------------------------------------------------------------------------

I updated my animelist again~ I wanted it to look really simple and clean :3

Anime List: http://myanimelist.net/animelist/Moronicidiot

Aug 13, 2011 4:42 PM

#4686

Channeru

Offline

Mar 2010

59

Moronicidiot said:
I updated my animelist again~ I wanted it to look really simple and clean :3

Anime List: http://myanimelist.net/animelist/Moronicidiot

Really minimalistic look, I can appreciate that. Though the list only covers about 1/6th of my window in fullscreen >_<;;

Aug 13, 2011 7:29 PM

#4687

Rukayex

Offline

Mar 2009

2096

@MI: Looks nice! :D

@1NZ: Quite pretty :3 too bad the girls aren't centered too, and that their nametags are overlapping... centering the sort system doesn't bother me though.

anime list | manga list

Aug 14, 2011 3:56 PM

#4688

Offline

Sep 2010

63

Here's my anime list: http://myanimelist.net/animelist/tajio-kun

It's my first time so I would love some suggestions :)

EDIT: Here's the matching manga list: http://myanimelist.net/mangalist/tajio-kun

tajio-kunAug 14, 2011 5:21 PM

Check out my anime blog: http://otakutajio.tumblr.com/

Aug 14, 2011 7:22 PM

#4689

Harii

Offline

Jul 2011

593

tajio-kun said:
Here's my anime list: http://myanimelist.net/animelist/tajio-kun

It's my first time so I would love some suggestions :)

EDIT: Here's the matching manga list: http://myanimelist.net/mangalist/tajio-kun

I like your animelist, nice and clean. Can't see your mangalist though, it's private

Aug 15, 2011 2:29 AM

#4690

Nythe

Offline

Nov 2010

163

@tajio-kun, I agree with Harii, clean lovely design, looks great.

Aug 15, 2011 2:52 AM

#4691

SharinganGirl

Offline

Aug 2009

3371

tajio-kun said:
Here's my anime list: http://myanimelist.net/animelist/tajio-kun

It's my first time so I would love some suggestions :)

EDIT: Here's the matching manga list: http://myanimelist.net/mangalist/tajio-kun

Really nice design, good work!

Aug 15, 2011 6:11 AM

#4692

Offline

Sep 2010

63

Thank you Harii, Nythe and ShariganGirl! :3

Check out my anime blog: http://otakutajio.tumblr.com/

Aug 15, 2011 8:32 AM

#4693

Blue-Rei

Offline

Jun 2009

590

I've made a new style to my list , well it should have a header pic on top of the list .. but it didn't went good , maybe the code was messed up or something .. idk .. ,, anyway it's the simplest style ever , nothing much to say .. but feedback plz
! :3

Aug 15, 2011 2:25 PM

#4694

Offline

Sep 2010

63

Blue-Rei said:
I've made a new style to my list , well it should have a header pic on top of the list .. but it didn't went good , maybe the code was messed up or something .. idk .. ,, anyway it's the simplest style ever , nothing much to say .. but feedback plz
! :3

Nice though I don't like borders around the status, also you background isn't repeating properly :/

Check out my anime blog: http://otakutajio.tumblr.com/

Aug 15, 2011 3:24 PM

#4695

Rezurrekt

Offline

Dec 2010

2670

Blue-Rei said:
I've made a new style to my list , well it should have a header pic on top of the list .. but it didn't went good , maybe the code was messed up or something .. idk .. ,, anyway it's the simplest style ever , nothing much to say .. but feedback plz
! :3

I don't know if it's my browser but your headers aren't centered properly and yeah the background doesn't repeat very smoothly. It'd be nice to get a screenshot of what it looks like for you so we can see what you see

@tajio-kun, your list looks amazing. Love the color scheme and header

Aug 15, 2011 3:59 PM

#4696