I am using a plugin on a wordpress site which operates in light/dark mode where I can set the colours manually. However the headers are automatically inheriting the theme colours.
I have tried inspecting the code on the grid to try and isolate the class and create a custom CSS code to remove the inherit property.
The code that the issue exists in is
.tg-barking-mouse a:not([class*="tg-element-"]),
.tg-barking-mouse a:not([class*="tg-element-"]):active,
.tg-barking-mouse a:not([class*="tg-element-"]):focus,
.tg-barking-mouse [class*="tg-element-"] *:not(del) {}
Within this bracket, the margin, padding, color etc exist. When I remove color it does exactly what I would like it to.
However when I paste the same code listed above in CSS and write color:none within the bracket, it doesn't seem to add to the element and overwrite the current color settings.
I believe there is a simple solution which will allow me to isolate the correct element but I'm not too sure what I'm missing.
Is it only the header that has the issue?If it is then you can use css to set your preferable color choice. try include important property like color: #000 !important; or any color of your choice to see if it can do the trick.
Thanks everyone for your help, I was able to work it out by targetting h2 within the class and resolved the issue with the inherit property:
h2.tg-item-title {
color: inherit !important;
}
And it has inherited the plugin's text style rather than the Wordpress theme.
Related
I want to change the color of the social icons (on the left side of the screenshot). Since I have no clue how to change it in WordPress, I tried it with CSS. But now I noticed that I have to change the element. style and I don't know how... I tried just changing the color in the element. style and copying into the additional CSS in WordPress, but it doesn't work. On the screenshot, you can see what I mean. Is there a solution to this problem?
This is what I tried:
element.style {
--wpz-social-icons-block-item-color: #FF0000;
--wpz-social-icons-block-item-color-hover: #FF0000;
}
Please try with this following code in wordpress customizer > Additional CSS
.social-icon-link{
--wpz-social-icons-block-item-color: black !important;
--wpz-social-icons-block-item-color-hover:
red !important;
}
I think that what makes color is the element inside a <span class="social-icon socicon socicon-icon-instagram">
But anyway you are trying to change something via style, and if you want to do like this you´ll hace to use something like
style="background-color:#000"
or wathever, color, font-size etc
But in this case I will use a new style, like
.socicon-icon-instagram {color:#000;}
And maybe depends of the template you´ll need to add !important to CSS class to get the color...like this
.socicon-icon-instagram {color:#000!important;}
It is not a good practice but sometimes is necesary
I was trying to add some css styling to my wordpress website. However, I'm quite confused how to select the element and add the css !
Let me explain it in detals in three scenarios:
Picture 1:
I'm going to change the color and width of that button with text "Submit your attendance" inside. I wanted to make it red.
First Try: Picture 2:
I selected the calss which is :
wpcf7-form-control wpcf7-submit
Added the background-color: red , but it didn't work.
Second Try: Picture 3:
I did the same for this class:
wpcf7-form-control
Thrd Try: Pictur 4:
In inline style, when I add background-color: red and width: 100% in workes. I noticed a style attribute is also added. However, I'm not sure how to add in my Custom CSS of wordpress. I mean which element should I select? Of course Inline-style is not an element.
This is not an issue with regard to WordPress. This is due to CSS Specificity. What this means is that the rule that is more specific will "win" and be applied. This is why inline styles typically work over non-inline styles.
In your example, the rule that is being applied is more specific than the one you're trying to override with.
There is a hierarchy when it comes to specificity and the order in which rules are applied. Here they are in order of most specific to less:
Inline Styles
Ids - targeting the ID of an element is more specific than targeting a class
Classes, attributes and pseudo-classes (for example :hover)
Elements (for example a "p" tag) and pseudo-elements (:before)
Either add an ID for the your button or target the class in a more specific manner. For example body .thecontainer .thediv .anothercontainer .myelement
This might be work. You need to add !important property.
wpcf7-form-control{ background-color:red !important; }
Try this.
To update worpress css you have to edit the file style.css
Appearance -> Editor -> style.css (search inside other files)
or
Appearance -> Customize -> Additional CSS (where you have to add manually every line of code)
Sometimes you need to add "!important;" at the end of line, something like:
background-color: red!important;
I Dont want this Span saying Taxes are included in the sale of this product, because this is an un-taxable product. My plan is just to change the color of text to hide it, but I cant seem to find the right area to change it.
Im using WordPress minimalist
Please follow the steps below to achieve what you want:
If you do not already have a child theme, create one with the name
YourThemeName-child in wp-content/themes. Replace YourThemeName
with the name of your theme.
Copy the CSS style from your main theme to your child theme.
Find the class of the element you want to hide by:
In Chrome: Right click on the element you want to hide and click on Inspect Element. From the console on the right, copy the CSS class of the element.
In your child theme CSS (the one that you copied from the main theme) add this code:
.element-class {
color: #ffffff;
}
/* Use !important if changes do not show. Refrain from using !important unless absolutely necessary */
Or if you want to not display it completely:
.element-class {
display: none;
}
/* Use !important if changes do not show. Refrain from using !important unless absolutely necessary */
To answer your question in the comments, yes, creating a new CSS file in child theme will override the main theme CSS.
Hope this helps.
I'm a new user of GWT and I'm looking for some advice concerning "theme management".
I have to make a website that can handle theme changes. What I mean is that a user can make is own theme by filling a form, then the website will automatically and dynamically changes its color to display the new ones.
I thought using a CSS sheet for all the static properties and using some GWT lines (e.g. label.getElement.getStyle.setColor(...)) to change color. But I have many "hover" properties and I think creating many MouseOverHandler is not a good idea ...
Is there a way to edit CSS sheet dynamically or a magic trick to do that ?
Thanks.
You have many options - the most straight forward (to me) is to make use of the existing CSS classes that GWT introduces. If you look at javadocs for any of the widgets GWT provides, you'll notice the CSS Style Rules section. For example, Button:
.gwt-Button
the outer element
That means that every Button you add to the page has a .gwt-Button style applied to it. If you inject a CSS stylesheet with a rule that overrides this style:
.gwtButton {
background: red;
}
All your buttons will turn red. You can inject stylesheets using StyleInjector. Creating the stylesheet's content dynamically is up to you - but it's just text, it shouldn't be hard (but make sure the generated CSS rules are valid!).
To get you started, try hooking up this code to some button and see if clicking it triggers changing all the Buttons on the page red:
StyleInjector.inject(".gwt-Button { background: red; }");
If you have custom widgets that you want styled differently, just add an individual class to them (.customWidgetWhatever, like Button has .gwt-Button, etc.) that you will include in your custom stylesheet.
Make sure you understand how CSS works and what it can do for you. For example, if you want to style each button the same, you don't have to change each button's style individually, just use:
button {
background: green;
}
And all the <button>s will turn green.
The easiest way to change themes without reloading the whole application is to assign a theme class to the body element.
You'd want to prepend each CSS class in your app with a particular theme, e.g.:
.theme1 .myClass {
color: red;
}
.theme2 .myClass {
color: blue;
}
Then you'll apply a particular theme to the body element:
<body class="theme1">
When you want to change themes, you'll have to change the body class so it will become:
<body class="theme2">
this way, each element that has class myClass will have its color changed from red to blue.
You cannot edit a CSS file dynamically, but you can inject CSS style either as a new CSS file, or directly into your document.
For example, you can define all key CSS rules in your "main.css" file, and add your user-defined rules directly into the host HTML page with a style tag.
Is there a way or operator in CSS to assign a new style to specific element? I don't want to change original style because it belongs to a plugin and changing it will change it on all my pages. However I want to change the position of the element on a specific web page.
I also can't call those styles in my html because that CSS file is used solely in jquery plugin, you only put class="slideshow" in html div and thats that. I can change that CSS file to suit my preferences, however I don't know how to change it for specific instances?
In order to make a specific styling on a specific instance of your plugin, you should assign a specific class or id to a parent container of that plugin for the instance you need customization.
Example : you can give the id="special" to a parent of the plugin in the page you want customization.
Then you can use that selector to style it independently from other instances of that same plugin.
example CSS:
#special .slideshow /*other selectors */ {
/*your specific style */
}
In your scenario CSS specificity Rule will be helpful for you.
For example in your plugin you are using RED Font Color in class slideshow. Then in your another CSS file you can create a more specific Rule.
Check the Demo what I've posted above on comments section. Here is the direct link.
div.slider .slideshow {color:green;}
You can refer to the element by name:
#htmlitemname{
color: green;
}
CSS is cascading, i.e. it will apply it top down - general, class and then the id.
You can add !important to your css if you wish it to override any inline styles. So long as you make a style sheet specifically for that page, this should work for what you need. Hope this helps :)