3 key Concepts in Drupal Theme
Theme it in Whole or in Part
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.
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
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.
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:
- copy Drupal folder to localhost, add “/sites/default/settings.php”;
- setup Mysql connection,setup Administrator account for Drupal
- running cron for updating drupal from reports/status report
- enable/disable Clean URLs to show without/with
?q=in the URL(by default is enable – need httpd.conf mod_rewrite support on server)
- 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)
Groups User at Drupal at Permission section
- One Super User (ID=1)
- Two groups build in – 1 Authenticated 2 Anonymous
- Add groups you need (User management/roles e.g. Contributing User )
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
- 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
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.
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
- CSS Message box (error, success, info..etc.)
General all kinds of web patterns
Button & Toolbar Icon
1 Knobs toolbar icon