How can we help you today?

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

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


Left title alignment


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


center and right alignment


TABLE OF CONTENTS


Prerequisites


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.


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;
}

Step 3: Paste the Custom CSS


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

  • Click the Panel tag and select the cogwheel icon.
  • Navigate to the Custom CSS tab.
  • Paste the code you copied from Step 2 in the Custom CSS field.
  • Click the green checkmark.

Step 4: Save

  • Click the eye icon to see how your page will look in real-time.


eye icon

  • Once satisfied, click Save.


Save


Align to Right

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


Interactive Tutorial (Align to Right)

Before starting the tutorial, copy the custom CSS below:

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.


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;
}

Step 3: Paste the Custom CSS


NOTEBefore proceeding, make sure you already have the Panel Design Element on your page.
  • Click the Panel tag and select the cogwheel icon.
  • Navigate to the Custom CSS tab.
  • Paste the code you copied from Step 2 in the Custom CSS field.
  • Click the green checkmark.

Step 4: Save

  • Click the eye icon to see how your page will look in real-time.


eye icon

  • Once satisfied, click Save.


Save


That's it! You now know how to change the Title text alignment using Custom CSS. Enjoy utilizing this on your own pages.


Related articles:












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