How to Use CSS to Achieve a Custom ShortPoint Accordion Design

Are you looking to customize your ShortPoint Accordions for a unique design? This article shows you how to use custom CSS to enhance the ShortPoint Accordion Design Element, helping you achieve a fresh and modern look.

Basic	Custom

TABLE OF CONTENTS

• Prerequisites
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint web part
  • Step 2: Insert or edit the Accordions Design Element
  • Step 3: Copy and paste the custom CSS
  • Step 4: Save and publish

Prerequisites

• You must have the latest version of ShortPoint SPFx installed in your environment.
• You must be a ShortPoint Designer with an active license.

Interactive Tutorial

Click the Get Started button in the interactive tutorial below to learn how to apply custom CSS to your Accordion.

Here's the custom CSS code you can apply to your Accordion:

> div {
  border-radius: 8px;
  margin: 8px;
  background: #f3f9ff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15) !important;
  padding-left: 12px;
}

> div:has(.shortpoint-open) {
    background: #ffffff;
}

.shortpoint-a {
  gap: 6px;
  align-items: center;
  color: #3161d1 !important;
}

.shortpoint-toggle-header {

    margin-bottom: 0;
    padding-bottom: 8px;
    padding-top: 8px;
}

Feel free to adjust the parameters to achieve your desired design. You can modify elements like the border-radius (in pixels) and the background color to match your preferences.

Step-by-step Tutorial

Follow these detailed steps to use custom CSS and achieve your unique design:

Step 1: Edit the ShortPoint web part

• Edit the SharePoint page where you want to insert or modify your Accordion Design Element.
• Close the SharePoint toolbox.
• Select the ShortPoint web part and click the Edit properties button.

Step 2: Insert or edit the Accordions Design Element

• Insert an Accordions Design Element and enter your content, or navigate to your existing content and click the cogwheel icon.

Note:
Check out How to Customize the Accordions Design Element to learn how to add an accordion to your page.

• In the settings window, switch to the custom CSS tab.

Step 3: Copy and paste the custom CSS

• Copy the custom code.

> div {
  border-radius: 8px;
  margin: 8px;
  background: #f3f9ff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15) !important;
  padding-left: 12px;
}

> div:has(.shortpoint-open) {
    background: #ffffff;
}

.shortpoint-a {
  gap: 6px;
  align-items: center;
  color: #3161d1 !important;
}

.shortpoint-toggle-header {

    margin-bottom: 0;
    padding-bottom: 8px;
    padding-top: 8px;
}

• Paste the code in the Custom CSS field.
• Modify the parameters to achieve your desired design. You can edit the values for elements like the border-radius (in pixels) and the background color to match your preferences.
• Once done, hit the Apply changes button.

Step 4: Save and publish

• Review how your Accordions look like in Preview mode.
• When you are satisfied with the result, hit Save and publish the page.

By applying this custom CSS code, you can enhance the ShortPoint Accordions Design Element beyond its basic design. Give it a try now!

Related article:

• How to Customize the Accordions Design Element
• How to Customize ShortPoint Design Elements using the CSS Class Name and Custom CSS
• How to Make the ShortPoint Accordions Open a Specific Item When the Page Is Loaded Using JavaScript
• How to Redirect Users to an Item in an Accordion on Another Page