[CSS - CLASSIC] Customizing the top bar with backgrounds and positioning + unique top bar designs for you!

Offline

Nov 2011

304

Today I've been tweaking my top bar, and came up with this -- let me call it Tengen Toppa TopBar Redux

This will change look of links & elements within bar reducing its height almost twice and making it look cooler. (screen)

It won't change positioning and styling of the whole bar thing, so it can be used in combination with any positioning code in first post.

code (this was compressed):

code (original, this has some comments):

@import codes -- use only one of them; I also don't guarantee 100% uptime so it may suddenly disappear for some time

Contact me if you have any suggestions on this or if you find a bug.

UPD: Fixed my own stupid mistake -_- This should be okay even in IE9 now.

VeriTiFeb 1, 2012 12:46 PM

Feb 1, 2012 12:13 PM

Offline

Feb 2010

11293

This looks great on your own list but added to any premade layout from here (or just in the css in general) the bar comes out like this for me (Firefox/Win7):

http://i43.tinypic.com/14lt2u1.jpg

Also, don't use #mal_control_strip for public codes cuz it gets blocked here for most people who use custom CSS- they have to use #mal\_control\_strip. But even with that change, it still comes out as in the pic and needs much adjustments.

Feb 1, 2012 12:34 PM

Offline

Nov 2011

304

Thanks for quick response! It should be fixed now (it was quite a mindf**k though). I'll post @import links in a few minutes

Feb 2, 2012 8:23 AM

Offline

Feb 2010

11293

VeriTi said:
Thanks for quick response! It should be fixed now (it was quite a mindf**k though). I'll post @import links in a few minutes

It works great now!

Feb 8, 2012 4:58 PM

Offline

Jan 2010

Great tutorial, is really helpful. I have a question, though.
What would you do to change the link that takes you to the manga list?

If I use “#mal_cs_links a” it will change others links as well.

Feb 8, 2012 6:53 PM

Offline

Feb 2010

11293

Ushioo said:
Great tutorial, is really helpful. I have a question, though.
What would you do to change the link that takes you to the manga list?

If I use “#mal_cs_links a” it will change others links as well.

Thanks for the compliment! I wouldn't be able to compile this info so well without all the feedback and fellow designers I learn from too.

Use this, not sure if you need !important tags everywhere but I do it out of habit for anything involving the menu bar at this point.

#mal_cs_links div:first-of-type a:first-of-type
{color: red !important;
background: cyan !important;
}

#mal_cs_links div:first-of-type a:last-of-type
{color: gold !important;
background: violet !important;
}

#mal_cs_links div:last-of-type a:first-of-type
{color: green !important;
background: white !important;
}

#mal_cs_links div:last-of-type a:last-of-type
{color: blue !important;
background: yellow !important;
}

Shishio-kunFeb 8, 2012 6:58 PM

Feb 8, 2012 7:52 PM

Offline

Nov 2011

304

Just in this case you don't need !important because [id] + [element] + [element] gets more priority than [id] + [element] they have

Alternatively, you can use attribute selector:

#mal_cs_links a[href*="/mangalist/"]{/*code -- you may have to use !important there*/}

VeriTiFeb 8, 2012 7:58 PM

Feb 9, 2012 5:48 AM

Offline

Feb 2010

11293

VeriTi said:

Alternatively, you can use attribute selector:

<pre>#mal_cs_links a[href*="/mangalist/"]{/*code -- you may have to use !important there*/}

Oh wow when I first started here I tried to use a[href] on individual links like these but it didn't work for me; its because I didn't add to the front #mal_cs_links! lol well you learn something new everyday. This should improve future updates alot, thanks. I gave up on using href, just figured it was blocked somehow.

Feb 9, 2012 7:18 AM

#10

Offline

Feb 2010

11293

Here's a new premade code I'm coming up with thanks to Veritas's tip to customize the top bar fully, it will probably need some fixing tho and be looked at from other accounts. I also forgot people who aren't logged in, I think they mainly see MAL CS Pic or something but i have to go in a bit-

/*
TOP MENU BAR FULL CUSTOMIZATION
*/
#mal_cs_listinfo {
background:teal !important;
}
#mal_cs_listinfo a {
background:yellow !important;
color:yellowGreen !important;
}
#mal_cs_listinfo a strong {
color:red;
background: blue;
}
#mal_cs_links {
background: orange;
}
#mal_cs_otherlinks {
background: blue;
}
#mal_cs_otherlinks strong {
background:red !important;
}
#mal_cs_otherlinks strong a {
background:black !important;
color:cyan !important;
}
#mal_cs_powered {
background:cyan !important;
}
#mal_cs_powered a {
background:yellow !important;
}
#mal_cs_powered img {
}
#mal_cs_powered #search {
background:teal !important;
}
#searchListButton {
background:violet !important;
}

#mal_cs_links div:first-of-type a:first-of-type
{color: blue !important;
background: cyan !important;
}

#mal_cs_links div:first-of-type a:last-of-type
{color: gold !important;
background: purple !important;
}

#mal_cs_links div:last-of-type a:first-of-type
{color: green !important;
background: white !important;
}

#mal_cs_links div:last-of-type a:last-of-type
{color: red !important;
background: silver !important;
}

#mal_cs_otherlinks a[href="http://myanimelist.net/history/Shishio-kun"]{
color: red !important;
background: teal !important;
}

#mal_cs_otherlinks a[href="http://myanimelist.net/forum/"]{
color: orange !important;
background: yellow !important;
}

#mal_cs_otherlinks a[href="http://myanimelist.net/panel.php?go=export"]{
color: blue !important;
background: green !important;
}

#mal_cs_otherlinks a[href="http://myanimelist.net/profile/shishio-kun"]{
color: grey !important;
background: orange;
}

#mal_cs_otherlinks a {
color: yellow !important;
background: violet !important;
}

#mal_cs_otherlinks div:last-of-type a:first-of-type{
color: silver !important;
background: brown !important;
}

#mal_cs_otherlinks span{
background: orange;}

#mal_cs_otherlinks div:last-of-type{
background: purple !important;
color: yellow;}

Feb 9, 2012 8:01 AM

#11

Offline

Nov 2011

304

#mal_cs_otherlinks a[href="http://myanimelist.net/history/Shishio-kun"]{
color: red !important;
background: teal !important;
}

/* ... */

#mal_cs_otherlinks a[href="http://myanimelist.net/profile/shishio-kun"]{
color: grey !important;
background: orange;
}

doing it wrong, m8

#mal_cs_otherlinks a[href*="/history/"]{/*...*/}

#mal_cs_otherlinks a[href*="/profile/"]{/*...*/}

The asterisks are cool. My bottom bar is made using this kind of selector.

Feb 9, 2012 8:13 AM

#12

Offline

Feb 2010

11293

Oh ok, do I need the slashes tho for the properties? Also does setting them up this way with asterisks work in the older browsers?

Shishio-kunFeb 9, 2012 8:18 AM

Feb 9, 2012 8:44 AM

#13

Offline

Nov 2011

304

I know that it will work in FF3.6 & Opera 10.10 (maybe earlier) & IE8.

Feb 10, 2012 1:20 PM

#14

Offline

Jan 2010

Shishio-kun said:

Thanks for the compliment! I wouldn't be able to compile this info so well without all the feedback and fellow designers I learn from too.

Use this, not sure if you need !important tags everywhere but I do it out of habit for anything involving the menu bar at this point.

#mal_cs_links div:first-of-type a:first-of-type
{color: red !important;
background: cyan !important;
}

#mal_cs_links div:first-of-type a:last-of-type
{color: gold !important;
background: violet !important;
}

#mal_cs_links div:last-of-type a:first-of-type
{color: green !important;
background: white !important;
}

#mal_cs_links div:last-of-type a:last-of-type
{color: blue !important;
background: yellow !important;
}

That did the trick, thank you a lot.
I really appreciate it.

Thank you VeriTi as well.

Feb 10, 2012 3:33 PM

#15

Offline

Jan 2010

Ahh, please don’t curse me, but I’m having yet another problem.

I’ve change the code a little and this is what is happening:

There’s a way to make the font disappear, or something similar?

... Sorry!!

Feb 10, 2012 3:48 PM

#16

Offline

Feb 2010

11293

Ushioo said:
Ahh, please don’t curse me, but I’m having yet another problem.

I’ve change the code a little and this is what is happening:

There’s a way to make the font disappear, or something similar?

... Sorry!!

Its no problem at all I don't mind at all, more posts the better. Is there a reason you got the font set to 1px? If you were trying to make it small you can set it to 0px, or 0pt. You can also the color to the color "transparent" or the same as the background to make it clear.

Feb 10, 2012 3:55 PM

#17

Offline

Feb 2010

11293

Forgot to say- its these three codes near the top, just set their font-sizes or colors to the stuff I said. Let me know if it works for you.

#mal_cs_links div:first-of-type a:last-of-type,
#mal_cs_links div:first-of-type a:first-of-type,
#mal_cs_links div:last-of-type a:first-of-type

Feb 11, 2012 4:51 AM

#18

Offline

Jan 2010

Shishio-kun said:

Ushioo said:
Ahh, please don’t curse me, but I’m having yet another problem.

I’ve change the code a little and this is what is happening:

There’s a way to make the font disappear, or something similar?

... Sorry!!

Ohh, so sweat.

Actually, I did set it in 1px cause when I’ve tried to put it in 0Px this happened:

So 1px seems better somehow.
But I was editing my code and it seems that the problem is the text shadow that I was using in the links (a, a:visited), coz when I’ve took it out the small text did disappear (using 0px as well).

Thank you again for the help. =)

Feb 11, 2012 5:56 PM

#19

Offline

Feb 2010

11293

Np and good! Your layout is looking good. So the text shadow of a, a:visited was making that weird effect even after the font was at 0. I didn't know that could happen, cuz I have never tried text shadow lol. Its good you posted so I know for the future that can happen. What exactly are you using it for anyhow?

Feb 12, 2012 8:49 AM

#20

Offline

Jan 2010

@Shishio:

Communication Breakdown!!!

But seriously, I didn’t quite get what did mean there. Were you talking about the text shadows? If so, I was just messing whit some things I found in Css3 site, and also, I did use it in the Aria List and like the result.
But my Current list is far from be done, so I probably will mess with it some more.

Btw, I'm using these codes bellow to customize the bar menu, they are the view you get when you’re not log in. You probably know about then, but if anyone found them helpful:

#mal_cs_otherlinks a[href="http://myanimelist.net/login.php"]{
color: red !important;
}

#mal_cs_otherlinks a[href="http://myanimelist.net/register.php"]{
color: black !important;
}

#mal_cs_otherlinks a[href="http://myanimelist.net/modules.php?go=faq"]{
color: blue !important;
}

Feb 12, 2012 10:23 AM

#21

Offline

Feb 2010

11293

Oh thats what I was asking about, I looked into text shadow its interesting maybe worth adding to something here.

I was going to look into those codes thanks! This saves some trouble. I'm pretty sure these old style HREF codes work in older browsers too. Customizing the entire bar for as many people as possible is such a pain as it looks different to so many people.

Feb 18, 2012 5:07 AM

#22

missmotoko

Offline

Aug 2011

UPDATE:

Ok. I think I finally figured this thing out. I've got my top-bar almost how I wanted it. Took me awhile to learn that you have to add new "properties" into already existing code "rules"; not to add the same rule when one is already there, just edit it...or something like.

Props to Miketsukami for that little piece of important info. All pointers are appreciated.

Still don't have clue as to how Firebug works though. Save that for another day.
--------------------------------------------------------------------------------------------------------------------------
Original message posted earlier:

I'm having some trouble...again. (>_<)*

I'm trying to make the top bar transparent, fixed to the top and add surrounding to keep it from overlapping with my list. So... this is my issue:

I'm using Firebug 10.0, well attempting/trying to anyway. Adding the code/new rule isn't a problem. All the changes I want, take place. Only, I don't know how to save it, for lack of a better word. Because once I leave MAL page, the changes revert back to normal, like I never added the codes at all.

And when I try adding the codes into your pre-made, beginners code in the "advanced syle editor", nothing changes. I don't know what I'm doing wrong there.

Help me. Please?

missmotokoFeb 18, 2012 8:44 AM

Feb 18, 2012 5:58 AM

#23

Miketsukami-kun

Offline

Sep 2011

235

missmotoko said:
I'm having some trouble...again. (>_<)*

I'm trying to make the top bar transparent, fixed to the top and add surrounding to keep it from overlapping with my list. So... this is my issue:

I'm using Firebug 10.0, well attempting/trying to anyway. Adding the code/new rule isn't a problem. All the changes I want, take place. Only, I don't know how to save it, for lack of a better word. Because once I leave MAL page, the changes revert back to normal, like I never added the codes at all.

And when I try adding the codes into your pre-made, beginners code in the "advanced syle editor", nothing changes. I don't know what I'm doing wrong there.

I'm new to CSS so I may not be of any help but when you add the codes you wanted to a pre-made layout have you removed the part you wanted to change? For example if you you change the codes on #list_surround {...} then you should remove that part from de list and add your moficated #list_surround {...} the same goes to the top bar if you want to change then remove the previous top bar codes before add your on costomised codes.
Btw the reason your page went back to normal is because firebug is just to see the changes on real time it can't really change it, so after you're done you should copy your codes and instal them on "advanced syle editor".

Miketsukami-kunFeb 18, 2012 6:07 AM

Feb 18, 2012 7:10 AM

#24

missmotoko

Offline

Aug 2011

@Miketsukami...
UPDATE:
I figured out how to do it...sort of. Firebug is still tricky however. THANKS for your help. (^-^)
_________________________________________________________________________________
Original message:

Oooooooh, I didn't know that about Firebug. That's definitely something I need to know. THANK YOU!

Even though I'm reeeeeeeeally struggling with this whole CSS-thing...it's addictive. Like trying to beat a game or something. Anyway...*giggles*

I'll try your suggestion about removing already existing part of the pre-made code. We'll see what happens and "thanks", again. ♥

missmotokoFeb 18, 2012 8:49 AM

Feb 18, 2012 8:50 PM

#25

Offline

Feb 2010

11293

Updating with complete top bar customization, includes all the codes for your own view of the bar, other users view, and even the view for people who aren't logged in. It normally looks different to all three types of people.

/*
TOP MENU BAR FULL CUSTOMIZATION
I split the bar into sections, use the colors to identify what you're customizing on the layout when you edit and look at it.
REMEMBER: the top bar looks different to the owner of the list looking at their own list, and different to users logged who aren't the owner.
Thirdly, it looks different to people not logged in. Some parts don't even appear to users not logged in.
But all the codes for customizing it for all three types are featured below!

FIRST PART: "USERNAME, LOGOUT"
The first section below is the top left part featuring your user name, a user sees it when they're logged in.
It won't appear to people not logged in.
*/

#mal_cs_listinfo {
background:green !important;
}
#mal_cs_listinfo a {
background:pink !important;
color: blue !important;
}
#mal_cs_listinfo a strong {
color:red;
background: blue;
}

/*
SECOND PART: "ADD TO LIST, HOME, ANIME LIST, MANGA LIST"
The seond part only users logged in see.
It looks the same to the owner of the list and to a user who's not the owner of the list but logged in.
It won't appear to people not logged in.
*/

#mal_cs_links {
background: orange;
}
#mal_cs_links div:first-of-type a:first-of-type
{color: blue !important;
background: cyan !important;
}
#mal_cs_links div:first-of-type a:last-of-type
{color: gold !important;
background: purple !important;
}
#mal_cs_links div:last-of-type a:first-of-type
{color: green !important;
background: white !important;
}
#mal_cs_links div:last-of-type a:last-of-type
{color: red !important;
background: silver !important;
}

/*
THIRD PART OF BAR "YOU ARE VIEWING YOUR/USERNAME'S LIST"
Appears very different depending on if you're logged in or not and if you're the owner of the list,
but logged-out people see this part. But all the codes for those different views are included below.
There are two parts in the codes below that say my user name "Shishio-kun"-
you need to replace that with your own exact username.
*/
#mal_cs_otherlinks {
background: blue;
}
#mal_cs_otherlinks strong {
background:red !important;
}
#mal_cs_otherlinks a[href="http://myanimelist.net/history/Shishio-kun"]{
color: red !important;
background: teal !important;
}
#mal_cs_otherlinks a[href="http://myanimelist.net/forum/"]{
color: orange !important;
background: yellow !important;
}
#mal_cs_otherlinks a[href="http://myanimelist.net/panel.php?go=export"]{
color: blue !important;
background: green !important;
}
#mal_cs_otherlinks a[href="http://myanimelist.net/profile/Shishio-kun"] {
background: yellow !important;
color: green !important;
}
#mal_cs_otherlinks a {
color: yellow !important;
background: violet !important;
}
#mal_cs_otherlinks div:last-of-type a:first-of-type{
color: silver !important;
background: brown !important;
}
#mal_cs_otherlinks span{
background: orange;
}
#mal_cs_otherlinks a[href="http://myanimelist.net/modules.php?go=faq"]{
color: white !important;
background: black !important;
}

/*
FAR RIGHT-SIDE PANEL "POWERED BY MYANIMELIST.NET"
Features search, looks the same to all users logged in or not.
*/
#mal_cs_powered {
background:cyan !important;
}
#mal_cs_powered a {
background:yellow !important;
}
#mal_cs_powered #search {
background:brown !important;
}
#searchListButton {
background:violet !important;
}

/*MAL LOGO "MYANIMELIST"
This is only seen by people NOT logged in.
Its on the left side.
*/
#mal\_control\_strip {
background: none repeat scroll 0 0 aquamarine !important;
}
td#mal_cs_pic a img {
background: none repeat scroll 0 0 silver !important;
}

Shishio-kunFeb 18, 2012 8:57 PM

Feb 23, 2012 12:34 PM

#26

Offline

Feb 2010

11293

.List_LightBox {
background: none repeat scroll 0 0 red !important;
}

Code I found for "add to list" button, I had used it before, its obsolete now but adding it here for the sake of cataloging.

Mar 25, 2012 8:21 PM

#27

Offline

Feb 2010

11293

This threads been updated as well.

Aug 28, 2012 4:36 PM

#28

Offline

Jul 2011

4356

I tried the top bar on the Magica layout. But it turned out different than the example.

The text and icons changed, but it's still a big top bar so I think it might be the width of my screen that's affecting it. Other than changing my screen resolution, is there a way to get it so it's a single line? (And also translucent?)

Oh and also, the translucent background image URL is gone, so it isn't working.

MirorinAug 28, 2012 4:49 PM

Aug 28, 2012 9:54 PM

#29

Offline

Nov 2011

304

@MM-Rosiie
Omg... I had lost my domain recently and now something is wrong with OpenDrive. Hope the last one gets fixed soon.
The original version, actually, doesn't stay fixed to top nor it has translucent bg to make it more flexible. For translucent fixed version use the code from layout itself:
@import url(http://veriti.opendrive.com/files/OV81MjgxODdfcXZZMkg/mal_top_bar.css);
and in your code you have:
#mal\_control\_strip{background-size:100% 100%!important}
#mal\_control\_stripheight:24px!important}
#mal\_control\_stripdisplay:inline}
so something had gone wrong.

You may also need to adjust z-index of #mal_control_strip so the bar doesn't appear behind the list, just insert this line anywhere:
#mal\_control\_strip{z-index:1000 !important}

Aug 29, 2012 7:09 AM

#30

Offline

Jul 2011

4356

Alright, so I have it translucent and single lined, and added that line for the z-index.

VeriTi said:
and in your code you have:
#mal\_control\_strip{background-size:100% 100%!important}
#mal\_control\_stripheight:24px!important}
#mal\_control\_stripdisplay:inline}
so something had gone wrong.

I took the whole section of that out of the CSS file and it doesn't seem to have any effect on my list. Do I still need it though?

Aug 29, 2012 7:31 AM

#31

Offline

Nov 2011

304

@MM-Rosiie
No, mal_top_bar.css has all you need. This is an invalid code so removing it is right.

Aug 29, 2012 7:50 AM

#32

Offline

Jul 2011

4356

VeriTi said:
@MM-Rosiie
No, mal_top_bar.css has all you need. This is an invalid code so removing it is right.

Okay, thanks for the help. :D

Aug 29, 2012 6:51 PM

#33

Offline

Jul 2011

4356

I encountered another problem. I want to increase the padding between my anime title and border, but when I do, it also increases the padding for the icons, and makes them...funky? How can I increase my padding but not affect the top bar?

MirorinAug 29, 2012 6:55 PM

Aug 29, 2012 11:04 PM

#34

Offline

Nov 2011

304

@MM-Rosiie
You should post the code you're trying to use

Aug 30, 2012 6:39 AM

#35

Offline

Jul 2011

4356

Here's the code:

Aug 30, 2012 8:20 AM

#36

Offline

Nov 2011

304

@MM-Rosiie
Just don't touch a's:

.td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright {
color:white;
font-family:Raleway;
}

.td1, .td2, .category_totals, .table_header, #grand_totals, #copyright {
padding-left:2px;
padding-right:2px;
}

Aug 30, 2012 9:32 AM

#37

Offline

Jul 2011

4356

Works now. Thanks!

Dec 1, 2012 3:04 PM

#38

IPewz

Offline

May 2012

I managed to import the bar but for some reason the home button is like rolled up... :X is there a way to fix that?

Dec 1, 2012 3:12 PM

#39

Drize

Offline

Mar 2010

122

aznboiiftw said:
I managed to import the bar but for some reason the home button is like rolled up... :X is there a way to fix that?

This happened because for some reason the height of the "home" button was set to 0px. So just add the following to the bottom of your CSS:

#mal_cs_links {
height: 40px !important;
}

Dec 1, 2012 4:10 PM

#40

IPewz

Offline

May 2012

haha thanks it worked! :)

Apr 29, 2013 11:07 AM

#41

clone4

Offline

Jan 2011

124

Okay so I have my top bar fixed right now but I want the list to go under it when I scroll instead of over it, is this possible?

Apr 29, 2013 12:20 PM

#42

Offline

Feb 2010

11293

It needs z-index, probably set to 10 or so and with important at the end.

z-index: 10 !important;

Nov 16, 2013 1:32 PM

#43

Blackwar_Greymon

Offline

Mar 2013

Hey I want to get my top bar moved to either the left or right hand side so that I can see my header picture.

This is what it currently looks like:
http://myanimelist.net/animelist/Blackwar_Greymon

Also when I scroll down the top bar moves as well but the words don't, can anyone help me sort this out?

Here is what the coding looks like currently:

Nov 16, 2013 4:17 PM

#44

Offline

Feb 2010

11293

Blackwar_Greymon said:
Hey I want to get my top bar moved to either the left or right hand side so that I can see my header picture.

This is what it currently looks like:
http://myanimelist.net/animelist/Blackwar_Greymon

Also when I scroll down the top bar moves as well but the words don't, can anyone help me sort this out?

Sure but thats not just the top bar, it also has some table links in it which normally aren't in the top bar.

Before you customize it first off you have some broken code at the bottom of your CSS that will block the next code after it, delete it, it looks like this:

*/

}

The code to move the panel behind along with the icons and searchbox would be

#mal_control_strip{
left: 0px !important;
height: 100px !important;
width: 700px !important;
}

You can adjust the left and height and width how you want. It should move the icons and searchbox too but not the table links (words). btw Myanimelist has had trouble saving this code so after saving if the code stops working make sure it still is spelled the same or use #mal\_control\_strip instead.

Code for the words Anime Title/etc are

.table_header:nth-of-type(2) a {
left: 0px;
position: fixed;}

.table_header:nth-of-type(3) a {
left: 100px;
position: fixed;}

.table_header:nth-of-type(4) a {
left: 200px;
position: fixed;}

.table_header:nth-of-type(5) a {
left: 300px;
position: fixed;}

Each code has to be edited to the left how much you want.

Also if you need to move the icons or search box individually:

Oct 25, 2014 4:52 PM

#45