Drupal 7: Reporting and Visualizing Data
Illustration by John Hersey

Styling the output of views


From:

Drupal 7: Reporting and Visualizing Data

with Tom Geller

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

Video: Styling the output of views

Drupal uses a combination of systems to present information to the world, most notably Cascading Style Sheets, or CSS. The essence of CSS is that page elements are tagged with styles, whose appearance you then alter with code. CSS is a huge subject and of course lynda.com has over a dozen courses about it, along with a course specifically about Drupal Theming that shows you how Drupal implements CSS. Obviously, I'm not going to recap that information here, I will just assume you know it and focus on how to apply CSS to data elements through views.
Expand all | Collapse all
  1. 13m 51s
    1. Welcome
      50s
    2. What you need to know
      4m 50s
    3. Using the exercise files
      8m 11s
  2. 12m 58s
    1. A yoga studio
      3m 18s
    2. A national organization
      2m 51s
    3. An entertainment company
      4m 3s
    4. An organization with hyperlocal branches
      2m 46s
  3. 40m 43s
    1. Planning your site's data structure
      3m 31s
    2. Creating record templates
      5m 40s
    3. Understanding Drupal 7's data-template model (entities)
      4m 27s
    4. Creating categories using two methods
      6m 14s
    5. Creating unusual field types
      6m 38s
    6. Reusing and grouping fields
      6m 25s
    7. Looking at Drupal's database
      3m 50s
    8. Migrating custom fields from Drupal 6
      3m 58s
  4. 20m 47s
    1. Connecting two fields using references
      5m 36s
    2. Importing data using Feeds
      8m 48s
    3. Changing the appearances of fields
      6m 23s
  5. 53m 11s
    1. Understanding why views are useful
      5m 1s
    2. Learning from built-in views
      5m 52s
    3. Creating and deleting a simple view
      5m 42s
    4. Diving into the Views interface
      8m 43s
    5. Surveying field types
      6m 16s
    6. Adjusting the settings of individual fields
      5m 31s
    7. Sorting and filtering data
      8m 11s
    8. Changing Views' administrative options
      7m 55s
  6. 33m 33s
    1. Varying how a view appears in different displays
      10m 10s
    2. Formatting views with grid, list, table, and jump menu appearances
      6m 43s
    3. Rewriting field output for interesting results
      4m 21s
    4. Creating multipart views using attachments
      6m 8s
    5. Styling the output of views
      6m 11s
  7. 33m 56s
    1. Importing and exporting views
      6m 21s
    2. Controlling access to data
      6m 44s
    3. Adding dynamic filters to views
      5m 41s
    4. Extending views with relationships
      6m 24s
    5. Improving data administration with Views Bulk Operations
      8m 46s
  8. 29m 43s
    1. Understanding locational data
      4m 43s
    2. Setting up the Location module
      9m 42s
    3. Displaying basic maps with the GMap module
      8m 37s
    4. Displaying custom maps
      6m 41s
  9. 23m 50s
    1. Exporting data in simple text form
      7m 4s
    2. Adding dates and calendars
      8m 32s
    3. Displaying content in a slideshow
      8m 14s
  10. 1m 20s
    1. Next steps
      1m 20s

please wait ...
Watch the Online Video Course Drupal 7: Reporting and Visualizing Data
4h 24m Intermediate Nov 17, 2011

Viewers: in countries Watching now:

In this course, author Tom Geller demonstrates how to use the Views module and other add-ons in Drupal to present dynamic, data-rich content. This course examines several real-world examples of effective data visualization and describes the Drupal data-storage model. The course also shows how to create, format, and style views; control access to data; improve data administration with Views Bulk Operations; and display content as custom maps and slide shows.

Topics include:
  • Planning the data structure of a site
  • Creating record templates with custom field types
  • Connecting fields using references
  • Sorting and filtering data
  • Varying how a view appears in different displays
  • Formatting views with grid, list, table, and jump
  • Creating multi-part views using attachments
  • Importing and exporting views
  • Extending views with relationships
  • Understanding and using location data
  • Exporting data
Subjects:
Developer Web
Software:
Drupal
Author:
Tom Geller

Styling the output of views

Drupal uses a combination of systems to present information to the world, most notably Cascading Style Sheets, or CSS. The essence of CSS is that page elements are tagged with styles, whose appearance you then alter with code. CSS is a huge subject and of course lynda.com has over a dozen courses about it, along with a course specifically about Drupal Theming that shows you how Drupal implements CSS. Obviously, I'm not going to recap that information here, I will just assume you know it and focus on how to apply CSS to data elements through views.

If you don't know CSS, then naturally, those courses are the place to learn. The first thing that I recommend is that you get a free tool called Firebug at getfirebug.com. It's a plug-in for the Firefox Browser that's used by literally every Drupal designer I know. You can style CSS without it, but Firebug helps a lot. I will be using it throughout this video and, in fact, I already have it installed. You can tell from this little bug up here in the corner. Now let's take a look at our view. We will start by doing something very simple. We will make the Full name field bigger than the others, this one right here, and we won't even have to change our CSS to do it.

So we will go up and Edit the view, and then go down to the field we want to affect. You might remember that we combined our First name field with the Family name field in an earlier video, so it actually lives in the Family name here. I click it, and then I can edit that field's display settings. I go down to Style Settings. This is where you make all of those changes. Now, before you do anything else, remember to override, otherwise you'll make this change on all of the displays. So I do that, and Apply. And then once again I'll go in, make sure that I have this Italicized, which means I am overriding on my page; go in and Style Settings.

I can do this very simply by customizing the field HTML. I check this box, and then I can add HTML elements. I will change it to H1, just to show what would happen, and Apply. Then when I scroll down to the bottom, we see how it looks. It's changed that Full name to H1. So that's the easy way to do it. But let's do it using CSS. We will go back up and click on our field, Family name, and once again, we go down and click Style Settings. In this case, we're going to have to customize our HTML just a little bit. We're going to have to add the SPAN tag, which shows that a CSS class is coming.

We then click Create a CSS class. The only option you have here is to add the name of a class, because we're actually going to be editing a CSS file to make this change the style itself. I am going to call this full- name-altered, with hyphens. Before saving this, I just want to point out that you can also customize the label, that is, remember we had the Family name at the top of the table, and also when we change display, it shows up in different places. So there are several things you can do here in the Style Settings. But for us, I am just going to go down and Apply it.

Now when we go down, it's back the way it was, we removed the H1 and we added a SPAN tag, which doesn't actually change the appearance at all. I am going to go up and save this view because we're going to go on and do a few other things. Now we've defined the CSS class, but we haven't yet styled it. In Drupal, the cleanest way to do that is to edit a CSS file that's part of the theme. So I created a copy of Bartik, that's the theme that you see here, and called it unbartik. I put that in the sites>all>themes folder. If we go there, you can see my installation on the Desktop. Open it up.

We have sites>all>themes, and there is unbartik. Inside there I added a folder inside the CSS folder called local.css. I will open that up in Notepad so you can see. Right now, there's nothing in it. If you have the exercise files to this course, you'll find it there already. If not, you can learn how to create a theme by watching the Building Themes the Traditional Way Video in lynda.com's Drupal 7 Essential Training Course. Now, because we know the class, we can style it the usual way, but first, I am going to go back to our site and switch over to that UnBartik theme.

We do that by clicking Appearance, scrolling down to the bottom where our UnBartik theme is, and Enable it and set it as the default. Then we close the Overlay. You'll notice that there's no difference between this and the one we just came from, because it's really just a copy of the Bartik theme. But let's go back to our Text Editor. Now we'll add the CSS style that will change that Full name. The style we want is .full-name- altered, remember that's the name of the class, open the brace. I will make it font-size: 1.5em, and font-weight: bold, some very simple styling there.

I will close the brace and save it. Now when I go back to my site and reload the page, we see that indeed, the Full name did show up with our styling. If it doesn't show you the styling that you expect, there are a few things that could be wrong. One of them is that your CSS might be cached, that is, your server might be holding onto the old stuff and not giving you the new stuff. To change that, go up to Configuration, and down to Performance, and Clear all caches. This may take a while. The other thing to look out for is Aggregate and compress CSS files.

If this is turned on, turn it off first and then clear your cache. That will usually allow all of the new CSS changes to come into your site properly. This is of course just the tip of the iceberg in two ways. First, our example was extremely simple. CSS as a whole includes methods for adjusting layout as well as styling, which multiplies the possibilities. For an example of the range of CSS possible, I recommend visiting CSS Zen Garden, which is at www.csszengarden.com.

But when you do, prepare to have your mind blown, it's an amazing site. What CSS Zen Garden is, is it shows the same site, but with different styles. Like let's take a look here. It's the same site, just once again with different CSS applied. So you can see the enormous amount of difference you can do with just a little bit of CSS styling, or in this case, a lot of CSS styling. The second way that what I've showed you is just the tip of the iceberg is that you can gain a lot more control over data styling by learning the ins and outs of Drupal Theming. For that of course, see lynda. com's videos on Drupal Theming.

There are currently no FAQs about Drupal 7: Reporting and Visualizing Data.

 
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

* Estimated file size

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 7: Reporting and Visualizing Data.

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 ?

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 preferences from 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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

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.