Build Your Own Business Website header image

How to Create and Style HTML Boxes in Genesis

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

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 demonstrate how to create and style HTML boxes in Genesis using the BYOB Genesis Child Theme Editor plugin. We show where to write CSS and demonstrate how to style the child theme’s appearance and make it responsive.

Video Transcript

Member: I’ll get right to my question which is in the forums I was asking about responsive design on my website,

Rick: Yup.

Member: not displaying properly on the windows phone and you said that I should wrap each product in a div and then style the div so that it will be responsive so if you can show me that I would be thrilled.

Rick: Absolutely, would you give me the url of your site first?

Member: Sure, it’s westminstertech.com/products is the page in question.

Rick: Okay, and what I’m going to do is I’m going to steal  4 of these from you and so let’s see…

Member: So what I have right now and this might be helpful to others watching while you’re highlighting I have a table with a graphic set in a div inside it. Which to my novice manner of coding I thought was the way to go and it’s clearly your expertise is going to show me that there’s another way and an excellent way.

Rick: Okay so let’s see [Learn more] okay that’s place that which we distinguish between them.

Member: Right.

Rick: Okay, and then the other thing that I wanted to do is just download this images. Save image as okay 6-dot, save image as ablenet, save image as, and then save image as okay. So then, what we’ll do is come over to let’s see; skin editor, I’m just going to create this boxes here real quick. Although for some reason are there my…okay, let’s say a new page then. We’ll call it Products…

Member: Now, this is going to be ah I’m in Genesis… does this going to affect what we are doing here correct?

Rick: Oh, let’s do it in Genesis then, I’m sorry let’s do it in Genesis.

Member: Okay.

Rick: And so to do that in Genesis sbywh-final-agency.byobgenesis.com. Okay and I’ve got my let’s see I think I’ve got a update for couple of my Genesis things here. Let’s just check oh no I guess not. I think I’m up to date on that. Oh, actually I don’t even have that installed do I. I need to add my child theme. Are you using my editor plugin?

Member: No, I’m not. I’m not familiar with it but I will be after this.

Rick: Okay. You do need a genesis child theme editor. You can get this off the website under member benefits and then plugins for genesis. And if you look at my introduction to html for genesis users I demonstrate how to use the plugin. And actually you know I may as well just go right now the latest version of WordPress. Okay, and then let’s just make sure we are using the latest version of Genesis too.

Let’s see it says I’ve got some updates and Themes yeah let’s just update all of the themes. So now I am working with the latest version of Genesis and we’ll come over here to pages, add new. I don’t know how that happens but add new and let’s say Products. And I’m going to start by simply copying all these text and placing it in there. And then if we look at yours you’ve got an image immediately before each of those.

Member: Right.

Rick: So then we’ll go ahead and add media, upload files or select files and I’m going to go ahead and no downloads. No, no actually I want to BYOB images is that right? No, it’s not right. This is it here, okay. So we’ve got and I’m just going to get them all the same time. Brainchild open, okay and this is the first one we want. No, this one; alignment to the left, we’re going to say link to none at the moment but you’re linking off to the product right?

Member: That’s correct. I’m good with that.

Rick: Okay, so we just insert that image. Again the same thing, add media ah none insert the image. Again, and I say none insert it to the page and then we’ll add that media and brainchild. So now we’ve inserted our content and so the next thing to do then now we’ve got this we’re going to wrap these things in a div. So div class equals and then I’m just going to call it product. Okay, so and then slash div. If you don’t know what I am doing here again I think I give a decent introduction to this concept in the Introduction to HTML for Genesis Users. So, you might just want to take a look at that seminar any way.

Member: Okay.

Rick: And then close out each one of these things, okay. So now we’ve got each one of these things wrapped in a div that has a class so now we can add some custom css to it.

Member: Okay.

Rick: We’ll start off by looking at the page as soon as this silly thing saves. Okay, and then we’ll come over here to my child theme editor plugin and we’re going to write some css for the products; for that divs. So we’ll say .products and then width: 50%;, we want to give it a box-sizing: border-box; so that we can add padding and margin without it breaking that width. And for the time being we have to add the mozilla specific code for that too. So, -moz-box-sizing: border-box; , and then well say padding: 10px;, wemay as well say margin: 10px;, we’re going to give it a float: left; and we’re going to do some of these but we just want to see what this looks right now when we save our custom css.

Member: Now, that’s not changing the css of the child theme that’s creating its own css file?

Rick: It is creating its own css file however you can come over to here like this,

Member: Uhuh.

Rick: And add it to the bottom of the child theme style css?

Member: Is that what we want to do?

Rick: That’s what I would do as soon as you’re done.

Member: Okay, once you’re done.

Rick: You can also choose to just put it in the head of the document. If you prefer but, the thing about putting it in child theme css is that when you upgrade your child theme obviously that’s going to go away.

Member: Right, that’s what I have for my next question.

Rick: However, this never goes away right. This is still going to be saved so any time you saved your custom css again it will be re-written to the child theme style css file.

Member: So, anytime I update I just come back in here and re-add it to the child themes style.css and I’m good again.

Rick: Or just save. You know if the thing already says child theme style.css and save it, I’ll show you what it looks like actually in just a minute but we just saved it to the child theme css if we refresh this now. That’s product, let’s go to the custom file for just a second. And try that again…

Member: Oh, ah products in the html…

Rick: Yeah, there it is that’s the problem. Okay, so we have them aligning to the left.

Member: Uhuh.

Rick: So, what’s happening here is there’s not enough room yet then. This should be box-sizing should be firing properly unless I’ve got that wrong. w3schools.com, CSS3 and okay just search for box-sizing. Box-sizing property and that should be, oh it doesn’t include the margin. That’s what it doesn’t include. I’m sorry my mistake on that. It includes the padding but not the margin so if we say 45% here and then let’s go ahead and add it to the child theme style.css instead. And refresh that, no come on. Well, we’ll save it here for the moment then. Okay, so now they’re stacking side by side. Actually we want to edit this page so that we don’t have a sidebar here real quick. Because this is the layout that we want, view the page okay now obviously you can put a border around it and stuff like that right?

Member: Sure.

Rick: So, you could and say border: solid 1px #000000; and now this is not going to be responsive in a way the you want it to be yet, because you have to add one more thing to it. Oh, first you want to make them all the same height.

Member: Right.

Rick: So, if we look at this one here this is our biggest 206px. So let’s make it min-height: 210px;. We’re not going to say height we’re going to say min-height: 206px;, again save that. Okay, so now they’re all the same height and then I think now here’s what happens though in terms of responsiveness. They squeeze down right? And you don’t really want them to squeeze down that much so you’re going to give them a minimum width.

Member: Okay.

Rick: And right now these things are 405px, I’d make their minimum width 300px. So, you’d say min-width: 300px

Member: Okay.

Rick: Refresh it again and now when it gets to less than 300px it drops down. Okay, and so; so without having actually to mess with the media queries you can get the thing to stay at a reasonable width. And you probably going to play with that minimum width but that’s…

Member: Okay.

Rick: That’s the easiest way to handle the responsiveness. Now, you can also jump in to the child theme’s media queries and add some custom media queries to that as well but;

Member: Right.

Rick: this code right here you know should get you 95% of the way there.

Member: Sure. And that’s using your child theme editor.

Rick: Yeah now, you could just put this code in style.css. I don’t think that’s a good idea…

Member: No, I try not to mess with the CSS Files.

Rick: Right.

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