How to Customize Your SharePoint Site Header Using ShortPoint Theme Builder

By default, your SharePoint site header may not fit the branding of your company because of its basic design:

This tutorial will demonstrate how to use ShortPoint Theme Builder to brand your SharePoint site header. With Theme Builder, you can customize its color, add dividers, adjust logo settings, and so much more:

TABLE OF CONTENTS

• Prerequisites
• Step-by-step Tutorial
  • Step 1: Open Theme Builder
  • Step 2: Go to Header Settings
  • Step 3: Customize the Logo
  • Step 4: Add a Background
  • Step 5: Customize the Command Bar
  • Step 6: Add Dividers (Optional)
  • Step 7: Adjust Space Around the Header
  • Step 8: Publish
• Header Features
  • Logo
  • Background
  • Command Bar
  • Before & After
  • Paddings & Margins
  • ShortPoint Shortcuts

Prerequisites

• You must already have ShortPoint SPFx installed on your SharePoint environment.
• You must be a ShortPoint Designer with an active license.

Step-by-step Tutorial

Follow the steps below for a detailed guide on how to brand your header:

Step 1: Open Theme Builder

Click the ShortPoint icon:

Select Theme Builder:

Step 2: Go to Header Settings

Select Header:

Step 3: Customize the Logo

Click Logo:

Customize the logo according to your preferences:

NOTETo see more options you can customize under Logo, check out Header Features.

Step 4: Add a Background

Click Back:

Select Background:

Choose whether you want to add a background image or a background color. For this guide, we will add a background color:

NOTETo see more options you can customize under Background, check out Header Features.

Step 5: Customize the Command Bar

Click Back:

Select Command Bar:

 Customize the Command Bar according to your preferences:

NOTETo see more options you can customize under Command Bar, check out Header Features.

Step 6: Add Dividers (Optional)

Click Back:

Select Before & After:

Toggle on dividers before or after the header and customize how it looks:

NOTETo see more options you can customize under Before & After, check out Header Features.

Step 7: Adjust Space Around the Header

Click Back:

Select Paddings & Margins:

Customize the padding according to your preferences:

NOTETo see more options you can customize under Paddings & Margins, check out Header Features.

Step 8: Publish

Publish your changes to make it live:

Awesome! You now know how to customize your SharePoint header using Theme Builder.

Header Features

Below are the settings you can customize inside the Header section:

Logo

Options under logo allow you to customize the logo size, add a favicon, and so much more.

	Site Title	allows you to choose the site title of the browser tab.
	Logo Link	allows you to add a link to the logo.
	Logo Link Title	allows you to add a title to the logo link.
	Favicon	allows you to customize the favicon of the browser tab.
	Logo Width	adjusts the width of the logo.
	Logo Height	adjusts the height of the logo.
	Logo Margin top	adjusts the top margin of the logo.
	Logo Margin bottom	adjusts the bottom margin of the logo.
	Logo Margin left	adjusts the left margin of the logo.
	Logo Margin right	adjusts the right margin of the logo.

Background

Options under background allow you to add a background image or color.

	Header background image	allows you to choose an image to serve as the header background.
	Header Color Overlay	allows you to choose the background color of the header. You can write [1] HEX code, [2] choose from the drop-down, or [3] use the color picker.
	Enable advanced settings for Header Background Image	when enabled, additional settings for background images will appear.
	Header Background Image Size	choose the size of the background image. You can choose from actual size, cover, contain, or custom.
	Header Background Image Horizontal Position	select the horizontal position of the background image. You can choose from left, right, or center.
	Header Background Image Vertical Position	select the vertical position of the background image. You can choose from top, bottom, or center.
	Header Background Image Attachment	select the attachment of the image from scroll or fixed.
	Header Background Image Repeat	choose the type of image repeat. You can select from Repeat, Don’t Repeat, Repeat Horizontally, or Repeat Vertically.

Command Bar

Options under the Command Bar allow you to customize how it looks.

	Background Color	allows you to choose the background color of the command bar. You can write [1] HEX code, [2] choose from the drop-down, or [3] use the color picker.
	Hover Background Color	allows you to choose the background color of the command bar when a user hovers over it. You can write [1] HEX code, [2] choose from the drop-down, or [3] use the color picker.
	Text Color	allows you to choose the text color of the command bar. You can write [1] HEX code, [2] choose from the drop-down, or [3] use the color picker.
	Hover Text Color	allows you to choose the text color of the command bar when a user hovers over it. You can write [1] HEX code, [2] choose from the drop-down, or [3] use the color picker.
	Icon Color	allows you to choose the icon color of the command bar. You can write [1] HEX code, [2] choose from the drop-down, or [3] use the color picker.
	Hover Icon Color	allows you to choose the icon color of the command bar when a user hovers over it. You can write [1] HEX code, [2] choose from the drop-down, or [3] use the color picker.

Before & After

Options under Before & After allow you to add dividers before and/or after the header.

	Enable Divider Before Header	when enabled, a divider will appear before the header.
	Before Header Divider Color	allows you to customize the color of the divider before the header. You can write [1] HEX code, [2] choose from the drop-down, or [3] use the color picker.
	Before Header Divider Size	allows you to adjust the thickness of the divider before the header.
	Enable Divider After Header	when enabled, a divider will appear after the header.
	After Header Divider Color	allows you to customize the color of the divider after the header. You can write [1] HEX code, [2] choose from the drop-down, or [3] use the color picker.
	After Header Divider Size	allows you to adjust the thickness of the divider after the header.

Paddings & Margins

Options under Paddings & Margins allow you to adjust the space around the header.

	Header padding top	adjusts the top padding.
	Header padding bottom	adjusts the bottom padding.
	Header padding left	adjusts the left padding.
	Header padding right	adjusts the right padding.

ShortPoint Shortcuts

When enabled, the shortcut options will be only shown to ShortPoint designers.

	Enable quick access to Dashboard	when enabled, the option to quickly access the ShortPoint Dashboard will be available.
	Enable quick access to Theme Builder	when enabled, the option to quickly access the ShortPoint Dashboard will be available.

Related articles:

• Getting Started with ShortPoint Theme Builder - Modern SharePoint Sites (Part 1)
• Getting Started with ShortPoint Theme Builder - Modern SharePoint Sites (Part 2)
• Copy Themes from ShortPoint Demos Website