{"id":1488,"date":"2012-06-20T14:57:44","date_gmt":"2012-06-20T18:57:44","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2012\/06\/20\/customize-color-themes\/"},"modified":"2021-08-16T23:40:39","modified_gmt":"2021-08-17T03:40:39","slug":"customize-color-themes","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-color-themes\/","title":{"rendered":"How to customize theme colors in Drupal 7"},"content":{"rendered":"

In addition to changing to a new theme completely with preset color combinations<\/a>, you may want to experiment with different color sets to change the look of your site even more. Some themes offer this option.\u00a0 In addition to color sets where the theme has a selction of preset color combinations,\u00a0 you can also change each color individually. This allows you to further customize a theme to your specific tastes. Changing individual colors on a theme in Drupal 7 is simple with these steps:<\/p>\n

Changing the separate colors on a theme in Drupal 7:<\/strong><\/p>\n

    \n
  1. Log into your Drupal 7 Admin panel.<\/a><\/li>\n
  2. Using the top menu area, click on the Appearance <\/strong>option.
    \"_main-dashboard-appearance\"<\/a>\n
    <\/div>\n<\/li>\n
  3. This will bring up the themes page. You will see all enabled themes in the top portion of the screen with the current theme at the very top. Find the Settings <\/strong>link for the theme and click that to go to the next screen.
    \"appearance-theme-settings\"<\/a>\n
    <\/div>\n<\/li>\n
  4. From this screen, find the color settings located under the Color Set<\/strong> dropdown. Here you can select colors for the different areas of the page, Base Color<\/strong>, Link Color<\/strong>, Header top<\/strong>, Header bottom<\/strong>, and Text color<\/strong>. Click on the label of the color you want to change. If you want to have colors for two or more settings stay within certain ranges of each other, simply click the small lock icon to link them together.
    In this example, I linked the Link color<\/strong> and Header Top<\/strong> together. Now, simply use the color wheel to the right to select your color for the selected. You can see the colors in the preview area below the settings.
    \"set-custom-color\"<\/a>\n
    <\/div>\n<\/li>\n
  5. Once you have decided on a color scheme, click the Save Configuration<\/strong> button at the bottom of the page. Below is a sample of how customizing the colors can change the look of your site.

    \n\n\n\n\n
    Before<\/th>\nAfter<\/th>\n<\/tr>\n
    \"theme-custom-color-before\"<\/a>\n
    <\/div>\n<\/td>\n
    		\"theme-custom-color-after\"<\/a>\n
    <\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

    In addition to changing to a new theme completely with preset color combinations, you may want to experiment with different color sets to change the look of your site even more. Some themes offer this option.\u00a0 In addition to color sets where the theme has a selction of preset color combinations,\u00a0 you can also change Read More ><\/a><\/p>\n","protected":false},"author":8,"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":[372],"tags":[],"class_list":["post-1488","post","type-post","status-publish","format-standard","hentry","category-drupal"],"acf":[],"yoast_head":"\nHow to customize theme colors in Drupal 7 | InMotion Hosting<\/title>\n<meta name=\"description\" content=\"This Drupal 7 article demonstrates how to customize your theme colors individually.\" \/>\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\/drupal\/customize-color-themes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to customize theme colors in Drupal 7 | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"This Drupal 7 article demonstrates how to customize your theme colors individually.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-color-themes\/\" \/>\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-06-20T18:57:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-17T03:40:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/06\/edu_Drupal_7_Appearance__main-dashboard-appearance.png\" \/>\n<meta name=\"author\" content=\"Scott Mitchell\" \/>\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=\"Scott Mitchell\" \/>\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\/drupal\/customize-color-themes\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-color-themes\/\"},\"author\":{\"name\":\"Scott Mitchell\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/d850efb28ef3573db7d24b0d8fa9eaed\"},\"headline\":\"How to customize theme colors in Drupal 7\",\"datePublished\":\"2012-06-20T18:57:44+00:00\",\"dateModified\":\"2021-08-17T03:40:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-color-themes\/\"},\"wordCount\":311,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-color-themes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/06\/edu_Drupal_7_Appearance__main-dashboard-appearance.png\",\"articleSection\":[\"Drupal\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-color-themes\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-color-themes\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-color-themes\/\",\"name\":\"How to customize theme colors in Drupal 7 | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-color-themes\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-color-themes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/06\/edu_Drupal_7_Appearance__main-dashboard-appearance.png\",\"datePublished\":\"2012-06-20T18:57:44+00:00\",\"dateModified\":\"2021-08-17T03:40:39+00:00\",\"description\":\"This Drupal 7 article demonstrates how to customize your theme colors individually.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-color-themes\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-color-themes\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-color-themes\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/06\/edu_Drupal_7_Appearance__main-dashboard-appearance.png\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/06\/edu_Drupal_7_Appearance__main-dashboard-appearance.png\",\"width\":1016,\"height\":661,\"caption\":\"_main-dashboard-appearance\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-color-themes\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to customize theme colors in Drupal 7\"}]},{\"@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\/d850efb28ef3573db7d24b0d8fa9eaed\",\"name\":\"Scott Mitchell\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/scott\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to customize theme colors in Drupal 7 | InMotion Hosting","description":"This Drupal 7 article demonstrates how to customize your theme colors individually.","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\/drupal\/customize-color-themes\/","og_locale":"en_US","og_type":"article","og_title":"How to customize theme colors in Drupal 7 | InMotion Hosting","og_description":"This Drupal 7 article demonstrates how to customize your theme colors individually.","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-color-themes\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2012-06-20T18:57:44+00:00","article_modified_time":"2021-08-17T03:40:39+00:00","og_image":[{"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/06\/edu_Drupal_7_Appearance__main-dashboard-appearance.png","type":"","width":"","height":""}],"author":"Scott Mitchell","twitter_card":"summary_large_image","twitter_creator":"@InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"Scott Mitchell","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-color-themes\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-color-themes\/"},"author":{"name":"Scott Mitchell","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/d850efb28ef3573db7d24b0d8fa9eaed"},"headline":"How to customize theme colors in Drupal 7","datePublished":"2012-06-20T18:57:44+00:00","dateModified":"2021-08-17T03:40:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-color-themes\/"},"wordCount":311,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-color-themes\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/06\/edu_Drupal_7_Appearance__main-dashboard-appearance.png","articleSection":["Drupal"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-color-themes\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-color-themes\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-color-themes\/","name":"How to customize theme colors in Drupal 7 | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-color-themes\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-color-themes\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/06\/edu_Drupal_7_Appearance__main-dashboard-appearance.png","datePublished":"2012-06-20T18:57:44+00:00","dateModified":"2021-08-17T03:40:39+00:00","description":"This Drupal 7 article demonstrates how to customize your theme colors individually.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-color-themes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-color-themes\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-color-themes\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/06\/edu_Drupal_7_Appearance__main-dashboard-appearance.png","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/06\/edu_Drupal_7_Appearance__main-dashboard-appearance.png","width":1016,"height":661,"caption":"_main-dashboard-appearance"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-color-themes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"How to customize theme colors in Drupal 7"}]},{"@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\/d850efb28ef3573db7d24b0d8fa9eaed","name":"Scott Mitchell","url":"https:\/\/www.inmotionhosting.com\/support\/author\/scott\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":null,"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/1488","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\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=1488"}],"version-history":[{"count":3,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/1488\/revisions"}],"predecessor-version":[{"id":85906,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/1488\/revisions\/85906"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=1488"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=1488"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=1488"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}