How can we help you today?

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. 


Sample Info Design Element


TABLE OF CONTENTS


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.


sample CSS code

  • Copy the CSS code you created.

Step 2: Paste the CSS code you created 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:


class name

  • 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.


eye icon


  • Click Save to apply all changes.

Save

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:






Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 58 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more