ejhildreth's Blog - rants, raves, and occasional tips

Well, its been a long time coming, but I finally took the time to start setting up my new business' website: http://koladesigns.com. ¹ If you visit the page, there clearly isn't much to look at; yet. The site is being developed in Drupal 6 and I have an idea for how I want to implement the look and feel (theming). As anybody that has worked with Drupal can tell you, there is most definitely more than one way to skin this cat (pun intended). During this design process, it is my intention to blog about what I am working on so that I can keep a record of the solutions to any hurdles that I find along the way.

Day 1: The theme background image

To kick things off, I needed a potential color scheme to work with. For this project, I really wanted to base everything around the notion that I am powered by cola. Even though soda does not really come in glass bottles anymore, I decided to use a bottlecap as inspiration for my logo. Since this felt a little dated, I decided that maybe my site should go for a more retro look as well. This eventually lead me down the road to using Google Image search to look up images of 50's and 60's artwork that portrayed soda's glory years: the soda shoppe. Once I locked onto a set of colors that I liked, came the next phase: how do I make a web site look like a soda shoppe? The answer is, I don't know! However, I will take it a step at a time to try and implement it all the while trying to balance the limitations of CSS and Drupal Theming.

Now that KAMP has successfully been set up on a Kubuntu box, setting up multiple sites on one server is the next logical step. This allows you to do Drupal testing in multiple versions/setups at the same time on one localhost server. To begin, open up Konsole (command line utility) and change to the Apache2 sites-available directory (this is where Apache stores the setup files for each Virtual Host):

cd /etc/apache2/sites-available/

Next, login as root and copy the existing default setup file and name it to the "server" you want to use:

Using your favorite text editor, modify the newly copied file so that it points to the correct files (using VI in this example):

vi exampleSite

Modify/Add the following lines:

NameVirtualHost * to NameVirtualHost exampleSite:80
<VirtualHost *> to <VirtualHost exampleSite:80>
Add ServerName exampleSite
DocumentRoot /var/www/ to DocumentRoot /var/www/exampleSite/

Lullabot developer Addi Berry put together some great screencasts on how to setup local Drupal test environments on Windows, Mac, and Ubuntu. Even though I have been running Kubuntu as my primary OS at home for over a month now, I hadn't actually set up my test server yet! To make sure I didn't make a misstep, I used Addi's video as the basis for the setup I did on my machine, but command lineified it a bit:

1. Open Konsole
2. Login as root
   • sudo -s
3. Make sure that the repository is up to date
   • apt-get update
4. Install Apache, MySQL, PHP5, the PHP5 GD Library, and the PHP5 MySQL configuration
   • apt-get install apache2 mysql-client mysql-server php5 php5-gd php5-mysql
5. Enable Clean URLs in the conf file
   • vi /etc/apache2/sites-enabled/000-default
   • press i to go into insert mode
   • Change AllowOverride None to AllowOverride All in the <Directory /var/www/> section
   • press esc

In my role as a web designer at the Idaho Commission for Libraries, I design Drupal themes for our e-Branch in a Box project. On my most recent theme, I wanted to use a gradient background with rounded corners for the block titles. Since we run a multi-site setup, I was a little bit apprehensive to use a jquery solution and ended up using a background image instead. The problem with this technique is that when the block titles are too long, it would wrap around and not align in the image correctly. Since this was a theme for sites that I do not do the day to day maintenance for, I needed a way to catch the titles (the unknown) before they were printed out to the screen and shrink them up a bit. Template.php to the rescue!

Since all blocks are themeable, I went to the Drupal API and looked up the theme_block function. Next, I copied and pasted the function into my Template.php file and made the following modifications: