{"id":1833,"date":"2012-10-04T17:42:36","date_gmt":"2012-10-04T17:42:36","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2012\/10\/04\/starting-template\/"},"modified":"2021-11-19T01:59:37","modified_gmt":"2021-11-19T06:59:37","slug":"starting-template","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/starting-template\/","title":{"rendered":"A very basic template soon to be a Joomla 3.1 template"},"content":{"rendered":"

Welcome to our tutorial series on creating a basic Joomla 3.0 template<\/a><\/strong>! Over the next few articles, we plan to show you how to build from scratch a fully functional, responsive Joomla 3.0 template.<\/p>\n

The first thing we\u2019ve done is created a very standard template. There\u2019s nothing fancy about it. It has a header, footer, sidebar, and main content area. In this article, we will start off by showing you what this template looks like and the files that make it up.<\/p>\n

What our template originally looked like<\/h2>\n

\"screenshot-of-starting-template\"<\/a><\/p>\n

<\/div>\n

So first things first, you can see to the right what our starting template looks like. As we said, it\u2019s not much, but keep reading and watch as we transform this into a Joomla 3.0 template!<\/p>\n

The files that make up our template<\/h2>\n

\"basic-template-directory-tree\"<\/a><\/p>\n

<\/div>\n

The following files make up our template:<\/p>\n

|-- index.php<\/a>\n|css\n|   |-- style.css<\/a>\n|js\n|   |-- main.js\n|images\n|   |-- blank_image.jpg<\/pre>\n
<\/a><\/p>\n
index.php<\/h3>\n
The first file we\u2019ll look at is our index file, index.php. It makes a call to 2 other files, a css file and a javascript file. It is very basic now, but in our next tutorial we will add module positions to it using jdoc:include<\/a>.<\/p>\n
<!DOCTYPE html>\n<html>\n<head>\n    <link rel=\"stylesheet\" href=\"css\/style.css\" type=\"text\/css\" \/>\n    <script src=\"js\/main.js\" type=\"text\/javascript\"><\/script>\n<\/head>\n<body>\n    <!-- main container -->\n    <div class='main_container'>\n        <!-- header -->\n        <div class='header'>Header<\/div>\n    \n        <!-- mid container - includes main content area and right sidebar -->\n        <div class='mid_container'>\n    \n            <!-- main content area -->\n            <div class='main_content_area'>\n                Main Content Area\n            <\/div>\n    \n            <!-- right sidebar -->\n            <div class='right_sidebar'>\n                Right SideBar\n            <\/div>\n            \n            <div style='clear:both;'><\/div>\n    \n        <\/div>\n    \n        <!-- footer -->\n        <div class='footer'>\n            Footer\n        <\/div>\n        \n    <\/div>\n<\/body>\n<\/html><\/pre>\n
<\/a><\/p>\n
css\/style.css<\/h3>\n
Our style.css contains the basic css that we are using to style our document.<\/p>\n
.main_container {\n    width:940px;\n    margin-left:auto;\n    margin-right:auto;\n}\n.mid_container {\n    margin:20px 0px;\n}\n.main_content_area {\n    float:left;\n    width:700px;\n}\n.right_sidebar {\n    float:right;\n    width: 220px;\n}\n.main_content_area,\n.right_sidebar,\n.footer,\n.header {\n    border:1px solid #bbb;\n}<\/pre>\n
js\/main.js<\/h3>\n
As you can see in our index.php file, we are calling js\/main.js. We don\u2019t have any javascript in our template just yet because we don\u2019t need any. We are calling the file though because:<\/p>\n
    \n
  1. We know most likely we will have javascript in the future.<\/li>\n
  2. Joomla 3.0 will not install a template if you are including a folder without any files in it.<\/li>\n<\/ol>\n
    Because of the above, we created a folder named js and created a blank file within it named main.js<\/p>\n
    images<\/h3>\n
    We don\u2019t have any images in our template at this time, but as you read in the javascript portion above, we will probably have images in the future. Therefore, we created a folder named images and simply created a blank file named blank_image.jpg in it.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Welcome to our tutorial series on creating a basic Joomla 3.0 template! Over the next few articles, we plan to show you how to build from scratch a fully functional, responsive Joomla 3.0 template. The first thing we\u2019ve done is created a very standard template. There\u2019s nothing fancy about it. It has a header, footer, Read More ><\/a><\/p>\n","protected":false},"author":2,"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":[4403,94],"tags":[4404],"class_list":["post-1833","post","type-post","status-publish","format-standard","hentry","category-joomla","category-joomla-3","tag-joomla-v3"],"acf":[],"yoast_head":"\nA very basic template soon to be a Joomla 3.1 template | InMotion Hosting<\/title>\n<meta name=\"description\" content=\"In our first tutorial on creating Joomla 3.0 Templates, we will show you what the basic template that we're working with looks like.\" \/>\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\/joomla\/joomla-3\/starting-template\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A very basic template soon to be a Joomla 3.1 template | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"In our first tutorial on creating Joomla 3.0 Templates, we will show you what the basic template that we're working with looks like.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/starting-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=\"2012-10-04T17:42:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-11-19T06:59:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_create-template_screenshot-of-starting-template.jpg\" \/>\n<meta name=\"author\" content=\"Brad Markle\" \/>\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=\"Brad Markle\" \/>\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\/joomla\/joomla-3\/starting-template\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/starting-template\/\"},\"author\":{\"name\":\"Brad Markle\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf\"},\"headline\":\"A very basic template soon to be a Joomla 3.1 template\",\"datePublished\":\"2012-10-04T17:42:36+00:00\",\"dateModified\":\"2021-11-19T06:59:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/starting-template\/\"},\"wordCount\":354,\"commentCount\":21,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/starting-template\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_create-template_screenshot-of-starting-template.jpg\",\"keywords\":[\"Joomla v3\"],\"articleSection\":[\"Joomla\",\"Joomla 3\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/starting-template\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/starting-template\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/starting-template\/\",\"name\":\"A very basic template soon to be a Joomla 3.1 template | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/starting-template\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/starting-template\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_create-template_screenshot-of-starting-template.jpg\",\"datePublished\":\"2012-10-04T17:42:36+00:00\",\"dateModified\":\"2021-11-19T06:59:37+00:00\",\"description\":\"In our first tutorial on creating Joomla 3.0 Templates, we will show you what the basic template that we're working with looks like.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/starting-template\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/starting-template\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/starting-template\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_create-template_screenshot-of-starting-template.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_create-template_screenshot-of-starting-template.jpg\",\"width\":1370,\"height\":458,\"caption\":\"screenshot-of-starting-template\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/starting-template\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A very basic template soon to be a Joomla 3.1 template\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support & 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\/5ae05d1210b0ef63c437ccedce2799bf\",\"name\":\"Brad Markle\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/bradm\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"A very basic template soon to be a Joomla 3.1 template | InMotion Hosting","description":"In our first tutorial on creating Joomla 3.0 Templates, we will show you what the basic template that we're working with looks like.","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\/joomla\/joomla-3\/starting-template\/","og_locale":"en_US","og_type":"article","og_title":"A very basic template soon to be a Joomla 3.1 template | InMotion Hosting","og_description":"In our first tutorial on creating Joomla 3.0 Templates, we will show you what the basic template that we're working with looks like.","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/starting-template\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2012-10-04T17:42:36+00:00","article_modified_time":"2021-11-19T06:59:37+00:00","og_image":[{"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_create-template_screenshot-of-starting-template.jpg","type":"","width":"","height":""}],"author":"Brad Markle","twitter_card":"summary_large_image","twitter_creator":"@InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"Brad Markle","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/starting-template\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/starting-template\/"},"author":{"name":"Brad Markle","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf"},"headline":"A very basic template soon to be a Joomla 3.1 template","datePublished":"2012-10-04T17:42:36+00:00","dateModified":"2021-11-19T06:59:37+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/starting-template\/"},"wordCount":354,"commentCount":21,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/starting-template\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_create-template_screenshot-of-starting-template.jpg","keywords":["Joomla v3"],"articleSection":["Joomla","Joomla 3"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/starting-template\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/starting-template\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/starting-template\/","name":"A very basic template soon to be a Joomla 3.1 template | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/starting-template\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/starting-template\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_create-template_screenshot-of-starting-template.jpg","datePublished":"2012-10-04T17:42:36+00:00","dateModified":"2021-11-19T06:59:37+00:00","description":"In our first tutorial on creating Joomla 3.0 Templates, we will show you what the basic template that we're working with looks like.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/starting-template\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/starting-template\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/starting-template\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_create-template_screenshot-of-starting-template.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_create-template_screenshot-of-starting-template.jpg","width":1370,"height":458,"caption":"screenshot-of-starting-template"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/starting-template\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"A very basic template soon to be a Joomla 3.1 template"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support & 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\/5ae05d1210b0ef63c437ccedce2799bf","name":"Brad Markle","url":"https:\/\/www.inmotionhosting.com\/support\/author\/bradm\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":null,"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/1833","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\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=1833"}],"version-history":[{"count":7,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/1833\/revisions"}],"predecessor-version":[{"id":92111,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/1833\/revisions\/92111"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=1833"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=1833"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=1833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}