Sharepoint Branding And Customizations - Part 1

Jun 25, 2012 at 10:12 PM


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 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;
            padding0px;
            margin0px;
        }
        /* Global navigation */
        .s4-tn li.static > .menu-item
        {
            color#fff;
            white-spacenowrap;
            border1px solid transparent;
            padding4px 10px;
            line-height25px;
            height28px;
        }
        /* Hover */
        .s4-tn li.static > a:hover
        {
            backgroundurl("/_layouts/Images/selbg.png") repeat-x left top;
            background-color#0087C1;
            color#000;
            text-decorationnone;
        }
        /* Selected */
        .s4-toplinks .s4-tn a.selected
        {
            backgroundurl("/_layouts/Images/selbg.png") repeat-x left top;
            background-color#0087C1;
            color#fff;
            text-decorationnone;
            border1px transparent solid;
            padding-right10px;
            padding-left10px;
            margin0px;
        }
        /* Position for search */
        .s4-search
        {
            padding-top7px !important;
        }
        /* Remove dotted outlines */
        a:hovera:activea:focus
        {
            outlinenone;
        }
       
        /* No arrows applies two levels */
        .menu-horizontal a.dynamic-children span.additional-background.menu-horizontalul.dynamic a.dynamic-children span.additional-background
        {
            background-imagenone;
        }
        .s4-tn ul.dynamic
        {
            /* UL wrap */
            background-imagenone;
            border-top0px #ccc solid;
            border-right1px transparent solid;
            border-bottom1px #ccc solid;
            border-left1px #ccc solid;
            margin0px;
            padding0px;
        }
        /* LIs */
        .s4-tn li.dynamic
        {
            background-imagenone;
            border-top1px #ccc solid;
            border-right1px #ccc solid;
            border-bottom1px #fff solid;
            border-left1px #fff solid;
        }
        /* LI menu items */
        .s4-tn li.dynamic > .menu-item
        {
            padding7px 10px;
            height16px;
            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);
            filterprogid: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);
            filterprogid: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 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.

Found this article by Dhaval Shah valuable? Help by Sharing ...

  • Click on the banners at the top of article or in the right panel to visit my blog's sponsors. They are all hand-picked and are selected based on providing great products and services to the SharePoint community.
  • I’d be very grateful if you’d help it spread by Sharing. Below, you should find links to sharing this article on your favorite social media sites.
Related Posts by Dhaval Shah blog comments powered by Disqus