Add More Padding to WP E-Commerce Paging Styles

By default, the WP E-Commerce Shopping cart has little or no padding around the paging links. Make your store more pleasing to the eye by adding some padding around the page links. Here’s CSS to do that:

/*** WPEC paging ****/
.wpsc_page_numbers_top, 
.wpsc_page_numbers_bottom {
clear:both;display:block;padding:20px 0;
position:relative;
}
.wpsc_page_numbers_top {
margin-bottom:2em;
}
.wpsc_page_numbers_top a,
.wpsc_page_numbers_top span,
.wpsc_page_numbers_bottom a,
.wpsc_page_numbers_bottom span{
display:block;float:left;
margin: 2px 2px 2px 0;
padding:6px 9px 5px 9px;
text-decoration:none;width:auto;
}
.wpsc_page_numbers_top span.current,
.wpsc_page_numbers_bottom span.current {
padding:6px 9px 5px 9px;
}

To customize more on your own, below is a copy of the default paging styles from WP E-Commerce’s default theme’s stylesheet.

THESE ARE THE ORIGINAL STYLES FROM wpsc-default.css:


/*** wpsc default paging*/



#default_products_page_container .wpsc_page_numbers_top {
	margin-bottom:20px;	
}

#default_products_page_container .wpsc_page_numbers_bottom {
	margin-top:20px;	
}
#default_products_page_container .wpsc_page_numbers_top a:link, #default_products_page_container .wpsc_page_numbers_top a:visited, #default_products_page_container .wpsc_page_numbers_bottom a:link, #default_products_page_container .wpsc_page_numbers_bottom a:visited {
	padding:5px 4px;

}


#default_products_page_container .wpsc_page_numbers_top a:hover, #default_products_page_container .wpsc_page_numbers_top a:active, #default_products_page_container .wpsc_page_numbers_bottom a:hover, #default_products_page_container .wpsc_page_numbers_bottom a:active {

}
#default_products_page_container .wpsc_page_numbers_top span.current, #default_products_page_container .wpsc_page_numbers_top span.current, #default_products_page_container .wpsc_page_numbers_bottom span.current, #default_products_page_container .wpsc_page_numbers_bottom span.current {
	padding:5px 4px;
}
/*-----LIST VIEW PRODUCT DISPLAY-----*/
#list_view_products_page_container .wpsc_page_numbers_top {
	margin-bottom:20px;	
}

#list_view_products_page_container .wpsc_page_numbers_bottom {
	margin-top:10px;	
}

See more: ,

Questions and Comments are Welcome

Your email address will not be published. All comments will be moderated.

Please wrap code in "code" bracket tags like this:

[code]

YOUR CODE HERE 

[/code]