Build Your Own Business Website header image

Thesis 2.1 Launch Party – Part 5 – Set the Site Colors with the Thesis 2.1 Color Scheme Generator

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some protected content!

Watch the opening clip of this video to preview it,
the full video is available to free and paid members.

Now that we’ve got the header image figured out for the Thesis Classic Responsive skin, we’ll move on to more customization, specifically we’ll be looking at colors in Thesis 2.1.

Set Site Colors Using the Color Scheme Generator

We’re going to set site colors using the Thesis 2.1 color scheme generator. This is one of the coolest, hoopiest parts of Thesis 2.1. And for all those who are asking whether or not it’s going to show up in my Agility skin and my Carta skin, the answer is absolutely, this cool stuff is going to show up in those skins. It doesn’t automatically happens so I’m going to have to update my skins to include that but currently it does not.

Thesis ColorScale

In any case, what you have is this Thesis ColorScale. If you click on that and then click on any color you like, it automatically changes those colors to a monochromatic color system based on the primary color you chose. So if I choose this one, then it is going to create this little monochromatic pattern here.

In the first place, you have this pretty cool monochromatic color scale and then in the second place, you can come along and you can choose a complementary color instead. So if you click on this little thing, this brings up the complementary colors. So you’re not stuck with a monochromatic color scale. You can start with your primary color and then scale in intensity the complementary colors.

Now, what you’ve chosen is its primary color and then Lesson 10’s versions of complementary colors. You could also just choose the complementary color here. For example, it’s probably easier just to do this and then to pick the complementary color, that is easier.

So you can pick complementary colors this way, right So you’ve got a monochromatic color and a complementary color and you can just come along like this and pick a color out of here too and then come up with a different complementary color so you don’t have to use the ColorScale.

The ColorScale just takes a specific color and then scales it down in intensity. Once you’ve done that, you can choose a complementary color to use in its place. You can also switch to gray scale which will automatically take these things to gray scale or you can switch to default colors which will automatically take these to default colors and that was the default color for that.

What Site Colors are Changed

So this will change those colors, that’ll take you to the default colors, this will take you to gray scale all the way around. Anyway, there’s lots of opportunity for you to play with those things. When you play with them, that actually changes the colors of the links, the borders and the highlights, the interior backgrounds, site background colors, secondary text and primary text.

In fact, let’s just pick a different color scheme. There we go. Let’s save this design options and come over and look at what that did to our text. Now, this is our primary text, it’s a blue color, this is our secondary text, it’s that gray, this is secondary text and also gray.

Then we’ve got our menu and if we come over to say, an article and click on the article, I’m just going to show you what happens. You got your secondary background color and that’s the same thing existed in this submit button. So anyway, these things automatically change when you change this default color.

Set Up Site Colors without the ColorScale

Now, what we’re going to do though is set up a color that is based on the colors in this logo. We aren’t actually going to be using the Thesis ColorScale, we’re going to be using the colors from a logo directly. We’re going to keep the primary text colors 111, the secondary text color is going to become that dark brown and then the link color is going to become this lighter brown and then the border and highlights are going to become that kind of bluish green. Finally, the interior background is going to be that really light green.

So this is our new color scheme, we’ll save the design options, come back over and refresh this. Now you can see the new colors in the menu, our borders are different color, our secondary text is a different color, our link text is this lighter color and so on and so forth.

That’s how this totally hoopy color scheme generator Thesis Colorscale in Thesis 2.1 works and you’ll probably waste way too much time playing around with those colors because it’s so dang cool.

0 Comments… add one
0 comments… add one

Leave a Comment