How to Add Tiled Background Images to Full Width Framework Part 1
The first thing I want to show you is this site, subtlepatterns.com. I’m going to put that in the chat window also so that all you guys can grab it. Subtlepatterns.com and this has a whole bunch of really cool, repeating background images. And so I’m going to use the plugin that I created, the background… BYOB Thesis Background… Full Width Backgrounds plugin and use… show you how to use some of these… one of these patterns as a background image.
And so, I’m just going to try and pick up a pattern that I think looks cool. You know, I love this pattern here. I have absolutely no use for it but all you have to do is download the thing and then let’s go over to this site. Let’s see, laurraine.byobtutorial.com.
Okay here we go. So, I might as well log in here. I’m going to add the Background Images plugin. Let’s see, Full Width Backgrounds Plugin. That’s what it is. Okay and then we go to Full Width Backgrounds and I think what we’re going to do is we’re going to actually customize everything just for grins. We’re going to start off with a background image. And this is Inflicted Pain so I’m going to open up FileZilla and you’re going to have to bear with me for just a minute because I don’t have…let’s see, I bet you can see how I created any of these so copy this site and then this is going to be laurraine.byobtutorial. And so my login is all the same here but my Advanced, the default local directory for this one is let’s see, byobwebsite, tutorial sites… where did Laurraine go? I think I must have run right past her. No, must be here. Here it is and then WordPress, okay. So that’s my default and then this one’s just going to be Laurraine. Use synchronize browsing, connect. Let’s see what happens. It should work just fine. Yep, okay. Content, themes, thesis_182, custom, and images.
Okay so, the image that we’re going to put in is this image. Oh well, okay let’s try that again. Drag and drop to there and inflicted.png got loaded in here and then download it back to my site. I’m in the local machine now so that’s in both places. And in terms of our body background image, we’ll grab the URL then, we’ll copy and then I’ll just grab the rest of it from here. So laurraine… no, not laurraine. We’re grabbing wp content, themes, thesis_182, custom, and images. And then we’re coming over. I’m going to put the filename in and the filename is inflicted.png. Save.
That image is sitting right here, right now, that little square image that creates this background. What we have to do is make it repeat in the X and the Y direction. So if we come back over here to our background image and we say repeat in the X and repeat in the Y and hit save and refresh it… sometimes, I forget that occasionally. Now, we’ve got that cool background image running through this whole thing. And actually, I’m not sure that this is the full width framework. Let me just double check that. Most of the things you can do with this can’t be done… yeah, it’s the page framework. I switched to the full width framework.
Okay so we’ll refresh this. I guess I better go back to the full width backgrounds and save that. Okay so we have to turn off the rest of this stuff. So for example, on the background image for header area background styles, if we make the background transparent, now that image will show up back there in the header area. And we do the same thing for the content area, make the background transparent and then the footer area, make the background transparent and save that. Now we should be back to the same condition where we were earlier.
Okay so now the… you can do that with you know, any of these images. So we could easily use this you know, use this Project Paper instead. In fact, let’s just play with that for a second. We come back over here to FileZilla and drag that over there and rename it and then make sure we download it back to our local machine. And then let’s just grab the name of it, come back over to the settings, and for our background image, we could just change the name. That’s all there is to it. Refresh it. And now we have that other background here instead.
How to Customize the Appearance of the Footer Widgets in Thesis
Okay so now that we have our footer rows set up and we’ve added plugins to those widget areas, it’s time for us to configure the size, shape, and background color and that sort of thing of the widget areas themselves. So then we could specify the footer row height if we wished or we could let the footer row height just shake out based on the space needed for these things. I think I’m going to go ahead and specify the footer row height though of 300 pixels. Save that and refresh it.
And I think I want to give a little bit more padding to the top of this or margin, I mean. So in terms of our widget columns, I’m going to give us some top margin. Let’s just say 50 pixels, say I want I nice, big top margin there. Okay so that moved that down.
So then the next thing I want to do in order to help you understand what’s going on here is I’m going to change the background style. Now, once you check this and hit save, a whole bunch of background choices are going to pop up. We’ll go back to background styling here and now you can choose to put a background image in which I think I’ll describe in a later tutorial. So I’m not going to do anything with the background image but I am going to put a background color in.
And so I’m going to put a nice… let’s see, blue gray background color. There we go and hit save and then refresh this. And now you can see what’s really going on here. The whole area here has been colored with that blue background. It’s 300 pixels tall. It’s got 50 pixels above it to the next piece of the page. And so now what we want to do is move this stuff away from this blue background so it looks like it belongs. And the way we do that then is to come over here to our widget column padding and margins.
So the widget top margin is the margin around each one of our columns. In order for you to see what that looks like, I’m going to actually add a background style to the column so we’re going to go ahead and check this. And then I’m going to come down here and give us a new background color. And right now, I think I’ll just pick a light gray here.
Okay so this is the background color for each widget column which is different than the background color for the widget row. We have our widget row background color which is that blue gray and then we have our widget column background color which is the light gray. And if we refresh this, the blue gray has been completely covered by the light gray because they are the same size right now. That is each widget column goes from top to bottom and from left to right all the way over to the next one.
However, I can come over here and instead of doing that, I can give myself some padding and margin. So let’s start off with margins and let’s say I’m going to use 10 for everything. I’m going to have 10 pixels of margin all the way around, top, bottom, left and right. Hit save, come back over here and refresh this. Now, you’re going to see that blue gray color because what we’ve done is we’ve taken the column itself and we’ve given that column margin which is essentially space outside of the column, pushing it away from the thing that’s wrapping the column.
However, because this is a light gray color, the text is still butted right up against the edge of the widget column. And so that’s where padding comes in. Margin pushes the element away from its container and padding pushes the contents away from the edges of the container. So what’s going to happen is the edge of the container’s going to stay in the same place but these things are going to be pushed away from that edge by using the padding. So we come back over here to widget column padding and margins and now, let’s say we want 20 at the top and then 10 and 10 and 10 pixels and we hit save and refresh it. Now you can see what’s happened, right? This is the 20 pixels of margin or padding that was added to the top and then 10 pixels on the left over here, I guess you see 10 pixels on the right although the text isn’t long enough for that to show. And then 10 pixels on the bottom. Again, the text isn’t long enough for it to show. So that’s how this works.
So we’ve added margin around this color or around the columns and we’ve added padding inside the columns. And by definition, the columns are the same width. Now it is possible to set different widths for these columns although I’m not going to review that here in this lesson.