Basics theming in Drupal 7

27-Jul-2016
Drupal B2B - complex internet platforms and e-commerce plaforms

Drupal 7 provides a lot of possibilities in creating custom templates. Making a website template in Drupal 7 can take place in several ways.

Editing basic templates

We recommend editing one of the standard templates like Barti to Drupal novices. You can slowly familiarize yourself with structure of template while browsing it’s directories and subdirectories.

Creating a template based on the core template

Creating a new template from scratch may take too much time, especially if you need to make it in a short time. To save some time you can design new template by extending a base template. Theme made in such way inherits all files from base template, which can be replaced or overwritten in our theme. On the Internet one can find many base templates that offer prepared grid, already declared commonly used templates on page, extended css classes and js scripts that describe the appearance and behavior of basic html elements, such as headers, paragraphs, buttons or forms. Here you can find list of the most popular Drupal base themes. With this method you not only gain time, but also keep files tidy because you separate the base template's files from our modified version’s.

Making new template from scratch

To make a template in Drupal 7 you have to create a folder called by our template's name (e.g. newtheme) in the sites / all / themes directory. The most important step is creating the first and the only required template file with .info extension (in this case newtheme.info). Type the following code into it:

name = New theme
core = 7.x
engine = phptemplate

These three lines are enough to create a new template. After saving the file you can set up your template from the admin panel. The generated template will definitely require further work.

* If you create a theme based on the basic template you have to add the declaration of a base template, for example:

base theme = bartik

The next step is a declaration of style sheets and js scripts. We declare style sheets as follows:

stylesheets[all][] = css/main.css

We define the media in square brackets, in this case the stylesheet will apply to all media.
We declare script files in similar way:

scripts[] = js/main.js

You need to remember that after declaring files (and after making any other changes in the *.info file) to clear the cache.

If you already used other templates in Drupal 7, for example core templates, you definitely noticed a different number of available regions on the page where you can place blocks and other elements. All regions on the page must be declared in the *.info file. For example, we create two regions:

regions[slider] = Slider
regions[column] = Column

Then you must declare them in page.tpl.php file and other files specifying the of html document if you want to have them rendered. For example append page.tpl.php with the following code:

<div id=”slider”>
<?php print render($page[‘slider’]); ?>
</div>
<div id=”column”>
<?php print render($page[‘column’]); ?>
</div>

Now you can place prepared blocks in newly defined regions using Blocks tab in admin panel.

*You have to declare content , help, and page_bottom page_top regions in every template. They are required by Drupal.

Page.tpl.php is one of the basic template structure files in Drupal 7. Each file available in the core can be overwritten with your own.

File structure

Number of files in your template may vary depending on the amount of modifications you made in the basic structures. Besides the required * .info file and possible style sheets with js scripts each template can be freely expanded by overwriting the individual structures. An overview of the files available in template is as follows:

File structure
  • html.tpl.php - This file contains a head section of an HTML document. It is a parent file of the whole template.
  • page.tpl.php - most commonly edited file during creating / editing a template. It contains the body of HTML document. This is where you put the various regions that you want to have on your page.
  • region.tpl.php - with this file you can specify how the structures within each region are rendered.
  • block.tpl.php - defines the block's rendering and arrangement
  • node.tpl.php - determines the rendering and arrangement of content.
  • field.tpl.php - each field used in any content can be determined in this file.

With these files you can define structure of Drupal 7 page in your own way. Using the file called region.tpl.php you override the way of rendering and arrangement of all regions. If you want to make changes in one particular region, for example in previously declared Slider region you have to use the file called region-footer.tpl.php. The same applies to other structure files. File naming conventions can be found here.

Are you interested in our offer?

Contact

Categories

Latest Tweets

Quick contact

7 + 5 =