Drupal 7 Sweaver Module: Change your theme style with no CSS code

By shane
Sat, 2014-12-13 19:00
Daily Dose of Drupal Episode #185

Share with Others

The Drupal 7 Sweaver module makes it easy to change the style of your Drupal theme without having to write any CSS code or dig through any template files. The Sweaver module provides a simple to use designer toolbar that sits at the bottom of the page and allows you to instantly change the look of your Drupal theme.

The interface itself is not perfect, there are a few bugs with the toolbar, however it's still incredibly useful. You can change fonts, borders, spacing, backgrounds and much more. Plus you can even add your own CSS properties to extend the module to do exactly what you need it too. You can also easily save and load different saved styles making it easy to change the entire look of your site at a moments notice.

If you are already an experienced Drupal themer, this module is probably not for you. However if you are just getting started with Drupal or don't know much about CSS, subthemes, or theme template files, this module might save you a lot of time.

Here are the basic steps for using this module:

  1. Install and enable the Drupal 7 Sweaver module
  2. Use the style tab of the Sweaver design toolbar at the bottom of the page to change your theme style without CSS. You will need to click the element on the page that you want to style. This will turn on the style options for you to change. You can configure the font, borders, padding, margin, background, width/height, and much more. You can also upload images using the images tab on the Sweaver toolbar.
  3. Once your style is the way you like it, you can click the Save tab to save your design. You can also choose to publish it to your Drupal site. This will allow all users to see your design (Note: you may need to clear the cache for anonymous users to see your design because of caching).
  4. You can save and load multiple designs using the Drupal Sweaver module

So check out the module and let me know what you think. I would always recommend going the Theme route if you know what you are doing, however this is still an option for those who want to stay as far away from code as possible.

Happy designing... no... happy Sweavering!!!

Hello everyone and welcome to another Daily Dose of Drupal. Today we’re on Episode Number 185. I am Shane Thomas, you can follow me on Twitter at smthomas3. Also make sure to follow Code Karate on Twitter at codekarate and check us out on Facebook, Google Plus and any of those other social networks. As I mentioned we’re episode 185 and today we’re going to be going over the Sweaver Module. And this is a module I recently stumbled across that basically allows you to easily change the look or the appearance of your website.

So rather than writing CSS code or using the CSS Injector module or something like that, you can use this module to quickly change styles and your theme on your Drupal website. It comes with a Caveat I guess you can say is in that…it isn’t the most reliable module, it’s a little funky to configure and to use but it does work pretty well and if you don’t know CSS or don’t want to learn or don’t want to actually create a new team, something like that.

This module allows you to quickly and easily make changes over top of your existing theme. So it’s a nice module for someone who’s maybe just getting started and doesn’t want to actually do a lot of the development on their own. So we’re using the 7.X-1.3 version of the Sweaver Module and we’ll go ahead and turn it on. So as you can see we have a pretty basic standard Drupal 7 installed right out of the box. And we’re not going to be able to get to all of the features of the module. There’s quite a bit but we’ll at least get a look at and you’ll get an idea of what it can do and if it’s right for you.

So once the module is turned on here we’ll go ahead and look at the various permissions it offers. There are two permissions; one is to configure all the settings and one is to actually use the front end editor. As you can see the Administrator has the options from those which is fine.

The menu or the configuration pages are located in Configuration User Interface Sweaver so we’ll go ahead and go there. Now there’s quite a bit of configuration you can do on this module. It’s very very configurable, you can change it and move things around, really optimize it for how you want it to work. This checkbox is the important one to make sure the editor is enabled. If this isn’t checked you can’t really use the module.

So I believe you’re going to need to keep that checked pretty much most of the time. You can specify specific paths, you don’t want the actual editor to show up on. You can specify certain selectors to exclude certain classes and certain properties that are allowed. We’re going to leave this page all at its default. We’ll go ahead and go to the Editor tab up here. Here you can configure where things show up in the editor.

You’re going to see that in just a second but you can go ahead and move things around to different tabs or sub-tabs within the editor itself. We’re looking at the selectors tab now and you can see here’s all the different selectors you can actually select and to change the style of. If you are not familiar with CSS, some of these tags and selectors that we’re going to go through might seem a little different but if you are familiar with HTML on CSS you’ll obviously recognize these right away.

So that last tab allows you to edit the selectors that you can use. Here you can change it or add properties so if you want to add another CSS property that’s not supported, out of the box you can add one and it should work. If you do have a property you’ll need to make sure come into the types and select where that property needs to show up.

So if I edit the block type you’ll notice it selects which property should be showing up when you select that type of item. There’s a whole bunch of different plug ins, we’re going to start with the defaults to just manage styles and the images plug ins but we’ll come in and we’ll add a few of these after we show how the basic used cased works. You can have it show the Delete tab if you want to be able to delete the different styles, you can have it auto saved as well and then images just allows you to upload different images for your theme. Okay so enough with the configuration, a lot of that probably didn’t make sense but once you see how it works on the front end you’ll kind of be able to understand what those options do.

So when I come back to the homepage on my Drupal 7 site, you’ll notice a little toolbar or style section down here. What this allows me to do is style various parts of site. You’ll notice as I hover, you can see in red dotted borders of what I’m selecting. So my first thing I’m going to do is let’s say I want to change this blue color. I know you can do this in the Theme settings but not all themes have color module integration. So I’m going to go ahead and select this, you can see the red around the border there and you see I have different options. I can change the font so I can do different things with the font. You’ll notice how some of this text gets bold when I click the bold. You can change the background which is what we’re going to do here in a little bit.

There’s borders and spacing so if you want to space that a little more you can do that, you can add padding, you can add border, you can add margins and then you can change the height and the width. So what we’re going to do is change the background. We’ll change it to some version of some red up here and when it looks pretty good and you can of course enter in the color directly. You’ll notice nothing seems to have changed. Well because this theme uses an image as well.

We need to change the background image to No Image. Just like that you’ll notice we now have a little bit of a red color there in the background and you can play around with that and get it to the color you want. The next thing we’re going to do is let’s change this area down here, this white to a different background color. Let’s change this to something grey, just a light grey maybe. And we’re going to copy this because we’re also going to need to change this area here to that same grey. You’ll notice you can just paste it in and now that matches up. And now as you can see the theme has changed. None of this is saved yet though.

So if I close out of this or I want to it as an anonymous user I’m not going to see these changes. In order to see the change or to publish this change I have to click this Save button here and you have to give your style a name. So I’m just going to call this Red Style for now. You can call it whatever you wanted, just so you remember what style it is and you can click Save and Continue Editing or you can click Save and Publish. I’m going to click Save and Publish and you’ll know that or you’ll not that it says the style has been published, you’ll also see there’s additional tabs down here and you can save over top of it or create a new style.

You can load an existing style or you can publish the changes that you’ve made. So there’s the basic used case, as you can see there’s a whole bunch of options in here. From fonts to your background, your borders. Pretty much anything all of the basic CSS properties are configurable right out of the box. So let’s go ahead and look at some of these other plug ins that you can use with the Sweaver Module.

So a quick go over on this Editor tab one more time and you’ll notice that these different properties are those sub-tabs that were on the left side when you’re on that style tab in the Sweaver Module. So this is how you can reposition these into different areas or if you add additional properties you can position them where you want them to actually show up. But let’s go ahead and go to this plug-ins tab and turn on the advance plug-in, we’ll also turn on the Switch theme and the Theme Settings plug-in. If you have the Font in Your Face Module you can turn on the Font Face plug-in and that will allow you to change the fonts and then give you more flexibility with what types of fonts you want to use. And there’s a few other plug-ins that you can also play around with that we’re not going to be going over but you can definitely look at them and see if they help you build out your theme.

Okay so once we save that we’re going to go back and you’ll notice there’s a few more tabs that are going to show up here. We now have an advance Switch Theme and the Theme settings tab. So we’re going to go to the advance and you’ll notice there’s a watchdog section which is just a list of all the changes that you’ve made in your style tab. There’s also an option for custom CSS. So if you have something that you just can’t get working or you need to override this small piece you can just add some custom CSS right here. The Switch Theme allows you to do exactly what it sounds like.

You can click and switch the theme. So is says you’re now switched to 7. One thing you will run into when you’re working with this module is you’ll notice that this toolbar or designer bar down here. Sometimes it stops working. You’ll notice that there’s a few little tweaks or corks with it. if that seems to happen, typically a quick refresh of the page seems to…for the most part you get rid of most of your issues and then it gets back to working again but just keep that in mind that it’s not exactly a perfect module. It works pretty well but there are some of course when you’re really using it that you might run into.

So as you can see if you switch the theme it seems to make it show up double. You click around a little bit and you refresh the page and then it seems to start working again. So we’re going to look at the Switch Theme, we’re going to look at the Theme Settings. This allows you to change your theme settings directly from in this toolbar here. So what we’re going to do is we’re going to change this logo. So we’re going to change the logo image settings. You’ll notice in an overlay it pops up this logo settings form which is the same formats on your theme page or you appearances page. So I’m going to go ahead and select the logo, click Apply and this logo now appears. So I’m going to save this and I’m going to give this a new style even though it is pretty much the same thing, we’ll call this one Code Karate and I will save and publish this.

Now if I go to Load you’ll see I’ll be able to select between my two different styles. Another thing I’m going to show you what you can use here is the Images tab. The Images tab allows you to upload various images. You notice you can double issue again. Alright so we want to be able to upload various images maybe for a background. So if you want to actually have a background as your image or an image as a background up here you can go ahead and start by uploading an image. So we’ll start by just uploading this snowflakes image since it is winter right now and we’ll call this one Snowflakes and we’ll also go ahead and upload one called Snowfall just so you can see that you can upload multiple images here and we will upload that one as well.

And now let’s go ahead and style this, we can get the toolbar to show up and let’s say we want to change this background image. You’ll notice that when I click on this image background there’s two new options here, Snowfall and Snowflake because we just uploaded these images. So if I go to Snowflakes you’ll notice my background images now turns to that snowflakes image. If I go to Snowfall it’s going to show this little animated gift which isn’t the best quality but you get the picture. You can go ahead and put any image you want in there and it’s going to show up as your background.

So now we have Snowflakes theme, we can change the colors, we could match around this and I could also then save this. So let’s say I wanted to change these colors back to white, if I wanted to save it we call this one Snowflakes. We’ll actually call it Winter, so we wanted a winter style theme. Alright we can save there, so now if we want to change back to the Code Karate one we can just go to load style and we’re back to the Code Karate, if we want to go back to the Winter one we just head Loads Style and it’s back to the Winter theme. So as you can see this allows you to create styles on top of your theme. It doesn’t actually change any of your theme settings. So if I were to uninstall this module or disable this module it’s going to go back to the theme that the original based Drupal theme. So I can show you that quick and then I can pretty much wrap this thing up.

There’s a lot of options here as you can see. It’s a little buggy but it does allow you to do some things pretty quickly as far as making theme changes across the board. So if I just uncheck the box for the editor you’ll notice that I can still see my theme which is good because then you can turn this editor off after you get it to a point where you’re happy with your style. But as soon as I disable the module, everything is going to go back to the way it was before. You can…after you publish it you can look at this as an anonymous user. You may have to clear the cache just because of anonymous…your pages maybe cache so go ahead and if you’re going to test that you might need to clear your cache but I’m going to go ahead and turn this module off and we’ll see that everything goes back to the way it was before I’ve started working with the Sweaver Module. We’re back to normal.

The only difference is the actual logo because I uploaded that from technically the Theme settings page is still going to show with the logo that was uploaded. So that’s the Sweaver Module, a lot to it. it’s fairly complicated, a little buggy but it works pretty good and it allows you to quickly and easily change styles on top of your theme and give you a whole bunch of flexibility with how you want this website to look with having to write any CSS code. Make sure to check out codekarate.com, check out the EBook, post comments if you like it, if you don’t like it and we’ll see you next time. Thanks for watching the Daily Dose of Drupal. Bye.