Custom Arrows

You do it with CSS background image styling.

Anyone know how to do this with CSS? Sorry for the rookie question but I'm getting nowhere fast with this...

Here is the CSS:

ul.pager li a {
  margin: 0;
  padding: 3px 6px;
  color: transparent;
}

li.pager-first {
  background: transparent url('pager-first.png') no-repeat center center;
}

li.pager-previous {
  background: transparent url('pager-previous.png') no-repeat center center;
}

li.pager-next {
  background: transparent url('pager-next.png') no-repeat center center;
}

li.pager-last {
  background: transparent url('pager-last.png') no-repeat center center;
}

The first rule make the text of Frist, Prev, Next, Last links invisible. The rest of the rules add the appropriate background images to each links.

You can use Firebug to see the HTML markup and what CSS target to.

Thanks for this...much appreciated. I'll give a go now.

I added this CSS to the drpager.css file, is that not correct? The image path must be ok because it shows in firebug but it's not showing on the actual page I need it to.. so I'm thinking maybe I added this to the wrong file?

the url for the page is "http://www.countryviewguesthouse.co.za/image-gallery" if that helps...

>I added this CSS to the drpager.css file

No, don't do this. Never hack any contrib module or core. There are multiple ways to add custom css without having to hack core or modules.

Let's say you have the pager-arrows.css css file and the arrow image file(s).

You can copy them all into your theme folder, edit the theme's .info file and add the stylesheet with this declaration in the .info file:

stylesheets[all][] = pager-arrows.css

This is better than hacking contrib module or core but still not ideal because it's still modifying theme.

A better way is to use the CSS Injector module, setup the custom arrows CSS through the CSS injector interface, copy all the image files to the site's file directory.

The way I did it is with a custom module. I use module to do custom theming so that I can upgrade/change theme easily. See http://hddigitalworks.com/theming-cck-content-type on how this is done.

Thanks for your help. I can't seem to get the images to display so I eventually just made the arrow white for now so that it's visible on the black background.. that will have to do until I have time to figure out why the images aren't being pulled through... The fact that I can edit the pager-arrows.css file to change the colours, etc must mean that the css file is in the correct location but I assume my image path for the pager-next.png and pager-previous.png arrow images is wrong...