This video is part of our old WP eStore Course Go to our Updated WP eStore Course for current videos.
Welcome back to Part 2 of Lesson 8 of the Build Your Own Ecommerce Website tutorial series. In the second part of this lesson we’re going to take a look at editing Fonts, Colors and the teasers part of the Thesis Design Options.
I’m back at my Dashboard under Design Options and we’re looking at Fonts, Colors and More. We’ll start off with the Body. A really exciting thing about Thesis 1.8 is that it now allows for the use of the Google Font Directory fonts.
Google Font Directory
If you look in this dropdown – it used to just have these fonts that were web safe and then it had these other non-safe fonts but they’re sort of irrelevant. Now it has all of these Google fonts that add the possibility of having extra styles on your website. You can take a look at these Google fonts in the Google Font Directory. I have a link to the Google Font Directory here in my Lesson 8 Resources so let’s just go ahead and open that up and take a look at it for a moment.
These are all the different fonts that are available for use in your website now because Thesis 1.8 embraces and uses these fonts. This Google Font Directory shows you all the different styles of fonts that they currently have in the directory and I assume it’s going to grow over time. It also shows you the different variants of those fonts.
Thesis Design Options: Fonts and Colors
Go ahead and close that again and we’ll come back over to here. Go ahead and select Arial font and then we’ll scroll down and look at the colors. The site background color and page background color are for the time being is going to stay white. We’ll keep our primary text color black and our primary link color this Thesis blue – I really like that color. Then we’re going to turn off Show interior layout borders.
Next we’ll take a look at the Content Area and we’re going to leave the font size at 14 points. We’re going to go ahead and skip the Nav Menu but we’re going to open up the Header and here’s where we’re going to make some changes.
In the Header we’re going to, rather than have Inherited from Body, select Arial Black for the font and instead of 36 points we’re going to select 40 points and instead of the black color we’re going to use a blue color that I’ve chosen for this. That blue color is 2B2B8F – it’s a pretty blue color. Then for the tagline we will keep Inherited from Header in terms of its style but we’re going to increase its size to 16 points and we’re going to give it our green color and that is #238A23.
Then our Headlines are going to pick up a new twist as well. Their style will be Inherited from the Body but we’re going to make them larger, we’re going to take them up to 26 points and instead of black we’re going to use a really pretty red, that is 9B0000 – it’s just a gorgeous color. Actually we’re going to use the same thing for the subheadings or Sub-headlines. You can see here’s a headline and here’s a sub-headline and that’s what that color looks like.
Then we’ll take a look at Bylines and Post Meta. We’ve turned off most of our bylines and post meta so you can skip that, you can skip the Code and the Multimedia Box. We will open up Sidebars. There we’re going to keep the 13 point black. Under the Sidebar Headings we’re going to keep the Inherited from Sidebars and we’re going to keep the color but we’re going to make the size quite a bit larger. We’re going to bring the size all the way up to 18 points.
This is the sidebar text and this is the sidebar heading. This actually isn’t the sidebar text in here. I think if we look down at the footer this text size takes its size from that sidebar style because these are each sidebars as well inside this footer.
Then we’re going to take a look at the Footer real quick and the Footer we’re just going to leave the same. It’s Inherited from the Body, it’s 12 points and it’s this 888… color.
Thesis Design Options: Teasers
The next thing we want to do is to take a look at the Teasers. There have been some significant changes in the way teaser displays work. So right now we do not want an edit post link and we don’t want a date because these things are really referring to our products but we will have link to full article, post excerpt and post title. Now you can drag and drop these things around if you wish. I’m going to keep them in the same location.
We could easily change the Link to Full Article here to something else rather than Read the full article, it could be a different thing if we wished and if we turn that off then that option goes away. Then if we look at our Teaser Fonts we have a choice now of fonts for the post title, the author name, the date and all the rest of this so we have quite a bit more control over the appearance of the teasers than we had in previous versions of Thesis.
Go ahead and save this. Let’s come back over and take a look at it. Here it is before we refresh it. Now refresh it and you can see that our colors have changed and the fonts over here have changed and even the text for our navigation bar has changed. You can see here the link colors have changed.
That wraps up Part 2 of Lesson 8, Configure Thesis Design Options: Fonts, Colors and More, Plus Teasers.