7 Theming in Drupal
Download as PPTX, PDF0 likes674 views
Drupal theming allows customization of how content is displayed through theme files. Theme files retrieve content from the database and set styling, positioning and layout. Key aspects of theming include using different page templates, assigning blocks to regions, and intercepting and overriding specific files to customize output without altering core files. Common theme files include page.tpl.php and style.css which define overall layout and styling.
7 Theming in Drupal
- 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 - againText 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. Remember1. You Can Theme It AllThe Drupal system allows you to specify different page templates for different purposes on your site. 2. Build with BlocksThe process of activating modules and assigning blocks to regions on the pages is one of the most basic and most important skillsEach 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 overrideseveral 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 themeblock.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 onlineGo 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 themesRemember 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>>themesClick the radio box for default on theme you like and click ok.
- 10. configureClick 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. ZenZen 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 ZenSupport: 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 barDisplay 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:\\..\mysite\themes\garland
- 13. ApproachDrupal 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 functionOpen 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. stylingOpen themes/garland/page.tpl.phpAdd 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.