custom styles in jquery basic dialog widget

Question

Kinda' a newbie here...

I am trying to change the basic format of the box in the jQuery dialog widget.

I presume that would involve making changes or overrides to the theme.

That lead me to the themeroller.

I am not trying to "re-invent the wheel," just tweak the characteristics (font size, placement of the dialog box, selecting an icon, etc.)

Given that, do I need to build a custom theme, or can I more easily make small changes? And if so, how?

I cannot figure out how to use the themeroller to meet my needs.

Is there a good source or book that would help a kinda' newbie like me?

Yes, I have been here:

....jquery-ui/getting-started/

....jquery-ui/theming/

But that takes me more into the weeds that I want to go at this point. (Or, is that a necessity at this point?)

(I have found several references here, but none that I know how to apply to my situation.)

My configuration:

I am using the "default functionality" found here:

....jqueryui.com/dialog/

with jquery-1.10.1

I had to use that version to make it compatible with the version of fancybox that I am using (2.1.5): (The compatibility issue is a real pain for me.)

this is the code I am using for the jQuery widget:

    <!-- basic alert:  -->
    <script type="text/javascript" src="fbox2/lib/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <!-- basic alert  -->

Currently, my code to call the widget looks like this:

JS:

    function dopopup()  {
        $("<div title='Basic dialog onclick'>Test message <b>bolded</b></div>").dialog();
    return
    }

html:

    <a href="#" onclick="dopopup()">here</a><p>

Can you please lead me in the right direction on this issue?

Thank you.

Answer 1

What will probably help you here is either Firebug http://getfirebug.com/ which runs on Mozilla Firefox or use the Chrome Development Tools which come bundled natively in any Chrome variant. Then you can "Inspect" the elements you wish to modify via CSS. By Inspect I mean you browse through the constituent elements and observe which CSS styles apply to them.

This is made incredibly easy with the tools mentioned above, allowing you to modify the properties on-the-fly to test what looks good and works.

When/if satisfied with a particular setting of a property, you would "override" the pertinent rule by declaring an updated rule/property to that found in the default jQuery-ui theme by including your own CSS file or inline <style> declarations later on in the page.

As an example, here is a vanilla version of the dialog and theme: Demo: http://jsfiddle.net/robschmuecker/3uKnt/

and after some "inspecting" I have modified only a few choice rules to give it a totall different look.

CSS:

.ui-widget {
    font-family: courier;
}
.ui-dialog .ui-dialog-title {
    font-size: 8px;
}
.ui-widget-content {
    background-color: #616DFF;
}
.ui-widget-header .ui-icon {
    background-image: url("http://www.famfamfam.com/lab/icons/silk/icons/bell.png");
    background-position:0;
}

Demo: http://jsfiddle.net/robschmuecker/3uKnt/1/