List Design Updated - Check It Out

Mahou☆Shoujo

Offline

Apr 2011

1276

I gave up manually coding all images and finally wrote the script that automatically generates css file ^^

Mar 27, 2012 12:11 PM

#4902

Offline

Jul 2010

1449

Hi there guys^^ I've decided to finally change my list design, which I have since January 2011, and I wanted to try out something a bit more complex than I had, adding an image above a part of the list. But unfortunately, I can't seem to get around with it. Here's what I got so far:

#inlineContent

{

display: block !important

background-image: url(insert url here)!important;

background-position: center !important;

background-repeat: no-repeat !important;

position: fixed !important;

top:0px !important;

width:1800px !important;

height:200px !important;

z-index: 50 !important;

}

The problem is the fact that I have no idea what I'm doing wrong since... well, nothing shows up at all, so I must be doing a lot wrong. So I'm here to request your help guys^^ Can anyone tell me how to do this, please?

hontobakaMar 27, 2012 12:20 PM

Mar 27, 2012 12:32 PM

#4903

Offline

Mar 2009

2096

@Dusk252:

You forgot a ; after display:block!important.

Mar 27, 2012 12:51 PM

#4904

Offline

Jul 2010

1449

I can't believe that was the problem... I'm totally stupid, I looked at this so many times, checked if the words were well spelled... How the heck did I miss that?

Well, thank you very much anyway^^

Oh, and I have another problem now. The image has a transparent part, but I can't click through. Do you now if it is possible to allow that or not?

Also, one more question if you don't mind: can I add two images instead of just one? If so, how could I do that?

hontobakaMar 27, 2012 12:58 PM

Mar 27, 2012 1:38 PM

#4905

Offline

Mar 2009

2096

Nope, you can't click through the transparent part. It's like having saran wrap over half your plate of food - you can still see the food but can't touch it where the wrap covers it. XD

Yeah, you can add two images.

background: url(insert link here) fixed bottom left no-repeat, url(insert link here) fixed bottom right no-repeat;

or

background-image: url(insert link here);
background-image: url(insert 2nd link here);
(and all the other attributes, like position and such, spaced out in individual lines as you did)

Mar 27, 2012 1:42 PM

#4906

Offline

Jul 2010

1449

I see... Then I'll have to change the concept due to that thing issue with the transparency.
Thanks a lot, that was really helpful.

Mar 28, 2012 1:00 PM

#4907

Offline

Jul 2010

1449

List finally updated! It's a Penguindrum theme this time.

After all it seems you can allow click-through. A bit of research got me to a property I'd never heard about - "pointer-events". By setting its value to "none", click and hover events will go through to the underlaying elements. Of course that means I can click through the whole image rather than simply the transparent part, but it serves my purpose.

Any feedback and/or suggestions for improvement are appreciated!

(I'd also like some suggestions regarding the header titles. I'm actually content with those but "Precious Memories" doesn't exactly fit as, while it has to do with the theme, it's not any kind of actual term used in the anime. I thought about "Hole in the Sky", which is, according to Sanetoshi, the name of the weird library in which Himari was shown her memories, but it's too much of an abstract name to make any kind of sense to someone who hasn't watched the series, and somewhat of an obscure reference even to those who did. But I'm not sure... Should I use it?)

Mar 28, 2012 1:18 PM

#4908

Offline

Mar 2009

2096

Oh, cool! *___* That click-through ability is a nice discovery. :D I like the design and color scheme too. The header titles are ok to me.

But there is something odd here: The search bar stays fixed, instead of moving as you scroll down. O.o Also, the thing at the bottom (is it Grand Totals?) ... is hidden by the overlay image, so you can't read it well. ^^" http://i.imgur.com/dV890.png

Mar 28, 2012 1:38 PM

#4909

Offline

Jul 2010

1449

Nice^^ Glad you like it! Thanks a lot for your help earlier too^^

And thanks for mentioning those faults. I hadn't noticed the search thing. It's fixed now. But that other issue strikes me as weired. Not only does it not happen in my browser, but there's a huge amount of content there to be entirely hidden by the overlay image. It's both the Grand Totals and the copyright after that, as you can see here.

hontobakaMar 28, 2012 1:44 PM

Mar 28, 2012 2:09 PM

#4910

Lirina

Offline

Feb 2008

685

Mine is finally finished: http://myanimelist.net/animelist/Lirina&status=1&order=0

Need to make a new banner though because I suddenly changed my name ...

Mar 30, 2012 1:57 AM

#4911

Jujika

Offline

Feb 2011

291

Updated mine. There's some bit of a problem though. Notice at the right side it only says 'Viewing 's animelist.' I can't seem to get it to display my username. welp

http://myanimelist.net/animelist/wetpantsu

Mar 30, 2012 7:11 AM

#4912

Mahou☆Shoujo

Offline

Apr 2011

1276

@wetpantsu

It's because of this part

#mal_cs_pic, #mal_cs_listinfo, #mal_cs_listinfo div, #mal_cs_links, #mal_cs_links div, #mal_cs_otherlinks a, #mal_cs_powered img {
display: none !important;
}

replace bold part with something like this:

#mal_cs_otherlinks div:last-of-type a

Mar 30, 2012 9:47 AM

#4913

Jujika

Offline

Feb 2011

291

-Akarin- said:
#mal_cs_otherlinks div:last-of-type a

Wow, we could do that? Cool! xD Thanks a lot!

Mar 30, 2012 4:46 PM

#4914

Channeru

Offline

Mar 2010

Started this design February 3rd,
have been working on it every other week(end) for about two months now.

ChanneruMar 30, 2012 4:50 PM

Mar 31, 2012 12:48 PM

#4915

cyruz

Anime DB Admin

BACK FOR MORE?

Offline

Jan 2007

12683

Me likey, nice work. Seeing the score somewhere would be cool but it's a nice looking nonetheless.

staff.applications　▼　
guidelines.faq　▼　

report.abuse　▼　

thx.skittles　▼　
thx.kina　▼　

[H+] ³　▼　

Apr 1, 2012 6:00 PM

#4916

Mahou☆Shoujo

Offline

Apr 2011

1276

I'm bored with my previous design and created the new one. Tried to make it minimalistic and beautiful ^^

Apr 1, 2012 11:27 PM

#4917

Nythe

Offline

Nov 2010

163

@-Akarin-, gooooooorgeous! Lovely design, I love the smoothly animated buttons, too.

Apr 2, 2012 4:04 AM

#4918

Mahou☆Shoujo

Offline

Apr 2011

1276

@Nythe, thanks ^^

I think about adding anime thumbnails to list or leaving everything as it is now... Really don't know about this.
Maybe I'll add them, and if they won't look good enough then I'll delete them.

Apr 2, 2012 11:03 AM

#4919

cyruz

Anime DB Admin

BACK FOR MORE?

Offline

Jan 2007

12683

-Akarin- said:
I'm bored with my previous design and created the new one. Tried to make it minimalistic and beautiful ^^

Holy crap! Is that one for sale? I'd love to use that one at some point. Feel like I've been using my rather dark one for too long.

[edit]: And I just noticed my list background doesn't work anymore.

cyruzApr 2, 2012 11:07 AM

staff.applications　▼　
guidelines.faq　▼　

report.abuse　▼　

thx.skittles　▼　
thx.kina　▼　

[H+] ³　▼　

Apr 2, 2012 2:25 PM

#4920

Offline

Mar 2009

2096

-Akarin- : It looks cool in Firefox.... but a bit less cool in Chrome xD
screenshot - http://i.imgur.com/N5zEH.png

And....I also updated both lists recently. ^^"
Both of them work best in Chrome (and IE, surprisingly o_o) and Firefox.
Links/screenshots:

Apr 2, 2012 2:31 PM

#4921

Mahou☆Shoujo

Offline

Apr 2011

1276

@Rukayex
it's an old version, you should just update the cache :)
---

Looks great!
But maybe you should do something with table widths and heights?
http://i.imgur.com/vdS6G.png

Apr 2, 2012 2:46 PM

#4922

-LU-

Offline

Sep 2009

1357

-Akarin- said:
I'm bored with my previous design and created the new one. Tried to make it minimalistic and beautiful ^^

Whoa! Such a clean and neat design!

@Rukayex
Lovely <3 Esp the Miku one

Apr 2, 2012 2:52 PM

#4923

ainthemix

Offline

Feb 2008

6186

Ruka-chan's lists... Best, as usual.

Apr 2, 2012 5:29 PM

#4924

Offline

Mar 2009

2096

Thanks for the comments guys! o/

@-Akarin-: Are you on Mac / using Safari? I heard from someone else that apparently the font gets... very large for some reason. xD Thanks for pointing it out. I will try to fix it soon. @_@

Apr 2, 2012 5:35 PM

#4925

Mahou☆Shoujo

Offline

Apr 2011

1276

Rukayex said:
@-Akarin-: Are you on Mac / using Safari?

no, I'm using Chrome on win7 :)
Opera shows the same picture as well.

font-family: 'Blue Highway', Helvetica, Arial

I guess it's because not everyone has these fonts except Arial ;)

AkarinApr 2, 2012 5:38 PM

Apr 4, 2012 3:11 PM

#4926

Mahou☆Shoujo

Offline

Apr 2011

1276

@LIDocain
No, I don't appreciate you using my css...
Why don't you try to make your own design?

Apr 5, 2012 11:11 AM

#4927

titaniachkt

Offline

Jan 2009

338

-Akarin- said:

I guess it's because not everyone has these fonts except Arial ;)

Your title bars look great Akarin

What happens if you use a font someone doesn't have installed?(Using an alternate font as well)
Does it display a default text instead?

Rukayex said:

And....I also updated both lists recently. ^^"

Love the anime list theme,Ruka

Manga Sorted By Theme Anime Sorted By Theme

Apr 5, 2012 11:24 AM

#4928

Mahou☆Shoujo

Offline

Apr 2011

1276

titaniachkt said:

What happens if you use a font someone doesn't have installed?(Using an alternate font as well)
Does it display a default text instead?

thanks ^^.

yes, it'll be changed to default font.
by the way, you can use the @font-face tags in css to allow user download fonts that he hasn't installed.

AkarinApr 5, 2012 11:38 AM

Apr 5, 2012 12:07 PM

#4929

titaniachkt

Offline

Jan 2009

338

Sounds good
Time to learn css it seems

Manga Sorted By Theme Anime Sorted By Theme

Apr 7, 2012 5:15 AM

#4930

Tithen-Firion

Offline

Mar 2011

@1NZ3RU: Another great list with images. I always wanted to make one. You took image urls using some script, right?

@-Akarin-: So... clean. I like this paper-like list.

@Rukayex: I love it. Especially anime list.

I'll make a new one too. Somewhen...

May 6, 2012 9:07 PM

#4931

Davyu

Offline

Dec 2009

531

Just updated my list. Just stuck with my old style and changed the headers + background =P.

May 7, 2012 8:16 PM

#4932

Mimi_Taylor

Offline

Mar 2008

483

@Davyu: I love your category headers! *_* Amazing job. I think the wallpaper might be a little too busy, but it's a very attractive list overall.

Anime List | Manga List

May 8, 2012 7:04 PM

#4933

Davyu

Offline

Dec 2009

531

Thanks! =P. Yea I agree, the wallpaper is kinda busy. I was going to go with something more simple, but couldn't find anything =(.

May 10, 2012 2:28 AM

#4934

Eucliwood

Offline

Mar 2011

104

Just made my very first customized list on MAL last week! Always wanted to make one cause I saw lots of amazing ones around x) Might not look as pro as the other's such as cyruz etc ^^'' (cause its my first time) but i tried my best. Planning to change the category images when i find better images. Feel free to give me your opinions!

May 10, 2012 3:17 AM

#4935

GuZ

Offline

Jan 2012

613

Some of your lists are absolutely amazing! Good job!

I'm too dumb to do anything fancy so I'm using the boring standard style editor.
Have pretty long tags, so it's easier to keep things simple.

May 10, 2012 9:03 AM

#4936

Maylay

Offline

Mar 2012

858

To my list isn't necessary to go. List doesn't deserve it. =P And here can see.
↓

Actually, everything is standard.
In fact, you are updated your lists so beautiful. I don't even know how.

May 12, 2012 4:20 AM

#4937

Allenwalker1

Offline

May 2012

Hello I was wondering if someone could help me

I've seen loads of amazing animelist and was wondering if there are any pre-made layouts where the header with image covers (currently watching,on-hold,dropped, etc). If not how do I know what sizes I require.

example

http://www.freeimagehosting.net/t2l4h

May 12, 2012 12:05 PM

#4938

Emotocon

Offline

Jun 2010

121

Allenwalker1 said:
Hello I was wondering if someone could help me

I've seen loads of amazing animelist and was wondering if there are any pre-made layouts where the header with image covers (currently watching,on-hold,dropped, etc). If not how do I know what sizes I require.

example

http://www.freeimagehosting.net/t2l4h

Hey, you can take a look at my list here and I basically did what you're looking to do. I used a sample list layout and created my own headers/pictures for it. It required no CSS/HTML knowledge; I just replaced the original pictures with ones that I wanted in the code.

I have tried in vain to find the original thread here in the MAL forums that had the exact template that I used. But, I came across this one which looks like it has a lot of templates to choose from. I strongly suggest you go through the Rules and Common Links thread to find some good resources.

Best of luck!

Edit: Oh, and when you actually decide on a template. To figure out the exact image dimensions, you'll most likely have to look in the code, once you find an image (usually ends in .jpg or .png), copy that link, paste it into firefox and hit enter. You should now see whatever image that was in the code. Right click -> 'View Image info', this will give you the exact dimensions.

EmotoconMay 12, 2012 12:09 PM

May 13, 2012 10:42 PM

#4939

Offline

Dec 2010

2670

Re-did my anime list...

http://myanimelist.net/animelist/DesolateOne

I tried to go for a simple, sleek look.

May 14, 2012 9:26 AM

#4940

ainthemix

Offline

Feb 2008

6186

DesolateOne said:
Re-did my anime list...

http://myanimelist.net/animelist/DesolateOne

I tried to go for a simple, sleek look.

I like it. Simplicity is the best.
But drop shadow seems cut out on the end. :/

May 14, 2012 8:07 PM

#4941

Offline

Dec 2010

2670

You're right. Gotta fix that. Thanks.

May 14, 2012 10:01 PM

#4942

sisgood

Offline

Feb 2012

580

I re-did mine with major help from Shishio's Custom Lists and Profiles (CSS + BBcode help) with Image sharing. It's a public club here on MAL.
I found CSS codes on there that I didn't find after hours of searching on the standard search sites. Oh, and they also have some pre-made layouts for Allenwalker1
To get to my list, check my sig.

May 14, 2012 11:38 PM

#4943

Offline

Dec 2010

2670

Well hm the drop shadow being cut off seems to be an illusion caused by my background color. Meh. I decided to just leave it as it is. Also, I made it my manga list instead of my anime one. I used my original style for the anime list.

http://myanimelist.net/animelist/DesolateOne
http://myanimelist.net/mangalist/DesolateOne

@sisgood Your signature doesn't take me to your list. I checked out your list nonetheless and I like it. Only advice I have is use a different font and font-color. It's a bit hard to see because of the background you used and the sakura animation.

May 15, 2012 9:35 AM

#4944

sisgood

Offline

Feb 2012

580

So that little button with Natsume Takashi and Madara sitting on it doesn't take you to my list? O_o it works fine for me.

May 15, 2012 12:36 PM

#4945

Tithen-Firion

Offline

Mar 2011

Updated mine:
http://myanimelist.net/animelist/Tithen-Firion
It's a rainbow! :D And polish headers. ^_^
But I had no idea for MAL bar, so it's ugly. :/

May 15, 2012 2:21 PM

#4946

Offline

Dec 2010

2670

@sisgood Ah that's why. I was clicking on the tracker the whole time. It works :O

@Tithen-Firion Wow! That's pretty cool. However, I think you could put a lot more work into it and make it a very beautiful list. Try out a brighter background :3.

May 15, 2012 2:39 PM

#4947

Tithen-Firion

Offline

Mar 2011

@DesolateOne: I don't have much time and ideas, so I will leave it as it is now. And I like plain lists (chech my manga one). BTW, my bg image is brighter than your bg. ;P

May 15, 2012 5:20 PM

#4948