From JoomlArt Wiki

{{#customtitle:JD T3 Framework 2.0 for Drupal - Customization FAQs|JD T3 Framework 2.0 for Drupal - Customization FAQs}}

Developing a T3 Framework Template for Drupal

Introduction

In this section we are going to show you how to develop a T3 Framework template for Drupal, a step-by-step guide from the developer point of view. Generally we are going to cover:

• the technical requirements;
• creating folder structure;
• prepare and edit files needed to make the new template work as a Drupal Theme;
• build the default layout and layout variations;
• build the default theme and theme variations;
• create the default profile and profile variations;
• customize the design of the template and themes.

Please note that this template was developed on JD T3 Blank v1.0.1 and JD Engine v1.1.2. Some of the code lines may change in time.

Preparation

Technical Requirements

To be able to develop your own template, you will need to prepare:

• the software tools
  • Adobe Photoshop CS3/CS4 or Gimp for graphics;
  • Adobe Dreamweaver or Notepad++ for code editing;
  • Mozilla Firefox with Firebug plugin for CSS play around;
  • FileZilla or any other FTP client;
• the enviromnent
  • localhost xampp, wamp or any Apache with PHP and MySQL server;
  • or
  • livesite preferably on a subdomain.
  • Drupal 6 installed on your development server, check server requirements here;
  • other resources will be added to this section shortly.

Create template folder

If you are developing on localhost, create a jd_template_name folder (use your desired name here) inside the themes folder. To do that on your livesite, you will need to use your FTP client. You can use whatever template name you want.

Copy general template files

The new template will need the basic files to be able to work as a Drupal template. To do that please follow these steps:

• Browse the t3_blank folder in your themes/t3_blank folder;
• Copy the following files from this folder to your new template folder:
  • logo.png - we are going to change it later;
  • t3_blank.info
  • template.php
  • theme-settings.php
• Rename these files according to your template name:
  • logo.png
  • jd_template_name.info (use your desired name here)
  • template.php
  • theme-settings.php

Create template file and folder structure

To override the basic design of the base theme and to make it work as a T3 Framework Template, you will need to have a correct structure. To do that, please create a folder structure inside the jd_template_name folder as presented below, or copy the files and folders from jd_t3_blank template:


Please note that you can create these blank CSS and XML files, but we recommend you to copy these files from jd_t3_blank template to ease and speed up the process.

Adjust template info file

The new template is ready to go, it only needs to have it's own information. To do that, you have to adjust the jd_template_name.info file (use your desired name here) as follows:

• replace "t3_blank" with "jd_template_name" (use your desired name here)
• add a slideshow region under the mainnav region
• replace all other information to your convenience, see our example below
  

Enable and set the new template as default

To be able to customize the template, you will have to set it as default template, so to do so, please go to your site administration section - themes, and follow these steps:

• Step 1 - find the JD Template Name template and check Enabled check box;
• Step 2 - click the Default radio button for JD Template Name;
• Step 3 - click the Save configuration button to save changes.

Enable Development Mode

Now you have to make sure your customizations are applied instantly every time you change the code or images, so you have to disable the template cache by enabling the development mode. To do that, you must browse the Themes Panel - Configure, select JD_Template_Name, and then follow these steps:

• Step 1 - click to open the System settings and select Yes for the Enable Development Mode option;
• Step 2 - click the Save configuration button.

Now you can start customizing your new template as it is ready.
Please note that you have to clear the Drupal core cache and also disable it on the entire process of template development.

Building the default layout

Core template layouts are stored in jd_template_name/core/layouts folder. If you have copied the files and folders from jd_t3_blank, you can skip this step. Else, we will build the default layout having 3 columns: Left - main - Right in main content. You must edit this file with a code editor outside the template administration - layouts panel - layouts editor.

For this design, we could use this configuration:

• TOP:
  • header
  • mainnav
  • slideshow (we are using a sample module to fill that region)
  • top spotlight
• MIDDLE:
  • left
  • main content body
  • right (rounded)
• BOTTOM:
  • bottom spotlight
  • navhelper
  • footer
    

With these blocks, the default layout XML file (default.xml) will look like this:

   <blocks name="top" style="xhtml">
       <block name="header" type="header" main-inner="1"></block>
       <block name="mainnav" type="mainnav"  main-inner="1"></block>
       <block name="cpanel" type="usertools/cpanel"></block>
       <block name="slideshow" type="modules" style="raw">slideshow</block>
       <block name="topsl" type="spotlight">user1,user2,user3,user4,user5</block>
   </blocks>
   <blocks name="middle" colwidth="20" fixheight="1">
       <block name="left1">left</block>
       <block name="inset2" style="rounded">right</block>
   </blocks>
   <blocks name="bottom" style="xhtml">
       <block name="botsl" type="spotlight">user6,user7,user8,user9,user10</block>
       <block name="navhelper" type="navhelper" main-inner="1"></block>
       <block name="footer" type="footer"></block>
   </blocks>

Save above XML into jd_template_name/core/layouts/default.xml, then refresh the page to test the layout change.

Calling additional files into layout

In some cases you might want to call for additional stylesheets or js files, here is an example on how to do that:

• Create new folders called js or css (if none) in your template root folder;
• Copy your files into the new folders;
• Edit the default (or any other) layout like in the example below:
  

   <blocks name="top" style="xhtml">
       <block name="header" type="header" main-inner="1"></block>
       <block name="mainnav" type="mainnav"  main-inner="1"></block>
       <block name="cpanel" type="usertools/cpanel"></block>
       <block name="slideshow" type="modules" style="raw">slideshow</block>
       <block name="topsl" type="spotlight">user1,user2,user3,user4,user5</block>
   </blocks>
   <blocks name="middle" colwidth="20" fixheight="1">
       <block name="left1">left</block>
       <block name="inset2" style="rounded">right</block>
   </blocks>
   <blocks name="bottom" style="xhtml">
       <block name="botsl" type="spotlight">user6,user7,user8,user9,user10</block>
       <block name="navhelper" type="navhelper" main-inner="1"></block>
       <block name="footer" type="footer"></block>
   </blocks>

Building the default theme

The default theme of the template has a higher priority than the core styling. The best thing to do is to use the default theme from the jd_t3_blank template and customize it for your needs.

For our example here, we are going to modify this theme to recreate the jd_purity template design, so in the following sections we are going to show you a step by step guide on the customization techniques.

Theme information

Before developing the default style for our template (default theme) we have to edit the info.xml file. Use your information in this file, here an example:

Calling additional files into the theme

You can also add additional files to be used for the default theme (or any other). Here an example:

Main style

So we are starting customization with the default theme, layout, settings of the JD T3 Blank Template, the best & fast way to do it! We are going to recreate the JD Purity Template in a step-by-step, before & after presentation, with code changes, tips & tricks, easy do!
Now it would be a good thing for you to have an idea on how to work with Firebug extension for Mozilla Firefox. Click here to learn how to use it. In this section we are going to change the styling inside the jd_template_name/css/template.css file.
Please note that we are not going to insist on all design details, as this stands as a basic instructions set, generally applied to all JD T3 Framework Templates. You will learn what are the files you need to modify to recreate the JD Purity Template design.

If the line number don't match because the code changes, DON'T PANIC! Search for style rules!
Example: #ja-header .main

The Header

This element will need to be higher in order to make room for a larger logo image. So please open jd_template_name/css/template.css and find line 444:

and replace with

The Default Logo

To use the JD Purity logo, we will replace the logo in the jd_template_name folder with the one in the jd_purity folder, and update the template.css, line 449:

replace with:

This image show changes for the header styling also.

The Search Module

We will customize the field of the search form for normal and hover & focus state. First let's add and the search icon, so find line 422:

replace with:

Then find line 422 to add some background-color to the search form field:

replace with:

The form-submit of the search will also need some styling, so please add after this last line this one:

Navigation bar styling

Please find line 476 in the template.css:

and replace with:

The spotlights

TOP STOPLIGHT
First we will add a background-color and a text-color for the ja-topsl .main div, so find line 707:

replace with:

BOTTOM SPOTLIGHT
Next we will do same thing for ja-botsl .main div, so find line 727:

and replace with:

The Container

This div class is defined in the middle.php macro block for main content body, left block and right block. This element will need a border so find line 445:

replace with:

The Content Body

This is where the inset2 (main body + right) blocks are displayed, so in right below the code we have updated above (line 445), let's add this code:

The Pathway

This block will need some background-color and some border-left & border-right, so please find line 535:

and replace with:

The Content Links

To customize the general styling for links, we will edit line 22:

replace with:

The Middle Block

We will customize all blocks of the middle.php block, so we will start with the left.php. To match the styling of the original JD Purity Template, we will edit the HEADING 2 of the XTML modules, so find line 390:

and replace with:

Next we are going to add some general styling for block modules (changing margin, adding a border and some padding) so find line 402:

replace with:

We will continue adding additional styling to the left.php block (still editing XHTML style), so after line 402, paste this code:

Next we will add the corresponding XHTML styling for right.php block, so below the styling we have pasted for left.php XHTML styling, paste this code:

Next we will need to adjust the menu styling in XHTML styling blocks, so find line 502:

replace with:

Still for the menus, we will need to adjust the text-indentation so please find line 519:

replace with:

Next we will style the default rounded block modules so copy these images from JD Purity Template into the jd_template_name/images:

• b-tl.gif, b-tr.gif, b-bl.gif, b-br.gif
• paste this code into template.css right after the /* Right Block additional styling */ coding style (around line 424):

Let's preview changes for the middle.php block styling:

Bottom Navigation

First let's customize the active menu items, so find line 666:

and replace with:

Next we will customize the ja-footnav div, so find line 846:

and add above it:

Finally, let's change the menu styling so find lines 846-853:

and replace with

Let's preview changes:

Customizing the menu systems

Mega Menu

First we will customize the level0 (root) menu items: normal, hover and active menu items, so please open jd_template_name/css/menu/mega.css find line 15:

replace with :

Next, let's go ahead and customize the level1 and above menu items styling, so find lines 36-45:

replace with:

Finally we are going to style the child content, so find lines 47-79:

and replace with:

Let's preview the changes:

Split Menu

First we will customize the common styling of ja-subnav div for both Split Menu and Dropline Menu, so please open jd_template_name/css/template.css and find line 538:

replace with

Next we need to style the level3 menu items color so find line 599:

and replace with:

Next we will customize the level0 (root) active menu items, so please open jd_template_name/css/menu/split.css find line 15:

replace with:

At the end of the file please paste this code:

Let's preview the changes:

Dropline Menu

In the previous chapter we have edited some common styling for both Split Menu and Dropline Menu, now we can edit the specific styling for the second one. So let's open jd_template_name/css/menu/dropline.css, line 15:

replace with:

This menu system looks the same as the previous so please check the preview here.

CSS Menu

First we will customize the style for root items, so open the jd_template_name/css/menu/css.css find lines 26-32:

replace with:

Next we will customize all other levels menu items, so find lines 54-68:

replace with:

Let's preview the changes!

Create your own blocks

For the purpose of this documentation, we have created the slideshow block in the default layout (click here to view the complete code):

Now, the jd_template_name.info file defines the new slideshow region (same thing with layout position), click here to see entire code, so this will be recognized as ja-slideshow div, so this way we can style it, so go ahead and open jd_template_name/css/template.css and add the following styling just at the bottom of the file:

We have created a sample block module and we assigned it to the slideshow region, and let's see what we have done!

DIY Example

• Go to the Layouts panel;
• Clone the default layout (use your own layout name)
• Create a new block (sample code below)
  
  <block name="your-block-name" type="modules" style="see_info_below">your-block-name</block>
  
  
  • your-block-name - really use what ever name you want
  • the block will be rendered according to the order within the other blocks
  • the style is set into the blocks/tpl folder, read more here
• Edit the jd_template_name.info file and add the new region (see sample code below)
  
  regions[your-block-name]=your-block-name
  
  
  • use the same region name as for your-block-name
  • the order of this new region within all others does not affect layout in any way, it just reflects the order within the region select box for configuring block modules
• add proper styling to the block using the #ja-your-block-name {} class rule
• Have fun!

Create your own block style

For more satisfactory block module styling, T3 Framework for Drupal allows you to create your own block style very easy. Here is an example on how to create your own:

• in the jd_template_name/blocks/tpl folder (create this folder structure if you don't already have it) create a new file called block-your_style_name.tpl.php
• open it with your favorite code editor and paste inside this code, and update accordingly:

• next, you can configure your layouts to use this new style for any of the blocks.
  Example:
  <block name="top" style="your_style_name">top</block>
• finally, you can customize the styling of the div structure you have created for this block-style.

Styling block style suffixes

Let's fill the Who's online module with some color, and for that we are going to set a -blue (minus-blue) class suffix in the template administration panel, so click here to find out how.
To style this class suffix, please follow this quick guide:

• copy the files bb-tl.gif (block-blue-top-left), bb-tr.gif (block-blue-top-right), bb-bl.gif (block-blue-bottom-left), bb-br.gif (block-blue-bottom-right) image files from jd_purity/images folder into jd_template_name/images folder;
• open jd_template_name/css/template.css, and paste this code at the end of the file:

Let's have a look now!

Please note that this class suffix only works for modules within rounded styled blocks.

Extra layouts

Main-Left-Right Layout

To create a new core layout, please follow these steps:

• Step 1 - Browse the your_site/sites/all/themes/joomlart/jd_template_name/core/layouts folder.
• Step 2 - Create an empty file called main-left-right.xml.
• Step 3 - Edit it with your favorite code editor and paste this code inside
  

As you can see, this layout only needs to override the layout positions for left and right blocks, no need to duplicate the rest of the layout code.

Left-Right-Main Layout

To create this type of layout, please follow these steps:

• Step 1 - Inside the your_site/sites/all/themes/joomlart/jd_template_name/core/layouts folder.
• Step 2 - Create an empty file called left-right-main.xml.
• Step 3 - Edit it with your favorite code editor and paste this code inside
  

Left-Right-Main-All-Rounded Layout

To create this type of layout, please follow these steps:

• Step 1 - Inside the your_site/sites/all/themes/joomlart/jd_template_name/core/layouts folder.
• Step 2 - Create an empty file called left-right-main-all-rounded.xml.
• Step 3 - Edit it with your favorite code editor and paste this code inside
  

Extra themes

Green Theme

Let's create the basic file & folder structure for a new core theme first. In the jd_template_name/core/themes folder, create a new folder green. Inside this new folder, you will need this file & folder structure:

• css
  • menus
    • css.css - empty file
    • dropline.css - empty file
    • mega.css - empty file
    • split.css - empty file
• info.xml - empty file
• logo.png - edit this image according to the theme color

Now let's edit the info.xml file

Now we will override some styling of the default theme, so open the jd_template_name/core/themes/green/css/template.css file with your favorite code editor and paste this code inside:

Next we will edit the jd_template_name/core/themes/green/css/menus/mega.css file to customize the Mega Menu system, and paste this code inside:

Next we will edit the jd_template_name/core/themes/green/css/menus/dropline.css file to customize the Dropline Menu system, and paste this code inside:

Next we will edit the jd_template_name/core/themes/green/css/menus/css.css file to customize the CSS Menu system, and paste this code inside:

Finally we will edit the jd_template_name/core/themes/green/css/menus/split.css file to customize the Split Menu system, and paste this code inside:

Next you can assign this theme to a new profile, click here to continue now.

Red Theme

Similarly we will create the basic file & folder structure for the Red core theme first. In the jd_template_name/core/themes folder, create a new folder red. Inside this new folder, you will need same file & folder structure:

• css
  • menus
    • css.css - empty file
    • dropline.css - empty file
    • mega.css - empty file
    • split.css - empty file
• info.xml - empty file
• logo.png - edit this image according to the theme color

Now let's edit the info.xml file

Now we will override some styling of the default theme, so open the jd_template_name/core/themes/red/css/template.css file with your favorite code editor and paste this code inside:

Next we will edit the jd_template_name/core/themes/red/css/menus/mega.css file to customize the Mega Menu system, and paste this code inside:

Next we will edit the jd_template_name/core/themes/red/css/menus/dropline.css file to customize the Dropline Menu system, and paste this code inside:

Next we will edit the jd_template_name/core/themes/red/css/menus/css.css file to customize the CSS Menu system, and paste this code inside:

Finally we will edit the jd_template_name/core/themes/red/css/menus/split.css file to customize the Split Menu system, and paste this code inside:

Similarly you can assign this theme to a new profile, click here to continue now.

Building the default profile

If you have copied files from jd_t3_blank, please edit the jd_template_name/core/layouts/default.xml accordingly:

The last setting is required for the suffix class we have styled in this section.

Building profile variations

Now you can assign the new core themes to proper profiles so create 2 new profiles as follows

• jd_template_name/core/profiles/green.xml, with code below
  
  themes = green
  
  
• jd_template_name/core/profiles/red.xml, with code below
  
  themes = red
  
  

As you already noticed, we don't need to duplicate the code from the default profile, only override the theme settings.

End User Customization

This section explores the template end-user customization phase. Generally here end-users will learn how to create own themes, customize their logo, modules styling, their layouts, themes and profile settings.
All user created themes and uploaded via the administration panel, and all user created custom layouts and blocks must use the local folder, so they can easily update the core engine and template, without losing any customization.
Before you go, you may want to check color schemes so click here to see some samples.

The User Theme

End users will have to develop their own themes, with own styling, graphics, colors, layouts and profile settings. User setup is mostly developed for production websites and requires intensive testing for cross-browser compatibility, script conflicts, compression related issues, etc. It is recommended to develop user-theme to customize T3 Framework Templates outside the core styling and coding. This makes easy updating.

T3 Framework makes the user-theme development a simple process:

• end-users develop it on a local computer,
• upload it on a live server using the T3 Framework Template administration panel. The User Theme will be uploaded to the local folder of the T3 Framework based Template.
  

This theme will have the same file & folder structure, as any core theme. On your local computer, let's create a new folder user-theme (use your desired name here). Inside this new folder, you will need this file & folder structure:

• css
  • menus
    • css.css - empty file
    • dropline.css - empty file
    • mega.css - empty file
    • split.css - empty file
• info.xml - empty file
• logo.png - edit this image according to your design goals and theme specific

First you will have to edit the info.xml file, here an example:

Please use your information for theme name, description, author and copyright information.

Customizing the logo

• Using your favorite graphic editor, create a new logo image, use the one you already have, or let others do it for you. You will need to know the new logo dimensions for stylesheets updates. Here an example of logo editing:
  
  
  
• Copy your new logo image in the user-theme folder.
• Open user-theme/css/template.css file and paste this code:

Customizing the search module

To customize the search module, you only need to override some of the colors used in the default theme so open user-theme/css/template.css and add this code at the end of the file (use your color here):

Customizing the content links

Let's open the user-theme/css/template.css and customize the color of the content links, so add this code at the end of the file:

Adjustments for SPLIT and DROPLINE Menu Systems

You theme will need some adjustments for the horizontal menu systems, so open the user-theme/css/template.css and paste this code at the end of the file (again use your own color here):

Customizing block class suffixes

To create your own style class suffix, please follow this quick guide:

• create & copy the files: bo-tl.gif (block-orange-top-left), bo-tr.gif (block-orange-top-right), bo-bl.gif (block-orange-bottom-left), bo-br.gif (block-orange-bottom-right) image files into user-theme/images folder;
• open user-theme/css/template.css, and paste this code at the end of the file:

After you have configured your profile to use this new suffix class for a module, for instance Who's online module will look this way:

Customizing the Menu Systems

User design for Mega Menu

Open user-theme/css/menu/mega.css and add this code (use your color here):

User design for Dropline Menu

Open user-theme/css/menu/dropline.css and add this code (use your color here):

User design for Split Menu

Open user-theme/css/menu/split.css and add this code (use your color here):

User design for CSS Menu

Open user-theme/css/menu/css.css and add this code (use your color here):

Upload the User Theme

The user-theme development is now finished, but you can add more satisfactory styling, with more graphics and color themes. After you have finished, you will have to upload your theme to your live-site, test it, then use it on your productions website. Click here to learn how to upload your theme.

User layout

Using custom width for RIGHT block

In some cases you may want to use a custom width for left or right column. To do that you have to edit your user-layout with the internal editor. Click here to find out how.
For instance you will want to override the width of the right column to be 25% wide (and not using the default column width setting of 20%). In the template administration panel, create a new layout called user-layout and paste this code:

This will increase the width of the right column and decrease the width of the content body and left column. To find out more about this block attribute, click here. To learn how to edit layouts in back-end, click here.

Using custom width for spotlight user5

Now you may want to use a custom width for the user5 position to match the new width of the right block, so edit again the user-layout accordingly:

Click here to find out more about this block parameter.

User Profile

Now it is time to assign your theme, layout, and other settings to your own profile. So please follow this quick guide:

• In the the template administration panel of JD Template Name, go to Profiles panel and click the New button.
• Type in a profile name. EG: user-profile (you can use what ever profile name you want).
• In the Global Settings section, disable showing the T3 Framework logo in the bottom if you want.
• In the Theme Settings section, select your theme (in our case user-theme).
• In the Layout Settings section, select your desktop layout (in our case user-layout).
• In the Block Class Suffix section, remove the -blue class, and add -orange (or any other class name you have created) for Who's online module (or any other module you may want).
• Scroll bottom and click the Save configuration button.

Your profile (will be rendered in jd_template_name/local/profiles folder) should have this code inside:

Click here to learn all about Profiles and especially Editing Profiles.
For your production website, you can assign this profile to all pages to replace the default template profile.

JD T3 Framework 2.0 for Drupal Resources
Overview | Developer Guides | Customization FAQs | Navigation | Copyright

JA T3 Framework 2.0 for Joomla! Resources
Overview | Developer Guides | Customization FAQs | Navigation | Copyright