Styling jQuery Widgets

Styling jQuery Widgets

In mojoPortal content management system you can easily specify any of the standard jQueryUI themes on the StyleSheetCombiner control that you find in the layout.master file of each skin.

<portal:StyleSheetCombiner id="StyleSheetCombiner"  runat="server" JQueryUIThemeName="dot-luv" UseIconsForAdminLinks="false" />

Changing the jQuery UI theme will dramatically change the style of the widgets like jQuery Accordion or jQuery Tabs.

Allowed values for the JQueryUIThemeName property are listed under "Themes" here.

Experiment with the different themes to find the one that goes best with your mojoPortal skin.

Beyond changing the theme, you can override css properties in the main style.css file of your skin. The trick is to learn what css styles are applied to the elements by the jQuery javascript. You cannot see this by viewing the source of the rendered page, but you can see the css classes by using the Firefox Firebug plugin which allows you to inspect the html of the page after the javascript has applied its changes.

Using Your Own Theme

You can also build new themes using the jQuery UI ThemeRoller (http://jqueryui.com/themeroller/). After downloading a "ThemeRoller Theme", add the files to your skin directory and add references to the css files in the style.config (ex: <file>my-jquery-ui-theme.css</file>).

Changing a Widget's Style in a Single HTML Feature Instance

As a convenience feature for content editors, mojoPortal includes a system of Content Templates to easily set up div structures and CSS classes for certain jQuery widgets within an HTML instance. In some cases, you might want your jQuery widget to load with different parameters than the delivered default. For example, let's look at the jQuery Accordion. Suppose you want your accordion to appear on the page in a completely closed/collapsed configuration, rather than the default of appearing with the first item open.

The default Content Template for jQuery Accordion inserts the following HTML code:

<p>Paragraph before the accordion</p>
<div class="mojo-accordion">
   <h3><a href="#">Section 1</a></h3>
   <div>
      <p>Section 1 content.</p>
   </div>

   ...

</div>
<p>Paragraph after the accordion</p>

In order to make our accordion appear closed, we will want to use a different CSS class for the accordion, and add JavaScript to the bottom that specifies how our CSS class will be rendered. These changes will have to be made in the HTML view of the content editor.

First, we modify the enclosing div to replace the mojo-accordion class:

<div class="collapsed-accordion">

Now, we add the JavaScript at the bottom, which "wires up" the jQuery code to the new accordion structure:

<script type="text/javascript">// <![CDATA[
$('div.collapsed-accordion').accordion({active:false, collapsible:true, fx:{opacity:'toggle',duration:'fast'}});
// ]]></script>

For a fully collapsed accordion with heights that vary according to the content, you'll need to add autoHeight:false to the parameters, as so:

<script type="text/javascript">// <![CDATA[
$('div.collapsed-accordion').accordion({active:false, collapsible:true, autoHeight:false, fx:{opacity:'toggle',duration:'fast'}});
// ]]></script>

Voila! You now have an accordion that will appear closed when rendered, and any other accordions in your site will continue to use the default behavior. Note that if you have more than one collapsed accordion on the page, you only need the JavaScript in one HTML instance, as long as you're using the same accordion CSS class in all of them.

Changing a Widget's Style Throughout Your Skin

Beginning with mojoPortal 2.3.5.5, if you want to make the same sort of change skin-wide, you can do so by modifying ScriptLoader in the Layout.Master file for your skin, and adding JQueryAccordionConfig=[parameters]. To continue the example of a closed accordion widget, the final ScriptLoader line would look something like this:

<portal:ScriptLoader ID="ScriptLoader1" runat="server" IncludeSizzle="true" JQueryAccordionConfig="{active:false, collapsible:true, autoHeight:false, fx:{opacity:'toggle',duration:'fast'}}" />

If you want to apply custom parameters to a jQuery Tabs widget, the ScriptLoader change would be to add: JQueryTabConfig=[parameters].

NOTE: In mojoPortal versions 2.3.8.5 and prior there was a bug in the ScriptLoader process for jQuery Accordion. If you are using version 2.3.8.5 or earlier, you will need to specify JQueryTabConfig, rather than JQueryAccordionConfig, to affect the Accordion display.


Updated by Jamie Eubanks 2013-01-31