Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
lynda.com has a terrific course about traditional theming. It's a deep technical course, and that's because it had to be. Until recently, the only way to modify themes was by changing PHP and CSS code, line by line. But now there are a few graphical tools for editing the CSS. I covered one of them in depth for the Drupal Gardens Essential Training Course. Definitely check that out to learn how to make exportable theme using the Drupal Gardens Theme Builder. But there are also two other Graphical Theme Editors that are available as Standard Drupal Modules to install on your own site, the first one is Sweaver, which I'll cover in this video and the other is Livethemer.
Here we go with Sweaver. First to we get the module from drupal.org/project/sweaver. You'll notice that it requires Chaos Tools, which we already installed and jQuery UI, but that's already built into Drupal 7. So we copy it and install as usual, and paste it in. Scroll down.
Now let's go back to our home page where you'll see something quite different, this is a Sweaver palette down here. You see how it works quite simply. Go around the page, point and click at any part of it. Like let's say this text right here. Immediately you'll get ways to change the appearance of that text. You can change its background, its borders and spacing, and so forth. I am going to show something a little bit more complicated. This is an h2 right here, but you'll noticed that there are other h2s on the page. So it selects all of them. You could change the font, and as you expect, it changes all of them.
But what if you only wanted to change one of them? Well, then go up to the full path here and you could select or deselect these. Like let say we only want the one that goes with node-8, we check that then we'll make more changes. Let's make it a little bit bigger than all the others. As we scroll down, we see, yeah, it only affected that one. As with anything in CSS this can be the tricky part figuring out exactly what it is you're going to affect, but Sweaver makes it much, much easier than if you're playing around with CSS text files.
You can do other things besides change the font. You can get a Background or change the Spaces around it, so I'll just write it out. Or pretty much anything else you would do with CSS. When you're done making your changes, you click Save, then you name the style. When I do this, I usually save it with a name that includes the theme I am using. In this case Bartik. I can Save and continue or Save and publish, which actually makes this a live site.
We can check that of course by going to another browser and loading it up. Yup, and there is our change. Now you might be asking yourself, where do these changes actually gets saved? I'll show you that by going into my Terminal program. I am already at the doc root for this site. Now normally if you change the theme, it's is going to go into sites/all/themes. When I take a look at what's in that directory, you'll notice that there isn't anything actually that is related to Sweaver. Instead, the changes that Sweaver makes get saved in your files directory.
So we go into default/files and you'll notice that there is now a directory called sweaver, and there it is. There is the draft version that we had and a live version. So far, so good. Now we're going to go down into the rabbit hole, because you see, the options that I showed you so far are only a small percentage of what's available. I'll go back and show you what I mean. Obviously there are all the other things you can do with the Font, and the Background and Borders and Spacing.
This other tab is still empty, but that's going to change in a minute. To expose all of its power, we go up to Configuration, then down to Sweaver, which is under User Interface. This page has five tabs and I'll go through them very quickly, because as you'll see, there are lots of options. This first one allows you to Exclude paths. By default excludes some of the more commonsense ones. For example, when we're on an administration page, like the one we're on right now, we don't want that Sweaver palette popping up in front of us. It's also set up by default, so that when you point at the Sweaver palette itself, it doesn't bring up the Sweaver controls; that would be sort of redundant and you'd end up in this infinite loop sort of.
And then there are some other geeky things down here. If you don't know what they mean, don't worry about them. Now let's continue on. You can change the order in which all of the options appear in the Sweawer palette -- that's not just for the Form; it's also Selectors and Properties and so forth. And you can add additional capabilities to Sweaver. For example, let's add this Palettes and Switch Theme options and Save configuration. Then let's go back and take a look and watch what happens to the palette when we do.
See, we now have a Switch theme tab, and as we go through, we see that other things have changed as well. Moving on, let's go back and configure our Sweaver screen again. After you've built up a library of styles, you can save them here and then there are some additional options. For example, if you want to be able to delete them from the Sweaver interface, you just click the Show delete Tab, and finally, some controls having to do with images. Now let's get back to how Sweaver actually does all of this.
There is one potential problem, which is that the changes you make don't actually become part of the theme. They're in that Sweaver folder I showed you earlier with your site files. Sweaver then knows to look where it is and render your theme to the screen. That means you can't actually hand this theme off to someone else, unless they're also running the Sweaver module. One good thing though is, you can take a look at the CSS and use that in your local.css file. Let's take a look, for example, at what we changed so far. Yup, it's just ordinary CSS, copy it and paste it, then you can turn off Sweaver.
In this way, I think that Sweaver's method of saving files is actually a benefit; because the way Sweaver delivers both ease of use for beginners and a finesse solution for experts is really handy. Now the last thing I'm going to do before we go is to turn off Sweaver, because obviously to continue with the course and when you're launching a site, you don't want this popping up in front of people after you finished designing your site. So I'll close this out, go up to Modules, all the way down to Sweaver, Save configuration, and when we close out this overlay, we see that the site is back the way we wanted it.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 96653 Viewers
56 Video lessons · 110364 Viewers
71 Video lessons · 79196 Viewers
131 Video lessons · 37977 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.