In part 2 of this series on Adding Widgets to the Content Area Using the BYOB Thesis Shortcode Content Widgets Plugin, we show how to add widgets to the content area using the plugin as well as how to add basic styling.
Add Widgets to the Content Area Using the BYOB Thesis Shortcode Content Widgets Plugin Part 2 – Basic Styling Concepts
Add Widgets to the Content Area Using the BYOB Thesis Shortcode Content Widgets Plugin Part 3 – Float a Widget Area in the Page
Add Widgets to the Content Area Using the BYOB Thesis Shortcode Content Widgets Plugin Part 4 – Styling the Widgets
Add Widgets to the Content Area Using the BYOB Thesis Shortcode Content Widgets Plugin Part 5 – Customize the Widget Headings
Now we don’t have to do… we don’t have to add any styling at all. If you want to use… continue to use the default styling that is in your sidebars. If we put a Pages widget over here as well… let’s go back over to widgets and let’s just grab pages again, put it there and refresh it. You can see in all these, they’re pretty much the same. Yes, it does have a slightly different styling but having said that you know, the text style is the same. It’s the same size, the heading sizes are the same, they’re the same style. So you don’t actually have to do any styling to these at all if you don’t want to. However, the bulk of the settings in here allow you to create styles. So once you have… so once you’ve placed your widget columns in there, you can specify widths. You can specify margins, heading style, text style, background style and then you can specify those for the columns as well. So the first set covers the block as a whole. You know, I think I’m going to show you what I mean by block as a whole while we’re at this.
So if we inspect the element, here is… that right there is a content block, right? That content block has 2 widget columns in it, widget column 1 and widget column 2 and that’s the content block. Now, we can specify padding and margins around that content block. We can specify background colors, background images. We can do anything we want with those and in fact, I’m going to do that actually. We’ll go ahead and put colored backgrounds say, behind each of these and let’s just go ahead and use that color or colors.
Okay so we’ll copy that color and we’ll come back over to our settings and what we’re going to do is… and their widget color background styles because we can this to apply to the columns as opposed to the overall background. So for the widget color background style, we’re going to say background color is this, that background color.
Now, we can also use background images in exactly the same way that we used the background images for the you know, full width framework areas. We can do exactly the same thing with background images for these widget areas. I’m just going to stick with colors for the moment. I we hit save to that, we’ll come back over here and refresh it. Now, we’ve got blue.
Now if we want… what we really want to do is we want to move the text away from the edges and we want to get some space in between and then we want these two blue colors to go you know, the full height. And so, the way we do that is by… first thing we want to say is specify a height for our widget column. So you would do that under widget block dimensions and we’re just going to give it a height of say, 250 pixels. Well, if we refresh that, I think… now you can see… well, let’s give it 300 pixels but you can see now that the blue color fills all the way to the bottom. Once we specify a fixed height then we can make sure that both of those things… that all of the widgets display at the same height. So let’s just say… let’s make it 350 just for grins.
Okay so then the next thing we want to do is add margin around these columns and so under widget column margins, what we really want is say a left margin. And if we’ve got left margin, let’s say we have 20 pixels and hit save. That should separate our pieces. So there we go. Now, they are separated from each other by 24 pixels.
Now, it’s not really absolutely obvious that this is going on here but what’s happened is 24 pixels have happened here as well and maybe you don’t want that. Maybe you want this to go back to its regular lineup and you just want the 24 pixels here. IN that case, what you would do is come down here to your widget column 1 settings, that’s your first setting and just put 0 in there. You’re going to adjust the left margin by making it 0. What we did here was we made the typical left margin 24 pixels and the left margin of column 1, we made 0 pixels. So now, if we hit save to this, come over and refresh that, now these things are equal with and this lines back… it goes back to lining up with the text.
Now the next thing we want to do is pull this stuff away from the edges and so we’ll come down to padding. That’s where you address this question, under padding. And so, under our top padding, let’s give that 20 pixels and under bottom padding… well, in fact let’s give it 20 pixels all the way around. So we’ve got a 20-pixel padding all the way around that thing. Come back over and take a look at it.
Okay so maybe we don’t want a 20-pixel top padding but you can see what it does is it pulls everything else away. So we can come back over here and just dump that top padding, just delete that, hit save. Now, you may notice that this is a bunch of trial and error and that’s what it is. I mean, very much like using CSS or editing CSS. There’s plenty of trial and error in this. And so you’ll end up going back and forth and back and forth, trying to you know, decide which way you like it. But this is the process, right? The process is finding those… you know, making… experimenting with settings to look the way you want.
Now there’s one other thing I want to do here before I go on to one last question here and that is I want to show you what it looks like when you use a single shortcode. I mean, a single widget block because what you can do… well, in fact, let’s just do that. Let’s edit this page. I think that’s probably this page right here, isn’t it? Okay, we’ve got a widget block 1 here. I’m going to come up to the top of this and put widget block 2 right there, the very top and hit update. This is at custom template. I don’t want custom template. I want no sidebars template for this.
Okay so let’s take a look at what looks like now. Okay so now this has… now, we probably do want to do some bottom margin for this but we’re going to ignore that part for right now.