title: custom styles in jquery basic dialog widget
body: <p>Kinda' a newbie here...</p>
  
  <p>I am trying to change the basic format of the box in the jQuery dialog widget.</p>
  
  <p>I presume that would involve making changes or overrides to the theme.</p>
  
  <p>That lead me to the themeroller.</p>
  
  <p>I am not trying to "re-invent the wheel," just tweak the characteristics (font size, placement of the dialog box, selecting an icon, etc.)</p>
  
  <p>Given that, do I need to build a custom theme, or can I more easily make small changes? And if so, how?</p>
  
  <p>I cannot figure out how to use the themeroller to meet my needs.</p>
  
  <p>Is there a good source or book that would help a kinda' newbie like me?</p>
  
  <p>Yes, I have been here:</p>
  
  <pre><code>....jquery-ui/getting-started/
  
  ....jquery-ui/theming/
  </code></pre>
  
  <p>But that takes me more into the weeds that I want to go at this point. (Or, is that a necessity at this point?)</p>
  
  <p>(I have found several references here, but none that I know how to apply to my situation.)</p>
  
  <p>My configuration:</p>
  
  <p>I am using the "default functionality" found here:</p>
  
  <pre><code>....jqueryui.com/dialog/
  </code></pre>
  
  <p>with jquery-1.10.1</p>
  
  <p>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.)</p>
  
  <p>this is the code I am using for the jQuery widget:</p>
  
  <pre><code>    &lt;!-- basic alert:  --&gt;
      &lt;script type="text/javascript" src="fbox2/lib/jquery-1.10.1.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"&gt;
      &lt;!-- basic alert  --&gt;
  </code></pre>
  
  <p>Currently, my code to call the widget looks like this:</p>
  
  <p>JS:</p>
  
  <pre><code>    function dopopup()  {
          $("&lt;div title='Basic dialog onclick'&gt;Test message &lt;b&gt;bolded&lt;/b&gt;&lt;/div&gt;").dialog();
      return
      }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>    &lt;a href="#" onclick="dopopup()"&gt;here&lt;/a&gt;&lt;p&gt;
  </code></pre>
  
  <p>Can you please lead me in the right direction on this issue?</p>
  
  <p>Thank you.</p>