[SOLVED] Pretty Pagination Using CSS

Pretty Pagination Using CSS

I dont know about everyone else but I never seen to be able to get my joomla css pagination to work on Chrono Forms

it always look ugly, something like this:

«»12345678910End
Page 1 of 123


So here is some css to help you make it look nice
Just open the form wizard and add a custom css block to the onload and one of the css options below.


Pagination CSS 1

.pagination{text-align:center; color:#aaa;}
.pagination a,.pagination strong{color:#666;border:1px solid #ddd;background:#fcfcfc;padding:4px 12px;margin:0 3px;text-decoration:none;}
.pagination a:hover{background:#f80;border:1px solid #f80;color:#fff;}
.pagination strong{background:#666;border:1px solid #666 ;color:#fff;}

Pagination CSS 2

.pagination{margin:5px;padding:5px;text-align:center; color:#aaa;}
.pagination a,.pagination strong{color:#666;border:1px solid #ddd;background:#fcfcfc;padding:4px 12px;margin:0 3px;text-decoration:none;border-radius:3px;text-shadow:1px 1px 0 white;box-shadow: inset 0 0 1px rgba(255,255,255,.2);background-image:-webkit-linear-gradient(top, #fcfcfc, #eaeaea);background-image:-moz-linear-gradient(top, #fcfcfc, #eaeaea);background-image:-o-linear-gradient(top, #fcfcfc, #eaeaea);background-image:-ms-linear-gradient(top, #fcfcfc, #eaeaea);}
.pagination a:hover{background:#f80;border:1px solid #f80;color:#fff;padding:8px 12px;text-shadow:1px 1px 0 #f40;background-image:-webkit-linear-gradient(top, #f90, #f60);background-image:-moz-linear-gradient(top, #f90, #f60);background-image:-o-linear-gradient(top, #f90, #f60);background-image:-ms-linear-gradient(top, #f90, #f60);}
.pagination a:active{background:#f60;border:1px solid #f60;color:#fff;}
.pagination strong{background:#666;border:1px solid #666 ;color:#fff;text-shadow:1px 1px 0 #444;}

Pagination CSS 3 - MY PERSONAL CHOICE

.pagination{ width:700px;margin:5px auto;padding:3px;text-align:center;color:#aaa;border:1px solid #ddd; border-radius:5px;background:#fcfcfc;background-image:-webkit-linear-gradient(top, #fcfcfc, #eaeaea);background-image:-moz-linear-gradient(top, #fcfcfc, #eaeaea);background-image:-o-linear-gradient(top, #fcfcfc, #eaeaea);background-image:-ms-linear-gradient(top, #fcfcfc, #eaeaea);}
.pagination a,.pagination strong{padding:7px;text-decoration:none; color:#888;}
.pagination a:hover,.pagination strong{border:1px solid #ddd; border-radius:5px;color:#000;padding:10px 6px;background:#666;background-image:-webkit-linear-gradient(top, #fcfcfc, #eaeaea);background-image:-moz-linear-gradient(top, #fcfcfc, #eaeaea);background-image:-o-linear-gradient(top, #fcfcfc, #eaeaea);background-image:-ms-linear-gradient(top, #fcfcfc, #eaeaea);}

Hope this helps!


edited to tidy up code

Hi darrenhallinan,

Very nice, thank you.

Bob