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

Deciphering CSS files

From: Drupal 6 Essential Training

Video: Deciphering CSS files

One of the most effective ways you can customize a Drupal site to make it distinctively yours without installing a new theme is to tweak the theme CSS. However, a theme CSS or Cascading Style Sheets are typically contained in several files in a complex hierarchy that can be hard to understand. We will show you how some of your options for changing themes appearance through CSS are done through the Firefox plug-in tool, Web Developer, which we downloaded previously. To make these changes we are going to go into Tools, Web Developer, CSS and Edit CSS. This is taking CSS directly from the website that we are looking at and the changes that we make would not be permanent until we save them by clicking on this disc icon.

Deciphering CSS files

One of the most effective ways you can customize a Drupal site to make it distinctively yours without installing a new theme is to tweak the theme CSS. However, a theme CSS or Cascading Style Sheets are typically contained in several files in a complex hierarchy that can be hard to understand. We will show you how some of your options for changing themes appearance through CSS are done through the Firefox plug-in tool, Web Developer, which we downloaded previously. To make these changes we are going to go into Tools, Web Developer, CSS and Edit CSS. This is taking CSS directly from the website that we are looking at and the changes that we make would not be permanent until we save them by clicking on this disc icon.

In addition if we decide we want to go back to the original appearance we can do so by clicking on this Reset All button. Finally the page will update automatically after a few seconds, but if it is not or would like it to do more quickly we can click on this little icon to apply them immediately. As you look at the Web Developer interface you will notice all of the CSS files that are affecting this page are listed in tabs. The main one is style.css. Whenever you revert this using this icon it will switch back to aggregator and make sure go back to style.css so that you can edit the correct file.

Now let us take a look at the file itself. The main part of any page is the Body tag, which you see here at the top of the CSS file. Things that you change within the Body tag will change pretty much the entire page. For example, let us change this font size from 76 to 90. Wait a second and you will see that all of the text on the page has changed. That is because the Body tag drools over most everything else on the page. Changing it will have some very severe repercussions. So let us change that back. Again I am hitting Command+Z or Ctrl+ Z on the Windows machine. Going down a little further let's be a little bit more specific. We are going to just change these links. You will notice right now there are certain colors and when you hover over them they become underlined. That is done through CSS. We are going to scroll down and here we have the A tag, one called a: link, one called a: visited and one called a: hover.

The a: hover one, if you look at the CSS, you can see that that is where the underline is coming from. Let us change it to blink. Now let us see what happens. We have given it a second to apply, we go up over a link and you can see when you hover over a link now it blinks. That is ugly; I am going to undo that by hitting Command+Z. Continuing further down the page you can see how CSS affects the way that blogs are actually laid out on the page. We will scroll down until we get to this Page layout blocks/IDs. Let us scroll a little bit further and see what we can change. There we go header background color. Let us see what that changes. We will change it to something very different. Let's say 333. And we can see immediately it changes this top area.

That is good to know because the color and dimensions of various layout parts of the page can have a big effect and differentiate your site from the original theme, but we are going to just change it back for now. I mentioned something about the dimensions of blocks and in fact that is something that CSS also controls. See this padding; let us take a look at what would happen if we were to change one of these to let us say, 6em instead of 1.2. Take a good close look and I will you give you a hint. This has to do with the Primary, Navigation links up here. We will change it to 6 and you see it changes the padding around those links. Of course we did not change it into anything more attractive so we will change it back. Finally I should mention something at the very bottom of the CSS sheet. We will scroll down. We have these Module specific styles. That is because Drupal comes with several modules built-in, as you know for example the Feed aggregator and the Blog module.

As a result everything theme designer can count on them being there and sometimes they will add there own styles so that those modules will match the rest of the site. However they can be over written as you can see with these other modules specific style sheets such as poll and aggregator.css. Let us say that we have made some of these changes and in fact let us go back to our style CSS scroll all the way up to the top and let us actually change our font size, let us say that we do not like it being quite that big through out the entire site. I am going to change the font size from 76 to let us say 70. It is a sudden change, but it allows you to put more content on your site.

Now I am going to save that out. Now here is something important. Do not save it to the same place as the original style.css file unless you have already backed it up. If you do so of course you are going to loose your original backup and I recommend that you backup your CSS file. So I am going to save it to the desktop in this case and then I am going to apply it by dragging it by into my Drupal folder. Click on the Finder, hide everything else. If you are working with a downloaded theme you probably put it inside of sites and then either in all or default.

I tend to put them in default and themes right here. In this case we are working with a theme that came by default with Drupal, so let us go back to our Drupal folder and just go into themes folder. Remember the ones by default are at the top-level themes folder. The ones you download should go into a subdirectory of your sites folder. Open up themes, open up our theme, which is bluemarine. I am going to make a backup remember. Call this one style-BACKUP. Then I will just drag this new style CSS in and let us see if that font size change occurred.

We are going to switch back to Firefox, we can this up if we like so we can see the whole page and now reload by clicking on the reload icon here. As we can see our font change took, but we are going to revert it back by simply going back to the Finder, Hide Others throwing away our new style sheet either by dragging it to the Trash in the Mac or right click delete in the PC. Change this back to style.css then go back to Firefox, reload one more time and we are back to normal. We have only touched a little bit of CSS. If you want to learn more Lynda.com offers much more information on both its technical side and on using CSS for design. Visit the Lynda.com site for several courses to continue your CSS studies. Besides the Wed Developer plug-in there are many other ways to work on CSS files.

Once you are good enough at understanding them you can use a plain text editor or you can edit them graphically in a general web developing tool such a Dreamweaver or Adobe GoLive or you can download a specialized tool such as Coda for the Mac. However you do it, until you become you CSS expert remember to respect its power and complexity. Keep your changes small and controlled and always make a backup first.

Show transcript

This video is part of

Image for Drupal 6 Essential Training
Drupal 6 Essential Training

66 video lessons · 31314 viewers

Tom Geller
Author

 
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

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

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.