Forum Settings
Forums

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

New
Mar 11, 2012 3:20 PM
#1

Offline
Feb 2010
11295
This layout is custom CSS. If you don't know how to install it, use the easy Beginner's Tutorial in this section:
http://myanimelist.net/forum/?topicid=419405

The design has a version for anime lists and another for manga lists. For more layouts check the full list of Premade Layouts:
http://myanimelist.net/forum/?topicid=318587[/b]


Click for a full preview!

The most futuristic layout ever! Its a very easy to navigate list with transitional hovers on the list with an amazingly unique top bar, you can see in this animated preview below (if you wanna add just the top bar, see the Bonus section at the bottom of the topic)

When I move my cursor on the top icons, they have this awesome animated drop down menu!


Customizing/differences between both versions!
There's an anime list version and manga list version. The only difference between the two are the backgrounds and the heading at the top. The three codes you need to change out the images are all conveniently at the top! There are also many notes we put in the code to customize the style and fonts. Here's some extra info for questions you may have:

Changing the heading: on the anime list it says My Anime List and the heading of the manga version it says My Manga List. This is a premade image that you can change out with your own logo or image with your name! The code with this image is under #list_surround.

Customizing the anime list version's background image and background color is easy, all the codes are near the top of the CSS. #inlineContent has a rendered image of Black Rock Shooter with a transparent background. The background color behind her is body and its just a solid color with no background. Change #inlineContent's background image to change the render. You can change the background color by changing the color after background under body way at the top of the code. By default the color is #B9B9B9. Change it to another HTML color, or named color like black. You can add a background to body behind the #inlineContent image too.

Get more renders here: http://myanimelist.net/forum/?topicid=400287

The icon-style toolbar is put into your layout by the very top line of CSS, so leave this alone. Check the bottom of the post for ways to change it.

Here's the code for the anime version of the layout (Black Rock shooter):




Below is the manga version, featuring Rei Ayanami!


Changing the manga list version background image is more traditional than changing the anime version. #inlineContent is blank, and body contains the background with the blue haired girl (Rei Ayanami). You can customize and mix it up as you please, like adding a render to #inlineContent.

Manga version code (Evangelion)




Change the icon-style toolbar!

Even tho the icon style toolbar in this layout is really cool, there's actually eight versions of it. You can even add the category links to it or switch the icons with colorful Touhou icons! You can get them all in this topic, all you need to do is change the import link (the very top line of the CSS) with one of the others:
http://myanimelist.net/forum/?topicid=449097


Add the icon-style top bar menu to any other list layout!
In addition to being able to change the icon style toolbar, you can add it to any layout with the above link too!

Here's an example of it on the TTGL style layout:





How to fix the icons to your page
This way, the icon style tool bar will stay with you when you scroll down the page. Just add the code to the bottom of you CSS edit box.

#mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered{
position: fixed !important;
}




Credit and thanks:
This layout's original code is given with permission from Kyouhansha. I heavily modified their original code to fit both premade themes for anime and manga lists and added notes, new images, links, and added codes to make it more customizable. Veriti added cross-browser compatibility and did a massive amount of organization/clean-up to the code to make it extremely accessible to users of all levels and browsers. Big thanks to both of you, this wouldn't be possible without both of you!
Shishio-kunNov 1, 2018 1:40 AM
Reply Disabled for Non-Club Members
Pages (2) [1] 2 »
Mar 11, 2012 4:35 PM
#2
Livin in the 90s

Offline
Jan 2011
75
Wow, that top bars amazing. Great work!!


Mar 11, 2012 6:00 PM
#3

Offline
Feb 2010
11295
LordSilen said:
Wow, that top bars amazing. Great work!!


Yes kyouhansha did a really good job on that.
Mar 11, 2012 7:01 PM
#4
Livin in the 90s

Offline
Jan 2011
75
How would I go about getting rid of the "All Anime" button? Then centering it over the list?


Mar 12, 2012 11:32 AM
#5

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


.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.

Edit: This is not complete, check two posts down for complete code.
Shishio-kunMar 12, 2012 12:52 PM
Mar 12, 2012 12:06 PM
#6

Offline
Nov 2011
304
Shishio-kun said:
LordSilen said:
How would I go about getting rid of the "All Anime" button? Then centering it over the list?


.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.

This will only work if All Anime is current category, no?
Mar 12, 2012 12:50 PM
#7

Offline
Feb 2010
11295

.status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
display:none;
}


You're right, there's like 4 other codes I used I forgot to add lol.
Mar 12, 2012 12:54 PM
#8
Livin in the 90s

Offline
Jan 2011
75
Woot! it works. Thanks!


Mar 12, 2012 2:08 PM
#9

Offline
Nov 2011
396
This looks awesome! He/She did a great job!
Mar 21, 2012 1:56 PM

Offline
Feb 2010
11295
I added a fix to this code for logged out users. People who used these codes before 3-21-12 may want to add this. Its been added to the originals in the first post since then.

#mal\_control\_strip {
background: transparent !important;
}
td#mal_cs_pic a img {
display: none;
}
#mal_cs_pic, #mal_cs_listinfo, #mal_cs_links {
border-right: 0 none !important;
}
Shishio-kunApr 25, 2012 6:10 PM
Mar 22, 2012 2:27 PM
Offline
Jan 2010
84
How to change the background color of the anime list?
Mar 23, 2012 1:02 AM

Offline
Feb 2010
11295
Kogarashi said:
How to change the background color of the anime list?


Look at body near the top, go to background and you'll see silver. This is the background color, change it to what you want!
Shishio-kunApr 25, 2012 6:11 PM
Mar 23, 2012 4:34 AM
Offline
Jan 2010
84
Thanks, Shishio-sama.
Mar 23, 2012 10:37 AM

Offline
Jan 2010
115
Kawaii deshou?

Love it.
Mar 23, 2012 10:59 AM

Offline
Nov 2011
304
Maybe code needs a little refactoring... Well, I'd say not a little: it's too browser-specific, filled with unnecessary selector and non-structured.
Mar 23, 2012 11:16 AM

Offline
Feb 2010
11295
What would you change about it?
Mar 23, 2012 11:34 AM

Offline
Nov 2011
304
Whatever -moz- parts (especially -moz-border-sizing, there is fucking standard border-sizing property!), selectors like this:
body #mal_cs_powered #search #searchBox:hover

Also I'd re-arranged the whole code to several parts and added a comments showing what is what, so people don't have ask where to change bg pic for instance.
Mar 23, 2012 8:10 PM

Offline
Feb 2010
11295
I added notes to the code. An Opera/Chrome/Safari patch would be nice for the transitions but I tried to add opera and webkit transition codes to -moz-transition: all 0.4s ease 0s; they didn't seem to take effect. Transition in other browsers seems weird, even though its the same value.
Shishio-kunMar 23, 2012 8:37 PM
Mar 23, 2012 9:04 PM

Offline
Nov 2011
304
It's better now.
That's probably because it is still too draft, so some specific properties should be added, not just all value.
Mar 23, 2012 9:43 PM

Offline
Feb 2010
11295
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.


Oh my. lol I'm not sure what to do then, maybe I can just give opera/chrome transition the same as your list so they're not totally missing out on transition.
Mar 23, 2012 10:12 PM

Offline
Nov 2011
304
I can try to tweak this at the next weekend when I'm done with all my tests.
I just don't wanna see 1/3 of MAL using FF-specific code lol
Mar 25, 2012 6:43 AM

Offline
Aug 2009
281
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
RodnessMar 25, 2012 9:17 AM
Mar 25, 2012 12:12 PM

Offline
Feb 2010
11295
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



Oh this is fantastic, I think it will be useful in the customize top bar thread too.
Mar 26, 2012 4:48 PM

Offline
Feb 2010
220
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".

I am using the code "as is" btw, and I also have that option selected in the "My List Settings" part of profile management. I have tried other list designs and the "Progress" column shows up just fine.

Can someone help me out?
Mar 26, 2012 5:30 PM

Offline
Feb 2010
11295
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?


You need to scroll down in the code and remove the display: none; from these two parts. They're about in the middle.

td.table_header:nth-of-type(5) {
border-color: transparent;
display: none;
}

td.td1:nth-of-type(5), td.td2:nth-of-type(5) {
border-color: transparent;
display: none;
}
Mar 26, 2012 5:32 PM

Offline
Feb 2010
11295
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.
Mar 26, 2012 6:03 PM

Offline
Feb 2010
220
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.


Thanks, it works like a charm now ;)
Apr 25, 2012 6:23 PM

Offline
Feb 2010
11295
These layout codes have been heavily updated:

broken images replaced/all images moved to more reliable place
the special effects now work in more browsers!
renders in anime list version will be easier to move
fonts throughout the list are easier to control and expanded on +
additional codes with notes for new options
more customizing notes
much better organization, unnecessary text removed

Special thanks Veriti for all contributing all that organization and cleanup to this update, and the cross-browser compatibility!
May 9, 2012 3:39 PM

Offline
Mar 2011
569
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.
Harems don't exist in America. If one guy is constantly surrounded by beautiful girls, then he's probably the gay friend.
May 11, 2012 7:05 AM

Offline
Mar 2012
34
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..
May 13, 2012 9:44 PM

Offline
Jul 2008
1513
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..

which animations are you talking about?
if it about the text-size increase find

delete the bold
May 14, 2012 2:07 AM

Offline
Jun 2009
707
Using the layout now. Thank you ^^
May 14, 2012 12:23 PM

Offline
Feb 2010
11295
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.


Remove

tr:hover td.td1, tr:hover td.td2

tr:hover [class^="td"]

and increase opacity, look for Row Options in your CSS, then find all lines with things like
background-color: rgba(72, 64, 87, 0.6);

the last number ( 0.6 in the example) is the opacity. You probably want 0.8 or so. 1 is opaque. .0 is completely transparent.

Centering the image:
http://myanimelist.net/forum/?topicid=419405&show=0#post1

How to adjust wallpaper tutorial.
Jun 1, 2012 3:37 AM

Offline
Apr 2012
181
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...
al_exsJun 2, 2012 11:19 PM
Jun 1, 2012 11:07 AM
Livin in the 90s

Offline
Jan 2011
75
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...


Wow you read my mind, just yesterday I was trying to accomplish something like that, but i see you beat me to it. When i switched out the old code with your code the "menu" button you added doesn't show and the "All Anime", "Currently Watching", etc.. remains where they were previously.
Am I missing something that should be added elsewhere?


Jun 1, 2012 5:32 PM

Offline
Apr 2012
181
LordSilen said:

Am I missing something that should be added elsewhere?


umm, maybe some code are missing or something.. cuz my manga list only have this in the style sheet:

@import url("http://dl.dropbox.com/u/61796201/css/source/menu.css") all;

*
{}

and it works, so, you can use the @import line or copy the whole code in the menu style sheet.
al_exsJun 2, 2012 11:22 PM
Jun 1, 2012 5:56 PM
Livin in the 90s

Offline
Jan 2011
75
Ahhh. Ok, thats what I was missing. It works now with the import code. Thanks! its awesome.


Jun 9, 2012 1:53 PM

Offline
Feb 2010
11295
This layouts been updated again to take away the font-size transition in non-Firefox (since its laggy), and to better support the other icon style toolbars including the one from AL_exs. Now its linked through an import link at the top of the CSS.
Jun 24, 2012 7:50 PM

Offline
May 2012
23
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.
Jun 25, 2012 2:55 AM

Offline
Feb 2010
11295
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.


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.
Jun 25, 2012 8:14 AM

Offline
May 2012
23
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.
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.
SoulfulJun 25, 2012 9:03 AM
Jun 25, 2012 12:41 PM

Offline
Feb 2010
11295
Soulful said:
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.
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.


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.
Jun 25, 2012 7:46 PM

Offline
May 2012
23
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.

I agree, so I'll leave the code as it is.
Jul 27, 2012 9:27 AM

Offline
Jul 2010
1852
been wanting to try this layout for a while now, but is the code a copy paste sort of thing or do you need to manually put it in to each of the drop down boxes? explained in tutorial
Angel_BeatsJul 27, 2012 9:40 AM

Aug 11, 2012 11:23 AM

Offline
Feb 2010
11295
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


Their original choice of red was a good choice.. anyhow you can't remove text from the copyright only modify its look, add text and change the color behind it.
Shishio-kunAug 12, 2012 9:19 AM
Aug 12, 2012 1:25 AM

Offline
Aug 2012
432
thanx for the code. this is my favorite layout so far, i like the color scheme, and of course the top bar is just amazing and look neat. i only changed the copyright text background to clear so its inconspicuous.
Lyndon_OngAug 12, 2012 2:52 AM
Aug 30, 2012 8:55 PM

Offline
Mar 2012
34
how i can get different styles from the boxed ones like borders shadows and colors. i tried to put a border around the view more buttons but the border applies on all clickable fonts in the entire list page.

i maybe asking too much but please bear with me. i'm reading css tutorial and just beginning to understand things about css.

http://i46.tinypic.com/2njecmd.jpg
Aug 30, 2012 9:37 PM

Offline
Nov 2011
304
@uwinaako
If you need selectors for what you've outlined, then
[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}

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)
Aug 30, 2012 10:48 PM

Offline
Mar 2012
34
VeriTi said:
@uwinaako
If you need selectors for what you've outlined, then
[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}

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)


tnx Veriti for these selectors.
Sep 27, 2012 10:33 PM

Offline
Jun 2012
669
Now mind you, I'm very, VERY new to this. Literally found this out earlier today, so sorry if I come off really noobish. So basically I want to change the silver background to a different picture... how do I go about doing that? This is my first time doing this sort of thing, so... yeah. Thanks!
Reply Disabled for Non-Club Members
Pages (2) [1] 2 »

More topics from this board

» [CSS - CLASSIC] Wishes of the heart ~ XXXholic layout by Hahaido

Shishio-kun - Dec 27, 2015

8 by Valerio_Lyndon »»
Apr 12, 7:34 PM

» [CSS-MODERN] ⭐️ Takana_No_Hana's Layouts

Shishio-kun - Jun 5, 2021

6 by NemuSanjou »»
Apr 9, 7:21 PM

» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )

Valerio_Lyndon - Apr 19, 2018

1204 by blickrella »»
Apr 9, 4:55 PM

» [MODERN - CSS] ⭐ Sailor Moon layout by 5cm

Shishio-kun - Sep 7, 2020

34 by Y3337 »»
Mar 31, 11:45 PM

» [BBCODE + VIDEO GUIDE] ⭐️ Full list of BBcodes and BBcode setups on MAL ( 1 2 3 4 )

Shishio-kun - Feb 3, 2012

158 by KeyiOs »»
Mar 28, 8:32 AM
It’s time to ditch the text file.
Keep track of your anime easily by creating your own list.
Sign Up Login