Sharepoint Branding And Customizations - Part 1

Last week I took part in the EUSP Hunger Games Challenge organized by EndUserSharepoint community. Where we were to perform some tasks and submit our sharepoint site back to them.


The major part which I concentrated on was SharePoint Branding, I wanted my SharePoint site to look more stylish than our typical SharePoint Site. Here are the Screen-shots of what I achieved in almost one day work !
You can view the site over here, But I am not sure how long this week will be active as I was using trial version of CloudShare.

I will divide the branding part into 6 steps :

1. Get a Logo for your site
2. Customize your Top Navigation Bar
3. Customize your Quick Launch on Left Navigation Bar
4. Add Social Icons
5. Add Copyright Footer
6. Customize your page to add twitter,FAcebook and Youtube to your page

Lets start with the 1st Step

1. Get a Logo for your site

Its necessary to have your own logo for your site, Get it designed and follow the below steps to upload it.

I designed the logo for myself ! Sharepoint Geek - Dhaval Shah :)

Al right, now you have to do is to open your V4.master page using SharePoint Designer. Search for the tag "s4-titlelogo" and replace the default logo url in the <Sharepoint:SiteLogoImage> tag with your uploaded logo.

<td class="s4-titlelogo">       <SharePoint:SPLinkButton runat="server" NavigateUrl="~site/" id="onetidProjectPropertyTitleGraphic">      <SharePoint:SiteLogoImage name="onetidHeadbnnr0" id="onetidHeadbnnr2" LogoImageUrl="/_layouts/images/SPGeek.png" runat="server"/>      </SharePoint:SPLinkButton> </td>

So Step1 was not that tough, Lets move to next step.

2. Customize your Top Navigation Bar

For this we have to play around with the CSS a little bit. By Default, V4.master page uses the core.css file for styling. we won't be changing that but we will over-ride the styles from core.css file in our master page, So it's good to have little bit idea about the the styles used in core.css. I suggest you to go through the stylesheet. If you are lazy like me, don't worry you can directly copy-paste the styles specified below in your master page.

<style>         /* Navigation list */         .s4-tn         {             background-color: #00557B;             padding: 0px;             margin: 0px;         }         /* Global navigation */         .s4-tn li.static > .menu-item         {             color: #fff;             white-space: nowrap;             border: 1px solid transparent;             padding: 4px 10px;             line-height: 25px;             height: 28px;         }         /* Hover */         .s4-tn li.static > a:hover         {             background: url("/_layouts/Images/selbg.png") repeat-x left top;             background-color: #0087C1;             color: #000;             text-decoration: none;         }         /* Selected */         .s4-toplinks .s4-tn a.selected         {             background: url("/_layouts/Images/selbg.png") repeat-x left top;             background-color: #0087C1;             color: #fff;             text-decoration: none;             border: 1px transparent solid;             padding-right: 10px;             padding-left: 10px;             margin: 0px;         }         /* Position for search */         .s4-search         {             padding-top: 7px !important;         }         /* Remove dotted outlines */         a:hover, a:active, a:focus         {             outline: none;         }                 /* No arrows applies two levels */         .menu-horizontal a.dynamic-children span.additional-background, .menu-horizontal ul.dynamic a.dynamic-children span.additional-background         {             background-image: none;         }         .s4-tn ul.dynamic         {             /* UL wrap */             background-image: none;             border-top: 0px #ccc solid;             border-right: 1px transparent solid;             border-bottom: 1px #ccc solid;             border-left: 1px #ccc solid;             margin: 0px;             padding: 0px;         }         /* LIs */         .s4-tn li.dynamic         {             background-image: none;             border-top: 1px #ccc solid;             border-right: 1px #ccc solid;             border-bottom: 1px #fff solid;             border-left: 1px #fff solid;         }         /* LI menu items */         .s4-tn li.dynamic > .menu-item         {             padding: 7px 10px;             height: 16px;             color: #333;             background-color: #f7f7f7; /* fallback */             background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f7f7f7));             background: -moz-linear-gradient(top, #ffffff, #f7f7f7);             filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f7f7f7);             -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f7f7f7)";         }         /* LI menu items hover */         .s4-tn li.dynamic > a:hover         {             color: #00557B;             background-color: #fff; /* fallback */             background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff));             background: -moz-linear-gradient(top, #ffffff, #ffffff);             filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#ffffff);             -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#ffffff)";         }     </style>

Just paste the above code-snippet in the <Head> tag of your V4.master page.

And style of your Top Navigation bar would be updated. Not so much to do, Isn't it ?

In my next article I will explain the other steps.

Stay tuned ! Happy SharePointing !

Please do Share/Like/Comment if this article helped you, author really appreciates.