Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by Craig Mann
Craig Mann
Courses Plus Student 2,177 Points

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

Craig Watson
Craig Watson
27,930 Points

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

Craig Mann
Craig Mann
Courses Plus Student 2,177 Points

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.

Craig Watson
Craig Watson
27,930 Points

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

Craig Mann
PLUS
Craig Mann
Courses Plus Student 2,177 Points
Craig Mann
Craig Mann
Courses Plus Student 2,177 Points

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.

Craig Watson
Craig Watson
27,930 Points

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