Apply CSS Styles

Building on the Quick Start example, you can use CSS styling to quickly change a few aspects of the Pager widget's appearance. This same method applies to all Wijmo widgets. You can find all of the CSS selectors for the widget in the installation folder under wijpager in the jquery.wijmo.wijpager.css file.

Note: You can also use jQuery's ThemeRoller to roll your own theme.

In the <head> section of your HTML file, between the references and the script that includes the document ready function, add this <style> section to change the colors and font sizes of various elements of the pager.

Script	Copy Code
<style type="text/css"> .wijmo-wijpager .wijmo-wijpager-button { background: Blue; border-color: Green; font-family: "Times New Roman"; font-size: large; } .wijmo-wijpager .wijmo-wijpager-button a:link { color: White; } .wijmo-wijpager .wijmo-wijpager-button .ui-state-active { background: Navy; color: Yellow; } .wijmo-wijpager .wijmo-wijpager-button a:hover { background: Purple; color: Orange; } </style>

Script

Copy Code

<style type="text/css"> 
    .wijmo-wijpager .wijmo-wijpager-button 
    { 
        background: Blue; 
        border-color: Green; 
        font-family: "Times New Roman"; 
        font-size: large; 
    } 
    .wijmo-wijpager .wijmo-wijpager-button a:link 
    { 
        color: White; 
    } 
    .wijmo-wijpager .wijmo-wijpager-button .ui-state-active 
    { 
        background: Navy; 
        color: Yellow; 
    } 
    .wijmo-wijpager .wijmo-wijpager-button a:hover 
    { 
        background: Purple; 
        color: Orange;          
    } 
</style>

In the <body> section of your HTML file, there is no need to make any changes to the <div> tags that create the pager.
Save your HTML file and open it in a browser. The pager appears like the live widget below.

Widgets

Pager

Reference

wijpager API