How to Customize ShortPoint Design Elements using the CSS Class Name and Custom CSS

In this article, we will show you how to customize a ShortPoint Design Element by adding a specific class name and overriding its behavior using Custom CSS.

Let’s take this Info Design Element as an example. We will change the text color to yellow and add a yellow border around the Design Element. 

TABLE OF CONTENTS

• Prerequisites
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Create a CSS code that contains your customizations
  • Step 2: Paste the CSS code you created in Theme Builder
  • Step 3: Edit the ShortPoint web part
  • Step 4: Edit a Design Element
  • Step 5: Add a Class name
  • Step 6: (Optional) Apply the same Class name to other Design Elements
  • Step 7: Preview and Save

Prerequisites

• You must have the latest version of ShortPoint installed on your SharePoint environment.
• You must be a ShortPoint Designer with an active license.
• You must have existing Design Element/s you want to customize.

Interactive Tutorial

Click Get Started to learn how to customize Design Elements using the CSS Class Name and Custom CSS:

Step-by-step Tutorial

Follow the steps below for a detailed guide on how to customize Design Elements using the CSS Class Name and Custom CSS:

Step 1: Create a CSS code that contains your customizations

• Create a CSS code according to the customizations you want to apply to your Design Element.

For example, we created the CSS code below to update the text color of our chosen Design Element to yellow and add a thick dashed border around it.

• Copy the CSS code you created.

Step 2: Paste the CSS code you created in Theme Builder

• Refer to Apply Custom CSS from ShortPoint Theme Builder to learn how to apply your CSS Customizations in Theme Builder.

Step 3: Edit the ShortPoint web part

• Go to the SharePoint page with the existing Design Element you want to customize and click Edit.
• Click the ShortPoint tag.
• Select the pencil icon.

Step 4: Edit a Design Element

• Look for the Design Element you want to use and click it.
• Select the cogwheel icon.

NOTE: You can use any Design Element you prefer to accomplish this tutorial.

Step 5: Add a Class name

• Go to the Custom CSS tab.
• Add “my-custom-colors” in the Class field:

• Once you are satisfied with your edits, click the green checkmark.

Step 6: (Optional) Apply the same Class name to other Design Elements

• If you want to apply the same customization to multiple Design Elements on your page, repeat steps 3-5 of this tutorial.

Step 7: Preview and Save

• Once you are satisfied with your edits, click the eye icon.

• Click Save to apply all changes.

That’s it! You now know how to customize ShortPoint Design Elements using the CSS Class Name and Custom CSS. Enjoy using this feature on your SharePoint pages.

Related articles:

• How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial)
• How to Change the Background Color of the Countdown Design Element
• Make the Countdown Design Element not Display Seconds