Apply Custom CSS from ShortPoint Theme Builder

This article will demonstrate how to apply Custom CSS using ShortPoint Theme Builder.

TABLE OF CONTENTS

• Prerequisites
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Open the ShortPoint Dashboard
  • Step 2: Open the ShortPoint Theme Builder
  • Step 3: Apply your Custom CSS
  • Step 4: Publish

Prerequisites

• You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
• You must be a ShortPoint Designer with an active license.

Interactive Tutorial

Start the interactive tutorial to learn how to add Custom CSS in ShortPoint Theme Builder:

Step-by-step Tutorial

Follow the steps below for a detailed guide on how to apply Custom CSS:

Step 1: Open the ShortPoint Dashboard

• Click the cogwheel icon on the screen’s upper right corner.

• Select Site Contents.
• Then, look for ShortPoint Dashboard and click it.

Step 2: Open the ShortPoint Theme Builder

• On the ShortPoint Dashboard, select Theme Builder.
• Select [1] Classic if you have a classic SharePoint page or [2] Modern if you have a modern SharePoint page.

NOTE: To learn more about the classic and modern options, check out What is the difference between ShortPoint Classic and Modern Theme Builder?

• Then, click Customize my site.

Step 3: Apply your Custom CSS

• From the options in the Theme Builder, select Utilities.
• Then, choose Custom CSS.
• Paste your CSS code in the Custom CSS field.

Step 4: Publish

• Once you are satisfied with the changes you’ve made, click Publish.

Congratulations! You have successfully applied Custom CSS using ShortPoint Theme Builder. You can now start customizing your pages using this feature.

Related Articles:

• What is the difference between ShortPoint Classic and Modern Theme Builder?
• How to Apply Custom JavaScript/CSS on a Modern SharePoint Site
• How to Apply Custom CSS on Specific Pages