How to Change the Location of the Symbol in the Counter Boxes Design Element with Custom CSS

By default, you cannot change the location of the Counter Symbol in the ShortPoint Counter Boxes Design Element, and it will show to the right of the Counter Number. However, you can move it to the left side with some custom CSS. This can come in handy for certain scenarios and symbols, such as the dollar sign ($) symbol, used in the example below.

Before	After

Follow the steps below to apply the custom CSS to your Counter Boxes Design Element.

TABLE OF CONTENTS

• Before we begin
• Step 1. Open the settings of the Counter Boxes Design Element
• Step 2. Copy the custom CSS code
• Step 3. Update the Counter Boxes Design Element with the code
  • 3.1. Switch to the Custom CSS tab
  • 3.2. Paste the copied code
  • 3.3. Confirm your changes
• Result

Before we begin

ShortPoint CSS customizations are available in ShortPoint version 5.2.2.28 or higher. We recommend you to always have the latest version installed. Visit our Download ShortPoint page and get the latest version of ShortPoint.

Step 1. Open the settings of the Counter Boxes Design Element

Edit the page. Open the settings of the Counter Boxes Design Element:

• In Live Builder

Locate the Counter Boxes Design Element where you would like to add the custom CSS and enter the EasyPass Active Mode. Then click the cog wheel icon to open the settings:

The Design tab will open.

• In Grid Mode

Click the cog wheel icon to open the settings of the Counter Boxes Design Element:

• New ShortPoint Page Builder Grid Mode:

• Legacy Page Builder:

The Settings tab will open.

Step 2. Copy the custom CSS code

Here is the custom CSS code you will need to use for moving the symbol in the Counter Boxes Design Element:

.shortpoint-counter-symbol {
    position: relative;
    float: left;
}

Step 3. Update the Counter Boxes Design Element with the code

3.1. Switch to the Custom CSS tab

• In Live Builder

• In Grid Mode

3.2. Paste the copied code

Paste the code from the Step 2 into the Custom CSS field:

• In Live Builder

You will see the changes applied to your Design Element in real time.

• In Grid Mpde

You may check how it will look on your page by clicking the Preview button:

3.3. Confirm your changes

• In Live Builder

Click the checkmark button:

• In Grid Mode

Click Update: 

Finally, save and/or republish the page.

Result

That's it. Your symbol should now be on the left side of the Counter Boxes Design Element, as shown in the Preview above.

Related articles:

• How to Make Bold Titles, Symbols and Numbers of the ShortPoint Counters Boxes
• How to Make the Counter Boxes Show the Total Number of Items in a SharePoint List
• How to Make the Counter Boxes Show the Number of Items in a SharePoint List (Different Views)
• Add Custom CSS to a ShortPoint Element Right from the Page Builder (Advanced Tutorial)