I edited my Wordpress style.css in the child theme folder but the CSS is not overriding unless I uses !important on everything.
How can I set the child theme style.css to a higher priority.
I already searched on Google and tried multiple solutions but somehow I don't get it working.
Try dequeueing the child CSS in the child theme's functions.php and then enqueuing it with the parent theme's CSS as a dependency.
https://codex.wordpress.org/Function_Reference/wp_dequeue_style
https://developer.wordpress.org/reference/functions/wp_register_style/
Related
https://www.development-vip.co.uk/product/smirnoff-espresso-vodka-70cl/
(password: hide)
You will notice in the page source that my stylesheet (main-style) which I am loading at the highest priority is almost at the top in the head. Way above my themes style.
Why is my theme styling above it in the editor? Because its overriding the styles.
The last loading css files will override previous stylings when they have same specificity (like simple class selectors in your example). You should put general (default) styles first and overrides below.
If there's a conflict with specificity you can make css rules more specific by prepending a selector. Below rule will go over the class selectors:
#main .col {
/* styling here */
}
Usually the stylesheets are referenced/loaded in the header, which in this case (Wordpress) probably is part of the theme's header.php file. You can look in there to see if those two stylesheets are loaded in the wrong order and change it. However, you should probably create a child theme if you do this to avoid the edited header.php file to be overwritten when the theme is updated next time.
I am trying to mess around with a pre-purchased wordpress theme.
I am trying to change the visit, active, hover and active states of links in the navigation but the changes don't show up because I think it's being overriden with the default stylesheet.
How do you make sure that when you apply css, it won't be overridden from the default stylesheet?
Please try to enqueue (with WordPress hook) your custom style in footer and try to check. So your CSS would apply in last and you can override default CSS of theme. Please let me know if you have any queries for same.
On creating a custom theme i faced one problem http://templategraphy.com/wp-demo/landro/
lookwise its not look so good because it not supported style.css By default it shows all its css properties from bootstrap.min.css.
I want theme look good like this html http://templategraphy.com/demo/landro/ what should i do so that theme take all its css properties from style.css.
Thanks in advance
you first need to link bootstrap.css and then your style.css
cause in css order is important for cascading.
all custom styles or created by you comes last.
I've created child themes before using the same method, but for some reason with Bootstrap3 themes (I've tried multiple) I can't override the CSS. I'm currently using this Flatty theme.
I'm thinking maybe the trouble comes from the fact that there is a style.css in the parent but the styles I'm attempting to change are in a css folder in a file called main.css. I've tried duplicating this folder and file as well, but no luck. I've also tried just putting the classes I want to change in my child style.css.
Any help would be greatly appreciated!
Your CSS file needs to load after Bootstrap's CSS file. That way, your styles with the same name as Bootstrap's styles will take precedence.
I´ve created a child theme of the Snapshot theme from WooThemes.
But it seems I´m not succeeding to style the child theme.
Here´s the style.css header/code of the child theme:
/*
Theme Name: My Child Theme
Theme URI: http: //kevingstongramado.p.ht/
Description: This is a custom child theme I have created.
Author: Marcelo Noronha
Template: snapshot
Version: 1.0
*/
#import url("../snasphot/style.css");
div#temp{
color:#00FF00;
}
I´ve pressed F12 in Chrome, to see what could be.
The 'style.css' file, that appears, is the 'style.css' from the parent theme.
I don´t know if it shouldn´t has loaded the 'style.css' from the child.
I´ve a directory, 'snapshot', for the parent, and 'snapshot-child', for the child theme.
I have activated the child theme.
Can´t seem to find the 'style.css' file of the child theme, using F12 in Chrome.
The URL of the site is http://kevingstongramado.p.ht/
The text that should be styled in the page, is 'Test2'.
EDIT:
I´ve used FireBug in FireFox. Also, the site doesn´t seems to have loaded the 'style.css' from child theme.
Anyone?
Answer from an anonymous user, found in the edit review queue:
I don´t know, but it seems that in this theme, you can´t add styles in the 'style.css' child theme file.
I´ve tried to make some changes in the header.php, using one of the answers from this forum.
Like:
<link rel="stylesheet" type="text/css" href="<?php echo
get_stylesheet_directory_uri()
?>/style.css" />
But it completly screwd up layout.
So I realized, using FireBug, that the stylesheet that is loaded from the child theme, is the file "custom.css".
So that is the answer. Using the child theme file, "custom.css", you can add styles to your child theme.