Build Your Own Business Website header image

How to Create a Feature Box with Graphics, Text and an Aweber Form in Thesis 2 – Part 4 – Arrange the Form Fields

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.

Video Transcript

We’re going to continue to refine the AWeber Opt-in form inside our feature box in this Thesis 2 template.

We want to float this thing left. That was af-element. And let’s just copy that. Then we’ll just come back over to the CSS and down in our opt in background, we’re going to go to additional CSS and put this class in and say float left.

And then under our options, we will add padding… and let’s add 300 pixels. This is just a guess, actually. And left padding of 300 pixels and let’s just see what happens.

I guess I need to clear my div so we should come back over to our HTML then and make sure that it’s got a closing div. Let’s just try that one more time here.

We’re not using this class anymore. So what we really need to do is stay style = clear both. We don’t have an af clear anymore. Style equals clear both, that should clear the div nicely and it rightly understands there may be a few places that we want to clear this out so let’s just do that in all those places and see what it looks like.

Okay, getting closer, getting way closer. So next, we need to move it down a little bit more and then move it to the left. Really, it looks like we got to move it to the left another 200 pixels. So come back over to the CSS, opt in background, give ourselves some more right hand padding. So that’s really 500 pixels. And top padding… let’s just do it that way and see what happens.

That’s just about where we want it. Now we just need to move it down. And what we really want to do is to move these down…another 40 pixels. And again, that’s just adding additional padding. So we go to our opt in background and down to our padding and let’s say 345. Oh, wrong one.

So that should push this down to where we want it. Maybe we want to move it a little bit more to the right. I want to get rid of that and we want to move this up just a little bit. Now, I’m going to use absolute and relative positioning to move this into place a little bit more.

I’m going to move the af element container which is inside of af body. I’m going to give af body a position of relative and then I’m going to make button container a position of absolute. Yeah, okay af body position relative. Af body position: relative; and then that was called button element again. And then that is actually button container position absolute right: 0 top: 10 px. Let’s see how that works. It did not work. Okay let’s see why that did not work.

Okay, button container position absolute… right was 0. Let’s turn off right. Let’s turn off both of those things. I turned off both of those things. It should be showing up… where? It should be showing up relative to af body. Okay so right is 0, top is 0. Let’s say top is -10. Okay so right is 40 and top is -10. And instead of button container, I guess what we’re really saying is we need to do this input submit or give it a height and width of 70 px. No, that’s not doing it. For whatever reason, that’s just distorting my this thing here.

Somebody’s mentioning that I may have a CSS error in this. Could be, let’s take a look at it. Yeah, I did have a CSS error. That’s probably what it is. Okay but right 40 like that… 40 px. Instead of doing it this way, instead of button container, let’s take this out and this should put our thing back in place.

And then we’re going to move the submit button instead of its container. Opt in submit… actually, I’m just going to paste that here and just say position absolute right 40 and delete that. So input type… opt in input.submit… see how it looks now.

Okay so 40 was too far and it’s a -10 not 10, okay. -10 and then what else do we want to say? Border none. Border… and instead of none, I’m going to say 0 px. Top -10, right 20.

I’ve got that pretty much where I want it except that I have a border around it for some reason or another and I don’t know why. It’s definitely adding a border there for some reason or another unless that border… I don’t think that border is part of my image. I just don’t see a border being specified there and I don’t believe that border’s in my image. Yeah, it’s not there.

Okay, there’s a little problem I have to solve and I’m going to just solve it offline. I’m not really sure why the border is sitting there but I am going to figure that one out. But except for that irritating aspect of it, we do have an opt in with this styled sitting now against the background image like this.

I’m going to check in with Philip again.

Philip: That’s great.

Rick: So does that look like I answered your question?

Philip: It certainly does. I think you blew my mind about halfway through there.

Rick: Well, is there something I can do to un blow it, to clarify it?

Philip: It’s just my knowledge of HTML and CSS, I think, isn’t very great at the moment. I think the best option for me then is to get somebody to code it for me.

Rick: Well, okay. Thesis doesn’t have any way for you to specify absolute and relative positioning. So the only way to deal with that then is to write your own code. Obviously, maneuvering that stuff around with padding and margin. It’s fairly straightforward, I think, because we were just… or not margin really. We just had a top padding which pushed this down and left padding which pushed it over.

But it is true that highly customizing a form like this does require you to end up learning some HTML that is form HTML and CSS because…

Philip: Which is something I needed to do but it’s not going to happen in the short term, is it?

Rick: Well, you can always post questions about a specific example on the forum and I can take a look at it and suggest stuff to you. That’s what everybody else does.

Philip: It’s been great. Thanks very much for that.

Rick: Okay, you’re welcome. Anything else?

Philip: One other question, this guy that I’m doing it for has got an existing site so I’m developing on a temporary site. Obviously, I want to transfer the skin from the temporary site to his live site. Is it possible to use the Manager function within Thesis 2, export the skin and then import the skin?

Rick: Yes, that’s what it’s for.

Philip: Right.

Rick: And the easiest way to do it would be to install Agility on his live site, export the skin data from the test site and import it to the live site. You’re also going to have to upload all of the images but…

Philip: Yes, it will save redoing all the tweaks and things I’ve done on the test site… yeah.

Rick: Yeah and when you do that export, it’s going to export all of the code. Whatever code you may have written, that’s going to export.

Philip: Great. That should save me time so that’s great. Thank you very much indeed for that very detailed answer there and I should press on.

Rick: Okay, good luck.

Philip: Thank you.

1 Comment… add one
1 comment… add one
  • Michael Johnson May 24, 2013, 6:54 am

    How will the padding be effected on a responsive screen? will this optin box relative to the submit button look different on an iphone/ipad vs larger monitor?

Leave a Comment