CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapbackground-color
user2847749
user2847749

Reputation: 369

need to override a CSS background color

so I have the following 

.select, 
.input, 
.schedule, 
.editableFields 
{
cursor: pointer;
background-color: blue;
}

and this overrides the following: 

#past .layer.color {        
background-color: #E5D403 !important;   /*this needs to be the first priority color*/
 }

EDIT: If I just have this second CSS, it does work! But when I add the blue it colors all it needs to and OVERRIDES #past (I dont want it to do this!) But I need the second background-color to override the first background-color. I have tried giving it lots of IDs and lots of classes and also using !important, but nothing seems to work...please help! (I don't know if it matters, but I am also using twitter bootstrap, but I have all of my css rules in a custom.css)

I also tried adding an inline css to the html. There is a ton of html, so I'll just put the top part

<div class="accordionGroups">
            <div class="accordionHeading">
                <a class="accordion collapsed" data-toggle="collapse"
                    data-parent="#mainAccordion" data-target="#collapseThree"> <i
                    class="twistyIcon"></i> Layers
                </a>
            </div>
            <div id="collapseFirst" class="accordion-body collapse">
                <div class="accordion-inner scrollable">
                    <ul id="layers-dropdown-menu">
                       <li><label class="checkbox" id="past"> <span class="layer color legend"></span> Past
                       </label></li>

as background-color:#E5D403 but it gave me an error and Im not sure why (maybe I put it in the wrong place in the html?)

The following doesn't work either:

.checkbox span .layer.color.legend
{
 background-color: #E5D403 !important;
}

Upvotes: 2

Views: 23827

Answers (4)

user2847749
user2847749

Reputation: 369

I finally figured it out, guys. I couldn't fix this error from within the CSS. Since my page was being dynamically updated, I had to fix this in javascript, when I was creating each of the rows. 

if(notYellowRow){
    $row.find('.select').css('background-color', 'blue');
    $row.find('.input').css('background-color', 'blue');
    $row.find('.schedule').css('background-color', 'blue');
}

Upvotes: 0

Murali Murugesan
Murali Murugesan

Reputation: 22619

You missed space between class

try this

HTML

 <span class="legend"> TEXT HERE</span>

CSS

span.legend
{
 background-color: #E5D403 !important;
}

Upvotes: 0

Shauna
Shauna

Reputation: 9596

.layer.color refers to an element that is empty, and therefore does not take up any screen space.

What should the output look like? If you have an image of what you're expecting, we might be able to help you more.

Sans that, if you want "Past" to have the new background color, you need to put it inside the span's tags - <span class="layer color legend">Past</span>

Upvotes: 0

BT643
BT643

Reputation: 3845

This doesn't work?

#past {        
   background-color: #E5D403 !important;
}

Upvotes: 5

Related Questions