Build Your Own Business Website header image

How to Create a Feature Box with Graphics, Text and an AWeber Form in Thesis 2 – Part 3 – Style the Submit Button

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 added the AWeber Opt-in Form and a background image to the feature box in Thesis 2, we need to style our submit button.

Add Background Image for the Submit Button

Let’s inspect that element. This is input name = submit class = submit. So what I’m going to do is take this opt in and then for the input class = submit, I’m going to give it a background image.

It may actually be easier simply to write the code for this, right? And that’s probably what I would do is just write the code from scratch. We could look at adding an element, adding a form input for this and I guess that’s what we’ll do here.

We’re going to call this our opt in form submit and the reference will be opt in form submit. And the CSS selector will be #optin and then input.submit. So that’s input class equals submit, input.submit, control copy save.

Set the Options for the Background Image

Then we want to go back over to images and get the image. Go back to CSS and go to our submit. Options, input background, background image, background position here. I’m going to say center. Again, it’s not going to repeat. Its width is… I believe that button was 70 pixels wide.

And in fact, let’s see what that looks like. Okay, so we’ve got our little submit button sticking over there. I think I’m going to give it a height. And Thesis 2 doesn’t have any way for you to specify a height so we’re just going to come over here and grab this and write the CSS. Height: 70 px; hit save.

Let’s save that CSS. Before we get too far down the road, I’m going to take out that value = submit in here. Class equals submit, type equals image, value equals… it’s going to be blank now so we can just see the image. Save the template.

Okay, that didn’t do the job. Let’s take a look at this again. Submit class = submit type = image. Value equals… we’ll just say blank then instead. Let’s see if that works. Yeah, that worked.

And we’re going to want to say border none and then we also want to move that off to the left. Let’s see, what did I do here? So I’m looking for the submit button and that submit button is there. I think if I make AF class element… if I just do that as float left. Okay, yeah that’s it. Float it left.

Now everything is wrapped inside of that. And so we probably want to do class af-body and use that to position it.

0 Comments… add one
0 comments… add one

Leave a Comment