Top

Paginators

×
Catalog ul,li a custom

Use any of the available classes of Base Stylesheets to quickly create a custom style.

(1) <li>

 
HTML Code:

<ul class="dsure-page dsure-page-s1">
    <li class="prev"><a href="#">&#171;</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><b>3</b></li>
    <li><a href="#">10</a></li>
    <li><a href="#">11</a></li>
    <li><a href="#">12</a></li>
    <li class="next"><a href="#">&#187;</a></li>
</ul>

<ul class="dsure-page dsure-page-s1">
    <li><a href="#" class="prev">Previous</a></li>
    <li><a href="#">233</a></li>
    <li><a href="#">234</a></li>
    <li><b>235</b></li>
    <li><a href="#">236</a></li>
    <li><a href="#"  class="next">Next</a></li>
</ul>

<ul class="dsure-page dsure-page-s2">
    <li><a class="prev" href="#">Previous</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><b>9</b></li>
    <li><a href="#">10</a></li>
    <li><a href="#">11</a></li>
    <li><a href="#">12</a></li>
    <li><a class="next" href="#">Next</a></li>
</ul>
      
            
 
HTML Code:

<ul class="dsure-page dsure-page-nospace">
    <li class="prev"><a href="#">&#171;</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><b>3</b></li>
    <li><a href="#">10</a></li>
    <li><a href="#">11</a></li>
    <li><a href="#">12</a></li>
    <li class="next"><a href="#">&#187;</a></li>
</ul>

(2) <a>

7 8 3 10 11 12
223 224 225 226 
 
HTML Code:

<div class="dsure-page dsure-page-a dsure-page-s1">
    <a class="prev" href="#">&#171;</a>
    <a href="#">7</a>
    <a href="#">8</a>
    <b>3</b>
    <a href="#">10</a>
    <a href="#">11</a>
    <a href="#">12</a>
    <a class="next" href="#">&#187;</a>
</div>

<div class="dsure-page dsure-page-a dsure-page-s2">
    <a class="prev" href="#">Previous</a>
    <a href="#">223</a>
    <b>224</b>
    <a href="#">225</a>
    <a href="#">226</a>
    <a class="next" href="#">Next</a>
</div>
7 8 3 10 11 12 
 
HTML Code:

<div class="dsure-page dsure-page-a dsure-page-nospace">
    <a class="prev" href="#">&#171;</a>
    <a href="#">7</a>
    <a href="#">8</a>
    <b>3</b>
    <a href="#">10</a>
    <a href="#">11</a>
    <a href="#">12</a>
    <a class="next" href="#">&#187;</a>
</div>

(3) Custom Stylesheets

 
CSS Code:      
            

.dsure-page a,
.dsure-page b{
	padding:.4em .6em;/*This is the minimum value.*/
}

.dsure-page.dsure-page-a a,.dsure-page.dsure-page-a b{
	padding:.4em .6em;/*This is the minimum value.*/
}
.dsure-page a:hover{
	text-decoration:none;	
}
.dsure-page .prev a,
.dsure-page .next a,
.dsure-page a.prev,
.dsure-page a.next {
	
}


.dsure-page a:focus,
.dsure-page a:active,
.dsure-page b{
	border:1px solid #BFBFBF; 
	font-weight:bold; 
	background:#d7d7d7;
	-mo-z-box-shadow:0 1px 5px #b2b2b2 inset,0px 1px 1px #fff;
	-web-kit-box-shadow:0 1px 5px #b2b2b2 inset,0px 1px 1px #fff;
	box-shadow:0 2px 2px #b8b8b8 inset,0px 1px 1px #fff;
}

.dsure-page.dsure-page-nospace a{
	background:#EBEBEB;
}
.dsure-page.dsure-page-nospace a:hover{
	background:#F7F7F7;
	border:none
}
.dsure-page.dsure-page-nospace a:focus,
.dsure-page.dsure-page-nospace a:active,
.dsure-page.dsure-page-nospace b{
	border:none
}