My presentation in Drupal Meetup Jan 28, 2012 held at Microsoft Office Makati Philippines. Drupal meetup is organized by PrometSource.

1. Converting (X)HTML/CSS
template to DRUPAL 7 theme
By: Adolfo G. Nasol – http://danreb.com
http://cavhost.com

2. Additional option for creating
DRUPAL theme
 As I said, this will give us another
flavour on creating a Drupal 7 theme,
Drupal THEMERS usually create
themes using a base starter theme
and modify to fit into their needs, with
this, we are creating themes base on
your existing (X)HTML structures and
its corresponding CSS files.
http://cavhost.com

3. What Designer(s) and Noob
think about Drupal Themeing?
 Noob assume that Drupal theming is
complicated and its overwhelming
 They try to look at several Base starter
themes and got confused (OMG, I've
better stay with WordPress / Joomla)
 Better create my own CMS huh!
http://cavhost.com

4. What should you do?
 Never fear!, because its possible to
create your own theme base on your
designs and concepts and base on
your existing (X)HTML and CSS
structures and layout.
http://cavhost.com

5. What should we learn?
 Step by step process for converting
your (X)HTML/CSS template into
Drupal 7 theme
 Finds the location of Drupal’s default
template files (.TPL files ) and modify
as you need it.
 Some examples and a demonstration
http://cavhost.com

6. Basic knowledge required
 You need to know how to install and
setup a Drupal site.
 (X)HTML/CSS – of course!
 Basic knowledge in PHP scripts
 A little knowledge in JavaScript
(jQuery)
 Drupal Terminology (nodes, blocks,
regions and etc...)
http://cavhost.com

7. Why not just use a Base Starter
theme?
 Hey, instructions for creating a Drupal
theme usually tells us to start with an
existing theme or base theme and
customize it to fit to our needs. Do you
have problem with that? Are you
against it?
- NOPE!
http://cavhost.com

8. Then you’d better explain!,
What’s the problem?
 Avoiding frustration(specially for noob).
Existing themes and base theme often
include options and features that you don't
actually needs
- lots of regions
- bunch of CSS files that makes it work
- So many features that make your site
slow.
This is fine if that's what you need but also
result in very complex template files and
bloated CSS.
http://cavhost.com

9. Then you’d better explain!,
What’s the problem?
 To help us learn how Drupal
theming actually works and gain
better understanding of the theming
system.
http://cavhost.com

10. Drupal 7 themes
http://cavhost.com

11. Other valid reason?
 Your client gives you an existing
(x)html/css template and he wants you
to use that for their drupal website.
Using a base theme for this is a lot
harder because you already have
existing html structures and layout,
CSS class and ID’s won’t match and
your frustration begins. Instead of
using a base theme, its better to
convert that existing template directly
into a DRUPAL 7 theme.
http://cavhost.com

12. Step by step process for
Converting (X)HTML/CSS to
Drupal 7 theme.
Step 1 - Prepare the template
Prepare your existing (X)HTML/CSS
template, make sure all files are
intact and working properly, test it in
the browser if it is working fine and
bug free.
http://cavhost.com

13. Step by step process for
Converting (X)HTML/CSS to
Drupal 7 theme.
Adjust the following as a part of
preparation process
 Rename the logo as logo.png - Drupal looks
for "logo.png" files inside a drupal themes
and use it as default logo. If the logo is inside
the images folder, copy that logo into the
directory where the index.html file resides,
they must be in the same level.
http://cavhost.com

14. Step by step process for
Converting (X)HTML/CSS to
Drupal 7 theme. (X)HTML/CSS layouts,
 Analyze your existing
each section of the template will need to be
converted into DRUPAL block regions, tools
such as firebug can help you or even an
HTML editing software such as Adobe
Dreamweaver.
 Take note of the sections in the html
template, we will use this sections as block
region and we will need to define it in
themename.info file.
http://cavhost.com

15. Step by step process for
Converting (X)HTML/CSS to
Drupal 7Create the folder for your theme
Step 2 –
theme.
- Create a folder inside sites/all/themes/
directory, this will be the name of your
Drupal theme, for example, if you
created a folder named "mytheme"
then your directory shall be
"sites/all/themes/mytheme"
http://cavhost.com

16. Step by step process for
Converting (X)HTML/CSS to
Drupal 7Copy the files in themes folder
Step 3 –
theme.
- Copy all the files in your (X)HTML/CSS
templates into the directory you've just
created "sites/all/themes/mytheme" ,
make sure to include all the HTML
files, CSS, Images, JavaScript's and
other assets and etc...
http://cavhost.com

17. Step by step process for
Converting (X)HTML/CSS to
Drupal –7 theme.
Step 4 Create themename.info
- Create "themename.info" file, name must
be the same with your folder name, theme
folder named "mytheme“ must have
“mytheme.info” inside it.
- Declare the following: name, description,
core, engine, stylesheets, javascript’s,
and regions.
Visit http://drupal.org/node/171205 for
information on .INFO file, look on
bartik.info files for working examples,
copy if necessary and update the
information as needed.
http://cavhost.com

18. Step by step process for
Converting (X)HTML/CSS to
Drupal 7Create page.tpl.php
Step 5 –
theme.
 Duplicate your main html file, usually
"index.html“ or “index.htm” and rename the
copy as page.tpl.php
http://cavhost.com

19. Step by step process for
Converting (X)HTML/CSS to
Drupal 7Copy all other TPL files you want to use
Step 6 –
theme.
and overrides (optional)
 Copy the template files you want to override
and edit the mark-up (html.tpl.php,
node.tpl.php, block.tpl.php), put this to your
theme folder, this way you can edit the file
without hacking the original in the core.
Please check http://drupal.org/node/190815 for
list of core templates. Also check core
modules folder for available .TPL files.
http://cavhost.com

20. Step by step process for
Converting (X)HTML/CSS to
Drupal 7Edit page.tpl.php
Step 7 –
theme.
 Open your page.tpl.php and edit, remove all
tags starting from DOCTYPE up to opening
<body> tag.
 Scroll down to the bottom of the page.tpl.php
and also remove the closing </body> body
tag and the closing </html> html tag.
http://cavhost.com

21. Step by step process for
Converting (X)HTML/CSS to
Drupal 7Check and declare all the reference for
Step 8 –
theme.
the CSS and JS file into .INFO file.
 Take note of all references to CSS file and JS
file in the header section of the (X)HTML file
and make sure you declare this into your
.INFO file.
 Note that if your html template used jQuery
library, you don’t need to include this to
themename.info because Drupal already
comes with jQuery library.
http://cavhost.com

22. Step by step process for
Converting (X)HTML/CSS to
Drupal 7 theme. regions
Step 9– Insert your block
 Start Inserting all your regions, any part of
your page you want to be editable in the
Drupal interface(via Blocks) need to be
converted to a region.
Code example:
<?php if ($page['sidebar_second']): ?>
<div id="sidebar-1" class="sidebar-1">
<?php print render($page['sidebar_second']); ?>
</div> <!-- /#sidebar-1 -->
<?php endif; ?>
http://cavhost.com

23. Step by step process for
Converting (X)HTML/CSS to
Drupal – Insert variables you want to use
Step 10 7 theme.
 Start Inserting all the necessary variables you want to
use and you need in the proper spot where you want to
show it on your page. Some of the most common
variable in page.tpl.php
$site_name
$logo
$title
$main_menu
$secondary_menu
$breadcrumbs
$tabs
$messages
Variables are inserted using the Render API, information can be found
here -> http://drupal.org/node/930760
Example of printing tabs <?php print render($tabs); ?>
http://cavhost.com

24. Step by step process for
Converting (X)HTML/CSS to
Drupal 7 Adjust your CSS
Step 11 –
theme.
 Adjust your CSS and override Drupal default
style sheet as you need to fit your design into
your Drupal site. Firebug can help you a lot
with this to properly find the correct element
class and id’s that you want to override.
http://cavhost.com

25. Step by step process for
Converting (X)HTML/CSS to
Drupal 7 theme.
Step 12 – Test and Done!
 And were Done!
Note:
Were done with the basic, its enough for you to be able to
convert an existing html/css template to Drupal 7
theme.
Advance theming use more .TPL files and requires you to
create custom PHP code in template.php files, you
need to learn how template hooks works and all the
available pre-process functions. More information here:
http://drupal.org/node/341628.
http://cavhost.com

26. Example of theme hook
Adding external stylesheets ( template.php )
Code:
<?php
function mytheme_preprocess_html(&$variables) {
drupal_add_css('http://fonts.googleapis.com/css?family=News+Cy
cle', array('type' => 'external'));
}
?>
http://cavhost.com

27. Theme Developer module
Themer's usually use theme developer
module that can be downloaded at
http://drupal.org/project/devel_themer
You can view template suggestion and
existing variables value with the help of
this module
http://cavhost.com

28. Helper PHP function
If you don't want to install theme developer modules, you can use the
following PHP function to inspect your page for variables and
array values:
Code:
<pre>
<?php var_dump($var); ?>
</pre>
Or with this one
<pre>
<?php
$vars = get_defined_vars();
print_r($vars);
?>
</pre>
For more info, please visit: http://drupal.org/node/348916
http://cavhost.com

29. Happy DRUPAL Theming!
 Adolfo G. Nasol
 Mobile: 09195951276
 Blog: http://danreb.com
 Website: http://cavhost.com
 Email: adolfo@danreb.com
More power, PHDUG – Philippine
Drupal User Group! 2012
http://cavhost.com