How can we help you today?

How to Customize the Counter Boxes Design Element

This article will showcase the customizing options available for the Counter Boxes Design Element


Counter Boxes


TABLE OF CONTENTS


Prerequisite

  • You have the latest version of ShortPoint SPFx installed on your SharePoint environment.
  • You are a ShortPoint Designer with an active license.

Interactive Tutorial

Click Get Started to learn how to customize the Counter Boxes Design Element:



NOTECheck out Counter Boxes Features to learn more about the OOTB options you can customize.

Step-by-step Tutorial

Follow the steps below for a detailed guide on how to customize the Counter Boxes Design Element:


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:Insert the Icon Design Element

  • Click the plus icon.
  • Use the search box to look for Counter Boxes and click it.

Step 3: Edit the content

  • Click the cogwheel icon of the first item to edit its content.


cogwheel icon


  • Edit the Counter Number.
  • Add a Title.
  • (Optional) Choose an Icon to display.


NOTECheck out our Icons page to see all the icons you can add to your SharePoint page.
  • (Optional) Add a Link.
  • (Optional) Add a Background Image.

Step 4: Customize the Counter Boxes’ design

  • Navigate to the Design tab.
  • Customize the look of the Counter Boxes according to your preference.
  • Once satisfied, click the green check mark.


NOTECheck out Counter Boxes Features to learn more about the OOTB options you can customize.

Step 5: Save

  • Then, click the eye icon to see your page in real-time.


eye icon


  • Click Save to apply all your changes.


Save


Counter Boxes Features

Below are the options you can find in the Counter Boxes Settings window:


A. Items tab

The Items tab allows you to duplicate, delete, configure content, and add new items. It has the following options:


Items tab


ITEMS ACTION ICONS

Cogwheel iconCogwheel
opens a new window that allows you to edit the content of each item. See the table below for the cogwheel icon settings.
DuplicateDuplicateduplicates the item selected.
Trash iconTrash
deletes the item selected.

Add New
Add New
adds a new item.
Drag and DropDrag and Drop
allows you to re-arrange the position of the item.


COGWHEEL ICON SETTINGS 

Counter NumberCounter Number
allows you to modify the number to count inside the Counter Box.

Symbol
Symbolallows you to modify the symbol shown beside the number.
TitleTitleallows you to add item title.

Icon
Iconallows you to choose the Icon for each item.

NOTE: Check out our Icons page to see all the icons you can add to your SharePoint page.

Link
Linkallows you to add a link where users will be redirected when they click an item.

Background Image
Background Image
allows you to add a background image

B. Design tab

The Design tab allows you to customize the look of the Counter Boxes Design Element. It has the following options:


Design tab


Theme ColorTheme Colorallows you to choose the color of the Counter Boxes. By default, it is set to the primary color of your SharePoint page.
Box StyleBox Styleallows you to modify the style of the Counter Boxes. You can choose from Solid, Simple, Border, or Gradient.
ShadowShadowallows you to add an outer shadow behind the Counter Boxes.
ShapeShapeallows you to choose the shape of the Counter Boxes. You can choose from Wide or Square.
ResponsiveResponsivewhen enabled, the Counter Boxes will fill the container width.

C. Advanced Tab

The Advanced tab allows advanced styling customizations for the Counter Boxes. It has the following options:


Advanced tab


ICON

IconIcon allows you to choose an icon to showcase for all Counter Boxes.
icon ColorIcon color
allows you to modify the color of the icon.
Icon SizeIcon Size
allows you to adjust the size of the icon.
Icon StyleIcon Style
allows you to choose how the icon will look. You can choose from Normal, Circle, Square, Outline-Circle, or Outline-Square.

Icon Location
Icon Locationallows you to customize the location of the icon.


TEXT

Text Horizontal AlignmentText Horizontal Alignment
allows you to choose the horizontal alignment of the text.
Title ColorTitle Color
allows you to modify the color of the title.
Tilte Text SizeTitle Text Sizeallows you to adjust the size of the Title text.

Title Location
Title Locationallows you to modify the location of the Title Text. You can choose from Top or Below.

Number Color
Number Color
allows you to modify the color of the number text.
Number Text SizeNumber Text Sizeallows you to adjust the size of the number text.
Symbol ColorSymbol Colorallows you to modify the color of the symbol text.
Symbol Text SizeSymbol Text Sizeallows you to adjust the size of the symbol text.


ALL COUNTER BOXES BACKGROUND

Default Background ImageDefault Background Image
allows you to choose the background image for all Counter Boxes.
Background ColorBackground Color allows you to choose the background color of the Counter Boxes.
Background Color TransparencyBackground Color Transparency
allows you to adjust the transparency of the background color.

Background Icon
Background Iconwhen enabled, the icon will be used as background.


BORDER

Border ColorBorder Color
allows you to choose the color of the border.

Border Size
Border Sizeallows you to adjust the size of the border.


MISCELLANEOUS

Max Boxes in RowMax Boxes in Rowallows you to set the maximum number of boxes to be shown in a row.

Linking Options


Linking Options 
allows you to choose how a link will open. You can choose from Lightbox, New Window, or Dialog.

NOTE: To learn more about Linking Options, check out Types of Linking Options.


D. Custom CSS Tab

This tab allows you to use your own CSS, HTML, and Javascript code to customize the Counter Boxes Design Element. 


NOTECheck out our support article on How to Insert Custom CSS into a ShortPoint Design Element (Basic Tutorial) to know more about Custom CSS.



Custom CSS tab


NOTEThe Connect and Visibility tabs are currently unavailable in Live Mode.


Congratulations! You can now make the most out of the Counter Boxes Design Element. Enjoy showcasing them on your 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 63 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