Build Your Own Business Website header image

How to Convert a Static HTML Site to Thesis Part 4 – Configure the Background Images

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 configure background images by installing the Full Width Backgrounds Plugin, Thesis Simple Nav Menu Plugin and Footer Widgets Plugin. We assign a location for the Nav Menu and customize the settings in the Full Width Backgrounds plugin. We also upload menus and pages and customize their styles.

Video Transcript

The next thing to do is to install some of my plugins and we’re going to install the Full Width Backgrounds plugin, the Thesis Simple Nav Menu plugin and the Footer Widgets plugin. I think that’ll be it for the night and then we’ll continue this another time. Looks like Sean might be back so we’ll take on some questions, we’ll go back to some questions here.

So plugins, add new, upload, choose and off sites. The next thing that we’ll install is the Simple Nav Menu plugin. I’m not seeing it, BYOB Thesis Simple Nav Menu. I just left that off, didn’t I?

The next thing to do here is to look at the plugins. Let’s start off with the Nav Menu plugin. Actually, let’s go fix that menu first, main menu, save. Somehow that got undone then go to the Simple Nav Menu and Nav Menu location right now is going to go below the header so we’ll save that. Then full width backgrounds, we are going to customize the body or customizing everything, actually.

The body background image is going to be that image so what we have to do is upload it so upload those images. We’re going to upload menu and page and then page, copy that over here, background image. It’s going to repeat vertically and it’s going to go to the top center. For the header area, the background is going to be transparent and the headerarea.page, the background, well actually, it could be transparent too because this is just going to see what’s behind it.

The content area, we’re going to say the content area background needs to be transparent but we’re going to leave the content.page area alone. We’re going to let that be white. The footer area, that should be transparent and we’re going to make the footerarea.page black. Okay, that should be all we need to do with that. Let’s see what it looks like.

Bingo! Okay well, I think we’re just going to call that good at this point. Tomorrow morning, I’ll probably pick it back up again and what we’ll do is style the menu and we’ll add some footer stuff but we need to push this down. He’s got a big block of stuff up there. What has he got up there? He says 5%. I don’t have any idea what that is. Let’s see if I can get a better guess. Okay well, we’re going to give it like 40 pixels or something like that. Actually, we’re going to do that right now.

Under header area, I think I’m going to give it a top border of… well, I don’t allow myself that much flexibility. Well, I’ll have to play around with this a little bit but we’ll come back to that. We’ll work a little bit tomorrow and we’ll work on it next week and by that time, we should be finished with that actually. You can see, I mean, this stuff really comes together very quickly once you get started at it.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 comments… add one

Leave a Comment