Portierung eine Themes von openwebdesign.org
Übersicht
- Systemanforderungen
- Die Lizenzen
- Auswahl des Designs
- Aufbereitung des Templates
- Einbinden des PHP-Codes
- Anpassen des CSS-Styles
- Fertigstellung und Veröffentlichung
- Anhang
Systemanforderungen
- XAMP
- Drupal 4.7 (oder 4.6 mit PHPTemplate)
Die Lizenzen
Alle Designs die auf openwebdesign.org zu finden sind unterstehen derzeit zwei verschiedenen Lizenzen, entweder der Creative Commons Attribution v2.5 oder der Public Domain. Das macht Sie für nahezu alle Zwecke frei verwendbar, jedoch sollte trotzdem jeder, der daran denkt eines der Templates zu benutzen, vorher die Lizenzen gelesen und verstanden haben, um anschliessend zu entscheiden, ob die Lizenz die Verwendung für das eigene Projekt erlaubt.
Links:
OpenWebDesign.org http://openwebdesign.org
http://openwebdesign.org/licenses.php
CreativeCommons http://creativecommons.org/
CreativeCommons Attribution v2.5 http://creativecommons.org/licenses/by/2.5/
CreativeCommons Public Domain http://creativecommons.org/licenses/publicdomain/
Auswahl des Designs
Es gibt derzeit etwa 1500 qualitativ mehr oder minder gute Designs. Sie sind alle Kategorisiert nach Validierung, Kontrast und Farben. Zu empfehlen ist aus meiner Sicht ein Template, daß als XHMTL 1.0 Strict validiert, oder zumindest XHMTL 1.0 Transitional.
Angegeben ist auch, ob ein Template CSS verwendet. Das ist empfehlenswert, jedoch sollte man dennoch im Quelltext der Seite prüfen ob Tabellen für das Layout verwendet wurden. Ist dies der Fall muss man sich auf weitere Programmierarbeit einstellen, um das Template an die aktuellen Standards anzupassen.
Nachdem man also ein passendes Template gefunden hat, muss man es nur noch runterladen und entpacken.
Anschliessend erstellen wir einen Ordner im Ordner /themes in unserer Drupal Installation und benennen ihn nach dem namen des Templates.
In diesem Fall
/themes/treshold
Nachdem wir alle im Template enthaltene Dateien dorthin kopiert haben, ist das jetzt unser Arbeitsordner.
Links:
Auflistung, sortiert nach Datum/Rating/Downloads http://openwebdesign.org/browse.php
Suche per Kategorisierung http://openwebdesign.org/search.php
Ein Zufallsdesign http://openwebdesign.org/designornot/
Gewähltes Template http://openwebdesign.org/viewdesign.phtml?id=2387
Aufbereitung des Templates
Für dieses Tutorial wurde das Template http://openwebdesign.org/viewdesign.phtml?id=2387 gewählt.
Unser ausgewähltes Template beinhaltet eine Datei namens index.html und eine Datei namens style.css, sowie eine print.css und einige Bilder.
Die Dateien index.html und style.css werden wir im folgenden bearbeiten.
index.html
Um eine bessere Übersichtlichkeit zu erhalten, entfernen wir erst einmal mit einem beliebigen Texteditor (kein Office Programm), alle überflüssigen Texte, reformatieren den Code anhand von Drupals coding standards und erhalten folgende Datei:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<title></title>
</head>
<body>
<div id="container">
<div id="header">
<div id="toplinks">
</div>
</div>
<div id="leftcolumn">
</div>
<div id="sidebar">
</div>
<p id="footer"></p>
</div>
</body>
</html>
Jetzt können wir die Datei unter dem Namen page.tpl.php in unserem Theme Ordner speichern. Das ist die Datei, die von Drupal verwendet wird, um die Seite zu erzeugen. Die CSS Datei bleibt vorerst unangetastet.
Links:
Coding Standards http://drupal.org/node/318
Theme Coding Convenions http://drupal.org/node/1965
Einbinden des PHP-Codes
Wenn wir das Theme so wie es jetzt ist benutzen, so erhalten wir aber noch keine Ausgaben. Wir müssen also noch den PHP-Code einfügen der es Drupal ermöglicht den Content, die Sidebar und die Navigationsleiste aufzufüllen.
Wir arbeiten an der Datei page.tpl.php.
Als erstes geben wir bekannt in welcher Sprache unsere Seite betrieben wird:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print $language ?>" xml:lang="<?php print $language ?>">Dann geben wir unserer Webseite einen Titel und fügen die Metainformationen, Javascript und Stylesheets hinzu:
<head>
<title><?php print $head_title ?></title>
<?php print $head ?>
<?php print $styles ?>
<script type="text/javascript"><?php /* Needed to avoid Flash of Unstyle Content in IE */ ?> </script>
</head>Nun kommen wir zum endlich zum sichtbaren Bereich unserer Webseite. Als erstes der Kopfbereich:
<div id="header">
<?php if ($site_name) { ?><h1 class='site-name'><img src="/<?php print $logo ?>" alt="<?php print t('Home') ?>" class="logo" /><a href="/<?php print $base_path ?>" title="<?php print t('Home') ?>"><?php print $site_name ?></a></h1><?php } ?>
<div id="toplinks">
<?php if (isset($primary_links)) { ?><div id="primary"><?php print theme('links', $primary_links) ?></div><?php } ?>
<?php print $search_box ?>
</div>
<img class="header" src="/<?php print $base_path."/".$directory ?>/header.jpg" alt="header" />
</div>Danach der Contentbereich, in dem alle unsere Artikel dargestellt werden:
<div id="leftcolumn">
<div id="main">
<?php print $breadcrumb ?>
<?php if ($site_slogan) { ?><h2 class="slogan"><?php print $site_slogan ?></h2><?php } ?>
<?php if ($title) { ?><h1 class="title"><?php print $title ?></h1><?php } ?>
<?php if ($tabs) { ?><div class="tabs"><?php print $tabs ?></div><?php } ?>
<?php print $help ?>
<?php print $messages ?>
<?php print $content; ?>
</div>
</div>Anschliessend der Bereich für die Blöcke, wobei bei diesem Template nur auf einer Seite Blöcke vorgesehen sind:
<div id="sidebar">
<?php if ($sidebar_left) { ?><?php print $sidebar_left ?><?php } ?>
<?php if ($sidebar_right) { ?><?php print $sidebar_right ?><?php } ?>
</div>Als letztes kommt der Footer Bereich:
<p id="footer"><?php print $footer_message ?></p>...und der zwingende closure Tag.
<?php print $closure ?>Damit das Stylesheet auch funktioniert, müssen wir die verwendeten Styles auch noch in die Ausgabe von Drupal schmuggeln.
In diesem Falle sind die Ausgabe der Nodes und die Ausgabe der Blöcke anzupassen.
Die Standard Templates finden wir auf drupal.org, in diesem Fall habe ich die entsprechenden Dateien aus dem bluemarine Theme genommen.
Diese kopieren wir und speichern sie unter passendem Namen in unserem Theme Ordner.
Anschliessend müssen nur noch Kleinigkeiten angepasst werden:
node.tpl.php
<div class="node<?php if ($sticky) { print " sticky"; } ?>">
<?php if ($picture) { print $picture; }?>
<?php if ($page == 0) { ?><h1 class="title"><a href="/<?php print $node_url?>"><?php print $title?></a></h2><?php }; ?>
<h2 class="submitted"><?php print $submitted?></h2>
<div class="taxonomy"><?php print $terms?></div>
<div class="content"><?php print $content?></div>
<?php if ($links) { ?><span class="links">» <?php print $links?></span><?php }; ?>
</div>block.tpl.php
<div class="sidebox">
<div class="block block-<?php print $block->module; ?>" id="block-<?php print $block->module; ?>-<?php print $block->delta; ?>">
<h1 class="title"><?php print $block->subject; ?></h1>
<div class="content"><?php print $block->content; ?></div>
</div>
<p> </p>
</div>Links:
Theme developer's guide http://drupal.org/node/509
Verfügbare Variablen http://drupal.org/phptemplate
Node.tpl.php http://drupal.org/node/11816
Block.tpl.php http://drupal.org/node/11813
Anpassen des CSS-Styles
Jetzt dürfte das Theme schon recht ansehnlich sein und halbwegs funktionieren. Um jedoch ein konsistentes Design zu ehalten müssen wird in diesem Fall noch das Stylesheet ergänzen, bzw. anpassen.
Wir arbeiten an der Datei style.css.
Wichtig ist, daß diese Datei tatsächlich auch diesen Namen trägt, sonst wird sie von Drupal nicht gefunden.
Die Zeile 76 musste ich leider auskommentieren, denn sie führte zu Problemen mit der Darstellung:
/* #margin-top:-18px; */Die folgenden Ergänzungen habe ich im Stylesheet vorgenommen:
/* Drupal specific */
.site-name .logo {
border: 0 !important;
}
.block .content {
padding: 0px 10px 0px 18px;
}
.taxonomy {
padding-left:10px;
}
.tabs {
margin-bottom: 25px;
}
.breadcrumb {
margin-left: 10px;
}
.submitted {
margin-top: -18px;
}
table {
overflow: auto;
font-size: 1em;
}Links:
SelfHTML CSS http://de.selfhtml.org/css/index.htm
Fertigstellung und Veröffentlichung
Um ausführliche Tests kommt man nicht herum. Zumindest alle Core-Module sollten einmal aktiviert und die erzeugte Ausgabe kontrolliert werden, um sie eventuell in unserer CSS Datei anzupassen.
Zuletzt erstellen wir noch nach den Angaben auf Drupal.org zwei Screenshots, einen für die Anzeige unter /admin/themes und einen großen für die Präsentation im Themegarden.
Wenn das erledigt ist fehlt nur noch der Hinweis auf die Herkunft und den Designer des Templates, sowie auf die Lizenz und den Ersteller des Ports. Diese Informationen schreiben wir in eine Datei namens README.txt und legen sie dem Theme bei.
Um das fertige Theme zu veröffentlichen benötigt man einen CVS Account, den man online beantragen kann, oder man sucht sich einen Entwickler, der bereit ist, das Theme ins CVS zu laden.
Links:
Theme how-to's http://drupal.org/node/22803
Theme screenshot guidelines http://drupal.org/node/11637
Drupal Theme Garden http://themes.drupal.org/
Adding your theme to Drupal.org http://drupal.org/node/14208
CVS application form http://drupal.org/cvs-account
Anhang
README.txt
/*
* Treshold for Drupal 4.7
* -----------------------
* Design and code by Kevin Cannon http://openwebdesign.org/userinfo.phtml?user=Frozen
* Original found at http://openwebdesign.org/viewdesign.phtml?id=2387
* Download from http://openwebdesign.org/download.phtml/threshold.zip?id=2387
*
* Ported for Drupal by Stefan Auditor stefan.auditor@audiens.de
* Originally licensed under Public Domain/Creative Commons Attribution v2.5 http://openwebdesign.org/licenses.php
*
* This port has been done as a tutorial project on drupalcenter.de
* the german drupal community. It is inadequatly tested and not (yet) ready for pruduction use!
*
* Request http://www.drupalcenter.de/node/781
* Tutorial http://www.drupalcenter.de/node/852
*
*/page.tpl.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print $language ?>" xml:lang="<?php print $language ?>">
<head>
<title><?php print $head_title ?></title>
<?php print $head ?>
<?php print $styles ?>
<script type="text/javascript"><?php /* Needed to avoid Flash of Unstyle Content in IE */ ?> </script>
</head>
<body>
<div id="container">
<div id="header">
<?php if ($site_name) { ?><h1 class='site-name'><img src="/<?php print $logo ?>" alt="<?php print t('Home') ?>" class="logo" /><a href="/<?php print $base_path ?>" title="<?php print t('Home') ?>"><?php print $site_name ?></a></h1><?php } ?>
<div id="toplinks">
<?php if (isset($primary_links)) { ?><div id="primary"><?php print theme('links', $primary_links) ?></div><?php } ?>
<?php print $search_box ?>
</div>
<img class="header" src="/<?php print $base_path."/".$directory ?>/header.jpg" alt="header" />
</div>
<div id="leftcolumn">
<div id="main">
<?php print $breadcrumb ?>
<?php if ($site_slogan) { ?><h2 class="slogan"><?php print $site_slogan ?></h2><?php } ?>
<?php if ($title) { ?><h1 class="title"><?php print $title ?></h1><?php } ?>
<?php if ($tabs) { ?><div class="tabs"><?php print $tabs ?></div><?php } ?>
<?php print $help ?>
<?php print $messages ?>
<?php print $content; ?>
</div>
</div>
<div id="sidebar">
<?php if ($sidebar_left) { ?><?php print $sidebar_left ?><?php } ?>
<?php if ($sidebar_right) { ?><?php print $sidebar_right ?><?php } ?>
</div>
<p id="footer"><?php print $footer_message ?></p>
</div>
<?php print $closure ?>
</body>
</html>
node.tpl.php
<div class="node<?php if ($sticky) { print " sticky"; } ?>">
<?php if ($picture) { print $picture; }?>
<?php if ($page == 0) { ?><h1 class="title"><a href="/<?php print $node_url?>"><?php print $title?></a></h2><?php }; ?>
<h2 class="submitted"><?php print $submitted?></h2>
<div class="taxonomy"><?php print $terms?></div>
<div class="content"><?php print $content?></div>
<?php if ($links) { ?><span class="links">» <?php print $links?></span><?php }; ?>
</div>block.tpl.php
<div class="sidebox">
<div class="block block-<?php print $block->module; ?>" id="block-<?php print $block->module; ?>-<?php print $block->delta; ?>">
<h1 class="title"><?php print $block->subject; ?></h1>
<div class="content"><?php print $block->content; ?></div>
</div>
<p> </p>
</div>style.css
body {
background:#fff url(back.gif) repeat-y top center;
padding:0;
margin:0;
font-family:Verdana, Sans-serif;
font-size:74%;
text-align:center;
}
abbr {
cursor:help;
}
/******************** LINK STYLES *********/
a {
color:#FC6289;
font-size:1em;
text-decoration:none;
}
#image {
position:absolute;
top:50px;
left:0;
width:160px;
height:300px;
background:url(about.gif) no-repeat;
}
a:hover {
color:#41B4F2;
text-decoration:underline;
}
#toplinks a {
margin-right:6px;
}
span a {
color:#429EDB;
margin-left:6px;
}
span a:hover {
color:#FC6289;
}
/**************** HEADER STYLES ************/
h1 {
color:#FF3366;
font-family:tahoma, verdana, sans-serif;
font-weight:normal;
padding-left:10px;
font-size:2.1em;
}
#header h1 {
color:#333;
}
#sidebar h1 {
font-size:1.4em;
margin:0 0 0 5px;
padding-top:5px;
width:160px;
color:#333;
}
#leftcolumn h1 {
padding-top:20px;
}
h2 {
color:#999;
padding-left:10px;
font-size:0.9em;
font-weight:normal;
/* #margin-top:-18px; */
text-transform:uppercase;
}
h2 a {
text-transform:none;
}
/******************** PARAGRAPH STYLES **********/
p {
font-size:1em;
color:#222;
margin-left:10px;
margin-top:-1px;
line-height:1.3em;
text-indent:2em;
}
#sidebar p {
background:#E9F1F5 url(sidebottom.gif) no-repeat bottom right;
padding:4px;
text-indent:1em;
}
/********************* LIST STYLES *************/
#sidebar ul {
list-style:none;
margin-bottom:0;
padding-top:0;
}
#sidebar li {
list-style-image:url(bullet.gif);
}
/********************** IMAGE STYLES ************/
#header img {
margin-left:10px;
margin-top:-10px;
padding:3px;
margin-bottom:0;
border:1px solid #ccc;
}
/******************** INDEPENDANT DIV IDS AND CLASSES *******/
/*********************** MAIN CONTAINER *******************/
#container {
width:690px;
margin:0 auto;
padding-top:0 !important;
padding-top:20px;
text-align:left;
position:relative;
}
/************************* TOP RIGHT HAND LINKS *********/
#toplinks {
position:absolute;
top:12px;
right:30px;
}
/************************* LEFT COLUMN ************/
#leftcolumn {
float:left;
width:470px;
}
/********************* RIGHT SIDEBAR COLUMN ********/
#sidebar {
float:right;
width:200px;
margin:10px 10px 0 0;
}
/************************ FOOTER ***********/
#footer {
clear:both;
margin-left:0;
width:677px;
text-align:center;
border-top:1px solid #ccc;
color:#888;
}
/********************** LINKS BELOW EACH POST ***********/
span {
float:right;
margin-right:30px;
}
/*********************** RIGHT HAND SIDE CONTENT BOXES *******/
.sidebox {
width:185px;
background:#E9F1F5 url(sidetop.gif) no-repeat top left;
margin-bottom:15px;
}
/* Drupal specific */
.site-name .logo {
border: 0 !important;
}
.block .content {
padding: 0px 10px 0px 18px;
}
.taxonomy {
padding-left:10px;
}
.tabs {
margin-bottom: 25px;
}
.breadcrumb {
margin-left: 10px;
margin-bottom: -21px;
}
.submitted {
margin-top: -20px;
}
.slogan {
margin: 0;
padding: 0;
position: absolute;
top: 50px;
left: 30px;
font-size: 1.8em;
color: white;
}
#search {
padding-top:20px;
}
.links a {
background: url(bubble.gif) no-repeat;
padding-left: 20px;
}
.read-more {
background: url(post.gif) no-repeat !important;
padding-left: 20px;
}
- Anmelden oder Registrieren um Kommentare zu schreiben
Danke – dieses Kapitel war hilfreich
am 19.03.2006 - 21:33 Uhr
Dieses Kapitel hat mir beim Einstieg in das Thema Theme-Entwicklung sehr geholfen. Deshalb Dank für die hervorragende Arbeit.
Ein Hinweis auf die Voraussetzungen wäre schön!
Freut mich, daß das
am 23.03.2006 - 11:24 Uhr
Freut mich, daß das Tutorial geholfen hat und danke für den Hinweis auf die Voraussetzungen, werde das demnächst ergänzen.
vg
Schaut DrupalDojo ;)
am 05.01.2008 - 23:09 Uhr
Von großer Hilfe zu dem Thema ist auch eine DrupalDojo-Session mit Matt Westgate: http://www.drupaldojo.com/lesson/theming-like-a-pro
Wie er da in 20min ein Drupal Theme hinzaubert, ist schon beeindruckend. Ich habe es ihm dann nachgetan und in 3h ~80% unseres vorhandene Website-Designs nach Drupal konvertiert.
Schwer ist es nicht, aber
am 06.01.2008 - 06:02 Uhr
Schwer ist es nicht, aber wenn du die alten Browser berücksichtigen willst schon!Aber ich lass mir trotzdem mehr zeit :D !