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;"
Related
Hello I am trying to remove the default background of toolbar icons when hover in firefox using userChrome.css
.toolbarbutton-icon
{
border-radius: 5px !important;
box-shadow: 0px 1px 1px 1px black, 0 -0.01em 1px 0px #D0D0D0 !important;
background-color: var(--uc-regular-colour) !important;
width: 26px !important;
height: 26px !important;
padding: 5px !important;
}
This block of code changes the size and color of all toolbar buttons including extension icons
Then I used this block of code to change its color when hover over them
*:hover > .toolbarbutton-icon{
background-color: green !important;
}
Which changes color of buttons when hover but the extension buttons stays the same.
How can I change it without having to define each extension name or property
Below are some screenshots to demonstrate the issue
As you can see except extension button all buttons change color
*:hover .toolbarbutton-icon {
background-color: green !important;
}
Tried this block as well as suggested below, but it hovers on all icons by default, I want each button to change color when hovered over them also when I hover over the extension button It still has the gray color
It will be a problem when you use >.
The > notation applies only to the immediate children of that element.
Try use:
*:hover .toolbarbutton-icon {
background-color: green !important;
}
Hope this helps.
.webextension-browser-action:hover > .toolbarbutton-badge-stack .toolbarbutton-icon { background-color: var(--uc-hover-colour) !important;}
Apparently after doing some research. Finally found a way to fix it.
The block of codes only works with extensions installed on firefox
I built a website with fixed header, fixed footer, and scrolling body atop WP 4.0 "Twenty Twelve" theme.
Trying to apply boxshadow below header's gray area and above footer's gray area, but cannot get either to work. Let's focus on header. Basic HTML/CSS works, as intended, in simplified form: http://jsfiddle.net/tvq5hw4r/
HTML:
<div id="menubar" class="shadow-below">
<nav id="site-navigation" class="main-navigation" role="navigation">
Home | About | Contact
</nav><!-- #site-navigation -->
</div><!-- #menubar -->
CSS:
#menubar {
width:100%;
height:1em;
background-color: lightgray;
padding: .5em;
color: white;
box-sizing: content-box;
}
.shadow-below {
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
/* For IE 8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
Yet, I've tested actual web page in multiple browsers (FF, Chrome, IE) on multiple OSes (Vista Home Premium SP2, Android 4.4), and don't see desired result on any combo.
Have tried going through selectors connected to the gray area, id by id and class by class, assigning desired style. At most, I get dropshadow below text (but within gray area, rather than below it); in all other cases, I get no dropshadow whatsoever.
I have also tried taking style code from a working dropshadow on the same page (on an image) and using that verbatim on the relevant selectors: still no change.
Tried using working CSS styling from another website that I also created: no change.
Tried code suggested by other websites (css-tricks and robertnyman- can't post the full links): no change.
Tried adding "!important" to each style declaration: no change.
Since it's not a browser issue or an issue with basic code, it appears to be a problem with how styles are cascading (or how elements are nested), or maybe even with overflow or some such property?
Try giving margin-bottom to .shadow-below
EG
.shadow-below { margin-bottom:10px; }
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'm having trouble removing a shadow being applied to an element.
HTML of element in question
<form class="block" method="post" action="poll.php?do=pollvote&pollid=80">
I've already changed the form class to something else.
CSS of questionable shadow
#sidebar_container .block {
border: 1px solid #BFBFBF;
box-shadow: 0 0 4px 0 #888888;
padding: 6px;
Now the issue with this is, the way Vbulletin has everything worked out is that the same style applies to a ton of elements.. So simply changing it ruins quite a bit of other customizations.
I dont understand why simply changing the "form class" is not working... Checking in firebug, it still holds the regular form class regardless of what changes I make in the template.
For reference: http://www.eldersreach.com/forum.php?styleid=90
It is the Inner box shadow on the "Poll" element in the right corner of the container
This CSS
#sidebar_container .block {
padding: 6px;
border: 1px solid #bfbfbf;
box-shadow: 0px 0 4px 0 #888;
}
is applied to the <div class="block smaller">...</div> container. Not the <form class="block"...</form> element.
If you want to remove the box-shadow property from the container you need to put box-shadow: none; in the #sidebar_container .block {...} style definition block. Off course this will remove the box-shadow from all the <div>s with the class .block.
My suggestion would be:
Add one more class, e.g. <div class="block smaller noshadow">...</div> to the element of choice
Define one more CSS property after #sidebar_container .block {...} in your stylesheet, e.g.
#sidebar_container .block {...}
#sidebar_container .noshadow {
box-shadow: none;
}
That should do the job.
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).