Yidea's Blog

3 key Concepts in Drupal Theme

  1. Theme it in Whole or in Part

  2. With Drupal, you can either set a single unified look for the entire site with a single template, e.g. by default, you have Garland theme for both front end and back end admin

    or you can control the look and feel of the individual parts of the site with multiple templates, e.g. you can build one page template for your homepage , another for your interior pages.

  3. Build with Blocks

    Drupal placeholder – Block where content is displayed in a webpage.
    The administrator can assign a variety of output to the regions through Block manager.
    Modules are one of the most common source of output in Drupal. Module is standalone bits of code – that extend the fuctionality of site.

  4. Intercept and Override

    The best practice approach to customizing themes involves intercepting and overriding files and styles at the highest level of Drupal’s process – not altering the Drupal core files

Theme Engine

Drupal is distributed with PHPTemplate engine

Reignons & Blocks

Regions must be coded into your theme iles and are, therefore, primarily the province of the theme developer.
Blocks, on the other hand, can be created and manipulated by the site administrator from within the admin interface (without having to modify the code).

Default Garland theme – showing hard-coded “regions”


under the regions, there are the blocks


How Drupal displays a webpage


1 Files of a PHPTemplate Theme(*.tpl.php)



page.tpl.php does the heavy lifting in all PHPTemplate themes.

block.tpl.php, comment.tpl.php, node.tpl.php.etc. override the default theme (not required)

2 Files of a Pure PHP Theme(not employ PHPTemplate Engine)


In Chmeleon theme, the key files are chameleon.theme, common.css, style.css and chameleon.info



Drupal is a CMS, CMS is suitable for website :
have multiple contributors;
require a consistent look and feel;
have advanced functions,without lots of custom programming

Concept: node, content type ,core,module,theme,template

Drupal site examples:


Lullabot is training company supporting Drupal

Drupal Install and Config on Windows:

  1. copy Drupal folder to localhost, add “/sites/default/settings.php”;
  2. setup Mysql connection,setup Administrator account for Drupal
  3. running cron for updating drupal from reports/status report
  4. enable/disable Clean URLs to show without/with ?q= in the URL(by default is enable – need httpd.conf mod_rewrite support on server)
  5. config site information at /admin : 
    Site configuration: default front page,Name, email, slogan, mission,footer
    site building/blocks – setup layout of the pages
    site building/themes – theme of drupal and show/hide info.
    Reports/ status report and log entries(monitor website errors and usability,did users get the web page they want,what kind of errors they encountered, and their search word)

Managing User

Groups User at Drupal at Permission section

  1. One Super User (ID=1)
  2. Two groups build in – 1 Authenticated 2 Anonymous
  3. Add groups you need (User management/roles e.g. Contributing User )

Drupal Security

backup Drupal files and MySql database regularly

enable php filter module; disable php evaluator checkbox, put php code as input format, can not execute php code from user input


Create content on Drupal

Nodes type: page(static page like contact) ; story(can add comment); blog

Other nodes types(enable from Module and also set permission for target users to visit) : forum, polls

title ; body(html) ; menu link ; Input format(Full HTML); Revision(create new revision, log message: create page); Comment setting(disabled) ;Publishing option(Published, Promoted on front page-always show on front page)

enable Module : blog and path(allow user to rename URL to repalce “node/3” with “about us”)

taxonomy : to require user specific category of the article

Layout of Drupal (by default –3 col Garland theme)

check www.themegarden.org  for more themes

themes might have: liquid layout , color flexible

Block of Drupal

1 add block by enable new module

2 add block by manually add block

Theme of Drupal config

put new download themes(unzipped) which is not come with drupal installation to site/default/theme (NOTE: themes working version should syn with current version of Drupal on host)

style.css is the one we should look into, style-rtl.css is for the language that read from right to left.

use Web developer css/edit css on Firefox to test and edit style.css, make sure you backup the original style.css before you edit it .

Module of Drupal

    Php snippets for Themes customize 

Read the to be used module’s documentation on drupal.org through before use it.

How to setup a new module ?

  • set read/write rights default folder,unpack downloaded Module to sites/default/modules
  • enable the module in admin/site building/ module ,find it at the end of the page.
  • config the module, the module sometimes doesn’t work because there are some required conditions like “enable necessary modules” ,set up google analytics account

Useful Module

  • CCK
  • Captcha
  • FCKeditor
  • google analytic
  • content display/ calendar
  • pathauto 1.1(depend on token module )
  • Poormanscron (replace the cron application on server if the server does not support cron)

Create Favicon Icon on Browser

  • using PS and Icon workshop to create 16px*16px with 256 color *.ico file
  • <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
  • HTML Title format

    website name(company name) – current webpage title/slogan
    $data[‘html_title’]=‘Band Equity Group – Band To Fan Marketing’;


read these links on CSS GRid Framework first before start

which css framework should I use

YUI Grids VS Blueprint
YUI Grids vs Blueprint 2

YUI’s advantage is “em” based layout
YUI has a YUI Grid Builder
YUI lacks a Typography CSS that provide an easy way to achieve consistent vertical spacing without resorting to pixed-sized font
Blueprint has a Bluepring Grid Css Generator which makes easier for people to setting up a flexible grid system that fits current custom project
Blueprint uses pixels to set sizes for layout.
This makes elasticity not happening.

Easy Solution:

using YUI for most part and employ Blueprint’s forms.css and typography.css

Why Grid Design?

“Virtually any website you design should be based on a grid. Grids lend a sense of structure to your site and improved usability for your visitors. And designing to a grid can simplify your design process and make you a more efficient designer.”

  • Unable to load the requested class: firephp
  • solution: change file name FirePHP.php to firephp.php


Form design style

Form design using fieldset-legend-label structure with ordered list

"The beauty of using an ordered list is that it adds an extra level of semantics to the structure of the form, and also makes the form display quite well in the absence of styles.The OL provides additional information for some screen readers that announce the number of list-items when they first encounter the list."

each <input> has a class="text" type="text" attribute – this is a handy way to accessing styling a form element,because IE6 does not support CSS attribute selectors

Naming Form elements

If we put Form elements’ name <input name=’firstname’> as the same as the matching field in the database table , this will saves us a lot of time and energy when coding and testing.


Tutorial & experience


General all kinds of web patterns


Button & Toolbar Icon
1 Knobs toolbar icon




About me

Chase my dream, my little one


Blog Stats

  • 1,137 hits