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

Styling the output of views

From: Drupal 7: Reporting and Visualizing Data

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.

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.

Show transcript

This video is part of

Image for Drupal 7: Reporting and Visualizing Data
Drupal 7: Reporting and Visualizing Data

44 video lessons · 6753 viewers

Tom Geller
Author

 
Expand all | Collapse all
  1. 13m 50s
    1. Welcome
      50s
    2. What you need to know
      4m 49s
    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 49s
    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 56s
    8. Migrating custom fields from Drupal 6
      3m 58s
  4. 20m 46s
    1. Connecting two fields using references
      5m 35s
    2. Importing data using Feeds
      8m 48s
    3. Changing the appearances of fields
      6m 23s
  5. 53m 15s
    1. Understanding why views are useful
      5m 1s
    2. Learning from built-in views
      5m 52s
    3. Creating and deleting a simple view
      5m 41s
    4. Diving into the Views interface
      8m 48s
    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

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

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.