From JoomlArt Wiki

Premium Drupal Theme officially available at ThemeBrain.com.

11 Drupal 7 themes are now FREE TO DOWNLOAD at Themebrain.

{{#customtitle:JD T3 Framework 2.0 for Drupal - Developer Guides|JD T3 Framework 2.0 for Drupal - Developer Guides}}

Contents 1 Introduction 2 Structure 2.1 Template engine 2.2 Base Theme 2.3 T3 Blank Template 3 Layouts 3.1 Introducing Layouts and Blocks 3.2 Default Layout 3.3 Layout Variations 3.3.1 Different block positions 3.3.2 Different block order within the layout 3.3.3 Different block styles 3.4 Mobile Ready Layouts 3.5 Block attributes and parameters 3.5.1 General block parameters 3.5.1.1 Block name 3.5.1.2 Block type 3.5.1.3 Block style 3.5.2 Generate additional div 3.5.2.1 Block markup 3.5.2.2 Block inner 3.5.2.3 Main inner 3.5.2.4 Wrap inner 3.5.3 Remove div 3.5.3.1 No wrap 3.5.3.2 No main 3.5.4 Middle column width 3.5.4.1 Column general width 3.5.4.2 Custom column width 3.5.5 Middle Positions 3.5.5.1 Standard Columns 3.5.5.2 Enabling mass positions 3.5.5.3 Inset Columns 3.5.6 Spotlight parameters 3.5.6.1 Total width 3.5.6.2 Custom width 4 Themes 4.1 Theme disambiguation 4.2 Theme Variations 4.2.1 The Default Theme 4.2.2 Color Contrast Themes 4.2.3 Graphics Rich Themes 4.3 Important notice 5 Profiles 5.1 What is a profile 5.2 Default Profile 5.3 Profile Variations 6 Override coding 7 Template administration 7.1 Global Panel 7.1.1 Global Panel Overview 7.1.2 Profile Override Settings 7.1.3 System Settings 7.2 Profiles Panel 7.2.1 Profiles Panel Overview 7.2.2 Profiles Typology 7.2.3 Editing Profiles 7.2.4 General Settings 7.2.5 Google Fonts API Settings 7.2.6 Menu Settings 7.2.7 Theme Settings 7.2.8 Layout Settings 7.2.9 Block Class Suffix 7.2.10 User Tools Settings 7.3 Layouts Panel 7.3.1 Layouts Panel Overview 7.3.2 Layouts Typology 7.3.3 Editing layouts 7.4 Themes Panel 7.4.1 Themes Panel Overview 7.4.2 Themes Typology 7.4.3 Uploading themes

Introduction

In this documentation section, we are going to explore the features of the T3 Framework for Drupal. We are going to explain:

• The structure - engine, base theme and T3 Blank Template;
• Layouts - definition, default layout, variations, block parameters;
• Themes - definition and themes disambiguation, default theme, variations;
• Profiles - definition, default profile, typology, variations;
• Template administration - global panel, profiles panel, layouts panel, themes panel.

Structure

Template engine

All Drupal Themes use the default theme engine, but T3 Framework comes with it's own engine to power up it's Templates. Let's have a look at this engine:

Base Theme

Similar to the Joomla! version of the framework, the Drupal version have a base theme to hold core default styling, profiles, layouts, blocks and template settings.

T3 Blank Template

The Drupal version of the T3 Blank Template adds some additional styling and blocks, because Drupal CMS provide several other types of content like: forum, book, etc.

Layouts

This feature was developed for JA T3 Framework 1.0 to allow multiple layouts for more flexibility in design. Click here to read more..
Now, JD T3 Framework 2.0 provides almost same features as the same version for Joomla!. Click here to read more..

Introducing Layouts and Blocks

Concepts and ideas behind

• Layouts are the files to hold the HTML generation of your Drupal powered website. They load other files called blocks to perform various functions. By using various styles and positions for these blocks you can create unlimited layouts your users can select and use for best convenience. These layouts are then loaded by the new template index.php file.
• Blocks is a Drupal specific feature that inspired the framework in the first place. The framework used this idea to create files to hold regions (module positions for Joomla!), perform specific script calls and prepare the HTML generation of several content types: comments, content items, modules, etc. As you know, the most popular elements: header, footer, left, right, spotlights, pathway, main navigation, etc.
• The idea is to have a website to use a single template, but to use a unique design for your homepage, another custom design for your Blog and another for your Forums. In other cases you may want your users to pick the most convenient layout.
• Layouts can be switched in front-end from the UserTools Panel.
• Layouts can be customized in the back-end using the built in editor.
• Layouts and blocks in theme variations or user created themes can override same files in the core base themes.
• Blocks typology:
  • blocks as separate files to hold specific regions: footer, mainnav, middle;
  • blocks that are automatically generated according to layout settings: spotlights, left & right, content-mass & column-mass;
  • blocks that manage specific functions such as a few user-tools, or the IE6warning that cannot be customized inside the layout configuration;
  • blocks that call for dynamically generated content such as: system messages or content items;
  • blocks that call for javascripts and stylesheets.

Default Layout

Layout blocks

• ie6 blocks set manage the Microsoft Internet Explorer 6 Warning Message;
• user-tools blocks set manage the front-end customization tools that front-end users can use to make navigation more enjoyable:
  • color.php block holds the theme switcher;
  • cpanel.php block loads all other user-tools mini blocks;
  • direction.php block manages the text direction of the template: Right to Left or Left to Right;
  • font.php block manages the font-size of the template;
  • layout.php block is the layout switcher itself;
  • layouts.php block detects all layouts both core and user created and displays them in the switcher;
  • layout-switcher.php block manages the layout switch;
  • menu.php block manages the menu system switch;
  • profiles.php block manages the profile settings for each page users navigate;
  • reset.php block provide reset feature to restore all settings to profile defaults;
  • screen.php block manages the template width switcher;
  • themes.php block manages the theme switch when required by the profile;
  • tools-mega.php block loads megamenu parameters;
• content.php holds the content component body call;
• fixheight.php holds a script to force usage of the same height of the left, main and left, and a fixed height for content mass and column mass positions;
• footer.php block holds module positions for copyright notices, other menus and other advertising;
• head.php block is used for system CSS file calls;
• header.php block holds website's logo and a module position for search modules;
• mainnav.php block holds the main navigation of the template;
• middle.php block is where your content actually is displayed: articles, products, galleries, and this block also incorporates left and right blocks previously designed as separate block files;
• navhelper.php block holds the pathway module position;
• spotlight.php is a block generator script to be used as top spotlight or bottom spotlight, no matter how much spotlight blocks you may want to use.
  
  

Layout Variations

In this section we are going to explain the methods on how to develop layout variations.

Different block positions

Different block order within the layout

Different block styles

Mobile Ready Layouts

Multiple layouts feature is also powering the Mobile Ready feature. These layouts have their own blocks sets optimized and developed according to specific standards. The Drupal Mobile Ready layouts are even more simplified. In the Profiles tab of the template administration panel, you can assign these layouts for each mobile device type.

Block attributes and parameters

JD T3 Framework comes with advanced layouts feature. Blocks that form layouts can be manipulated with a series of parameters and settings to easily change the HTML rendering behavior.

General block parameters

Block name

Expression: <block name="top" ...>
Purpose: this attribute serves as an identifier for the blocks, as there is always a chance some of your blocks to be the same type, so the framework needs to know how to identify them. The identifier refers to the layout position within the layout.
Example: <block name="left1">left</block>
Click here to find out more.

Block type

Expression: <block name="header" type="header" ...>
Purpose: this parameter sets the behavior and the functionality of the block as there are several files to manage behavior of these blocks:

• head.php
• header.php
• middle.php
• footer.php

Click here to learn more about block functions in the default layout. You will also learn that not all block types can be configured and don't even show up inside the layout file as they stand for specific template functions.

Block style

Expression: <block name="top" style="rounded" ...>
Purpose: this parameter sets a module style for all block modules inside a layout block. These styles are defined in the tpl folder located in the your_site/sites/all/themes/joomlart/core/tpl folder, so this way Drupal can understand how to render the modules. The styles list is:

• no style - the default block setting with no block style defined, uses the block.tpl.php file to provide support for block class suffixes;
• xhtml - mostly used for macro blocks like header, middle, footer;
• raw - uses the block-raw.tpl.php file to provide a clean design, with no additional divs, no style classes, no block class suffixes;
• rounded - uses the block-rounded.tpl.php file to provide support for a special div structure with basic styling for rounded modules.

You can create your own block styles, so please click here to learn how to create & customize these styles.
Using a block style for a macro block (top, middle, footer) this style will be used for all blocks inside.

Generate additional div

Block markup

Expression: <block name="left" name="top" markup="2" ...>
Purpose: a new parameter to generate some additional div tags within the left or right columns. The idea is to provide more flexibility to designers. Values of this parameter:

• markup="1" - default value, no effect;
• markup="2" - advanced markup, will add a div class="l" (l is for left) above the column and one div class="r" (r is for right) below, see example below..
  
• markup="3" - complex markup, will add two div tags: class="tl" (tl is for top left) and class="tr" (tr is for top right) above the column and two div tags: class="bl" (bl is for bottom left) and class="br" (br is for bottom right), and a two middle div tags. See example below...
  

Block inner

Expression: <block name="right" block-inner="3" ...>
Purpose: this parameter will add a number of inner div tags to wrap the block. The value you set here is actually how deep the div structure will be. The additional div tags will have class="block-inner1", class="block-inner2", .. class="block-innerX". See image below..

Main inner

Expression: <block name="right" main-inner="2" ...>
Purpose: this parameter will add a number of inner div tags to any block . The value you set here is actually how deep the div structure will be. The additional div tags will have class="main-inner1", class="main-inner2", .. class="main-innerX".

Wrap inner

Expression: <block name="right" wrap-inner="3" ...>
Purpose: this parameter will add a number of inner div tags to any block. The value you set here is actually how deep the div structure will be. The additional div tags will have class="wrap-inner1", class="wrap-inner2", .. class="wrap-innerX".

Remove div

No wrap

Expression: <block name="header" no-wrap="1" ...>
Purpose: removes the div with class="wrap" that wrap the block for any macro block that fills the entire width of the template (header, mainnav, middle, footer, etc).

No main

Expression: <block name="header" no-main="1" ...>
Purpose: removes the div with class="main" that wrap the block for any macro block that fills the entire width of the template (header, mainnav, middle, footer, etc).

Middle column width

Column general width

Expression: <block name="middle" type="middle" colwidth="20" ...>
Purpose: this parameter sets a default column width for the left, component body and right blocks inside the middle block. Left and right blocks use a column width of 20%, and main body will use the remaining 60%.

Custom column width

Expression: <block name="right" width="25" ...>
Purpose: this setting will override the default column width of 20% set for all blocks in the middle block. A higher value of this parameter will increase the width of left and / or right blocks, and will decrease the width of the main body block.

Middle Positions

Standard Columns

Purpose - middle.php macro block can render a column for each of the left, content-body (known as main) and right blocks, but can also render a column for the content-body and left & right joined into second column. Each column have distinctive class rules to be styled separately for each layout.
Variations

• left + body + right
  
  <blocks name="middle" colwidth="20" fixheight="1">
  <block name="left1/left2">left</block>
  <block name="right1/right2">right</block>
  </blocks>
  
  
• left + right + body
  
  <blocks name="middle" colwidth="20" fixheight="1">
  <block name="left1">left</block>
  <block name="left2">right</block>
  </blocks>
  
  
• body + left + right
  
  <blocks name="middle" colwidth="20" fixheight="1">
  <block name="right1">left</block>
  <block name="right2">right</block>
  </blocks>
  
  
• other variations
  • right + left + body
    <block name="left2">left</block>
    <block name="left1">right</block>
  • body + right + left
    <block name="right2">left</block>
    <block name="right1">right</block>
  • left + body + right
    <block name="left2">left</block>
    <block name="right2">right</block>
  • etc

Enabling mass positions

Purpose: enables you to use content-mass-top and / or content-mass-bottom, left-mass-top and / or left-mass-bottom, right-mass-top and / or right-mass-bottom positions as additional module positions. You can enable the content-mass positions anytime, but column-mass (left-mass-top, right-mass-bottom, etc) can be enabled only when left and right blocks join to for a column.
Variations

• left + body - all additional positions

• body + right - top additional positions

• body + right - various additional positions

Inset Columns

Expression: - <block name="inset1">left</block>
Purpose: allows you to group the main-body with left and/or right blocks to form a column with special div structure and styling classes.
Values

• inset1 - groups main body with left / right block, and sets the position of the left / left block to the LEFT side of the main-body;
• inset2 - groups main body with left / right block, and sets the position of the left / left block to the RIGHT side of the main-body.

Variations

• (left + body) + right
  <block name="inset1">left</block>
  <block name="right1">right</block>
  
• left + (body + right)
  <block name="left1">left</block>
  <block name="inset2">right</block>
  
• (left + body + right)
  <block name="inset1">left</block>
  <block name="inset2">right</block>
  
• left + (right + body)
  <block name="left1">left</block>
  <block name="inset1">right</block>
  
• (body + left) + right
  <block name="inset2">left</block>
  <block name="right1">right</block>
  
• other variations
  

Spotlight parameters

Total width

Expression: <block name="bottom-spotlight" type="spotlight" totalwidth="95" ...>user6,user7,user8,user9,user10</block>
Purpose: this setting will override the default width of the entire spotlight (100%) with the value you set here. In the expression above you can see a 95% width for the bottom-spotlight block.

Custom width

Expression: <block name="top-spotlight" type="spotlight" special="left" specialwidth="25">user1,user2,user3,user4,user5</block>
Purpose: - this will override the default 20% width for a single position within the layout, it could be the one in the right side, it could be the one in the left side, but let's examine these parameters closer:

• special="left" - this defines where is the module we want to use the custom width: left or right
• specialwidth="25" - this defines the new width value for this module within the spotlight block.

Themes

• Themes are in charge of filling a template with color and give your template a new look and feel.
• The default theme is the template itself, and theme variations override this default theme in order to have a different styling.
• Themes can hold CSS and image files to override everything in the core plugin styling, and also basic template styling.
• Themes can also hold html content components and modules overrides.
• Usually they override the default theme.
• They can also override layout blocks for customization purposes.
• In Profiles tab of the template administration panel you can use multiple themes for a single profile, and set an order of priority.
  
  

Theme disambiguation

We would like to settle some concepts to avoid confusion:

• Etymologically, template and theme are considered to be synonyms, but in web development they have given different purposes.
• Drupal defines Themes just like Joomla! would define Templates.
• T3 Framework Templates are Templates for both Joomla! and Drupal.
• The Drupal Themes are different from T3 Framework Template Themes.
• Other CMS use the styles word for what we call templates.

Theme Variations

• Theme variations override the base theme and have highest priority to style the template.
• They can be used to create unlimited color themes, with contrasting colors and graphics.

The Default Theme

This is the default theme supplied with the T3 Framework based template. This theme will override / add more styling to the base-theme in the core plugin. Let's have a closer look at the files and folders:

• blocks folder to hold the blocks you want to override;
• css folder to hold template.css to override general template styling and menu folder to override menu systems styling;
• images folder to override the logo and generally all graphics needed to have a custom theme design;
• info.xml file to hold theme information.

See complete structure of the template in this section.

Color Contrast Themes

This is a theme variation to override the default theme supplied with the T3 Framework based template. Let's have a closer look at the files and folders:

• css folder to hold template.css to override general template styling and menu folder to override menu systems styling;
• info.xml file to hold theme information.
  
  

Graphics Rich Themes

Important notice

The framework will load all CSS files, images, and layouts for:

• 1st: engine base-themes
• 2nd: default themes of templates with: layouts, CSS, images
• 3rd: other theme variations and user created themes

You must ONLY use additional files to override what is supplied by default, and keep all simple and optimized. No need to use same code in all template.css files.

Profiles

What is a profile

A profile is a presets feature to hold all settings for a JD T3 Framework based template for Drupal. These settings are hold in files inside the core template folder.
You can create unique profiles, with unlimited combinations of all Drupal Template settings to achieve several design goals, and these profiles you create are stored in your template local folder.
You can manage profiles in the Profiles Panel of the template administration.

Default Profile

This is the file for the default profile. It holds default values for all template settings:
your_site/sites/all/themes/engines/joomlart/engines/base-themes/default/profiles/default.ini

Profile Variations

Other profiles can only override some settings defined within the default profile. Example:
your_site/sites/all/themes/joomlart/t3_blank/core/profiles/your_profile.ini

This profile will only override the default theme used by the template with the orange theme, so as you can see, there is no need to repeat the entire profile code if the other settings are not changed.

Override coding

Similar to the Joomla! version of the framework, blocks, themes, profiles follow same override pattern. Click here to find out more. Below you can see the graphic representation for Drupal version of the framework.

Template administration

Just like for Joomla!, the template administration panel is AJAX powered and split into several sections so you can easily manage each of them:

• Global Panel - general settings of the template;
• Profiles Panel - allows you to manage profiles: create, clone, customize;
• Layouts Panel - allows you to manage layouts: create, clone, customize;
• Themes Panel - allows you to upload your custom themes.

You will find the administration panel to be friendly and providing usage instructions for each section, parameter or setting when you hover your mouse each of them.

Global Panel

Global Panel Overview

This panel allows you to set general template settings:

• Profile Override Settings
• System Settings

Profile Override Settings

T3 Framework allows you to use whatever profile for each and every page or taxonomy. The default profile is used for all pages by default, and in this panel you can create these profile override rules, so please go Administer - Site building - Themes, click Configure link for the T3 Blank template and follow this quick guide:

• Step 1 - in the Global Panel - Profile Override Settings, click the Click to add button.
• Step 2 - in the pop-up window you will type in the link you want to use a different profile. Click here to learn more about Drupal menu links.
• Step 3 - click the OK button of the pop-up window.
• Step 4 - in the Profiles column, click the empty field to open the profile selection.
• Step 5 - select the profile you want to use for this page.
• Step 6 - Click the Save configuration button located at the bottom of the template administration panel.

System Settings

This section allows you to Enable / Disable the Development Mode.

Profiles Panel

Profiles Panel Overview

This administration section allows you to:

• manage profiles
  • edit profiles;
  • clone profiles;
  • create new profiles;
  • delete profiles (user created only);
• customize profiles.

Profiles Typology

• core profiles - supplied as default profiles for the template, can be customized / reset to default settings, cannot be deleted
  
  
  
  
• user created profiles - created by user to use custom settings, can be deleted by user whenever he wants
  
  
  
  

Editing Profiles

We will explain how to edit a user created profile. Other profiles can usually override the settings of the default profile to provide layout design and color variations for your complex website. Here is a quick guide

• Step 1 - select the profile variation you would like to customize;
• Step 2 - click the checkbox for the setting you would like to customize;
• Step 3 - change the value of that setting by selecting one from a select box;
  (sometimes you need to type in your own values, but you will see all sections of this panel below)
• Step 4 - click the Save configuration button located at the bottom of the template administration panel.

Please note - when editing core template profiles, the framework will create profile overrides in the local profiles folder (user setup).

General Settings

This section allows you to set general settings for your template.

• Font-size:
  • small - 1 is for 10px and 2 is for 11 px
  • medium - 3 is for 12px, 4 is for 13px
    3 is the this is the default value
  • large - 5 is for 14px, 6 is for 15px
• Screen size:
  • AUTO - a fluid width calculated as 80% of the browser window
  • Narrow Screen - 750px width
  • Wide Screen - 950px width
  • SPECIFIED - requires to edit the parameter below
• Special width
  • FLUID - to use a fluid width percentage based. Example: 70%
  • FIXED - to use a fixed width. Example: 980px

Google Fonts API Settings

This section allows you to customize several font-settings for your template elements. Similar to Joomla! version of the framework, this feature is powered by Google Fonts API.

• Global - allows to set a global font generally applied to all elements of the template;
• Logo - allows to set a font for the Template Logo, only if the Text Logo is selected. Click here to learn how to configure the Site information settings, and click here to learn how to enable the Text Logo in your website.
• Slogan - allows to set a font for the Site Slogan, only if the text logo is selected;
• Block Title - - allows to set a font for all block titles;
• Page Heading - allows to set a font for all page headings;
• Node Heading - allows to set a font for all node headings;
• Main Navigation - allows to set a font only for the main navigation, no matter what menu system is used.

Additionally, for each element type you can use additional CSS, just like the above image.

Menu Settings

This section allows you to configure the main navigation of your website.

• Menu Type - this allows you to select the menu configured in Drupal to be used as main navigation. The default menu is JD Links.
• Menu System - this allows you to select a menu system to be used for your main navigation. The framework provide several menu systems:
  • Mega Menu - the most powerful menu system out there as it can load blocks, regions, and can combine vertical, horizontal and columns design to make the main navigation more friendly.
  • Split Menu - a menu system to display the sub menus vertically when a root menu item is active. The second level is displayed in a cascade style.
  • Dropline Menu - very similar to Split Menu but it has an additional ability to show sub menu items on mouse hover.
  • CSS Menu - the most popular menu system to use a simple cascade design, with no script required.
• Effect In & Effect Out Mega Menu only - both settings use several effects to change the animation type: bounce, elastic, quart, circ, etc;
• Duration In Mega Menu only - the animation time in miliseconds for the menu when shows up
• Duration Out Mega Menu only - the animation time in miliseconds for the menu when disappears
• Delay Mega Menu only - the delay duration in miliseconds for the menu to disappear starting mouse-out.

Theme Settings

This section allows you to configure theme settings for the profile.

Additional themes can be added to override the default theme. To add a new theme, please follow this quick guide:

• Step 1 - click the Edit icon to open theme select box;
• Step 2 - click the check-boxes to select the themes you would like to add;
  

• Step 3 - click and drag the themes to change their order
  • the last one in the right is the default theme, it has the lowest priority and cannot be dragged;
  • the first in the right has higher priority;
  • NOTE - you should not add all themes in this array as it will slow your website.
• Step 4 - click the Save configuration button located at the bottom of the template administration panel.

Layout Settings

This section allows you to set a layout for each device readers may have.

• Desktop Layout - allows you to set a default layout for desktop computers / laptops.
• Handheld Layout - allows you to set a designated layout for Windows Mobile Devices, Android Devices, BlackBerry and others, or you can set a layout you have customized for these devices.
• iPhone Layout - allows you to set a designated layout for iPhone devices or you can set a layout you have customized for these devices.

Block Class Suffix

This section allows you to set a class suffix for each and every blocks. To add a new class suffix for a block, you just have to:

• select it,
• type in the class in the empty field,
• click the Add button.

To apply the changes you will have to click Save configuration button located at the bottom of the template administration panel.

User Tools Settings

This section allows you to Enable or Disable some customization tools and the T3 Framework logo in the bottom of your website.

• Show T3 Logo - allows you to turn ON / OFF the T3 Framework Logo in the website footer.
• Show Font Tools - allows readers to change the font size to make it easier to read.
• Show Screen Tools - allows readers to change the width of the template. They can select: Wide screen, Narrow Screen and Full Screen.
• Show Profiles Tools - allows readers to switch profiles. This switcher shows up when you have at least 2 profiles.
• Show Layouts Tools - allows readers to switch layouts.This switcher shows up when you have at least 2 layouts.
• Show Menu Tools - allows readers to switch menu system.

Layouts Panel

Layouts Panel Overview

This panel allows you to manage layouts:

• clone (all layouts)
• edit (all layouts)
• reset (core layouts)
• rename / delete (user created layouts)

Layouts Typology

As you can see the image above there are two types of layouts:

• core layouts supplied with the template, they are stored in core folder
• user created layouts (clones of core layouts, or added by user), they are stored in local folder

Editing layouts

To edit a layout, go to the Layouts Panel of the template administration panel, click the Edit button for the layout you want to edit, and follow this quick guide:

• Step 1 - Rename the layout (core layouts cannot be removed / renamed)
• Step 2 - Edit the layout, click here for more information about block settings, and click here to learn more about layout variations;
• Step 3 - Click the Save button to apply the changes to the layout.

Please note: By editing core template layouts, the framework will create layout overrides in the local layouts folder (user setup).

Themes Panel

Themes Panel Overview

This administration panel allows you to:

• view all themes supplied with the JD T3 Framework 2.0 powered templates for Drupal
• view themes version information
• upload themes
• manage user created themes

Themes Typology

• core themes - they are supplied with the template, they are stored in the core folder, cannot be removed;
• user added themes - they are created by user and uploaded in the local folder, see section below.

Uploading themes

Please follow this quick guide:

• Step 1 - create your theme, click here to learn how
• Step 2 - pack your theme into a zip archive
• Step 3 - in the Themes Panel click the Upload file & Install button, browse your theme, and the theme will be uploaded via AJAX.
• Your new theme will be listed in the Local Themes section of this panel.