CODEWITHSUNDEEP
htmlcssjquery-ui
Luis
Luis

Reputation: 5914

How can i overwrite this style of jquery ui

I'm trying to overwrite the style of some element of jquery ui, this is my html

    <div class="menu ui-accordion-header ui-state-default ui-corner-all">
        <label class="formatText" id="lblIndicators">
            Cliente</label>
        <span class="ui-icon ui-icon-triangle-1-e menuIcon" style="float: right"></span>
        <div class="subMenu ui-accordion-header ui-helper-reset ui-state-default ui-corner-all">
            <ul class="options">
                <li>
                    <label class="formatText">
                        Ver Cliente</label>
                    <span class="ui-icon ui-icon-triangle-1-s" style="float: right"></span>
                    <div class="subMenuRight ui-accordion-header ui-helper-reset ui-state-default ui-corner-all">
                        <ul class="options">
                            <li>Por Nombre</li>
                            <li>Por Año de ingreso</li>
                        </ul>
                    </div>
                </li>
                <li>algo</li>
                <li>cualquier vaina</li>
            </ul>
        </div>
    </div>

note that the div has the follow classes menu ui-accordion-header ui-state-default ui-corner-all now i'm trying to overwrite the classes like this

.menu .ui-state-default
{
    width:120px;
    color: #FFFFFF;
    background: #003E6F;
    float:left;
}

.menu .ui-helper-reset
{
    width:120px;
    color: #FFFFFF;
    background: #003E6F;
    float:left;
}

.menu .ui-accordion-header
{
    width:120px;
    color: #FFFFFF;
    background: #003E6F;
    float:left;
}

.menu .ui-state-hover{
     border-width: 0;
    font-size: 12px;
    color: #003E6F;

}

.subMenu
{
    display:none;
    width:129px;
}

.subMenuRight
{
    display:none;
    width:120px;
    position:absolute;
    left:100%;
    top:0px;
}

Now my problem it's that first element div, doesn't get the override of the class. All the children divs works well. What i'm doing wrong??

This is my live demo

Upvotes: 0

Views: 3007

Answers (3)

yoozer8
yoozer8

Reputation: 7489

Your javascript doesn't do anything to change the div class. The main div has class menu, and the functions you bind to its events find the spans inside it and change their class.

Upvotes: 0

Leah
Leah

Reputation: 2607

For your first CSS declaration, try using this instead:

.menu.ui-state-default, .menu .ui-state-default
{
    width:120px;
    color: #FFFFFF;
    background: #003E6F;
    float:left;
}

In your code, .menu .ui-state-default doesn't apply to the outermost div (<div class="menu ui-accordion-header ui-state-default ui-corner-all">) because that code is targeting elements with the class of ui-state-default within elements with a class of menu.

The first div has both classes so you would also need to use this .menu.ui-state-default to apply the styles to that div.

Upvotes: 1

ayyp
ayyp

Reputation: 6618

In theory you should just be able to put it into a stylesheet and have it work as long as you're linking your custom styles after wherever the jQuery UI styles are.

Upvotes: 0

Related Questions