Eigenes Drupal 7 Theme erstellen

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 :)

02. Nov 2012

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…

08. Mai 2012

Wer kennt das nicht?! Du findest endlich eine passende Open-Source-Schriftart die dir in Ihrer Zusammensetzung und Gestaltung voll und ganz zusagt, ziehst…

11. Jun 2013

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

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