How to Create a Drupal Theme / Convert Wordpress Theme into Drupal 6.x Theme
Create Theme Folder and .Info File
- Create a new folder under drupal installation. Name the folder after the name of your theme. For example, if you want to create a theme called "World Best Theme", name the folder as worldbest theme
- create a .info file under your theme folder. The name of the .info file should match your theme name. Please read this tutorial on how to insert settings in the .info file
Structure the page
each Wordpress / Drupal theme has 4 sections - header, content, sidebar (sidebar left and / or sidebar right), and footer. All you have to do is copy the stucture of Wordpress theme, and paste it in a page.tpl.php under the theme folder. Insert Drupal theme standard regions, such as $right, $left, $content into the page.tpl.php file.
Fix the CSS
This is the most difficult part, as Drupal and Wordpress have different default CSS classes and ID that need to be addressed in the CSS file. Below are some of the standard CSS sections that need to be addressed in Drupal theme. The best way to fix this CSS mess is to create a whole new style.css file in the theme folder. Then, copy the following example into the style.css. Then, open the Wordpress theme CSS file, and look for the equivalent CSS items and paste them into the style.css file. Don't worry too much about the CSS if you can't find the equivalent items, as you can always tweak the CSS later after the theme goes to the live testing system.
/*--- Structure ---*/
body {background: #f8ebdc url(images/background.jpg) repeat-x;font-size: 11px;font-family: Geneva, Arial, Helvetica, sans-serif;color: #9e9e9e;text-align: center;margin: 0px;padding: 0px;}
#page {text-align: left;background-image: url(images/pagebg.jpg); width: 988px;margin-top: 0px;margin-bottom: 0px; margin-left: auto;margin-right: auto; }
.narrowcolumn {float: left;padding: 0 16px 20px 31px;margin: 0;width: 535px;overflow: hidden;}
/*--- Header ---*/
#header {background: url(images/header.jpg) no-repeat;height: 300px;margin: 0px;padding: 0px;}
.header-logo {
padding:100px 0 0 150px;
text-align:left;
font-weight: bold;
}
.header-title {
font-family: Verdana;
color:#1a150f;
font-size:26px;
padding:35px 0 0 418px;
text-align:left;
font-weight: bold;
}
.header-title a{
color:#1a150f;
text-decoration:none;
border-bottom:none;
font-weight: bold;
}
.header-title a:hover{
color:#1a150f;
text-decoration:none;
border-bottom:none;
}
.header-description {
color:#1a150f;
font-size:11px;
padding:3px 0 0 419px;
text-align:left;
}
/*--- Headings ---*/
h1, h2, h3 {font-family: Geneva, Arial, Helvetica, sans-serif;font-weight: bold;}
h2 {font-size: 1.5em;border-bottom: 1px dotted #5c5751;}
h2.pagetitle {font-size: 1.5em;}
h3 { font-size: 1.3em;}
h1, h1 a, h1 a:hover, h1 a:visited, .description {color:#eeeeee;text-decoration: none;}
h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {color:#eeeeee;text-decoration: none;}
h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #leftsidebar h2, #rightsidebar h2, cite {text-decoration: none;}
h2 {margin: 20px 0 0;}
h2.pagetitle {margin-top: 20px;text-align: center;}
h3 {padding: 0;margin: 20px 0 0;}
h3.comments {padding: 0;margin: 40px auto 20px ;}
/*--- Links ---*/
a, h2 a:hover, h3 a:hover {color: #9e9e9e;text-decoration: none;}
a:hover {color: #9e9e9e;text-decoration: underline;}
/*--- Drupal Standard Entities ---*/
fieldset {
border: 1px solid #ccc;
}
p {
margin: 0 0 1.3em 0;
padding: 0;
}
blockquote {margin: 15px 30px 0 10px;padding-left: 25px;font-family: Geneva, Arial, Helvetica, sans-serif;}
blockquote cite {margin: 5px 0 0;display: block;}
pre {
background-color: #eee;
padding: 0.75em 1.5em;
font-size: 1.2em;
border: 1px solid #ddd;
}
.form-item {
margin-top: 1em;
}
.form-item label {
color: #369;
}
.item-list .title {
color: #369;
font-size: 0.85em;
}
#help {
font-size: 0.9em;
margin-bottom: 1em;
}
.breadcrumb {
margin-bottom: .5em;
}
.breadcrumb a {
padding: .3em;
}
.messages {
background-color: #eee;
border: 1px solid #ccc;
padding: 0.3em;
margin-bottom: 1em;
}
.error {
border-color: red;
}
.nav {
padding: 0;
margin: 0;
}
.hide {
display: none
}
/*--- Primary Links ---*/
.primary-links, .primary-links a:link, .primary-links a:visited {
color: #369;
}
.primary-links a:hover {
color: #000;
}
/*--- Secondary Links ---*/
.secondary-links, .secondary-links a:link, .secondary-links a:visited {
color: #e4e9eb;
}
.secondary-links a:hover {
color: #fff;
text-decoration: underline;
}
/*--- Tabs ---*/
.tabs {
margin: 15px 0;
}
.tabs ul.primary {
border-collapse: collapse;
padding: 0 0 3px 10px; /* LTR */
white-space: nowrap;
list-style: none;
margin: 0;
height: auto;
line-height: normal;
border-bottom: 2px solid #369;
}
.tabs ul.primary li {
display: inline;
}
.tabs ul.primary li a {
padding: 3px 10px;
background: #fff url(tabs-off.png) left top no-repeat; /* LTR */
border-color: #69C;
border-width: 2px;
border-style: none solid none none; /* LTR */
height: auto;
margin-right: 10px; /* LTR */
text-decoration: none;
text-transform: lowercase;
}
.tabs ul.primary li.active a {
background: #369 url(tabs-on.png) left top no-repeat; /* LTR */
border-right: 2px solid #369; /* LTR */
color: #fff;
}
.tabs ul.primary li a:hover {
background-color: #fffaf0;
color: #ff4500;
}
.tabs ul.secondary {
border-collapse: collapse;
padding: 10px 0;
margin: 0;
white-space: nowrap;
width: 100%;
list-style: none;
height: auto;
line-height: normal;
border-bottom: none;
}
.tabs ul.secondary li {
display: inline;
height: auto;
padding: 0 0 0 10px; /* LTR */
text-decoration: none;
border-right: none; /* LTR */
}
.tabs ul.secondary li a {
background: #fff url(tabs-option-off.png) left center no-repeat; /* LTR */
padding: 10px 0 10px 25px; /* LTR */
margin: 0;
}
.tabs ul.secondary li a.active {
background: #fff url(tabs-option-on.png) left center no-repeat; /* LTR */
color: #369;
border-bottom: none;
}
.tabs ul.secondary li a:hover {
background: #fff url(tabs-option-hover.png) left center no-repeat; /* LTR */
color: #FF4500;
}
/*--- Box ---*/
.box {
padding: 0 0 1.5em 0;
}
.box {
padding: 0;
margin: 0;
}
.box h2 {
font-size: 9px;
}
.block .title h3 {
border-bottom: 2px solid #69c;
color: #369;
font-size: 18px;
font-weight: bold;
padding: 10px 5px 10px 30px; /* LTR */
margin-bottom: .25em;
background: transparent url(icon-block.png) left center no-repeat; /* LTR */
}
/*--- Block ---*/
.block .content {
padding: 5px;
}
.block {
margin-bottom: 1.5em;
}
.box .title {
font-size: 1.1em;
}
/*--- Node ---*/
.node {
margin: .5em 0 2.5em 0;
}
.node .content, .comment .content {
margin: .5em 0 .5em 0;
}
.node .taxonomy {
color: #999;
font-size: 0.83em;
padding: 1.5em;
}
.node .picture {
border: 1px solid #fff;
float: right; /* LTR */
margin: 0.5em;
}
/*--- Comment ---*/
.comment {
border: 1px solid #abc;
padding: .5em;
margin-bottom: 1em;
}
.comment .title {
font-size: 1em;
padding: 10px 0 12px 19px; /* LTR */
background: transparent url(icon-comment.png) left center no-repeat; /* LTR */
}
.comment .new {
font-weight: bold;
font-size: 1em;
margin-left: 2px; /* LTR */
color: red;
}
.comment .picture {
border: 1px solid #fff;
float: right; /* LTR */
margin: 10px;
}
/*--- Menu ---*/
#menu {
padding: 0.5em 0.5em 0 0.5em;
text-align: right; /* LTR */
vertical-align: middle;
}
/*--- Searchbox ---*/
#search .form-text, #search .form-submit {
border: 1px solid #369;
font-size: 0.85em;
margin: 0.2em;
}
#search .form-text {
width: 9em;
}
#search .form-submit {
height: 1.5em;
}
/*--- Links ---*/
div.links {
color: #ff8c00;
}
.links a {
font-weight: bold;
}
div.links {
font-size: 0.75em;
}
div.links .prev, div.links .next, div.links .up {
font-size: 1.15em;
}
/*--- Sidebar ---*/
#leftsidebar{margin-top: 0px;margin-left:9px;font: 1em Geneva, Arial, Sans-Serif;color: #9e9e9e;width: 200px;float: left;margin-right: 10px;}
#rightsidebar{margin-top: 0;margin-left: 0;float:right;font: 1em Geneva, Arial, Sans-Serif;color: #9e9e9e;width: 148px;padding: 0px;margin-right: 27px;}
#leftsidebar h2 {font-family: Geneva, Arial, Helvetica, sans-serif;font-size: 1.5em;margin: 5px 0 0;padding-top: 10px;font-weight: bold;color: #eeeeee; border-bottom: 1px dotted #5c5751;}
#rightsidebar h2 {font-family: Geneva, Arial, Helvetica, sans-serif;font-size: 1.5em;border-bottom-width: 1px;border-bottom-style: solid;margin: 5px 0 0;padding-top: 10px;font-weight: bold;color: #eeeeee; border-bottom: 1px dotted #5c5751;}
#leftsidebar ul, #leftsidebar ul ol {margin: 0px;padding: 0px;list-style-image: none;list-style-type: none; }
#rightsidebar ul, #rightsidebar ul ol {text-decoration: none;margin: 0px;padding: 0px;list-style-image: none;list-style-type: none;}
#rightsidebar ul, #rightsidebar ul ol {margin: 0px;padding: 0px;list-style-image: none;list-style-type: none;}
#leftsidebar li ul a:link {text-decoration: none;list-style-type: none;list-style-image: none;margin-bottom: 15px; color: #9e9e9e;}
#leftsidebar li ul a:hover {text-decoration: underline; color: #9e9e9e;}
#rightsidebar li ul a:link {text-decoration: none; list-style-type: none;list-style-image: none;margin-bottom: 15px; color: #9e9e9e;}
#rightsidebar li ul a:hover {text-decoration: underline; color: #9e9e9e;}
#leftsidebar ul p, #leftsidebar ul select {margin: 5px 0 8px; color: #9e9e9e;}
#rightsidebar ul p, #rightsidebar ul select {text-decoration: none;margin: 5px 0 8px; }
#leftsidebar ul ul, #leftsidebar ul ol {margin: 5px 0 0 5px; color: #9e9e9e;}
#rightsidebar ul ul, #rightsidebar ul ol {text-decoration: none;margin: 5px 0 0 5px;}
#leftsidebar ul ul ul, #leftsidebar ul ol{margin: 0 0 0 10px; color: #9e9e9e;}
#rightsidebar ul ul ul, #rightsidebar ul ol{text-decoration: none;margin: 0 0 0 10px;}
ol li, #leftsidebar ul ol li { list-style: decimal outside; color: #9e9e9e;}
#rightsidebar ul ol li {text-decoration: none;list-style: decimal outside;}
#leftsidebar ul ul li, #leftsidebar ul ol li{margin: 3px 0px 0px;padding: 0px; color: #9e9e9e;}
#rightsidebar ul ul li, #rightsidebar ul ol li {text-decoration: none;margin: 3px 0px 0px;padding: 0px;}
/*--- Footer ---*/
#footer {background: url(images/footer.jpg); padding: 0px;margin: 0px auto;width: 988px; height: 88px; clear: both;}
#footer p {color: #9e9e9e; padding-top: 23px; text-align: center; text-decoration: none;}
#footer a, #footer a:visited {color: #9e9e9e; text-decoration: none;}
#footer a:hover {color: #9e9e9e; text-decoration: none;}
/*--- Administrative page style ---*/
div.admin-panel .description {
color: #999;
}
div.admin-panel h3 {
background-color: #369;
color: #fff;
padding: 5px 8px 5px;
margin: 0;
}
div.admin-panel .body {
background: #fffaf0;
}
/*--- Module specific styles ---*/
.content .active {
color: #369;
}
#aggregator .feed-source {
background-color: #eee;
border: 1px solid #ccc;
padding: 1em;
margin: 1em 0 1em 0;
}
#aggregator .news-item .source {
color: #999;
font-style: italic;
font-size: 0.85em;
}
#aggregator .title {
font-size: 1em;
}
#aggregator h3 {
margin-top: 1em;
}
#tracker th {
text-align: center;
background-color: #f5f5f5;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd; /* LTR */
border-left: 1px solid #fafafa; /* LTR */
}
#tracker th img {
float: right; /* LTR */
}
#tracker tr.even, #tracker tr.odd {
background-color: #fff;
}
#tracker td {
vertical-align: top;
padding: 1em 1em 1em 0; /* LTR */
border-bottom: 1px solid #bbb;
}
#forum {
margin: 15px 0 15px 0;
background-color: #fff;
}
#forum table {
width: 100%;
border: 2px solid #69c;
}
#forum table tr th {
text-align: center;
background: #69c;
color: #fff;
font-size: 0.75em;
border-bottom: 1px solid #aaa;
}
#forum table tr th a {
color: #fff;
text-decoration: underline;
}
#forum table tr th img {
margin: 0;
}
#forum tr.odd {
background: #e0edfb;
}
#forum tr.even {
background: #fff;
}
#forum td {
padding: 0.5em;
}
#forum td.container {
color: #000;
background: #369 url(forum-container.jpg) right top no-repeat; /* LTR */
border: 2px solid #69c;
}
#forum td.container a {
color: #e4e9eb;
padding: 20px 0 20px 35px; /* LTR */
background: transparent url(forum-link.png) left center no-repeat; /* LTR */
}
#forum td.container a:visited {
color: #e4e9eb;
}
#forum td.statistics, #forum td.settings, #forum td.pager {
height: 1.5em;
border: 1px solid #bbb;
}
#forum td .name {
color: #96c;
}
#forum td .links {
padding-top: 0.7em;
font-size: 0.9em;
}
.block-forum h3 {
margin-bottom: .5em;
}
Create block.tpl.php file in the theme folder, and insert copy and paste the following example into the block.tpl.php file.
<div class="<?php print "block block-$block->module" ?>" id="<?php print "block-$block->module-$block->delta"; ?>">
<div class="title"><h3><?php print $block->subject ?></h3></div>
<div class="content"><?php print $block->content ?></div>
</div>
Create box.tpl.php file in the theme folder, and insert copy and paste the following example into the box.tpl.php file.
<div class="box">
<?php if ($title): ?>
<h2 class="title"><?php print $title ?></h2>
<?php endif; ?>
<div class="content"><?php print $content ?></div>
</div>
Create comment.tpl.php file in the theme folder, and insert copy and paste the following example into the comment.tpl.php file.
<div class="comment<?php print ' '. $status; ?>">
<?php if ($picture) : ?>
<?php print $picture ?>
<?php endif; ?>
<h3 class="title"><?php print $title ?></h3>
<div class="submitted"><?php print $submitted ?><?php if ($comment->new) : ?><span class="new"> *<?php print $new ?></span><?php endif; ?></div>
<div class="content">
<?php print $content ?>
<?php if ($signature): ?>
<div class="clear-block">
<div>—</div>
<?php print $signature ?>
</div>
<?php endif; ?>
</div>
<!-- BEGIN: links -->
<div class="links">» <?php print $links ?></div>
<!-- END: links -->
</div>
Create node.tpl.php file in the theme folder, and insert copy and paste the following example into the comment.tpl.php file.
<div class="node<?php if ($sticky) { print " sticky"; } ?><?php if (!$status) { print " node-unpublished"; } ?>">
<?php print $picture ?>
<?php if ($page == 0): ?>
<h1 class="title"><a href="<?php print $node_url ?>"><?php print $title ?></a></h1>
<?php endif; ?>
<span class="submitted"><?php print $submitted ?></span>
<div class="taxonomy"><?php print $terms ?></div>
<div class="content"><?php print $content ?></div>
<?php if ($links): ?>
<div class="links">» <?php print $links ?></div>
<?php endif; ?>
</div>
Optional: Create snapshot.
Recent comments
- thanksrokettube (not verified)
- AboutAnonymous (not verified)
- I was looking for somethingfilm izle (not verified)
- It;s a bit on the basicHolidays from Aberdeen Airport (not verified)
- Nice..!!Seo Articles (not verified)
- You need to create an imageAnonymous (not verified)
- It is for Drupal 5kenson
- HelloPeter (not verified)
- Any plans to port Higher Ground to Drupal 6?Anonymous (not verified)
- I know this is a noob question..Anonymous
