Home › Drupal Collection

Changing Garland - A Practical Example

Mon, 11/26/2007 - 23:37 — admin

Steven Wittens wrote a fabulous article in "Integrating with Color.module"< but it's a bit abstract for many Drupallers. So I thought I would try to make it a bit more concrete.

I'm also going to use a commonly overlooked bit of information from "Theming overview"< to make it easier for you to upgrade.

Making Your Own Theme<

Now, I will be the first to admit that I am not a themer. There are plenty of people who specialize in this, but I'm not one of them. I might be called "theming challenged." I just don't have the eye or the knowledge (yet) to create my own theme.

If this also describes you, don't despair. What I'm about to go through is very simple - okay, relatively simple.

First, while it is possible to do this in the core "theme" folder, that's not a great idea because core updates come along at (more or less) regular intervals and it would be nice if you could install those updates with a minimum of fuss.

So let's start by copying the core "themes" folder to your "sites/default/themes" or "sites/all/themes" (depending on how many sites you might be supporting). This will give you a "snapshot" of your core themes.

Now, are you ready to create your "custom theme?" This technique should also work with any contributed theme, but I'm going to stick to Garland from now on.

Locate your "sites/default/themes/garland" folder. Create a new sub-folder in it. Name it for your "new" theme. For example, let's call it "nancy."

Copy the "screenshot.png" and "styles.css" from the base folder into your new theme folder ("nancy"). Check out your themes configuration page now - voilá, you now have a new theme called "nancy." That was pretty neat, huh?

To change the Garland theme colors, you'll also need to copy the "color" and "images" folders to your new theme.

Now, you can make changes here that won't affect the distributed css file, so you can carry them forward from release to release.

Hint: You have modules that have their own CSS files. Don't modify those (module releases are even more frequent than Drupal releases). Roll your module style overrides into the theme you are now building.

Make It Really Your Own

Now it's time to make some more significant changes that will be pretty nice. I'm going to go thorough this in a way that you can play along with me. Each step should produce noticeable effects.

The Garland "style.css" (which you copied) has a comment that says "Color Picker: don't touch". Find that and back up one line. This is where you'll be putting your changes. I suggest starting it with something like this:

/**************************************/
/***   My new stuff and overrides   ***/
/**************************************/<

Remember, Mr. Wittens said that the first color scheme was the "reference" color set. In a base installation, this means the "Blue Lagoon" color set. Those colors are:

NameColor
Base#0072b9
Link<#027ac6
Header Top#2385c2
Header Bottom#5ab5ee
Text#494949

What this means to you is that "color picker" is going to replace any of these five values with your new choices (as long as they are above the "don't change" line. NOTE: I don't know if it is a bug or not, but in my experience, you can't actually use the "base" color.

Okay, so let's put this to a test. Make sure you've set your new theme to be the default theme.

Here's the scenario: I ran across an article on making your site easier for the human eye to quickly break down. In it, one of the key recommendation was to make your sidebar elements look different from your main content area. Well, let's try this: we'll make all our blocks use what Garland calls the "header top" color for the background. Remember, the "reference" for this is "#2385c2".

.block {
  background-color: #2385c2;
}<

Save the modified "style.css" and click the "Save configuration" button. Poof! All your blocks changed background colors.

Pick a different color set. The blocks changed with it. Pretty neat, huh?

Unfortunately, the text in the blocks is probably not very readable yet. You would think we could just throw a color: #ffffff;< line (it would be nice to use the "base" color for this) in there and be okay. Sorry, it's not that easy, except on the simple blocks.

Blocks like your Navigation block use more style names within it. Primarily, these are "menu" and "leaf." So let's add a few lines:

.block {
  background-color: #2385c2;
  color: #ffffff;
}
.block li.leaf a {
  color: #ffffff;
}<

Great! That changed almost all the lines. But it didn't get the expandable elements. Yes, they have different names.

.block {
  background-color: #2385c2;
  color: #ffffff;
}
.block li.leaf a {
  color: #ffffff;
}
.block li.collapsed a {
  color: #ffffff;
}
.block li.expanded a {
  color: #ffffff;
}<

Wow! My site looks better already!

Now let's add a bit more "fancy." How about a border on those blocks? Let's choose what the color picker calls the "link" color. The reference for this is "#027ac6."

.block {
  background-color: #2385c2;
  border: 3px ridge #027ac6;
  color: #ffffff;
}
.block li.leaf a {
  color: #ffffff;
}
.block li.collapsed a {
  color: #ffffff;
}
.block li.expanded a {
  color: #ffffff;
}<

Fabulous! Okay, let's make one more change, then I'll leave you to your own creativity.

I like the book navigation block to be a bit different so it catches the eye better. Well, we used the "header top" color for all our blocks, so how about the "header bottom" color for the book navigation block? That reference color is "#5ab5ee."

.block {
  background-color: #2385c2;
  border: 3px ridge #027ac6;
  color: #ffffff;
}
.block li.leaf a {
  color: #ffffff;
}
.block li.collapsed a {
  color: #ffffff;
}
.block li.expanded a {
  color: #ffffff;
}
#block-book-0 {
  background-color: #5ab5ee;
}<

Now you have a more distinct looking site and you know how to use the reference colors to automatically keep your site colors in sync. There are a lot more CSS tricks you use, even limited to these four colors. Have fun!

Here's my base for going forward with the Garland theme.

  /* Blocks */ 
.block {
  border:3px ridge #2385c2;
  background-color: #5ab5ee;
  color: #ffffff;
  font-size: 1.00em;
  line-height: 100%;
}

.block .leaf {
  color: #ffffff;
}
.block .leaf a {
  color: #ffffff;
}
.block li.collapsed a {
  color: #ffffff;
}
.block .expanded {
  background: #2385c2;
  color: #ffffff;
}
.block .expanded a {
  background: #2385c2;
  color: #ffffff;
}
.block .active {
  border:2px outset #027ac6;
  color: #ffffff;
}

/* Books - reverse scheme */
#block-book-0 {
  border:3px ridge #5ab5ee;
  background-color: #2385c2;
  color: #ffffff;
  font-size: 1.00em;
  line-height: 110%;
}
#block-book-0 .active {
  border:2px outset #0072b9;
}

/* Special blocks */
#block-event-1 a {
  color: #ffffff;
}
#block-event-1 .more-link a {
  padding-right: 50px;
  font-weight: bold;
}<

A Bonus

At no extra charge, I'm throwing in these additional color sets:

$info = array(

  // Pre-defined color schemes
  // base, link, header top, header bottom, text => name
  'schemes' => array(
    '#0072b9,#027ac6,#2385c2,#5ab5ee,#494949' => t('Blue Lagoon (Default)'),
    '#464849,#2f416f,#2a2b2d,#5d6779,#494949' => t('Ash'),
    '#55c0e2,#000000,#085360,#007e94,#696969' => t('Aquamarine'),
    '#d5b048,#6c420e,#331900,#971702,#494949' => t('Belgian Chocolate'),
    '#3f3f3f,#336699,#6598cb,#6598cb,#000000' => t('Bluemarine'),
    '#d0cb9a,#917803,#efde01,#e6fb2d,#494949' => t('Citrus Blast'),
    '#0f005c,#434f8c,#4d91ff,#1a1575,#000000' => t('Cold Day'),
    '#202020,#0633a7,#000000,#808080,#000000' => t('Gothic'),
    '#c9c497,#0c7a00,#03961e,#7be000,#494949' => t('Greenbeam'),
    '#cf68a2,#c71a72,#fbbcde,#d84b7e,#9b3b3b' => t('In The Pink'),
    '#ffe23d,#a9290a,#fc6d1d,#a30f42,#494949' => t('Mediterrano'),
    '#788597,#3f728d,#a9adbc,#d4d4d4,#707070' => t('Mercury'),
    '#5b5fa9,#5b5faa,#0a2352,#9fa8d5,#494949' => t('Nocturnal'),
    '#7db323,#6a9915,#b5d52a,#7db323,#191a19' => t('Olivia'),
    '#12020b,#1b1a13,#f391c6,#f41063,#898080' => t('Pink Plastic'),
    '#d48440,#d20404,#a1443a,#f6352c,#871d12' => t('Raging Bull'),
    '#29996a,#1f563f,#0ce4cc,#02ca90,#2a8d8a' => t('Seascape'),
    '#b7a0ba,#c70000,#a1443a,#f21107,#515d52' => t('Shiny Tomato'),
    '#18583d,#1b5f42,#34775a,#52bf90,#2d2d2d' => t('Teal Top'),
    '#6b91ff,#c97b26,#fdb9d5,#fa6196,#1a1919' => t('Victorian'),
    '#ffee00,#3e8bb1,#f6e304,#91fd0d,#419d39' => t('Wake Up Call'),
    '#f1db09,#bd8a05,#fbf498,#faec14,#6e4308' => t('Yellow Pages'),
  ),<

Comments

Thu, 06/25/2009 - 18:25 — Rodger (not verified)

CSS files

I have tried to change my CSS directly. I am using Garland. The system seems to create a new CSS file if I change any of the Theme parameters in Site Building - Themes in sites - default - files - color. Then if I change this file directly in my editor (as it seems to be the current default) and then later change the Site Building - Themes admin side yet another CSS file is produced by the system which is not the same as before so my site look reverts to some earlier version. Advice appreciated.

Tue, 09/08/2009 - 05:33 — admin

Two ways

There are two ways you can go. You can directly edit the files/color version, but as you noted, the next time you change something in the theme, it will get overwritten.

The "correct" way is to update the theme's base styles.css (above "Don't touch") and then regenerate the theme settings (I usually find it necessary to change the color set and then change it back). This can be rather annoying. It is supposed to be much better in D7.