Building a Drupal site from scratch - part 11 - Theming subpage page.tpl.php

Updated: 11 November, 2021 seen 1,347

Since start of this tutorial we haven't touched any page.tpl.php file, all has been achieved by using Views and CSS, all theme files are served from Bootstrap parent theme. Which might stay this way, but not in this case.

Today I'll show how to make your page.tpl.php file (container for your theme).

Go to your parent theme Bootstrap and copy page.tpl.php file from templates directory to your mycustomtheme template folder. When copied, flush all caches on your site.

Now you have control over your page container, and you can change or remove things.

By default I dont like that logo is showed on the same line as menu. And I don't need breadcrums as well.

 

What I want to do, is to put logo under menu, and get rid of breadcrumbs.

So I must open the newly created/copied page.tpl file, and look for function calling logo:

  <?php if (!empty($logo)): ?>
<a class="logo pull-left" href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>">
<img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" />
</a>
<?php endif; ?>
 
I will cut this piece and put under menu (navigation), actually I will put this at top of in .main-container container class by wrapiing with additional CSS.
To get rid of breadcrumbs, we even don't need nothing to remove, we will just uncomment those lines, like this:
 <!--  <?php if (!empty($breadcrumb)): print $breadcrumb; endif;?>-->
 
And here is the result:

 
Now we can figure out what to put on large white space on right top corner of page, and we can start designing our logo.