Wednesday, June 15, 2011

Branding SharePoint 2007 Top Navigaion Bar with Images

Want to give some stylish look and feel for the Top link Bar? like the below one:


MOSS 2007 Top link bar uses the following CSS Classes from Core.CSS:
1.  .ms-topnav
2.  .ms-topnav a
3.  .ms-topnavselected
4.  .ms-topnavselected a

So, Customize the above CSS classes. Either we can place them in our own

Here is what I've done:

.ms-topnav{
border:none;
background:url("/_layouts/images/left_inactive.gif") top left no-repeat transparent!important;
font-family:Tahoma;
font-size:8pt;
color:#3764a0;
height:42px;
}

.ms-topnav a{
display:block;
white-space:nowrap;
padding:23px 12px 0px 12px;
height:42px;
color:#013d79;
background:url("/_layouts/images/right_inactive.gif") top right no-repeat transparent!important;
}

.ms-topnavselected{
color:#013d78;
background:url("/_layouts/images/left_active.gif") top left no-repeat transparent!important;
border:none;
font-weight:bold;
}

.ms-topnavselected a{
padding-top:17px;
color:#ffffff;
background:url("/_layouts/images/right_active.gif") top right no-repeat transparent!important;
}

And here are the Images:





Related Post:
Branding SharePoint 2010 Top Navigation Dropdown Menu Bar
http://chrisstahl.wordpress.com/2010/11/04/customizing-sharepoint-2010-global-navigation-with-css-and-jquery-2/



You might also like:
SharePoint Usage Reports
Usage reports, collaboration and audit for SharePoint.
Document SharePoint Farm
Automatically generate SharePoint documentation.
*Sponsored


Check out these SharePoint products:

No comments :

Post a Comment

Please Login and comment to get your questions answered!

You might also like:

Related Posts Plugin for WordPress, Blogger...