Branding the Sharepoint 2010 Top Navigation

IF anyone interested in doing the branding the top navigation of the sharepoint site, just start it with this link.

before branding the Top Navigation:

beforebranding

After branding the Top Navigation:

afterbranding
The above mentioned SharePoint top navigation had to support variation with the Arabic fonts. So i had issues when the top navigation turns its direction to RTL. so the solution mentioned in the below link helped me out to find the problem which made the menu to behave naughty.

http://social.msdn.microsoft.com/Forums/da-DK/sharepointcustomizationprevious/thread/7f2b6811-1d19-4a9c-a5fa-29f5be4dbe5a

the problem which i was getting is from the following style in core4.css
.menu ul.dynamic {
position: absolute;
right: -999em;
}

Had to override the style which was mentioned in the core4.css with the below entry:

.menu ul.dynamic {
position: absolute!important;
top: -999em!important;
}

refer the following link to start up the branding:

http://chrisstahl.wordpress.com/2010/11/04/customizing-sharepoint-2010-global-navigation-with-css-and-jquery-2/

apart from the branding of the top navigation had to brand the search OOB webpart. You can find the style which i used in the below css style.

before branding the search OOB webpart:

searchbefore

after branding the search OOB webpart:

searchafterbranding
As well as if you need to hide the breadscrumb (sitemap path navigation) of the site please add the following entry in the master page or in a content editor web part on the page. (just check the ID of the control when browsing the page).

<style type=”text/css”>

#ctl00_PlaceHolderTitleBreadcrumb_ContentMap {display=none;}

</style>

the complete style sheet:

/* Drop Down: Container Style */
.s4-tn ul.dynamic{
background-color:rgb(65, 64, 66)!important;
border:thin rgb(182, 164, 85) double !important;
border: thick #b6a455 double!important;

}
/* Drop Down: Item Padding Style */
.s4-tn li.dynamic > .menu-item{
/*padding:10px 20px 10px 20px;*/
}
/* Drop Down: Hyperlink Styles */
.s4-tn li.dynamic > a{
font-size: 9px!important;
font-weight:normal!important;
color:#b6a455!important;
border:thin rgb(182, 164, 85) double!important;
text-align:left;
}
/* Drop Down: Hyperlink Hover Style */
.s4-tn li.dynamic > a:hover{
background-color:rgb(182, 164, 85)!important;
color:rgb(65, 64, 66)!important;
border: thin rgb(65, 64, 66) double!important;
}

/*          top menu */
/* Drop Down: Hyperlink static style */
.s4-tn li.static > .menu-item {
font-size: 9px!important;
font-weight:normal!important;
color:#b6a455!important;
border:thin rgb(182, 164, 85) double !important;
background-color:rgb(65, 64, 66);
border: thick #b6a455 double!important;
}
/* Drop Down: Hyperlink static Hover Style */
.s4-tn li.static > a:hover{
background-color:rgb(182, 164, 85)!important;
color:rgb(65, 64, 66)!important;
border: thick rgb(65, 64, 66) double!important;
}
/* Drop Down: Hyperlink static Hover Style */
.s4-tn li.static > a.selected{
background-color:rgb(182, 164, 85)!important;
color:rgb(65, 64, 66)!important;
border: thick rgb(65, 64, 66) double!important;
}
/* top down menu */
.menu-horizontal a.dynamic-children span.additional-background, .menu-horizontal span.dynamic-children span.additional-background
{
background-image:none!important;
}
.menu-horizontal ul.dynamic a.dynamic-children span.additional-background, .menu-horizontal ul.dynamic span.dynamic-children span.additional-background
{
background-image:url(“/Style Library/Images/Arrow_English.gif”)!important;
}
.menu-vertical a.dynamic-children span.additional-background, .menu-vertical span.dynamic-children span.additional-background{
background-image:url(“/Style Library/Images/Arrow_English.gif”)!important;
}

/* Search Box */

.s4-search input.ms-sbplain {
width: 220px !important;
line-height: 20px !important;
height:17px!important;
background-color: #F5EFE0 !important;
border: 1px solid #D3AE81 !important;
}
.s4-search .ms-sbgo {
padding: 0;
margin: 0;
line-height: 20px;
text-align:center!important;
vertical-align:middle!important;
}
.s4-search .ms-sbgo a {
background-image: url(‘/Style Library/Images/Search_en.gif’);
background-repeat: no-repeat;
width: 120px;
height: 33px;
display: block;
text-align:center;
vertical-align:middle;
margin-left:10px;
margin-top:5px;
}
.s4-search .srch-gosearchimg {
display: none;
}
.ms-sbscopes {
display: none;
}
td.ms-sbcell{
background-color:rgb(182, 164, 85)!important;
border:0px;
text-align:center;
vertical-align:middle;
}
.ms-sbtable{
border-top-width:0px!important;
border-right-width:0px!important;
border-bottom-width:0px!important;
border-left-width:0px!important;
background-color:white!important;
border-top-style:none!important;
border-right-style:none!important;
border-bottom-style:none!important;
border-left-style:none!important;
border-bottom-color:rgb(182, 164, 85)!important;
border-top-color:rgb(182, 164, 85)!important;
border-right-color:rgb(182, 164, 85)!important;
border-left-color:rgb(182, 164, 85)!important;
}
.ms-sbLastcell{
display:none;
}
.search .ms-sbcell{
color:#4f4f4f!important;
}
.menu-horizontal li.static, .menu-horizontal a.static, .menu-horizontal span.static{
float:none!important;
display:inline-block!important;
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: