override a css element by inherance css

Question

I have a css file that have following css element:

.ms-webpart-chrome {
    background-color: white;
}

I want to make it transparent instead of white and same time I want to have this css element like it is beacuse its a global css and some pages are using it.

So I was thinking that I could use inherance it.

This is how it looks in html and this div classes are generated automaticly which means I cant change or do anything.

<div class="ms-searchCenter-main">
            <div class="ms-webpart-zone ms-fullWidth">
        <div id="MSOZoneCell_WebPartWPQ1" class="s4-wpcell-plain ms-webpartzone-cell ms-webpart-cell-vertical ms-fullWidth ">
            <div class="ms-webpart-chrome ms-webpart-chrome-vertical ms-webpart-chrome-fullWidth ">

So basicly I need to have this one like it is beacuse i dont want to change it or remove it:

.ms-webpart-chrome {
    background-color: white;
}

And I need to create a new one and use !important with the inherance.

Any kind of help is appreciated

Note: I tried following:

.ms-searchCenter-main .ms-webpart-chrome
{
background-color: transparent !important;
}

but it didnt work

.ms-searchCenter-main .ms-webpart-chrom (letter 'e' missing ?? ) — Milche Patern
– Milche Patern, Commented Feb 25, 2013 at 17:11

Dr.Info · Accepted Answer · 2013-06-20 06:15:34Z

2

You can certainly specify a background color to be "transparent," as this is the default value in the CSS specification (see reference page at w3schools.com).

If your goal is to make the background color transparent across all elements with class "ms-webpart-chrome" then try adding more selectors to increase the weight of your new rule:

body div.ms-webpart-chrome {
    background-color: transparent !important;
}

Setting "background: none;" is also an option. You could try adding both.

It would be better if your new rule followed the other rule (not directly, just after it in the order). Also, check to see if any of the sub elements are picking up a background.

While IE has developer tools, I strongly recommend Firefox + Firebug + DOM Inspector + Web Developer Toolbar as a standard testing suite. You can easily traverse the DOM to see if any sub elements have backgrounds applied, as well as test different CSS rules live on the page.

answered Jun 20, 2013 at 6:15

Dr.Info

214 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BoltClock Over a year ago

W3Schools is not "the CSS specification". You want w3.org/TR/CSS21/colors.html#propdef-background-color

Dr.Info Over a year ago

I never said W3Schools was "the CSS specification"—I merely stated what it is in the specification and gave the W3Schools page as a reference, which happens to be easier for some people to read than the spec.

Andy · Accepted Answer · 2013-02-25 17:09:57Z

0

You can't specify a background colour to be transparent, as transparent isn't a colour. However, you can achieve it with background: none !important;. Element's don't have background colours by default, so just restore it to the default (none) and it will be transparent.

Look at this demo here. I've set the background to red at the top, but then over-written it with background: none; lower down. This makes it transparent. The red border shows where the element is

answered Feb 25, 2013 at 17:09

Andy

14.6k3 gold badges55 silver badges76 bronze badges

2 Comments

Andy Over a year ago

@Obsivus put your code onto www.jsfiddle.net then click save once you have reproduced your issue and we can help further

Obsivus Over a year ago

I used 'background-color: rgba(255, 0, 0, 0);' and now it worked :) but your solution is right aswell!

Collectives™ on Stack Overflow

override a css element by inherance css

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related