Build Your Own Business Website header image

Add Widgets to the Content Area Using the BYOB Thesis Shortcode Content Widgets Plugin Part 4 – Styling the Widgets

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 part 4 of this series on Adding Widgets to the Content Area Using the BYOB Thesis Shortcode Content Widgets Plugin, we show another feature of the plugin which allows you to create widgets and place them inside the content using the shortcode and then we also show how to style the widgets.

Video Transcript

And so the next thing I want to do though is I want to show you another feature of a plugin I introduced this morning which is the sidebar content… no, what is the name of that plugin? It is the BYOB Thesis… oh I forgot to fix that… Shortcode Content Widgets Plugin. And what this does is it allows you to create widgets and place them inside the content using a shortcode. And I’m going to create a set of boxes that sit side by side with images of them here in this site using that and I’ll show you what that looks like.

So let’s see, let’s go to… let’s install that plugin first. So Add New, upload and it is the… I don’t even have it here yet. I have it in the repository though so under extended files, full width backgrounds, Shortcode Content Widgets, there we go. In fact, this is already up to version 1.2. When I made the presentation this morning, it was a 1.0 and I thought I fixed everything and had it all uploaded at 1.1. And then just before this evening, I find another problem. And so I worked until I can get it fixed and it’s now at 1.2. But you don’t have to download a new version of it yourself because this one uses the system of checking for upgrades and then you can just use the automatic upgrade system to add it.

So then we go Shortcode Content Widgets and we’re going to create a single block of widgets. We are just going to do one right now and it’s going to have 3 widgets in it. No, a single block, I’m sorry. A single block of widgets but that block is going to have 3 columns of widgets in it. So this little illustration of it, you’ll have 3 widget columns in there side by side and the shortcode that we’ll use to insert it is the byob content block = 1. I’m just going to copy that and I’m going to open up a page and let’s see, let’s just go to the homepage. Is that right? What is this? Yeah, this is the homepage but that’s not going to show up there. You know, it’s not. So we’ll put it in the Video Example page instead and we’re just going to put it right here. And I want to show this to you using the no sidebars template so we’ll do that and we’ll view the page. You can see right now, what’s happened is this has placed a widget you know, 3 widgets side by side, evenly spaced across the bottom of the page here right where I inserted the shortcode. If I put the shortcode at the top, it would have done it at the top but I put it in the bottom.

So then the next thing to do is to… let’s see, I want some more Ipsum text. Okay and I want… let’s see, let’s generate it and I’m just going to grab that much of it, paste it in the Notepad so it doesn’t… loses all its extra code, copy it there. Let’s see, let’s go to our Widgets then. And so now, we have widget block 1, widget column 1, widget column 2 and widget column 3. And I’m going to drag a text widget towards the column 1, paste that Lorem Ipsum text and then what we’re going to say is… let’s see, Column 1 Heading. Okay and we’ll hit save. And then here, we’re going to do the same thing, Column 2 Heading, save and then we’ll do it again in column 3, Column 3 Heading then hit save.

Now, if we come back over to our page and refresh it, you’re going to see those 3 widget areas right here, column 1, column 2, column 3 sitting there like this. And now, what we’re going to do is do some styling of it. So the first thing I want to do is I want to add a little bit of color to the background of each one of these and I want them… I want to see the white page background behind the color. So in order to do that, we’re going to come over to the widget block settings here and in terms of… what we’re going to do is, first, we’re going to set the column background style. Not the block background style, we’ll leave the block background style alone and we’ll just do the column background style. And the column background style… let’s just do a very light grey, lighter grey. Okay and then in terms of padding and margins, the columns, I want to give margins between each of the columns, let’s say, a 24-pixel margin. And so… but we’re just going to do it on the left-hand side so that they’re evenly spaced. And then once we do that, we want to put padding in. So I’m going to put in 10 pixels of padding… well actually, I just want you to see what it looks like if we don’t put padding in first. So we hit save, come over and refresh the page.

Okay and so here are our 24 pixels of margin. Now, I don’t want 24 pixels of margin over here so I have a cool, little system for solving that. And then I want this stuff to stand off of the edges so I need to put padding in, in order to facilitate that.

So we’re going to come back over to this and first, let’s get rid of this margin, this extra 24 pixels of margin here. And that’ll make each of these columns a little wider and it’ll make the margin on this side the same as the margin on this side, okay? So let’s do that and the way we do that is simply by telling widget block… on the widget block 1, widget column 1… we’re just going to adjust this left margin by giving it pixels. And if we give it 0 pixels then that happens. And now, we have equal spacing on either side plus a nice, little split in the middle.

And the next thing is to add padding so we’re going to add… actually, I think what we’ll do is we’re going to add 20 pixels of padding everywhere. Okay and hit save, refresh that. Okay so now we have 20 pixels of padding. That’s interesting. Why would one of them… oh because this is a little bit wider, isn’t it? Okay well there’ll be a 1.3 where this gets adjusted so that each of these are exactly the same width. I thought I had it set so that this would be the same width but clearly, I do not. Yeah but in order for this to really work as nicely as it can, it needs to be that way. So look for version 1.3 in the coming day or so because I’m doing this actually for tomorrow night’s presentation. So this has got to be working perfectly by tomorrow night.

Now, what I’m going to do is I’m going to work on the heading color here and I also want to specify a height so that this is always the same height even if it is a little off on the width. And so if we specify a dimension here where we say our block height is say, 300 pixels. Let’s see how that shakes out. If we specify an overall height of that block, it will force all of these to be the same size except 300 wasn’t the right number. Obviously, 400 was the right number. Yeah okay, let’s make it 4 and a quarter… 430, one last time. The one thing I’ve learned about my plugins is that there’s a lot of trial and error, right? You adjust something, think it might work, if it doesn’t look right, go back and adjust it again. That’s pretty much how you have to plan on using these plugins because the main thing these plugins do is write CSS for you.

And so…

0 Comments… add one
0 comments… add one