{"id":1895,"date":"2012-10-19T10:55:44","date_gmt":"2012-10-19T10:55:44","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2012\/10\/19\/background-colour\/"},"modified":"2021-11-19T01:58:55","modified_gmt":"2021-11-19T06:58:55","slug":"background-colour","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/background-colour\/","title":{"rendered":"Changing your template background colour in Joomla 3.1"},"content":{"rendered":"

As we continue to review the available settings within the Protostar template<\/a> of your Joomla 3.0 hosting<\/a>, the next setting we will look at is the Background Colour<\/strong> setting:<\/p>\n

Background Colour<\/b>
Choose a background colour for static layouts. Default is #F4F6F7<\/em><\/p>\n

Adjusting the Background Colour<\/em> setting will do exactly what you expect, adjust the background of your template. The default color is #F4F5F7 and in our testing we changed it to #8cb7e6. You can see the results below:<\/p>\n\n\n\n\n
Background Colour: #F4F6F7<\/th>\nBackground Colour: #8cb7e6<\/th>\n<\/tr>\n
\u00c2\u00a0\"background-color-grey\"<\/a>\n
<\/div>\n<\/td>\n
\u00c2\u00a0\"background-colour-blue\"<\/a>\n
<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

The steps for changing your background color within the Protostar template are very similar to those of editing your link colors<\/a>. The main difference will be that you are changing it from a light gray to the blue color as seen above. Make sure to check your website after changing colors in order avoid elements of your website from becoming difficult to see or unviewable. Additionally, keep in mind that you may need to clear your web browser cache<\/a> after making a change.<\/p>\n

To change your Protostar template background color in Joomla 3.0:<\/h2>\n
    \n
  1. Log into your Joomla 3.0 Admin Dashboard<\/a><\/li>\n
  2. In the top menu, click Extensions<\/b> and then click Template Manager<\/b><\/li>\n
  3. In the list of templates, find and click on the Protostar<\/b> template. In our testing, we clicked on My Default Style (Protostar)<\/b><\/li>\n
  4. Click the Options<\/b> tab towards the top of the page<\/li>\n
  5. Find the setting labeled Background Colour<\/b>, and then click the box to the right. A color swatch will appear. Select the color of your choice and then click the Save<\/b> button in the top left of the page to change your setting.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

    As we continue to review the available settings within the Protostar template of your Joomla 3.0 hosting, the next setting we will look at is the Background Colour setting: Background ColourChoose a background colour for static layouts. Default is #F4F6F7 Adjusting the Background Colour setting will do exactly what you expect, adjust the background of 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-1895","post","type-post","status-publish","format-standard","hentry","category-joomla","category-joomla-3","tag-joomla-v3"],"acf":[],"yoast_head":"\nChanging your template background colour in Joomla 3.1 | InMotion Hosting<\/title>\n<meta name=\"description\" content=\"Changing the background color of your Joomla 3.0 Protostar template is easy to do, and we'll show you how in this tutorial.\" \/>\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\/background-colour\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Changing your template background colour in Joomla 3.1 | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"Changing the background color of your Joomla 3.0 Protostar template is easy to do, and we'll show you how in this tutorial.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/background-colour\/\" \/>\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-19T10:55:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-11-19T06:58:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_protostar_background-color-grey.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=\"1 minute\" \/>\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\/background-colour\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/background-colour\/\"},\"author\":{\"name\":\"Brad Markle\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf\"},\"headline\":\"Changing your template background colour in Joomla 3.1\",\"datePublished\":\"2012-10-19T10:55:44+00:00\",\"dateModified\":\"2021-11-19T06:58:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/background-colour\/\"},\"wordCount\":281,\"commentCount\":23,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/background-colour\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_protostar_background-color-grey.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\/background-colour\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/background-colour\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/background-colour\/\",\"name\":\"Changing your template background colour in Joomla 3.1 | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/background-colour\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/background-colour\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_protostar_background-color-grey.jpg\",\"datePublished\":\"2012-10-19T10:55:44+00:00\",\"dateModified\":\"2021-11-19T06:58:55+00:00\",\"description\":\"Changing the background color of your Joomla 3.0 Protostar template is easy to do, and we'll show you how in this tutorial.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/background-colour\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/background-colour\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/background-colour\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_protostar_background-color-grey.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_protostar_background-color-grey.jpg\",\"width\":800,\"height\":621,\"caption\":\"background-color-grey\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/background-colour\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Changing your template background colour in Joomla 3.1\"}]},{\"@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":"Changing your template background colour in Joomla 3.1 | InMotion Hosting","description":"Changing the background color of your Joomla 3.0 Protostar template is easy to do, and we'll show you how in this tutorial.","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\/background-colour\/","og_locale":"en_US","og_type":"article","og_title":"Changing your template background colour in Joomla 3.1 | InMotion Hosting","og_description":"Changing the background color of your Joomla 3.0 Protostar template is easy to do, and we'll show you how in this tutorial.","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/background-colour\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2012-10-19T10:55:44+00:00","article_modified_time":"2021-11-19T06:58:55+00:00","og_image":[{"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_protostar_background-color-grey.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":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/background-colour\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/background-colour\/"},"author":{"name":"Brad Markle","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf"},"headline":"Changing your template background colour in Joomla 3.1","datePublished":"2012-10-19T10:55:44+00:00","dateModified":"2021-11-19T06:58:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/background-colour\/"},"wordCount":281,"commentCount":23,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/background-colour\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_protostar_background-color-grey.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\/background-colour\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/background-colour\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/background-colour\/","name":"Changing your template background colour in Joomla 3.1 | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/background-colour\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/background-colour\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_protostar_background-color-grey.jpg","datePublished":"2012-10-19T10:55:44+00:00","dateModified":"2021-11-19T06:58:55+00:00","description":"Changing the background color of your Joomla 3.0 Protostar template is easy to do, and we'll show you how in this tutorial.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/background-colour\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/background-colour\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/background-colour\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_protostar_background-color-grey.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/10\/edu_joomla-3_protostar_background-color-grey.jpg","width":800,"height":621,"caption":"background-color-grey"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/background-colour\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"Changing your template background colour in Joomla 3.1"}]},{"@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\/1895","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=1895"}],"version-history":[{"count":4,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/1895\/revisions"}],"predecessor-version":[{"id":92102,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/1895\/revisions\/92102"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=1895"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=1895"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=1895"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}