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.
/*global counters*/
body {
counter-reset: h4counterPeople h4counterVehicle;
}
/*people header counter controls*/
h4.people:before {
content: counter(h4counterPeople) ".\0000a0\0000a0";
counter-increment: h4counterPeople;
}
/*vehicle header counter controls*/
h4.vehicle:before {
content: counter(h4counterVehicle) ".\0000a0\0000a0";
counter-increment: h4counterVehicle;
}
/*format of header color and weight*/
h4 {
color:#ff6600;
font-style:bold;
}In the example, there are two sets of instructions: one for “people” and one for “vehicle”. Under global counters, we have a body class which sets the counter for each of the classes we created.
/*global counters*/
body {
counter-reset: h4counterPeople h4counterVehicle;
}The h4counterPeople will manage the people section and the h4counterVehicle will manage the vehicle section.
Under the counter controls, there are two sets of counters.
/*people header counter controls*/
h4.people:before {
content: counter(h4counterPeople) ".\0000a0\0000a0";
counter-increment: h4counterPeople;
}
/*vehicle header counter controls*/
h4.vehicle:before {
content: counter(h4counterVehicle) ".\0000a0\0000a0";
counter-increment: h4counterVehicle;
}
The h4.people:before class is set to prepended the h4counterPeople value before the people header text and then is incremented one.
The same goes for the h4.vehicle:before class. The h4counterVehicle value is set before the vehicle header value and then is incremented by one.
The last set of classes manages the look of the headers. In the example provided, both headers are managed with the same formatting:
/*format of header color and weight*/
h4 {
color:#ff6600;
font-style:bold;
}No qualifiers are needed for this h4 class. Both header (people and vehicle) will have the same color and weight.
6 Finally select the Save button to apply the changes made.
If you wish to create more header counters, simply add a global counter value and a new set of counter controls.
Comments