Converting (X)HTML/CSS template to Drupal 7 Theme

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

description

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

Transcript of Converting (X)HTML/CSS template to Drupal 7 Theme

Page 1: Converting (X)HTML/CSS template to Drupal 7 Theme

http://cavhost.com

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

Page 2: Converting (X)HTML/CSS template to Drupal 7 Theme

http://cavhost.com

Additional option for creating DRUPAL themeAs 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.

Page 3: Converting (X)HTML/CSS template to Drupal 7 Theme

http://cavhost.com

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!

Page 4: Converting (X)HTML/CSS template to Drupal 7 Theme

http://cavhost.com

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.

Page 5: Converting (X)HTML/CSS template to Drupal 7 Theme

http://cavhost.com

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

Page 6: Converting (X)HTML/CSS template to Drupal 7 Theme

http://cavhost.com

Basic knowledge requiredYou need to know how to install

and setup a Drupal site.(X)HTML/CSS – of course!Basic knowledge in PHP scriptsA little knowledge in JavaScript

(jQuery)Drupal Terminology (nodes,

blocks, regions and etc...)

Page 7: Converting (X)HTML/CSS template to Drupal 7 Theme

http://cavhost.com

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!

Page 8: Converting (X)HTML/CSS template to Drupal 7 Theme

http://cavhost.com

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.

Page 9: Converting (X)HTML/CSS template to Drupal 7 Theme

http://cavhost.com

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.

Page 10: Converting (X)HTML/CSS template to Drupal 7 Theme

http://cavhost.com

Drupal 7 themes

Page 11: Converting (X)HTML/CSS template to Drupal 7 Theme

http://cavhost.com

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.

Page 12: Converting (X)HTML/CSS template to Drupal 7 Theme

http://cavhost.com

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.

Page 13: Converting (X)HTML/CSS template to Drupal 7 Theme

http://cavhost.com

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.

Page 14: Converting (X)HTML/CSS template to Drupal 7 Theme

http://cavhost.com

Step by step process for Converting (X)HTML/CSS to Drupal 7 theme.

Analyze your existing (X)HTML/CSS layouts, 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.

Page 15: Converting (X)HTML/CSS template to Drupal 7 Theme

http://cavhost.com

Step by step process for Converting (X)HTML/CSS to Drupal 7 theme.

Step 2 – Create the folder for your 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"

Page 16: Converting (X)HTML/CSS template to Drupal 7 Theme

http://cavhost.com

Step by step process for Converting (X)HTML/CSS to Drupal 7 theme.

Step 3 – Copy the files in themes folder

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

Page 17: Converting (X)HTML/CSS template to Drupal 7 Theme

http://cavhost.com

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.

Page 18: Converting (X)HTML/CSS template to Drupal 7 Theme

http://cavhost.com

Step by step process for Converting (X)HTML/CSS to Drupal 7 theme.

Step 5 – Create page.tpl.php

Duplicate your main html file, usually "index.html“ or “index.htm” and rename the copy as page.tpl.php

Page 19: Converting (X)HTML/CSS template to Drupal 7 Theme

http://cavhost.com

Step by step process for Converting (X)HTML/CSS to Drupal 7 theme.

Step 6 – Copy all other TPL files you want to use 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.

Page 20: Converting (X)HTML/CSS template to Drupal 7 Theme

http://cavhost.com

Step by step process for Converting (X)HTML/CSS to Drupal 7 theme.

Step 7 – Edit page.tpl.php

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.

Page 21: Converting (X)HTML/CSS template to Drupal 7 Theme

http://cavhost.com

Step by step process for Converting (X)HTML/CSS to Drupal 7 theme.

Step 8 – Check and declare all the reference for 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.

Page 22: Converting (X)HTML/CSS template to Drupal 7 Theme

http://cavhost.com

Step by step process for Converting (X)HTML/CSS to Drupal 7 theme.

Step 9– Insert your block regions

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

Page 23: Converting (X)HTML/CSS template to Drupal 7 Theme

http://cavhost.com

Step by step process for Converting (X)HTML/CSS to Drupal 7 theme.

Step 10 – Insert variables you want to use 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); ?>

Page 24: Converting (X)HTML/CSS template to Drupal 7 Theme

http://cavhost.com

Step by step process for Converting (X)HTML/CSS to Drupal 7 theme.

Step 11 – Adjust your CSS

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.

Page 25: Converting (X)HTML/CSS template to Drupal 7 Theme

http://cavhost.com

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.

Page 26: Converting (X)HTML/CSS template to Drupal 7 Theme

http://cavhost.com

Example of theme hookAdding external stylesheets ( template.php

)

Code:

<?phpfunction mytheme_preprocess_html(&$variables) {drupal_add_css('http://fonts.googleapis.com/css?

family=News+Cycle', array('type' => 'external'));}?>

Page 27: Converting (X)HTML/CSS template to Drupal 7 Theme

http://cavhost.com

Theme Developer moduleThemer'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

Page 28: Converting (X)HTML/CSS template to Drupal 7 Theme

http://cavhost.com

Helper PHP functionIf 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

Page 29: Converting (X)HTML/CSS template to Drupal 7 Theme

http://cavhost.com

Happy DRUPAL Theming! Adolfo G. Nasol Mobile: 09195951276 Blog: http://danreb.com Website: http://cavhost.com Email: [email protected]

More power, PHDUG – Philippine Drupal User Group! 2012