Need help? Check out our Support site, then


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

  1. 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.

  2. 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.

  3. fashionfautpas
    Member

    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?

  4. 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.

  5. 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?

    <br /> .navigation .prev,.navigation .next,.navigation .alignleft,.navigation .alignright {<br /> display:block;<br /> }</p> <p>.navigation .alignright {<br /> text-align:right;<br /> }</p> <p>.navigation .prev,.navigation .alignleft {<br /> float:left;<br /> }</p> <p>.navigation .next,.navigation .right {<br /> float:right;<br /> }<br />

  6. 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

Topic Closed

This topic has been closed to new replies.

About this Topic