After you have the skeleton template for your responsive template created, you can customize the appearance. While your site may function well on different devices, you will want the site to look interesting as well. To create themes for your Responsive HTML template, you can use the jQuery Theme Roller to design your site.

What is the jQuery Theme Roller?

jQuery Theme RollerTheme Roller is a Free Open Source JavaScript theme generator that allows you to create Website themes without knowing JavaScript. Theme Roller provides CSS classes that you can reuse through out your website to add functionality like buttons, tabs, accordion drop boxes, dialog pop up boxes and more. Theme roller lets you experiment with different colors and styles "On The Fly" so you can customize your website look and feel. To use the Theme Roller theme maker by jQuery, you will need to visit jqueryui.com/themeroller.

The Theme Roller Interface

jQuery Theme Roller interfaceThe Theme Roller Interface is a simple menu that contains drop boxes with editing capabilities. The snapshot to the right shows you what it looks like. You can edit the following styles for the site.

Theme Roller Settings
Font Settings Adjusts the Font Family, Weight, and Size.
Corner Radius Sets the Corner radius for rounded corners on boxes.
Header/Toolbar The background color and texture is set here. You can also change the border, text, and icon color.
Content This is the styles for the content boxes. This styles the background color and texture, border, text, and icon color.
Clickable: default status The background color and texture, border, text, and icon color for buttons in their default state.
Clickable: hover state The background color and texture, border, text, and icon color for buttons in their hover state.
Clickable: active state The background color and texture, border, text, and icon color for buttons in their active (when clicked) state.
Highlight This is a highlight box. Similar to an error box but not for errors.
Error This is the styles for the error pop up box.
Modal Screen for Overlays This is the style of the transparent overlay that displays when pop up boxes are clicked.
Drop Shadows Adds drop shadows to the boxes. (not supported in all browsers)

How the theme Roller Works

Theme Roller has many functions available to edit the styles of your theme. When you edit the styles and download the theme, you will use the JavaScript and CSS files to apply the styles to your website. Inside the files that you download are CSS classes that you use in your code. This will be discussed further in the next article.

  1. jQuery Theme Roller Color the styleExpand the Header/Toolbar and select the Background & texture color number and you will see the color picker open up.
  2. Change colors jQuery Theme RollerBy Default you will see the background color a gray like the image to the right.
  3. Changed version on the fly jQuery Theme RollerWhen you change the color and you will see the site change as you edit it. This way you can edit the theme on the fly and see the changes when you make them.
  4. Click Download jQuery Theme RollerDownload the theme.

Theme Roller Theme Gallery

If you don't want to make your own theme, you can use the Theme Rollers Gallery to download a premade theme.

  1. jQuery Theme Roller GalleryClick the Gallery tab and you will see a list of premade themes free for download.
  2. Pre Made jQuery Theme RollerClick the Download button under the theme you want to download to go to the download page.

Downloading the theme

Once you get the styles set for your theme or you have the premade theme you ant to use, you can download the files to your local computer.

  1. Version of latest jQuery Theme Roller 1.10.3Select the 1.10.3 version to get the latest version of jQuery with the Theme.
  2. Click Download jQuery Theme RollerYou can leave all the settings that are selected by default. Click the download link.
  3. Theme styles available jQuery Theme RollerWhen the file is downloaded. Extract it and view the contents of the extracted folder. You will see an index.html file. Click the index.html file to look at the styles you downloaded. The snapshot to the right shows you what the styles look like on the Swanky Purse theme.

Now that your have the theme files, we can apply the styles to your Responsive template.

Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve our Support Center:
Email Address
Optional, but our team may contact you for more information.
Like this Article?

Post a Comment

Name:
Email Address:
Comment:
Are you a bot?
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

Write New!
Do you want to publish a tutorial to our support center?

News / Announcements

SSL Certficate Warnings
Updated 2014-04-14 11:34 am EST
Hits: 1930
Heartbleed 0-day OpenSSL security bug
Updated 2014-04-14 04:43 pm EST
Hits: 5157

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!