Modify previous/next post in CSS

  • Unknown's avatar
    vivianpaige · Member ·

    While I’m glad to have the previous/next post links included, I can’t seem to figure out how to modify them. I’d at least like to change the color, to match my color scheme. Ideally, I’d like to make the size a little smaller.

    Any hints would be appreciated!

  • Unknown's avatar
    andrew · Member ·

    Your prev/next links are the same color as your other links, so I’d say that it they match the color scheme. Looking at the source code for a post, I see: 

    <div class="navigation">
<div class="previous">...</div>
<div class="next">...</div>
</div>

    So to change the size (or color) in CSS, you need to refer to the class “navigation.”
    I hope this helps.

  • Unknown's avatar
    vivianpaige · Member ·

    andrew – actually, they aren’t the same color. The post nav links (at the bottom of the page) are red, and that’s what I’m trying to do here. I thought maybe they were the same as the ones in the post as well:

    .main a,.tags a {
	color:MediumBlue;
	text-decoration:underline;

    Changing the color here doesn’t affect the prev/next. Adding the color line:

    .previous {
float: left;
color:Firebrick;
}

.next {
float: right;
color:Firebrick;
}

    only changes the color of the << and >>

    And yes, I tried: 

    .navigation {
color:Firebrick;
}

    and that didn’t work, either (same red << and >>). It must be inheriting the style from somewhere else.

  • Unknown's avatar
    ellaella · Member ·

    It is, Vivian. Firebug shows it’s inheriting it from body.
    (Your site looks better every time I see it.)

  • Unknown's avatar
    vivianpaige · Member ·

    Inheriting from body? Hmm – I don’t seem to have any control over that in the CSS :( (And I really haven’t figured out how to use Firebug :( )

    (And thanks – I keep working at it ;) )

  • Unknown's avatar
    devblog · Member ·

    Try this Vivian,

    .previous a, .next a {color: #[color you want];}

    What happens here is that you need to be more specific. Just setting the color to soemthing in the .previous and .next class selectors won’t affect the ‘a’ elements inside them, but only the text.

    For example, if you had:

    .previous, .next {color: #f00;} /* #f00 == red */

    and if the HTML source code looks like this:

    <div class="previous">go to <a href="soempage.html">some page</a> to find out more.</div>

    the text “go to” will be the only one in red, and the “to find out more” link text will stay blue.

    If you wanna affect only the link text, then the code I gave you above, should be used.

    HTH

  • Unknown's avatar
    vivianpaige · Member ·

    I was hoping you’d chime in ;) Thanks so much – that works perfectly! I figured it was an element that I was missing but I didn’t know what the element would be.

  • Unknown's avatar
    vivianpaige · Member ·

    And I now have it matching the font and hover for the categories at the top of the post! Thanks SO much!

  • The topic ‘Modify previous/next post in CSS’ is closed to new replies.