I know this could be a silly question. I have been trying to remove the shadow which comes after clicking any button in ThemeRoller for a while. There is no option given in the data theme roller to change the color or remove it.
Can anyone help me with that.
Thanks
Edit 1
Okay after dwelling into the css this is what worked for me
/* Focus buttons and text inputs with div wrap */
.ui-page-theme-c .ui-focus,
html .ui-bar-c .ui-focus,
html .ui-body-c .ui-focus,
html body .ui-group-theme-c .ui-focus,
html head + body .ui-btn-c.ui-focus,
html head + body .ui-body-c.ui-focus {
-webkit-box-shadow: 0 0 0px #3388cc /*{c-active-background-color}*/;
-moz-box-shadow: 0 0 0px #3388cc /*{c-active-background-color}*/;
box-shadow: 0 0 0px #3388cc /*{c-active-background-color}*/;
}
made the shadow to 0px instead of default 12px.
Note: you have to do it in the respective theme like mine was data-theme-c
Thanks to the people who shared there answers
Well you could try the following styles:
button:active{
box-shadow: none !important;
}
If the issue isnt related to box-shadow, try outline.
Okay after dwelling into the css this is what worked for me
/* Focus buttons and text inputs with div wrap */
.ui-page-theme-c .ui-focus,
html .ui-bar-c .ui-focus,
html .ui-body-c .ui-focus,
html body .ui-group-theme-c .ui-focus,
html head + body .ui-btn-c.ui-focus,
html head + body .ui-body-c.ui-focus {
-webkit-box-shadow: 0 0 0px #3388cc /*{c-active-background-color}*/;
-moz-box-shadow: 0 0 0px #3388cc /*{c-active-background-color}*/;
box-shadow: 0 0 0px #3388cc /*{c-active-background-color}*/;
}
made the shadow to 0px instead of default 12px.
Note: you have to do it in the respective theme like mine was data-theme-c
Thanks to the people who shared there answers
Related
We are using different static images as per year to display.
I want to make it dynamic by adding image without number and adding number. Its looks good except. I tried text-shadow css property but does not give same result like image.
Is it possible to add shadow by css which goes to end of left corner?
You probably have to use multiples text-shadow to achieve this style.
text-shadow: 1px 1px 0 #087194, 2px 2px 0 #087194, 3px 3px 0 #087194, 4px 4px 0 #087194, 5px 5px 0 #087194;
https://jsfiddle.net/h462ruey/33/
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 am working with smartgwt and css. I have different blocks. when a block is focused I change the style name of the block and blur the other blocks.
Everything works correctly except that sometimes when I change block focus two blocks become active (highlighted). It's weird because when I verify the css class through the inspector the inactive block has not the "active" class.
It means that the css style has not rendered correctly. Is that a common problem? Is there a possibility to refresh the rendering of an html element after updating its class name?
.windowFocused {
background-color: #fafafa;
border-color: #50A9CC !important;
-moz-box-shadow: inset 2px 0 0 0 #50A9CC;
-webkit-box-shadow: inset 2px 0 0 0 #50A9CC;
box-shadow: inset 2px 0 0 0 #50A9CC;
}
I add this class when focused and remove it on blur. When I check the page through the inspector it is correctly removed but it keeps the style.
Is there a way to influence only separate box-shadow properties?
For instance I have these classes to set button size and button color
.btn {
background: gray;
font-size: 15px;
box-shadow: 0 2px 0 0 dark-gray;
}
.btn--primary {
background: blue;
box-shadow: 0 2px 0 0 dark-blue;
}
.btn--secondary {
background: red;
box-shadow: 0 2px 0 0 dark-red;
}
.btn--large {
font-size: 20px;
}
But now, I also want a larger box shadow on .btn--large
Problem is, I have multiple colored buttons, so I would need some sort of "box-shadow-y-size property"
How do you work around this problem? The only way I can think of right now is to do something like this...
.btn--large.btn--primary {
box-shadow: 0 4px 0 0 dark-blue;
}
.btn--large.btn--secondary {
box-shadow: 0 4px 0 0 dark-red;
}
There is sadly only one way to define a box-shadow, but in your case there might be a work-around. If you don't specify a colour for your box-shadow it will default to the colour of the color attribute. Perhaps this is something you can make use of.
For example, if you want to be able to have a differently coloured box-shadow while still retaining the original text color, one way you can achieve this by applying the box-shadow to a :before pseudo element instead of the element itself.
JSFiddle with pseudo element solution
If you go to this website you see that when you scroll down the following style is added through javascript for the top navigation div (#yucsHead):
-webkit-box-shadow: 0 0 9px 0 rgba(73,15,118,1)!important;
-moz-box-shadow: 0 0 9px 0 rgba(73,15,118,1)!important;
box-shadow: 0 0 9px 0 rgba(73,15,118,1)!important;
border-bottom: 1px solid #490f76!important;
I'm a bit new to CSS3 and noticed that CSS now has many features that you first could only do in Javascript. I was therefore wondering whether this is possible through CSS3 as well. I prefer to do things through css where possible.
For finding how much the document has been scrolled we use scrollTop() in jquery, and based on that styles are applied.Your example site does that...I dont think there is a pure CSS 3 solution for this..