Einfachste Themes - nur für absolute Einsteiger
Eingetragen von JThan (396)am 08.09.2008 - 21:15 Uhr in
Hallo.
Diesen Text hatte ich geschreiben, als ich angefangen habe, mich mit Drupal zu beschäftigen. Das ist vll. kein BestPractice und lange nicht vollständig, aber mir hat es als Einstieg gereicht. Vll. hilft es dem ein oder anderen noch.
Alle Angaben ohne Gewähr. Befolgen der Anleitung auf eigene Gefahr.
Gruß
JThan
___________________________________________
Drupal - ein ganz einfaches Theme selbst erstellen
Hallo.
Ich habe gerade mein erstes eigenes (sehr einfaches) Theme für Drupal fertig gestellt. Wie in einem Thread versprochen, lege ich hier dar, wie ich es gemacht habe. Vielleicht hilft es dem ein oder anderem Drupal-Neuling.
Vorwort: Bitte beachte, dass es hier darum geht, ein einfaches Theme zu erstellen. Diese Beschreibung hat weder den Anspruch, die Themeerstellung vollständig abzuhandeln noch alle Fakten, Eventualitäten, Ausnahmen oder auch nur alle Regelfälle darzustellen. Es fehlt einiges was wichtig ist, es wurde nicht alles genannt und sicherlich ist einiges nicht richtig und anderes schlichtweg falsch. Über konstruktive Kritik freue ich mich sehr. Dies ist ein Beispiel für eine Themeerstellung und nicht mehr. Alle Angaben ohne Gewähr.
Vorwissen:
Drupal: Ich hatte bereits eine Seite mit Drupal entworfen. Dort habe ich als Theme tapestry verwendet.
PHP Wissen: So gut wie null, ich kann zwar das ein oder andere aus dem Code erkennen und weiß, dass der print Befehl den Inhalt einer Variable ausgibt, aber viel mehr nicht.
CSS Wissen: Nahezu null. SelftHTML ist dein Freund :). Ich muss hier dazu sagen: css ist vom Aufbau her nicht schwierig und es gibt massig Quellen im Netz um die Grundlagen zu lernen. Solltest du kein CSS können, wird das der schwierigste Part an der Themerstellung. Lerne CSS! Ich kann es jetzt auch ein wenig.
HTML: Rudimentär, ich weiß, dass es head und body gibt. SelftHTML ist dein Freund :)
Die Aufgabe:
Ein Kollege von mir wollte eine kleine Seite ins Internet stellen. Das Layout sollte aus einer Navigation rechts oben und einem zweispaltigen Contentbereich bestehen. Das Layout ist soweit fertig (deswegen schreibe ich ja an dieser Beschreibung) aber Inhalte sind noch keine hinterlegt. Also erwartet nicht zuviel von Link 1. ;)
Lösung - Step-by-Step:
1) Eine .info Datei schreiben
Nenne die Datei folgendermaßen: "namedesthemes.info" (ohne Leerzeichen und Sonderzeichen) und speicher die Datei in einem Ordner: "namedesthemes"
Die Datei hat bei mir zwei Bereiche: a) Grunddaten und b) Regionen.
a) Unter Grunddaten sollte folgendes stehen (Das in eckigen Klammern muss jeweils durch den für dein Theme passenden Text ersetzt werden):
;Grunddaten
name = [Name deines Themes so wie er in der Adminoberfäche angezeigt werden soll]
description = [Eine Beschreibung deines Themes - wird ebenfalls angezeigt]
version = [Eine Versionsnummer]
core = 6.x
engine = phptemplateDie ersten beiden Punkte sollten selbsterklärend sein, bei Version kannst du irgendwas eintragen. Trage zum Beispiel ein: 0.1.
core ist die Drupalversion (6.x) und kann so übernommen werden. engine kannst du ebenfalls so übernehmen. Da es hier um ein einfaches Theme zum ersten Testen und ausprobieren geht, habe ich keinen Screenshot eingefügt. Für mehr Infos zum .info File lies nach unter Link 2.
b) Mit Regionen legst du fest, welche Bereiche deine Seite haben wird. Solltest du das weglassen (was du durchaus tun kannst) dann bekommst du die folgenden Bereiche:
regions[left] = Left sidebar
regions[right] = Right sidebar
regions[content] = Content
regions[header] = Header
regions[footer] = FooterAnsonsten kannst du eigene Bereiche festlegen. Denk daran: Legst du auch nur einen eigene Region an, ersetzt du damit die Standardeinstellung. Das bedeutet, dass die Standardregionen dann nicht mehr da sind. Du kannst diese natürlich dann wieder genau so anlegen.
In den eckigen Klammern vergibst du einen Namen für die Region ohne Sonderzeichen, hinter dem "=" einen dazu passenden Namen, der dann auch Leerzeichen enthalten darf (vll. sogar mehr, aber je weniger Sonderzeichen du benutzt, umso geringer ist das Risiko).
Zur Veranschaulichung hier meine .info, auf der ich das Theme aufgebaut habe.
;Grunddaten
name = Mein Portrait
description = Das Drupal Template File erstellt von JohnnyThan
version = 0.1a
core = 6.x
engine = phptemplate
; Regionen
regions[top] = header name
regions[topnavi] = header navi
regions[leftcon] = content left
regions[content] = content right
regions[footer] = footer infoSchritt 1: abgeschlossen.
2) Eine css.Datei schreiben
Lege eine Datei mit dem Namen "style.css" an.
In diese Datei schreibst du nun dein Design. Die Bereiche heißen so, wie du es gerade in der .info festgelelgt hast. Du kannst jetzt also die div-Bereiche #top, #topnavi, #leftcon, #content und #footer mit css stylen. Fange z.B. mit einer Hintergrundfarbe (background-color) und einer Schriftfarbe (color) an. Du hast hier eine Menge Möglichkeiten. Lege z.B. erstmal für jeden div-Bereich eine andere Hintergrundfarbe fest, damit du siehst, wo einer anfängt und der andere aufhört. Hier ist nicht der richtige Platz für eine CSS-Schulung (die ich auch nicht geben könnte), aber hier zwei Links die dir helfen sollten. Link 3: SelftHTML CSS , Link 4: Firebug Extension für FF.
Als Beispiel hier ein Auszug aus meiner css.Datei (Ich hoffe, der schreckt niemanden ab):
/** body **/
body
{
background-color: #0f1113;
width: 82%;
}
/** header **/
#top
{
font: normal 11px verdana, sans-serif;
color: #ffffff;
padding:6px;
height:24px;
text-align:left;
margin-top: 0; margin-bottom: 0;
margin-left: 30px; margin-right: 0;
border: 0;
padding: 0;
float: left;
}
#top #sitename
{
text-align:left;
color:#ffffff;
font-family:serif;
font-size:24px;
font-style:normal;
letter-spacing:2px;
padding:2px;
position:relative;
z-index:20;
}
#topnavi
{
font: normal 11px verdana, sans-serif;
color: #ffffff;
height:24px;
text-align:right;
background-color:##0f1113;
margin-top: 0; margin-bottom: 0;
margin-left: 55%; margin-right: 0px;
}
/** main **/
#main
{
margin-left: 30px;
height: 100%;
width: 101%;
background-color:#446688;
}
/** right_con **/
#content
{
text-align:center;
background-color:#ffffff;
margin-top: 0; margin-bottom: 0;
margin-left: 40%;margin-right: 0;
border: 0;
padding-top: 35px; padding-bottom: 35px;
padding-left: 10%; padding-right: 10%;
height: 100%;
min-height: 400px;
}
/** left_con **/
#leftcon
{
text-align:center;
background-color:#446688;
color:#bfbfbf;
margin-top: 0; margin-bottom: 0;
margin-left: auto; margin-right: auto;
border: 0;
width: 40%;
min-height: 400px;
height: 100%;
float: left;
}
/** footer **/
#footer
{
font: normal 11px verdana, sans-serif; color: #7f7f7f; padding:6px;
height:24px;
text-align:center;
background-color:#0f1113;
margin: 0;
border: 0;
padding: 0;
}
/** menü **/
#block-menu-primary-links ul.menu li.leaf
{
margin:0;
padding:0;
list-style-type:none;
list-style-image:none;
}
#block-menu-primary-links ul.menu
{
text-align: center;
}
#block-menu-primary-links ul.menu li
{
padding-left: 60%;
padding-right: 0px;
margin:0;
display:inline;
list-style:none;
}
#block-menu-primary-links ul
{
list-style:none;
}
#block-menu-primary-links a, #block-menu-primary-links a:visited #block-menu-primary-links a:active
{
color:#BFBFBF;
text-decoration:underline;
font-size: 13px;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
padding-left: 8px; padding-right: 8px;padding-bottom: 0px; padding-top:0px;
border-left:solid 0px #000;border-right:solid 0px #000;
line-height:22px;
height:22px;
text-align:center;
background-color:#0f1113;
border-bottom:dashed 1px #0F1113;
font-variant:small-caps;
text-transform:capitalize;
}
#block-menu-primary-links a:hover
{
color:#fff;
background:transparent;
text-decoration:none ;
border-bottom:dashed 1px #fff;
}PS: Die Seite wird fast überall richtig dargestellt, nur nicht im IE6. Falls ein css-Experte hier drüber schaut, kann er mir ja vll. sagen, woran es liegt. Danke.
Naja, da könnt ihr ja später noch dran rumspielen. Im Prinzip sollte euer Theme jetzt bereits funktionieren. Da ich es rein auf diese Weise noch nicht so hinbekommen habe, wie es aussehen sollte, habe ich noch eine template-datei angelegt--> Schritt 3
3) Eine page.tpl.php schreiben
Wie ich diese Datei aufbaue, habe ich mir aus anderen Themes zusammengesucht und mit Trial-and-Error verifiziert.
So sieht diese Datei aus, wenn man sie erstmal ganz einfach hält.Ich gehe jetzt von den Regionen aus, die ich oben für mein Theme verwendet habe:
<?php // $Id: page.tpl.php,v 0.1a 2008/06/30 21:00:00 JohnnyThan Exp $ ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print $language->language; ?>" xml:lang="<?php print $language->language; ?>">
<head>
<title><?php print $head_title; ?></title>
<?php print $head; ?>
<?php print $styles; ?>
<?php print $scripts; ?>
</head>
<body class="<?php print $body_classes; ?>">
<div id="top">
<?php if ($top): ?>
<?php print $top; ?>
<?php endif; ?>
</div>
<div id="topnavi">
<?php if ($topnavi): ?>
<?php print $topnavi; ?>
<?php endif; ?>
</div>
<div id="leftcon">
<?php print $leftcon; ?>
</div>
<div id="content">
<?php print $content; ?>
</div>
<div id="footer">
<div id="footer-message"><?php print $footer_message; ?></div>
<?php print $footer; ?>
</div>
</body>Man sieht hier die 5 Regionen, die als div-Bereich angelegt werden und deren Inhalte über
<?php
print $regions;
?>Der Vollständigkeit halber hier noch meine ganze page.tpl.php:
<?php // $Id: page.tpl.php,v 0.1a 2008/06/30 21:00:00 JohnnyThan Exp $ ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print $language->language; ?>" xml:lang="<?php print $language->language; ?>">
<head>
<title><?php print $head_title; ?></title>
<?php print $head; ?>
<?php print $styles; ?>
<?php print $scripts; ?>
</head>
<body class="<?php print $body_classes; ?>">
<div id="header">
<div id="top">
<div id="sitename">
<?php if ($site_name): ?>
<a href="<?php print $base_path; ?>" title="<?php print t('Home'); ?>" rel="home">
<?php print $site_name; ?>
</a>
<?php endif; ?>
</div>
<?php if ($top): ?>
<?php print $top; ?>
<?php endif; ?>
</div> <!-- /#top -->
<div id="topnavi">
<?php if ($topnavi): ?>
<?php print $topnavi; ?>
<?php endif; ?>
</div> <!-- /#topnavi -->
</div> <!-- /#header -->
<div id="main">
<div id="leftcon">
<?php print $leftcon; ?>
</div>
<div id="content">
<?php print $content; ?>
</div> <!-- /#content -->
</div> <!-- /#main -->
<div id="footer">
<div id="footer-message"><?php print $footer_message; ?></div>
<?php print $footer; ?>
</div>
</body>Damit sollte das Theme endgültig funktionieren. Das letzte Problem war: Wie bekomme ich nun sowohl in der Region "content left" als auch in der Region "content right" zueinander passenden Content hin? Siehe Schritt 5.
4) Das Theme hochladen & verwenden
Du solltest nun einen Ordner mit folgenden Dateien haben:
namedesthemes
---namedesthemes.info
---style.css
---page.tpl.php
Lade diesen Ordner in deine Drupalinstallation. Je nachdem in einen der folgenden Ordner:
/sites/all/themes/
/sites/default/themes/
/sites/deineSite/themes/
Log dich in die Adminoberfläche ein. Aktiviere dein selbst erstelltest Theme. Stelle unter Benutzerverwaltung ein, dass der Benutzer das Garland Theme (oder ein anderes zur Verwaltung geeignetes Theme) sehen soll. Dies bewirkt, dass sofort nach dem Einloggen ein geeignetes Verwaltungstheme angezeigt wird. Das Theme das wir gerade erstellt haben, taugt wenig zur Verwaltung. Gehe zurück in die Themeverwaltung und stelle dein selbsterstelltes Theme als Standardtheme ein. Log dich aus und schau dir an, was du geschaffen hast.
5) Zwei Contentbereiche - wie geht das?
Wie so oft in Drupal ist die Antwort ganz einfach: Es gibt ein Modul dafür. CCK und cck_blocks lösen das Problem gemeinsam und einfach (Man bekommt zusätzliche Eingabefelder im neuen Inhaltstyp. Was in diese Eingabefelder geschrieben wird, wird in einem Block ausgegeben. Diesen weist man in der Blockverwaltung der richtigen Region zu und schon klappt alles wie gewünscht).
So, wenn die Beschreibung nur zwei anderen Anfängern hilft, hat sichs gelohnt. Lasst mir einen Kommentar und konstruktive Kritik da.
Gruß
JThan
Link 1: So sollte die Seite aussehen (und sie sieht so aus): "http://mein-portrait.durstich.de"
Link 2: Infos zum .info File: "http://drupal.org/node/171205"
Link 3: SelftHTML CSS: "http://de.selfhtml.org/css/"
Link 4: Firebug für Firefox: "https://addons.mozilla.org/de/firefox/addon/1843" (Installieren, F12 drücken, freuen. Ich nutze auch gerne das "Inspect").
- Anmelden oder Registrieren um Kommentare zu schreiben
Sorry habe gerade nicht viel
am 09.09.2008 - 12:44 Uhr
Sorry habe gerade nicht viel Zeit um auf alles einzugehen, nur so viel
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fmein-portr...
PS: Die Seite wird fast überall richtig dargestellt, nur nicht im IE6. Falls ein css-Experte hier drüber schaut, kann er mir ja vll. sagen, woran es liegt. Danke.
Vor dem Posten solcher Howtos sollte man sich wirklich sicher sein das alles was man da schreibt richtig ist, man hätte doch einfach im IRC oder per E-Mail jemanden fragen können :-\
****************************************************************************************************
Drupalcon Germany - Go Go Go - Mehr Infos zur Drupalcon & zum Drupalcamp in
Deutschland gibst unter http://groups.drupal.org/drupalcamp-drupalcon-ger
Ihr erwartet doch nicht ehrlich eine Meinung die frei von eigener Meinung ist, in einem Drupal Forum... ;)