Create a Drupal theme
By SOPHIA-H
You can download themes from drupal.org and modify them, o r create a theme
from scratch.
Detailed Graphic Design
If youve done your research, youll have a firm idea of what youre going to create
and the general look and feel of it. Before you start building it though, youll need to
come up with a few sketches. If you are working for a Client, theyll want to see
what ideas you have (and they will want to contribute to it, so dont start building
the site without their feedback on the design first). If you are creating a site for
yourself, you may end up changing your design during the development stage, but
its still important to come up with site layout.
Create a basic wireframe of your main page (this can be as simple as boxes to
divide your page, using elements. Identify the type of content that will sit within
these elements
And last but not least, you need to create a graphic which accurately portrays the
finished look and feel of the site.
Create the template files and add content
First things first, create a folder for your new theme. Make sure the name is in
lowercase, such as petrichor, but dont use spaces and avoid uppercase wherever
you can. Move this folder to your themes folder, inside drupal
(websitename\sites\all\themes\petrichor)
In this folder, were going to create 3 fundamental files. These can be create in
Dreamweaver or notepad++.
1. petrichor.info (the name of this folder MUST correspond with the name of your
theme folder, exactly)
2. page.tpl.php (this is the main page template)
3. styles.css (your CSS sheet)
petrichor.info Page
Your petrichor.info sheet must contain the following:
name = alpha
description = A 2-column layout.
core = 7.x
engine = phptemplate
;CSS this is comment
stylesheets[all][] = assets/css/styles.css
;JS this is a comment
scripts[] = assets/js/modenizr.js
scripts[] = assets/js/selectivizr.js
regions[slideshow] = Slideshow
regions[content] = Content
regions[sidebar] = Sidebar
regions[social] = Social Icons
regions[footer] = Footer
regions[help] = Help
regions[page_top] = Page Top
regions[page_bottom] = Page Bottom
features[] = logo
features[] = name
features[] = slogan
features[] = mission
features[] = node_user_picture
features[] = comment_user_picture
features[] = search
features[] = favicon
features[] = primary_links
features[] = secondary_links
Read: http://drupal.org/node/171205
page.tpl.php
Below are some standard scripts you can include in your page.tpl.php page.
Anything which is being referenced from your .info sheet must be rendered and will
be written like this <?php print render($page[content]); ?>
Place the following scripts in the appropriate element tags!
<!--theme search box -->
<?php print $search_box; ?>
<!--BEGIN Header -->
<!--logo-->
<?php if ($logo): ?>
<a href="<?php print $base_path; ?>" title="<?php print t('Click to return to the Homepage'); ?>" />
<img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" /></a>
<?php endif; ?>
<!--site name-->
<?php if ($site_name): ?>
<div>
<h1><a href="<?php print $base_path; ?>" title="<?php print t('Home'); ?>"><?php print $site_name;
?></a></h1>
</div>
<?php endif; ?>
<!-- slogan -->
<?php if ($site_slogan): ?>
<div>
<?php print $site_slogan; ?>
</div>
<?php endif; ?>
<!-- mission statement -->
<?php print $mission; ?>
<!-- Region: header -->
<?php print render($page[page_top]); ?>
<?php print render($page[slideshow]); ?>
<!--END header-wrapper -->
<nav>
<div id=main-menu>
<?php print theme(links_system_main_menu, array(links =. $main_menu, attributes => array(class
=> array(links, menu, inline, clearfix)))); ?>
</div>
</nav>
<!-- BEGIN Centre Content -->
<!-- Region: sidebar -->
<?php print render($page[sidebar]); ?>
<!-- breadcrumb trail -->
<?php if ($breadcrumb): ?>
<?php print $breadcrumb; ?>
<?php endif; ?>
<!-- title -->
<?php print render($title_prefix); ?>
<?php if ($title): ?>
<h1>
<?php print $title; ?>
</h1>
<?php endif; ?>
<?php print render($title_suffix); ?>
<!-- tabs -->
<?php if ($tabs): ?>
<?php print render($tabs); ?>
Create a Drupal 7 Theme
<?php endif; ?>
<!-- action links -->
<?php if ($actions_links): ?>
<ul class=action-links>
<?php print render($action_links); ?>
</ul>
<?php endif; ?>
<!-- help -->
<?php print $help; ?>
<!-- messages -->
<?php print $messages; ?>
<!-- Region: content -->
<?php print render($page[content]); ?>
<!-- END Content Area -->
<!-- BEGIN Footer -->
<?php print render($page[footer]); ?>
<!feed icons -->
<?php print render($page[social]); ?>
<!-- footer text -->
<?php print $footer_message; ?>
<!-- END footer region -->
<?php print $closure; ?>
Now you can create your CSS to customise the look and feel of your content
By Sophia H
Create a Drupal 7 Theme
By Sophia H
