Hey so my friend runs this web company. He told me he wanted to make some changes to his site. And if I showed him I could handle it, he'd hire me for some stuff.
Most of it I handled fine. But I can't figure out this for the life of me.
If you go to his site (linked below) and hover over the round plus icon under recent work. The shadow switches to blue. I want it to stay orange though.
Any ideas?
p.s. i changed the icon color, shadow color etc... just can't figure out how to change this one thing.
*link removed
Thanks!
relevant code below :
.posts-grid.works li .featured-thumbnail .zoom-icon::after {
background: #E35F33 none repeat scroll 0% 0%;
}
.posts-grid.works li .featured-thumbnail .zoom-icon {
box-shadow: 0px 0px 0px 6px rgba(227, 95, 51, 0.2);
}
Your issue is one of CSS specificity:
Here's the selector you're trying to overwrite:
.posts-grid.works li .featured-thumbnail .zoom-icon:hover { ... }
Here's your selector:
.posts-grid.works li .featured-thumbnail .zoom-icon { ... }
If you can't or don't want to remove the first selector, make your selector more specific.
Ref:
Specificity - CSS | MDN
You can remove the following code:
.posts-grid.works li .featured-thumbnail .zoom-icon:hover {
-webkit-box-shadow:0 0 0 6px rgba(90,206,205,0.4);
-moz-box-shadow:0 0 0 6px rgba(90,206,205,0.4);
box-shadow:0 0 0 6px rgba(90,206,205,0.4);
}
This seems to fix the issue.
Related
I have a select form in Bootstrap 4 with dark background, when I select an option I want the background after selection to stay dark. My example works in Chrome and Firefox. But in IE and Edge the background stays white while in focus. Check my jsfiddle, any ideas?
.form-control:focus {
background-color: #121212;
border-color: #121212;
outline: 0;
box-shadow: 0 0 0 0rem rgba(0,123,255,.25);
}
https://jsfiddle.net/cd1eyqvr/3/
Keep the .form-control:focus part and add this in your css:
.form-control:focus::-ms-value {
background-color: #242424 !important;
border-color: #121212 !important;
color: #ffffff !important;
outline: 0 !important;
box-shadow: 0 0 0 0rem rgba(0,123,255,.25);
}
This part will work in IE11 and Edge.
You can refer to the demo I made: https://jsfiddle.net/yuzhou0602/ofwvuzyr/4/
Check this link from offical docs:
https://getbootstrap.com/docs/4.0/getting-started/browsers-devices/
It seems the edge has problems with box shadow and you must add extra css to your stylesheet Check the links blow for more help about your problem Box shadow not working in microsoft edge
And also check this link for complete box shadow in edge solutions
https://css-tricks.com/snippets/css/css-box-shadow/
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'm using SaaS for building my own webshop. The problem is that i dont know any code. I wish to make my menu bar look more stylish. The SaaS platform offers CSS editing but i can't change the html.
The current menu bar has this css;
#menu {
padding: 5px 0 5px 0;
background: #005775;
margin: 0 0 8px 0;
}
How can I make this better looking. I tried changing the opacity, but every time i add the word opacity the code breaks and the memu disappears.
My current Design looks like this;
http://imgur.com/a/ptSuA
I would really like to make the Menu bar a bit less rough and make it look more friendly.
Sorry for my horrible grammar and lack of knowledge.
try using
background-color:rgba() instead of opacity
this adds transparency to the menu bar.
example
background-color:rgba(255,0,0,0.5);
the last value adds transparency.
When you added opacity to #menu, it affect on All his Childrens and menu disappears.you must use of background-color:rgba() or background-color:hsla()
#005775 = rgba(0, 87, 117, 1.0)
#005775 = hsla(195, 100%, 23%, 1.0)
So :
#menu {
width: 200px;
height: 200px;
padding: 5px 0 5px 0;
margin: 0 0 8px 0;
background:rgba(0, 87, 117, 0.3);/*/ I use 0.3 /*/
}
<div id="menu">I Am Menu</div>
Try this. As said by others, this will reduce the opacity of the text in the menu too.
#menu {
padding: 5px 0 5px 0;
background: #005775;
margin: 0 0 8px 0;
opacity: 0.5; // Change this value between 0(transparent) -> 1(100% visible);
}
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;
}
I have added a button styling to a div. The background-color does not apply to the normal state. However, as soon as I click down on the button and turn it into an active state, the background-color applies correctly. I cannot figure out why the background-color only appears in one stage and not the other. I have resorted to using !important to make it work. Below is the CSS:
.statusbutton {
-moz-box-shadow:inset 0 1px 0 0 #ffffff;
-webkit-box-shadow:inset 0 1px 0 0 #ffffff;
box-shadow:inset 0 1px 0 0 #ffffff;
height:43px;
width:40px;
border:1px solid #ccc;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
display:inline-block;
background-color:#fbfbfb !important;
}
.statusbutton:active {
position:relative;
background-color:#fbfbfb;
top:1px;
}
EDIT: I realized the issue came from a later part of my stylesheet:
.red {
background:url(status-red.png) no-repeat center center;
}
I applied .red to the button afterwards, which caused the background image to override the background-color. The code below ended up fixing the issue:
.red {
background:url(status-red.png) no-repeat center center;
background-color:#fbfbfb;
}
Using !important is usually a bad idea. Is this your entire css file or is there more? There may be another css style with higher priority that is overriding your attempts to set the background color here. I would suggest setting up a jsfiddle if you're still having trouble
If you want this code works, you have to remove the !important from your CSS code otherwise this rule will take priority on the :active state, and remember to change the colors in both states (actually you use #fbfbfb for both normal and active state).