Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

WordPress How to Make a Website with WordPress Customizing WordPress Themes Customizing WordPress Theme Files

CSS is being overwritten

I've followed the tutorial and I'm able to see the colour of my change in the console but it's crossed out with a line through it and is being overwritten directly by the theme itself through the theme customisation options. I've included a screenshot of this and would like to know how I can make my changes overwrite even those done through the wordpress admin panel's customisation options. Thanks!

http://imgur.com/n9Ja529

2 Answers

Hi Craig,

You may find that the any styles edited in the theme customizer are being injected into a set of style tags in the <head> element.

Have a little look in there to see if this is occurring.

I had the same issue with a theme that was setting the default font size to 14px through the customizer.

Let me know if this is the case I think I have a work around that would get your code to override it via the functions.php :)

Craig

Hey Craig,

I think that is exactly the issue I'm experiencing. If you could share the work around I'd appreciate it loads.

Thanks.

If you use the hook wp_head with a custom function that should override the styles simply by adding a set of style tags below the current ones. (fingers crossed anyway)

<?php

//Only copy the function and add_action not the php tags above and below it
function override_customizer_css() {

  $styles="<style> .my-selector { prop: val; } </style>";
  echo $styles;

}
add_action( 'wp_head', 'override_customizer_css' );

?>

Here is the WordPRess codex reference for wp_head

If this is being injected to the head element and you can see it there but style not overriding add !important after the CSS value.

<style> .my-selector { prop: val !important; } </style>

Hope this helps! Craig

Just tried it and it worked, thank you! However, does this mean that further customisations will need to be entered into this function also?

Thanks again.

Hi Craig,

Glad it got the issue sorted for you.

This would only be needed if you are applying a style to override one being declared in the head element most likely one that could be injected there from the theme customizer.

So really this will only be need if you want to override a style through your CSS instead of through a setting provided in the customizer.

It will come in hand if your working with themes and child themes though! Saves me a lot of time now :)

Craig