How can we help you today?

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.


BasicCustom

TABLE OF CONTENTS


Prerequisites


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.


Edit the SharePoint page

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.



edit Accordion design element

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


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.


apply changes

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.


save edits


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:


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