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.
Related
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'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?
I've embedded a widget on my page that links to this javascript file:
https://widget.zola.com/js/widget.js
The widget is generating a header section which i'd like to remove.
https://widget.zola.com/v1/widget/registry/taylorandjaredseptember7/html?:1
I've inspected the element and was able to target the section and add a display: none to it. That worked, but when I copied the code into my CSS style sheets, it was not working. I even tried adding !important to it with no luck.
Is there something obvious that I'm missing?
This is the code I added to my stylesheets.
.registry-header {
display: none !important;
}
I also tried targeting the classes it was nested in, like so:
.row registry-header-section .col-xs-12 .registry-header {
display: none !important;
}
Other background info that might be helpful:
- My site is a Wordpress site using the Divi theme.
Establish where the current rules are being generated from in the Document Tree and then use this question and answer to find how to effectively overwrite these rules.
Possible Routes:
You may need to use an id tag on the element and apply the style to the #id, because this will overwrite .class level styling.
You need to be as specific as possible with your targetting; your second example is better than your first.
Remember if the widget uses just a JS file then it's probably editing the CSS via Javascript inline, so it will be doing so inline, therefore you may need to add the style adjustment overwrite inline into the page itself. Set your <style> block to appear as late in the <head> as possible and add !important to the elements required
Create your own Javascript script to load after their widget script and to force CSS to adapt as you want it, with javascript or jQuery code blocks.
Crazy idea.... but it might just work.
You would first need to export from your Browser Inspector the current applied styling generated by the widget and save this to your own (domain-local) CSS file.
You can then use Content Security Policy to specifically block 'unsafe-inline' and 'unsafe-eval' in your style-src: part to block javascript and other inline styling from being applied to the page.
Replacing this with your export CSS style sheet should avoid Javascript/inline styling and allow you to tweak the styling as you need by simply editing your CSS code. You ca fine tune this depending on your dependancies and codebase.
So I got my custom app.css in my project and I'm using bootstrap template. Now when I create new button style for example in app.css it's accessible everywhere (on every page since I got master template and other pages are extending it) but when I override bootstrap theme in app.css it's not working. When I use same code to override bootstrap on top of the page using <style> tags it's working. app.css is included properly and after bootstrap.css so any idea what I'm doing wrong ?
Try a cache refresh, for me in Chrome, I use Ctrl+Shift+R.
If this doesn't produce any results, use the inbuilt inspectors on Chrome or Firefox to view the attached properties to the element you are editing. If the app.css is overriding the bootstrap.css, you will see something like the below image, showing the app.css is above the skin-purple.min.css meaning the app.css was the latest to be loaded.
I would say that there is a hierarchy, try to include the bootstrap.css after the app.css, you could also give those css attribute an !important like so:
#bla {
display:none !important
}
But that is not a good practice I think, it may be ok if you do not override alot of the bootstrap.css
You could also try this:
http://bootstrap-live-customizer.com/
to customize your bootstrap.
It most probably is a style precedence issue. I found this article very useful to at least understand what goes on with style precedence and what specificity is.
In your very case it may be helpful to simply use a class selector such as
.mybutton button{
color: blue;
font-size: inherit;
...
}
and give your buttons the attribute class="mybutton". In the class definition you may freely override whatever you want and also let other properties be inherited from Bootstrap.
There is also the !important rule. However, it is usually referred to as a bad practice, since it breaks the normal cascading rules and makes debugging an incredibly painful task.
I have a button on one of my pages in wordpress and I want to float it to the right because right now it is floated left.
Can I do that with css since its created using shortcode? If so, what would I edit?
Shortcode is just a shortcut for outputting normal, pre-formatted HTML. You can write a CSS rule to style the element(s) but it depends on the markup the shortcode is generating:
Output the shortcode and view the page in a browser.
Inspect with Firebug or Chrome Dev Tools (for example) or CTRL+U.
Look for ids or class names on or above the generated elements.
Write a CSS rule that targets the elements using info from #3. You could add this rule in the style.css file in your theme folder.
It's possible that your rule will be overridden by another style; shortcode providers often "sandbox" CSS with inline styling, so that a user's other styles don't interfere with their elements. The quickest solution is to add the !important override to your rule, e.g.:
#target {
float: right !important;
}
This overrides future inline styling on the element.
!important rules