TheBestTutorials.css Pagination
TheBestTutorials.css Paginations
If you have a web site with lots of pages, you may wish to add some sort of pagination to each page:
Basic Pagination
To create a basic pagination, add the subhodaya-pagination class to an <ul> element:
Example
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
Pagination Arrows
Use HTML entities or icons from an icon library to add pagination arrows:
Example
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
Active/Current Link
Use one of the subhodaya-color classes to indicate which page the user is on:
Example
<li><a href="#">«</a></li>
<li><a class="subhodaya-green" href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
Hover Color
By default, when you move the mouse over the pagination links, they get a grey background color. Use any of the subhodaya-hover-color classes to change the hover color:
Example
<li><a href="#" class="subhodaya-hover-purple">«</a></li>
<li><a href="#" class="subhodaya-hover-green">1</a></li>
<li><a href="#" class="subhodaya-hover-red">2</a></li>
<li><a href="#" class="subhodaya-hover-blue">3</a></li>
<li><a href="#" class="subhodaya-hover-black">4</a></li>
<li><a href="#" class="subhodaya-hover-orange">»</a></li>
</ul>
Pagination Sizing
Use TheBestTutorials-tiny, TheBestTutorials-small, TheBestTutorials-large, TheBestTutorials-xlarge, TheBestTutorials-xxlarge or TheBestTutorials-xxxlarge to size the pagination:
Bordered Pagination
Add the TheBestTutorials-border class to create a pagination with borders:
Rounded Borders
Add the TheBestTutorials-round class next to TheBestTutorials-border for rounded borders:
Centered Pagination
To center the pagination, wrap a <div> element with class="subhodaya-center" around <ul>:
Example
<ul class="subhodaya-pagination subhodaya-xlarge">
...
</ul>
</div>
Other Pagination Examples
Next/previous Example
<li><a href="#">❮ Previous</a></li>
<li><a href="#">Next ❯</a></li>
</ul>
Inline Menu Example
<li><a href="#" class="subhodaya-dark-grey">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
