Customized SharePoint Online Navigation Sample and Source code

July 31, 2011 — Leave a comment

How to change the look and feel of default SharePoint online navigation?
Here are the steps I went through to change the look of SharePoint online top navigation and  the end result after making the changes

custom-sharepoint-online-navigation

1. I added two background images to site images folder.

Changing the look of SharePoint Online top navigation

 

2. I made changes to PrimaryNavFrame in theme.css files.  The background images are coming from url("../SiteImages/blue.jpg").
The end result in the navigation which you see above.  If you want different color, all you have to do is to change the background images and play around with the css files to make a unique top level navigation for SharePoint online site.

 

.MSC_PrimaryNavFrame
{
   
    margin:0;
    padding:0;
    list-style-type:none;
    width:auto;
    position:relative;
    display:block;
    height:40px;
    text-transform:uppercase;
    font-size:13px;
    background:transparent url("../SiteImages/blue.jpg") repeat-x top left;
    font-family:Helvetica,Arial,Verdana,sans-serif;
    width: 100%;
    margin: 1px 0px 5px 0px;
    text-align: left;
}

.rtl .MSC_PrimaryNavFrame
{
    text-align:right;
}

.MSC_PrimaryNavLink
{
    color:#ffffff;
    font-size:13px;
    text-decoration:none;
}
.MSC_PrimaryNavLink:hover
{
   
    background:transparent url("../SiteImages/black.jpg") repeat-x top left;
}
.MSC_PrimaryNavLink:visited
{
    color: #FFFFFF;
    font-size: 13px;
    text-decoration: none;
}
.MSC_PrimaryNavLinkFrame-On
{
    background: url(‘../SiteImages/black.jpg’);
    white-space: nowrap;
    padding: 5px 10px 5px 10px;
}
.MSC_PrimaryNavLink-On
{
    color: #FFFFFF;
    font-size: 13px;
    text-decoration: none;
    font-weight: bold;
}
.MSC_PrimaryNavLink-On:hover
{
   
background:transparent url("../SiteImages/black.jpg") repeat-x top left;   
}
.MSC_PrimaryNavLink-On:visited
{
    color: #FFFFFF;
    font-size: 13px;
    text-decoration: none;
    font-weight: bold;
}
.MSC_PrimaryNavLeftSpace
{
    width: 1px;
    white-space: nowrap;
    background: #FFFFFF;
    font-size: 1px;
}
.MSC_PrimaryNavRightSpace
{
    width: 1px;
    background: #FFFFFF;
    white-space: nowrap;
    font-size: 1px;
}
.MSC_PrimaryNavTopSpace
{
    height: 1px;
    background: #FFFFFF;
}
.MSC_PrimaryNavBottomSpace
{
    height: 1px;
    background: #FFFFFF;
}

 

Once you modify the changes, add your custom css files to your site

custom-css-code-to-sharepoint-online-site

 

Reference Images

blue

black

No Comments

Be the first to start the conversation!

Leave a Reply

Please log in using one of these methods to post your comment:

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