Build Your Own Business Website header image

How to Convert a Static HTML Site to Thesis Part 3 – Set up Thesis 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.

In this session we show how to set up Thesis. We use Thesis Design Options to customize the column layout, column order, HTML framework and add the header image.

Video Transcript

Now we’re going to begin setting up Thesis based on… let’s take a look at one of his pages. He goes white all the way across. We definitely want to use the Full Width Framework here because we’re going to have a black footer and a black header but we’re going to have a white content. We just need to know how big this is. Let’s see, inspect this element. How wide is this thing? Oh okay, that is 800 pixels wide. Inspect the element, see, 800 pixels wide. So that’s what we’re shooting for.

And while we’re at it, we may as well download these images. So let’s see, images title bar, that’s it and open image in a new tab. Can I now save that? I’m going to save this in byobwebsite, tutorial sites and I guess we will just create a new folder called biltmore. So much for not having a local copy. I’ll go ahead and create another folder called images. Okay so we’re going to save titlebar.jpg there.

We may as well pick up this background image here and that background image is images page background. Open that link in a new tab. So there’s the image that’s being used and we will save that image as and the same thing. This will be pagebackground.jpg.

We need to get the background image for this menu. The background image for that menu is menu bar so I’m going to go to open link in new tab, okay. Save that image and for the time being, I think that’s all that we’re going to do in terms of images right now. I mean, there’s going to be other stuff for us to grab too but we’re just going to start off with this.

So back to our Thesis Site Options, the next thing we will do is set some Design Options. Actually, he doesn’t really have a multi-column. Oh, I suppose he does. I suppose it probably is a 2-column layout, isn’t it? Well, I don’t know. For the time being, I think we’re going to say it’s a 2-column layout. It isn’t really but he can just muck about with it.

We’re going to say it’s 2 columns and we’re just going to say 240 and 600. Column order is that and HTML framework, we’ll use Full Width Framework and this is actually no page padding. That’s how you get this thing all the way to the edge, right? So no page padding. I think we’ll just go ahead and save this. Let’s see how we’re doing.

Let’s see, the header image says optimal is 897 pixels. Really, what I have to do is reduce my column by 97 pixels in order to make that 800 work perfectly. We’ll go back to Design Options and columns and we’ll make this 200 and then we’ll make this… let’s see, that was… I lost 40 so now I have to lose 57 so 543. Actually, I should just make sure that I’ve got the right size font. How big is this font? 14 pixels, okay so that’s the right size font.

We’ll go ahead and save that, come back and take a look at our header image to make sure we’ve got the right width. There it is, 800 pixels. Are we doing anything else besides the header image? No, we’re not. Let’s go ahead and add that header image, title bar. Okay, so we can actually go take a look at it right now. Okay, getting close.

Let’s take care of a couple of other design options. We’ll do anything with the nav menu at the moment. Oh yes, okay comments. We’re going to disable comments on all pages and we don’t want a comment there. Let’s see what admin looks like. Let’s get rid of those admin links and we’re going to get rid of the multimedia box. Okay and our body background color, the page background is actually going to be black. I guess maybe we better test that, just to make sure that really is black. And that color is 0, yeah okay.

So we’ll come back over here, site background. Okay and we’ll hit save.

2 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
2 comments… add one
  • Pete Bennett July 29, 2013, 4:25 am

    What is the toolbar which you use to point to the colours and check which ones they are please?

    • Rick Anderson July 29, 2013, 9:13 am

      Pete, I use Colorzilla – which is a plugin/addon for both Firefox and Chrome. There may be an equivalent for Safari as well.

Leave a Comment