WPservice DEVELOPMENT STUDIO PRESENTS
LONG-TERM GROWTH
We always design our websites with your future success in mind, carefully planning and optimizing all content to ensure maximum visibility and long-term profitability

Simple Guide On Drupal Theme Creation From Scratch

drupal theme creationDrupal is one of the most powerful, customisable and user friendly open source content management systems on the Internet. It is home to a busy community of theme developers who are consistently engaging in awesome Drupal theme creation so that users can create 100% unique websites. Well done to those theme developers who have made Drupal what it is!

If you’re looking to get into Drupal theme building yourself and enjoin yourself to this marvellous community, let’s take a look at Drupal: Create theme from scratch.

Drupal Theme Creation: Folder Structure

  1. First things first: Your theme needs a name. For the purpose of this tutorial, we are going to name our theme “Mine”.
  2. You need to create a folder titled custom, and you also need to create a folder titled Mine (or whatever you want to name your theme).
  3. Then you need to create a file called mine.info and a folder called template.php
  4. Then you need to go on over to /sites/all/themes/custom/mine and name them CSS, images and templates respectively.
  5. You then need to create another file by opening the CSS folder. Name this file style.css before heading to your templates folder and creating yet another folder that you will call page.tpl.php
  6. Configuration File – mine.info

Now, it’s time for Drupal 7 theme development!

  1. Head into your mine.info file. You will notice that this file stores all the info Drupal needs for your theme. It’s basically an essential component in the Drupal theme creation process.
  2. You need to add the following code:
name = Scratch
description = A custom template from scratch.
core = 7.x
stylesheets[all][] = CSS/style.CSS
regions[user_menu] = User Menu
regions[main_menu] = Main Menu
regions[content] = Content

Once you’ve done that, close the file and open page.tpl.php which you will find in your templates folder. This is the file where all your HTML code operates. Fortunately, the fundamentals have already been taken care of by html.tpl.php. All you need to focus on is building the page itself.

To get your page to display the minimum amount of data before you really get into the swing of things, you need to add the following code:

<?php print render($page [ ‘ content ‘ ] ) ; ?>

Save it as a .php file. This is important.

How To Enable Your Theme

The next step in the Drupal theme building process is to enable your theme. You need to login as an admin before selecting the Appearance link. Then select for your Mine theme “Enable and set default”.

Simple? Yes! But you also need to add the code below to page.tpl.php

<div class="black-header">
<div class="scratch-user-menu">
<?php if ($logged_in): ?>
<?php print render($page['user_menu']); ?>
<?php else: ?>
<ul>
<li class="menu"><a href="<?php base_path(); ?>user/login">Log In</a></li>
</ul>
<?php endif; ?>
</div>
</div>
<?php print render($page['content']); ?>

Whilst adding this code down here to your style.css:

body {
margin:0px;
}
/* Black header section */
.black-header {
height:50px;
background-color:#333;
}

As the user menu is already set up for you (those chaps at Drupal are darlings!), what you need to do next is set the user menu block so that it displays in the top black bar.

Have a look at your mine.info file. You will notice the following line:

regions[user_menu] = User Menu

This is where your menu block needs to go.

Head on over to Structure > Blocks before setting the User Menu block to User Menu Region.

Then save all changes.

You now need to position your links to the right. To do this, add the below code to style.css:

* User Menu */
.black-header h2, .scratch-main-menu h2 {
display:none;
}
.black-header ul, .scratch-main-menu ul {
list-style-type:none !important;
margin:0;
padding:0;
padding-top:12px;
padding-right:30px;
float:right;
}
.black-header li, .scratch-main-menu li {
display:inline;
}
.scratch-user-menu {
width:960px;
margin-left:auto;
margin-right:auto;
}
.scratch-user-menu .menu a:link {color:#FFF; text-decoration: none;}
.scratch-user-menu .menu a:visited {color:#FFF; text-decoration: none;}
.scratch-user-menu .menu a:hover {color:#FFF; text-decoration: underline;}
.scratch-user-menu .menu a:active {color:#FFF; text-decoration: none;}

How To Create Your Main Content Section

Perhaps the most crucial aspect of your website is the content section. The next step in our Drupal create theme from scratch tutorial is to do just this.

Below is the code for the main content section. Add it to page.tpl.php:

<div class="scratch-content-container-div clearfix">
<?php if ($messages): ?>
<div id="messages">
<div class="section clearfix">
<?php print $messages; ?>
</div>
</div>
<?php endif; ?>
<?php if ($breadcrumb): ?>
<div id="breadcrumb"><?php print $breadcrumb; ?></div>
<?php endif; ?>
<h1><?php print $title; ?></h1>
<?php print render($page['content']); ?>
</div>

Then add the below code to style.css:

/* main content */
.scratch-content-container-div {
width:960px;
margin-left:auto;
margin-right:auto;
}
/* breadcrumb */
#breadcrumb {
margin-top:15px;
}

To create the footer, add the below code to page.tpl.php:

<div class="scratch-footer">
<hr />
<div class="scratch-footer-text">
&copy; 2013 scratch. All rights reserved.
</div>
</div>

… And the below code to style.css:

/* footer */
.scratch-footer {
width:960px;
margin-left:auto;
margin-right:auto;
color:#4d4d4d;
text-align:center;
}

And voila! That is all the code done for Drupal theme creation. Simple, right?

Before we leave you, though, let’s have a look at how to create a front page:

  1. Drupal Theme Building: Creating A Front Page
  2. Head on over to Content > Add Content > Basic page.
  3. Set your title to “Menu – made by”, before pasting your text and saving the page.
  4. Make a note of the URL.
  5. Then head on over to Config > System > Site Information. Here you need to switch “Default front page” to your URL.
  6. Save all changes.

This theme development tutorial has shown you how easy is to use Drupal and create a theme from scratch. We hope you enjoyed it.

Comments are closed.