In Getting Started with Modern Theme Builder (Part 1) we learned what is ShortPoint Theme Builder and how we can launch it to customize SharePoint Modern sites. Let us now explore its different features and how to use the theme generator to create gorgeous team sites and communication sites.

 

Note: This article discusses ShortPoint Theme Builder for Microsoft SharePoint pages with the Modern experience in Microsoft Office 365 (SharePoint Online) and SharePoint 2019 environments.

If you wish to customize classic sites and SharePoint 2013/2016 (on-premise) environments, please check out our support article on Getting Started with ShortPoint Theme Builder - Classic SharePoint Sites (Part 1). It details how ShortPoint Theme Builder works for classic pages.

TABLE OF CONTENTS

Step 1: Customize your modern site


ShortPoint Theme Builder allows you to customize out-of-the-box SharePoint modern page elements and settings without having to do coding. This is most useful especially since Modern sites no longer support a master page. 


When you open Theme Builder, a window containing a menu of items you can modify will appear. Any changes you make within this window will be applied to the page preview of your site in real-time.


In each item, you will find several design options you can enable and modify according to your requirements. We will give you an overview of the main functionalities you can use to get you started with creating a new custom theme.


General Settings


Let us begin with some general site layout changes that you can apply to your modern pages.



  • General layout


Incorporate a modern look to your site by adding a box or frame design to your page layout. Check more details in our article on General Layout Theme Builder Options for Modern SharePoint Sites.

  • Elements


Disable out-of-the-box SharePoint site elements for all sites or selected site pages and subsites.

  • Move to Top


Add a scroll-back-to-top button for easier navigation on your modern pages. Customize its color and appearance according to your site’s theme.

  • Dividers & Corners


Modify spacing between your header and web parts by changing paddings and margin values.

Here is an example of how you can customize your SharePoint site pages using the General Settings in Modern ShortPoint Theme Builder:


Branding


Set up your organization’s prescribed branding colors and save them as a custom theme for your intranet sites with the options under Branding. 

  • Color Palette


View and customize SharePoint theme color options by using the color picker tool or adding a hex color code. All the Fabric Palette Colors introduced by Microsoft are available in all ShortPoint Color Pickers.


  • Advanced Colors


Select a Theme Primary color code and ShortPoint Theme Builder will take care of automatically creating custom color shades of your Theme Primary Color.


  • Color Theme Tool


Modify and save a color palette under a theme name in Color Theme Tool. 

Publish the new theme, and it will be added in SharePoint Settings in the Change the look theme options. This can then be selected alongside SharePoint default themes by site owners throughout your site collection. 

You can check more details about this feature in our article on SharePoint Color Palette and Themes Tool.

Fonts & Typography


Choose the fonts you want to use on your modern site’s body text, headings, site titles, and other web parts. Select from 800+ most popular web fonts that are readily available. 

You can also upload custom fonts in the Utilities section of Theme Builder and select them there.


Learn more by accessing our article on Fonts and Typography Theme Builder Options for Modern SharePoint Sites.


Background


Have the flexibility to use a background image or select a background color. You can also choose a color overlay to your background image to enhance your page design:



Customize the out-of-the-box SharePoint page header design easily by adding a few changes in Modern Theme Builder.

Customize your site’s browser tab by editing its title and adding your own favicon.

  • Background

Create an eye-catching header by adding an image and using advanced settings to determine how it will be displayed.

  • Command Bar

Make your command bar stand out by changing the color of its background, text, icons, and hover over action.

  • Before & After

Add dividers and increase thickness to clearly highlight your page header.

  • Paddings & Margins

Control your header’s height by changing padding and margin values.

Here is an example of how you can customize your SharePoint page Header using the Header Settings in Modern ShortPoint Theme Builder:



Using ShortPoint, you can have full flexibility on adding a footer to your SharePoint modern sites. 

Build a footer from ShortPoint Generator or copy a template from our demos library and use ShortPoint Modern Theme Builder to attach the footer content in the way you want. 

Find more detailed steps on Getting Started with ShortPoint Footer for SharePoint in our Knowledge Base.



Design a better navigation experience by changing menu layouts and colors. 


You have the option to adjust alignment, background colors, and menu spacing in your hub, primary, and sub-menus in Modern Theme Builder. You also have the freedom to change the hover color of menu items according to your preference.


Mobile Settings


Launch a preview of your modern pages on mobile devices instantly by selecting the mobile devices icons in the Modern Theme Builder window. This will open a new window where any changes you apply to your page can be seen on the mobile user interface in real-time:


You can make specific customizations that will be applied only to mobile devices in the Mobile Settings section. Modify how mobile elements appear through the options in Theme Builder:


Utilities


Take your design to the next level by adding a few codes where it is necessary and have the ability to restore your site to its original state in the Utilities section.

  • Custom CSS and Custom JavaScript

If you want to apply more advanced features, create your own custom CSS and JavaScript code and incorporate it into your site design. 

Find more information in our How to Apply Custom JavaScript/CSS article found in our Knowledge Base.


  • Import/Export

You can export ShortPoint Theme Builder customizations from another site collection and import them into your site. 

Access our article on Export and Import Customizations to learn more. We have several theme templates that you can import and start with in our demos library.

  • Custom Fonts

Load custom fonts into your fonts list by copying and pasting their custom CSS codes or embed codes. 

ShortPoint Theme Builder allows you to add custom fonts from several sources: Google Fonts, Fonts.com, Adobe Typekit, as well as upload your custom fonts manually. 

Check out our folder dedicated to custom fonts in our Knowledge Base.

  • Reset

You also have two distinct Reset options. 

Choose to discard unpublished changes you made in Theme Builder or revert to the original default settings in SharePoint:


Get Support


You may have questions or encounter concerns you need help with while in the middle of modifying your modern site. Get immediate support by clicking the Get Support button or searching our Knowledge base.



These are all ShortPoint Theme Builder features you can access and use for creating the best design for your SharePoint modern sites.

Step 2: Publish Your Theme


After all the beautiful customization you have done, it's time to publish your work. 

Click Publish from your Modern ShortPoint Theme Builder, and you will be brought back to your home page:



Once published, your users will see your site’s new look and feel.

Related Articles: