Support » Theme: Twenty Thirteen » Changing the Post Navigation links colours

Viewing 9 replies - 1 through 9 (of 9 total)
  • try

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

    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?

    paulwpxp

    (@paulwp)

    Font hero

    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.

    @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?

    paulwpxp

    (@paulwp)

    Font hero

    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.

    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.

    paulwpxp

    (@paulwp)

    Font hero

    Take out the !important and clear browser cache.

    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)

    @paul

    That works! Thanks a ton. 🙂

    @tom

    Thanks for the information. 🙂

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Changing the Post Navigation links colours’ is closed to new replies.