Fix for bootstrap style pagination

In a previous release a vqmod was added as optional extension to get the same pagination style that bootstrap framework. But this extension has some conflicts with the pagination in the admin panel. To fix the issues edit catalog/view/theme/[your-theme]/stylesheet/stylesheet.css. Find the section marked with:

[css]

/* Pagination
————————————————– */

[/css]

And replace the whole section with

[css]

/* Pagination
————————————————– */

.paginate {
border-top: 1px solid #EEEEEE;
padding-top: 8px;
overflow: hidden;
}
.paginate .links { float: left; overflow: hidden; }
.paginate .links a,
.paginate .links b {
padding: 6px 12px;
line-height: 24px;
text-decoration: none;
font-weight: bold;
border: 1px solid #DDD;
border-left-width: 0;
display: block;
float: left;
}
.paginate .links b {
font-weight: normal;
color:#999;
background: #eee;
}

.paginate .links a:hover {
background: #f2f2f2;
}

.paginate .links a:first-child,
.paginate .links b:first-child {
border-left-width: 1px;
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
.paginate .links a:last-child,
.paginate .links b:last-child {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}

.paginate .results {
float: right;
color: #999;
font-family:arial,helvetica,sans-serif;
font-size:11px;
}

.pagination.brands {
height:auto;
}
.pagination.brands a {
padding: 0 9px;
}

[/css]

Also re-upload the following file if you want to change the arrows. This is optional:

pagination_bootstrap_style.xml

 

Finally, clear your vQmod cache (delete everything inside vqmod/vqcache folder)

 

 

6 replies on “Fix for bootstrap style pagination”

Leave a Reply

Your email address will not be published. Required fields are marked *