Drupal theming and more
In this blog we will see some basics of drupal theming .
1. Importance of theming in drupal?
2. Which files are required for theming?
3. What does these files works?
Before we go to actual theming, we will first see theme layer in drupal.
Theme Layer In Drupal:
[Source---Packtpub Drupal 7 Module Development]
From above fig,
• There are two layers, business logic(Module) and presentation logic(Theme)
• In business logic (Module), data comes in(plain data, no html and no tags) and these data get check in business logic(functional units, all modules, plugins, etc.), then default themes is applied on data(plain data).
• In presentation logic (Theme), additional styles are applied if mention according to requirement and in the same logic, if new theme is provided by developer then it get override on default theme.
• Final output is displays in form of html format i.e. final output is embedded in html format.
This is all about theme layer in Drupal.
Now we will see What Theming is?
1. In Drupal, presentation layer displays the content to website visitor based on set of template.
2. “A Theme is a collection of files that define the presentation layer.” ----Drupal.org
3. You can change theme layout by different types of module(e.g.: panels, Display suits, skinr, etc..), but these modules only changes layout of pages not the frame of website
4. To change actual frame of your website then you need different types of files.
Files involved in Theming:
Many files are required for theming i.e. CSS files, script files, .tpl.php files, etc,
Files required for theming are:
1. .info file
2. template file(.tpl.php file)
3. CSS file
and many files required for theming but it depends on how much you want to coustomise the look of your website like:
1. node.tpl.php
2. block.tpl.php
3. comment.tpl.php
5. style.php
6. html.tpl.php and many more....
.info file:
These .info contain: name of your theme, version of Drupal, CSS file, regions for your frame, features, script files (if available), etc..
Now let’s see how to define all of these file:
name = Ourtheme [Declares theme name]
description = my theme [Declare theme description]
core = 7.x [Declares what version of Drupal]
stylesheet[all][] = style.css [Declares CSS files]
script[] = script/my.js [Declare javascript file]
regions[content] = Main content [Declare regions]
features[] = logo [Declare features]
Above mentioned anatomy of theme are pretty much clear from their name only, but what region are:
[google image]
We can understand the concept of region in theme development easily from above fig. Different fruits are placed in different region i.e. every type of fruit have one different region, these same happen in Drupal theme. Different region are allocated for content, left side bar, right side bar, header, footer, etc.
i.e. in .info file
region[leftside bar] = Left side bar
region[header] = Header, etc..
page.tpl.php:
1. Like in html file, we print all content in tags of <body> </body>
2. Same, you print your region in your page.tpl.php
<?php print render($page['preface']); ?>
3. Create the page layout, where content is printed, menu, search, sidebar, etc.
e.g.: below is from my page.tpl.php file, but this code is for main section and same we can write for header section, footer section, etc..
<div id="main" class="clearfix">
<div id="content">
<div id="content-inner" class="inner column center">
<?php if ($breadcrumb || $title || $messages || $tabs || $action_links): ?>
<div id="content-header">
<?php print $breadcrumb; ?>
<?php if ($page['highlight']): ?>
<div id="highlight"><?php print render($page['highlight']) ?></div>
<?php endif; ?>
<?php if ($title): ?>
<h1 class="title"><?php print $title; ?></h1>
<?php endif; ?>
<?php print $messages; ?>
<?php print render($page['help']); ?>
<?php print render($tabs); ?>
</div> <!-- /#content-header -->
<?php endif; ?>
<div id="content-area">
<?php print render($page['content']) ?>
</div> <!-- /#content-area -->
<?php print $feed_icons; ?>
</div>
</div> <!-- /content-inner /content -->
<?php if ($main_menu || $secondary_menu): ?>
<div id="navigation"><div class="section clearfix">
<?php print theme('links__system_main_menu', array(
'links' => $main_menu,
'attributes' => array(
'id' => 'main-menu',
'class' => array('links', 'clearfix'),
),
'heading' => array(
'text' => t('Main menu'),
'level' => 'h2',
'class' => array('element-invisible'),
),
)); ?>
<?php print theme('links__system_secondary_menu', array(
'links' => $secondary_menu,
'attributes' => array(
'id' => 'secondary-menu-links',
'class' => array('links', 'clearfix'),
),
'heading' => array(
'text' => t('Secondary menu'),
'level' => 'h2',
'class' => array('element-invisible'),
),
)); ?>
</div></div> <!-- /.section, /#navigation -->
<?php endif; ?>
<?php if ($page['sidebar_first']): ?>
<div id="sidebar-first" class="column sidebar first">
<div id="sidebar-first-inner" class="inner">
<?php print render($page['sidebar_first']); ?>
</div>
</div>
<?php endif; ?> <!-- /sidebar-first -->
<?php if ($page['sidebar_second']): ?>
<div id="sidebar-second" class="column sidebar second">
<div id="sidebar-second-inner" class="inner">
<?php print render($page['sidebar_second']); ?>
</div>
</div>
<?php endif; ?> <!-- /sidebar-second -->
</div> <!-- /main -->
so, in all we can say that,
[Source: Internet]
Folder Structure for theme folder:
Below is the structure of fusebasic theme:
1.go to var/www/your_drupal_folder/sites/all
2. in theme folder put your theme(here fusebasic theme)
3. like this will be your theme folder(here fusebasic theme) i.e css folder, script folder, themplate folder, etc..
4. this your templates folder
For more anatomy refer:
http://batayneh.me/sites/default/files/Drupal7-theming-cheatsheet_2.pdf
Sourses:
1. Internate
2. Book---Packtpub Drupal 7 Module Development
4. shareslide