Home / Comment permalink

S-Files: Customizing a theme with a sub-theme

This is the first in a two-part post about creating a sub-theme and using the sub-theme to customize the display of a views block on an Acquia Drupal site. The first installment will include creating the sub-theme and adding some CSS. In part two we'll get into updating the theming for a views block.

One of the questions that comes up frequently in providing support for Drupal is how to make changes to the theme. There is, of course, the option of opening up the files and making the desired changes directly. However this method causes no end of problems when it comes time to upgrade. However, starting with Drupal 6 there is a great new way of making changes and maintaining upgradability.

In this post we'll take a look at customizing the display of a views block displaying tweets from the twitter module. We'll use the Acquia Marina theme as the basis for our changes. First let's look at what the default display looks like.

As this screenshot shows if there are long words in a tweet they don't wrap and run off into other content on the page. The other change desired is to put the tweet's timestamp on its own line and have that at the right of the block. Here's a sneak peak at the end goal:

All Done!

To accomplish this with valid CSS and HTML we'll need to make some structural changes to the page. By default the tweet timestamp field is displayed in a couple levels of <span>. Since this is an inline designation it cannot contain a block element, or <div>, necessary to accomplish the desired styling. It is not necessary to fully follow the CSS nuances here in order to benefit from this post.

Creating the sub-theme. There are several elements that need to be copied from the parent theme. This is not always the case but is often the case. In using Acquia Marina the desire is to use most of the styles and add a few additional styles along the way. The sub-theme in this case is going to be called "My Acquia Marina" and have a canonical name of myam.

The first step is to create a directory named myam in the <docroot>/sites/all/themes directory. The files created in this post will go in this <docroot>/sites/all/themes/myam directory.

Several files and directories need to be copied from the <docroot>/themes/acquia/acquia_marina directory. The following files should be copied:

acquia_marina.info
icons/
images/
style.css
icons.css
logo.png

Once they are copied rename the acquia_marina.info file to myam.info.

The myam.info file will then look something like

; $Id$

name = Acquia Marina
description = <a href="/%3Ca%20href%3D"http://www.acquia.com">Acquia's</a>">http://www.acquia.com">Acquia's</a> Marina theme is ideal for blogs and community sites. Includes advanced theme settings and 15 flexible content regions for a variety of layouts. By <a href="/%3Ca%20href%3D"http://www.topnotchthemes.com">TopNotchThemes</a><br />core">http://www.topnotchthemes.com">TopNotchThemes</a>
core = 6.x
engine = phptemplate
stylesheets[all][] = style.css
stylesheets[all][] = icons.css
regions[sidebar_first] = sidebar first
regions[sidebar_last] = sidebar last
regions[header_middle] = header middle
regions[header_last] = header last
regions[preface_first] = preface first
regions[preface_middle] = preface middle
regions[preface_last] = preface last
regions[content_top] = content top
regions[content_bottom] = content bottom
regions[postscript_first] = postscript first
regions[postscript_middle] = postscript middle
regions[postscript_last] = postscript last
regions[footer_top] = footer top
regions[footer] = footer
regions[node_bottom] = node bottom
features[] = logo
features[] = name
features[] = slogan
features[] = mission
features[] = node_user_picture
features[] = comment_user_picture
features[] = search
features[] = favicon
features[] = primary_links

The first line and some extra lines at the bottom may differ depending on where and how the theme was downloaded. To make this .info file into a file for a sub-theme it needs to identify the base theme. This line makes that change

base theme = acquia_marina

The order of the file isn't critical so the change can go wherever there is a blank line. It would also be good to update the long name, which is displayed on the Themes page in the Drupal administration interface, and the theme description so we can tell it apart from the Acquia Marina theme. Changing the first couple of lines we end up with something like:

name = My Acquia Marina
description = A theme based on Acquia Marina

With these changes our myam.info file now looks like:

name = My Acquia Marina
description = A theme based on Acquia Marina
base theme = acquia_marina

core = 6.x
engine = phptemplate
stylesheets[all][] = style.css
stylesheets[all][] = icons.css
regions[sidebar_first] = sidebar first
regions[sidebar_last] = sidebar last
regions[header_middle] = header middle
regions[header_last] = header last
regions[preface_first] = preface first
regions[preface_middle] = preface middle
regions[preface_last] = preface last
regions[content_top] = content top
regions[content_bottom] = content bottom
regions[postscript_first] = postscript first
regions[postscript_middle] = postscript middle
regions[postscript_last] = postscript last
regions[footer_top] = footer top
regions[footer] = footer
regions[node_bottom] = node bottom
features[] = logo
features[] = name
features[] = slogan
features[] = mission
features[] = node_user_picture
features[] = comment_user_picture
features[] = search
features[] = favicon
features[] = primary_links

This does a few important things. It tells Drupal that we're making a new sub-theme based on Acquia Marina. It gives us a name to display in the theme list and tells Drupal we're going to use the same regions, style sheets and features that were defined in the parent theme. The sub-themes handbook page at drupal.org explains more about what we're not inheriting but that list includes the template.php, the tpl.php files and the screenshot.

With these files in place we're now ready to make some changes to the CSS files. The first change to make is to add some CSS to the style.css file that will cause the long words, in our case the URLs, to wrap instead of running off the edge of the block. Adding the following bit of CSS to the bottom of style.css will make this possible:

/*****************************
* My Acquia Marina Changes
*****************************/

/**
* Twitter Block
*/

#block-views-tweets-block  ul {
  word-wrap: break-word;
}

After refreshing our page we should now see the URLs wrapping to stay in the desired space. Note that if you have CSS aggregation turned on (Admin >> Site Configuration >> Performance) you'll have to clear cache to make these changes visible. Generally while working on CSS for themes it's desirable to leave the CSS aggregation turned off.

Next time we'll dive into the theming of views to make our display just what we desire.

Comments

Posted on by katefox (not verified).

Way cool, but a glitch ...

Shouldn't there be an equals sign here instead of a colon, as you did in the sample file?

"The first line and some extra lines at the bottom may differ depending on where and how the theme was downloaded. To make this .info file into a file for a sub-theme it needs to identify the base theme. This line makes that change

base theme: acquia_marina"

Posted on by tribeza (not verified).

Kate...I believe you are correct. It should be:

base theme = acquia_marina

It worked this way and not with the colon for me.

Posted on by Joshua Brauer.

Yes! Thanks to both for catching that. It has been fixed.

Thanks,
Josh
Acquia Technical Assistance Center

Posted on by doughogg (not verified).

Hi,

I set up a subtheme for acquia_marina, and it is working but the left region disappeared.

I found this page that explains how to preserve the regions in the subtheme:
http://acquia.com/node/40509 However I followed the directions carefully and it didn't work. My left regions is still gone.
Anything else I can try?

Thanks in advance for any help.

Doug Hogg

Posted on by turadg (not verified).

Looking forward to part 2 of 2. Is that still coming?