A comprehensive look atDrupal Themeing

North East Ohio Drupal Users Group

Zen◦ http://drupal.org/project/zen

Fusion◦ http://drupal.org/project/fusion

Well documented php and css files.

Lots of easy-to-access classes and ids for CSS developers.

Classes on body include items like:◦ .logged-in◦ .not-logged-in◦ .front◦ .not-front◦ .node-type-story◦ .node-type-blog

This can allow CSS developers to do things like:◦ have a different color for a given page item for non-logged-in users◦ have a larger header section on the front page◦ put a different background color on a given node type.

Automatic (table-less) column resizing for 1, 2, and 3-column layouts

Separate layout.css file to allow for changing the type of column layout

A print.css file optimizes print display automatically when sent to a printer◦ removes, sidebars◦ nav elements◦ optimizes font size◦ adds text to links showing href

Well documented php and css files.

Classes on body include items like:◦ .logged-in◦ .not-logged-in◦ .front◦ .not-front◦ .node-type-story◦ .node-type-blog

Requires the Skiner Module◦ http://drupal.org/project/skinr

Cross-browser compliant configuration of layout through the GUI◦ set block width◦ alignment◦ position

Adaptive Theme◦ http://drupal.org/project/adaptivetheme◦ highly configurable, HTML5 starter theme for Drupal◦ theme settings to ease theme and site development such as layout

control extra CSS classes Skinr support

Framework◦ http://drupal.org/project/framework◦ Supports one, two, and three-column layouts with source ordering◦ Set to a 12 column grid of 960px◦ CSS file is highly organized, including a table of contents, section

flags, alphabetical properties, etc.◦ Includes a CSS reset and a list of CSS utility classes◦ Uses HTML 5 structural markup

Genesis◦ http://drupal.org/project/genesis◦ Standards compliant◦ Modular CSS◦ Flexible layout options◦ Built in support for theming site sections◦ Content source ordered for SEO

Basic◦ http://drupal.org/project/basic◦ stripped down version of the ZEN theme◦ block editing links◦ theme registry rebuild◦ page template options◦ SEO-friendly and easy-to-modify layout◦ support of the Skinr module

page.tpl.php

page.tpl.php

html-reset.css:This is the place where you should set the default styling for all HTMLelements and standardize the styling across browsers.

layout-fixed.css:layout-liquid.css:Zen's default layout is based on the Zen Columns layout method. Thelayout-fixed.css file is used by default and can be swapped with thelayout-liquid.css file. These files are designed to be easily replaced. If youare more familiar with a different CSS layout method, such as Blueprint or960.gs, you can replace these files with your choice of layout CSS file.

page-backgrounds.css:Layered backgrounds across scattered divs can be easier to manage if they arecentralized in one location.

tabs.css:While most of the CSS rulesets in your sub-theme are guidelines without anyactual properties, the tabs stylesheet contains actual styling for Drupaltabs, a common Drupal element that is often neglected by site desiners. Zenprovides some basic styling which you are free to use or to rip out andreplace.

pages.css:Page styling for the markup in the page.tpl.php template.

blocks.css:Block styling for the markup in the block.tpl.php template.

navigation.css:The styling for your site's menus can get quite bulky and its easier to seeall the styles if they are grouped together rather then across theheader/footer sections of pages.css and in blocks.css.

views-styles.css:Views styling for the markup in various views templates. You'll notice thisstylesheet isn't called "views.css" as that would override (remove) the Viewsmodule's stylesheet.

nodes.css:Node styling for the markkup in the node.tpl.php template.

comments.css:Comment styling for the markup in the comment-wrapper.tpl.php andcomments.tpl.php templates.

forms.css:Form styling for the markup in various Drupal forms.

fields.css:Field styling for the markup produced by theme_field().

print.css:The print styles for all markup.

ie7.css:ie6.css:The Internet Explorer stylesheets are added via conditional comments. Many

CSS authors find using IE "conditional stylesheets" much easier then writingrulesets with CSS hacks that are known to only apply to various versions ofIE. The full conditional comment syntax can be found on Microsoft's website:http://msdn.microsoft.com/en-us/library/ms537512.aspx

/****************************//* LOCAL CSS *//****************************/

/* Put your custom CSS and CSS overrides in this file and *//* rename it local.css. By restricting your CSS changes *//* to local.css, your changes will not be overwritten when *//* upgrading to a new version of this theme. You can also *//* use a local-rtl.css file for the equivalent in RTL. */

/* Steps to activate local.css: *//* 1. Add your custom CSS to this file *//* 2. Rename this file to local.css *//* 3. Clear cached data at admin/settings/performance */

Install and Enable Theme

From here on out we will just be working with the Fusion Theme

Administration Theme

RootCandy◦ http://drupal.org/project/rootcandy

Rubik◦ http://drupal.org/project/rubik

RootCandy is a 3 column theme focused on administration section.◦ Supports node/add /edit pages◦ Re-colorable◦ Icons◦ Top navigation by role◦ Simple dashboard◦ 3 column fluid or fixed layouts◦ Rootcandy dark sub-theme◦ Icons in compact mode◦ Sliding region

Rubik is a clean admin theme designed for use with the admin module.

Features a set of icons for admin pages provided by Drupal core and aggressive styling to reduce visual noise wherever possible.

Firebug makes it simple to find HTML elements buried deep in the page. Once you've found what you're looking for, Firebug gives you a wealth of information, and lets you edit the HTML live.

https://getfirebug.com/downloads/

Firebug makes it simple to find HTML elements buried deep in the page. Once you've found what you're looking for, Firebug gives you a wealth of information, and lets you edit the HTML live.

https://getfirebug.com/downloads/

HTML Selectors

ID Selectors

Class Selectors

And its packaged with Drupal

Drupal 5 to jQuery 1.2.6Drupal 6 to jQuery 1.3.2Drupal 7 to jQuery 1.5.2 and jQuery UI 1.8.11

http://drupal.org/project/jquery_update

Upgrades the version of jQuery in Drupal core to a newer version of jQuery.

Drupal 6 Drupal 7

page--node--1.tpl.phppage--node.tpl.phppage.tpl.php

page-node-1.tpl.phppage-node.tpl.phppage.tpl.php

block-module-delta.tpl.phpblock-module.tpl.phpblock-region.tpl.php

block--module--delta.tpl.phpblock--module.tpl.phpblock--region.tpl.php

node--nodeid.tpl.phpnode--type.tpl.phpnode.tpl.php

node-nodeid.tpl.phpnode-type.tpl.phpnode.tpl.php

Facelift Image Replacement Integrationhttp://drupal.org/project/flir

Facelift Image Replacement or FLIR, is an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via Javascript and visible to all modern browsers. Any element with text can be replaced!...

Typeface - Custom Fontshttp://drupal.org/project/typeface

With typeface you can embed custom fonts into your website, so you don't have to render text to images.

Here's what it takes to get going:

A font browsing interface allows selection of fonts from several providers:

Typekit.comGoogle FontsFont SquirrelKERNESTFontdeckFonts.com

Fonts are automatically loaded on site simply by clicking "Enable"; no need to create font files, write CSS, add JS, nor figure out different methods for every font provider.

Clear indication of license restrictions on provided fonts.Fonts can be applied to specific text on the site either by using the provided font-family identifier in theme CSS, or by typing a CSS selector directly in the @font-your-face interface.

3.1 + and iPad iPhone (iOS)

10 + and Opera Mobile 9.7 +

IE4 +

3.5 +

4.0 +

Install and Enable Module

Configure Module

Import your Fonts

Pick Your Font