Build Your Own Business Website header image

How to Create a Feature Box with Graphics, Text and an AWeber Form in Thesis 2 – Part 2 – Add the Background Image to the Form

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’ve created the AWeber opt-in form and added it to our Thesis 2 templates, we need to add the styles to this form.

Add Single Element Style to the CSS for the Background

We gave this an id of opt in so we’re going to copy that id. And we’re going to come over to CSS and we are going to create a single element style. And it’s going to be opt in background. The selector is going to be #optin. The reference is going to be opt in background.

Now we’ll just hit save and then come down here and add that in. Opt in background. Save the CSS.

Upload Background Image

Let’s go over to the images. And I need to upload my images. So I’m going to choose the file and here is my opt in base. We’re going to add that image. While I’m adding it, I may as well get my submit button. So I’ll choose that file, grab my get it button, add that image.

Add Set Options for the Background Image

Now, I’m going to grab this background. I’m going to come back over here to CSS and down to my opt in background and place my background image. I’m going to no repeat and in terms of its location, I’ll say center top and let’s hit save.

Review and Edit Code

Now our image spans the whole thing and we’ve got these pieces inside. So now what I want to do is locate these. And in fact, let’s go look at the HTML and make sure that I don’t have something that makes these things more difficult to sit side by side.

The input type is hidden, af element text wrap, awf field. So this is clearing in between the two which will prevent me from making them sit side by side. I’m going to get rid of the clear and in fact, af text wrap to that div… af element to this div. I’m going to delete the closing of that af element and the opening of this af element so that they’re both inside the same div.

I’ve got a div class text wrap. Actually, I’m going to get rid of the div class text wrap too. All I really want here is two input fields. And so if I get rid of that one and I get rid of the clear, I should be okay there.

Let’s just see what happens now. It could be that these things sit side by side now. Well, no they don’t. But that’s okay. At least I’ve got the code out of the way that would prevent it from sitting side by side.

In fact, I think if I just take a look at my af element and the inputs…it looks like I have one extra text wrap in there and I’ve got an extra af clear. I’m going to get rid of that one too. We want the HTML to be as clean as possible and to have to work as little as possible with moving stuff around. So we’re going to get rid of that text wrap there.

Review the Background Image and Form Fields on the Site

And now what I should have is two input fields. Yeah, two input fields side by side. That’s it. There we go. Once I got rid of that, these things automatically sat side by side.

0 Comments… add one
0 comments… add one

Leave a Comment