Try ShortPoint nowBy default, the location of the Counter Symbol in the Counter Boxes cannot be changed.
However, you can move the Counter Symbol’s location to the left using Custom CSS. This especially comes in handy for certain symbols, such as the dollar sign ($) symbol in the example below:
Follow the steps below to learn how to accomplish this.
TABLE OF CONTENTS
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 already have the Counter Boxes Design Element on your SharePoint page.
Interactive Tutorial
Copy the code below before starting the interactive tutorial:
.shortpoint-counter-symbol {
position: relative;
float: left;
}Step-by-step Tutorial
Follow the detailed guide below to learn how to change the location of the Counter Symbol.
Step 1: Edit the ShortPoint Web Part
- Go to the SharePoint page you want to use and click Edit:
- Click the close icon to exit the Toolbox:
- Click the ShortPoint tag.
- Select the Edit properties icon:
Step 2: Copy the Code
- Copy the Custom CSS code below:
.shortpoint-counter-symbol {
position: relative;
float: left;
}Step 3: Edit the Counter Boxes Design Element
NOTEBefore proceeding, make sure you already have the Counter Boxes Design Element on your page. To learn how to add it to your page, check out How to Customize the Counter Boxes Design Element.
- Click the Counter Boxes tag:
- Select the cogwheel icon:
Step 4: Paste the Code
- Click the next icon:
- Navigate to the Custom CSS tab.
- Paste the code.
Step 5: Save
- Click the green check mark once done.
- Click the eye icon to see your page in real-time:
- Click Save to apply all your changes.
That’s it! You can now change the location of the Counter Symbol in the Counter Boxes Design Element.
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)
