Replace text navigation with image buttons??

  • Resolved septemous

    (@septemous)


    15 years, 7 months ago

    Hi – thanks in advance.

    I would like to replace the text versions of the previous/next page links to image buttons.

    Our URL is: https://www.ablogvoyage.com/

    the code I have is:

    <div class="navigation">
   <div class="alignleft"><?php next_posts_link('&laquo; Next page') ?></div>
   <div class="alignright"><?php previous_posts_link('Previous page &raquo;') ?></div>
</div>

    I would like to have /images/next.png & /images/previous.png instead of the « Next page & Previous page »

    Is this possible?

    thanks again for your time
    S_

Viewing 3 replies - 1 through 3 (of 3 total)

  • Define classes in your style sheet for “previous” and next”. Of course, apply whatever styling you need. This is very general;

    .previous a {
    background:url(images/previous.png);
    float:left;
    }
    .previous a:hover {
    background:url(images/previous.png);
    float:left;
    }
    .next a {
    background:url(images/next.png);
    float:right;
    }
    .next a:hover {
    background:url(images/next.png);
    float:right;
    }

    Then assign a “next” and “previous” class to the navigation in your template.

    <div class="navigation"><div class="next"><?php next_posts_link('&laquo; Next page') ?></div>
<div class="previous"><?php previous_posts_link('Previous page &raquo;') ?></div>

    I think that does it. Does that look right? Anyone?

    https://www.ads-software.com/support/topic/296010?replies=3

    Thread Starter septemous

    (@septemous)

    thank you ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Replace text navigation with image buttons??’ is closed to new replies.