Good morning everybody and welcome to this special seminar entitled Styling the Agility Skin for Thesis 2. This seminar builds on the previous seminar Using the Agility Skin for Thesis 2. We’re not going to cover the same ground in this one so if you want to be familiar with Agility and the basics of using it that seminar is really the place to start.
The End Product: Styled Version of the Example Website
Essentially what we’re going to do is take Agility and make it look like this. This website is the style of site that I use for teaching the Start Building Your Website Here course. And Agility was really designed with the ability to create this in mind.
You’ll see that we can do all of the styling necessary in order to create this site using the design options inside of Agility and when we’re done it’s going to look similar to this.
Starting Point for Styling the Website
Where we left off with the Using Agility video series, we had set up the Agility 1 column header with responsive header images.
Then our home page was set up with the 2 column feature box with a slider in the left hand column and a call to action on the righthand column. It has the full width content and then below that 3 attention boxes which are essentially featured pages.
If we click on the Read More link it will take you over to the page that talks about that subject. So this is our starting place with styling the rest of the site and we’re going to begin by setting up the initial color scheme.
Agility Skin Design Options
Let’s come on over here to the dashboard and we’re going to spend all of our day today really in skin design options. Agility has extensive skin design options and we’re going to touch on pretty much all of those today.
We’re going to start off by adjusting the color scheme. So the primary text is the main text color on the whole site just like the primary font is the main font for the whole site.
Set Primary and Secondary Text Colors
We’re going to set the primary text color to 222 which is a charcoal gray and we’ll make the secondary text color that lighter gray or 888. Actually, it’s either 888 or 888888 one of the two.
Set Link Color
Then I actually like my links to look like links, at least in the primary section. So I’m going to make the links this blue color but the link hover color is going to be a dark red that comes out of the logo. We’re going to use this color quite a bit throughout. So the link hover will be that dark red.
Set Primary Background Colors
Then I want this light green and this dark green here are going to be the primary background colors. Although I’m reversing dark and light in this case. So the dark background color is actually going to be the lighter green and the medium background color is going to be the darker green. Then the light background color, I want to use this very subtle lightish green, brown, gray color here.
Recap of How to Use the Color System
What you see in this system here is that you can put whatever colors in here you want. You don’t really need to use the Thesis color scale. Thesis is set up for you to put whatever color in here you want.
When we change the color and refresh this, you can see the appearance of this page has changed quite a bit already. Now we’ve got this green background for the menu and our links of this blue color with that red hover, the text is a darker color.
We’ve got the dark green and the light green and then we have our submit buttons. We’re going to do quite a bit more styling with those but setting those colors has given us sort of the basic color scheme for the site.
How to Determine the Color Scheme
Kevin asked how am I determining the colors, out of thin air? No, I’m not determining them out of thin air. I designed it this way back when I created Agility and I’m using the colors that were used when this was designed.
It’s based on the colors that I’ve used for the last several years teaching the design of a website in Thesis, so not thin air. There are lots of sites out there to help you find a color scheme for your website.