Show Menu
TOPICS×

Page indicator

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 of the page indicator is controlled with the following CSS class selector:
.s7ecatalogviewer .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.
.s7ecatalogviewer  .s7pageindicator { 
 position:absolute; 
 bottom: 4px; 
 margin-left: -28px;  
 left: 50%; 
 width:56px; 
 height:28px; 
 font-family: Helvetica; 
 font-size:14px; 
}