Home » Drupal Collection

Changing Garland - A Practical Example

Submitted on Mon, 11/26/2007 - 23:37.

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 ThemeFor web sites, this refers to the "look and feel" of the site. It is also used to describe the code to produce that look.

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 themeFor web sites, this refers to the "look and feel" of the site. It is also used to describe the code to produce that look..

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 "themeFor web sites, this refers to the "look and feel" of the site. It is also used to describe the code to produce that look." 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 themeFor web sites, this refers to the "look and feel" of the site. It is also used to describe the code to produce that look.?" This technique should also work with any contributed themeFor web sites, this refers to the "look and feel" of the site. It is also used to describe the code to produce that look., 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" themeFor web sites, this refers to the "look and feel" of the site. It is also used to describe the code to produce that look.. For example, let's call it "nancy."

Copy the "screenshot.png" and "styles.cssCascading Style Sheet - a hierarchical means of specifying how to format HTML elements on the page" from the base folder into your new themeFor web sites, this refers to the "look and feel" of the site. It is also used to describe the code to produce that look. folder ("nancy"). Check out your themes configuration page now - voilá, you now have a new themeFor web sites, this refers to the "look and feel" of the site. It is also used to describe the code to produce that look. called "nancy." That was pretty neat, huh?

To change the Garland themeFor web sites, this refers to the "look and feel" of the site. It is also used to describe the code to produce that look. colors, you'll also need to copy the "color" and "images" folders to your new themeFor web sites, this refers to the "look and feel" of the site. It is also used to describe the code to produce that look..

Now, you can make changes here that won't affect the distributed cssCascading Style Sheet - a hierarchical means of specifying how to format HTML elements on the page file, so you can carry them forward from release to release.

Hint: You have modules that have their own CSSCascading Style Sheet - a hierarchical means of specifying how to format HTML elements on the page files. Don't modify those (moduleAn add-on, or extension, to Drupal to provide additional functionality; written in PHP. releases are even more frequent than Drupal

Drupal

An open-source content management system that is used on this site and is taking over the world. releases). Roll your moduleAn add-on, or extension, to Drupal to provide additional functionality; written in PHP. style overrides into the themeFor web sites, this refers to the "look and feel" of the site. It is also used to describe the code to produce that look. 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.cssCascading Style Sheet - a hierarchical means of specifying how to format HTML elements on the page" (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
LinkThe technique which points to another page, anywhere on the Internet, from the current page.#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 themeFor web sites, this refers to the "look and feel" of the site. It is also used to describe the code to produce that look. to be the default themeFor web sites, this refers to the "look and feel" of the site. It is also used to describe the code to produce that look..

Here's the scenario: I ran across an article on making your siteA logically grouped set of content - also web 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.cssCascading Style Sheet - a hierarchical means of specifying how to format HTML elements on the page" 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 siteA logically grouped set of content - also web 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 "linkThe technique which points to another page, anywhere on the Internet, from the current page." 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 siteA logically grouped set of content - also web site. and you know how to use the reference colors to automatically keep your siteA logically grouped set of content - also web site. colors in sync. There are a lot more CSSCascading Style Sheet - a hierarchical means of specifying how to format HTML elements on the page tricks you use, even limited to these four colors. Have fun!

Here's my base for going forward with the Garland themeFor web sites, this refers to the "look and feel" of the site. It is also used to describe the code to produce that look..

  /* 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'),
  ),
‹ Books OverviewupComparison of Links and Web Links modules ›
»