Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
We've created a new page display for this view with a path of temp, as you can see in the browser's location bar at the top. And we've set it to display as a grid, using the technique you learned in the video "Improving Grid Appearances with Lists and Table Formatting." Once we've determined which part of the CSS we want to change, the only thing left is to write that CSS. We're going to write it into that file we mentioned earlier called local.css and that's referred to in the .info file. To do that we'll open up our Text Editor and start typing. Now I'll tell you this much. For this particular use, the class that we're looking for is table.views- view-grid, and we're looking for the tbody td tags. We'll open that up. And now I'll start specifying how I want the CSS to look. I want padding of 20 pixels, a border-style that's solid, a border-color, we'll make it a little lighter than black. I'll say #666666.
And a border-width of 2 pixels. Finally, remember we wanted to align it all to the top. So we'll use the vertical-align:top. And finally we close it out. We want to save that as plain text and save it as local.css. I'm going to save it to the Desktop so I can find it easily. I'll close the file, go back to my Finder and then hide everything else. The last thing to do is to put that local.css file into your notgarland folder. I just drag it in. Now when I go back, I'll close out Firebug and reload the page, crossing my fingers and hoping it works.
And indeed it does. You see that it gives us a border, extra padding and everything is aligned to the top. Exactly what we wanted. There's one additional resource I would like to point you to and that's some of the documentation that was written by Views creator, Earl Miles. He has one chapter called Using CSS with Views and you can reach at this URL. Now before we go, I'm going to clean this up again by switching back the garland theme. I know, we also won't be keeping this grid view that we've created but that's okay because it's on a page that we're going to throw away anyway. I'll go back to Administer > Site building and Themes. Scroll down disable NotGarland, enable Garland and make sure that it's the default. Scroll down and Save configuration. Just to be sure, I'm going to go back to that temp page and we see it's back to the old grid view. Now I'm going to go back into my Drupal installation and throw away that NotGarland theme. Finally, I'll edit this view to get rid of that temp page that I created. Scroll down and Save. Now when we save that it tried to go back to the page but since we've just deleted the page, it can't be seen. Don't worry about it because all of our other views are still there. If we go to people, there it is. Yeah, that was easy, wasn't it? No, I know it was awful, especially if you don't already know CSS. If that's you, lynda.com has several great video series on the subject that will get you up to speed.
You could actually continue the process we started here by editing other CSS styles but I think we've done enough for the purposes of this demonstration. I hope that it gives you an idea of how much you can style views using mostly just CSS. If you want to delve further into this topic, your best guide is the study of the CSS styles contained in the theme that you are using, as they are exposed using Firebug.
Get unlimited access to all courses for just $25/month.Become a member
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.