How do I replace the page navigation arrows with an image?

Community Forums Forums Design Tips and Tricks How do I replace the page navigation arrows with an image?

This topic is: not resolved

This topic contains 2 replies, has 1 voice, and was last updated by  WoodlandCoyote 1 year, 1 month ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #60507

    WoodlandCoyote
    Participant
    Post count: 171

    My website isn’t live yet, but I’m using the Eleven40 theme.

    I was able to paste some code into my functions file and change the text for previous and next links. I removed the words and added arrows instead.

    But how do I use an image that I made of a hand-drawn arrow?

    I tried adding a background image for the .pagination-next and .pagination-previous classes. I also removed the arrow text (brackets) in my functions file. While the removed arrows works, the images are not displaying.

    I thought I should maybe use “li .pagination-next” instead, but still nothing. I also tried adding “a” for the link. Do you have any suggestions on how to do this?

    Thanks!

    #60529

    WoodlandCoyote
    Participant
    Post count: 171

    This worked great. I didn’t know I could use HTML inside of the code like this. I hope it works in all browsers.

    /** Customize the next page link */
    add_filter ( 'genesis_next_link_text' , 'custom_next_link_text' );
    function custom_next_link_text ( $text ) {
        return g_ent( '<img src=" ... type in the file name ... " />' ) . __( '', CHILD_DOMAIN );
    }
    
    /** Customize the previous page link */
    add_filter ( 'genesis_prev_link_text' , 'custom_prev_link_text' );
    function custom_prev_link_text ( $text ) {
        return g_ent( '<img src=" ... type in the file name ... " />' ) . __( '', CHILD_DOMAIN );
    }

    But as dumb as it sounds, I can’t figure out how to adjust padding. Nothing is responding. Ugh.

    #60530

    WoodlandCoyote
    Participant
    Post count: 171

    Big duh! moment . . .

    I just style the padding directly within the image source.

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

You must be logged in to reply to this topic.