Add images for "previous" and "newer", using only CSS

  • Author
    Posts
  • #724145

    odettone
    Member

    Hi, I’m using the Manifest theme, and looking for a way to put images for the links to previous/newer articles, is that possible? I’ve found lots of tips using php or html, how can I do that with CSS?

    Thanks a lot!

    The blog I need help with is chezlavioque.wordpress.com.

    #724241

    You can add a background image to go along with the text that is there, but the problem is you cannot link the image to the previous and next functions, so the text has to stay there and act as the link.

    #724250

    Thanks for your answer!

    I thought about that, but depending on the size of the post the backgroung won’t stay at the same place right?

    #724252

    The background image would be placed into the element where the word “previous” or “next” is, so it would shift and move with those elements.

    #724253

    odettone
    Member

    Oh I didn’t know that…Thanks again!

    Let me ask you one last thing!

    Do you know where to put the code for the background image?


    .navigation .prev,.navigation .next,.navigation .alignleft,.navigation .alignright {
    display:block;
    }

    .navigation .alignright {
    text-align:right;
    }

    .navigation .prev,.navigation .alignleft {
    float:left;
    }

    .navigation .next,.navigation .right {
    float:right;
    }

    #724258

    Here for the previous.

    .navigation .prev {
    background: url("IMAGE URL") no-repeat scroll 0 0 transparent;
    }

    And here for next.

    .navigation .next {
    background: url("IMAGE URL") no-repeat scroll 0 0 transparent;
    }

    You might possibly have to add/adjust the margins or padding for the text to fit with the images. Those you would put into the following.

    .navigation .next a
    
    and
    
    .navigation .prev a

The topic ‘Add images for "previous" and "newer", using only CSS’ is closed to new replies.