Responsive Template without stylesNow 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


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. textExtract the Theme Roller files to your computer. Rename the index.html file in the Theme Roller folder to styles.html.
  3. textCopy the styles.html file, js folder and the css folder to your Responsive Template folder.
  4. textOpen 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.

    <div id="header-content">
    add
    <div id="header-content" class="ui-widget-content">
    <div id="main-content">
    add
    <div id="main-content" class="ui-state-hover">
    <div id="banner">
    add
    <div id="banner" class="ui-corner-all">
    <div class="box">
    add
    <div class="box ui-corner-all ui-widget-content">
    <div id="footer-content">
    add
    <div id="footer-content" class="ui-widget-content">

    textTo learn more about CSS classes, check out our tutorial on CSS.

    When done you should see your code look like the snapshot to the right.


  6. Save the file and look at your Responsive Template. You should see the theme look like the snapshot to the right.
    text
    Tablet View
    text
    Mobile View
    text
    Desktop View

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: 1986
Heartbleed 0-day OpenSSL security bug
Updated 2014-04-14 04:43 pm EST
Hits: 5252

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!