Ok, this is the styling I want to be used
.suggestion-taxonomies-product-visibility span {
display: inline-block;
float: left;
padding-left: 10px;
}
The usual of mentioning the element here doesn't seem to work, any ideas? I can specify more if need be. I am new and not great at specifying my problem!
Thanks.
use important like
.suggestion-taxonomies-product-visibility span {
display: inline-block !important;
float: left !important;
padding-left: 10px !important;
}
Place your style after the theme stylesheet. It will override the theme styling. Better still, you can replace the suggestion-taxonomies-product-visibility class span styling in the styles.css file. If you opt for the latter, changes will be lost when updating the theme. You can avoid this by building a child theme to the theme you are currently using.
Use !important tag in each, ex:
.someclass {
width: 10px !important;
}
Related
I have a form with mat-errors that I'm trying to space out. I know I can simply space out the form fields themselves, but I've been trying to add margin/padding/border to mat-error elements, and they all get applied, but they don't move.
As far as the CSS goes, I've tried most things I can think of to force it to move. The styles are applied but nothing is actually changing.
mat-error{
display: block !important;
position: relative !important;
margin-bottom: 40px !important;
padding-bottom: 40px !important;
z-index: 999;
}
Why is this happening?
Change your css to class: .mat-error instead of mat-error.
In order to change styles in angular materials you should define a global stylesheet declared in the styles array of your angular.json configuration file. and custom all mat styles within.
In Styles.css:
.mat-error {
color: aqua;
}
The result will be:
Please read Customizing Angular Material component styles article for better explanation.
I am looking to improve the style of a Wordpress site.
I have a div with the group-input class which has this style:
.group-input {
display: inline-block;
margin-bottom: 0px;
float: right;
padding-left: 10px;
text-align: right;
}
I would like that below 572 px of screen we switch to float : left so I wrote this below the previous code, in my theme's CSS file, like this:
.group-input {
display: inline-block;
margin-bottom: 0px;
float: right;
padding-left: 10px;
text-align: right;
}
#media (max-width: 572px) {
.group-input {
float: left !important;
}
}
On the other hand it does not work, the new style does not apply to my div.
suddenly I don't know how to do it. Do you have an idea, a lead to advise me?
I want some explanations, something simple for you is not necessarily obvious to me suddenly I need to understand. Thanks for your time and help.
In general, that should overwrite the css rule you are trying to do, but it's probably another css rule that more specifically targets that element. A few reasons it may not be overwriting is because:
another css rule is more specific than yours
it's in a breakpoint more specific than yours
it uses !important
A combo of all of those will require you to be even more specific in targeting the element.
If you find you are unable to overwrite a rule, try and be more specific in your targeting of the element by targeting it's grandparent/parent and working down the html tree. If you notice that that isn't working either, then try using !important.
Check the html structure around it try that. Sometimes even body .group-input might be specific enough, but the closer you specify to the element, the better off you will be.
I have a Contact form 7 on my home page here: http://grownowsma.com/
I have been trying to get the input fields to be centered. I tried a few tricks I've used before and answers from other Stack Overflow questions and for some reason no luck.
I tried this trick: http://www.screencast.com/t/ygBP3eQn9jQu
I tried these in the CSS:
.contactform input[type="text"],form .contactform input[type="email"]{
margin: 9px auto 0 !important;
}
And this:
.wpcf7-form-style {
max-width: 800px;
margin: 0 auto;
float: none;
display: block;
}
Both no luck. I've been messing around in the inspector for a while and haven't been able to change it. Any other suggestions for selectors or attributes to try?
You don't have an element with the class contactform, so you can't select inputs beneath it. Either add that around the form shortcode in your post, or use a different selector e.g. .home .wpcf7-form input[type="text"], .home .wpcf7-form input[type="email"] assuming you don't add a second CF7 form on the homepage where you don't want to center the inputs.
Other than that, margin: auto; should work nicely.
If you want it globally, use this CSS:
.f7-form-control, input[type="text"].wpcf7-form-control,input[type="email"].wpcf7-form-control, input[type="password"].wpcf7-form-control, input[type="tel"].wpcf7-form-control, textarea.wpcf7-form-control,.post-password-form input[type='password'],input[type="email"] {
margin: auto;
}
If you want for only a page then you can use this plugin https://wordpress.org/plugins/wp-add-custom-css/ . It will give you a option to put custom css in individual page.
Assume that your contact form ID is: 4579
And here is the CSS for that specific form only.
#wpcf7-f4579-p4004-o1 .wpcf7-text{
display: block;
margin: auto;
}
It finally worked for me:
label, .wpcf7-submit{
margin-left: 50% !important;
}
You can also add a <div style="text-align:center"> directly in your form if you want.
Please add in you style.css:
.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
margin-left: 250px !important;
}
Ok so I have this scenario that I don't understand in the default bootstrap css style sheet the label css is defined like this
label {
display: block;
margin-bottom: 5px;
}
Now I override this css in my own stylesheet which is rendered after the bootstrap like this
label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
color: #333;
}
Can someone explain me why is browser is still rendering as a display:block?? even if the styles are well defined are good rendered? here's the screen shoot the computed styles
Here's the proof of the override of the style
Update, this is how is rendered the stylesheets
You need to import your CSS code after Bootstrap that way it will get overwritten.
As pointed out, you can just use "!important" however, this is usually bad practice.
Can I have hand please? I am struggling to over-ride the CSS on the Wordpress Custom Fields Search plugin, which seems to use the same style for search boxes that appear in the widget and the page. If you look at http://www.landedhouses.co.uk/parties/, the white text is visible by the search boxes in the widget but not so visible on the page. Any ideas how to fix this!? Unfortunately adding this to the page's php didn't achieve anything:
<h2>By size and price</h2>
<p style="color:000;"><?php if(function_exists('wp_custom_fields_search'))
wp_custom_fields_search(); ?></p>
Many thanks!
This is the style rule that is causing you problems.
/* searchforms.css line 15 */
.searchform-label {
display: block;
float: left;
width: 200px;
overflow: hidden;
font-size: 1.1em;
font-family: sans-serif;
font-weight: bold;
padding-top: 4px;
color: white;
}
You can do a few things using css. You can make an overwriting rule in the style sheet:
.searchform-label {
color: black;
}
if that doesn't work, you can make a more specific rule:
label.searchform-label {
color: black;
}
or you can in the worst case scenario make an !important rule.
.searchform-label {
color: black !important;
}
As an extension of the above answer (i still cannot comment :( )
Generally speaking, a more specific rule will override the property if the original is not using !important,
so as the original targets .searchform-label, you just need to target something more specific, such as label.searchform-label, and if that doesnt work, include a direct parent element and a > e.g. if the label is wrapped in a P, use p>label.searchform-label
there should rarely be a need for !important, although they should make a !notimportant, for easy override :D