Is there a way to override a class completely?
In woocommerce, I have this code in the stylesheet:
.woocommerce-review-link {
bottom: 0;
display: block;
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
}
I want it to become:
.woocommerce-review-link {
bottom: -4px;
display: block;
position: absolute;
right: 180px;
top: 0;
}
But when I enter that in the custom CSS box in my theme, it still uses the previous CSS for the parts I didn't add:
left: 0;
opacity: 0;
This is the HTML:
<div class="woocommerce-product-rating">
(<span class="count">2</span> customer reviews) </div>
To "remove" styling from a styled element, you need to set it back to the default/initial value. In this case, you need left: auto and opacity: 1.
What you're getting hung up on is the cascading part of Cascading Style Sheets. Styles to a selected element are aggregate, with later styles simply overriding previously-defined styles. Even your initial styling on a brand new site is simply overwriting past styles, since the browser starts with a certain amount of styling on the most common elements (this is why an <h1></h1> is large and bold even with nothing else on a page, for example).
you can use the element name before the class to override, like:
<element>.woocommerce-review-link {
bottom: -4px;
display: block;
position: absolute;
right: 180px;
top: 0;
}
if it is a link then:
a.woocommerce-review-link {
bottom: -4px;
display: block;
position: absolute;
right: 180px;
top: 0;
}
or you can also use the id with class, basically any selector that gets more priority over .woocommerce-review-link
The rule is when you select an element with more details, its rules will be applied in greater priorities. In your case, you can assign an id to element and customize class woocommerce-review-link.for example
<a id="customized" class="woocommerce-review-link" href="#">Sth</a>
#customized.woocommerce-review-link{
bottom: -4px;
display: block;
position: absolute;
right: 180px;
top: 0;
}
.woocommerce-review-link {
bottom: 0;
display: block;
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
}
Here because you select tag in more specefic details using #customized.woocommerce-review-link, its rules will have greater priorities than selecting just using .woocommerce-review-link.
!important is best for that you add !important after all elements like this
.woocommerce-review-link {
bottom: -4px !important;
display: block !important;
position: absolute !important;
right: 180px !important;
top: 0 !important;
}
So it automatically use !important element first
Add a new class with that one:
.woocommerce-review-link {
bottom: 0;
display: block;
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
}
.woocommerce-review-link.changed {
bottom: -4px;
right: 180px;
}
(<span class="count">2</span> customer reviews)
You should never enter same values in changed class, only the one that you are changing.
You should change the values of directives left, opacity to left: auto, opacity: 1 in the page's main container element. Using !important to force is different matter.
woocommerce-product-rating woocommerce-review-link,
a.woocommerce-review-link,
a.woocommerce-review-link:link,
a.woocommerce-review-link:visited,
a.woocommerce-review-link:hover,
a.woocommerce-review-link:active { bottom: -4px !important; display: block !important; position: absolute !important; right: 180px !important;
top: 0 !important; }
a.woocommerce-review-link:hover { color:red !important; }
<div class="woocommerce-product-rating">
(<span class="count">2</span> customer reviews) </div>
Related
I am having a question regarding the tooltip, the tooltip is hiding behind the table heading or it is displaying in one box it is not showing out.
Please, refer to the image where the tip is hiding behind the another div
(marketing shown in image is in the tip):
.tooltipCustom {
position: relative;
display: inline-block;
}
.tooltipCustom .tooltipCustomtext {
visibility: hidden;
width: 120px;
background-color: #efeee6;
color: #868474;
text-align: center;
border-radius: 6px;
padding: 5px 0;
border-width: 1px;
border-style: solid;
border-color: black;
/* Position the tooltip */
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.tooltipCustom:hover .tooltipCustomtext {
visibility: visible;
}
<div class='tooltipCustom'>
<sup style="vertical-align: top">
Something
</sup>
<span class='tooltipCustomtext'>
Underlying price: List price <br/>
Applied Discounts: Marketing
</span>
</div>
Fix it
/* Position the tooltip */
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -60px;
For example
/* Position the tooltip */
position: absolute;
top: 20px;
left: 50%;
margin-left: 0;
I think that the div above has a z-index defined, you need to put a higher z-index value on your tooltip to be on the front of previous div:
.mypreviousDiv {
z-index: 100;
}
.tooltipCustom .tooltipCustomtext {
z-index: 101; // ou higher, for tooltips we can put 9999
}
I'm trying to create a setup where I have a navbar, a collapsible menu within the navbar, and website content.
Sorry for the bad example but kind of like this: https://jsfiddle.net/2nqchLpf/
As you can see if you hover over the sub-menu links when the dropdown is not expanded, you can still click on them.
How can I get the links to display behind the content while having the navbar display over everything?
I have applied z-index like this:
.navbar {
position: fixed;
z-index: 1000;
}
.big-dropdown {
position: absolute;
z-index: -1;
}
#content {
position: relative;
z-index: 999;
}
It's tricky with z-index, considering stacking order and other z-index characteristics. Here's a complete run-down: Basics of the CSS z-index property
But for a simple and easy solution, since you're already using position: absolute, just move the sub-links off the screen.
So instead of this:
.big-dropdown {
opacity: 0;
height: 200px;
background-color: #fff;
position: absolute;
left: 0;
top: 0;
margin-top: 4em;
width: 100%;
}
.show {
opacity: 1!important;
}
Try something like this:
.big-dropdown {
opacity: 0;
height: 200px;
background-color: #fff;
position: absolute;
left: -9999px; /* adjustment */
top: 0;
margin-top: 4em;
width: 100%;
}
.show {
opacity: 1!important;
left: 0; /* new */
}
revised fiddle
This may not be exactly what you are looking for, but if you replace
.show {
opacity: 1!important;
}
with
.show {
display: block;
}
and used
display: none;
instead of
opacity: 0;
it would work
I have tried to create a minimal snippet that demonstrates the situation. The following HTML/CSS creates two boxes, one red and one cyan. Each one contains a clickable link. When I apply a CSS filter (as I have done to create the cyan one), the box is no longer clickable. My best guess is that this has to do with "stacking contexts," but I admit I don't know enough about them.
For the second part of the question, working around this, is there any way I can modify the CSS for the filtered class to avoid this issue? I am running into this in the context of a Chrome extension that applies CSS filters to images, so I would like a solution that does not require modifying the underlying structure of the site (the HTML) or significantly changing the way the site looks. I would consider it particularly useful if there were a solution that could be applied programmatically without introducing risk that other sites will now behave incorrectly.
.filtered {
filter: invert(100%);
}
/* I cannot modify any of the following CSS to solve this. */
div, a {
display: block;
height: 50px; width: 50px;
left: 0; top: 0;
position: absolute;
}
.outer:before {
display: block;
height: 50px; width: 50px;
left: 0px; top: 0;
position: absolute;
content: '';
z-index: 2;
}
.inner {
background: red;
}
.link {
z-index: 2;
}
<div style="position: relative">
<div class="outer">
<div class="inner">
</div>
</div>
</div>
<div style="position: relative">
<div class="outer">
<div class="inner filtered">
</div>
</div>
</div>
You should set the z-index of the .filtered element higher than the z-index of the :before pseudo class:
.filtered {
filter: invert();
z-index: 10;
}
.filtered {
filter: invert();
z-index: 10;
}
/* I cannot modify any of the following CSS to solve this. */
div, a {
display: block;
height: 50px; width: 50px;
left: 0; right; 0; top: 0; bottom: 0;
position: absolute;
}
.outer:before {
display: block;
height: 50px; width: 50px;
left: 0px; right: 0px; top: 0; bottom: 0;
position: absolute;
content: '';
z-index: 2;
}
.inner {
background: red;
}
.link {
z-index: 2;
}
<div class="outer">
<div class="inner filtered">
</div>
</div>
Im trying to make a popup box that causes the surrounding area to get greyed out. My issue is that the opacity of the shadow div seems to overide that of the popup. I tried changing one from absolute to fixed position and increasing the z index of the popup but neither worked.
Here is a screensot of the problem.
And below is the relevent code (ask if you need to see more)
.textPopup
{
width: 1400px;
height: 600px;
background-color: White;
position: fixed;
margin-left: auto;
margin-right: auto;
z-index: 15;
left: 0;
right: 0;
top: 50px;
bottom: 0;
opacity: 0.2;
}
#innerPopup
{
background-color: White;
width: 1350px;
height: 550px;
position: absolute;
margin-left: auto;
margin-right: auto;
z-index: 15;
left: 0;
right: 0;
top: 50px;
bottom: 0;
opacity: 1;
}
... snip
<div id="popupShadow">
</div>
<div class="textPopup">
<div id="innerPopup">
</div>
</div>
</body>
</html>
The issue you have is that #innerPopup is inside #textPopup. The opacity is then inherited by the child and cannot be overridden with it's own property.
If it is not possible to separate them, then consider using an rgba value for the background as opposed to the opacity property:
#textPopup {
background-color: rgba(255,255,255,0.2);
}
You can see it working on jsfiddle.
You'll be able to make it work as expected by making the following changes in your CSS:
#innerPopup
{
position: relative; /* change this to relative - will allow you to override the parent specified opacity */
opacity: 1;
/* other properties */
}
I try to make web site with minimal HTML markup for presentation.
Having the following HTML tag:
<div class="title">I'm a title!</div>
I need to add two elements before it using CSS, 1 for background and 1 for shadow.
Something like:
.title
{
display: block;
position: relative;
}
.title:before
{
display: block;
background-color: #00FFFF;
position: absolute;
width: 100%;
height: 100%;
margin: 0 0 0 0;
left: 0;
top: 0;
content: '';
z-index: -1;
opacity: 0.5;
}
.title:before
{
display :block;
background-color: #111111;
position: absolute;
width: 100%;
height: 100%;
margin: 5px -5px -5px 5px;
left: 0;
top: 0;
content: '';
z-index: -1;
opacity: 0.5;
}
doesn't work because the second .title:before overrides the first.
I cant add the background to the element because I need it to have opacity.
Is there any way to do this without adding additional markup? And if the answer is somehow not using two :before elements is there any way to specify more then one?
Not sure how you'd apply n elements, but for only two (and especially here) it seems to me you could just use :after for the second element...
I am not sure. Have you tried something like .title:before:before? Maybe this helps... Not able to test it right now.
why don't use backgroungd gradient image instead
you call then Something like
background : url("../images/image_path.png") 0 0 no-repeat;
I dont understand why you cant just use...
.title
{
display: block;
position: relative;
background-color: #00FFFF;
}
.title:before
{
display :block;
background-color: #111111;
position: absolute;
width: 100%;
height: 100%;
margin: 5px -5px -5px 5px;
left: 0;
top: 0;
content: '';
z-index: -1;
opacity: 0.5;
}
Two befores will be only in future. No one browser supports it now.
Here specification: http://www.w3.org/TR/2003/WD-css3-content-20030514/#nesting
And second before will be working like div::before::before or div::before(2)