Question

I’m using Simple Dialog 2:

I have the dialog box below:

$('<div>').simpledialog2({
    mode: 'button',
    themeHeader: 'b',
    headerText: 'Confirm',
    headerClose: true,
    buttonPrompt: message,
    buttons : {
        'OK': {
            click: function () { 
                $.mobile.changePage(url, {changeHash: false});
            }
        },
        'Cancel': {
            click: function () { 

            },
            icon: "delete",
            theme: "c"
        }
    }
})

Screenshot:

I want to text-align the message to left and have some space from left and right side of the button. How can I achieve it?

Thanks.

Answer 1

you can use Firebug or another developer tool to examine the CSS to manipulate…
see docu

Overriding themes

The themes are meant as a solid starting point, but are meant to be
customized. Since everything is controlled by CSS, it’s easy to use a
web inspector tool to identify the style properties you want to
modify. The set of of theme classes (global) and semantic structural
classes (widget-specific) added to elements provide a rich set of
possible selectors against which to target style overrides. We
recommend adding an external stylesheet to the head, placed after the
structure and theme stylesheet references, that contain all your style
overrides. This allows you to easily update to newer versions of the
library because overrides are kept separate from the library code.