Applying Folder Up Navigation and Providing Bulge effect on Top Navigation Bar to SharePoint 2013 Site

When you upgrade from SharePoint 2010 to SharePoint 2013 or setup a new SharePoint 2013 site, many people feel that the SharePoint 2013 default look and feel is not as usable as how the default branding of SP 2010 is. It is white and blue and there are no lines, borders, panels, bulges - just nothing - it is all just plain. For a company which just wants to use the default branding, this could post a huge challenge.

Hence, this post talks about how you can bring folder up navigation as well as a bulge effect on the Top Navigation bar:

1.       Create a CSS file and name it as  Ex. MyBranding.CSS, that  file is to be placed in the  /Style Library/css/   Directory
2.       You can  the DCR CSS file from current default master page by using this syntax

d
<SharePoint:CssRegistration Name="/Style Library/css/MyBranding.css" After="corev15.css" runat="server" />

3.       Then Search for below keyword  in current default Master page

<div class="ms-breadcrumb-dropdownBox" style="display:none;">

4.       Delete the CSS attribute    style="display:none;"
5.       Two lines below change the visible attribute of the SharePoint:PopoutMenu as true
6.       After editing your code it, should look like as below,

<div class="ms-breadcrumb-dropdownBox">
<SharePoint:AjaxDelta id="DeltaBreadcrumbDropdown" runat="server">
                <SharePoint:PopoutMenu
                                Visible="true"
                                runat="server"
                                ID="GlobalBreadCrumbNavPopout"
                                IconUrl="/_layouts/15/images/spcommon.png?rev=27"
                                IconAlt="<%$Resources:wss,master_breadcrumbIconAlt%>"
                                ThemeKey="v15breadcrumb"
                                IconOffsetX="215"
                                IconOffsetY="120"
                                IconWidth="16"
                                IconHeight="16"
                                AnchorCss="ms-breadcrumb-anchor"
                                AnchorOpenCss="ms-breadcrumb-anchor-open"
                                MenuCss="ms-breadcrumb-menu ms-noList">
                                <div class="ms-breadcrumb-top">
                                                <asp:Label runat="server" CssClass="ms-breadcrumb-header" Text="<%$Resources:wss,master_breadcrumbHeader%>" />
                                </div>
                                <asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server"><SharePoint:ListSiteMapPath
                                runat="server"
                                SiteMapProviders="SPSiteMapProvider,SPContentMapProvider"
                                RenderCurrentNodeAsLink="false"
                                PathSeparator=""
                                CssClass="ms-breadcrumb"
                                NodeStyle-CssClass="ms-breadcrumbNode"
                                CurrentNodeStyle-CssClass="ms-breadcrumbCurrentNode"
                                RootNodeStyle-CssClass="ms-breadcrumbRootNode"
                                NodeImageOffsetX="217"
                                NodeImageOffsetY="210"
                                NodeImageWidth="16"
                                NodeImageHeight="16"
                                NodeImageUrl="/_layouts/15/images/spcommon.png?rev=27"
                                RTLNodeImageOffsetX="199"
                                RTLNodeImageOffsetY="210"
                                RTLNodeImageWidth="16"
                                RTLNodeImageHeight="16"
                                RTLNodeImageUrl="/_layouts/15/images/spcommon.png?rev=27"
                                HideInteriorRootNodes="true"
                                SkipLinkText="" />
                                </asp:ContentPlaceHolder>
                </SharePoint:PopoutMenu>
</SharePoint:AjaxDelta>
</div>

7.       Now your breadcrumb icon will not appear and to get it back, add the script below before the </body> tag in master page.

<script type="text/javascript">
document.getElementById("GlobalBreadCrumbNavPopout-anchor").innerHTML='<img style="border-width:0;position:absolute;left:-215px !important;top:-120px !important;" alt="Navigate Up" src="/_layouts/15/images/spcommon.png?rev=27">';
              </script>      

8.       Save the modified master page, check it and publish the major version.






9.       Output should be like as below,



10.   Now, for changing the breadcrumb icon position nearer to the title bar, cut the

<div class="ms-breadcrumb-dropdownBox"> full div block as in the table of 6th point and paste it in the below of this block.


<SharePoint:AjaxDelta id="DeltaSiteLogo" BlockElement="true" runat="server">
                                <SharePoint:SPSimpleSiteLink CssClass="ms-siteicon-a" runat="server" id="onetidProjectPropertyTitleGraphic" ><SharePoint:SiteLogoImage CssClass="ms-siteicon-img" name="onetidHeadbnnr0" id="onetidHeadbnnr2" LogoImageUrl="/_layouts/15/images/siteIcon.png?rev=23" runat="server"/></SharePoint:SPSimpleSiteLink>
                </SharePoint:AjaxDelta>
</div>

11.   For  the alignment of folder up navigation icon, we applying the following CSS code in DCR.CSS


.ms-breadcrumb-dropdownBox
 {
display: inline-block;
vertical-align: middle;
margin-top: 25px;
margin-left: 10px;
              }










12.   The final output  will be shown as below








a)    How the top navigation bulge effect has been applied in SharePoint 2013?

1.       Follow first two steps in previous section
2.       In Master page-> to look better, you can change the position of the top menu,
 Find and select the below div block.


<div class="ms-breadcrumb-box ms-tableCell ms-verticalAlignTop" id="ms-breadcrumb-box1">
<div class="ms-breadcrumb-top">

<SharePoint:AjaxDelta id="DeltaTopNavigation" BlockElement="true" CssClass="ms-displayInline ms-core-navigation" role="navigation" runat="server">
                <SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate"><Template_Controls>
                                                <asp:SiteMapDataSource
                                                                ShowStartingNode="False"
                                                                SiteMapProvider="SPNavigationProvider"
                                                                id="topSiteMap"
                                                                runat="server"
                                                                StartingNodeUrl="sid:1002"/>
                                </Template_Controls>
                </SharePoint:DelegateControl>
                <asp:ContentPlaceHolder id="PlaceHolderTopNavBar" runat="server">
                                <SharePoint:AspMenu
                                                ID="TopNavigationMenu"
                                                Runat="server"
                                                EnableViewState="false"
                                                DataSourceID="topSiteMap"
                                                AccessKey="<%$Resources:wss,navigation_accesskey%>"
                                                UseSimpleRendering="true"
                                                UseSeparateCss="false"
                                                Orientation="Horizontal"
                                                StaticDisplayLevels="2"
                                                AdjustForShowStartingNode="true"
                                                MaximumDynamicDisplayLevels="2"
                                                SkipLinkText="" />
                </asp:ContentPlaceHolder>
</SharePoint:AjaxDelta>
                                                                </div>



And paste it in the below of following SharePoint block in master page

<div class="ms-tableCell ms-verticalAlignTop">
<SharePoint:AjaxDelta id="DeltaPlaceHolderSearchArea" BlockElement="true" CssClass="ms-mpSearchBox ms-floatRight" runat="server">
  <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
                <div id="searchInputBox">
                  <SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" />
                </div>
  </asp:ContentPlaceHolder>
</SharePoint:AjaxDelta>
                                                </div>
                                </div>
                                </div>
                                </div>


3.       For applying menu bulge effect background, use the below CSS code

.ms-breadcrumb-top
 {
white-space: inherit;
margin-bottom: 0px;
background: rgba(240, 248, 255, 0.19);
background: url("/_layouts/images/selbg.png") repeat-x left top;
/*background-color: #f6f6f6;*/
vertical-align: middle;
min-height: 25px;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #b8babd;
line-height: 25px;
}.ms-breadcrumb-box
 {
width: 100%;
background-color: #F6F6F6;
display: inline-table;
height: auto;
}

4.       For applying  selected menu  color effect , use the below CSS code


#zz13_RootAspMenu ul.static li.static.selected
{
border-color: #91cdf2;
border-bottom-color: #addbf7;
border-top-color: #c6e5f8;
background: url("/_layouts/images/selbg.png") repeat-x left top;
background-color: #ccebff;
color: #003759;
padding: 4px 5px;
margin: 0px 0px;
}
a.dynamic.menu-item.ms-core-listMenu-item.ms-displayInline.ms-navedit-linkNode{
margin: 0px -10px 0px -10px;
padding:5px;
}

a.dynamic.menu-item.ms-core-listMenu-item.ms-displayInline.ms-navedit-linkNode:hover {
background: #D9D9D9 !important;
margin: 0px -10px 0px -10px;
}

#DeltaTopNavigation .ms-core-listMenu-root a[accesskey="1"]{
               
                display:none;
}             
.ms-core-listMenu-horizontalBox > .ms-core-listMenu-root > .ms-listMenu-editLink {
margin-left: 39px;
}





5.       Set the positions and alignment by using this following CSS code.

a.dynamic.menu-item.ms-core-listMenu-item.ms-displayInline.ms-navedit-linkNode{
margin: 0px -10px 0px -10px;
padding:5px;
}

a.dynamic.menu-item.ms-core-listMenu-item.ms-displayInline.ms-navedit-linkNode:hover {
background: #D9D9D9 !important;
margin: 0px -10px 0px -10px;
}


6.       To fix the Overlapping menu, use this following CSS code.

#zz13_RootAspMenu
{
margin-left: -60px;
margin-bottom: 0px;
                }

7.       You can also apply Bulge effect for the header background to look better

#s4-titlerow {
margin-top: 0px;
margin-bottom: 0px;
padding-top: 5px;
padding-bottom: 5px;
background: url("/_layouts/images/bgximg.png") repeat-x -0px -1023px;
background-color: #f9f9f9;
}

#titleAreaBox {
margin: auto 20px;
width: 95%;
}






8.       For wrapping the menu, use the below CSS


.ms-breadcrumb-top {
white-space: inherit;
}

9.       Set the search box layout position

#SearchBox
{
margin-top:20px;
}

                                                                                                                      


10.   The final output will be shown as below,







Comments

Post a Comment

Popular posts from this blog

Using External Content Types with Stored Procedures with Input Parameters

Image
You must have tried External Content Types - the exciting new feature in SharePoint 2010 to connect to an external SQL table and provide a list where it lists, creates, updates data straight into the SQL table. People always wonder, how do you get a ECT to work with a Stored Procedure, one that has input parameters. You could do it this way... Step 1: In your SharePoint Designer 2010, create a new external content type Step 2: Connect to your SQL Server and then make sure you see the Routines (your stored procedures must be listed here) Step 3: Rt Click on the Stored Procedure name and create operations for "Read Item" and "Read List" - both are required for the External Content Type's SharePoint list to be created. During both these wizards, in the Input Parameters, your SP's Input Parameter will be listed. Here, you need to create a filter, which sends out it's value to the SP's filter. For example, if your SP's Input Parameter is @Emp...
Read more

Validate a SharePoint Date Field against Current Date in Javascript

Consider the following scenario: You have a SharePoint Site which has its regional settings set to English (UK) - so that the date format becomes dd/mm/yyyy in all date pickers You would like to validate a particular date field in your List or Document Library against the current date If the validation does not pass, you should not allow the form to save So what the script does is: Uses the sputility (check my previous posts and also look at http://sputility.codeplex.com) to get the particular SharePoint date field It comes out as a date datatype, so I cast it to string Since the format is in dd/mm/yyyy and Javascript compare and date functions work only with mm/dd/yyyy, I am converting them back to that format then using UTC string conversions and comparing... Enjoy! <script type="text/javascript"> function PreSaveAction() {  var createdate = SPUtility.GetSPField('Date of Creation').GetValue();  var createdatestr=createdate.toString();      ...
Read more