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.  In addition to color sets where the theme has a selction of preset color combinations,  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:

Changing the separate colors on a theme in Drupal 7:

  1. Log into your Drupal 7 Admin panel.
  2. Using the top menu area, click on the Appearance option.
    _main-dashboard-appearance
  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 link for the theme and click that to go to the next screen.
    appearance-theme-settings
  4. From this screen, find the color settings located under the Color Set dropdown. Here you can select colors for the different areas of the page, Base Color, Link Color, Header top, Header bottom, and Text color. 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 and Header Top 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
  5. Once you have decided on a color scheme, click the Save Configuration button at the bottom of the page. Below is a sample of how customizing the colors can change the look of your site.
    Before After
    theme-custom-color-before theme-custom-color-after
Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve our Support Center:
Email Address
Optional, but our team may contact you for more information.
Like this Article?

Post a Comment

Name:
Email Address:
Comment:
Are you a bot?
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!