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

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

Drupal 6 Essential Training
Illustration by

Understanding Cascading Style Sheets (CSS)


From:

Drupal 6 Essential Training

with Tom Geller

Video: Understanding Cascading Style Sheets (CSS)

Drupal makes extensive use of Cascading Style Sheets or CSS to control such matters as type style, bulleted list, graphic placement and column width. We will show how a small style sheet change can have a big affect on your site's appearance, because CSS is so powerful we recommend you tread lightly when playing when playing with CSS files and always keep a backup copy so you can return to where you started if you make a mistake. CSS is a big subject and lynda.com offers much more information on both its technical side and using CSS for design. Visit the lynda.com site for several courses to continue your CSS studies. For this video we are going to be using the Firefox browser because we are going to be looking at a tool that only installs into Firefox and isn't yet available for safari at the time that we are making this video.
Expand all | Collapse all
  1. 4m 38s
    1. Welcome
      50s
    2. Using the example files
      3m 48s
  2. 28m 55s
    1. Drupal is a CMS
      7m 43s
    2. Choosing Drupal
      5m 32s
    3. Checking Drupal's requirements
      4m 26s
    4. Understanding the inner workings of Drupal
      4m 35s
    5. Meeting the Drupal community
      6m 39s
  3. 11m 28s
    1. Learning key terms in Drupal
      5m 20s
    2. Touring Drupal's interface
      6m 8s
  4. 34m 35s
    1. Installing WAMP and Drupal on Windows
      9m 41s
    2. Installing MAMP
      4m 34s
    3. Setting up the database on a Mac
      2m 2s
    4. Downloading and installing Drupal on a Mac
      6m 37s
    5. Troubleshooting installation problems
      3m 49s
    6. Automating updates with cron
      7m 52s
  5. 25m 37s
    1. Setting up clean URLs
      5m 52s
    2. Backing up your Drupal site
      3m 31s
    3. Restoring your Drupal site from backup
      4m 19s
    4. Wiping your Drupal installation clean
      2m 7s
    5. Updating Drupal
      9m 48s
  6. 15m 37s
    1. Using the Administration menu
      6m 21s
    2. Setting site information
      4m 50s
    3. Setting the theme
      4m 26s
  7. 35m 8s
    1. Understanding security and permissions
      7m 2s
    2. Controlling site access with user management
      3m 39s
    3. Creating users
      7m 58s
    4. Setting user profiles
      9m 40s
    5. Creating contact forms
      6m 49s
  8. 19m 19s
    1. Creating your site's basic info pages
      7m 13s
    2. Understanding page layout
      5m 40s
    3. Creating a flexible layout with blocks
      6m 26s
  9. 15m 35s
    1. Monitoring performance
      4m 52s
    2. Recovering from disasters
      7m 37s
    3. Improving administration skills
      3m 6s
  10. 41m 3s
    1. Understanding nodes
      6m 50s
    2. Creating basic content: Stories and pages
      7m 9s
    3. Enabling other content types
      9m 22s
    4. Adding blogs
      3m 49s
    5. Adding forums
      6m 56s
    6. Adding polls
      6m 57s
  11. 34m 50s
    1. Exploring content categories
      7m 45s
    2. Exchanging content via RSS
      9m 47s
    3. Using input filters
      7m 41s
    4. Managing comments
      9m 37s
  12. 38m 5s
    1. Configuring your theme
      11m 27s
    2. Changing your theme's graphics
      4m 59s
    3. Finding and installing a new theme
      8m 56s
    4. Understanding Cascading Style Sheets (CSS)
      5m 56s
    5. Deciphering CSS files
      6m 47s
  13. 22m 41s
    1. Finding modules
      6m 53s
    2. Unpacking and installing modules
      6m 30s
    3. Configuring modules
      3m 50s
    4. Implementing complex modules
      5m 28s
  14. 32m 12s
    1. Ensuring automated updates with poormanscron
      3m 11s
    2. Defining custom content types with CCK
      12m 54s
    3. Stopping spam using a CAPTCHA
      10m 43s
    4. Using a WYSIWYG text editor
      5m 24s
  15. 22m 18s
    1. Getting around with multilevel menus
      7m 26s
    2. Building custom menus
      5m 42s
    3. Creating easy-to-navigate books
      9m 10s
  16. 20m 19s
    1. Changing page templates with PHP
      8m 15s
    2. Using PHP in content
      5m 20s
    3. Implementing PHP snippets
      6m 44s
  17. 10m 15s
    1. Launching your site
      5m 52s
    2. Joining the Drupal community
      4m 23s
  18. 14s
    1. Goodbye
      14s

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 6 Essential Training
6h 52m Beginner Aug 25, 2008

Viewers: in countries Watching now:

Drupal is a free, open-source content management system (CMS) for a variety of platforms. It has a robust user community and easy-to-use administration features. Drupal Essential Training covers all the important aspects of installing, configuring, customizing, and maintaining a Drupal-powered website. Instructor Tom Geller explores blogs, discussion forums, member profiles, and other features while demonstrating the steps required to make Drupal perform. He also teaches fundamental concepts and skills along the way, including installation, backups, and updates; security and permissions; flexible page layouts and CSS; menu navigation; and performance monitoring and disaster recovery. He also discusses how to select and install the community-supported modules that further expand Drupal's capabilities, and gives experienced PHP programmers tips on customizing page templates. Example files accompany the course.

Topics include:
  • Understanding the inner workings of Drupal
  • Creating stories, pages, blogs, forums, and polls
  • Managing users and comments
  • Setting and customizing themes
  • Exchanging content via RSS
  • Stopping comment spam with a CAPTCHA
  • Launching a site and joining the Drupal community
Subjects:
Web CMS
Software:
Drupal
Author:
Tom Geller

Understanding Cascading Style Sheets (CSS)

Drupal makes extensive use of Cascading Style Sheets or CSS to control such matters as type style, bulleted list, graphic placement and column width. We will show how a small style sheet change can have a big affect on your site's appearance, because CSS is so powerful we recommend you tread lightly when playing when playing with CSS files and always keep a backup copy so you can return to where you started if you make a mistake. CSS is a big subject and lynda.com offers much more information on both its technical side and using CSS for design. Visit the lynda.com site for several courses to continue your CSS studies. For this video we are going to be using the Firefox browser because we are going to be looking at a tool that only installs into Firefox and isn't yet available for safari at the time that we are making this video.

The tool that we are going to be using is called Web Developer and you can get it chrispederick.com/work/web- developer. Once there, you would click to download and install it as you would any other add-on for Firefox. There is one other tool that is similar to Web Developer called Firebug, which also runs on Firefox. We won't be looking at it, but if you would like to check it out, it's at getfirebug.com. Okay, so let's take a look at our theme. We will close out this window and go back to our drupal folder. This will be in the same place as where you installed Drupal in the first place. For us, that's in our sites folder and we already have it open. The theme that we are going to be working on is the Bluemarine theme, which was installed with Drupal. So it will be in the themes folder as opposed to in one of the sites folders. We will open it up and open up bluemarine.

The actual file we will be looking at is called style.css. In Drupal style.css is the main CSS file. However, it may call many others and you will see that when we look at this file in Web Developer. In this case style-rtl means right to left. Drupal supports many languages including those that read from right to left and often there will be separate style sheet for those languages. Generally speaking they will be labeled -rtl. Since we are going to be playing around with this style, we want to back it up. I am going to highlight it and press Command+C or Ctrl+C on the PC and then just paste it on our Desktop by hitting Command+V or Ctrl+V.

Great! Now we can play around with this style sheet. To do so we are going to switch back to our interface here and turn on Web Developer by going up to Tools, Web Developer and CSS. There are two particular options here that I have found very useful. The first is View Style Information. With that turned on, when you point at any part of your website, you will see that it highlights the structure of the website and above in this little bar it tells you a little bit about the CSS that affects that part of the website.

When something is highlighted and you click, Firefox opens a little window in the bottom, which is resizable. Inside that window, you will see information about the CSS that controls the part that you clicked. That's very helpful in figuring out exactly what you want to change, in order to change a specific part of your site. But there is another tool in Web Developer that will help you even more. Let's close this out first, go back up to Web Developer toolbar, turn off View Style Information and go down instead to Edit CSS. Again that opens up a little window at the bottom, which lists all of the CSS files that affect this page.

Now you remember I mentioned style.css, but there are all of these other CSS files that helped to build this page. Some of them are called in by modules. For example, the forum module calls in forum.css and the styles that are listed in here only affect the forums. Going back to style.css, I am going to make this window just a little bit bigger so we can see some more. Here we can actually change specific CSS on this side. Now we are not making permanent changes. These are just temporary changes to show us what's going to happen if we make changes permanently.

So for example, let's change background color. Instead of #fff, we will change it to #ooo. Wait a second and you will see that this is the part that would be changed. Another way that you can bring up that information quickly is let's say that it is not refreshing quickly enough for your taste. Type it in and then click on this little button here Apply and that will very quickly bring it up. To return your CSS files to normal, just click on this Reset All. Finally, once you have made the changes that you like, you can go up to this disk icon and say Save. Now make sure that you have the correct style sheet selected, it will tell you up here the name of the style sheet you are editing.

Sometimes Web Developer will switch from tab to tab, especially when you do a Reset All. CSS switch to Aggregator, you will have to go back to style.css. We are going to save this style.css file as style-NEW.css, just so that we can keep it distinct from the old one and then click on Save. We will go back to our Desktop and hide everything else. Now let's say we want to apply this new style into our actual site. Well, to replace the style sheet, we would throw away the one that's in our theme folder. Remember, we did save a backup.

I will drag that to the Trash. Of course on the PC you would use right-click and Delete. Drag this into the folder, rename it as the old one, style.css and there. We have been able to play around with style sheets and see exactly what in the CSS file affects the page and then installed a new style sheet. This video only touched on the very tip of the iceberg that is CSS, by changing one small attribute and in fact we have changed it back. So by replacing the file we didn't make any changes. But the truth is style sheets can affect Drupal theme appears much more profoundly than just about any other facet of Drupal development. For a Drupal webmaster, time learning CSS is time well spent.

Find answers to the most frequently asked questions about Drupal 6 Essential Training.


Expand all | Collapse all
please wait ...
Q: While following along to the installation instructions in the “Installing WAMP and Drupal on Windows” chapter in the Drupal Essential Training title, an error occurs when attempting to open the local host page. Nothing appears except for an error reading “WAMPSERVER server offline.” What is causing this?
A: There is a known problem with some versions of WAMP that include a version of PHP (5.3) that some versions of Drupal is not compatible with. See http://tomgeller.com/content/tips-running-drupal-windows-using-wamp#comment-831 for more information.
If that is not causing the issue, reference the tips at http://tomgeller.com/content/tips-running-drupal-windows-using-wamp.
If you don't see the solution at either of those links, try using another AMP stack, such as XAMPP or the Acquia stack installer. See http://tomgeller.com/content/what-hells-wrong-drupal-wamp for discussion about these.
Q: After installing XAMPP and running Drupal for the first time, the Administration menu does not appear. What is the reason for this?
A: There are several possible problems. Here are some likely solutions. (These may also solve problems encountered with other AMP stacks.)
  1. Increase XAMPP's PHP allocation.
  2. Check to make sure all XAMPP's paths are correct and that permissions are correct. If the database information appears, but not Drupal's supporting files, and an included theme is being used, the supporting files will be in the /modules folder.
  3. Another solution is to not use WAMP or XAMPP. One option is to use Acquia's Drupal Stack Installer ("DAMP"), which can be found at http://www.acquia.com/downloads. However, that installs Acquia Drupal, which is a version of "normal" Drupal extended with additional modules. If  only core Drupal is desired, see the instructions at http://acquia.com/blog/kieran/try-drupal-7-alpha-your-laptop-or-desktop. (The instructions are for Drupal 7, but will work for Drupal 6 as well.)
Q: In the "Using the example files" movie, the method of importing information to the database is shown, using the backup in Chapter 10. When attempting to do this, the following error is shown: "No data was received to import. Either no file name was submitted, or the file size exceeded the maximum size permitted by your PHP configuration. See FAQ 1.16." The system is running the latest versions of Apache, PhP and MySQL, on Windows Vista. What could be causing the problem?
A: This is probably caused because your AMP stack allocates too little memory to PHP. 
 
That's especially true if you're using WAMP, which only gives PHP 2MB of memory, when it really needs at least 16MB. 
You'll see the issue if you go to the MySQL-controlling phpMyAdmin screen (probably at http://localhost/phpMyAdmin) and click "Import": The maximum file size allowed is 2,048K. That's only 2MB, and the databases for most Drupal sites are much larger than that. (The example site for Drupal Essential Training gets as big as 5MB.) The video "Installing WAMP and Drupal on Windows" shows (at around 3:30) where the php.ini file is, but here are some more-complete instructions to increase that memory limit. 

  1. Click the WAMP icon in your system tray.
  2. Select "PHP". In the side menu, select "php.ini" to open a file containing PHP's configuration options.
  3. Search for the line, "upload_max_filesize = 2M".
  4. Change it to "upload_max_filesize = 32M" (or whatever you like). 
  5. Save the file and restart WAMP. (Better yet, restart your computer entirely to be sure. I'm frankly not sure whether it makes a difference.)
  6. Now go back to that "Import" screen in phpMyAdmin: You should notice that the limit has changed.
Q: I don't remember the default username and password used demonstrate Drupal.
A: The default username used in the course is "admin"; the default password is "booth".
Q: How can I change Drupal's administrative username and password?
A: If for some reason the default exercise file username (admin) and password (booth) don't work, you can change them in the database itself using phpMyAdmin. (This technique is demonstrated in a video from Chapter 8, "Recovering from disasters".)

  1. Open your Drupal database with phpMyAdmin.
  2. Go to the "users" table. Click the Browse icon.
  3. For the row where uid = 1, click the Edit icon. (Note the value under the "Name" column: That's the administrator's username.)
  4. In the "pass" row, select "MD5" under the "Function" column
  5. In the same row, enter your new password under the "Value" column.
  6. At the bottom of the screen, click the "Go" button. You should now be able to log in with that username and new password.
Q: In Windows Vista, the WAMP icon disappears from the system tray after a certain amount of time. How do I get it to reappear?
A: To make the WAMP icon reappear (so that you can access localhost, phpmyadmin, php.ini, etc.), you have to activate the "start WAMP server" icon (from start menu, desktop or wherever). The system tray icon will reappear.
Q: My .htaccess file disappeared. What caused this?
A: A few times during the Drupal Essential Training video series, the instructor says to copy a Drupal installation by selecting all the files in the folder and then "dragging and dropping" them, either to a server or another location on your local computer. This is not the best way to do so, as the hidden file ".htaccess" will not be copied. 

There are two ways to get around that problem: 
  1. When installing Drupal for the first time: Instead of copying files from the Drupal folder, move the entire folder to its target location and rename it. This is the easiest solution for those without experience with Unix. 
  2. Use the command-line interface to copy the .htaccess file.
Sorry for the error.
Q: In the video, the instructor says the current version of Drupal is 6.3, but on the drupal.org site, the latest version is 6.17. Which is the newer version of Drupal?
A: Drupal 6.17 is newer than version 6.3. For some reason, the the version numbers go 6.3, 6.4... 6.9, 6.10... 6.17. It’s counter-intuitive, but that’s the order.
Q: My WAMP phpMyadmin will not allow me to upload the exercise files. It returns this message: "No data was received to import. Either no file name was submitted, or the file size exceeded the maximum size permitted by your PHP configuration. See FAQ 1.16." There was no previous database to drop, so what do I need to do to make this work?
A: This is a common problem, caused not by Drupal, but by WAMP. WAMP only allows you to upload files of 2MB or smaller, which is much too small. The solution is detailed at http://tomgeller.com/cant-import-a-drupal-site-in-windows.
 
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.
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 6 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
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

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.