Getting started with ThemeGenie
I had published a tutorial on Themegenie on my blog. I had covered only the basic usage of the extension. This time I will go a step further.
The screen shots used for this tutorial is from Deamweaver CS4. In older versions of Dreamweaver the extension looks a bit varied. We have tested the extension in dreamweaver CS4, CS3, latest CS5 and the older versions.
As most of the readers know, we create themes to present the content created by the Drupal in our own way.
Dreamweaver site definition for Drupal.
You should have at least one sites defined in Dreamweaver. Check this tutorial for Drupal theme specific site definition.If you have more than one site defined select the one under which you want the theme files to be placed.
Now you can start creating your first theme.
Step 1, In Deamweaver, Go to file menu Commands, Themegenie , Themegenie Base files.
Now you have the following window.
Furnish your theme name and other details and click 'Create'.
It creates all the base files for your theme and opens the 'page.tpl.php'.
See the base files created.
We will at look the informations you have given when created base files. All these informations are stored in a file called ‘theme name.info’.This file connects design to Drupal . You can view an '.info' file in above image. Open your theme's info file and have a look at it. (See the below image)
Visit Drupal's theme-info file tutorial for further reading
Open your local Drupal installation in your web browser and brows Admin, Site building, Themes. You can see how Drupal lists the themes by opening your local Drupal installation in your web browser and brows Admin, Site building, Themes.
You provided theme name, version and description in the first line of Basefile Builder. This is how the these informations are displayed in theme list.
The Screenshot is help you to identify each theme easily. You can replace the Screenshot file found inside the theme folder with a suitable one.( you can also replace default favicon.ico, logo.png)
Features
On the right hand side of the Basefiles Builder you can select the theme features. Drupal allows you to enable or disable theme features that are available. To try this click 'configure' link corresponding to your theme (see above the picture)
Regions and blocks.
Drupal allows you to place content blocks in the regions of the theme you selected. The below picture explains it better.
On the left side of the Basefiles Builder you can add/delete edit regions. These regions can be accessed for inserting into the page.tpl.php form Dreamweaver's Insert object, Themegenie, Page, Custom regions.
Brows Admin, Site building, Blocks and see how how to place Blocks on the regions.
Design the main page
As trial we will create
Copy following code into page.tpl.php, which is already open, between the body tags using Code view .
<div id="wrapper">
<div id="header">Title & logo</div>
<div id="container">
<div id="left"> left side bar</div>
<div id="content">Conent</div>
<div id="right">right side bar</div>
</div>
<div id="footer">Footer</div>
</div>
Copy following code into 'style.css'.
BODY{
margin:0;
text-align:center;
}
#wrapper{
text-align:left;
width:942px;
margin:auto;
}
#header{
padding:15px;
}
#container{
min-height:200px;
}
#left{
padding:15px;
width:200px;
float:left;
}
#content{
padding:15px;
float:left;
width:450px;
}
#right{
padding:15px;
width:200px;
float:right;
}
#footer{
padding:15px;
}
Now the your 'page.tpl.php' looks like this in Dreamweaver's Design view.
To customize the 'page' you have to go to Insert object > Themegenie > Page > select appropriate component.
In the given layout select "Logo &" and brows Insert object > Themegenie > Page > Logo.
select "Title" and brows Insert object > Themegenie > Page > Title.
select "Left" and brows Insert object > Themegenie > Page > Left Sidebar.
select "Content" and brows Insert object > Themegenie > Page > Content and click 'Add'
select "Right" and brows Insert object > Themegenie > Page > Right Sidebar.
select "Footer" and brows Insert object > Themegenie > Page > Footer.
After you have completed a theme run 'Switch image' from insert objects. This will make image codes relative to Druapl if you have added images and remove the CSS file link which Drupal doesn't need.
Your first simple theme is ready. To test the theme you have to put the theme files inside 'theme' folder of your Drupal. to do this use Dreamweaver's file update/upload tool. Else you can do it manually.
To enable the new theme, in your web browser, go to drupal, admin, site building , themes. Enable your new theme.
