I'm struggling since a while with styles in WordPress.
What happens is that I define a style for a Block in my.css and in the website, this style gets overwritten by the style.min.css. So if WordPress want's the color to be green by default, I can just force it to change this by putting !important everywhere. That's super ugly.
function wpdocs_theme_name_scripts() {
wp_enqueue_style( 'style.css', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );
That is how I load my standard style.css in my self-written theme in WordPress 5.3.2.
So if anyone knows, how I can tell WordPress to load my style.css after the style.min.css or whatever causes this inconvenience.
Use CSS Specificity to assign higher priority to your CSS rules.
Ironically, your desire to "keep selectors as short and basic as possible" is working against you, but the provided link will help you build high-priority, specific, CSS Selectors.
NOTE: Wordpress is NOT "overwriting" your .css file. We know this because your CSS applies when you add !important to the rules -- so, the CSS rules must be loaded, hence this is a CSS priority issue, not a Wordpress issue. Also, note that CSS rules never "overwrite" eachother; instead, all rules are there, but only one is used (typically, the most specific one).
Change your style.css parameter to your-theme-style-css
After experimenting around, I slowly believe, that the problems roots are in css itself. ".wp-block-cover .wp-block-cover__inner-container" is the wordpress class. My class is just ".wp-block-cover__inner-container", as I prefer to keep selectors as short and basic as possible.
But if I change my class name to the exact same, used by WordPress as well, it is working. Also if I just put any other class in front, the styles are applying properly.
So it seems for me now to be a priority question from CSS. Is this possible?
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.
Basically I want to load my child's theme css file at the end of element to avoid override of other stylesheets.
At this moment my css file is overridden by builder, which has some sort of bug with responsive design so I wanted to apply certain styles myself.
I tried to lookup for solution online, but could not find anything.
Anybody here has had same issue with it before?
We can use here priority. we add the priority 99. so it will likely be last but some plugins may add CSS at a higher priority, though it's rare. so please check once this code I am truly sure this works for you.
function custom_enqueue_styles(){
wp_enqueue_style('customcss',get_template_directory_uri().'/css/bootstrap.min.css' );
}
add_action( 'wp_enqueue_scripts', 'custom_enqueue_styles', 99 );
I'm trying to get my custom css to take priority over conflicting style properties in the theme.
What I think I know
My custom CSS files are loading: If I remove everything else from the "head" section, my custom CSS is implemented.
My custom CSS properties are being overwritten: As the page loads, for just a split-second I see the page with my custom CSS implemented, before it gets overwritten.
Something in the wp_head() function in the "head" tag (this is most of the section) is causing it: If I remove wp_head() my custom CSS loads (but everything else is broken).
What I've Tried
Sample WP_enqueue code I found online
Manually adding my custom CSS file to the end of the "head" section so it loads last
The plugin Real Simple CSS that claims to give your custom CSS priority
The "Additional CSS" feature in Wordpress that is intended to give that custom CSS priority
All of these solutions "work" in that the custom CSS is loaded near/at the very end of the "head" section and should therefore take priority. Despite being the very last CSS loaded, it's still being overwritten.
The page in question
https://kingatlaw.attorney/courses/simple-uncontested-divorce-in-north-carolina/
Right now, my custom CSS makes the text on the tabs 100+ pixels large for testing purposes.
It's a question of "specificity". If I'm understanding this correctly, you're attempting to override a body text style (body .stm_lms_course__content) with the .active class applied to the parent div containing the body text. Because the theme's own style for body .stm_lms_course__content has more specificity, it's being applied over your own addition. In this instance, even applying !important won't help you unfortunately. You will have better luck to applying your custom styling to the exact classes set in the original theme. If you're using the Chrome browser, you can see the exact classes applying which styles using the 'Inspect' feature when right-clicking an on-page element.
Unfortunately, a lot of "off-the-shelf" WordPress themes do have some very specific styling which makes it difficult to overwrite (especially if paired with WYSIWYG editors like Elementor or WPBakery)
I have followed official and unofficial guides, and yet I simply cannot seem to be able to get certain styles in a child theme to overwrite its parents styles.
The only solution for me right now is to directly modify the main stylesheet, which is quite annoying as that gets overwritten every time there's an update for said theme.
I know the child-sheet works as some styles I set there do get shown.
The theme I'm using is Twenty Thirteen with a custom child theme.
I only have the default WP plugins active.
WordPress core, themes and plugins are up-to-date.
In both Chrome and Firefox I see the style, it's just ignored I guess.
I'm trying to change the background-color of the footer, I tried multiple selectors (ID, class, parent-child, element...
This may very well be something really simple I'm overseeing but I just can't figure it out.
Thanks in advance.
PS: sorry if I sound frustrated (I am, lol)
After a lot of trial and error, I found a solution to my problem.
A classmate suggested trying to use the selector you get when inspecting the element (be it with Opera, Firefox or Chrome), instead of the same selector used in the main theme's style.css.
I find this odd, as the child theme should overwrite the parent's theme style anyway, right?
Either way, short solution: use a more specific selector than the one in the parent's style.css.
I had the same problem and it was caused by Chrome caching the css. I renamed the style.css in the parent theme and refreshed my page and to my surprise nothing changed. Using F12 to inspect the element the styles section had a link to styles.css (even though I had renamed it) I was able to right click and open styles.css in a new tab.
The Ctrl-F5 shortcut clears the cache.
Doing this totally messed up my page because now it was not reading the parent style.css. Then all I had to do was rename it back and it correctly loaded it but also had the correct entries from the child style.css.
You might be able to just Ctrl-F5 (all the renaming bit was just exploration to force it not to load)
Stewartside helped me use JQuery to create a specific function for my main navigation on my website (thanks again!). I created a child theme to add the changes to my header.php file and it has started to cause a weird layout change. My homepage should have 20px padding, which is NOT a special CSS modification, but the child theme automatically removes it. This doesn't happen with other pages on my site, just the homepage. I have also added/removed the jquery code to make sure that wasn't the problem; the style.css file for the child theme only has the "child theme" coding, no modified CSS.
Homepage: http://bostonirishclothing.com
About Us: http://bostonirishclothing.com/about-us
Is there anything that would cause this?
Get the Firebug add on for your browser (available on Chrome and Firefox). Then right click the section that is causing the issue and you can see the coding and all the relevant CSS functions including the files they are in (to the chosen section). It will also show which CSS function is being prioritised compared to the other. Then you can modify the functions or add new ones to make it work.
A dirty way to do things is to use !important however this should only be used sparingly as it can screw with other pages. An easy way to avoid that is to make the CSS function for example .entry-content { color:#fff; } becomes .post-x .entry-content { color:fff!important; }
Test things out. Firebug is amazing help when editing CSS. You can even do some of the tests in firebug itself.