Build Your Own Business Website header image

Create a WordPress Site from a PSD File Using Thesis – Part 4 – Set Up Thesis Design Option

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

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

In this session we use Thesis Design Options to make basic changes to the site such as site layout, fonts and colors based on the PSD File design.

Video Transcript

So the next thing we’re going to do then is resume our conversation from last week about how to take a PSD file and you know, for lack of a better term, convert it into a WordPress website in Thesis. And this is actually where we got last week. We got our background images in so we got the big watermark image in and we got the header image in and we got the content image in. And so we have that as a basis and in fact, we are going to open up… open this up in Photoshop too.

So we have this PSD that we’re working off of and again, those of you who are well-versed in Photoshop, if you’ve seen me doing something that could be easier, more easily done in another way, please pop up and say so.

But so anyway, this is the PSD file that we’re working off of and so far, we’ve got that watermark image, that header image and the content image in the site. And so the next thing we’re going to do is you know, take care of some of our basic Thesis setup options. And mostly, it’s going to be… it’s going to involve you know, changing font colors and setting up header settings and that kind of stuff. But we’re going to just go ahead and get started with that.

And actually, I am going to show you… this is the finished product. I finished it this weekend for the client. And so this is what the finished product looks like. Again, it’s WordPress and Thesis and it’s is the actual site. And so you know, you’re free to go take a look at what I did over there too because this is what we’re going to end up finishing with when we’re done here with this.

So this is where we are on this site so far and what we’re going to do first is going to rearrange my other screen here for just a second. Okay, we’re going to start off with site layout. So under Thesis Site Options, Design Options… in site layout, this is a 2-column layout as you saw and really, both columns are essentially the same width. You know, you almost might think about this as sort of 2 content columns but what we’re doing here is we’re making this the content and this is going to be a sidebar with a text widget in it. So when we set this up, we’re going to set up 2 columns. They’re roughly the same width. We’re going to take a stab at the width by calling them 460 pixels, which, remember that we’re working on 950 pixels of width here for the space. So I’m estimating that 920 pixels is what it’ll take by the time we get padding and that kind of stuff in there.

So if we come back over here and just say 460 and 460… and then in our column order, we’re going to make the reverse column order so our sidebar’s in the left and our content is on the right. We’ve already set that Full Width Framework as our HTML framework but we’re going to make our padding 0 so no outer page padding. And then while we’re at it, we’re going to work on some display options and in particular, looking at the header option. We’re not going to display the site name in the header but we are going to show the site tagline in the header. This is going to be… is our site tagline. So we’re going to… this is going to become a piece of the header. The site name isn’t going to go anywhere so we’re going to turn that off. But we will be using the tagline here in the header by the time we’re done.

So anyway, we’re not going to show the site name and header but we are going to show the tagline in the header. And then under Comments, we are going to disable comments on all pages and then we’re not going to show a message. And then under Administration, we’re going to get rid of the edit post links and show admin link and footer and we can save that. And then under Fonts, Colors, and More, we’re going to make the font Arial and the one thing we’re changing to this is the primary text color. And the primary text color on the site is this dark gray so if we… let’s see, so if we double click that and let’s see, so there’s our dark gray color which is 6D6E71 so I’m just going to copy that and then come back in and put it inside of the primary text color. We’re actually going to use it a whole bunch of times.

And then our content area, we’re going to make the font larger, take it up to 16 pixels or 16 points. And then our header is going to get that dark gray color. This part of the header is irrelevant. We do want to get… we want to make sure that it’s Arial. This is actually not able to be large enough through Thesis settings, this tagline so we’re going to be really setting this tagline up in Thesis, with the custom CSS. So we don’t really have to worry about the font size there.

And then let’s see, under sidebars, again, we want to use this gray color. And we’re going to take this to… well actually, we’ll take it up to 15 points but it’s actually not going to be big enough because what we really want is our sidebar text to be exactly the same size as our content text. And obviously, unfortunately, that’s not available to us here. Copy that color again and this is the headings. Same thing is true actually, I don’t think our heading is going to be large enough. If we come up to our other headings, let’s see… headlines, actually. This is the other thing we want to do. Our headlines need to be this color also and we don’t have any subheadlines at the moment but we can still make them that size. See, we’ve got a 22 point or 22 pixel size of headline. We want it Arial. Well, as you can tell from the sidebar here you know, we want this and this to be the same size. So we’re not actually going to be able to get the right size out of Thesis Design Options so we’re going to be using something else for that.

We can skip the teasers. We can skip the footer. Hit save. And then under our Multimedia Box, we’re just not going to show it. Do not show the multimedia box. And I believe that is it because the one other thing that we need to do is we need to create a homepage and make it our frontpage because I don’t think we did that last week. So if we go to all pages… no, we didn’t.

So we’re going to add a page and if we look at the PSD file using Azymuth Consulting as the… essentially, the title of the page… so that’s we’re going to do as well. And make it easier on us just by making it all caps so Azymuth Consulting. Okay, there’s our page and we’re going to go ahead and hit publish. And then under Settings and Reading, we’re going to say our front page display is a static page, Azymuth Consulting. Our post page can be the sample page but we don’t have… this is an under construction site essentially so we’re not going to really have anything on the sample page. And if we hit save changes, we should be quite a bit further down the line here with this.

Okay, I guess the one thing we need to do is get rid of these little lines. That’s the one thing I forgot about. So back to Thesis and Design Options and then under content area… no, body and content area. Just get rid of show interior layout and borders and hit save and refresh. And now we’re essentially sitting at our base level here.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one

Leave a Comment