CODEWITHSUNDEEP
cssyui
Jeff Storey
Jeff Storey

Reputation: 57192

Overriding single YUI dialog button style

I'm trying to override the style of a button used in a single YUI dialog. I've created a css file that has 

#mydialog.yui-button {
 // style customization
}

Where mydialog is the id of the dialog. This does not work. Can someone explain what I am doing wrong?

Upvotes: 0

Views: 807

Answers (2)

Parker Hutchinson
Parker Hutchinson

Reputation: 1721

you need to be more specific with the selector. if YUI is using 

#wrapper #main #mydialog.yui-button

you will need something like

#wrapper #main a#mydialog.yui-button

think of it like this

HTML elements = 1 Classes = 10 ID's = 100 Inline styles = 1000

#wrapper=100 + #main=100 + #mydialog=100 + .yui-button=10 = 310
#wrapper=100 + #main=100 + a=1 + #mydialog=100 + .yui-button=10 = 311

if that doesnt work you can always resort to adding importants. be warned that using importants instead of specificity is considered bad practice and should not be done if helped.

example:

#mydialog.yui-button{
    color: #000 !important;   
}

always after the last property value and before the semicolon.

lastly if that fails you probably dont have the correct class and/or id. also make sure your stylesheet is loading.

Upvotes: 1

g13n
g13n

Reputation: 3246

If the CSS class for the YUI button is not "yui-button" your rule is incorrect. Assuming you're using "button" element for the button and not an "input", the right way would be:

#mydialog button {
    // style customization
}

Hope that helps.

Upvotes: 0

Related Questions