How to Add Custom CSS to an Element : ShortPoint Support

Want a Design Element to look a little different from what its built-in settings allow? With the Custom CSS tab, you can add your own CSS code to any Design Element and see the result right away. This article shows you how to add Custom CSS to a Design Element in ShortPoint Page Builder.

TABLE OF CONTENTS

Prerequisites
What Is the Custom CSS Tab?
Interactive Tutorial
Step-by-step Tutorial
Practical Uses for the Custom CSS Tab
Frequently Asked Questions

Prerequisites

You have the latest version of ShortPoint SPFx installed on your SharePoint environment.
You are a ShortPoint Designer with an active license.
You have a Custom CSS code you want to apply to a Design Element.

What Is the Custom CSS Tab?

The Custom CSS tab is one of the tabs in a Design Element's settings window. It lets you style a Design Element beyond its built-in design options. For example, you can change colors and fonts, round corners, add shadows, or add hover effects.

Custom CSS tab of a Date List showing the Custom CSS, ID, and Class fields

Every Design Element has a Custom CSS tab. It has three fields:

Custom CSS: where you paste or type your CSS code. The code only applies to the Design Element you're editing and the Design Elements inside it.
ID: gives the Design Element a unique ID, which you can use for CSS overrides or JavaScript.
Class: adds one or more class names to the Design Element. Separate multiple class names with a space.

Changes you make in the Custom CSS field show up on your page instantly, so you can fine-tune your code while you watch the result.

To learn more about each field, see Custom CSS for ShortPoint Design Elements.

Interactive Tutorial

Click Get Started to try it yourself:

Step-by-step Tutorial

Step 1: Open ShortPoint Page Builder

Go to the SharePoint page you want to use and click Edit.

Clicking Edit on a SharePoint page before you add Custom CSS to a Design Element

Close the SharePoint Toolbox by clicking the X icon.

Closing the SharePoint Toolbox with the X icon to clear space on the page

Click the Edit properties icon on the ShortPoint web part toolbar. This opens ShortPoint Page Builder.

Edit properties icon on the web part toolbar that opens ShortPoint Page Builder

Step 2: Go to the Custom CSS Tab

Find the Design Element you want to style and click its EasyPass tag. In this example, we're styling a Date List.

Selecting the Date List EasyPass tag to choose the Design Element you want to style

Click the cogwheel icon. This opens the Design Element's settings window.

Cogwheel icon on the Date List EasyPass tag that opens the Design Element settings

Go to the Custom CSS tab.

Opening the Custom CSS tab in the Date List settings panel

TIPCan't see the Custom CSS tab? Click the arrow icon on the right side of the tabs to show more tabs.

Step 3: Add Your Custom CSS Code

Paste your CSS code into the Custom CSS field.

Empty Custom CSS field, ID field, and Class field on the Custom CSS tab

You'll see the result of your Custom CSS on the page right away. In this example, our code turns the Date List items into cards with blue date badges.

Pasting Custom CSS code and seeing the restyled Date List cards appear right away

For your reference, here's the Custom CSS we used:

/* ---------- Card ---------- */
.shortpoint-datelistitem .shortpoint-listitem-column {
    border-radius: 15px;
    background: #F5F8FF;
    border: 2px solid #E8EFFF;
    padding: 10px 14px;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.shortpoint-datelistitem:hover .shortpoint-listitem-column {
    background: #E8EFFF;
    box-shadow: 0 6px 16px rgba(57, 119, 249, 0.15);
}

/* ---------- Date tile ---------- */
.shortpoint-datelistitem [class*="date"]:not(.shortpoint-datelistitem) {
    background: linear-gradient(135deg, #3977F9 0%, #1F4FD1 100%) !important;
    color: #FFFFFF !important;
    border-radius: 10px;
    padding: 10px 14px;
    min-width: 64px;
    text-align: center;
    box-shadow: 0 6px 16px rgba(57, 119, 249, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.shortpoint-datelistitem [class*="date"]:not(.shortpoint-datelistitem) * {
    color: #FFFFFF !important;
    font-weight: 700;
}

.shortpoint-datelistitem [class*="bar"] {
    background: transparent !important;
}

.shortpoint-datelistitem:hover [class*="date"]:not(.shortpoint-datelistitem) {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 10px 22px rgba(57, 119, 249, 0.45);
}

/* ---------- Title: strong navy, turns brand blue on hover ---------- */
.shortpoint-datelistitem [class*="title"]:not([class*="subtitle"]),
.shortpoint-datelistitem [class*="title"]:not([class*="subtitle"]) * {
    color: #000D2C !important;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.01em;
    line-height: 1.3;
    transition: color 0.2s ease;
}

.shortpoint-datelistitem:hover [class*="title"]:not([class*="subtitle"]),
.shortpoint-datelistitem:hover [class*="title"]:not([class*="subtitle"]) * {
    color: #3977F9 !important;
}

/* ---------- Subtitle: small blue tag ---------- */
.shortpoint-datelistitem [class*="subtitle"] {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    background: #E8EFFF;
}

.shortpoint-datelistitem [class*="subtitle"],
.shortpoint-datelistitem [class*="subtitle"] * {
    color: #3977F9 !important;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

Need to tweak something? Edit your code as you go. Each change takes effect instantly. In this example, we adjusted the card's corner and border values.

Editing border values in the Custom CSS field to update the cards instantly

TIPDrag the settings window by its title bar to move it out of the way so you can see your Design Element while you work.

Step 4: Apply, Save, and Publish

When you're happy with the result, click the green checkmark to apply your changes.

Clicking the green checkmark to apply the Custom CSS changes to the Date List

Click Save to save your changes and leave Page Builder.

Saving your Custom CSS changes with the Save button in ShortPoint Page Builder

Click Publish changes to publish your page.

Publishing the SharePoint page so visitors can see the new Custom CSS styling

Amazing! You've successfully added Custom CSS to a Design Element.

Practical Uses for the Custom CSS Tab

Not sure where to start? These articles give you ready-to-use CSS codes that you can paste into the Custom CSS tab:

Hover effects

How to Add a Hover Color to the ShortPoint Tiles Design Element with Custom CSS: change the background color of tiles when you hover over them.
How to Apply Zoom on Hover Animation for Images in the Tiles Design Element: make tile images zoom in on hover.
How to Change the Hover Color of the Link Design Element: change the color of links when you hover over or select them.

Tabs and Accordions

How to Set a Separate Color for Each Tab of ShortPoint Tabs Design Element: give each tab title its own background color.
How to Add a Gradient Underline below ShortPoint Tabs: add a gradient line below the active tab.
How to Use CSS to Achieve a Custom ShortPoint Accordions Design: restyle accordion items with rounded corners, spacing, and shadows.

Text and Buttons

Creative Custom CSS snippets for Text Design Element: add effects like rainbow shadows, multicolor text, and 3D text.
Creative Custom CSS for the Button Design Element: change button gradients, font sizes, icon positions, and more.

Frequently Asked Questions

Which Design Elements have a Custom CSS tab?

All of them. Every Design Element has a Custom CSS tab in its settings window.

Do I need to write a selector for the Design Element itself?

No. ShortPoint applies your code to the Design Element you're editing. You can type CSS properties directly, such as background: #E8EFFF;. To style something inside the Design Element, write only the inner selector, such as .shortpoint-tile { ... }. To refer to the Design Element itself in a selector, use &, for example &:hover { ... }. Learn more in Add Custom CSS to a ShortPoint Element Right from the Page Builder (Advanced Tutorial).

Will my CSS affect other Design Elements on the page?

The CSS will only affect the Design Elements inside the one you're editing. For example, CSS added to a Row also applies to the Buttons inside that Row. Other Design Elements on the page aren't affected.

My CSS isn't working. What should I check?

Make sure you're using plain CSS. ShortPoint doesn't support SCSS or SASS, so convert it to CSS first. See ShortPoint Does Not Support SCSS Code.
Some built-in styles may override yours. Try adding !important to the property, for example color: #3977F9 !important;.
Check that you added the code to the right Design Element. Some codes need to go on a parent element, such as the Row or Panel that holds the element you want to style.

What's the difference between the Custom CSS tab and Theme Builder's Custom CSS?

The Custom CSS tab styles one Design Element. Theme Builder's Custom CSS applies across your whole site. If you want the same style on many Design Elements, add your CSS in Theme Builder and give those Design Elements the same name in the Class field. See Customize ShortPoint look and feel using the CSS class name and Custom CSS.

How do I remove Custom CSS from a Design Element?

Open the Design Element's Custom CSS tab, delete the code from the Custom CSS field, then click the green checkmark, Save, and Publish changes.

How to Add Custom CSS to a ShortPoint Design Element