How to Add Custom CSS Using ShortPoint Code Editor Web Part

Learn how to customize your Modern SharePoint pages with custom CSS using the ShortPoint Code Editor Web Part. This simple guide will walk you through adding custom styles to enhance your SharePoint pages. Follow our Quick Walkthrough for concise instructions or use our detailed step-by-step tutorial.

TABLE OF CONTENTS

• Prerequisites
• Quick Walkthrough
• Step-by-step Tutorial
  • Step 1: Copy custom CSS code
  • Step 2: Edit the SharePoint page
  • Step 3: Add the ShortPoint Code web part
  • Step 4: Edit properties and customize
  • Step 5: Republish the page

Prerequisites

• The ShortPoint Code Editor Web Part is installed on your SharePoint site. To learn how to do this, read our article on How to Install ShortPoint Code Editor in SharePoint.
• You have the appropriate SharePoint permissions to edit the page where you want to add custom CSS code.

Quick Walkthrough

1. Get your custom CSS code ready. Either write it yourself or obtain it from a trusted source, then copy the code to your clipboard.
2. Go to your SharePoint page and click the Edit button to enter edit mode.
3. Add ShortPoint Code by clicking the + button and selecting it from the web parts library.
4. Click the Edit properties button.
5. In the CSS field, paste your custom CSS code.
6. Review and customize your code. Adjust parameters to match your needs.
7. Republish the page.

Step-by-step Tutorial

You can either write custom CSS code to style your SharePoint web parts and pages, or use CSS snippets shared by SharePoint experts online. In this tutorial, we'll show you how to apply custom CSS to give your SharePoint web parts rounded corners.

Just like this SharePoint Banner web part:

Here's how to add custom CSS code to your page:

Step 1: Copy custom CSS code

• Prepare your CSS code by writing it yourself or obtaining a code snippet from a trusted source. In our example, we’ve written a custom code to apply rounded corners to a SharePoint web part.
• Copy this code to your clipboard.

[data-sp-feature-tag="PageTitle web part (Banner)"] { /* this selector can be found by inspecting the web part */
    border-radius: 20px;
    overflow: hidden;
}

Step 3: Add the ShortPoint Code web part

• Close the Toolbox to get a full view of the page while editing.

• Click the + icon to Add a new web part.

• Search for ShortPoint Code in the web parts library and select it.

Default content will appear on your page.

Step 4: Edit properties and customize

• Hit the Edit properties button. This will open the ShortPoint Code Editor window.
• Remove the default content and paste your copied code in the CSS field. You can also edit the code in the expanded editor view.
• Delete other codes in the HTML and Javascript fields.
• Disable the Contain CSS Styles toggle.

The SharePoint web part will now display with rounded corners.

Step 5: Republish the page

When you're ready to share your changes, click Republish. Your users will then see the new styling on your Modern SharePoint page.

That's it! You've learned how to apply custom CSS styling to your SharePoint page using the ShortPoint Code Editor web part.

Related articles:

• ShortPoint Code Editor Web Part: List of Resources
• Getting Started With ShortPoint Code Editor Web Part
• How to Add Custom Code Using the ShortPoint Code Editor Web Part
• How to Add HTML Code Using ShortPoint Code Editor Web Part