We launched a new IT training category! Check out the 140+ courses now.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Changing element spacing and borders

From: Drupal Gardens Essential Training

Video: Changing element spacing and borders

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.

Changing element spacing and borders

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.

Show transcript

This video is part of

Image for Drupal Gardens Essential Training
Drupal Gardens Essential Training

65 video lessons · 12017 viewers

Tom Geller
Author

 
Expand all | Collapse all
  1. 29m 56s
    1. Welcome
      1m 39s
    2. Previewing the finished project
      1m 29s
    3. What's new in the late 2011 update?
      5m 28s
    4. What is Drupal?
      5m 8s
    5. What is Drupal Gardens?
      5m 57s
    6. Getting started with Drupal Gardens
      5m 35s
    7. Getting help
      4m 1s
    8. Using the exercise files
      39s
  2. 17m 40s
    1. Using the administrative overlay
      2m 54s
    2. Using the dashboard, toolbar, and shortcut bar
      5m 36s
    3. Touring the newly created site
      3m 55s
    4. Configuring the site
      5m 15s
  3. 59m 47s
    1. Creating and managing content
      11m 11s
    2. Creating and managing content types
      10m 35s
    3. Embedding YouTube videos and other media
      4m 5s
    4. Subscribing to RSS feeds
      4m 49s
    5. Categorizing RSS feeds
      5m 1s
    6. Managing tags and taxonomies
      5m 50s
    7. Creating dynamic pages with simple views
      4m 29s
    8. Creating complex information collections with Views
      8m 59s
    9. Creating image galleries
      4m 48s
  4. 37m 50s
    1. Working with blocks
      10m 26s
    2. Setting up rotating banners
      7m 45s
    3. Understanding menus
      7m 27s
    4. Setting up contact forms
      7m 7s
    5. Adding and removing functionality
      5m 5s
  5. 54m 54s
    1. Managing users
      6m 28s
    2. Adjusting user permissions
      6m 35s
    3. Managing comments
      7m 7s
    4. Slowing spam
      5m 20s
    5. Starting discussion forums
      9m 3s
    6. Creating blogs
      4m 41s
    7. Setting up mailing lists
      4m 50s
    8. Allowing users to rate content
      4m 21s
    9. Using best practices for online clubs
      6m 29s
  6. 44m 35s
    1. Getting feedback with webforms
      6m 14s
    2. Publishing RSS feeds
      6m 40s
    3. Taking advantage of social media
      9m 33s
    4. Emphasizing external links
      2m 44s
    5. Improving search engine optimization (SEO)
      7m 30s
    6. Internationalizing sites
      8m 6s
    7. Tracking site usage with Google Analytics
      3m 48s
  7. 34m 40s
    1. Understanding Drupal themes
      5m 44s
    2. Understanding the Theme Builder
      5m 25s
    3. Switching, saving, and copying themes
      7m 13s
    4. Introducing custom CSS
      6m 51s
    5. Refining selections in the Theme Builder
      5m 48s
    6. Exporting themes
      3m 39s
  8. 48m 31s
    1. Changing the site's color palette
      2m 32s
    2. Changing the site's main logo and favicon
      5m 22s
    3. Changing the column number and arrangement
      5m 7s
    4. Adding background colors and images
      6m 29s
    5. Changing element spacing and borders
      6m 11s
    6. Adjusting typography
      4m 24s
    7. Using fonts from outside sources
      5m 7s
    8. Inserting raw CSS code into themes
      6m 57s
    9. Adding visual effects with JavaScript libraries
      6m 22s
  9. 14m 18s
    1. Finessing theme design
      7m 51s
    2. Eight ideas for modifying themes
      6m 27s
  10. 23m 38s
    1. Monitoring sites
      4m 11s
    2. Duplicating and deleting sites
      4m 23s
    3. Adding custom domains
      3m 48s
    4. Using exported sites outside of Drupal Gardens
      3m 46s
    5. Hosting exported Drupal Gardens sites
      7m 30s
  11. 51s
    1. Goodbye
      51s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Drupal Gardens Essential Training.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.