I just began work on this site for a client, the site is www.kingcharltonmusic.com. It was built by someone else, so maybe I just can't find what I'm looking for.
Essentially, the comment section at the end of some pages (About for example) have a transparent background, and no matter how much I alter the css it doesn't seem to effect it.
I'm not sure if I need more information than this, but if so please let me know.
Thanks in advance!
Depending on what order the rules are in, background: can override background-color.
I made a little demonstration so you can get a feel for how the various rules override each other, you can play with it:
http://jsbin.com/ecohuk/edit#html,live
You need to find out if there is another rule further down in your stylesheet that is overriding it, or at the very least use background: instead of background-color
Just from a quick glance, div#comments doesn't appear to have a background set explicitly. Through firebug/webkit tools I could successfully change the background to white, so I suspect that all you need is the right element to target with your css.
#comments {
background-color: white;
padding: 0.75em;
}
Make sure to clear your cache (server and client side) after you have uploaded your new CSS file.
Related
I am using Wordpress and WPbakery. I have set a full-width, full-height background. But currently the background-position is set to centred with '!important' assigned as I see in the developer tools.
I want to set it to 'top'. I edited in developer tools in chrome and I achieved the desired effect. However I'm not sure how to make the changes permanent. I have tried copy pasting what I saw in the developer tools into the custom css field and editing it to 'top' but it wont override the theme. How do i go about it?
This is the current code seen in developer tools:
.vc_custom_1551104319445 {
background-image: url(https://unlicensedshrink.com/wp-content/uploads/2019/02/ulweb.jpg?id=9) !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
Not sure in which order custom styles and the default CSS of the theme are output … try increasing the specificity of your selector, f.e. like html .vc_custom_1551104319445 or .vc_custom_1551104319445.vc_custom_1551104319445
When multiple CSS rules apply to an element and try to specify values for the same properties, it becomes a matter of specificity, which one “wins”.
Here are a few resources on that topic:
https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
https://specificity.keegan.st/
So if you try to overwrite something using the exact same selector you took from the WP/themes styles, it becomes simply a matter of order. Do the WP styles get embedded last? Then they win, otherwise yours would.
A simple way around that, is to increase the specificity of your selector. Selecting elements of this class on the additional “condition” that are descendants of the html element is one way to do that. Or to repeat the class name, so that .foobar becomes .foobar.foobar … and lots of other possible ways.
You need to see which file is producing the code. For instance -
After you know which file is responsible for the code, then you go to the site directory and implement the file in question.
I wouldn't suggest using the vc_ number selector. Best to use or even better add a custom selector on the row or element itself and then apply the following CSS.
.has-bgimg-right.vc_row-has-fill{
background-position:center right !important;
}
What ends up happening if you use the vc_ number selector is if you or your client go to update that field the vc number will change and you will be shaking your head. So create a custom selector class and use the vc_row-has-fill which will never change.
I have read many posts and tried quite many things but I don't seem to get an embed form to work the way I need it to work.
Problem with input on focus:
1. Blue outline > I tried the code below I seemed to work and then suddenly it stopped working.
input:-webkit-autofill:focus {
outline: none !important;
}
2. Yellow background > I got it fixed with the code below.
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0px 1000px #ffefef inset !important;
}
I would like the form to always look like this (normal, hover, focus, active
But that's sadly not the case because of "user agent stylesheet".
You can see the form in live here →
Also note, I am not a programmer. I know WordPress well enough but any tricky answers might get me confused. I would like to solve this problem either using .css or adding some JavaScript code in the header/footer element.
And I also tried Normalize.css which, I guess, I could just add to my theme folder with the same name... forgive my dummyness. If so, that didn't help. Well, I don't know if I was supposed to add a new line there or not.
Any help would be highly appreciated (praying hands).
#drip-first-name:focus, #drip-email:focus {
outline: 0;
border-bottom: 3px solid black !important;
}
make sure you prefix it for different browsers(Not sure if needed) and of course do the same for active etc (wherever you get that blue outline) . This will work for chrome.
However, a few notes. since you're messing with css you need to start using Chrome Devtools. It's free and built into chrome. This will show you what's wrong and how to fix it.
Secondly, using !important in css is not a major no no but the reason your border-bottom rule wasn't working was because you had already used !important in a previous class and it was picking it up. Important won't let you override anything unless it's lower in the CSS stylesheet and is also marked as important. Long story short at some point you will have to redo the whole thing if you keep using important.
this is how it would look to you with devtools open:
This is the link for you to get started with devtools:
Devtools
apply outline:0 to the input normal style not :hover or focus, then remove
border-width: inherit !important; from the :focus of the input, because then it takes it's parent border width, and that is 0px therefore your border disappears on focus.
Well if you'd like you can remove all the default userAgent-styling by using the all: unset; ? That works for me.
But if you just want to remove the outline you shall do
input { outline: none; }. Hope that helps.
Edit: the all: unset is there for remove all user Agent Stylesheet. Nothing else.
There is a main page in CSS that inherits this.. but we are allowed to work only in a portal version of the site. We want to change the background color but somehow it is unable to change due to its inheritance from the main CSS. It is a company with many agencies and within that agency there are many depts with different web sites. We belong to one of those department. Suggestions? How to suppress the background or even change the background to a different color. Thanks
From your description, it is really hard to tell what's going on here. However, knowing a bit of CSS, there are usually several things you could try to override rules:
CSS rules are read from top to bottom; rules that come later (within the same source) will override previous rules
More specific rules are prioritized over less specific rules. You should be able to override an p { background-color: #fff; } with, for example, #content #main p.note { background-color: #fff; }
Inline-Styles (<tag style="background-color:#fff">...</tag>) have priority over those in the html's head or linked CSS files
Using !important (like this: background-color:#fff !important;) will tell the browser to prioritize your rule over other rules
Maybe one of those will do the trick for you.
What I'm looking for might be very basic if someone is using bootstrap for a while.
I'm looking for a way to style the body background let say #ebebeb and the container background #fff with a padding of 10px, if you go search something on m.Google.com you will see exactly what I'm talking about.
Somehow I cannot figure out how to do it with Twitter Bootstrap 3.0.2
Could you please edit your question and provide your code? There could be more than one issue causing the problem, and it'll be easier to help you if I can see your code.
If I had to guess, I'd say the easiest way achieve what you want would be something like this:
body {
background: #ebebeb;
}
.container {
background: #fff;
}
Make sure that you're including this CSS after you've included bootstrap.css, otherwise it won't override the default styles set by Bootstrap. Here's a the fiddle that shows this: http://jsfiddle.net/5KwP3/1/
One thing to be aware of however, is that anything that isn't in the container div won't have any padding by default.
I'm trying to remove the blue "halo" outline that form elements have in Firefox on OS X. Using CSS, I can remove the halo in Safari on OS X, via:
input {
outline: none;
}
But this seems to have no effect in Firefox, nor does the -moz-outline property.
Another option, that takes care of all of the 'halo' is this:
*:focus {outline: none;}
I guess you could add an !important if you wished, but I haven't run into the need yet.
:focus {outline:none;}
::-moz-focus-inner {border:0;}
I'm going out on a limb since I don't have OSX to test it... but does removing the border work?
input {
border: 0;
}
I believe the style of all the form elements are stored in the forms.css file. In OS X, I think it is located here:
/Applications/Firefox.app/Contents/MacOS/res/forms.css
You may want to browse through that file and see if there is any obvious CSS that is affecting the appearance you are seeing. For example, on Windows the input element has -moz-appearance: textfield;, which I couldn't find any documentation on, so perhaps there is some "native" -moz-* style on those fields that is controlling the glow, something you could possibly override.
The other thing to try might be to override everything in that file by changing the input definitions to input2 or something (after making a copy of course). Then you can see if you can get the glow to stop at all by manipulating the default CSS.
Once you've determined you can make it stop (if you can), you can add styles back in a bit at a time until you find the one that causes the effect you don't want. You can probably speed up that process by eliminating styles from your testing that obviously aren't related (e.g. - line-height: normal !important; is almost certainly not responsible for a blue glow around the fields).
Maybe you have an active user style sheet in your machine creating this behaviour. Some add-ons do this (to make the focus more obvious).
Look into the firefox's chome forder (in your user files)
Alternatively try with
input {outline: none!important;}
Also
The Stylish plugin has a style for this, maybe you have it installed?
There are greasemonkey script that do this. If you have it installed, disable it
They both take precedence over the !important attribute.
So: you have several places to look into
* User stylesheets
* Stylysh
* greasemonkey
* anothes add-on
One of those must be forcing the outline
I went through the various suggestions made here, but none seemed to be able to fully address the problem. By defining a custom border style, i.e.
border: 1px solid #000;
I'm able to get rid of the focus halo, but this obviously alters the look of the input element. border-style: inset; seems to most closely resemble the "native" look, but it's still not quite right, so as far as I can tell right now, you can either suppress the halo, or have a natural looking input.
I believe this is what you are looking for:
input:focus { outline: none; }