Try ShortPoint nowThe Custom CSS tab allows you to further customize ShortPoint Design Elements using your own CSS codes. You can also add ID attributes and Class names to further control the styling and behavior of your elements.
Live Mode:
Grid Mode:
This article will show you how to access the Custom CSS tab and expound on the features you can modify.
TABLE OF CONTENTS
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.
Opening Custom CSS Tab
Start the interactive tutorial to learn how to access the Custom CSS tab for ShortPoint Design Elements:
The steps to open the Custom CSS tab depend on the editing experience you’re using. Choose the option the suits your needs:
OPTION 1: Live Mode
Step 1: Edit the ShortPoint Web Part
- Go to the SharePoint page you want to use and click Edit:
- Close the Toolbox:
- Click the Edit Properties icon:
Step 2: Edit the Design Element
NOTEBefore proceeding, make sure you already have the Design Element you want to customize on your page. The Custom CSS tab is available for all Design Elements.
- Click the EasyPass tag of the Design Element:
- Then, click the cogwheel icon:
Step 3: Go to the Custom CSS tab
- Click the next icon:
- Go to the Custom CSS tab:
That’s it! You can now start adding your own CSS codes, ID attributes, or Class names.
OPTION 2: Grid Mode
Step 1: Edit the ShortPoint Web Part
- Go to the SharePoint page you want to use and click Edit:
- Close the Toolbox:
- Click the Edit Properties icon:
Step 2: Switch to Grid Mode
- Click the Switch to Grid Mode icon:
Step 3: Edit the Design Element
NOTEBefore proceeding, make sure you already have the Design Element you want to customize on your page. The Custom CSS tab is available for all Design Elements.
- Hover over the Design Element and click the cogwheel icon:
Step 4: Go to the Custom CSS tab
- Switch to the Custom CSS tab:
That’s it! You can now start adding your own CSS codes, ID attributes, or Class names.
Custom CSS Features
Below are the features you can modify inside the Custom CSS tab:
Custom CSS Field
This is where you can write your own CSS code to further customize how the Design Element will look.
Live Mode:
Grid Mode:
For more information about adding Custom CSS, check out the following tutorials:
- How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial)
- Add Custom CSS to a ShortPoint Element Right from the Page Builder (Advanced Tutorial)
You can also go to Custom CSS solutions folder to see all the ready-made Custom CSS codes we have prepared for you.
ID Field
This allows you to assign an ID attribute to a Design Element. You can use it to apply CSS overrides or use it in your JavaScript codes.
Live Mode:
Grid Mode:
Class Field
This allows you to assign Class name(s) to a Design Element. When adding multiple Class names, make sure to separate each class name with a space. For example, if you want to have class-1 and class-2 as class names, you will write it as class-1 class-2.
Live Mode:
Grid Mode:
Related articles:
- Managing Visibility of ShortPoint Design Elements
- Managing Paddings and Margins for ShortPoint Design Elements
- How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial)
- Add Custom CSS to a ShortPoint Element Right from the Page Builder (Advanced Tutorial)
- Enable Copying Elements from your Page
- ShortPoint Copy & Paste Feature for Modern Pages
- ShortPoint Live Demos with Copy and Paste Magic
