WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Thirteen
[resolved] Changing the Post Navigation links colours (10 posts)

  1. 008Rohit
    Member
    Posted 11 months ago #

    http://test.techtage.com

    .meta-nav a, .nav-links a, .post-navigation a {
            color: #004c7c;
    }

    doesn't work. I'm using 2013 blue child theme by Joen.

  2. tomfrom
    Member
    Posted 11 months ago #

    try

    .navigation a {
    color: #004c7c !important;
    }

  3. 008Rohit
    Member
    Posted 11 months ago #

    Thanks for your help.

    This did it:

    .post-navigation .nav-links a {
            color: #004c7c !important;
    }

    Any idea why the '!important' part had to be used?

  4. paulwpxp
    Font hero
    Posted 11 months ago #

    Actually because there is this down below it.

    .site-footer a, .navigation a {
    	color: #ce5343;
    }

    Generally in CSS what comes after will win, unless the former has higher specificity.

  5. 008Rohit
    Member
    Posted 11 months ago #

    @Paul

    Because of this:

    <nav class="navigation post-navigation" role="navigation">
    		<h1 class="screen-reader-text">Post navigation</h1>
    		<div class="nav-links">
    
    						<a href="http://test.techtage.com/just-another-shitty-test-post-1/" rel="next">Just another shitty test post #1 <span class="meta-nav">&rarr;</span></a>
    		</div><!-- .nav-links -->
    	</nav><!-- .navigation -->

    Shouldn't .nav-links over-write .navigation's values anyway?

  6. paulwpxp
    Font hero
    Posted 11 months ago #

    You have this

    .meta-nav a, .nav-links a, .post-navigation a {
            color: #004c7c;
    }
    
    .site-footer a, .navigation a {
    	color: #ce5343;
    }

    The .nav-links a and .navigation a has the same specificity, so the latter wins.

  7. 008Rohit
    Member
    Posted 11 months ago #

    I had got rid of

    .meta-nav a, .nav-links a, .post-navigation a {
            color: #004c7c;
    }

    and replaced it with,

    .post-navigation .nav-links a {
            color: #004c7c;
    }

    Still it wouldn't work unless I add an !important.

    BTW, I read somewhere that we should reduce the use of '!important' as much as possible. I'd like to know why.

  8. paulwpxp
    Font hero
    Posted 11 months ago #

    Take out the !important and clear browser cache.

  9. tomfrom
    Member
    Posted 11 months ago #

    if for example you use CSS to change the colour of a link and place the style tag into a stylesheet 3 times, its the 3rd tag is what will be used unless you specify !important on one of the tags before. !important basically tells the browser it has to use that style.

    If its not working without adding !important its because further down in your stylesheet the colours being changed again.

    try using if you use chrome press f12 and use the developer tools to view the html and css on a page, makes life a lot easier! (or firebug on firefox)

  10. 008Rohit
    Member
    Posted 11 months ago #

    @Paul

    That works! Thanks a ton. :)

    @Tom

    Thanks for the information. :)

Reply

You must log in to post.

About this Theme

About this Topic