How can we help you today?

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.

Default Counter Symbol LocationCounter Symbol Moved Left w/ CSS

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


Before we begin

ShortPoint CSS customizations are available in ShortPoint version 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:

Visual Builder Open 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:

Wireframe Open Settings

  • Legacy Page Builder:

Legacy Wireframe Open Settings

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;

Please copy the code to the clipboard.

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

3.1. Switch to the Custom CSS tab

  • In Live Builder

Visual Builder Custom CSS tab

  • In Grid Mode

Wireframe Custom CSS tab

3.2. Paste the copied code

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

  • In Live Builder

Visual Builder Paste CSS

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

  • In Grid Mpde

Wireframe Paste CSS

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

Preview CSS

3.3. Confirm your changes

  • In Live Builder

Click the checkmark button:

Confirm Changes

  • In Grid Mode

Click Update

Confirm Changes

Finally, save and/or republish the page.


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:

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 54 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