Pagetplphp

By merging the PHP from the Garland page.tpl.php file into our HTML template from earlier, we get this as the page.tpl.php file for our new theme. The PHP code which has been inserted is highlighted.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/19 99/xhtml" xml:lang="<?php print $language->language ?>" lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>"> <head>

<title><?php print $head_title ?></title> <?php print $head ?> <?php print $styles ?>

<style type="text/css" media="screen"> #nav li.home a {background: #2266BB !important,color:

</head> <body> <body id=""> <div id="wrapper">

// Prepare header $site_fields = array(); if ($site_name) {

$site_title = implode(" ', $site_fields); if ($site_fields) {

$site_fields[0] = '<span>'. $site_fields[0] .'</span>';

print "<a href="'. check_url($front_page) .'" title="'.

print '<img arc="'. check_url($logo) .'" alt="'. $site_title .'" id="logo" />';

<div id="nav"> <?php if ($left): ?>

<?php if ($search_box): ?><div class="block"><?php print $search_box ?></div><?php endif; ?> <?php print $left ?> <?php endif; ?>

<div class="block">

<li class="home"><a rel="nofollow" href="#" title="">Home</a></li>

<li><a rel="nofollow" href="" title="">Menu</a></li>

<li><a rel="nofollow" href="" title="">Menu</a></li>

<li><a rel="nofollow" href="" title="">Menu</a></li>

<li><a rel="nofollow" href="" title="">Menu</a></li> <li><a rel="nofollow" href="" title="">Menu</a></li> <li><a rel="nofollow" href="" title="">Menu</a></li> </ul> </li>

<li><a rel="nofollow" href="" title="">Menu</a></li> <li><a rel="nofollow" href="" title="">Menu</a></li> </ul>

<?php if (!$left && $search_box): ?><div class="block"> <?php print $search_box ?></div><?php endif; ?>

</div><!--/nav--> </div><!--/column-->

<div id="main-content"> <div id="header">

<div id="content">

<?php print theme('links', $primary_links, arrayf'class1 => 'links primary-links')) ?> <?php endif; ?>

<?php print theme('links', $secondary_links, arrayf'class1 => 'links secondary-links')) ?> <?php endif; ?> <?php print $breadcrumb; ?>

<?php if ($mission): print "<div id="mission">'.

$mission .'</div>'; endif; ?> <?php if ($tabs): print "<div id="tabs-wrapper"

class="clear-block">'; endif; ?> <?php if ($title): print '<h2'. ($tabs ? 1 class=

"with-tabs"' : ■■) .'>'. $title .'</h2>'; endif; ?> <?php if ($tabs): print "<ul class="tabs primary">'.

$tabs .'</ul></div>'; endif; ?> <?php if ($tabs2): print "<ul class="tabs secondary">'.

$tabs2 .'</ul>'; endif; ?> <?php if ($show_messages && $messages): print $messages;

<?php print $feed_icons ?> <?php print $footer_message . $footer ?>

<div class="clear"></div> </div><!--/main-->

When installed and viewed, this template appears as shown in the following screenshot:

Obviously, there still remains a lot of work, but the basics seem to have been partially slotted into place. Some important points to be noted:

• The menu has automatically been placed in a div with a block class; the block style in our CSS was designed for blocks, and not the menu. To rectify this, we can change our CSS to rename block to blockd instead.

• The menu items have icons next to them. This is because Drupal includes a default stylesheet for the menus, which sets this. We will have to override this within our own CSS.

Node, block and comment templates are still those from the default theme, although for this example, it isn't important.

The default menu element is not selected. This is because the selected element in the page is given a CSS class of active; so we need to accommodate this in our CSS.

^ View source

"T-^ One useful tip to remember is to view the source of the Drupal-generated page in your browser, and make a note of any style classes it gives to areas of the design, as these can be overridden by your own CSS.

To rectify these issues, the following additions to our CSS do the trick:

.active{ background: #2266BB ¡important,-color: #FFF ¡important) ul.menu { list-style-type: none ¡important; margin-left: 0px ¡important;)

.blockd { margin-left: 25px; padding-left: 5px; border: 1px solid #22 6 6BB; )

.blockd h2 {color:#55 5; font-size: 12 0%;font-weight:bold; letter-spacing:0; line-height:150%)

.block h2 {color:#555; font-size: 12 0%;font-weight:bold; letter-spacing:0; line-height:150%)

.block ul{ list-style-image: none ¡important; list-style-type: none ¡important; )

#block-user-0 {margin-left: 25px; padding-left: 5px; border: 1px solid #22 6 6BB; width: 210px; )

#block-user-0 ul {margin: 0px ¡important; padding:0px;} #block-user-0 li {margin: 0px ¡important; list-style-type: none ¡important; padding:0px;}

The #block-user-0 styles are for the login box, to make them fit in with the original design template we started with, as you will see further on in this chapter.

0 0

Post a comment