How to Change the Panel Title Alignment (to Center or Right)

By default, the ShortPoint Panel Design Element aligns the Title to the left:

This article will demonstrate how you can align the title center or right using Custom CSS:

TABLE OF CONTENTS

• Prerequisites
• Align to Center
  • Interactive Tutorial (Align to Center)
  • Step-by-step Tutorial (Align to Center)
    • Step 1: Edit the ShortPoint web part
    • Step 2: Copy the Custom CSS 
    • Step 3: Paste the Custom CSS
    • Step 4: Save
• Align to Right
  • Interactive Tutorial (Align to Right)
  • Step-by-step Tutorial (Align to Right)
    • Step 1: Edit the ShortPoint web part
    • Step 2: Copy the Custom CSS 
    • Step 3: Paste the Custom CSS
    • Step 4: Save

Prerequisites

• You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
• You must be a ShortPoint Designer with an active license.
• You must have a Panel Design Element on your page.

Align to Center

This will demonstrate how to align the Title text to the center. Start the interactive tutorial or go through the step-by-step tutorial to get started:

Interactive Tutorial (Align to Center)

Before starting the tutorial, copy the custom CSS below:

p.shortpoint-panel-title.shortpoint-clearfix {
  text-align: center;
}

Step-by-step Tutorial (Align to Center)

Follow the step-by-step guide to get detailed instructions on how to align to the center:

Step 1: Edit the ShortPoint web part

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

• Click the ShortPoint tag.
• Select the pencil icon.

Step 2: Copy the Custom CSS 

• Copy the custom CSS below:

p.shortpoint-panel-title.shortpoint-clearfix {
  text-align: center;
}

NOTEBefore proceeding, make sure you already have the Panel Design Element on your page.

p.shortpoint-panel-title.shortpoint-clearfix {
  text-align: right;
}

NOTEFor more information on Custom CSS, check out How to Insert Custom CSS into a Page Builder Element

Step-by-step Tutorial (Align to Right)

Follow the step-by-step guide to get detailed instructions on how to align to the right:

Step 1: Edit the ShortPoint web part

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

• Click the ShortPoint tag.
• Select the pencil icon.

Step 2: Copy the Custom CSS 

• Copy the custom CSS below:

p.shortpoint-panel-title.shortpoint-clearfix {
  text-align: right;
}

NOTEBefore proceeding, make sure you already have the Panel Design Element on your page.

Related articles:

• How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial)
• Add Custom CSS to a ShortPoint Element Right from the Page Builder (Advanced Tutorial)
• How to Make Rounded Corners for ShortPoint Columns