How to set color of the Button with jQuery UI?

Question

I have two buttons in my HTML page. I have added jQuery UI themes into my page. Still, my buttons have different color. Top place Button inheriting the color from jQuery UI whereas down place is from the custom body CSS defined in the page.

Here is my HTML for both Buttons:

<button id="housekeeping" style="float:left; margin-left:30px">HouseKeeping</button>
<button id="Front Desk" style="margin-left:178px; margin-top:0px">Front Desk</button>

How to resolve this?

How to add style of jQuery button UI to Front Desk button?

.frontdesk{
margin-left:178px;
margin-top:0px;
}

div.ui-datepicker{
    font-size:10px;
}
.ui-datepicker {
    width: 16em;
}

 body { font-family:Lucida Sans, Lucida Sans Unicode, Arial, Sans-Serif; font-size:13px; margin:0px auto;}
    #tabs { margin:0; padding:0; list-style:none; overflow:hidden; }
    #tabs li { float:left; margin-left:4px; display:block; padding:10px; !important background-color:#8AE62E; margin-right:0px;}
    #tabs li a { color:#fff; !important text-decoration:none; }
    #tabs li.current { background-color:#C16CC1; !important height:18px}
    #tabs li.current a { color:#000; !important text-decoration:none; }
    #tabs li a.remove { color:#f00; !important margin-left:10px;}
    #content { background-color:#e1e1e1; !important}
    #content p { margin: 0; padding:20px 20px 100px 20px;}

    #main { width:1050px; height:500px; margin:0px auto; overflow:hidden;background-color:#F6F6F6; !important margin-top:0px;
         -moz-border-radius:10px;  -webkit-border-radius:10px; padding:0px;}
    #wrapper, #doclist { float:left; margin:0 0px 0 0;}
    #doclist { width:150px; border-right:solid 1px #dcdcdc;}
    #doclist ul { margin:0; list-style:none;}
    #doclist li { margin:10px 0; padding:0;}
    #documents { margin:0; padding:0;}

    #wrapper { width:1200px; margin-top:0px;}

    #header{ background-color:#F6F6F6; !important width:900px; margin:0px auto; margin-top:0px;
         -moz-border-radius:10px;  -webkit-border-radius:10px; padding:30px; position:relative;}
    #header h2 {font-size:16px; font-weight:normal; margin:0px; padding:0px;}


a:link {
color:#042953;
font-size:10px;
font-weight:700;

}   


/*demo styles*/
    body {font-size: 62.5%; font-family:"Verdana",sans-serif; }
    fieldset { border:0; margin: 0px 0 0 0;}    
    label,select,.ui-select-menu { float: left; margin-left:12px; margin-right: 10px; }
    select { width: 140px; }

    /*select with custom icons*/
    body a.customicons { height: 2.8em;}
    body .customicons li a, body a.customicons span.ui-selectmenu-status { line-height: 2em; padding-left: 30px !important; }
    body .video .ui-selectmenu-item-icon, body .podcast .ui-selectmenu-item-icon, body .rss .ui-selectmenu-item-icon { height: 24px; width: 24px; }
    body .video .ui-selectmenu-item-icon { background: url(images/24-video-square.png) 0 0 no-repeat; }
    body .podcast .ui-selectmenu-item-icon { background: url(images/24-podcast-square.png) 0 0 no-repeat; }
    body .rss .ui-selectmenu-item-icon { background: url(images/24-rss-square.png) 0 0 no-repeat; }

You cannot have space in id. Replace id="front desk" with id="front-desk" — Hrvoje Golcic
– Hrvoje Golcic, Commented May 11, 2014 at 10:19

Alessandro Minoccheri · Accepted Answer · 2014-05-11 10:18:43Z

1

you need to override jQuery UI style.

you can do something like this into css but this have to be loaded after jQuery UI css!

.frontdesk{
    margin-left:178px;
    margin-top:0px;
    color: red;
}

and into your html:

<button id="Front Desk" class="frontdesk">Front Desk</button>

or you can set with jQuery css to your button like this without using a class into your css:

$(document).ready(function(){

    $('.frontdesk).css('margin-left', '178px').css('margin-top', '0').css('color', 'red');

});

answered May 11, 2014 at 10:18

Alessandro Minoccheri

36.1k22 gold badges128 silver badges176 bronze badges

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

11 Comments

user3622611 Over a year ago

Color is not changing to that of jquery ui css

user3622611 Over a year ago

I need to add same color of jquery ui css .Because of some other css in the page it is not coming..How to do it?

user3622611 Over a year ago

How to specify it to jquery ui css button color specialy

Alessandro Minoccheri Over a year ago

you need to add the property color @user3622611

user3622611 Over a year ago

Issue is that Button is not showing with jquery ui css button color beacuse of some other css overlap from the page.how to specifically add that in style of button?

|

mrdeveloper · Accepted Answer · 2014-05-11 11:13:13Z

0

As you said:

Top place Button inheriting the color from jQuery UI whereas down place is from the custom body CSS defined in the page

It means you have a id named Front Desk in your custom body CSS which is overriding the JQuery UI CSS So, Quick solution would be , find that id in your custom CSS and remove that or give some other id name to your second button.

or

Add following line in your JS

  $("#front").button();

for button code

<button id="front" style="margin-left:178px; margin-top:0px">Front Desk</button>

edited May 11, 2014 at 11:13

answered May 11, 2014 at 10:56

mrdeveloper

5383 silver badges9 bronze badges

1 Comment

user3622611 Over a year ago

I changed the id ,still same problem

Collectives™ on Stack Overflow

How to set color of the Button with jQuery UI?

2 Answers 2

11 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related