[CSS - CLASSIC] Futurisic premade list layout with Icon-style top bar!

LordSilen said:
Wow, that top bars amazing. Great work!!

LordSilen said:
How would I go about getting rid of the "All Anime" button? Then centering it over the list?

Shishio-kun said:


.status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected {
display: none !important;
}

The buttons will center automatically once you remove the all anime button.

Kogarashi said:
How to change the background color of the anime list?

VeriTi said:
It's better now.
That's probably because it is still too draft, so some specific properties should be added, not just all value.

Rodness said:
I cut out the top bar buttons (didn't see someone else do it), if people want to integrate it with other list designs (add to the first post?). I just love 'em, and the original list design, too, of course. Thanks a lot! :)

Anyway, here's the code which you just simply add to the bottom of your list:


I don't need credit for this 'cause I didn't create it. :P

Also, I'm not sure if everything in it is needed, but it works for me and I don't see any weird things using it together with my current list design.

Take a look at my list for a preview.

EDIT:
Still can't see all of the buttons when logged out. :S

Jonijonh said:
Hey, first off - great list design! ;)

I have a little (big) problem though - I can't seem to get the "Progress" column to show up in my Anime List. It has "Score", "Type" and "Rated" but not "Episodes / Progress".

Can someone help me out?

Shishio-kun said:
td.table_header:nth-of-type(4) {
border-radius: 0 0 0 0 !important;
}

Might want to add this to the bottom after removing those two lines of code.

uwinaako said:
how can i remove the animation effect when i hover on the list?? the black rock shooter one.. i love your layout, but i want to remove the animation..

itsthatguy said:
Any way that I can eliminate the highlighting effect when you scroll over a series?

Also, trying to figure out how to slightly increase the opacity and center the background image. I took the first part of the code from the manga list setup so I only had to worry about changing the background image and the rest came from the anime list setup.

al_exs said:
Hi, first of all, thank you for the code, I like the way icon-style top bar looks,

so, I made little modifications and add a new Icon("Menu") with the "All Anime", "Currently Watching", etc.. and it works in the manga list too.

and here is it in action in My Anime List

the code:


the minor changes are basically the fixed height of the displaying items(had 200px) and I change it to auto, and works better.

oh, I almost forgot, I fixed the icons to the corner, they don't scroll with the page...

LordSilen said:

Am I missing something that should be added elsewhere?

Soulful said:
How do I make my main background (the 1 under body) align centre and not align left because that's what its showing me. Or you can suggest an alternate background.
Also is black fade code compatible with this layout and if so how can I make it work so second background (with render(#inlineContent) is display.

Shishio-kun said:

No the black fade is not compatible, in a way, since it will take away the render. But there's a simple work around for all three.

That background looks like an elevator when you scroll down so its pretty cool, I would keep it.

Go to MAIN BACKGROUND part at the top. Find body, then background:. Change that line to this:

background: url("http://img94.imageshack.us/img94/4530/11thj.png") no-repeat fixed 0 0, url("http://img826.imageshack.us/img826/1097/freedatawallstagebackgr.jpg") repeat scroll center top transparent;

Now body has the two images and the elevator is centered. One is the background you added the other is the render. After that, go down to the next section which is right under the body section. Its labeled SECOND BACKGROUND. Remove that whole section. Don't touch the TITLE section under it. Its separated by spaces.

Now you can add the black fade add-on to the bottom. If it doesn't work out or if there something you still wanna change when done let me know here I tested it on your list tho so it should work ok.

Soulful said:
Yes everything is working thank you very much! (^o^)／
Can u view my anime list through internet explorer because for me it hangs or crashes.

Shishio-kun said:

Yeah it crashes for me as well in IE9 but looks perfect in other browsers. But I wouldn't worry about it. IE has been the shittiest browser for years and not a lot of people use it esp when they hear about Chrome of FF. 20% of the overall internet does use it but thats not a representation of a younger/tech-savy demographic like on MAL. Personally I think only like 2% of MAL uses IE.

But if you want to attempt a fix, I would take out the top two imports you added.

shmirkies said:
shi-shio kun, how can you remove the red bar at the bottom? it doesnt look good at all, n doesnt match with the theme. its the copyright. if i you cant remove it hence its copyright but can i change the color?

shmirkies said:
nevermind i remove the red bar, but the text copyright is still there

[class^="td"]:nth-child(1){background:red}
[class^="td"] div a:first-child{background:blue}
[class^="td"] div a:last-child{background:cyan}
.animetitle{background:black}
[class^="td"]:nth-child(3){background:white}
.animetitle + small {background:magenta}
[class^="td"]:nth-child(4){background:purple}
[class^="td"]:nth-child(5){background:green}
[id^="tagLinks"]{background: orange}
[id^="tagChangeRow"]{background:yellow}

VeriTi said:
@uwinaako
If you need selectors for what you've outlined, then

This is the deepest way you can select text so that other user sees it (so you can't just select text in first cell without selecting cell itself)