I am having some custom css issues, that I would really appreciate some feedback on.
Here is the link to where I am experiencing the issue:
http://bookemcreative.com/testsite/regal-pocket-cards/
You will notice there is a drop shadow under the "View Products" button/link, which I do not want. I have tried to apply some custom css to this using the firebug inspector, but can't figure out what I am doing wrong. I am still learning css, so would appreciate any feedback. Here is the css I tried:
a.button.product_type_grouped {
text-shadow: 0px !important;
}
Have you tried
a.button.product_type_grouped {
text-shadow:none !important;
}
As 0px is not a value that text-shadow property will be looking, so use none instead of 0px, You can see full documentation of text-shadow here
use instead text-shadow: none with a more specific rule (since it's better to avoid an unnecessary use of !important)
#wrapper .button.product_type_grouped {
text-shadow: none
}
which is more specific than the rule you have previously defined
#wrapper .button {
text-shadow: 1px 1px 1px #c72c34;
}
0px isn't a valid value.
Try this:
a.button.product_type_grouped {
text-shadow: none !important;
}
Related
First off, I did research this topic here and via Google for an entire day, and tried all I have found, for some reason I still can not seem to change Bootstrap styling. My custom css DOES work, since the first modification from it worked just beautifully where it did not need to override anything (so there was no default styling for input:hover, which I used, in bootstrap.)
Here is some code:
.input-group-prepend.form-control:focus {
color: #495057;
background-color: #fff;
border-color: #fff;
outline: 0;
box-shadow: inset 0 11px 20px rgba(0,0,0,0.19), inset 0 6px 6px rgba(0,0,0,0.23);
}
NOTE that the selector here must be like the 20th version I tried. Here I can not change the way the input field behaves when in focus. I tried everything after like a dozen searches on Google, nothing worked. I also used Chrome Inspect to find where box-shadow is used, and inside Inspect I could also CHANGE the property, which resulted the look I desired, but after copying that part to my css with the css selector, it did not work anymore. Having tried also tweaking the selectors to make them more specific, calculated the 'Priority points' or whatever they are called even, used IDs and whatever, and put my stylesheet link after the bootstrap one in the html file - no change (for the better, that is). These all worked for other people here and on YouTube and everywhere on the internet, and seemingly I have the very same situation and solution and for me they still don't. I am thinking of leaving bootstrap and try building something from scratch, but I am not that experienced in CSS, and I feel like I never want to be if it is like this.[enter image description here][1]
Some more code:
button .btn-raised {
box-shadow: 0 30px 0 0 #007299;
}
The second part, when trying to set the box-shadow for buttons, it is not possible, even though neither btn or btn-light, which I use, does do anything with box-shadow, Chrome Inspect simply shows 'none' as the value of this property. (Although I found that there is some transition where it is involved, but no way I can override or disable it.) Again, a hell of a lot of selector variations was tried.
UPDATE: The problem is solved, turned out all the problems I had was because I missed clearing the cache before reloading the page - never forget that! :)
Seems to be working fine for me. I think you may be loading your CSS before Bootstrap or you have other styles overriding your latest styles due to specificity.
As a last resort, just to test this theory, you could try adding !important after your styles. If this works then you know it's an issue with selector specificity but I don't recommend using !important in general.
eg:
div {
background-color: #000 !important;
}
button {
box-shadow: 2px 5px 1px 0 #007299;
}
.input-group-prepend {
margin-top: 20px;
}
.input-group-prepend .form-control:focus {
color: #495057;
background-color: #fff;
border-color: #fff;
outline: 0;
box-shadow: inset 0 11px 20px rgba(0,0,0,0.19), inset 0 6px 6px rgba(0,0,0,0.23);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-light">I am a button</button>
<div class="input-group-prepend">
<input type="text" class="form-control">
</div>
I'm having trouble applying an outline and drop shadow to some images in a Wordpress widget.
The '2017' theme adds some related rules which conflict with mine and cause the image to appear with a white vertical line in place of the border, which appears to crop the right of the image, as well as the top and bottom border and drop shadow. If I remove these rules in the Chrome DevTools the problem is fixed.
I can't simply remove those rules from the theme as I'm doing this as part of a plugin which users will add to their own sites, so I'd like to update my css to fix the problem without modifying the underlying theme.
Is there a way to do this?
The css in the theme (that I can delete in Chrome DevTools to fix) is:
/* Fixes linked images */
.entry-content a img,
.widget a img {
-webkit-box-shadow: 0 0 0 8px #fff;
box-shadow: 0 0 0 8px #fff;
}
I'm trying to override this in the plugin style sheet with:
.entry-content a img,
.widget a img {
-webkit-box-shadow: none;
box-shadow: none;
}
and adding this as inline CSS to the 'img' tag:
style="border:3px solid orange; box-shadow: 0px 2px 4px 1px #333; -webkit-box-shadow: 0px 2px 4px 1px #333;"
I've also tried adding this inline CSS to the 'a' tag which encloses the images:
style="-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;"
This has no effect however.
Can anyone help, please?
The rules of CSS (Cascading style sheets) are as follows:
a more specifically defined rule will override a general one (e.g. a rule specified for div.entry-content will override a rule specified for .entry-content)
the last declaration overrides all the others (e.g. an inline style in the style attribute will override something declared in the external style sheet) - use this rule sparingly as it gets confusing
adding !important to your property will override other declarations - use this rule sparingly as it gets confusing
so the answer is either:
div.entry-content a img,
div.widget a img {
-webkit-box-shadow: none;
box-shadow: none;
}
OR:
.entry-content a img,
.widget a img {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
Thanks for the help!
It turned out though that the CSS in the theme was being applied to an image next to the one I was trying to apply the border and shadow to, so I had to override the CSS in that image, in addition to the one I was trying to modify.
So I had to apply this to the other image as well as retaining it in the 'a' tags:
style="-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;"
I know this question has been asked multiple times, and yet most answers seemed to work for like half of the people. I am in the half for which this has not worked. You can checkout the project at https://jsfiddle.net/erbnzud1/2/.
What I need is for that blue outline to not be shown on focus, so after the button was clicked. As you can see in the CSS, I tried something like this:
.btn:focus,.btn:active {
outline: none !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
And many other variations. Let me know if you have any suggestions.
Thanks!
EDIT: This is the current solution that works: https://jsfiddle.net/erbnzud1/3/
Created this css class which I have added to my elements as per the help I got in the answer to my question:
.noFocus,.noFocus:focus,.noFocus:active {
outline: none !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
It is the label outline (the square one). add label to your css rule to remove outline:
label, .btn:focus,.btn:active {
outline: none !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
http://i55.tinypic.com/3325gyo.png
This grey border appears when you focus on the text field. I've tried outline: 0 which doesn't remove it. Any suggestions? Thanks
You can do like this:
input:focus {outline: none;}
There is a grey border that is automatic in chrome but it is just a regular border. Get the class or Id of the input and just put border:none; The input:focus as someone else has said is the selector to remove the border on focus. Hope this helps someone, automattic styles can be a nuisance sometimes.
I managed to fix this by styling the tag:
<fieldset>
to border: 0;
As said by allanb in the comments of this answer, the culprit is the css property 'box-shadow':
:focus {
outline: 0;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
I am designing home page of my domain registration website and I am stuck at one place. Please go through the website at http://a2host.in/
In Firefox and Google Chrome the Search and Go Button are in same alignment with the text and select box but in Opera and IE8, they are falling down a bit.
I have tried out all the things but I am not able to figure out the actual problem.
I see a lot of unneccesary styling. In essence, this is what you want:
Basic form without floats
You can tweak the font-sizes and colors here, until you have what you want. But this is a good starting point, because it is cross browser identical.
Also, think about using the <button> element instead of the <input type="button">. It gives you more freedom in styling.
Form-controls are a pain to get them look good in all browsers, especially buttons and select-boxes.
Please comment out the following CSS3 properties (please see below) in the .regbutton class of your stylesheet and then try
.regbutton, .regbutton:visited {
background: #222 url(/getImage.php?src=myUploadedImages/overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
/*-moz-border-radius: 6px;*/ /*comment out all CSS3 properties*/
/*-webkit-border-radius: 6px;*/
/*-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);*/
/*-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);*/
/*text-shadow: 0 -1px 1px rgba(0,0,0,0.25);*/
/*border-bottom: 1px solid rgba(0,0,0,0.25);*/
position: relative;
cursor: pointer;
}
try to set border:none for your buttons