{"id":2759,"date":"2013-06-05T17:37:33","date_gmt":"2013-06-05T17:37:33","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2013\/06\/05\/theme-roller-jquery-style-responsive-template\/"},"modified":"2013-06-05T17:37:33","modified_gmt":"2013-06-05T17:37:33","slug":"theme-roller-jquery-style-responsive-template","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/theme-roller-jquery-style-responsive-template\/","title":{"rendered":"Styling a Responsive Template with jQuery Theme Roller"},"content":{"rendered":"<p><a href=\"\/support\/wp-content\/uploads\/2013\/06\/website_responsive-templates_create-responsive-template.png\" rel=\"lightbox-0\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/website_responsive-templates_create-responsive-template-1024x768.png\" class=\"optimized-lcp-image\" alt=\"Final view of Responsive Template\" loading=\"eager\" fetchpriority=\"high\" sizes=\"(max-width: 768px) 100vw, 768px\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/website_responsive-templates_create-responsive-template.png 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/website_responsive-templates_create-responsive-template-300x225.png 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/website_responsive-templates_create-responsive-template-768x576.png 768w\"><\/a><\/p>\n<div style=\"clear:both;\"><\/div>\n<p>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.<\/p>\n<p><a href=\"\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller-responsive-template_responsive-template-styled.rar\">Theme Roller Responsive Template Demo<\/a><\/p>\n<p> <br style=\"clear: both;\"> <\/p>\n<p class=\"alert\"><strong>NOTE!<\/strong> 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.<\/p>\n<h2>Adding the CSS from Theme Roller to your Responsive Template<\/h2>\n<p>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. <\/p>\n<ol class=\"article_list\">\n<li>Download a theme from Theme Roller.<\/li>\n<li><a href=\"\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller-responsive-template_theme-roller-1-rename-index.png\" rel=\"lightbox-0\"><img decoding=\"async\" alt=\"text\" class=\"std_ss\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller-responsive-template_theme-roller-1-rename-index.png\" style=\"float: right; margin: 0px 0px 15px 15px;\" title=\"Click here to view the larger image\" width=\"100\"><\/a>\n<div style=\"clear:both;\"><\/div>\n<p>Extract the Theme Roller files to your computer. Rename the <em>index.html<\/em> file in the Theme Roller folder to <em>styles.html<\/em>. <br style=\"clear: both;\"> <\/p><\/li>\n<li><a href=\"\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller-responsive-template_theme-roller-2-copy-files.png\" rel=\"lightbox-0\"><img decoding=\"async\" alt=\"text\" class=\"std_ss\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller-responsive-template_theme-roller-2-copy-files.png\" style=\"float: right; margin: 0px 0px 15px 15px;\" title=\"Click here to view the larger image\" width=\"100\"><\/a>\n<div style=\"clear:both;\"><\/div>\n<p>Copy the <em>styles.html<\/em> file, <em>js<\/em> folder and the <em>css<\/em> folder to your Responsive Template folder. <br style=\"clear: both;\"> <\/p><\/li>\n<li><a href=\"\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller-responsive-template_theme-roller-3-copy-head-code.png\" rel=\"lightbox-0\"><img decoding=\"async\" alt=\"text\" class=\"std_ss\" src=\"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\" style=\"float: right; margin: 0px 0px 15px 15px;\" title=\"Click here to view the larger image\" width=\"100\"><\/a>\n<div style=\"clear:both;\"><\/div>\n<p>Open the <em>styles.html<\/em> file in your Text editor or HTML editor. Copy the links to the <em>css<\/em> files, the <em>JavaScript<\/em> and <em>Styles<\/em> in the head section and paste them into your Responsive template index.html file head section. <br style=\"clear: both;\"> <\/p><\/li>\n<li>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.\n<p><strong>Premade jQuery Theme Roller Classes<\/strong><\/p>\n<pre style=\"padding:5px;\">ui-widget-content ui-corner-all ui-state-hover ui-state-default ui-state-active ui-icon<\/pre>\n<p>Add the following classes to the code.<\/p>\n<pre style=\"padding:5px;\">&lt;div id=\"header-content\"&gt; add &lt;div id=\"header-content\" class=\"ui-widget-content\"&gt;<\/pre>\n<pre style=\"padding:5px;\">&lt;div id=\"main-content\"&gt; add &lt;div id=\"main-content\" class=\"ui-state-hover\"&gt;<\/pre>\n<pre style=\"padding:5px;\">&lt;div id=\"banner\"&gt; add &lt;div id=\"banner\" class=\"ui-corner-all\"&gt;<\/pre>\n<pre style=\"padding:5px;\">&lt;div class=\"box\"&gt; add &lt;div class=\"box ui-corner-all ui-widget-content\"&gt;<\/pre>\n<pre style=\"padding:5px;\">&lt;div id=\"footer-content\"&gt; add &lt;div id=\"footer-content\" class=\"ui-widget-content\"&gt;<\/pre>\n<p><a href=\"\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller-responsive-template_theme-roller-4-classes.png\" rel=\"lightbox-0\"><img decoding=\"async\" alt=\"text\" class=\"std_ss\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller-responsive-template_theme-roller-4-classes.png\" style=\"float: right; margin: 0px 0px 15px 15px;\" title=\"Click here to view the larger image\" width=\"100\"><\/a><\/p>\n<div style=\"clear:both;\"><\/div>\n<p>To learn more about CSS classes, check out our tutorial on CSS.<\/p>\n<p>When done you should see your code look like the snapshot to the right.<\/p>\n<p> <br style=\"clear: both;\"><\/p><\/li>\n<li>Save the file and look at your Responsive Template. You should see the theme look like the snapshot to the right.<br> \n<div align=\"center\" style=\"float: left; margin: 0px 5px 5px 0px;\"><a href=\"\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller-responsive-template_theme-roller-5-final-theme-view.png\" rel=\"lightbox-0\"><img decoding=\"async\" alt=\"text\" class=\"std_ss size-full wp-image-12179\" height=\"100\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller-responsive-template_theme-roller-5-final-theme-view.png\" title=\"Click here to view the larger image\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller-responsive-template_theme-roller-5-final-theme-view.png 912w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller-responsive-template_theme-roller-5-final-theme-view-300x288.png 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller-responsive-template_theme-roller-5-final-theme-view-768x736.png 768w\" sizes=\"(min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/a>\n<div style=\"clear:both;\"><\/div>\n<p>   Tablet View<\/p><\/div>\n<div align=\"center\" style=\"float: left; margin: 0px 5px 5px 0px;\"><a href=\"\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller-responsive-template_theme-roller-6-mobile.png\" rel=\"lightbox-0\"><img decoding=\"async\" alt=\"text\" class=\"std_ss size-full wp-image-12180\" height=\"100\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller-responsive-template_theme-roller-6-mobile.png\" title=\"Click here to view the larger image\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller-responsive-template_theme-roller-6-mobile.png 337w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller-responsive-template_theme-roller-6-mobile-116x300.png 116w\" sizes=\"(min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/a>\n<div style=\"clear:both;\"><\/div>\n<p>   Mobile View<\/p><\/div>\n<div align=\"center\" style=\"float: left; margin: 0px 5px 5px 0px;\"><a href=\"\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller-responsive-template_theme-roller-7-large.png\" rel=\"lightbox-0\"><img decoding=\"async\" alt=\"text\" class=\"std_ss size-full wp-image-12181\" height=\"100\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller-responsive-template_theme-roller-7-large.png\" title=\"Click here to view the larger image\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller-responsive-template_theme-roller-7-large.png 1431w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller-responsive-template_theme-roller-7-large-300x183.png 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller-responsive-template_theme-roller-7-large-768x469.png 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller-responsive-template_theme-roller-7-large-1024x625.png 1024w\" sizes=\"(min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/a>\n<div style=\"clear:both;\"><\/div>\n<p>   Desktop View<\/p><\/div>\n<p> <br style=\"clear: both;\"> <\/p><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>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<a class=\"moretag\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/theme-roller-jquery-style-responsive-template\/\"> Read More ><\/a><\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4346,56],"tags":[],"class_list":["post-2759","post","type-post","status-publish","format-standard","hentry","category-website-design","category-wordpress"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Styling a Responsive Template with jQuery Theme Roller | InMotion Hosting<\/title>\n<meta name=\"description\" content=\"Now that you have a Theme from jQuery Theme Roller you can style your responsive template with it. Follow this tutorial to learn how to customize the look of a responsive theme.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/theme-roller-jquery-style-responsive-template\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Styling a Responsive Template with jQuery Theme Roller | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"Now that you have a Theme from jQuery Theme Roller you can style your responsive template with it. Follow this tutorial to learn how to customize the look of a responsive theme.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/theme-roller-jquery-style-responsive-template\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2013-06-05T17:37:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/website_responsive-templates_create-responsive-template.png\" \/>\n<meta name=\"author\" content=\"InMotion Hosting Contributor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InMotion Hosting Contributor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/theme-roller-jquery-style-responsive-template\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/theme-roller-jquery-style-responsive-template\/\"},\"author\":{\"name\":\"InMotion Hosting Contributor\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/0ba9f3ef6fadef71df5aa120ff996c41\"},\"headline\":\"Styling a Responsive Template with jQuery Theme Roller\",\"datePublished\":\"2013-06-05T17:37:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/theme-roller-jquery-style-responsive-template\/\"},\"wordCount\":325,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/theme-roller-jquery-style-responsive-template\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/website_responsive-templates_create-responsive-template.png\",\"articleSection\":[\"Website Design\",\"WordPress Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/theme-roller-jquery-style-responsive-template\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/theme-roller-jquery-style-responsive-template\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/theme-roller-jquery-style-responsive-template\/\",\"name\":\"Styling a Responsive Template with jQuery Theme Roller | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/theme-roller-jquery-style-responsive-template\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/theme-roller-jquery-style-responsive-template\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/website_responsive-templates_create-responsive-template.png\",\"datePublished\":\"2013-06-05T17:37:33+00:00\",\"description\":\"Now that you have a Theme from jQuery Theme Roller you can style your responsive template with it. Follow this tutorial to learn how to customize the look of a responsive theme.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/theme-roller-jquery-style-responsive-template\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/theme-roller-jquery-style-responsive-template\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/theme-roller-jquery-style-responsive-template\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/website_responsive-templates_create-responsive-template.png\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/website_responsive-templates_create-responsive-template.png\",\"width\":1024,\"height\":768,\"caption\":\"Click here to view the larger image\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/theme-roller-jquery-style-responsive-template\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Styling a Responsive Template with jQuery Theme Roller\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support &amp; Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/0ba9f3ef6fadef71df5aa120ff996c41\",\"name\":\"InMotion Hosting Contributor\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/jamesr\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Styling a Responsive Template with jQuery Theme Roller | InMotion Hosting","description":"Now that you have a Theme from jQuery Theme Roller you can style your responsive template with it. Follow this tutorial to learn how to customize the look of a responsive theme.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/theme-roller-jquery-style-responsive-template\/","og_locale":"en_US","og_type":"article","og_title":"Styling a Responsive Template with jQuery Theme Roller | InMotion Hosting","og_description":"Now that you have a Theme from jQuery Theme Roller you can style your responsive template with it. Follow this tutorial to learn how to customize the look of a responsive theme.","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/theme-roller-jquery-style-responsive-template\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2013-06-05T17:37:33+00:00","og_image":[{"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/website_responsive-templates_create-responsive-template.png","type":"","width":"","height":""}],"author":"InMotion Hosting Contributor","twitter_card":"summary_large_image","twitter_creator":"@InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"InMotion Hosting Contributor","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/theme-roller-jquery-style-responsive-template\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/theme-roller-jquery-style-responsive-template\/"},"author":{"name":"InMotion Hosting Contributor","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/0ba9f3ef6fadef71df5aa120ff996c41"},"headline":"Styling a Responsive Template with jQuery Theme Roller","datePublished":"2013-06-05T17:37:33+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/theme-roller-jquery-style-responsive-template\/"},"wordCount":325,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/theme-roller-jquery-style-responsive-template\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/website_responsive-templates_create-responsive-template.png","articleSection":["Website Design","WordPress Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/theme-roller-jquery-style-responsive-template\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/theme-roller-jquery-style-responsive-template\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/theme-roller-jquery-style-responsive-template\/","name":"Styling a Responsive Template with jQuery Theme Roller | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/theme-roller-jquery-style-responsive-template\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/theme-roller-jquery-style-responsive-template\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/website_responsive-templates_create-responsive-template.png","datePublished":"2013-06-05T17:37:33+00:00","description":"Now that you have a Theme from jQuery Theme Roller you can style your responsive template with it. Follow this tutorial to learn how to customize the look of a responsive theme.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/theme-roller-jquery-style-responsive-template\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/theme-roller-jquery-style-responsive-template\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/theme-roller-jquery-style-responsive-template\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/website_responsive-templates_create-responsive-template.png","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/website_responsive-templates_create-responsive-template.png","width":1024,"height":768,"caption":"Click here to view the larger image"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/theme-roller-jquery-style-responsive-template\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"Styling a Responsive Template with jQuery Theme Roller"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support &amp; Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/0ba9f3ef6fadef71df5aa120ff996c41","name":"InMotion Hosting Contributor","url":"https:\/\/www.inmotionhosting.com\/support\/author\/jamesr\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":null,"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/2759","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=2759"}],"version-history":[{"count":0,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/2759\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=2759"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=2759"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=2759"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}