Friday, January 22, 2010

Style Individual Navigation Items for 2007 & 2010

Here is a simple yet effective way to stylize individual top navigation items for SharePoint 2007 & 2010 just using CSS. SharePoint 2010 will need a slight modification to the master page but the same effect can be achieved. See bottom of post for 2010 implementation.

To start off with lets review how this can be accomplished for 2007. SharePoint 2007 provides a unique ID for each note in the navigation.

  1. 1st Tab: Dedicated as your default Home or root node
    • ID: zz1_TopNavigationMenun0
  2. 2nd Tab: This is the first child node from the root
    • ID: zz1_TopNavigationMenun1
  3. 3rd Tab: This is the second child node from the root
    • ID: zz1_TopNavigationMenun2
  4. 4th Tab: This is the third child node from the root
    • ID: zz1_TopNavigationMenun3 

See the pattern… It keeps going and going. Here is what it looks like from the IE DOM Explorer in IE8:

image

So you might ask well what can I do with this unique ID? Well here is a quick sample of what you can do. Its not pretty but it shows off that you can have a custom Icon, background color, font, etc. for each node in the navigation.

image

Here is the CSS and OOTB Icon references that I used to create the above design. So how does it work? Basically it combines the trigger of the unique ID and attaches it to the class of “ms-topnav a”. You will notice that I had to do a funky bit of css to fill in the background behind the arrow for news.

.ms-topnav{
border: none;
background-color: transparent;
background-image: none;
font-weight: bold;
}
#zz1_TopNavigationMenun0 .ms-topnav a{
background-image: url(/_layouts/images/newshomepage.png);
background-repeat: no-repeat;
background-position: -40px -3px;
background-color: #006699;
border: 1px #006699 solid !important;
padding:18px 20px 0px 80px;
height: 54px;
color: #FFF;
}
#zz1_TopNavigationMenun1 .ms-topnav a{
background-image: url(/_layouts/images/PLICON.PNG);
background-repeat: no-repeat;
background-position: -40px -3px;
background-color: #FF9933;
border: 1px #FF9933 solid !important;
padding:18px 20px 0px 80px;
height: 54px;
color: #FFF;
}
#zz1_TopNavigationMenun2 .ms-topnav a{
background-image: url(/_layouts/images/ANNOUNCE.PNG);
background-repeat: no-repeat;
background-position: -40px -3px;
background-color: #336633;
border: 1px #336633 solid !important;
padding:18px 20px 0px 80px;
height: 54px;
color: #FFF;
}
#zz1_TopNavigationMenun2 .ms-topnav td{
background-color: #336633;
}
#zz1_TopNavigationMenun3 .ms-topnav a{
background-image: url(/_layouts/images/ReportCenter.png);
background-repeat: no-repeat;
background-position: -40px -3px;
background-color: #990000;
border: 1px #990000 solid !important;
padding:18px 20px 0px 80px;
height: 54px;
color: #FFF;
}
#zz1_TopNavigationMenun4 .ms-topnav a{
background-image: url(/_layouts/images/SMT_LARGE.PNG);
background-repeat: no-repeat;
background-position: -40px -3px;
background-color: #660066;
border: 1px #660066 solid !important;
padding:18px 20px 0px 80px;
height: 54px;
color: #FFF;
}
#zz1_TopNavigationMenun5 .ms-topnav a{
background-image: url(/_layouts/images/categories.png);
background-repeat: no-repeat;
background-position: -40px -3px;
background-color: #999;
border: 1px #999 solid !important;
padding:18px 20px 0px 80px;
height: 54px;
color: #FFF;
}

So how do you do this for SharePoint 2010…

Well first you will need to modify the master page and do a search for “UseSimpleRendering="true"”. This basically tells SharePoint to render the navigation using a clean unordered list <UL> <LI> format.

Since this is so clean, it does not have any unique ID’s attached to it like it did in SharePoint 2007.

image

So if you change it to false: UseSimpleRendering="false" you can clearly see that each node now has a unique ID:

image

So if we simply take the same approach for 2007 we can get similar results.  You will notice the only difference in the ID’s from 2007 to 2010 is that they put in a “V4” after the word “Menu” and before the “n#”

  1. 2007 ID: zz1_TopNavigationMenun0
  2. 2010 ID: zz1_TopNavigationMenuV4n0

You can also remove the “ms-topnav” since it is not needed. You should end up with something like this:

image

Below is the CSS that I used to achieve the design above for SharePoint 2010. Remember you need to make that modification to the master page noted above to get this to work. Also notice that I kept the “a” reference at the end of each ID.

#s4-topheader2{
border: none;
background-color: transparent;
background-image: none;
font-weight: bold;
height: 54px;
padding-bottom: 5px;
}
#zz1_TopNavigationMenuV4n0 a{
background-image: url(/_layouts/images/newshomepage.png);
background-repeat: no-repeat;
background-position: -40px -3px;
background-color: #006699;
border: 1px #006699 solid !important;
padding:18px 20px 18px 80px;
color: #FFF;
}
#zz1_TopNavigationMenuV4n1 a{
background-image: url(/_layouts/images/PLICON.PNG);
background-repeat: no-repeat;
background-position: -40px -3px;
background-color: #FF9933;
border: 1px #FF9933 solid !important;
padding:18px 20px 18px 80px;
color: #FFF;
}
#zz1_TopNavigationMenuV4n2 a{
background-image: url(/_layouts/images/ANNOUNCE.PNG);
background-repeat: no-repeat;
background-position: -40px -3px;
background-color: #336633;
border: 1px #336633 solid !important;
padding:18px 20px 18px 80px;
color: #FFF;
}
#zz1_TopNavigationMenuV4n3 a{
background-image: url(/_layouts/images/ReportCenter.png);
background-repeat: no-repeat;
background-position: -40px -3px;
background-color: #990000;
border: 1px #990000 solid !important;
padding:18px 20px 18px 80px;
color: #FFF;
}
#zz1_TopNavigationMenuV4n4 a{
background-image: url(/_layouts/images/SMT_LARGE.PNG);
background-repeat: no-repeat;
background-position: -40px -3px;
background-color: #660066;
border: 1px #660066 solid !important;
padding:18px 20px 18px 80px;
color: #FFF;
}
#zz1_TopNavigationMenuV4n5 a{
background-image: url(/_layouts/images/categories.png);
background-repeat: no-repeat;
background-position: -40px -3px;
background-color: #999;
border: 1px #999 solid !important;
padding:18px 20px 18px 80px;
color: #FFF;
}

Enjoy!

20 comments:

Emmanuel said...

Hi, good post. I've already done it for a company. But there is a problem: if you add another subtsite to the top nav bar, you'll have to work with your css again because of the ID will change :)

Regards,

Emmanuel Baron

adamdorman said...

Hi Erik,
This is really useful. But I have a problem. Once I have individually styled my elements, I don't see any way to have the item's state differ to show 'you are here'. Do you know of a method to do this?

Thanks,

Adam

Jenny said...

Hi, great post and very easy to follow the instructions. I suppose this doesnt work in SharePoint Foundation version?

Thomas BalkestÄhl said...

Great post Erik.
One question for us new to this...
Where do I put the CCS part for 2010? In the masterpage file? If so where in it? and do I only change the simplerendering in the master?

Could you post an example of the css and the master when ready?

Thanks
// Thomas

Erik Swenson said...

Thomas,

There are many ways to reference the CSS I supplied to get the navigation the way that you want. The most simple way would be to include the a style tag within the header section of the master page.

Open Style Tag
"Add the css here"
End style tag

Or you could reference an alternate css file either in the style library within that site collection or on the server itself. See the following post for more info about that.
http://erikswenson.blogspot.com/2010/01/sharepoint-2010-css-references-in.html

armin said...

hi i'm new in sharepoint
i searched everywhere but i couldn't find the css file , and where should i write those codes ?! please help me

Anonymous said...

Hi , can i use IE dom 8 to modify my css files ?!
i made your changes by using IE dom 8 but when i refresh my page all my changes disappear .
please help me out here
sorry for my bad english

Ramesh R said...

hi this is Ram
how can i make my navigateup as shown below style in horzontal can anybody help me

Support / SharePoint / SharePoint Designer / SharePoint Designer 2007 Help and How-to / Page layouts and publishing sites

thanks

Ramesh R said...

how to create my navigate up in horizontal view instead of Treeview in sharepoint 2010 can any body help me

Support / SharePoint / SharePoint Designer / SharePoint Designer 2007 Help and How-to / Page layouts and publishing sites

Thanks in advance

Anonymous said...

Great article, really useful to see how easily you can apply styles to individual nav items. Thanks

Brian Marvin said...

This worked amazingly well for me. Thank you very much for posting.

Maknanimous said...

Hi,
I have used your solution above to individually style my top navigation items, and it works very well. However I have run into a bit of a problem. I would like to add a hover delay to my top navigation dropdown but I am struggling to find a way to do this. Any assistance would be greatly appreciated.

kashkumar said...

Hi Eric,

Thanks for the article. I have got 1 question if you could answer that would be great. How to style the drop down items based on their parent id's? For example if the background colour of the home tab in the top level navigation is green and all the drop down options under home will have green background and if the test tab in the top level navigation has red background colour then all the drop down options under test tab should have red background. Please help.

kashkumar said...

Hi Eric, I hope you could answer this. This method works very well but the problem is application pages don't show the top navigation tabs in different colours instead they show the default tabs with no branding. Can you please explain why or do you have the solution? Thanks again, it would be great if you could help on this.

kashkumar said...

Hi Eric, I hope you could answer this. This method works very well but the problem is application pages don't show the top navigation tabs in different colours instead they show the default tabs with no branding. Can you please explain why or do you have the solution? Thanks again, it would be great if you could help on this.

kashkumar said...

Hi Eric, I hope you could answer this. This method works very well but the problem is application pages don't show the top navigation tabs in different colours instead they show the default tabs with no branding. Can you please explain why or do you have the solution? Thanks again, it would be great if you could help on this.

kashkumar said...

Hi Eric, I hope you could answer this. This method works very well but the problem is application pages don't show the top navigation tabs in different colours instead they show the default tabs with no branding. Can you please explain why or do you have the solution? Thanks again, it would be great if you could help on this.

Sam Daniel said...

How to apply this concept in SharePoint 2013? Thanks in advance.

Bisi Ade said...

Dear Erik,

How can I do same for submenu items.

Thank you,

Bisi

Rain Della Torre said...

This works great, except is there a way to customize the coloured tabs depending on permissions?

For example, I have 5 tabs in the global navigation. User A has permissions to see all 5 tabs. User B only have permissions to see 3 of the tabs.

For example...The first tab's colour should be red, and the 2nd tab's colour should be yellow.
User A sees the first tab as red, as it should be.
Since User B doesn't have permissions to see the first tab, when User B logs in to Sharepoint site, the 2nd tab is the first tab they see and its showing to them as red but it should be yellow.

Is there a way in CSS to colour the links depending on the Name of the link , instead of the ID?

Or do you know a way to check permissions in the master page in sharepoint designer, then depending upon the user's permissions, it would use a different CSS page?

thank you!!