Theming

New site: Kola Designs

Kola Designs Background Image

Well, its been a long time coming, but I finally took the time to start setting up my new business' website: http://koladesigns.com. 1 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.

Don't Fear the Unknown, use Ellipses Marks Instead

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:

Syndicate content