Adding Color module integration to your Drupal 7 Sub theme

By shane
Wed, 2012-12-05 20:01
comments
Daily Dose of Drupal Episode #61

Share with Others

Adding Color module integration to your Drupal 7 Sub theme can make changing colors easy via the admin interface.

Note: Make sure you have the color module enabled.

In this episode you will learn:

  • How to add color module integration to your Drupal 7 Sub theme
  • How to add an additional color scheme to your Drupal 7 Sub theme

Welcome to another Daily Dose of Drupal, this is Episode Number 61. As always I’m Shane, you can follow me on Twitter @smthomas3 if you haven’t already, you can also go to codekarate.com and sign up for the newsletter over here on the left. Yesterday we went over how to create a Drupal 7 sub-theme.

Today we’re going to be extending that a little bit more and I’m just going to show you how to use or how to use the Color Module or integrate the Color Module into your Drupal 7 Sub-Theme. As you remember yesterday we made a quick sub-theme based on the Bartik Module which comes with Drupal 7.
So I’ll go ahead and show you how that looks and we’ll get started. So we have our themes directory of our site we have Code Karate Bartik which was the sub theme we created yesterday, it has some CSS, it has a template file, a logo screenshot and a couple of other things here.

So what we want to do is we want to add a color module support so I’m going to flip over to the Bartik Theme real quick and show you what that looks like, as you can see if I come back to the homepage now here’s the standard Bartik Theme, it has color module support meaning you can use these preset colors or set your own if you want and if you save it and of course changes the colors and a little bit of … I guess just the colors and just out of the site, look at field so it has a little bit of different look to it.

We’re going to make that work in our sub-theme that we created. So we’re going to go ahead and set this back as a default, our sub-theme we created yesterday, as you can tell the styles are a little off.

So the first thing that I’m going to do is I’m going to go into our Info file and I’m going to get rid of this style that CSS File, so I’m going ;to save that, I’m going to delete that and this will make sure that it’s not using the CSS from our sub-theme anymore and it will in fact use the CSS from the Paste Theme, I believe we’re going to have to clear the cache, let’s give that a go, refresh the page and it should look just like the standard Bartik Theme which it does.

But you’ll notice when you come to the Settings on our sub-theme there’s no color settings. So a couple of things that we have to do; it’s not really complicated but there are quite a few steps. So we’re going to come in here into the Bartik Theme and there’s a Color Directory, we’re going to start by copying that over to our sub-theme, the next thing id if you notice in the Info File there’s a Style Sheet for colors that’s CSS.

I’m going to copy that over into our sub-theme and save that, I’m going to hop back into the Based Theme again and I’m just going to start by copying these colors to that CSS file and put it in the CSS folder of our sub-theme. Now that we have that we’re going open the template.php file in our sub-theme and I go ahead carry to that and I’m going to also open the template.php file from the Bartik Theme.

There’s two pre-process that we need to add in here; the first one is Bartik Pre-Process or Bartik Process HTML so I guess they’re not actual process functions, they’re not pre-process functions, we’ll copy this, I’m going to paste those in we’re going to remove everything but the color module portion, we also need to change the name because our theme name is now different.

So now we have these two pre-process functions in our sub-themes templates.php file, save that, we’re also going to open up that color directory. I’m going to show you what these files look like just so you can see them; we’re not going to be modifying one of them I believed.

As we open all those files up; the first one is color.inc, this one defines the different fields here and this one defines the different schemes. So here you can change your own themes if you would wish.

So Blue Lagoon is the default you can of course change the default colors for each of these sections, it has all of those color options, it also references the CSS file, the Logo file. I’m going to go ahead and change this to Code Karate Bartik, I believe that needs to be done, CSS file is relatively straight forward, there’s nothing you should have to touch in here, the Preview is just a preview and I don’t believe you have to touch anything in the Java Script file either.

So really all you needed to do was make a small change in this color.inc file and we’re going to clear the cache and give it a go and see if it works, clear the cache, hop up to back to our parents page, click on Settings and now you can see we have color integration, we’re going to give it a test to make sure that it actually works, try slate, you can see the preview is working, we’ll save it and it works, perfect.

So that’s really all there is to it and then you can of course come into this color.inc file and change this different schemes and also you may want to open up and take a look at this color.css file. This is where … this file needs to be in place in order to for this entire thing to work. So take a look at those and start creating your own color schemes and just add them in on the bottom, for instance we can just … just a quick example, we’ll call this codekarate and we’ll make just to keep it relatively simple, let’s change one value in there so it’s a little bit different than the slate.

Now if we come back and clear the cache and hopefully it’ll show up, for reason it’s not, let’s figure out why, we’ll change the title and see if that was doing it, everything else looks good, we’ll try it one more time and hope for the best, there it is, you can see it’s a little bit darker on top than the slate was, everything else looks pretty close to the same, save it and then we should be good to go and that’s all for it today.

Thanks again for watching the Daily Dose of Drupal, go ahead and follow me on Twitter if you haven’t already and let me know if there’s anything you want me to cover in a future episode. Thanks again!