Customizing a Theme for Drupal 7 - Chapter 1

CSS code

We are going to get started on how to customize a theme for Drupal 7. The goal of this task-based learning will be to build a custom layout for my personal web page by using CTI_Flex as the base theme.

This series was intended for Drupal to be customized by using a theme called CTI_Flex, which is not the main theme of this site anymore. Now this site is using a custom sub-theme based on Omega.

In order to carry out this project, we are going to need the following materials and skills:

  • A clean Drupal 7 Installation.
  • Zen and CTI_Flex as the base themes. Since CTI_Flex is a Zen sub-theme, it is mandatory to install both of them.
  • Devel and Devel Themer to help us theme the web page.
  • Skinr to increase even more the ability to theme the blocks.
  • A medium level of Drupal, HTML, CSS and PHP.

Now we are ready to begin customizing the base theme for Drupal 7.

Throughout this chapter we shall be covering the following topics:

  • Setting the appearance of the base theme.
  • Creating a little picture and a brief description of the author at the top-right corner of the header.
  • Embedding a font to improve the look of the site title.

Setting the appearance of the base theme

Firstly, we are going to set the values the base theme will be using:

  • Page Layout: fixed width content (960px), full width background colors.
  • Color Scheme: Orange.
  • Font Family: Arial, Helvetica, Bitstream Vera Sans, sans-serif.
  • Font Size: 12px (theme default).
  • Round Corners: 7px radius.

For the remaining options, use the settings by default.

Creating a little picture and a brief description of the author at the top-right corner of the header

Since this customization will be displayed on every page of the site, we need to modify a file called page.tpl.php (Devel Themer helps us determine the most appropriate template to edit).

  1. Navigate to sites/all/themes/cti_flex/templates.
  2. Open page.tpl.php with your favourite text editor and add the following piece of code after the closing div tag for the name and slogan.
<div id="about">
 <a href="#"><img src="#" height="54" width="54" alt="Jesus Heredia" /></a>
 <p>Jesus Heredia is passionate about web development on HTML, CSS, JavaScript, 
PHP and Drupal <a href="#">more»</a></p>
</div>

Now we have to add two rules inside layout.css to style the new div block.

  1. Navigate to sites/all/themes/cti_flex/css.
  2. Open layout.css by using your favourite text editor and add the following two rules under the FIXED LAYOUT comment.
/* Custom class to style the about section */

.fixed-layout #about {
 float: right;
 padding: 10px 20px 0 0;
 width: 250px;
}

.fixed-layout #about p {
 color: #FFFFFF;
 float: right;
 font-size: 11px;
 letter-spacing: 1px;
 margin: 0;
 width: 175px;
}

Done! Now we have a little picture of the author along with a brief description at the top-right corner of the header.

Embedding a font to improve the look of the site title

Although there are several ways to accomplish this task, I am going to download a true type font called Orbitron from Google and embed it by using font-face.

  1. Download the zip file from Google and unzip it on the server in a folder called fonts. This folder must be created inside the cti_flex folder.
  2. Open html-reset.css by using your favourite text editor and add the following rule above the style rule for body.
@font-face {
 font-family: 'Orbitron';
 src: url('../fonts/Orbitron-Regular.ttf') format('truetype');
}

Open cti-flex-style.css as we did in the previous step and modify the style rule for the site name as follows:

h1#site-name,
div#site-name /* The name of the website */ {
 font-family: Orbitron, Arial, Helvetica, sans-serif;
 margin: 0;
 font-size: 2em;
 /* font-weight: bold; */
 font-weight: 400; /* New font-weight property for Orbitron-Regular */
 padding: 0;
 line-height: 1em;
 letter-spacing: 1px; /* New letter-spacing property for Orbitron-Regular */
}

Finally, the theme uses the strong tag to put the site name in bold. Open page.tpl.php and remove the opening and closing strong tags from the site name.

Drupal