Slayte theme: How to move page title (breadcrumb near logo) to title zone

This article is valid for Slayte theme, using Inner, LeftSidebar or RightSidebar masterpages only.

If you want to move SharePoint page title to Tile zone and achieve a smiliar look to the picture above, please follow the step described here.

Home page (example)

Site Settings > Masterpage (example)

  1. Open the site using SharePoint designer.
  2. Look for [ThemeName].css file, under Style Library.
    • Check out and edit the [ThemeName].css file.
    • Add the following code to the bottom of the file:
      #bt-pagetitle a { color: #FFF !important; }
      .BreadcrumbMain #bt-pagetitle h2 span,
      .BreadcrumbMain #bt-pagetitle p span { padding: 0; }
      .BreadcrumbMain #bt-pagetitle i.fa { padding: 0 3px; }
      
      @media (max-width: 993px) {
      	.BreadcrumbMain #bt-pagetitle h2 span,
      	.BreadcrumbMain #bt-pagetitle p span { display:inline-block; }
      	.BreadcrumbMain #bt-pagetitle h2 strong { line-height: 1.8em; }
      }
      
      
    • Save the .css file and check in (publish the major version).
  3. Look for BTScripts.js file, under js folder.
    • Check out and edit BTScripts.js file.
    • Add the following code to the bottom of the file:
      jQuery(document).ready(function($){
      	var pagetitleImg = $('#pageTitle #DeltaPlaceHolderPageTitleInTitleArea img[src*="/images/spcommon.png"]');
      	$(pagetitleImg).parent('span').attr('style','');
      	$(pagetitleImg).replaceWith('');
      	var pagetitleHtml = '<h2><strong>'+$('#pageTitle #DeltaPlaceHolderPageTitleInTitleArea').html()+'</strong></h2>';
      	$(pagetitleHtml).appendTo("#bt-pagetitle");
      	$("#pageTitle").remove();
      });
    • Save the .js file and check in (publish the major version).
  4. Go to the site and refresh the page. Your modifications should be visible.
Have more questions? Submit a request

Comments

Got a question?

If you can't find the answer to your question, you can contact us.
We are here and happy to help.

Powered by Zendesk