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)
- Open the site using SharePoint designer.
- Look for
[ThemeName].css
file, underStyle 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).
- Check out and edit the
- Look for
BTScripts.js
file, underjs
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).
- Check out and edit
- Go to the site and refresh the page. Your modifications should be visible.
Comments