How do I change default font colours in a Twentysixteen child theme using CSS?

  • Hello all

    I’m very new to WordPress, but am loving it so far, and am looking to modify the Twenty Sixteen theme as I cannot find anything meeting my exact requirements. I have knowledge of HTML, PHP and CSS.

    After creating my child theme and creating a new style.css file I have added code to change certain font colours, however they haven’t changed. After debugging, it appears as though a lot of the default settings are inline somewhere and this is why styles are not cascading. Though, I can’t find this exact file as the information that appears in the debugger isn’t in the index file.

    Oddly, this is only with regard to colours as fonts are styling no problem.

    Is there any way of modifying these default settings?

Viewing 13 replies - 1 through 13 (of 13 total)

  • Can you point us to a specific example online?

    Thread Starter tempesthomas

    (@tempesthomas)

    I don’t have an online example unfortunately as I am working locally, but I can try to explain.

    If I want to change the site description text colour from black to white, I open the Safari debugger and target the text. It shows up there under .site-description, with the color tag. Changing in browser works. In my CSS file my code reads:

    .site-description {
  color:#ffffff;
}

    …with no success. I go back to the browser and debug, and it shows up under .site-description with the colour set in the Customizer. Going through the debugger again to trace back where the colours are, they show as inline styles somewhere that is not in my theme file.

    It seems confusing. Let me try and pose it differently. If you were looking to change the colours of say the site description, and the primary nav links, what would you be doing?

    What browser CSS tool are you using?

    Thread Starter tempesthomas

    (@tempesthomas)

    Safari Web Inspector – I’ve been messing there to break down the template before taking that to the code.

    Can I suggest that you try Firefox with the Firebug extension installed. It really will take a great deal of the pain out of these kinds of CSS re-skins.

    Thread Starter tempesthomas

    (@tempesthomas)

    Ok, I am convinced about Firebug. I’ve never used it before, but it is much better and much clearer. Thank you for that.

    However, it is still as I suggested – the styles are being set inline, either static or JS, but no file explicitly contains the content shown as source in the debugger.

    Is this a common thing with WordPress themes?

    Thank you for that.

    No problem. Always happy to introduce another dev to the joys of using Firebug. ??

    Is this a common thing with WordPress themes?

    Not within themes, no, but, obviously, you can add inline style via Post/Page content. FWIW, I’m not seeing anything like this in the theme’s preview pages.

    Thread Starter tempesthomas

    (@tempesthomas)

    It’s silly. I have a version of the source in front of me listing everything, and also Firebug telling me that the style is being set inline, but no physical file showing those styles.

    I think its being done via JS as there is a HTML.js file, but that doesn’t show the styles either – I’m not at all a JS man so I don’t know what I’m looking at there anyway.

    I can set it as !important in the CSS, but that’s a bit hacky to me.

    Firebug telling me that the style is being set inline, but no physical file showing those styles

    Don’t want to state the obvious but have you checked the content of those Posts. Has CSS been added manually to them?

    Thread Starter tempesthomas

    (@tempesthomas)

    You can state the obvious definitely and I will answer. Whatever helps you diagnose the issue. At the very least I get to do a double check.

    Note that I get no path when hovering over ‘inline’ like I do with stylesheets, so I’m just assuming that these will be based in index files.

    But anyway, checking in the html.js file shows me nothing of note. Everything is calling everything else, so there’s no physical place to type.

    I didn’t really want lots of !important tags everywhere, and the reason I was working with the twentysixteen theme was because I thought it would be both the most compatible and the most editable under the hood.

    checking in the html.js file shows me nothing of note.

    Why are you looking in that file? I was referring to the actual content of your Posts. The stuff you typed in manually when creating the posts.

    Thread Starter tempesthomas

    (@tempesthomas)

    Sorry I misunderstood. There is no content yet, as I am still working on style. There is one Lorem Ipsum post I entered with no formatting, but I’ve thought no more about it.

    Note that the only place I am looking is to the site description tagline.

    I don’t know if you ever solved this issue, but for anyone who might find this post in the future, your styles are probably overruled by the colors set in the theme customizer.

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘How do I change default font colours in a Twentysixteen child theme using CSS?’ is closed to new replies.

Tags