Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
When we last left our web site, we had just added this background graphic that you see at the top. It's pretty, but the spacing is a little bit off, and we have got this line going through the guy's head. We can fix both of those things by changing the spacing and borders. To reach those controls, click Appearance to go into the Theme Builder, then click Styles, and then Borders & Spacing. Before we start making changes in earnest, let's take a look at the controls available to us. I am going to save a copy of our theme, so we can play around without hurting the original theme.
The details on how to do this are in the video about switching, saving, and copying themes. I am just going to save this as exp_cal_ test, and then I'll publish it so that I am sure that that's the one I'm working with. As with all other controls under the Style tab, you first click an element on the page. I will just use this image right here and then start playing with the margins. Now there are two ways to change them: You can either click in this area; and that brings up his little slider bar; and you can adjust like that. Or you can actually type in directly numbers, so instead of 0, I will type in 10.
Now as I do this, you'll notice the change right up above. As I make the margin bigger on the top, it brings the image down further on the page. If you want to change all of the margins around, just go into the corner here and then do your dragging. See how that moves the graphic down? Along with the margin, there is something called padding, and you might wonder exactly what the difference is between border and padding. Here I'll show you just what happens when I make the padding bigger. So you see that blue area around the graphic? That defines the elements borders, so to speak, the element's bounding box.
When you make the padding bigger, it increases the space inside that bounding box. When you change the margin, it changes the space outside that bounding box. It's a very subtle difference, and mostly where you know it is in repeating things, such as on these menu items at the top. If I change the margin, it has a slightly different effect than if I were to change the padding. The best way to really understand this is to go back and play with it yourself. Finally, we have our border.
I'll go ahead and click on that image again and then start adding a border. And you see it does exactly what you would expect it to do; it puts a border of a certain color around the element that you selected. You can change that color as usual, or interestingly, you can change its style. Now we have solid. There is also dotted, dashed, and interestingly these grooves and ridges and so forth, which has this kind of 3D effect that I really like. One thing to watch out for: when you add a border, make sure that the border that you're adding doesn't blend in with the background color.
If it does, you might start adding the border and changing style and thinking, why don't I see it? Oh, it's because it blends in. The other thing to watch out for is make sure that the style is not set to None, because then you don't see it at all. So now that we know what we're doing, let's out of this test theme, go back into our production theme, and fix the gap that's up here next to the header. To do that, we go to our Themes > My themes, and back to the one I was using, which was exp_cal_010. Yup, I want to describe the changes I made.
And then just to be sure it took, I click Publish. Usually when you have a problem like this, the hardest part is figuring out exactly which element that you need to style. I'll click on Styles here, so that you can see what I mean. Click on Borders & Spacing just to be ready. Now as I come up here, there are a whole lot of different styles that I could be changing. This one is the preheader- second-region. There is a header. There is a preheader. It's a little easier for us though, because we placed this graphic ourselves, and you might remember we placed it in the header area, so we know what we want to affect.
So how do we change it? Well, let's start messing with the margins. I really want to get rid of the margin on the right-hand side, so I'll try bringing that in a little bit. Yeah, that works pretty well. Let's see what would've happened if I'd tried the padding. Now that's really not what I want to do, although I could do that instead if I wanted. I am going to keep it with margin, and that comes to let's just say 32. Now as the matter of style, I don't want to have this jagged, stair-step effect, so I am going to also change this area here.
Once again, it's going to be difficult to figure out exactly what section we want to change, but as it happens, I know the CSS styles of Drupal Gardens themes fairly well, so I click, and I happen to know that it's the content area that I want to change. And I change that also to 32. And again, you can go and just type the number if you like. And we see, in fact it does line up. Terrific! The last thing we're going to do is get rid of this line that's going through the guy's head. Once again, you have to figure out which part of the page to change, so I will just start clicking around.
That looks possible, so we click there. No, that wasn't it. There. Let's see. Ah, yes. There is a border at the bottom of this area, the preheader area. What happens if I make that 0? Yup, it disappeared. Terrific! I'm going to save that, and in doing so, it publishes that theme. And finally, I'll just close out my Theme Builder, so I can take a good clear look at it. Now as you can tell at this point, you could spend hours just on spacing, and in fact, that's what you end up doing when you're working seriously on the design.
We will do a little bit of touch-up in the video about finessing theme design. I encourage you to start playing with borders and spacing on a variety of Drupal Gardens-based themes and just remember to save test versions of them so you don't hurt anything, and then just go wild with it. Because their style names are standardized, you will very quickly get a sense of what you have to select to affect a given element.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.