Geek asks and answers

How to override default style for jQuery button

Hi, I am creating a button on my page, for example

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/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>

Button diplayed using standard jQuery style. How can I provide my style for this button. What is the best way?

Firebug says:

class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
+3
source share
5 answers

You can apply various themes with the jQuery user interface: http://jqueryui.com/themeroller/ .

+4
source

you can also overwrite styles via css:

Css file:

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

, ThemeRoller.

, API- Google:

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

{version} {theme} , .

(1.8.13) :

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

jQuery . .

+2

, , :

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

css 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'});

.

, ( ), . .

0
source

In my case, I liked it.

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");
}

Dialog Style

0
source

More articles:


All Articles