Welcome to the Learning Center

The Guide | Knowledge Base | FAQ

Browse it all or refine your selection using the filters below on the left.

Themeing and Styling XMod Pro with jQuery UI

See some examples of code to look for and notes on how to pick out and test jQuery UI Theme elements for use in XMod Pro Forms and Templates.

By: Ryan Moore On: 12/10/2012

Link to this Article
https://dnndev.com/Learn/Guide/Article/Themeing-and-styling-XMod-Pro-with-jQuery-UI

"How do I use jQuery UI to style my form?"

I've helped answer this question a few times and thought it would make a helpful blog topic for others. I'll provide some examples of code to look for and notes on how I like to pick out and test jQuery UI Theme elements for use. First, let's start by talking about what jQuery Themes are all about...

What are jQuery UI Themes?

http://jqueryui.com/themeroller/

In their own words, "the jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice."

The jQuery UI Themes are a collection of CSS classes that are made to work together and style or theme all of the most common elements that you will have in a website. Styles for colors, borders, hover effects and more are classified for div containers, tabs, scrollbars, form buttons, etc.

The gallery of jQuery UI Themes is a collection of different theme styles that give a good range of color ranges and look & feel styles. There's business-y, artsy, super dark... plenty of styles and moods to choose from. Most all of the UI Themes have been included within XMod Pro and are the themes that you can choose when you're using the Form Builder, so knowing what all of these themes look like is super helpful when using the XMod Pro Form Builder!

 

Reviewing Themes and Customizing Your Own

 

You can check out the theme Gallery list and click on each theme to see the example elements on the right side of the page change to the theme style. It's a quick and easy way to review and test each of the themes.

The other wonderful thing about the themeroller page is the "Roll Your Own" function. My favorite use for this is to click and load a theme that closely matches the general set of styles that I want to have for a project. Then, I switch over to the Roll YourOwn tab and then through the different sections of options, change the colors, font sizes, borders, padding, highlights, etc until I achieve the specific style of colors and treatments that are perfect for me.

At that point, you can click the DOWNLOAD button to download a new folder of the customized theme that's been created. You can then rename that folder and upload it to your site and call it in your skin or call it in your specific XMod Pro Forms and Templates individually. If you want to place your folder in the same location where the rest of the XMP ones are, it goes in the DesktopModules/XModPro folder. Here's an example location for the Cupertino style that is in XMP by default:

/DesktopModules/XModPro/styles/ui-cupertino/jquery-ui-1.7.2.custom.css

 

Working with Theme CSS classes

I'll normally start by using the Element Inspector in Chrome to look at the classes that are being set for the things I see on the screen. Just right click on an item, choose "inspect element" and then you can see in the code window below, the item that you are mousing over currently. The classes of the jQuery Theme UI can be mixed and matched together, and sometimes you can find some interesting things just by playing around with them and trying ones together or stripping them down to their basiscs.

I'll load a standard Theme in the top of my code, such as Cupertino, Redmond or Start or ExciteBike for some vibrant colors to play with! Just load the stylesheet

Then, for testing and review, I'll pick some of the classes that I've seen in the inspector window and try them out. I might combine them together in a div or element so I can see it on screen... something like this:

<div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all"> Title For Section Goes Here
</div>

Which looks like this:

Title For Section Goes Here

A few of the classes that I use commonly are ones like the ones below.

  • ui-state-default | ui-state-error
  • ui-corner-all | ui-corner-bottom
  • ui-icon ui-icon-radio-on
  • ui-widget ui-widget-content
  • ui-accordion-content | ui-accordion-content-active
  • ui-helper-reset

Essentially, you just start looking at the css classes that are setup and used in a theme, or see how the same class looks different across different themes with the ThemeRoller location, and then you try out those classes in your form elements.

Remember too, it's not just for forms... I use them heavily in XMP Templates whether we're using tabs or accordion sections or not... they're a great guide for templating for divs, dividers, icons... all kinds of elements in the page!

Further reading, tutorials & XMP examples

I would recommend a few tutorials on working with the jQuery UI so that you'll know better how to theme and style using the classes that jQuery uses by default 

A few good resources:

http://jqueryui.com/docs/Getting_Started
http://jqueryui.com/docs/Theming/API
http://jqueryui.com/themeroller/
http://www.tuttoaster.com/enhancing-forms-using-jquery-ui/

For some more exact examples showing the use of jQuery UI themes in XMod Pro forms and templates, I recommend downloading from the DNNDev.com location or from Store.DotNetNuke.com any of our XMod Pro Module Kits where you can see jQuery UI themes being used. They're used to style everything from the form elements to the submit button, etc. and you could use those as starters to show you examples of what classes can be used

Try any of these for example:

http://dnndev.com/Products/Free-XMod-Pro-Kits/File-Sharing-Form.aspx

http://dnndev.com//Products/Free-XMod-Pro-Kits/FeedbackForm.aspx

or this one to see that jQuery UI can be used with everything, not just forms, but with templates and any display element too

http://dnndev.com/Products/Free-XMod-Pro-Kits/Polls.aspx

Wrap up

So, excited to go build XMod Pro Forms and Templates using jQuery Themes yet?

The real power, I find, is in working the jQuery Theme classes into your daily development habits... if you work with the classes and make them commonplace in all of your code whenever you build something, then it's easy for you to reuse that code again in another project and instantly make it look different by just changing the CSS Theme file that is called at the top of your Form or Template.

If you haven't already, go and take a look at the ThemeRoller page and start toying with the themes and classes. I'd love to hear what you're building and how your're styling it with jQuery Themes... too, I'd like to hear your questions. Have something you'd like to style? Encountered a conflict with DNN Themes and jQuery Themes? I'd love to hear about it in comments below.

MooreCreative XMOD Development Blog

In the MooreCreative XMOD PRO Development Blog, I'll try to share some of the thoughts and ideas that we've come up with on a day-to-day basis as my development company uses DNN + XMOD PRO to tackle client projects. I'll include items such as tips/tricks, did-you-know articles, troubleshooting/testing examples as well as posting samples solutions and explanations behind our experience working with XMOD and jQuery functions, PageBlaster, ZLDNN Article, and other modules/elements.

If you would like to see us tackle a topic, especially anything out of the forums that could use further examples, please, don't hesitate to email me, and I'll look into preparing it for a blog post.