-4

So i am currently creating a website for a eSports team in wordpress, and i have just ran into a problem, that i do not remember how to sort out. I remember from making chrome extensions there is a method for doing this, but i do not remember, and that is why i am here now :)

First code As you can see on the picture, that is what is in the CSS, and i need to keep that for other pages, but i want my one page to overwrite that. I have a box where i am allowed to add custom CSS, but when i add the code, it gets overwritten by the old code. I know why this happends, but not how to fix it without changing the original css (which i would prefer to avoid)

Overwritten code

So my question is, how to i make my new css overwrite my old css? (i have tried !important and it does nothing)

  • 1
    Please research before asking! [Overwriting Wordpress CSS](https://css-tricks.com/methods-overriding-styles-wordpress/) – Sank6 May 21 '17 at 11:32

2 Answers2

1

When inspecting what code currently applies on a particular element, Chrome also tells you what specific selector applies that rule and where it's coming from. All you need to do is write a stronger selector and it will apply. In your example, body:not(.template-slider) #Header { } will be overridden by...

body.page:not(.template-slider) #Header {/* CSS here */ }

Ideally, though, it would be best to not have to increase the specificity of current selectors, but apply your rules last, using the same selectors. The easiest way to do that is to add your CSS at the end of your active theme's style.css, unless your theme/WP installation is messed up.

By the way, if you're using a theme you haven't developed yourself, your active theme should be a child theme. This is important, but it's something you should look into separately as per why it's important, what are the benefits and how to do it.

If writing to style.css of your active theme (by far, the recommended WordPress way) is not an option, you can always put all your CSS into a separate stylesheet of your choice (i.e. my-custom-style.css), placed in your active theme's folder, and register it using the following code in functions.php of your active theme:

function add_styles_to_your_active_theme() {
  wp_enqueue_style (
    'my-custom-style', 
    get_stylesheet_directory_uri() . '/my-custom-style.css', 
    array(), 
    null
  );
}

add_action( 'wp_enqueue_scripts', 'add_styles_to_your_active_theme' ); 

After adding it and making sure it loads, you can modify its position in the <head> tag by specifying other registered stylesheets as dependencies of yours, using the third parameter in the above call to wp_enqueue_style().

You need to place handles of other registered scripts into that array. You can find the handles by looking into the <head> tag of any page, finding the last loaded <link rel="stylesheet" /> tag and removing the ending -css from its id. For example, if your last loaded styleheet's link id is some-theme-style-css, the third parameter of your call to wp_enqueue_style() should be array('some-theme-style').

After that, check the <head> tag again and make sure yours is last. If not, add each <link />'s id to the $deps array, stripping -css, until yours is last. When your stylesheet loads last, you can copy-paste any applying selectors to it, change the rules to whatever you want and they will apply.

But do note that, under normal usage conditions, the method described above is unnecessary. Normally you should use a child theme, put your CSS in its style.css and not have to worry about tricky details like this, reserved for theme and plugin creators.

tao
  • 82,996
  • 16
  • 114
  • 150
0
Yo can overwrite CSS with adding child selectors for your specified DIV element.

Fiddle Example here http://jsfiddle.net/JfGVE/2031/

Sank6
  • 491
  • 9
  • 28
Krishna9960
  • 529
  • 2
  • 12
  • May i know why this was downvoted ? – Krishna9960 May 21 '17 at 11:23
  • i dont know why it was downvoted, the same with my post :/ but this will not work for me, since i would still mean touching the original css, or changing the pages call for a #header to something like #header.specific, which i cannot do. that is why i only can touch a 2nd css, that only linked to the given page. so i need something inside that 2nd css that can overwrite the first css. (like the !important command) – Martin Skovrup May 21 '17 at 11:34
  • Try increasing the specificity and that should help you. Here is the link https://css-tricks.com/specifics-on-css-specificity/ – Krishna9960 May 21 '17 at 11:52
  • Your answer does not comply with [answer]. Besides, you're not supposed to *"trick"* the rule of having code inside your answer by marking non-code as `code`. That rule is there for a reason. Not knowing/respecting the community's rules will always attract down-votes. I hope this helps. – tao May 21 '17 at 11:57
  • Thank you for the response. Will take care in Future. Happy Coding @AndreiGheorghiu – Krishna9960 May 21 '17 at 12:01