Hi guys
I have managed to make the default pagiantion a little more interesting with pure CSS, so I am sharing this as there might be more people thinking thy need a better looking pagination buttons.
Instead of this
this is what you get (video here http://screncast-o-…atch/c21fI5ngqY)
And this is the css code you need to just paste in your visuals editor Custom css box
<br />
.pagination {<br />
border-radius: 3px;<br />
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);<br />
display: inline-block;<br />
margin-bottom: 0;<br />
margin-left: 0;<br />
}<br />
.pagination a {color: #0088CC!important;}<br />
.pagination a, .pagination a:hover, .pagination a:active, .pagination-selected-page {<br />
float: left;<br />
padding: 0 14px;<br />
line-height: 34px;<br />
text-decoration: none;<br />
border: 1px solid #CCCCCC;<br />
border-left-width: 0;<br />
transition:background 0.25s ease-in-out 0s;<br />
border-radius: 0;<br />
}<br />
.pagination-selected-page {<br />
color: #005580!important;<br />
cursor: default;<br />
background-color: #f5f5f5;<br />
}<br />
.pagination a:hover, .pagination a:active, .pagination-selected-page {<br />
color: #005580!important;<br />
cursor: default;<br />
background-color:#E8E8E8;<br />
}<br />
.pagination a:first-child {<br />
border-left-width: 0px;<br />
-webkit-border-radius: 0;<br />
-moz-border-radius: 0;<br />
border-radius: 0;<br />
}<br />
.pagination a:last-child{<br />
border-radius: 0 ;<br />
border-right-width: 0px;<br />
-webkit-border-radius: 0 ;<br />
-moz-border-radius: 0 0;<br />
}<br />
.pagination a.set, .pagination a.prev, .pagination a.next {<br />
border: 1px solid #CCCCCC;<br />
margin: 0 ;<br />
padding: 0 14px;<br />
width: auto;<br />
<br />
}<br />
.pagination a.prev {<br />
border-radius: 3px 0 0 3px;<br />
-webkit-border-radius: 3px 0 0 3px;<br />
-moz-border-radius: 3px 0 0 3px;<br />
}<br />
<br />
.pagination a.next {<br />
border-radius: 0 3px 3px 0;<br />
-webkit-border-radius: 0 3px 3px 0;<br />
-moz-border-radius: 0 3px 3px 0;<br />
border-left: 0 none;<br />
}<br />
.pagination a.set:hover, .pagination a.prev:hover, .pagination a.next:hover, .sort-pagination<br />
a.set:hover, .sort-pagination a.prev:hover, .sort-pagination a.next:hover, .increase:hover,<br />
.decrease:hover {<br />
background-color: #D7D7D7;<br />
border-color: #D7D7D7;<br />
}<br />
.pagination a.set:hover, .pagination a.prev:hover, .pagination a.next:hover {<br />
color: #00245E;<br />
}<br />
.pagination-bottom {<br />
border-top: 1px solid #DEDEDE;<br />
text-align: center;<br />
}<br />
.pagination span .next.cm-history.cm-ajax {<br />
margin: 0;<br />
border-left: 0 none;<br />
}<br />
.pagination .cm-history.next.cm-ajax {<br />
border-left: 1px solid #B2B2B2;<br />
margin-left: 5px;<br />
}<br />
.pagination li:first-child a {<br />
border-left-width: 1px;<br />
border-radius: 3px 0 0 3px;<br />
}<br />
.pagination .cm-history.prev.cm-ajax {<br />
border-radius: 3px 0 0 3px;<br />
margin-left: 5px;<br />
}<br />
```<br />
<br />
THer is also a nice fade in affect on hovers. You can change the color as you wish<br />
<br />
Hope this get handy<br />
<br />
PS the arrows in pagination is not via Css. I had to cahnge the html entities in the file<br />
<br />
/design/themes/basic/templates/common/pagination.tpl<br />
<br />
line 31 to <i class="text-arrow"><< </i> and<br />
line 40 to <i class="text-arrow"> >></i><br />
<br />
if you do change them dont forget to clean your cache (via FTP delete folder /var/cache/templates)<br />
<br />
Fotis
)