How to Modify the SharePoint Web Part Design Element Using Custom CSS or JavaScript

Starting ShortPoint SPFx version 8.7.3.0 and up, you can now further modify the SharePoint web part Design Element using custom CSS code and JavaScript code. You’ll be able to find this new enhancement in the Design tab under the Modify Embedded Web Part section:

This article will demonstrate how to use these new fields.

TABLE OF CONTENTS

• Prerequisite
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint web part
  • Step 2: Edit the SharePoint Web Part Design Element
  • Step 3: Prepare your Code
  • Step 4: Paste the code
  • Step 5: Save

Prerequisite

• You must have ShortPoint SPFx version 8.7.3.0 and up installed on your SharePoint environment.
• You must be a ShortPoint Designer with an active license.
• You must already have the SharePoint Web Part Design Element on your page. If you don’t have it yet, check out How to Embed a SharePoint Web Part into ShortPoint.

Interactive Tutorial

Start the interactive tutorial to learn how to modify the SharePoint web part Design Element using custom CSS code or JavaScript code:

Step-by-step Tutorial

Follow the steps below for a detailed guide:

Step 1: Edit the ShortPoint web part

• Go to the SharePoint page you want to use and click Edit:

• Close the Toolbox:

• Edit the ShortPoint web part:

Step 2: Edit the SharePoint Web Part Design Element

NOTEBefore proceeding, you must already have the SharePoint Web Part Design Element on your page. If you don’t have it yet, check out How to Embed a SharePoint Web Part into ShortPoint.

• Click the SharePoint Web Part tag:

• Select the cogwheel icon:

Step 3: Prepare your Code

• You can create your own custom CSS or JavaScript code. But for this guide, we want to hide the title of our embedded SharePoint web part.

• To do this, we used this custom CSS code:

div[data-automation-id="webPartHeader"] {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;