Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101208 Viewers
61 Video lessons · 87960 Viewers
71 Video lessons · 71842 Viewers
56 Video lessons · 103691 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.
Your file was successfully uploaded.