--- title: "Styling a Responsive Template with jQuery Theme Roller" description: "Now that you have your responsive template, you have the Theme from Theme Roller, you can style your theme and make it look professional. This article is written so you can follow through the HTML of..." url: https://www.inmotionhosting.com/support/edu/wordpress/theme-roller-jquery-style-responsive-template/ date: 2013-06-05 modified: 2013-06-05 author: "InMotion Hosting Contributor" categories: ["Website Design", "WordPress Tutorials"] type: post lang: en --- # Styling a Responsive Template with jQuery Theme Roller [![Final view of Responsive Template](https://www.inmotionhosting.com/support/wp-content/uploads/2013/06/website_responsive-templates_create-responsive-template-1024x768.png)](/support/wp-content/uploads/2013/06/website_responsive-templates_create-responsive-template.png) Now that you have your responsive template, you have the Theme from Theme Roller, you can style your theme and make it look professional. This article is written so you can follow through the HTML of the Responsive Template and create the look and feel your want for your site. Please download the files for the Responsive Template Below. [Theme Roller Responsive Template Demo](/support/wp-content/uploads/2013/06/edu_website-design_206_theme-roller-responsive-template_responsive-template-styled.rar) **NOTE!** This tutorial is assuming you followed the previous tutorials for Creating Responsive Templates. The Template Code in this tutorial is an altered version of the previous tutorials. ## Adding the CSS from Theme Roller to your Responsive Template After you download the files for the template, you can follow the steps below to see what code changes were made in the HTML code. 1. Download a theme from Theme Roller. 2. [![text](https://www.inmotionhosting.com/support/wp-content/uploads/2013/06/edu_website-design_206_theme-roller-responsive-template_theme-roller-1-rename-index.png)](/support/wp-content/uploads/2013/06/edu_website-design_206_theme-roller-responsive-template_theme-roller-1-rename-index.png) Extract the Theme Roller files to your computer. Rename the *index.html* file in the Theme Roller folder to *styles.html*. 3. [![text](https://www.inmotionhosting.com/support/wp-content/uploads/2013/06/edu_website-design_206_theme-roller-responsive-template_theme-roller-2-copy-files.png)](/support/wp-content/uploads/2013/06/edu_website-design_206_theme-roller-responsive-template_theme-roller-2-copy-files.png) Copy the *styles.html* file, *js* folder and the *css* folder to your Responsive Template folder. 4. [![text](https://www.inmotionhosting.com/support/wp-content/uploads/2013/06/edu_website-design_206_theme-roller-responsive-template_theme-roller-3-copy-head-code.png)](/support/wp-content/uploads/2013/06/edu_website-design_206_theme-roller-responsive-template_theme-roller-3-copy-head-code.png) Open the *styles.html* file in your Text editor or HTML editor. Copy the links to the *css* files, the *JavaScript* and *Styles* in the head section and paste them into your Responsive template index.html file head section. 5. Theme Roller creates classes for your site with the styles set up in the CSS stylesheet. You simply need to apply the styles to your website. Edit the HTML code for your index.html. We will add the following classes to the HTML. **Premade jQuery Theme Roller Classes** ui-widget-content ui-corner-all ui-state-hover ui-state-default ui-state-active ui-icon Add the following classes to the code.
add
add