Introduction

Using PnP cmdlets you can do amazing stuff to customize your SharePoint Online site. In this article we will focus on customizing SharePoint site header, at the top of the SharePoint site. If you haven’t installed the module yet, visit the PnP PowerShell Site for detailed instructions.

Set Header Size

There are 2 PnP cmdlets which you can use to set the size of your SharePoint Online site header: Set-PnPWeb and Set-PnPWebHeader.

Set-PnPWeb -HeaderLayout Standard

Set-PnPWebHeader -HeaderLayout Compact

Accepted values are: None, Standard, Compact, Minimal, Extended

None	Compact	Extended	Minimal

Set Header Color

There are 2 PnP cmdlets which you can use to set the emphasis of your SharePoint Online site header which is reflected in its color: Set-PnPWeb and Set-PnPWebHeader.

Set-PnPWeb -HeaderEmphasis Soft

Set-PnPWebHeader -HeaderEmphasis Strong

Accepted values: None, Neutral, Soft, Strong

None	Neutral	Soft	Strong

The exact colors are defined in your theme palette. For more details on color schemes available in your SharePoint Online site theme, have a look at Generate SharePoint theme using Theme Generator tool and Available Theme Tokens and Their Occurrences.

Remove Site Title

There are 2 PnP cmdlets that can make site title invisible on your SharePoint site.

Set-PnPWeb -HideTitleInHeader

Set-PnPWebHeader -HideTitleInHeader

Set Site Logo

Using Set-PnPWeb or Set-PnPWebHeader you can set the image of your site logo.

Set-PnPWeb -SiteLogoUrl /sites/floow1/SiteAssets/sitelogo.jpg

Set-PnPWebHeader -SiteLogoUrl /sites/floow1/SiteAssets/sitelogo.jpg

You can also set the position of your SharePoint Online site logo. Important! Works only with Extended Layout.

Set-PnPWebHeader -LogoAlignment Middle

Set-PnPWebHeader -LogoAlignment Right

Set-PnPWebHeader -HeaderBackgroundImageUrl /sites/floow1/SiteAssets/sitelogo.jpg

Set Focal Point of the Header Background Image

These cmdlets work only with Extended Header Layout. They set the position of the focal point (the yellow circle that you can see in the User Interface):

Set-PnPWebHeader -HeaderBackgroundImageFocalX 200
Set-PnPWebHeader -HeaderBackgroundImageFocalY 2

Site Header Background Image after the update:

Multiple sites

Usually it doesn’t make sense to use PowerShell for changing the settings only for one SharePoint site. UI provides similar options and is more accessible for non-developer users. However, for introducing unified settings for thousand sites, nothing matches good ol’ Powershell.

The following sample sets the site header and logo on selected SharePoint Online sites, provided through CSV. Make sure one of the columns/properties in your CSV file is SiteUrl.

$sites = Import-CSV C:\yourCSVPath.csv
$credentials = Get-Credential

foreach($site in $sites){

    # Connect to the current site
    Connect-PnPOnline -Url $Site.SiteUrl -Credentials $Credentials

    # Set the header image. Organization asset library could be a good place for storing it.
    Set-PnPWebHeader -HeaderBackgroundImageUrl "/sites/OrgAssets/Logos/sitelogo.jpg"
    Set-PnPWebHeader -HeaderBackgroundImageFocalX 200
    Set-PnPWebHeader -HeaderBackgroundImageFocalY 2

    # Set the site logo and logo alignment
    Set-PnPWebHeader -SiteLogoUrl /sites/floow1/SiteAssets/sitelogo.jpg
    Set-PnPWebHeader -LogoAlignment Middle

    # Just a precaution, not necessary, because Connect-PnPOnline disconnects the previous connection
    Disconnect-PnPOnline
}

Customize your site header using PnP