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

Introducing custom CSS

From: Drupal Gardens Essential Training

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.

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

  • Show transcript

    This video is part of

    Image for Drupal Gardens Essential Training
    Drupal Gardens Essential Training

    65 video lessons · 11859 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

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

    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:

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