PLEASE do NOT strip my credits out of your code. They are harmless. Unlike most sites, My credits do NOT show up on your visible page, there is no reason to remove them. If you make a derivative of my work, you may add your own credits, but leave mine in tact.

I apologize for being less attentive to people's questions than in the past. I hope to return to doing this at some time. But for now I need to think about what I want to do. This doesn't mean I am completely ignoring all questions, if I suspect there might be a bug in my code, or myspace has made some change effecting it, I will still dig in and research.

Saturday, March 03, 2007

MySpace Band Page, Top area, Ad Banner, Search, Menus, Navigation Bars

MySpace Band Page, Top Area, Ad Banner, Search, Main Menu, Music Nav Bar


Most of the content which was on this page, is now no different than on the standard page, please see this article:
MySpace Top ad/search/menu area styleing and more

This article still covers the maroon navigation artist menu:
How the music nav bar (and its code) is Structured
Hide the maroon music menu nav bar
Style the maroon music menu nav bar Logo, replace with color and/or your own image
Style the maroon music menu nav bar

How the music nav bar (and its code) is Structured
For a diagram showing the structure (showing borders of divs, tables, cells along with classes) go here:
mySpace page showing Artist Band page Structure
The maroon nav bar background coloring is done at this level:
div table

It contains a background, a bottom border, an image, links, and text (the pipe things between each link which look like vertical lines). The text is not defined as font, or bold or any thing easy to isolate it with. The links can be addressed using the a, but the pipes between them are more of a problem.
The image, within the maroon bar is addressable as:
div table a.navbar img
We can isolate the actual links with this:
div table a

and then undo the effect on the main menu by addressing it like this:
div.profileWidth table div a

It has a unique id assigned to it, and can be address like this:
table#musicnav
(However now that they are blocking the pound sign, even in non safe mode, I can no longer take advantage of this.)

Hide the maroon music menu nav bar
It is now easier to hide, because the content that used to be at the same level, has had additional classification added to it.

One can now do this:
<a class=i href="xiii.us/ms/ad-search-menu">
myspace hide maroon music menu nav bar</a>
<style>
div table, .i, i i.x {display:none;}
div.profileWidth table {display:block}
table div table {display:block;}
</style>
<i class=i>!!! End Code to Style Top Ad/Search/Menu !!!</i>


Style the maroon music menu nav bar Logo
<i class=i>!!START code to style music nav bar logo !!</i>
<a class=i href="http://xiii.us/ms/band-navbar">
myspace artist music band nav bar logo style code by Eileen</a>

<style>
a.navbar {background-color:green !important; display:block;
background-image:url(http://i30.tinypic.com/2vm7tkg.gif);
background-repeat:no-repeat;
background-position: center center;}
a.navbar img, i i i.x {visibility:hidden;}
.i {display:none;}
</style>

<i class=i>!!! END CODE to style music nav bar logo</i>


Style the maroon music menu nav bar
You can style (color, fonts and such) the maroon navigation bar, HOWEVER it does effect other elements, UNLESS you also apply style for those elements.

You can style the music nav bar DIFFERENT from the top menu and calendar ONLY IF you also add style code for those elements.
I did NOT add that style code below. I suggest you read my articles on styling the calendar, and the top menu, and style those areas to your liking.

The code block below sets the style of the multiple elements on the navigation bar.
By applying the below code block, you will easily see its effects on the bar.
From that point you can change the colors, fonts, and such until you get the look you want.
<i class=i>!!START code to style music nav bar !!</i>
<a class=i href="http://xiii.us/ms/band-navbar">
myspace artist music band nav bar style code by Eileen</a>

<style>
{! style applied to music nav bar effects shows and main menu and shows. This can be reversed by styling these areas with additional code. !}

{! remove maroon background and black bottom border from music bar !}
div table {background-color:white !important; border-bottom:0px !important}
x.i i, .i {display:none;}
{! font of music nav bar !}
div table td a {color:darkgreen !important; font-family:comic sans ms; font-size:11px;}
</style>
<i class=i>!!END code to style music nav bar !!</i>

To now style the shows go here:
MySpace Band Page Shows

To style the new top Menu (what used to be in class navigationbar) go here:
MySpace style the New Top Menu

Thank you for Visiting; Have a Nice Day :-)

hide or style maroon artist navigation bar

Labels:

38 Comments:

Blogger mama shortii said...

i was looking for these codess!!! L0L. thankss so much. haha i had to leave a comment. be safe & take caree.

3/9/07 13:53  
Anonymous ezza! said...

these codes were soo helpful i thought i would leave a comment! THANKYOUU!

27/10/07 20:11  
Anonymous maty said...

Hi, i think there is a bug with the code in "Remove everything in Top Area EXCEPT ad banner, search and select" . When i applied it, the music player disappeared ! I got around it by using the other bunch f codes to do what i needed thoughm thanks.

6/11/07 07:12  
Blogger Eileen (aka Coboble) said...

maty
I just did a test on a myspace page with no other customizations, and the code worked.

My best guess is that some other code in your profile caused the problem (possibly only when combined with my code.)

It is also possible that myspace had code in place causing the problem that is not there anymore (they often introduce bugs which they back out later.)

6/11/07 15:51  
Anonymous missionary said...

I'm genuinely thankful for all your hard work here. You've made things so simple. In fact I've always shyed away from DIV profiles due to how complicated I thought they were. Here I am, about halfway through your tutorial, building my page and I realize that I'm actually doing it! This is just perfect!

9/12/07 14:09  
Anonymous SP said...

MANY THANKS for this great ressource! I used it alot during the last days to mess up my code ;) I also learned a lot. At the moment there is one thing that still drives me crazy: (On a mac) When viewed with FF all is fine, with Safari and Opera (with ie on pc the same, I guess) I have 2px difference on top, between the white border of my bg-image and the top banner, so the white corners do not fit. If you have any ideas how we can get rid of this,it would be highly appreciated. What is it with this "!important" thing anyway ? I figured playing around with these can do bad things to the whole ;) ?

All the best,
SP

16/12/07 03:40  
Anonymous SP said...

;) well, I guess it helps to post the link:
http://www.myspace.com/springerparker

friend ID is: 292238255

best,
SP

16/12/07 03:44  
Blogger Eileen (aka Coboble) said...

SP
For the type of alignment you are trying to do, that is not the best banner strategy to use.
You are not going to get it to align perfectly cross browser (or maybe it is possible, but would take a huge chunk of code.)

IF you Are you willing to tolerate a white border (of the same thickness) around the table which holds the bottom links, and are willing to add another chunk of code to control this space, you can use a strategy which works better for alignment.
(It has its own side effects).

The other strategy will place the background image at the top of the main content table, instead of using the empty div above the main table.

I will add the code for that strategy, to this article, today.

To prepare for the use of this strategy, Draw your image so that it has the top banner image, without the border and clear segment above it.

Do NOT include the white border in your image drawing. It works best to assign it as a border.

To get an idea of what I am talking about, I have tested this concept on the following test page:
test myspace page

I assigned the light grey as a background color, to the main table, and the div holding the bottom links.

note:
I usually don't recommend using the main table as the container for a top banner, because it also effects the bottom link table.
However, it does provide for better alignment (the type you are tyring to obtain.)

16/12/07 14:31  
Anonymous SP said...

Hey, thanks a lot for taking time to look at our code! The cross-browser-thing haunts us for years now ... Maybe with Web 4.0 there will be a common ground ;)

I understand, you have 2 different approaches to a possible solution?
I guess I could live with the border at the bottom, but if there is a workaround I would be happy to throw some more chunks of code in ;)

What I would love is to maintain a "flexible" extra space between the upper white border and the maroon music bar.

Very much looking forward to what you are proposing! Thanks so much!
Best wishes, SP

17/12/07 02:18  
Anonymous SP said...

Dear eileen

... took me some time to figure out, that you posted the border thing not on this page but in the other section ;) I kind of mixed a few codes and I think it worked. I Removed the top border though and added the border to the bg image again. So there is no border at the top of the bottom links-copyright section. Only thing is I can't change the color under the ad banner or set it to transparent... I am using the Firebug Extension to dig into the code but I just can' figure it out... must me something in the code somewhere that prevents it, I guess ...

Anyway and again and again: THANKS A LOT FOR YOUR HELP AND CODES!

best wishes, have nice code-free X-mas!;)
SP

20/12/07 02:43  
Anonymous Anonymous said...

These codes are wonderful! Thank you so much! I too had to leave a comment just to show my appreciation! :)

Have an awesome day!

J~

25/1/08 11:20  
Anonymous Mesknot said...

how can i hide or remove the yellow text below the ad or search form in the latin myspace??

1/2/08 03:46  
Anonymous Mesknot said...

well i think i figured it out, look the difference:

-normal US myspace:
http://www.myspace.com/music3test
http://us.myspace.com/music3test

-normal latin myspace:
http://mx.myspace.com/music3test
http://latino.myspace.com/music3test

there is an annoying text in the latin version, i removed it with this;

div table td div div a{display:none !important; visibility:hidden;}

correct me if im wrong =), have a nice day

1/2/08 04:15  
Anonymous Anonymous said...

Love your page!!!

I appreciate your work a lot, thanks for all those codes and information! checkin your page frequently

but i got a little question, maybe you can help me out:

removing the maroon music navbar aint a problem... but is it possible to remove only that thin black line on its bottom? you got an idea?

4/3/08 09:49  
Anonymous blondiegirl said...

Thanks so much - code to remove maroon bar did exactly that!

The only problem is it removed my edit profile screen on the band page and now I can't get in to edit anything.

Can anyone help please, I'm desperate!!

Thanks :)

28/3/08 15:38  
Blogger Eileen said...

are you using SAFE MODE.

It is very important to use safe mode, if you are going to use code to remove the maroon navigation bar.

28/3/08 17:51  
Anonymous Anonymous said...

Hello! Thanks so much for these codes! However, when I cut and paste the "Remove everything in Top Area EXCEPT ad banner, search and select" code it looks perfect on my page, but none of the links in the dropdown or the Google search work now. Any ideas what I did wrong? Thanks so much!!

8/4/08 09:33  
Blogger Eileen said...

It may be something I did wrong, or something that changed on myspace since I wrote this code.

I will test this again tonight, and post an update here.

8/4/08 10:41  
Anonymous Lisa said...

Since the "Remove everything in Top Area EXCEPT ad banner, search and select" didn't work, I added it all back then added it back transparent except for maroon nav bar. It works great in FF and Safari and but not IE. The banner doesn't show up and the dropdown box is just floating there on its own. Not sure what else to try?
Thanks for any ideas you may have! Lisa

18/4/08 07:38  
Anonymous Lisa said...

Sorry, forgot to add the page I'm working on. I just left another comment on the main band page blog about another problem. I'm so close now! Thanks!!

myspace/oldecellarband2

18/4/08 07:40  
Anonymous Ander said...

Hi-- This might be different, but I'm trying to KEEP my maroon MySpace nav bar. My problem is that each time I try to make my background a different color other than white, it makes most of the music nav bar that other color as well. Is there a code to bring the nav bar to the front? Or change its color back to maroon? Thank you!

20/4/08 19:57  
Anonymous Ander said...

--
My site is myspace.com/anderlucia. Thank you so much!

20/4/08 19:59  
Blogger Eileen said...


<style>
table td,
table table {background-color:transparent !important}
table.navigationBar {background-color:6698CB}
</style>


That removes the white without mucking up the maroon.
The maroon is applied at level
table
the white at level
table td

But if you did want to address the maroon bar you could do this:

div table {background-color: ...}

But I don't think this is needed.

20/4/08 20:43  
Anonymous ATD said...

My band's banner and image below the music navigation bar had doubled since the changes to the top area of myspace. I have removed it but I was wondering how I ad an image below that maroon music bar now?

22/6/08 23:20  
Anonymous Random said...

wow! thanks

i have one more quick question... how do i change the [Music Myspace Maroon Logo](http://x.myspace.com/images/music_logo.gif) image's background color?

Actually i just want to replace the myspace music logo, with the myspace music logo image i edited with the background color that i wanted it to be in photoshop and i just want to place the image on top of the (http://x.myspace.com/images/music_logo.gif) link/image on my page!

http://www.myspace.com/randombeats88

24/6/08 10:01  
Blogger u∃∃l!∃ said...

Yea, I added the code to this article, check the top menu.

Now this is easier than before, as it is now the only use of the navbar class.

24/6/08 10:24  
Anonymous Brad said...

Ugh, theres a problem I cant figure out with my band's myspace. any help? http://myspace.com/secondstart

26/6/08 14:12  
Blogger M. Adam Murphy said...

Hey there! These codes are incredibly helpful, so thank you for taking the time to post them. I am attempting to add a main banner/image at the top of my band profile, just between the nav bars and the beginning of the profile itself. The banner/graphic spans the width of my myspace, and with the new updates I am completely lost and do not know how to get it back.

Can you help?

myspace.com/bigsurrender

30/6/08 14:43  
Anonymous one second down said...

hey i really really need help because ive read everything but i still dont understand could you message me back http://www.myspace.com/oneseconddown thanks a bunch!!! i will give you my password to do it because that would probably be easier for you!

8/7/08 15:18  
Blogger Wil said...

Really awesome stuff! Do you have any idea how to put transparent space above the banner ad? Really, I just want to move it down while still being part of the background like they've done here: http://www.myspace.com/pilotseason

10/7/08 12:10  
Blogger u∃∃l!∃ said...

thanks wil,
go here:
Click here

10/7/08 16:37  
Blogger u∃∃l!∃ said...

mr murphy,

Use this, and it will allow your banner to stretch, the width of the banner, even if the banner is wider than the top menus.
In your case, I checked the width of the banner, and it is only 800px wide:

Top Banner Code

10/7/08 16:41  
Blogger Wil said...

Thanks for getting back to my previous post... I already sorta redesigned based on having a separate banner... is there a way to make that banner at the top transparent? so that the background below can show through?

I'm trying to get the logo on the left to not get cut off: http://www.myspace.com/endfootwear

11/7/08 21:17  
Blogger u∃∃l!∃ said...

Why make the banner transparent?

Just create the top margin (as if you were going to put a banner up there) and then don't put a banner up there.

11/7/08 22:09  
Blogger Wil said...

This post has been removed by the author.

14/7/08 09:52  
Blogger Wil said...

thanks! I just made cut off the left side of the banner and made it a PNG instead of JPEG, the background now passes under the banner on the left.

Now, I'm trying to adjust the column widths to be the same size but whenever I put in the code, I lose the banner... I tried a few different orders, ways of doing it and couldn't get the two sections of code to co-exist. Any ideas?

www.myspace.com/endfootwear

14/7/08 09:53  
Blogger andrewcx said...

so some how in my editing of my band page i lost the ad on the top of the page, i'm a little scared about myspace deleting the profile because of this. how do you add back the top ad banner?

16/8/08 05:23  
Blogger cate t said...

I tried the hide music nav code along with the simple band div overlay tutorial and it did remove the nav bar, but put back the upcoming shows.

26/8/08 15:30  

Post a Comment

Links to this post:

Create a Link

<< Home