Eigenes Drupal 7 Theme erstellen

hardvisions - 8 Kommentar(e)

Ein eigenes Drupal Theme zu erstellen ist zumeist der erste Schritt nach der Installation von Drupal (die relativ einfach und schnell durchzuführen ist). Hierzu möchte ich euch eine kleine Anleitung zur Erstellung eines eigenes Themes in Drupal 7 geben.

1. Schritt - Theme Verzeichnis erstellen

Nach der Installation von Drupal auf eurem Webserver oder lokalem Server, geht ihr in folgendes Verzeichnis: sites/all/themes/.
Dort könnt ihr einen neuen Ordner mit einem von euch gewählten Namen für das Theme erstellen. Wir nehmen für dieses Beispiel den Theme-Namen: "hv" (für hardvisions). Dabei müsst ihr für den Namen des Themes folgende Syntax befolgen:

  • Der Name muss mit einem Buchstaben beginnen.
  • Er kann Zahlen und Unterstriche enthalten.
  • Es dürfen keine Bindestriche, Leerzeichen oder Satzzeichen vorkommen.

(ACHTUNG: In deinem Root-Verzeichnis befindet sich auch ein Ordner Namens "themes". Dieses Verzeichnis enthält die Drupal-Core Themes und sollte nicht verändert werden.)

2. Schritt - Erforderliche Dateien

Nachdem du das Verzeichnis "sites/all/themes/hv" erstellt hast, musst du in dieses folgende Dateien anlegen.

  • hv.info (Diese Datei muss stets den Namen deines Theme-Verzeichnisses tragen!)
  • style.css
  • favicon.ico (optional, nur schon mal zur Info wo das hingehört ;)

Die Datei "hv.info" enthält alle wichtigen Informationen über unser Theme, wie z.B. den Namen des Themes, die Beschreibung, den Core von Drupal usw. Die Datei ist zwingend erforderlich, damit Drupal das Theme überhaupt wahrnimmt.

; Die hv.info Datei (mit dem Semikolon deklariert man einen Kommentar)

name = hardvisions (erforderlich)
description = Unser eigenes Theme (erforderlich)
core = 7.x (erforderlich)
stylesheets[all][] = style.css (erforderlich)

screenshot = images/screenshot_theme.jpg (optional)

Kurze Erläuterung unserer "hv.info" Datei. Mit dem Schlüsselwort "stylesheets[all][]" sagen wir Drupal das wir gerne eine eigene CSS-Datei verwenden möchten und er diese laden soll. Mit "screenshot" geben wir den Pfad des Screenshots (also einer .jpg Datei) unserer Webseite an. Dabei geht die "hv.info" Datei immer von dem Pfad unseres Themes aus, hier wäre es der Pfad "sites/all/themes/hv/images".
(Alle weiteren Schlüsselwörter und den Aufbau der .info Datei findet ihr hier)

Damit wären wir mit der Erstellung eines eigenen Themes fertig, zumindest fast :)

Jetzt müsst ihr euch lediglich ins Backend eurer Seite einloggen (entweder mit "example.com/user" oder wenn ihr noch keine lesbaren URL´s aktiviert habt, unter "example.com/?q=user") und unter "Design" euer neues "Theme aktivieren und als Standard festlegen".

Noch ein Tipp

Für den Fall das eure Stylesheets (style.css) noch nicht übernommen worden sind, einfach den gesamten Cache unter "Konfiguration - Entwicklung - Leistung" löschen.
(Für eine leichtere Handhabung im Backend von Drupal, würde ich euch das Modul Administration menu empfehlen.)

Somit wäre euer eigenes Theme installiert und aktiviert.

3. Schritt - Cascading Style Sheets

Selbstverständlich fehlen jetzt noch eure eigenen CSS Eigenschaften. Hier ein kleiner Code Snippet der wichtigsten Angaben:

body {
  margin: 0;
  padding: 0;
  font-family: Helvetica;
  font-size: 14px;
  font-weight: normal;
  line-height: 24px;
  color: #424242;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "LobsterTwoRegular";
  font-weight: normal;
  color: #88bf67;
}

h1 { font-size: 45px; }
h2 { font-size: 30px; }
h3 { font-size: 22px; }

a { color: #eb5059; }
a:hover { color: #fc737b; }

Beim body Tag setzen wir margin und padding auf den Wert "0". Da die meisten Browser immer einen eigenen Abstand setzen. Für die h1 bis h6 Tags setzen wir die Schriftart "LobsterTwoRegular". Diese habe ich über ein weiteres Modul von Drupal ganz einfach eingebunden. Mit welchem Modul ich das gemacht habe könnt ihr euch hier anschauen.

Falls ihr ein praktisches Beispiel wünscht, z.B. für die Erstellung eigener Regionen (Regions) im Template, oder die Erstellung eines eigenen Templates und die Einbindung eurer erstellten Regionen.. leave a comment :)

Kommentare

Endlich mal eine gute und kurz gehaltene Einleitung zur Erstellung eines Themes in Drupal! Top!

Hallo und danke für diese kurze Einleitung. Ich versuche mich gerade am Themen und würde gerne 4 Regionen nutzen. Header, Navigation, Content, Left Sidebar. Dabei soll die Left Sidebar neben den anderen 3 angordnet sein und die widerum einfach unter einander. An welchen stellen muss hierfür wie Hand angelegt werden?

Auf dem Bild habe ich es noch mal dargestellt (http://s14.directupload.net/file/d/2985/bwi2jzjv_png.htm)

Hallo Mario,
um eigene Regionen anzulegen musst du zunächst in deiner .info Datei deines Themes diese aufführen. Als Beispiel:

regions[left] = Left sidebar
regions[content] = Inhalt

Somit weiß Drupal das im Template sowie unter "Struktur - Blöcke" diese Regionen vorhanden sind. Danach kannst du eigene Blöcke oder Seiten erstellen und in diese Regionen verschieben.

Desweiteren kopierst du dir folgende Datei aus folgendem Ordnerzweig: "[root]/modules/system/page.tpl.php". Diese Datei legst du in dein eigenen Themeordner ab.
In genannter Datei siehst du bereits angelegte Regionen und kannst deine eigens angelegten im Template hinzufügen und so positionieren wie du das benötigst.

Zu guter letzt leerst du noch den Cache von Drupal.

Falls du dazu noch eine Frage hast, kannst du uns gerne kontaktieren.

Hallo,

Ich glaube meine Frage ist ein bisschen unsinnvoll,aber wie kann ich z.B. ein eigenes Design für Buttons usw. hinbekommen?
Im Moment sieht mein Theme nämlich ziemlich schäbig aus.

Hi,

um Buttons in Drupal zu stylen, gibt es zwei Möglichkeiten. Entweder legst du dir eigene Styles in deiner CSS-Datei fest oder du benutzt ganz einfach das Drupal Module "Button style".
Hier findest du den Link dazu!

Damit kannst du ganz leicht und global alle Buttons nach deinen Wünschen stylen.

Darf man alle standardmäßig in drupal enthaltenen .tpl.php kopieren und für sein eigenes Theme verwenden?

Grundsätzlich genügt es die "page.tpl.php" in dein Themeordner zu kopieren und dort Layoutänderungen vorzunehmen. Alles weitere lässt sich bei entsprechender Umsetzung über die CSS Datei stylen.
Aber natürlich kann man auch weitere Template Files kopieren und editieren.

Themes für dein CMS per WYSIWYG-Editor: TemplateToaster macht’s möglich http://templatetoaster.com/de

Neuen Kommentar schreiben

To prevent automated spam submissions leave this field empty.

Filtered HTML

  • Internet- und E-Mail-Adressen werden automatisch umgewandelt.
  • Zulässige HTML-Tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • HTML - Zeilenumbrüche und Absätze werden automatisch erzeugt.

Plain text

  • Keine HTML-Tags erlaubt.
  • Internet- und E-Mail-Adressen werden automatisch umgewandelt.
  • HTML - Zeilenumbrüche und Absätze werden automatisch erzeugt.
11. Jun 2013
- 1 Kommentar(e)

Drupal ist frei verfügbar (Open Source), flexibel, robust und wird fortwährend von hunderttausenden, passionierten Menschen auf der ganzen Welt…

03. Jun 2012
- 8 Kommentar(e)

Ein eigenes Drupal Theme zu erstellen ist zumeist der erste Schritt nach der Installation von Drupal (die relativ einfach und schnell durchzuführen ist).…

02. Nov 2012
- 2 Kommentar(e)

Wer kennt das nicht, immer und überall erreichbar zu sein und dementsprechend auch seine Mails immer im Auge zu haben?! Nach Start der Mail App öffnet sich…

SAY HELLO
Du hast eine einzigartige Idee? Du gründest ein Unternehmen und benötigst eine Website oder diverse Medien?
Oder hast du eine ganz andere Frage, bei der wir Dir weiterhelfen können?
Wir freuen uns von Dir zu hören