Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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. tags.
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
that is, both
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
tag style, it's going to affecttags 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."
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.