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

Drupal Gardens Essential Training

Inserting raw CSS code into themes


From:

Drupal Gardens Essential Training

with Tom Geller

Video: Inserting raw CSS code into themes

There's one part of Drupal Gardens' Theme Builder I haven't showed yet-- the Advanced tab. It's the most powerful feature, but it also takes the most knowledge of CSS. You could spend months studying exactly how CSS files interact with Drupal Gardens' themes, and obviously, we won't be able to do that here. But I will show you enough to be able to do little tricks, and then you can start flowering out from there. As usual, we go up to Appearance to bring up the Theme Builder, and then we go to the Advanced tab. Now what we're going to do with this is I am going to add a graphic very similar to this one on the top down here in the bottom, but I want that only to appear on the front page.
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

Inserting raw CSS code into themes

There's one part of Drupal Gardens' Theme Builder I haven't showed yet-- the Advanced tab. It's the most powerful feature, but it also takes the most knowledge of CSS. You could spend months studying exactly how CSS files interact with Drupal Gardens' themes, and obviously, we won't be able to do that here. But I will show you enough to be able to do little tricks, and then you can start flowering out from there. As usual, we go up to Appearance to bring up the Theme Builder, and then we go to the Advanced tab. Now what we're going to do with this is I am going to add a graphic very similar to this one on the top down here in the bottom, but I want that only to appear on the front page.

Now, there is no way to do that directly with the Theme Builder in Drupal Gardens, but you can do that with custom CSS. There is a class that specifies that something goes only on the front page; it's .front. I will show you that in just a minute. But the first thing we need to do is figure out where exactly we're going to place that graphic. To do that, I am going to cheat a little bit and go into Styles and start clicking around. One good thing about the Style selector is that you don't actually have to make any changes; you can use it to figure out how your Drupal page is constructed.

So I know I want it somewhere in here. Let's see, content-inner, content looks like it's probably the thing. I'll try it there, and then if I need to, I will adjust it after it's in. First, I want to prove that we can change that area by affecting only the front page's color. Before we do that, I'm going to save as and call this exp_cal_11. Again, it's always a good idea to save many versions of the theme as you work on it, and then I'll publish it.

Great, now we will start playing around in the Advanced tab. We will start out by just adding a background color to that area with #content curly brace, background-color, and you notice that it gives you a little cheat sheet here, which is really nice. Say colon and let's make it this color. And it changed it already. It does it right away. I will just close that, add my proper semicolon, update, make sure it's all good, publish, and then I am just going to take a look around the site.

Close out the Theme Builder and click around a little bit. Let's see our About page. Yeah, it works on every page right now. But we only want it on the front page. So once again, we go back to Appearance to bring up the Theme Builder and then back to our Advanced tab. But this time, we only want it on the front page, so I will add that up here .front and then Update, Publish, and then go back to our site. Go back to our front page.

There's our background color. And as you'll notice, when it redraws us About us page, it's not on the About us page; it is only on the front page, which is exactly what we wanted. Great. So we have already done something that can only be done through the Advanced tab. Now, I am going to go ahead and add in that graphic. Now, this is the part that's a little bit hard. The thing is, we have a graphic on our own computer, and we want to put on Drupal Gardens' server, but we don't have a direct way of doing that. So I'm going to use a little bit of a trick that I learned earlier in core Drupal.

What I will do is I will close out the Theme Builder for now. I'm simply going to add a Junk node, I'll call it. It will be a Basic page, it doesn't really matter. I'll call it JUNK NODE, so that I remember that. And then down here I'll add my media, browse for it, and then select it. It's this main_back-bottom graphic and Open and finally Upload. We'll leave it in its original format, and submit.

And there it is. Then I save that node. But before I do, I just want to un-publish it. It is a junk node. We are only doing this, so that we can get the graphic onto the site. Once it's there, click Save, and we see our graphic. Now here's the trick: I right-click on the graphic and say View Image. What that does is it tells us exactly where on the server that graphic is found. I will copy everything here; it's going to be explorecalifornia.drupal .gardens.com/files, et cetera, et cetera-- actually, I will copy the whole thing.

I might have to play around with this a little bit once I go back into my site. But then I can go back, go into Appearance--and actually we can delete this node if we want, but I will leave it since it's unpublished-- go into Appearance, and then go back to our Advanced tab. Now, it's a simple matter of replacing that background color with the graphic itself. That's going to be background-image url (', paste in that url, and ');. And then just so it doesn't repeat, we will make it background-repeat.

Oops, I forgot to put back my colon there but background-repeat: no-repeat. Now, let's take a look at that. Again, we might have a bit of a problem with this url here; we might have to cut it down to files and so forth. Again, after you've done this a little while, you will find out exactly the right way that Drupal wants it. Click Update, Publish, then go back to our front page and see if it works. Nope, not quite.

That's okay; we can just go in and continue to fiddle around with it. Let's go back up to Appearance and again to the Advanced tab. One thing that I've noticed about the URLs in Drupal generally, and Drupal Gardens as well, is that it very often needs to have a leading slash. So let's try that and see if that works. Ah! Even before we click Update, it automatically updated and showed that that was in fact what we were missing. Click Update anyway and then Publish. And then just to be sure that it's only on the front page, I am going to close this X here-- that will get us out of the Theme Builder--and click onto a different page, let's say the blog.

Yep, it only shows up on the front page. Now, when we go back Home, you see what it looks like. And you have to admit the site is looking pretty good now, right? I know we have a lot of text overruns, and this isn't quite matching up to the left-hand side, but we are starting to get there, and these are some of the things that we're going to fix in the video about finessing the theme design. By the way, the CSS code that you enter in that Advanced tab, it overrides all previous CSS. It's the last thing that the page renders, so to speak.

When you export the theme, all the custom code you entered here ends up nicely segregated into a file called Advanced CSS; and if you were to take a look at the info file, that's the last thing that's loaded.

There are currently no FAQs about Drupal Gardens Essential Training.

Share a link to this course
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.

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
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



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.

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