1. Drupal theming Wilson Wingston Sharon wingston.sharon@gmail.com

2. When you access a Drupal website, what you see on the screen is the result of the site's active theme files. As the theme files call the data, the files also set the styling, position, and placement of the content on your screen.

3. How a CMS functions - again Text and pointers to other kinds of content are stored in the database; that data is then dynamically retrieved, composed, and presented to a user in response to a request sent from a web browser. Drupal functions with the themes playing the crucial role in the formatting and presentation of the contents

5. Remember 1. You Can Theme It All The Drupal system allows you to specify different page templates for different purposes on your site. 2. Build with Blocks The process of activating modules and assigning blocks to regions on the pages is one of the most basic and most important skills Each of the blocks in the system, whether created by modules or manually created by the system administrator, can be themed individually, if you so desire. 3. Intercept and Override

6. Intercept and override several opportunities for you to affect the output prior to the data's arrival fron DB on the viewer's screen. The best practice approach to customizing themes involves intercepting and overriding files and styles—not altering the core. By choosing to affect the system's output at the highest levels of Drupal's processes, we leave the core in a purer state.

7. Files making up a theme block.tpl.php – Defines the appearance of the blocks on the page. box.tpl.php – Defines a specific format—a box used to frame things (like comments in the Bluemarine theme). comment.tpl.php – Defines the appearance of the comments which follow items. logo.png – An image file containing the logo used in the theme. node.tpl.php – Defines the appearance of the nodes. page.tpl.php – This is the primary theme file. style.css – The style sheet for this theme.

8. Finding Themes online Go to drupal.org themes section and download themes for your drupal version. Do not use conflicting versions. Eg for drupal 6.x versions, download themes with 6.x in the file name. Do not use alpha versions. Use beta ones at your own risk. Download your theme. You’ll get it usually as a tar.gz

9. Setting up themes Remember the sites/all/modules folder where we put the downloaded modules? Go to c:/wamp/www/mysite/sites/all and make a folder called themes. Extract your theme into that folder. Go to administer>>themes Click the radio box for default on theme you like and click ok.

10. configure Click the configure link, make sure you are on global settings. Here, you can set up theme options for all themes you might have. These override individual theme options. Now click on the theme links you see, all enabled themes show up as a link and you can give them individual settings too. Some themes have a lot of individual settings that you can exploit.

11. Zen Zen is the ultimate starting theme for Drupal. If you are building your own standards-compliant theme, you will find it much easier to start with Zen Support: Providing or receiving support for any theme you develop in Drupal’s normal support forums can be difficult. Bug fixes & updates: Occasionally there will be bugs found in Zen core. If you have modified any of Zen’s core files, it will be difficult for you to incorporate any of those bug fixes into your modified version of Zen.

12. Theming trick –Create a custom user login bar Display a compact, nice user login form that can fit in one line. Once user is logged in, It will display a welcome message and a couple of helpful links. We’ll do this in the garland theme. So go to admin>>themes and move back to garland. Garland files will be in c:..ysitehemesarland

13. Approach Drupal is very powerful, it's so flexible that you have many ways to do things. That's why a 5 minutes of thinking is very recommended before we get our hands dirty. a separate function, call it garland_user_bar(). It decide, and return HTML for the login form, or the welcome message. page.tpl.php, we will place a call to this function somewhere where it gets displayed in the top. Now we have the logic, after that we will write some CSS to style it, to change how it looks

14. Open the folder styling files. You can copy paste code from here to where I tell you. First open the page.tpl.php from garland root theme folder. Add <div id="navigation"><?php print garland_user_bar() ?></div> from 1. page.tpl.code on line 16, just under the body tag. Save and close.

15. Adding the php function Open themes/garland/template.php Append the contents of 2.template.php.txt I provided to the end of this file. function garland_user_bar() { global $user; $output = ''; if (!$user->uid) { $output .= drupal_get_form('user_login_block'); } else { $output .= t('<p class="user-info">Hi !user, welcome back.</p>', array('!user' => theme('username', $user))); $output .= theme('item_list', array( l(t('Your account'), 'user/'.$user->uid, array('title' => t('Edit your account'))), l(t('Sign out'), 'logout'))); } $output = '<div id="user-bar">'.$output.'</div>'; return $output;}

16. styling Open themes/garland/page.tpl.php Add contents of “3.stylecode.txt” after line 15, before the </head tag. <style type="text/css" media="all">@import "<?php print base_path() . path_to_theme() ?>/user_bar.css";</style> Copy user_bar.css into the garland theme root.

17. Wingston.sharon@gmail.com www.workshopindia.com workshopindia@gmail.com queries@workshopindia.com