The style element created in tinymce is overwritten by the defaultcss, so I want the "!important" attribute to be automatically added to the style element.
How do I automatically add an "!important"?
This answer from LostKeys may be helpful: TinyMCE Notifications Custom Css
You can put together a custom skin that should overwrite the defaultcss. The above stack overflow answer has a list or resources on how to do this. If you have a particular element that is not working, even with the !important element, you could try "!tox" as well.
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 have an html body with some tags containing inline styles.Normally we could override inline with !important
But as I need the page to be AMP valid , I couldn't use this method.
Any way to do this in AMP valid method ??
No. As you mentioned, in AMP you can not use the !important style. Also you can only have one style tag and it has to be in the head tag.
You can override the general styles inline but not the other way around.
AMP needs to be able to enforce its element sizing rules, allowing the !important style would interfere with that.
I'm trying to override a class style from ant design but looks like my custom style is the one being overridden due to the order the styles are rendered on the html page.
I've already tried to change the order of the import of my custom style to be the first thing to be imported on my component but it seams that this doesn't do anything.
My element style looks like this:
Is there a way to change the order the style is added to the page? Or make my style render last?
In order to override some style without using !important, you could increase the specification of your selector. Specifying that you are selecting a div, for example, will add more priority and override it, like changing .ant-form-inline .ant-form-item to .ant-form-inline div.ant-form-item.
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
I have made some templates on wikia.com, which contain only CSS code (key:value;).
My problem is having another template use these style templates in a style attribute tag.
style="{{MyTemplateStyle}}"
This code does not evaluate as expected. The CSS code is outputted before the element and the style attribute is not included inside the element.
Am I trying something not possible for a wiki ?
I merely want to be able to change styling on certain templates in one place, like regular HTML & CSS pages.
CSS styling specified from the style="" attribute always takes priority over any other css, even if you use !important in a CSS specification.
Therefore any edits you make to your CSS on Wikia will not ever override the CSS specified inside an attribute.
Kim, you were right to switch to classes instead of embedding in-line styles via templates.
The very idea of using templates suggest that this was going to be re-used in more than one place, applying styles to a group or, in fact, a class of elements.
This approach is much simpler to read and maintain (as you only have one, central place to edit), and also, if done right, will enable you to seamlessly change the colour scheme via Special:ThemeDesigner.