From JoomlArt Wiki

Revision as of 10:10, 10 October 2010

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

This section is under construction. Please come back later.

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.

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:

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 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>

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 default.xml accordingly:

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

Building profile variations

End User Customization

This section explores the template end-user customization procedures. Generally here you will learn how to customize the logo, modules styling, user created layouts, user created themes and user custom 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 users can easily update the core plugin and template, without losing any customizations.

Customizing the logo

Customizing the search module

Customizing the content links

Customizing the Read-more link

Using custom width for LEFT or RIGHT blocks

In some cases you may want to use a custom width for left or right column. To do that you have to edit your desired layout, or all layouts in case you want to apply this change for all layouts.
For instance let's override the width of the right column to be 25% wide. With the internal editor, open this layout and change the code like this:

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.

Styling custom block styles

Customizing block class suffixes

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