This document refers to one or more of the options accessible by clicking your "Configure" menu item in your top menu when you are logged on as administrator, then clicking the "Custom Header Image, Domain, Theme, and Menu" header item to expand the options.
If you have an existing logo with unique colors, or a brand that you want to match exactly in terms of colors, then you will want to create your own color theme. This process should take about 10–20 minutes, if you do it correctly, and may require some tweaking as you start to build your website. It is all done via the web browser, so there is no CSS to learn or modify directly.
I should point out that creating a color theme is somewhat of an art. It is important to have a good eye for colors, although technology can really help anyone with this process.
For this demonstration, I will use this website as the example, since I created a custom color theme for it.
|
STEP
|
|
Get the Hexadecimal Values of the Colors You Want to Use |
A hexadecimal value is the six-character code preceded by a hash tag (e.g., #F0F0F0) used in HTML5 by web browsers and style sheets to display colors. Unless you already know these codes for the colors you want to use I suggest using a third-party application that not only can 1) give you the hexadecimal value from any selected code, but can also 2) offer complementary colors based on your selected color and 3) allow to lighten the color.
I use an application called "ColorSchemer Studio" (available in MAC app store), but there are many on the market, as well as some online versions that are free (although I am not sure if they can do everything listed above.
First, design your header image. This is where you will pull your colors from.
Next, I open up Color Schemer, click on the "screen picker" tool, and click on some of the colors in my header image to get the hexadecimal values (I clicked the red text). In fact, when I was creating the header, I used the color schemer to find complementary colors, so I know the colors work well together.
Now using the color wheel, I can see the colors that are all in the same general "family". Notice I can also see the hex values for the colors selected. I can click anywhere on the wheel and get the hex values for the other colors I want to use. When choosing a light color, I click on one of the colors in the inner circle. If I want to make the colors even lighter than that (I will need to for background colors), then I use the fourth slider to lighten the color, usually to about 10% (currently shown at 91%).
At this point, you will want to keep the color wheel handy so you can create your theme.
|
STEP
|
|
Select "CUSTOM" as Your Theme |
When you select "CUSTOM", the custom theme area will be visible.
|
STEP
|
|
Enter in Your Hexadecimal Value For Each Color Option |
Now it is time to set your colors. There is quite a bit of automation involved that not only makes this process easy, but ensures that your chosen colors wil work well together. But it is up to you to choose the initial colors that work well together.
1) Start by choosing two colors that will be the basis for your theme. These should be two dark colors ("dark" as defined by dark enough so that text using this color will show on a light background. These are indicated by "primary site color #1" and "primary site color #2" below.
Once you enter a color, the input box will turn green, indicating a changed value. Here is the "easy" part—despite there being over 40 values, you only need to enter in a handful and the rest will be filled in for you as "suggested" values based on the colors you have already entered. This is why it is important that you enter these in order.
Some of the suggested values attempt to use a very light shade of your main color. Since these values could be off depending on your initial colors chosen, there are options presented that you can choose simply by clicking on the alternative color:
Once you click the color, that color will be inserted in the appropriate field and the preview will refresh.
Continue this for all the options. Again, it is important that your light colors are light enough, and your dark colors are dark enough, otherwise there will not be enough contrast when one color is shown on top of another.
When you are done, click the "Continue" button at the bottom of the page.
Once you create a custom theme for your account / subaccount, this can be set in any other tool for that account / subaccount simply by choosing the "CUSTOM" theme. You do NOT have to go through this process for each tool! And when you update the theme, you can do it any any tool and it will update in all of the tools. You only have one custom theme per account / subaccount—you can have multiple themes within the same account / subaccount, but not multiple custom themes.
