Create custom.info file

Create a folder custom in your sites/all/themes folder Inside it create a file custom.info with these lines:

1
2
3
name = Custom Theme
core = 7.x
engine = phptemplate

Enable the theme

Go to Appearence and click ‘Enable and set default’ for the Custom Theme

Now you should see this:

Create page.tpl.php and style.css files

Create a folder templates in your sites/all/themes/custom folder

Inside it create a file page.tpl.php

Inside the page.tpl.php we create our html document for the layout. Let’s say you want to build a site to sell flowers and you come up with this awesome design:

It looks like you have 4 different areas. Let’s use 2 column fixed width layout for this:

I added two helpful containers around these areas: red will be #wrapper and blue #page-wrapper:

Now we create the html document with this design in mind. Add the wrapper and navigation divs in the page.tpl.php:

We print the navigation links from the menu system later so you don’t need to write the ul list inside the navigation div.

1
2
3
4
5
6
7
8
9
10
11
<div id="wrapper">
  <div id="navigation">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Delivery</a></li>
      <li><a href="#">How to Order</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </div>
</div>

Now our page looks like this:

Next we style the theme. Create a file style.css in sites/all/themes/custom

Add this line in the custom.info:

1
stylesheets[all][] = style.css

Edit style.css and add these lines:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*** COMMON ***/
* { margin:0; padding: 0;} /* Clear all predefined margins and paddings to make it easier to style */
html { overflow-y: scroll;} /* Prevent page-shift to right when little or no content. */
body { font-family: Arial, sans-serif;} /* Change the default font to Arial. Generic sans-serif will be applied if Arial is not available */
a { color: #000; outline: none;} /* Remove dotted outline from links (might want to leave it for better usability). */

/*** LAYOUT ***/

/* WRAPPER */
#wrapper { width: 1000px; margin: 0 auto;} /* Make it 1000px wide and center it */

/* NAVIGATION */
#navigation { width: 1000px; height: 50px; border: 1px solid #ccc; border-top: none; background-color: #eee;  } /* Define width, height, border and background color */
 #navigation ul { width: 400px;  margin: 0 auto; list-style: none; line-height: 50px;} /* list-style removes the dots, line-height centers the links vertically */
  #navigation ul li{ display: inline;} /* Spread the list elements horizontally */

Now you have styled the navigation:

Add a header. Put this line below navigation div in page.tpl.php:

1
<div id="header"><h1>BuyFlowers.com</h1></div>

Edit style.css and add this:

1
2
3
/* HEADER */
#header { width: 1000px; height: 150px; border: 1px solid #ccc; border-top: none; background-color: #ddd; }
 #header h1 { line-height: 150px; padding: 0 0 0 60px; font-size: 40px;}

Now we add page-wrapper and the rest of divs. Add the lines below header div in page.tpl.php:

1
2
3
4
<div id="page-wrapper">
  <div id="sidebar"><p>Sidebar</p></div>
  <div id="content"><p>Content</p></div>
</div>

In style.css add these lines:

1
2
3
4
5
6
7
p { padding: 1em;}

/* PAGE-WRAPPER */
#page-wrapper { width: 1000px; border: 1px solid #ccc; border-top: none;}

/* SIDEBAR */
#sidebar { width: 300px; float: right; border-left: 1px solid #ccc;  background-color: #eee; }

Now everything looks ok, right?

But if I put a lot of stuff inside the content div, this will happen:

That can’t be good. Let’s fix it. Content div needs some margin. Add this line below #sidebar in style.css:

1
2
/* CONTENT */
#content { margin-right: 300px;}

Now it’s smooth… no wait, the sidebar is not going to the bottom. There are ways to fix this. One way is to do this:

Edit style.css and add these declarations in #sidebar rule:

1
2
padding-bottom: 10000px; 
margin-bottom: -10000px;

Also add this declaration in #page-wrapper rule:

1
overflow: hidden;

Now it’s ok.

Bring in the Drupal

Go to Structure > Menus and add our navigation links in Main menu:

You can print those out with this function:

1
print theme('links__system_main_menu',array('links' => $main_menu));

Delete the navigation div in page.tpl.php and replace it with this:

1
<div id="navigation"><?php print theme('links__system_main_menu',array('links' => $main_menu)); ?></div>

Add a sidebar: replace sidebar div in page.tpl.php with this:

1
<div id="sidebar"><?php print render($page['sidebar_first']); ?></div>

Now page.tpl.php looks like this:

The content

Replace the content div in page.tpl.php with this:

1
2
3
4
5
6
7
 <div id="content">
      <h1><?php print $title; ?></h1>
      <div class="tabs"><?php print render($tabs); ?></div>
      <?php print render($page['help']); ?>
      <ul class="action-links"><?php print render($action_links); ?></ul>
      <?php print render($page['content']); ?>
 </div>

Next we style it a bit. Replace the #sidebar padding-bottom in style.css with this:

1
padding: 20px 20px 10000px 20px;

Add little padding to #content in style.css

1
padding: 20px;

Add some content and you have this:

Some refining

You should also print the status and error messages with:

1
<?php print $messages; ?>

Note that this is very simple site. If you feel like you are missing some functionality, just go to Drupal API to find other variables you can print out (like site logo and title if you want to be able to configure them with the drupal interface, or add breadcrumb, another sidebar, footer and so on).

And you should check if the variable exists before you try to print it out, like this:

1
<?php if ($main_menu) { print theme('links__system_main_menu',array('links' => $main_menu)); } ?>

Here are the final files

page.tpl.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="wrapper">
  <div id="navigation"><?php if ($main_menu) { print theme('links__system_main_menu',array('links' => $main_menu)); } ?></div>
  <div id="header"><h1>BuyFlowers.com</h1></div>
  <div id="page-wrapper">
    <div id="sidebar"><?php if($page['sidebar_first']) { print render($page['sidebar_first']); } ?></div>
    <div id="content">
      <?php print $messages; ?>
      <h1><?php if($title) { print $title; } ?></h1>
      <div class="tabs"><?php if ($tabs) { print render($tabs); } ?></div>
      <?php print render($page['help']); ?>
      <ul class="action-links"><?php if($action_links) { print render($action_links); } ?></ul>
      <?php print render($page['content']); ?>
    </div>
  </div>
</div>

style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/*** COMMON ***/
* { margin:0; padding: 0;} /* Clear all predefined margins and paddings to make it easier to style */
html { overflow-y: scroll;} /* Prevent page-shift to right when little or no content. */
body { font-family: Arial, sans-serif;} /* Change the default font to Arial. Generic sans-serif will be applied if Arial is not available */
a { color: #000; outline: none;} /* Remove dotted outline from links (might want to leave it for better usability). */
p { padding: 1em;}

/*** LAYOUT ***/

/* WRAPPER */
#wrapper { width: 1000px; margin: 0 auto;} /* Make it 1000px wide and center it */

/* NAVIGATION */
#navigation { width: 1000px; height: 50px; border: 1px solid #ccc; border-top: none; background-color: #eee;  } /* Define width, height, border and background color */
 #navigation ul { width: 400px;  margin: 0 auto; list-style: none; line-height: 50px;} /* list-style removes the dots, line-height centers the links vertically */
  #navigation ul li{ display: inline;} /* Spread the list elements horizontally */

/* HEADER */
#header { width: 1000px; height: 150px; border: 1px solid #ccc; border-top: none; background-color: #ddd; }
 #header h1 { line-height: 150px; padding: 0 0 0 60px; font-size: 40px;}

/* PAGE-WRAPPER */
#page-wrapper { width: 1000px; border: 1px solid #ccc; border-top: none; overflow: hidden;}

/* SIDEBAR */
#sidebar {  width: 260px; float: right; border-left: 1px solid #ccc;  background-color: #eee; padding: 20px 20px 10000px 20px;  margin-bottom: -10000px; }

/* CONTENT */
#content { margin-right: 300px; padding: 20px;}