Build Your Own Business Website header image

How to Convert a Flash Site to WordPress & Thesis 2.1 – Part 4 – Setup Classic Responsive Design Options

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.

Now that we have WordPress setup on our development subdomain we are going to setup Thesis 2 Classic Responsive Design Options. Let’s go over to Skin Design to begin.

Set Font Options

Notice that this font size is actually quite small; I’m going to make it a little bit larger for the purpose of this. What we’re going to do is say our font size is 15 and instead of Georgia, we’re going to come down here and say Helvetica Neue which is about what that other font style is. Say okay to that.

Set Layout and Dimensions

Then under Layout & Dimensions we’re going to have content on the right; the width on the right is 650, the width on the left is 250. Say okay to that and save our design options and now we should have our whole padding issue here taken cared of and we do.

Let’s take a look at where we are right now with padding. Go to Home for a second and it’s got quite a large padding on that side so if I measure that padding, it’s about 57 pixels of padding, that’s a good amount of padding there. If we refresh this and check out the padding I have here, I currently 25 pixels of padding on the left. What I really want is to use 2 times on the left hand side there so the image size instead of 650, it’s going to be 650 minus 75.

Set Featured Image Size

For the featured image image size, if you’re going to have an image that’s the same width as the content there, that featured image image size would be 650 minus 75 so 575. I always try to make our main image size the full image size, the large image size. I try to make it so that it will fit inside the body of the content.

Let’s come down here to Settings and Media so it fits in the body of the content. Our large size was 575, our medium size let’s see 575 times .5 which is 287 so I’m just going to make it 288 and that way it’s half the regular content size. Let’s save those changes.

Set Colors

We’ve got WordPress all set up and we’ve got the main structural setup here so now we’ll move on to the rest of the Design Options. So the rest of Design Options start off with our site background color which was 27 wasn’t it? Yes, that was it.

The interior borders and highlights were actually white and the primary text were actually white and the primary text was white. For the moment I’m going to leave the link text as that same grey and we’ll let interior background stay this color here. Let’s save those design options and see what we end up with.

That primary text did not turn into white. Well that’s odd, why would that be the case? Oh, I’ve got an extra “f” in there that’s why. Here it is, okay. I think that grey color works fine for the links.

Set Headlines Sizes

Let’s take a look at one of the pages. Come back over here and look at Reservations. It looks like our Reservations are bold and how tall is that, I wonder? About 32 pixels maybe. So we’ll start with our headlines and we’re not going to change the font, we’ll make the font size 32, we’ll leave the color alone, I guess we’re going to have make them bold separately.

Subheadlines, we’ll make them 24 and then I don’t think we have to do anything to the nav menu at all here, I think we’re fine right now. Well, we want them bold but we can’t do anything about that without Custom CSS so we’ll save those design options.

Let’s refresh it and see how it looks. Let’s go to reservations and that looks about right. We’ll fine tune it here as we keep working on it. We’ll go over to the Skin Content options next.

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