So the study begin again.

Microsoft changed the rules. SharePoint Designer has no design view anymore. The master page need to be prepared by HTML template then add the snippts back in. 

Took me a week to totoally cope with it, considering the work I had done with SharePoint 2010, I am amazed that I did not same amount of struggling this time.

 

So the concept of branding SharePoint 2013 is like this, if you had played with SharePoint 2010 designer a lot.

1. you need to draw your HTM page with DIVs and its parameters(Width, Length, Flow, Border, Background... etc) However keep it empty so you can have the layerout only.

2 create an seperate CSS stylesheet together with your HTM page, make sure in your HTM page, all the CSS scripts are saved in this CSS file. create a folder for your css, I simply call it css, and make sure you add the reference into your HTM head area like:

<linkrel="stylesheet"type="text/css"href="css/stylesheet2013.css">

3. create another folder for all the referenced pictures, in my case I created img folder. The masterpage.htm, css and image folder are at same level.

 

Now from SharePoint Designer, go to All files -> _catalogs->Masterpage

Copy the folder of css and images to it. You can do the same if you have jscript linked in your htm head.

 

4. Now go to the website and go to design manager, manage master page, add new, import your htm page, it will automatically branding it with SharePoint elements and generate a master page with the same file name. You only edit htm page in SharePoint Designer and leave the master page alone. It will automaticcally get updated.

 

5. Now you can have a look of the snippet under Design Manager on your Internet Explorer, however if you simply copy the following code to the Top Navigation DIV area, it will work. Remember, if the top navigation only show 2 level of dynamic levels, you need install SharePoint updates, install all the updates you can find.

6. Code of HTM part:

<div id="navigation" class="crom-Navigation">
                        <!--Top Menu-->
                        <!--SPM: <SharePoint:AjaxDelta id="DeltaTopNavigation" BlockElement="true" CssClass="ms-displayInline ms-core-navigation" role="navigation" runat="server"> -->
                        <!--SPM: <SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate"> -->
                        <!--SPM:    <Template_Controls> -->
                        <!--SPM:   <asp:SiteMapDataSource
                ShowStartingNode="False"
                SiteMapProvider="SPNavigationProvider"
                id="topSiteMap"
                runat="server"
                StartingNodeUrl="sid:1002"/> -->
                        <!--SPM:    </Template_Controls> -->
                        <!--SPM:    </SharePoint:DelegateControl> -->
                        <!--SPM: <asp:ContentPlaceHolder id="PlaceHolderTopNavBar" runat="server"> -->
                        <!--SPM:<SharePoint:AspMenu
            runat="server" UseSeparateCss="false"
            AdjustForShowStartingNode="False" StaticDisplayLevels="2"
            AccessKey="1" SkipLinkText="" EnableViewState="False"
            MaximumDynamicDisplayLevels="5" 
            DataSourceID="topSiteMap" Orientation="Horizontal"
            RenderingMode="List"
            UseSimpleRendering="false"
            ID="TopNavigationMenu"> -->
                        <!--SPM: </SharePoint:AspMenu> -->
                        <!--SPM: </asp:ContentPlaceHolder> -->
                        <!--SPM: </SharePoint:AjaxDelta> -->
                    </div>

 

Change the MaximumDynamicDisplayLevels if you want it show different levels. 

7. To customize this navigation, what we do is we overload the css code in your customized CSS stylesheet, so your own CSS script will overwirte the system one. 

Here are my codes in styleSheet2013.css to cope with my Green theme:

 

/*-----------Navigation  ----------- */
.crom-Navigation
{
padding:0px;
margin:0px;
padding-left:40px;
background-color:#00a18f;
    font-family:Tahoma, Geneva, sans-serif;
 font-size:12px;
 height:25px;
 color:white;
    position: relative;
    z-index:200;
}
.crom-Navigation a 
{
    margin: 0px; 
 
    border: 0px;
    text-decoration:none;
}
.crom-Navigation ul {
    list-style: none; 
    margin: 0px; 
    padding: 0px; 
    font-size: 12px; 
    z-index:200;
    color:white;
   
}
 
.crom-Navigation ul ul
{
    border-bottom: 0px !important;
}
 
.crom-Navigation ul li 
{

    display: inline-block; 
    position: relative; 
    z-index:200;
    padding-right:10px;

    background-color:#00a18f;
}
 
.crom-Navigation>ul>li {
    border-left:1px solid white!important;
}
 
/*if you want to hide the first top level node*/
/*.crom-Navigation ul li:first-child {
margin: 0px; padding: 0px; display: none;
}*/
 
/*if you want to hide the last top level node*/
/*.crom-Navigation ul li:last-child {
margin: 0px; padding: 0px; display: none;
}*/
 
.crom-Navigation ul li a.selected,
 .crom-Navigation ul li.selected 
 {

/* [ReplaceColor(themeColor:"Accent1-Medium")] */ border-color:#91cdf2;
/* [ReplaceColor(themeColor:"Accent1-Lighter")] */ border-bottom-color:#addbf7;
/* [ReplaceColor(themeColor:"Accent1-Lightest")] */ border-top-color:#c6e5f8;
/* [RecolorImage(themeColor:"Light1")] */ background:url("/_layouts/images/selbg.png") repeat-x left top;
/* [ReplaceColor(themeColor:"Accent1",themeTint:"0.35")] */ background-color:#ccebff;
/* [ReplaceColor(themeColor:"Accent1",themeShade:"0.20")] */ color:#003759;
padding-top:5px;
margin:0px 0px;
}
 
 
.crom-Navigation ul li a {
   color:white;

background-color:#00a18f;
white-space:nowrap;
border:0px solid transparent;
padding-top:5px;
display:inline-block;
height:20px;
vertical-align:middle;
font-size:12px;
font-family:Tahoma, Geneva, sans-serif;
padding-left:10px !important;
padding-right:10px !important;


}

.crom-Navigation ul li a.selected{

}


.crom-Navigation ul li:hover {
 
}


.crom-Navigation ul li a:hover {
    text-decoration: none;
    color:#003f5f !important;
}
.crom-Navigation li ul {
    left:0px;
    top: 9px; 
    display: none; 
    position: absolute; 
    min-width: 150px; 
    box-shadow: 5px 5px 10px 0px #003f5f; 
    background-color: white;
    /*background-color: rgb(217, 226, 231);*/

}
 
 
.crom-Navigation li:hover ul {
    display: block; z-index: 150;
}
.crom-Navigation li li {
    margin: 0px; 
   
    border-top-width: 0px; 
    display: block; 
    min-width: 150px;
 
}



.crom-Navigation li li:last-child {
    margin: 0px; 
     border-top-width: 0px; 
    display: block; 
    min-width: 150px;
}
.crom-Navigation li li a {
display:block;
    width: 100%; 
    padding-left: 10px; 
    display: block; 
    color:#003f5f !important;
    padding:3px 10px;
}
.crom-Navigation li li:hover {
    background-color: rgb(120, 120, 120);
}

/*--End Top Navigation --*/

 

To understand which part is corresponding the right area, the best way is use Internet Explorer to load the webpage, deploy your Master Page to the site, then load the top navigation together with F12 Developer Tools, use the DOM Explorer to locate each elements and play with it.  

For example, if you found something like:

#zz1_TopNavigationMenu a.popout 

where the elements linked to core15.css, you just overwrite it in your customized code again, in my case :

#zz1_TopNavigationMenu a.popout{
padding-right:0px;
background-image:url('../img/menu-down.gif') !important;
background-repeat:no-repeat;
background-position:right center;
}

 

Which will lead the page to the right place.

About Lei

I am an IT specialist with over 10 year experience - years on Automation, on-Premise or Azure.

I am happy to develop however never want be a full time developer. Only do what I have to do. If it has to be PowerShell,HTML, PHP, CSS, C#, VBS or JS, front end or backend, so be it, doesn't matter!

Spent years with Windows, SCCM, SharePoint, SQL and Exchange servers. For last several years, I have been actively working under On Premise > Azure environment.

THERE IS NO WAY BACK!!!

Current Certificates:
    Microsoft® Certified-
  • -Enterprise Administrator
  • -Database Administrator
  • -SharePoint Administrator
  • -Administering and Deploying SCCM 2012
Red Hat Certified Technician
ITIL V3 Foundation - Practitioner

Working on Azure Certificates now and hopefully they can stop upgrading their questions one day! GIVE ME A BREAK!

Contact Lei

Name *
Email *
Comments *

Traffic since 10/08/2016

Today13
Yesterday83
This week637
This month1933
Total416293

Visitor Info

  • IP: 54.221.73.186
  • Browser: Unknown
  • Browser Version:
  • Operating System: Unknown

Who Is Online

1
Online

2017-12-17

Login