Configure the Appearing of the Agility Skin Using its Options and CSS
Now we’re going to start configuring the appearance of the site because remember, this is what the site’s going to look like when we’re all finished. It doesn’t look anything like Agility necessarily and this is what we’re going to be moving the site to.
Agility Skin CSS Cheat Sheet
We’re going to start with another cheat sheet that I created, the Agility Skin CSS Cheat Sheet. Remember last week, I talked about the Agility Skin HTML layout cheat sheet? Well now I’ve created a css cheat sheet and I’m going to be referring to this regularly throughout the class today.
It’s definitely something that’s worth downloading and becoming familiar with because we’re going to talk about all of the different ways in which you change the styles or change the appearance of Agility using both its options, the skin options and also the css. There are lots of different parts to it but this should help you identify the settings that are used to set colors and styles and that sort of thing.
Agility Skin Options Menu – A Unique Feature
Having said that, this is what we want it to look like. We’re going to come back over here to Thesis and start off with my Agility Nude Options menu here. This is not something that most skins have. This is something that’s unique to Agility. It collects all of the font styles and places them in one section to make it easy for you to set up since these aren’t all in one place in Thesis 2.
Typical Font Styles
We’re going to start off with our typical font styles. Right now, Agility begins with typical font styles as Arial but we’re going to switch to Georgia for the typical font style. We’re going to leave the typical font size alone because I like the settings for it as it is currently set.
But we are going to set the color as 242424. And the typical link color is going to be 247D00. The typical link hover color is going to be 737373. I’m setting the color because I know them but you can always just use the color selector and pick different colors, right?
Site Title and Tagline Font Style
Next is the site title font style. Your site title is this thing right here, the Thesis 2 Responsive Skin. That’s the site title. What this illustration does is it shows you what each of these settings adjust. So the typical font style, the site title font styles, tagline font styles, page heading font styles and the sidebar font styles.
The site title and tagline font styles, I’m not going to set because I’m not using them on this site. So I’m not really going to bother changing those but obviously, you can set a font family, font size, the color and the hover color because the title is, by definition, a link. And you could do the same thing with the tagline. The tagline isn’t a link so you just set its font family, size and color.
But we are going to change page headings. In our page heading style, we’re going to leave the font family alone because it’s going to automatically adopt the typical one which will, at that point, be Georgia. And we’ll leave the font size alone because I like the way it is right now. But I want to change the color and I’m going to change it to a red color, it’s 701A01. And in fact, I want to do the same thing with a subheading color.
In order to help you understand what the page title and subheadings are, this is the page title, right? It’s the name of the page. It’s the title that you put in when you create the page. And subheadings are headings that you create inside the content of your page. And we’re going to talk about how to create those in a later lesson. But this is an h2 heading. And so the h2 heading, h3 heading, h4 heading… those will all end up getting this color that I just set.
The only thing left to do in this is to set the sidebar colors. And again, I want the sidebar font family to be Arial because we’re changing up. We’re switching back and forth between Arial and Georgia. Those are the two that we’re using. And I’m going to adjust the font size to make it 24 pixels and I’m going to give it that red color again so that’s that 701A01. And oh look, I misspelled family. Well, that’ll be update 1.03. I’ll give you a chance to do an automatic upgrade for next week then.
So our heading font family was Arial. Our typical font family will be Arial but we won’t change anything else. We’re not going to change, currently, any of these other settings. We may come back at a later time and change some. But for the time being, those are all of our settings.
Apply the Settings
And in order to apply those settings, you hit save Agility Nude options and then you have to go to this visit the css editor. Go over to css and hit save css. And once you’ve done that, now the styles that you’ve applied you can see here.