Customising Product Paging - nopCommerce 2.4

Hi There,

Would it be possible to point me in the right directing for adding background images to my product paging.
I am using NopCommerce 2.4

currently it is default:

Previous 1 2 3 4 5 Next

All I would like to do is add rectangle background image for previous and next and then a square background image for the numbers.

Any help greatly appreciated. :)

regards

Hi We can surely help in doing this for you. But will cost you. If you are interested please reply me.

Thanks

Hi there,

Thanks for that, however the whole fun of Nop for me is learning about the site and code etc. To just to pay someone to do this kind of defeats the object for me in this instance.
Usually the 'support' forum provides assistance to users and doesn't just sell services.. :(

Any help with HOW to do this would be greatly appreciated.

Hi d-print

Not 100% but try the following.

You will need to find the following class in the CSS

<div class="pager">

Upload the image to the themes/image directory. If in Visual Studio right click within the css properities and add background image or directly add in the themes css file.

eg

background-image: url(your image') no repeat x;

Hopes this helps

Richard

I'm developing my own theme, I don't know what theme you are using but to further help!!!

Look for this block of code

/* PAGER */
.pager
{
    text-align: center;
    background-color: #00FFFF;
}
.pager a{font-size:1em;}
.pager a:link{text-align:center;color:#555;}
.pager span{color:#f93;font-size:1.2em;font-weight:700;}

I have add a background color to the pager and works all right you can do the same with your image but you will have to work with size :)

Hope this helps

Richard

&&

d-print wrote:

It can easily be done with some css modification , you need to modify some classes used by paging:
.pager{}
.pager span {background-image:url('yourimage');}
.pager a:link{}

Thank you all for your responses.
Been caught up with another project so I haven't had time to implement this yet. :(

I will update when i try.

Cheers
John

the following post might help to achieve what you described :https://www.nopcommerce.com/boards/t/18816/add-a-css-class-to-prev-next-pager-links.aspx