Skip to Content
 
 

BLANK 3 COLUMN TEMPLATE FOR DRUPAL - BUILD YOUR OWN 3 COL TEMPLATE FROM SCRATCH FOR DRUPAL

If you're like me, you look around and you just can't find the right template, which we all know --- Using a template can suck. And Why? Well, Because Lord knows we've ALL seen enough templates on the web today - BUT the Trouble is that with most -- You can spot them a mile away. It's like the early versions of mass pop up ads in the 90's. Don't get me wrong, I've seen some great sites built with templates. Even build a few myself. Nothing wrong with that. In some certain scenarios it works just fine. But if you are an "actual" company or identity on the internet... I think the fair thing to say is, take the time and make something a little bit more of your "own." This makes your site uniquely yours and doesn't make it look like a clone like everyone else. Or the obvious tip-off of a template -- it looks like something that just doesn't seem to fit right for YOUR application. So anyway. Here's the deal. If you are using Drupal - Here is a basic 3 column start you might find helpful to get you rolling. (because, again, if you're like me, just when you need this stuff you can never seem to find it on the net when you need it.) Anyway, this example just shows a basic layout core and how simple it is to integrate a 3 column layout into Drupal. So why would I want to use this?? Well. Good question. There are a lot of good 3 column themes already for Drupal out there that you could modify if you wanted - but this is for a core. This way, you can start with your own core and build up from there, rather than starting with someone's long list of additional muck and trying to figure out what to alter and "take out." It's a great way to start with a core and work UP -- add in what little you want -- leave out all the stuff you don't want in. You might want to put in some CSS resets, and find a good basic Drupal template that covers the Type Classes for each class such as Input or Menu or H1, etc and this will help create and define the "look and feel" of your website. (You could use Garland, for example, or BlueMarine.) This should cover good ground for a base start. Customize it the way you need it to be for the application and you are set. THIS IS PROBABLY ABOUT AS CLEAN AS YOU"RE GOING TO GET ON A 3 COL LAYOUT FOR DRUPAL. The CSS should be close to shorthand and the Page.tpl file should be pretty minimum. This is just my quick first attempt at setting up a clean 3 Col Drupal Starter theme, so if anyone has any comments about adding resets or altering the code then let me know. Oh, the Actual downloads of the files should be Way, Way, Way, down on the bottom of the article. I suggest you use them rather than copy and paste. Let me know if you can make any improvements or point other people to different related references. I just want to point out again, that this SIMPLE 3 Column Template is based on the Layout Gala CSS Layout #20. Which is an excellent resource for getting reference for CSS layouts and understanding how it works. Also, I want to point out, just how SIMPLE it can be to integrate CSS layouts into DRUPAL from scratch and that, in fact, creating a BASIC 3 Column, 2 Column or Alt template based on CSS is not ALL impossible or difficult, as MANY people would seem to think. YES. Creating CSS templates from scratch for Drupal or other CMS platforms can be overwhelming, but if you keep it simple and stick to a good core - IT IS possible. Building intricate layouts and templates in any CMS can be intensive as you want to make it, but starting simple and adding on might not be a bad way to go. If anyone finds this helpful, let me know. Good luck!

/* $Id: style.css,v 1.14.2.4 2007/07/09 03:50:59 drumm Exp $ */

/**
 * Open Source - As in help yourself, Free and Open *
 * SIMON AYRISS - http://www.designdog.net  04/08 *
 * BLANK LAYOUT BASED ON GALA LAYOUT #20 with a few Garland Classes *
 */

/**
 * ADD ON LAYOUT
 */

html,body{margin:0;padding:0}
body{font-family: "Lucida Grande",Verdana,sans-serif;
font-size: 12px;
font-style: normal;
line-height: 1.9em;}
p{margin:0 10px 10px}
a{display:block; color:#2153aa; text-decoration: underline;}
a:hover {color: #ffffff; backround:#2153aa;}
a:link, a:visited {color:#2153aa; text-decoration: none;}
a:active, a.active {color: #2153aa;}
div#wrapper{float:left;width:100%}
div#header h1{height:140px;line-height:80px;margin:0; padding-left:10px; color: #79B30B
border-bottom-width: 20px; border-bottom-style: solid; border-bottom-color: #999900;}
div#content{margin: 0 200px 0 230px}
div#content p{font-family: "Lucida Grande",Verdana,sans-serif;font-size: 12px;font-style: normal;line-height: 1.9em;}
div#navigation{float:left;width:200px;margin-left:-100%; padding-left:20px; background:#FFFFFF;}
div#extra{float:left;width:200px;margin-left:-200px; background:#FFFFFF;}
div#footer{clear:left;width:100%; background: #333;color: #FFF;}
div#footer p{margin:0;padding:5px 10px}
/**;
 * WORK WITH THIS FIRST
 */_____

**P.S.** Quick Tip:

make a new folder in your themes directory and Name it.
Download these two files below by right clicking or whatever for mac. :-) heh.
Make sure they are named: style.css and page.tpl.php
If not rename them.
Take the additional PHP files from the original Garland theme folder and
the INFO file (if needed for 6.) - block, comment, template, and node [tpl.php]
Open up style.css and page.tpl.php and figure out what you got.
If you need help - email me. Good luck.

For those feeling a bit more advanced and wanting to reference or write their own:
Check out this Theme Developers Cheat Sheet  __ WARNING - PDF DOWNLOAD.
http://www.minezone.org/blog/wp-content/uploads/2007/12/drupal-theme-dev...

 

** UPDATE ** //

NEW ARTICLES AND TEMPLATES HAVE COME OUT SINCE THE WRITING OF THIS POST AND I PLAN TO REWRITE THIS ARTICLE FOR DRUPAL 6 and POSSIBLY 7.
IF ANYONE HAS ANY INTEREST - PLEASE ADD A COMMENT BELOW OR EMAIL ME!

HERE is a REALLY GREAT article Chapter Three wrote regarding STARTER TEMPLATES that might also prove helpful!

http://www.chapterthree.com/blog/squiggy_rubio/review_drupal_6_starter_t...

AttachmentSize
style.css12.81 KB
page.tpl.php3.3 KB

Reply

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options


User login


 
Copyright 2011 DesignDog. / That's right. This would be made with Drupal.