How can we help you today?

How to Insert Custom CSS into a ShortPoint Design Element (Basic Tutorial)

ShortPoint provides numerous possibilities for tailoring the design and functionality of its Design Elements. However, we recognize that you might come across specific needs that require basic to advanced coding. We have several support articles that offer Custom CSS solutions for various situations.


This article will demonstrate the straightforward process of applying Custom CSS to ShortPoint Design Elements whenever it is needed.


TABLE OF CONTENTS


Prerequisites

  • You have the latest ShortPoint SPFx version installed on your SharePoint environment.
  • You are a ShortPoint Designer with an active license.
  • You have identified a custom CSS that you want to use on a ShortPoint Design Element.

Interactive Tutorial

Follow along and experience how to insert a custom CSS through this interactive tutorial:



Step-by-step Tutorial

Quickly insert a custom CSS to a ShortPoint Design Element by following these detailed steps:


Step 1: Edit the ShortPoint web part

  • Begin by editing the SharePoint page you are working on.


edit sharepoint page


  • Then select the ShortPoint web part.
  • Enter edit mode by clicking the pencil icon.



Step 2: Open the Design Element settings window

  • Go to the ShortPoint Design Element you wish to apply a custom CSS to and press its label.
  • Click the cogwheel icon to open its settings window.


open settings window


Step 3: Enter the code in the Custom CSS tab

  • In the settings window, switch to the Custom CSS tab.
  • In the field provided, you can type your custom CSS code or paste a code you copied from our support articles or any other source.
  • Hit the green checkmark button to apply the changes.


custom CSS tab


Step 4: Preview the changes and save

  • Click the Preview button on the Action toolbar to check the results of your changes.
  • Once you are satisfied, remember to hit Save.


That’s it! That is how easy it is to apply a custom CSS to any of ShortPoint’s Design Elements. It is an added flexibility to expand the possibilities for your intranets.


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 54 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