Week 10: Drupal Themes

Details about Final Project

The details about the final project due by July 30th have been posted.  I changed it so that you don't have to create a video tour of your site - you can just create one or more snapshots (pictures) of your site instead.  A single snapshot of the front page of your site should be sufficient to show that you met the requirements: that you changed the site name and logo, you created a navigation bar (primary or secondary links), you entered some content (such as a story or page or blog post), you created a custom block (like the contact info block from last week), and that you customized the visual theme, or look of your site, which is what we will cover this week.  See the final project page for more details and info on how to create a snapshot and how to turn in your project to me by July 30th.

Videos this Week

• Video 1: Drupal Themes
  • The video cuts off at the end.  The only other thing I was going to show you was adding this to the local.css file to make the tabs (primary links) float on the left side instead of the right site:

    #primary-menu {
       float: left;
    }
    

Assignments this Week

• No assignment, other than to work on your final project.

Notes

[See Video 1: Drupal Themes ]

This week we'll look at how to edit the theme of our Drupal site to do things like change colors, add backgrounds, etc.

In the video we just make some minor changes to our acquia-marina theme by creating a file called local.css under home->sites->acquia-drupal-site->acquia-drupal->themes->acquia->acquia-marina, and putting this content into it:

/* Hide the commercial link at the bottom */
#legal-notice {
  display: none;
}
/* Make the tabs show up on the left side
instead of right */
#primary-menu {
   float: left;
}
/*This is copied from my old styles.css file */
body {
    background-color: #01215c;
    background-image: url(images/mountains.jpg);
    background-position: 0px -100px;
    background-repeat: no-repeat;
}
#header-wrapper
{
   background-color: transparent;
}
/* Below makes the text and links in the header
white so they are readable on my background image */
#header-first h1 a {
  color: white;
}
#header-first #slogan {
    color: white;
}
/* The below just makes the header a bit bigger and
the mission statement section a bit thinner */
#header-first {
    width: 500px;
    min-height: 120px;
}
#mission {
    padding: 0px;
}
#mission p {
    margin: 2px;
}

The background image is the same image of the Wellsville mountains used in week 3.  I downloaded and put the large version of the image under themes->acquia->acquia-marina->images.

Seeing Changes to Your Theme

After you edit your local.css or style.css file in the theme folder, to see the changes firefox sometimes you may need to force the page to reload and clear any cached content.  I hold down shift-control-R to force refresh and reload everything.

Optional Further Activities

Some optional, more in depth theme changes you could try:

1 - Further customization of the Acquia Marina theme

Use an image editor like Gimp or Photoshop or Paint.net to change the tab-left.png and tab-right.png and other images in the "images" subfolder of the acquia-marina theme.  For example make the tabs be a different color than green.  This would also require changing the green color in the style.css file from #94CE18 to the color you choose.  You can do a global find and replace of #94CE18 to quickly change the color in JEdit.  Remember you can undo anything, too.

See also this page with notes about the acquia marina theme and this video about customizing the theme for more ideas and help on customizing this theme.  They provide a photoshop .psd version of the acquia marina theme look too that you can use to customize your site (but that of course requires you have some knowledge about using photoshop as in our 5230 class.

2 - Creating Your Own Custom Theme

For advanced HTML/CSS students, or those students interested in creating their own custom theme, check out these videos and tutorials on starting with the Zen theme and building from it by editing the CSS.  The Zen theme was designed to be a starter theme that is easier to customize, but it is more time consuming to design everything from the beginning so we didn't have time to cover it in this class this time.

To install the zen theme, go to the above link and download the .tar.gz file for the theme, and uncompress it like we did the modules last week and put the zen folder in the sites->all->themes folder.

There are numerous videos on blip.tv and google video about how to customize the zen theme for your site, and/or use photoshop to create a visual theme for your site in combination with the zen theme.