{"id":2757,"date":"2013-06-05T14:33:31","date_gmt":"2013-06-05T14:33:31","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2013\/06\/05\/jquery-theme-roller-responsive-template\/"},"modified":"2021-08-16T23:12:52","modified_gmt":"2021-08-17T03:12:52","slug":"jquery-theme-roller-responsive-template","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/jquery-theme-roller-responsive-template\/","title":{"rendered":"Responsive template design with the jQuery Theme Roller"},"content":{"rendered":"<p>After you have the skeleton template for your <a href=\"\/support\/website\/website-design\/mobile-devices-responsive-templates-rwd\/\">responsive template<\/a> 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 <em><strong>jQuery Theme Roller<\/strong><\/em> to design your site.<\/p>\n<h2>What is the jQuery Theme Roller?<\/h2>\n<p><a href=\"\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller_theme-roller-1-home.png\" rel=\"lightbox-0\"><img decoding=\"async\" width=\"800\" height=\"568\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller_theme-roller-1-home.png\" class=\"optimized-lcp-image\" alt=\"jQuery Theme Roller\" loading=\"eager\" fetchpriority=\"high\" sizes=\"(max-width: 768px) 100vw, 768px\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller_theme-roller-1-home.png 800w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller_theme-roller-1-home-300x213.png 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller_theme-roller-1-home-768x545.png 768w\"><\/a><\/p>\n<div style=\"clear:both;\"><\/div>\n<p>Theme Roller is a Free Open Source JavaScript theme generator that allows you to create Website themes without knowing JavaScript. Theme Roller provides <em>CSS classes<\/em> that you can reuse through out your website to add functionality like <em>buttons<\/em>, <em>tabs<\/em>, <em>accordion drop boxes<\/em>, <em>dialog pop up boxes<\/em> and more. Theme roller lets you experiment with different colors and styles \u201c<em><strong>On The Fly<\/strong><\/em>\u201d so you can customize your website look and feel. To use the Theme Roller theme maker by jQuery, you will need to visit <a href=\"https:\/\/jqueryui.com\/themeroller\/\" target=\"_blank\" rel=\"noopener\">jqueryui.com\/themeroller.<\/a><br style=\"clear: both;\"> <\/p>\n<h2>The Theme Roller Interface<\/h2>\n<p><a href=\"\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller_theme-roller-2-interface.png\" rel=\"lightbox-0\"><img decoding=\"async\" alt=\"jQuery Theme Roller interface\" class=\"std_ss\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller_theme-roller-2-interface.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>The 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.<\/p>\n<table border=\"0\" class=\"article_list\">\n<tr>\n<th colspan=\"2\">Theme Roller Settings<\/th>\n<\/tr>\n<tr>\n<th>Font Settings<\/th>\n<td>Adjusts the Font Family, Weight, and Size.<\/td>\n<\/tr>\n<tr>\n<th>Corner Radius<\/th>\n<td>Sets the Corner radius for rounded corners on boxes.<\/td>\n<\/tr>\n<tr>\n<th>Header\/Toolbar<\/th>\n<td>The background color and texture is set here. You can also change the border, text, and icon color.<\/td>\n<\/tr>\n<tr>\n<th>Content<\/th>\n<td>This is the styles for the content boxes. This styles the background color and texture, border, text, and icon color.<\/td>\n<\/tr>\n<tr>\n<th>Clickable: default status<\/th>\n<td>The background color and texture, border, text, and icon color for buttons in their default state.<\/td>\n<\/tr>\n<tr>\n<th>Clickable: hover state<\/th>\n<td>The background color and texture, border, text, and icon color for buttons in their hover state.<\/td>\n<\/tr>\n<tr>\n<th>Clickable: active state<\/th>\n<td>The background color and texture, border, text, and icon color for buttons in their active (when clicked) state.<\/td>\n<\/tr>\n<tr>\n<th>Highlight<\/th>\n<td>This is a highlight box. Similar to an error box but not for errors.<\/td>\n<\/tr>\n<tr>\n<th>Error<\/th>\n<td>This is the styles for the error pop up box.<\/td>\n<\/tr>\n<tr>\n<th>Modal Screen for Overlays<\/th>\n<td>This is the style of the transparent overlay that displays when pop up boxes are clicked.<\/td>\n<\/tr>\n<tr>\n<th>Drop Shadows<\/th>\n<td>Adds drop shadows to the boxes. (not supported in all browsers)<\/td>\n<\/tr>\n<\/table>\n<p><br style=\"clear: both;\"><\/p>\n<h2>How the theme Roller Works<\/h2>\n<p>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.<\/p>\n<ol class=\"article_list\">\n<li><a href=\"\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller_theme-roller-5-color.png\" rel=\"lightbox-0\"><img decoding=\"async\" alt=\"jQuery Theme Roller Color the style\" class=\"std_ss\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller_theme-roller-5-color.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>Expand the <em>Header\/Toolbar<\/em> and select the Background &amp; texture color number and you will see the color picker open up. <br style=\"clear: both;\"> <\/p><\/li>\n<li><a href=\"\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller_theme-roller-color-change-1.png\" rel=\"lightbox-0\"><img decoding=\"async\" alt=\"Change colors jQuery Theme Roller\" class=\"std_ss\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller_theme-roller-color-change-1.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>By Default you will see the background color a gray like the image to the right. <br style=\"clear: both;\"> <\/p><\/li>\n<li><a href=\"\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller_theme-roller-color-change-2.png\" rel=\"lightbox-0\"><img decoding=\"async\" alt=\"Changed version on the fly jQuery Theme Roller\" class=\"std_ss\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller_theme-roller-color-change-2.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>When 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. <br style=\"clear: both;\"> <\/p><\/li>\n<li><a href=\"\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller_theme-roller-6-download.png\" rel=\"lightbox-0\"><img decoding=\"async\" alt=\"Click Download jQuery Theme Roller\" class=\"std_ss\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller_theme-roller-6-download.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>Download the theme. <br style=\"clear: both;\"><\/p><\/li>\n<\/ol>\n<h2>Theme Roller Theme Gallery<\/h2>\n<p>If you don\u2019t want to make your own theme, you can use the Theme Rollers Gallery to download a premade theme.<\/p>\n<ol class=\"article_list\">\n<li><a href=\"\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller_theme-roller-gallery.png\" rel=\"lightbox-0\"><img decoding=\"async\" alt=\"jQuery Theme Roller Gallery\" class=\"std_ss\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller_theme-roller-gallery.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>Click the Gallery tab and you will see a list of premade themes free for download. <br style=\"clear: both;\"><\/p><\/li>\n<li><a href=\"\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller_theme-roller-7-premade.png\" rel=\"lightbox-0\"><img decoding=\"async\" alt=\"Pre Made jQuery Theme Roller\" class=\"std_ss\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller_theme-roller-7-premade.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>Click the Download button under the theme you want to download to go to the download page. <br style=\"clear: both;\"><\/p><\/li>\n<\/ol>\n<h2>Downloading the theme<\/h2>\n<p>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.<\/p>\n<ol class=\"article_list\">\n<li><a href=\"\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller_theme-roller-8-1.10.3.png\" rel=\"lightbox-0\"><img decoding=\"async\" alt=\"Version of latest jQuery Theme Roller 1.10.3\" class=\"std_ss\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller_theme-roller-8-1.10.3.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>Select the 1.10.3 version to get the latest version of jQuery with the Theme. <br style=\"clear: both;\"> <\/p><\/li>\n<li><a href=\"\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller_theme-roller-9-download.png\" rel=\"lightbox-0\"><img decoding=\"async\" alt=\"Click Download jQuery Theme Roller\" class=\"std_ss\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller_theme-roller-9-download.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>You can leave all the settings that are selected by default. Click the download link. <br style=\"clear: both;\"><\/p><\/li>\n<li><a href=\"\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller_theme-roller-10-final.png\" rel=\"lightbox-0\"><img decoding=\"async\" alt=\"Theme styles available jQuery Theme Roller\" class=\"std_ss\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller_theme-roller-10-final.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>When 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. <br style=\"clear: both;\"> <\/p><\/li>\n<\/ol>\n<p>Now that your have the theme files, we can <a href=\"\/support\/edu\/wordpress\/theme-roller-jquery-style-responsive-template\/\" target=\"_blank\" rel=\"noopener\">apply the styles to your Responsive template<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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<a class=\"moretag\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/jquery-theme-roller-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-2757","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>Responsive template design with the jQuery Theme Roller | InMotion Hosting<\/title>\n<meta name=\"description\" content=\"Once you have your Responsive template created, you will now need to style it. This article will teach you how to get a theme by using the jQuery Theme Roller.\" \/>\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\/jquery-theme-roller-responsive-template\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsive template design with the jQuery Theme Roller | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"Once you have your Responsive template created, you will now need to style it. This article will teach you how to get a theme by using the jQuery Theme Roller.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/jquery-theme-roller-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-05T14:33:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-17T03:12:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller_theme-roller-1-home.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=\"3 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\/jquery-theme-roller-responsive-template\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/jquery-theme-roller-responsive-template\/\"},\"author\":{\"name\":\"InMotion Hosting Contributor\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/0ba9f3ef6fadef71df5aa120ff996c41\"},\"headline\":\"Responsive template design with the jQuery Theme Roller\",\"datePublished\":\"2013-06-05T14:33:31+00:00\",\"dateModified\":\"2021-08-17T03:12:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/jquery-theme-roller-responsive-template\/\"},\"wordCount\":701,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/jquery-theme-roller-responsive-template\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller_theme-roller-1-home.png\",\"articleSection\":[\"Website Design\",\"WordPress Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/jquery-theme-roller-responsive-template\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/jquery-theme-roller-responsive-template\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/jquery-theme-roller-responsive-template\/\",\"name\":\"Responsive template design with the jQuery Theme Roller | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/jquery-theme-roller-responsive-template\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/jquery-theme-roller-responsive-template\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller_theme-roller-1-home.png\",\"datePublished\":\"2013-06-05T14:33:31+00:00\",\"dateModified\":\"2021-08-17T03:12:52+00:00\",\"description\":\"Once you have your Responsive template created, you will now need to style it. This article will teach you how to get a theme by using the jQuery Theme Roller.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/jquery-theme-roller-responsive-template\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/jquery-theme-roller-responsive-template\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/jquery-theme-roller-responsive-template\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller_theme-roller-1-home.png\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller_theme-roller-1-home.png\",\"width\":800,\"height\":568,\"caption\":\"Click here to view the larger image\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/jquery-theme-roller-responsive-template\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Responsive template design with the 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":"Responsive template design with the jQuery Theme Roller | InMotion Hosting","description":"Once you have your Responsive template created, you will now need to style it. This article will teach you how to get a theme by using the jQuery Theme Roller.","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\/jquery-theme-roller-responsive-template\/","og_locale":"en_US","og_type":"article","og_title":"Responsive template design with the jQuery Theme Roller | InMotion Hosting","og_description":"Once you have your Responsive template created, you will now need to style it. This article will teach you how to get a theme by using the jQuery Theme Roller.","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/jquery-theme-roller-responsive-template\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2013-06-05T14:33:31+00:00","article_modified_time":"2021-08-17T03:12:52+00:00","og_image":[{"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller_theme-roller-1-home.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":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/jquery-theme-roller-responsive-template\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/jquery-theme-roller-responsive-template\/"},"author":{"name":"InMotion Hosting Contributor","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/0ba9f3ef6fadef71df5aa120ff996c41"},"headline":"Responsive template design with the jQuery Theme Roller","datePublished":"2013-06-05T14:33:31+00:00","dateModified":"2021-08-17T03:12:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/jquery-theme-roller-responsive-template\/"},"wordCount":701,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/jquery-theme-roller-responsive-template\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller_theme-roller-1-home.png","articleSection":["Website Design","WordPress Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/jquery-theme-roller-responsive-template\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/jquery-theme-roller-responsive-template\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/jquery-theme-roller-responsive-template\/","name":"Responsive template design with the jQuery Theme Roller | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/jquery-theme-roller-responsive-template\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/jquery-theme-roller-responsive-template\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller_theme-roller-1-home.png","datePublished":"2013-06-05T14:33:31+00:00","dateModified":"2021-08-17T03:12:52+00:00","description":"Once you have your Responsive template created, you will now need to style it. This article will teach you how to get a theme by using the jQuery Theme Roller.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/jquery-theme-roller-responsive-template\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/jquery-theme-roller-responsive-template\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/jquery-theme-roller-responsive-template\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller_theme-roller-1-home.png","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_theme-roller_theme-roller-1-home.png","width":800,"height":568,"caption":"Click here to view the larger image"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/jquery-theme-roller-responsive-template\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"Responsive template design with the 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\/2757","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=2757"}],"version-history":[{"count":2,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/2757\/revisions"}],"predecessor-version":[{"id":84559,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/2757\/revisions\/84559"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=2757"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=2757"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=2757"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}