(Tips & Tricks) Collection Numbering (Single and Multi)


Repeating collections can become confusing to some users as the collections aren't always evident as to where one ends and another begins. Adding a collection number will display a distinct separator between collection items.


Collection Number with Single Collection


1 Create a Custom HTML control as the first item in your collection. 2 In the Custom HTML set the value you wish to display in the Html tab (in this example, we used “<h4>People</h4>” ). IMPORTANT: The crucial part of this step is to set the tags <h4></h4>. It will be how we control what is displayed later. The text between the tags is what you wish to display.


3 Next, go to the CSS and JavaScript tab and paste the following CSS in the CSS section of the tab.

/*global counter*/
body {
    counter-reset: h4counter;
}

/*set text and counter value to header*/
h4:before {
    content: counter(h4counter) ".\0000a0\0000a0";
    counter-increment: h4counter;
}
/*format color and weight of header*/
h4  {

    color:#ff6600;
    font-style:bold;
}

Then, select the Save button to save the CSS you just added.


NOTE: if you want to change the color of the header, you can do so by changing the hex value of the “color:” css under h4 (I bolded it for you).

Collection Counter with Multiple Collections

1 Create a Custom HTML control as the first item in your collection.

2 In the Custom HTML set the value you wish to display in the Html tab (in this example, I used “<h4 class="people">People</h4>”).



IMPORTANT: The crucial part of this step is to set the tags <h4></h4> along with the class (class="people") within the h4 tags. It will be how we control what is displayed later. The text between the tags is what you wish to display.


3 Create another Custom HTML control as the first item of another collection.

4 In the Custom HTML set the value you wish to display in the Html tab (in this example, we used “<h4 class="vehicle">Vehicle</h4>”).


IMPORTANT: Note that the class name is different for this collection.


5 Next, go to the CSS and JavaScript tab and paste the following CSS in the CSS section of the tab.