New Feature: Playlist Center! Pick a topic and let our playlists guide the way—like a learning mixtape.

Start learning with our library of video tutorials taught by experts. Get started

Drupal Gardens Essential Training
Illustration by

Introducing custom CSS


From:

Drupal Gardens Essential Training

with Tom Geller

Video: Introducing custom CSS

Drupal Gardens' Theme Builder is very graphical, but mostly it's just a way to change text-based styles in the page description language CSS. These CSS files are important ones that make up the theme that shows how your site looks. I think it's instructive to see what CSS looks like in its original text form, though. That way you get a sense of, and appreciation for, how the Theme Builder does its magic. Let's start by looking at our own sites' pages. Then we'll take a look at CSS, or Cascading Style Sheets as it's more formally known, and see how those affect our pages.
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

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Drupal Gardens Essential Training
6h 6m Appropriate for all Jan 05, 2011 Updated Nov 10, 2011

Viewers: in countries Watching now:

Author Tom Geller demonstrates how to create and publish a complete web site with the powerful tools in Acquia's hosted service, Drupal Gardens. The course shows how to leverage the pre-built page layouts and add custom styling using the ThemeBuilder tool; integrate rich site features, such as surveys, user ratings, and media galleries; and push content to Twitter and Facebook. The course also covers transitioning from a Drupal Gardens site to a self-hosted Drupal site. Exercise files are included with the course.

Topics include:
  • Creating and managing content and content types
  • Embedding videos and other media
  • Publishing and subscribing to RSS feeds
  • Setting up blocks, banners, menus, and forms
  • Allowing users to rate content
  • Managing comments and spam
  • Tracking site usage
  • Collecting feedback with web forms
  • Duplicating and deleting sites
  • Adding custom domains
  • Changing the site's main logo and favicon
  • Adding visual effects with JavaScript libraries
Subjects:
Web CMS
Software:
Drupal Gardens
Author:
Tom Geller

Introducing custom CSS

Drupal Gardens' Theme Builder is very graphical, but mostly it's just a way to change text-based styles in the page description language CSS. These CSS files are important ones that make up the theme that shows how your site looks. I think it's instructive to see what CSS looks like in its original text form, though. That way you get a sense of, and appreciation for, how the Theme Builder does its magic. Let's start by looking at our own sites' pages. Then we'll take a look at CSS, or Cascading Style Sheets as it's more formally known, and see how those affect our pages.

First, let's take a look at our page in general. There are a few things that make this presentation different from just raw HTML that has no styling information on it. For one thing, all of the text is sans-serif. The default for most browsers is a serif font. Also, the links are in orange instead of blue, which is what you get if you just create a simple HTML page. There are layout elements as well, for example, this gray bar up here, and there are some dynamic elements such as when you bring a cursor over these menu items up at the top.

They glow a lighter gray. Now you might remember that themes are contained in a collection of files that live on the Drupal Gardens server. We talked about this in the video about understanding Drupal themes, and we looked at the CSS files of a Drupal theme in a text editor. Now, we can't do that in Drupal Gardens because we don't actually have access to the server, but we can use a little Firefox add-on called Firebug, and you can get that at getfirebug.com. I have already loaded Firebug into my browser, and I see it as a little, tiny icon here in the corner.

I'll click that, and it brings up some of the CSS information for my site. To see specific styling information of an individual element, we click on this little Inspect icon, and then we can wander around. Once again, let's go up to the title here since we've been using that as an example. When I click on it, it sort of freezes the selection. As we look over here in the Style pane, we can see just how many different styles actually affect that one little bit of text. That's because of CSS's inheritance. There's a style for the body of the entire page; there is a style for the title; there is a style for h1; and so forth.

It all cascades down, and all of the styles affect this one little bit. Let's talk a little bit about how those rules work. Again, you don't have to know the details about this, but the more you know, the more you'll be able to change your themes in Drupal Gardens. The first kind of CSS style is very simple. You name a selector, in this case the

tag, and then you say what to do with it. It'll affect every place the text appears within these

tags. It'll make them black and of that specific size, 1 em.

Going on, you can separate out selectors with a comma. What that means is that it should affect all of those things that are in that comma-separated list; that is, both

  • and tags, they'll both be made that black color. You can also narrow down the selector by not putting a comma between them. In this case, it means that only the text that's in tags that are inside of
  • tags. The way the selectors work is they become more specific as you move from left to right, so tags inside
  • tags.

    There are also other kinds of selectors. Those that start with a hash tag usually refer to a single item on the page-- very commonly used for layout. For example, #content means the content area of the page. Everything that appears in that area should be styled a certain way, and then you would have the curly braces and the colons and semicolons and the descriptors that say exactly what happens when an element is inside that region. Dot followed by a name is what's called a class selector. Elements that are labeled with that class get the special styling.

    Finally, there are selectors called pseudo-classes, and they start with a colon. The most common one is a:hover, which means that it'll change the style when you move your cursor over a certain element. But there is more to CSS then that; believe me, there is a lot more to CSS then that. Here are a few things to watch out for. Styles can affect multiple items, and multiple styles can affect an item. So in other words, when you change the

    tag style, it's going to affect

    tags throughout the site. Similarly, a block of text might be affected, as you saw a little earlier, by many, many styles, and you sometimes have to untangle them.

    It's not always that easy. The Theme Builder in Drupal Gardens will help you out because it lets you select and unselect parts that are affecting a styling, as you'll see a little later in the course. Rules will sometimes fight each other. The one that comes last is the one that wins. So let's say that a style is first set to be red, and then later it's set to be black. Well, it'll come out as black. One thing that Firebug does is it lets you turn off certain parts of a styling so that you could see what exactly is affecting what. So I am going to go ahead and select this style once again.

    As I move my cursor over here, you'll see a little icon that lets us black out certain styles. So let's actually do that now, and now you start to see things changing. We change the margin, and so that changed the layout of the style. And as you go down, you'll see other examples of that. Now you might say, this is awfully confusing, but believe me, it's even worse without Firebug. I am just going to go back to my Desktop here, and I can show you that by looking at raw CSS files in a Drupal installation. Once again, we'll open up our Drupal installation and go into the themes, and then open up bartik, and any one of the CSS files.

    Let's take style, which is the main one. And from this, it's really hard to tell exactly what is affecting what. You'd have to scroll through this whole thing--and this is hundreds of lines long, by the way. This is over a thousand lines long, and it's only one of many files. It's quite difficult. So you can really appreciate how much the Theme Builder and Firebug are doing for you. So at base, we have a folder of CSS files with hundreds or even thousands of styles. Firebug helps us to understand those files better, but it's still pretty geeky. On the other hand, Drupal Gardens' Theme Builder is like Firebug, but it goes further to almost completely get rid of the need to know CSS.

    It's very graphical. You simply point at an element, and you make your changes. The hard part comes in later, in determining whether you're affecting the right style, because as I mentioned earlier, most elements are affected by several styles at once. But we'll go into that in the video about refining selections. Now I'm not a CSS wizard myself; that's one reason I personally appreciate the Theme Builder so much. If you want to go further with raw CSS coding, check out some of the other lynda.com courses on the subject, such as "CSS Website Design," "CSS Essential Training" and "CSS for Developers."

  • There are currently no FAQs about Drupal Gardens Essential Training.

     

    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.
    Upgrade now


    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 Upgrade now

    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 preferencesfrom the dropdown menu.

    Continue to classic layout Stay on new layout
    • Mark video as unwatched
    • Mark ALL videos as unwatched
    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

    Notes cannot be added for locked videos.

    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:

    • new course releases
    • newsletter
    • general communications
    • special notices

    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:

    • new course releases
    • newsletter
    • general communications
    • special notices

    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.