The adding css can be applied to the published article.
But the adding css in Wordpress can’t be applied when editing.
How can I apply my adding css to the page when editing?
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 want my Wordpress website navigation menu font larger And make the font become normal type, but NOT capital letters.
I have googled it and the result said need to change the theme style.css in WordPress dashboard, based on the tips but there has another issue, the style.css in my child theme is almost blank, only a few lines with the theme description (i.e. theme name / version / templates/ author etc.) , but Not the site theme CSS. Is the theme creator hide the CSS? So why this happened? And what should I do?
please see the screenshots below.
style.css
Big thanks in advance.
Most of the themes also have a section where you can put custom CSS. You can usually find this in the Wordpress Customizer, otherwise in the theme settings. This way you are always sure it wont disapear after updating your theme. Of course you can also use a child theme, but the style.css above doesn't look like it is from a child theme.
The CSS you are probably looking for is the following:
.nav{
font-size:14px;
}
If you don't know the correct CSS selector (.nav) you can find it here. To see what styles you should use for the element you can look at the CSS Reference of W3Schools. Hope it helps you.
Use a code inspector ie. Chrome dev tools to make the changes you want to the existing style and copy/paste that code into your child theme stylesheet.
EDIT
In Chrome for example, open the code inspector using ctrl+shift+i might be different on a mac, I don't know. by default it will show you your html markup and your css styles below. Locate the element you want to change either by finding it in the html portion or using the selector tool (top-right of the developer window) and selecting the element you want to change on your page.
That will show you the css for that element that you can modify as you wish underneath. Once you are satisfied with the styles you have changed/removed/added, you can copy that code to your child theme css.
Other than that, I can only suggest you find some resources and videos on using dev tools to help you out. If you are building a child theme you will need to be using them significantly.
PS. One more thing to note is that some wp themes have some code that you can only really change with a plugin or by writing custom css under the customizer.
You can figure out exactly what you need to write in the custom css area by using chrome's dev tools and selecting the font you want to change.
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.
I want the WordPress tinyMCE editor to throw inline CSS for elements instead of adding WordPress classes to them.
Like for example if I add an image from media library, the editor will add classes like wp-image, size-medium etc. The style rules for these classes should be applied inline instead of classes.
Thanks
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.