Page indicator displays current page index and total page count. It appears in main control bar on desktop systems and tablet, on mobile phones it is added to secondary control bar. Page indicator can be sized, skinned, and positioned by CSS.
The appearance page indicator is controlled with the following CSS class selector:
.s7ecatalogsearchviewer .s7pageindicator
CSS property |
Description |
---|---|
top |
Position from the top border of the main control bar (on desktop systems and tablets) or secondary control bar (on mobile phones), including padding. |
right |
Position from the right border of the main control bar (on desktop systems and tablets) or secondary control bar (on mobile phones), including padding. |
left |
Position from the left border of the main control bar (on desktop systems and tablets) or secondary control bar (on mobile phones), including padding. |
bottom |
Position from the bottom border of the main control bar (on desktop systems and tablets) or secondary control bar (on mobile phones), including padding. |
width |
Width of the page indicator. |
height |
Height of the page indicator. |
color |
Font color. |
font-family |
Font name. |
font-size |
Font size. |
Example - to set up a page indicator that is 56 x 28 pixels, horizontally centered and positioned 4 pixels from the bottom of the main control bar, and use a 14 pixel Helvetica® font.
.s7ecatalogsearchviewer .s7pageindicator {
position:absolute;
bottom: 4px;
margin-left: -28px;
left: 50%;
width:56px;
height:28px;
font-family: Helvetica;
font-size:14px;
}