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.


Before
After
Default Counter Symbol LocationCounter Symbol Moved Left w/ CSS


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




TABLE OF CONTENTS


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:


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.


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:

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