Hi I am building a button on my page like that

<link href=".8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src=".4/jquery.min.js"></script>
<script src=".8/jquery-ui.min.js"></script>
<script>
        $( "#insert-image-button" )
            .button()
            .click(function() {
                $( "#AttachImage" ).dialog( "open" );
            });
</script>


<button id="insert-image-button">Create new user</button>

The button is diplayed using standard JQuery style. How can I provide my own style for that button. What is the best way?

The firebug says

class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" 

Hi I am building a button on my page like that

<link href="http://ajax.googleapis./ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis./ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis./ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
        $( "#insert-image-button" )
            .button()
            .click(function() {
                $( "#AttachImage" ).dialog( "open" );
            });
</script>


<button id="insert-image-button">Create new user</button>

The button is diplayed using standard JQuery style. How can I provide my own style for that button. What is the best way?

The firebug says

class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" 

• javascript
• jquery
• css
• jquery-ui

5 Answers 5

you also can overwrite styles through css :

css file :

#insert-image-button.ui-button {
   background:red ;
   border-radius: 0px;
}

You can apply different themes with jQuery UI: http://jqueryui./themeroller/.

As Edgar already pointed out you can roll your own theme with the ThemeRoller.

If you prefer to use one of the preexisting themes you can easily include it from the Google Libraries API:

<link rel="stylesheet" href="http://ajax.googleapis./ajax/libs/jqueryui/{version}/themes/{theme}/jquery-ui.css" type="text/css" />

Replace {version} and {theme} with the ones you want to use.

Example using latest version (1.8.13) and the Smoothness theme:

<link rel="stylesheet" href="http://ajax.googleapis./ajax/libs/jqueryui/1.8.13/themes/smoothness/jquery-ui.css" type="text/css" />

For more info on jQuery UI themes and theming, take a look at the documentation.

If you have very few instances of your custom styled content, you can always use inline styles like:

<div id = 'insert-image-button' style = 'background: red; border-radius: 0px;'>
</div>

Or simply set the css attributes in jQuery:

$('#insert-image-button').css('background','red').css('border-radius','0px'); 

// or use the alternative notation

$('#insert-image-button').css({ 'background': 'red','border-radius': '0px'});

// you can use classes too

$('.insert-image-buttons').css({ 'background': 'red','border-radius': '0px'});

And you can type this anywhere in your code.

Note that this doesn't override all UI styles (inline styles succeed more often), and it may not be altogether practical for finished projects. But it can still be a convenient way to test out different styles for your code.

In my case I did like this

In my css file.

.myDialog .ui-dialog-buttonpane .ui-dialog-buttonset .ButtonStyle {
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 1px;
    font: 10pt 'Myriad Pro Regular', sans-serif!important;
    font-weight: 800;
    color: #ffffff;
    background-color: #003668;
    border-left: 1px solid buttonhighlight;
    border-top: 1px solid buttonhighlight;
    border-right: 1px solid buttonshadow;
    border-bottom: 1px solid buttonshadow;
}

In my javascript file

function ShowDialog() {

    var options = {
        width: 600,
        height: 220,
        modal: true,
        autoOpen: false,
        resizable: false,
        closeOnEscape: false,
        my: "center",
        at: "center",
        of: window,
        dialogClass: "myDialog",
        buttons:[{
            text: "Close",
            "class": "ButtonStyle",
            click:
            function(){
                // I declared theDialog  globally
                if (theDialog != null) {
                    theDialog.dialog("close");
                }
            }
        }]  
    };

    theDialog = $("#divMultipleMatchPopup").dialog(options);
    var ret = theDialog.dialog("open");
}