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; 
}

On this page