In the previous chapter, we got started on how to build a custom layout for a personal web page by setting the appearance of the base theme; creating a little picture and a brief description of the author at the top-right of the header; and embedding a font to improve the look of the site title.

Most of the content of this article was intended for Drupal to be customized by using a theme called CTI_Flex. Although CTI_Flex is not the main theme of this site anymore, the content of this article might still be useful for you.

Now we are going to customize the remaining parts of the site, but, first and foremost, we are going to explain the aim of the web page.

The purpose of the web page, the theme of which we are customizing, will be to fit out a place not only to publish articles about web development but also to see the professional profile of the author.

In order to achieve this goal, usability must be the cornerstone throughout the project. We strongly believe in this concept. Things will always be better if they are useful and easy to use and understand.

Let's start customizing the remaining parts of the site taking good account of this know-how.

In this chapter we shall be covering the following topics:

• Profile
• Main Menu Bar
• Main Content Wrapper
• Sidebar Wrapper

Profile

As we said earlier in this chapter, one of the missions of the page is to be a place to see the professional profile of the author. This is very easy to perform: just create a static page and link it by using the link more of the paragraph intended for the brief description of the author.

In addition, we are going to build a block for the last activities of the author in Google Plus. The idea is to use the Google Plus activities as a complement to the profile of the author.

Main Menu

The main menu bar will contain a collection of links to the most important topics of the page. The name of these links will match vocabulary terms to categorize the content (HTML, CSS, JavaScript, PHP and Drupal).

Main Content Wrapper

As we said above, usability must be present in all parts of the project. To that end we think that one way to keep things simple is to publish only the most recent post on the front page. The block for Google Plus activities will be placed below this single publication. All other publications will be able to be read either by using the main menu links or by clicking the vocabulary terms to categorize the content. These terms will be placed at the end of each publication.

In addition, we are going to customize the width of this wrapper to 690px and change the background color of the block containing the most recent post on the front page.

To change the background color, we are going to use a module called skinr. Install it and choose light gray as the background color for the container of the most recent publication.

In order to customize the width of the main content wrapper, we are going to edit layout.css and modify the style rule for content as follows:

.fixed-layout.sidebar-second #content {
 width: 690px;
 margin-left: 0;
 margin-right: -760px;
}

Sidebar Wrapper

The sidebar wrapper will be placed to the right of the main content wrapper. The main function of this sidebar will be to contain a search box that allows visitors to search all over the site.