Zu dritt haben wir die deutschsprachige SEBLOD™-Community gegründet. Neben Ressourcen und Webseiten , die mit SEBLOD™ gemacht sind, bieten wir ein Supportforum zu Fragen rund um SEBLOD™ an.
Damit ist zum einen die Körpersprache gemeint und zum anderen die Art, wie wir kommunizieren. Zu letzterem gehören der Tonfall, Sprachmelodie, Artikulation, Sprechtempo und auch die Pausen zwischen den Wörtern.
Das reine Wort, der Inhalt, machen 7% unserer Kommunikation aus. Die para- und nonverbale Kommunikation zusammen 93%. Wie Sie 93% mehr Erfolg haben können, erfahren Sie auf dieser Website:
Amazon:
Dieses essential bietet speziell Redakteuren einen Einstieg in das Content Management System Joomla!. Losgelöst vom „Ballast“ der zahlreichen Einstellungen und Möglichkeiten, die in anderen Büchern thematisiert werden, wendet sich dieses Buch ausschließlich an die eigentlichen Endnutzer des Systems und konzentriert sich dabei auf das Schreiben und Veröffentlichen von Beiträgen. Der erfahrene Autor und Joomla!-Kenner Axel Tüting erklärt jeden Schritt praxisnah und verständlich.
Das Content-Management-System Joomla! stellt dem Anwender bereits eine breite Palette von Funktionen zur Ausgestaltung von Webauftritten bereit. Bei erfolgreichen Webseiten steigt mit der Zeit aber der Anspruch in Bezug auf Funktionalität. Es ist nur eine Frage der Zeit, bis Sie an die Grenzen von Joomla! stoßen. Entweder greifen Sie dann in den Programmcode ein oder setzen auf ein Content Construction Kit (CCK). Das mächtigste dieser Art ist SEBLOD®. Wie Sie damit die Grenzen von Joomla! sprengen, zeigt Ihnen das vorliegende Handbuch.
Wenn die Tutorials dir weitergeholfen haben, dann kannst du mit einer kleinen Spende Danke sagen.
Langjährige Erfahrung als Dozent zu verschiedenen Themen.
Ich komme zu Ihnen in die Firma oder organisiere Räume vor Ort. Dazu steht mir ein Netzwerk aus vielen Jahren Tätigkeit als freier Dozent zur Verfügung.
Weitere Informationen, sowie Referenzen finden Sie auf der Firmenseite time4mambo
Weitere Themen auf Anfrage
Interesse? Lust? Zeit? Dann freue ich mich über eine eMail oder Anruf.
Kontaktdaten im Impressum
Eine Übersicht der verwendeten Erweiterungen findet sich im Impressum
Abgerundete Ecken sind leichter, als es den Anschein hat, denn Joomla bringt da schon was mit, was für uns Templatebastler die Sache etwas vereinfacht. Nichts desto Trotz kann es nicht schaden, ein paar Kenntnisse in CSS zu haben und ein wenig grafisches Können, um die Ecken abzurunden wird natürlich auch benötigt.
Ich habe zwei Grafiken erstellt. Eine für den oberen Teil des Menümoduls und eines für das untere Teil des Moduls:
Name der Grafik: abgerd_oben.jpg
Name der Grafik: abgerd_unten.jpg
Ich habe mit Absicht zwei verschiedene Farben gewählt. Der obere Bereich soll als Überschrift, der untere als Abschluss des Moduls dienen. Dazwischen legen wir eine Farbe im Farbton der Abschlussgrafik.
Damit wir das alles in unserem Design entsprechend verarbeiten können, müssen wir zunächst in der index.php des betreffenden Templates die Modulpositionen mit dem Zusatz style="rounded" versehen:
Joomla legt jetzt um das Modul mehrere DIVs an, die wir für unser Vorhaben nutzen können. Zur Laufzeit wird nun an Stelle des Platzhalters für das Modul dieses ausgegeben:
Jetzt beginnt die Arbeit an der template.css:
Zunächst gebe ich dem ganzen Modul erst einmal meine Hintergrundfarbe. Also die des Abschlussstückes, das etwas hellere Blau:
Nun haben wir zwar ein blaues Modul, aber zum einen mit einer Farbe und mit sehr eckigen Ecken.
Um das Ganze nun etwas netter zu gestalten, lege ich beim Modultitel einfach den oberen Teil der abgerundeten Ecken in den Hintergrund. Damit wird die Farbe, die bislang an dieser Stelle steht, einfach mit der Grafik überschrieben. Die Farbe verschwindet und statt dessen taucht unsere Hintergrundgrafik auf:
Die Grafik muss vorher in das image-Verzcihnis des Templates geladen werden: /templates/MeinTemplate/images/abgerd_oben.jpg
Und das gleiche mit der zweiten Grafik: abgerd_unten.jpg
Wir greifen mit der Verschachtelung oben direkt auf den Titel des Moduls zu, der in h3 formatiert ist. Durch die Verschachtelung mit den vielen DIVs wird sicher gestellt, dass die obere Grafik auch wirklich nur im Titel erscheint und nicht woanders im Modul. Das "no-repeat" sorgt dafür, dass die Grafik nicht wiederhiolt wird, falls das Modul breiter oder länger sein sollte.
Mit weiteren Angaben wie Höhe und Abstände und der Schriftgröße kann nun eine individuelle Modul-Titelüberschrift fomatiert werden.
Um den Abschluß des Moduls herzustellen - also unten auch die abgerundeten Ecken hin zu bekommen, sprechen wir einfach den inneren DIV-Bereich an und platzieren unsere Abschlussgrafik ans Ende des Moduls:
center richtet unsere Grafik horizontal in der Mitte aus und bottom vertikal am Fuß unseres Moduls. In unserem Fall könnten wir center auch weglassen.
Eigentlich wars das schon.
Die Abstände stimmen so noch nicht und wird das einfach so eingebaut, dann wirkt auch alles ein wenig fad und gequetscht. Es muss nun mit padding und margin gearbeitet, die Schrift muss angepasst werden und eine Breite und Höhe kann man auch vergeben.
Links habe ich ein Beispielmenü mit den abgerundeten Ecken eingefügt. Im Modul habe ich in den erweiterten Parametern unter Module-Class-Suffix -rund eingtragen. Das deshalb, weil meine anderen Menüs ja anders aussehen und ich nur das Beispielmenü mit der "runden Formatierung" habe.
Der komplette CSS-Code:
Wem das mit der Modul-Class-Suffix unklar ist, der kann dieses Tutorial lesen: Menu Class Suffix / Modul Class Suffix
Wer Defizite in CSS hat, dem lege ich meine Seite mit den Nützlichen Links ans Herz - dort findest sich vieles, was des Webdesigners Herz begehrt
Mit den "Class Suffix" können Module, bzw. Menüs, die anders aussehen sollen, als der Standard, individuell formatiert werden. Dazu wird eine Bezeichnung, idealerweise mit einem Unterstrich oder Bindestrich am Anfang, in das Feld eingegeben und dieses mit vorhandenen Formatierungen in der CSS-Datei verknüpft.
Bestehende Formatierungen werden quasi erweitert.
Ein Beispiel:
Im Modul (Erweiterungen --> Module) wird in der Modul Class Suffix die Bezeichnung "_neuesFormat" eingetragen:
Modul Class Suffix: _neuesFormat
In der template.css wird diese Bezeichnung an bestehende Klassen, die auf ein Modul angewendet werden können, erweitert:
Mit Menüs funktioniert es genauso. Man kann so unterschiedliche Menümodule anlegen, wo die Menüpunkte jeweils anders gestaltet sind:
Menu Class Suffix: _neuerLink
Und in der template.css nun Klassen und IDs, die mit Links zu tun haben erweitern:
Die Grunddateien stehen im Downloadcenter zur Verfügung, ebenso wie diese Datei dort als PDF vorliegt.
Um ein eigenes Template zu erstellen, wird folgende Verzeichnisstruktur benötigt:
MeinTemplate
-----index.php
----templateDetails.xml
-----Verzeichnis: css
----------template.css
-----Verzeichnis: images
----------bild.jpg
In der "index.php" steht die Grundstruktur des Templates. Also der eigentliche HTML-Code.
Die "templateDetails.xml" wird zum installieren benötigt und gibt auch u.a. die möglichen Positionen wider.
Im Verzeichnis "css" steht die CSS-Datei und im images-Verzeichnis evt. Grafiken, die für das Template benötigt werden.
Dieser Teil verhindert, dass die index.php einfach so augerufen wird. Beispielsweise um schädlichen Code einzuschleusen. Wer keine Rechte zum editieren hat, kann die index.php nicht verändern. Dabei geht es nicht um einen Schutz gegen unberechtigten Einblick in den Quellcode. Das kann hiermit nicht verhindert werden.
Die eingestellte Sprache wird automatisch eingeladen und verabreitet. Auch ein wichtiger Eintrag für mehrsprachige Websites. Die ausgewählte Sprache wird per PHP-Code automatisch eingeladen und angezeigt. Beide Angaben sind beispielsweise für den Browser wichtig.
Die Meta-Tags, die in den Artikeln angegeben werden, Erklärungen (Description), Autor und alles weitere, was wichtig in den Metatags sind, werden von Joomla entsprechend Ihrer Einstellungen zusammengestellt und automatisch zur Laufzeit hier ausgegeben
Zwei CSS-Dateien, die von Joomla für generelle Ausgaben benutzt werden.
In "$this->baseurl" steht der Domainname und gfls. das Joomla-Verzeichnis, wenn es nicht im Root untergebracht ist. In "$this->template" der Name des Template-Verzeichnisses, welches benutzt wird. Wird die URL auf diese Art eingeben, braucht man sich keine Gedanken mehr zu machen, wo denn nun die richtigen Dateien liegen. Joomla stellt automatisch das richtige Verzeichnis zusammen.
Ein eigenes Favicon kann geladen werden. Favicons sind die kleinen Icons, die in der Adresszeile des Browsers angezeigt werden. Meist auch im einzelnen TAB eines Browsers.
Das Ende des Kopfes der index.php
Zwischen den "body-Tags" kommt das grundsätzliche Aussehen des Templates und in der CSS-Datei wird das Template formatiert.
Zur Übung wollen wir ein einfaches DIV-Template erstellen:
Der Code sieht folgendermaßen aus:
Und in die CSS-Datei (template.css) müssen diese Angaben rein:
Um nun Inhalte in die einzelnen Bereiche zu bekommen, müssen sogenannte "Positionsangaben" gemacht werden. Positionsangaben sind nichts weiter als Platzhalter, an Stelle dieser später Inhalte ausgegeben werden.
Der Hautinhalt, der Content (Artikel, Komponenten) soll im Bereich "mitte" ausgeben werden. "links" soll das Menü hin, "oben" ein Header, "rechts" ein paar Module, wie beispielsweise das aktuelle Wetter und "unten" soll das Copyright stehen.
Die Inhalte erzeugen wir später im Backend (Adminbereich) von Joomla. In dem wir Artikel schreiben und Menüs anlegen. Das Copyright und den Header erstellen wir, in dem wir eigene Module definieren und das Wetter ist ein externes Modul, welches wir im Joomla installieren und dann an der Position "rechts" an Stelle des Platzhalters ausgeben.
Ein Platzhalter hat immer das gleiche Aussehen:
In type steht, um was es sich handelt. Bis auf wenige Ausnahmen (die wir gleich noch betrachten werden), sind das meistens "modules" - Module, die vom Platzhalter eingelesen werden sollen.
In name steht die eigentliche Position. Diese Position wird beim Modul ausgewählt und damit festgelegt, wo das Modul angezeigt wird. Werden mehrere Module für eine Position ausgewählt, werden die einfach untereinander angezeigt.
style gibt an, wie das Modul verarbeitet werden soll. Dazu stehen folgende mögliche Stile standardmäßig zur Verfügung:
Ein paar Positionsangaben unterscheiden sich von den anderen:
component kennzeichnet den Hauptiunhalt. Also Artikel und Komponenten, die dann an der Stelle ausgegeben werden. In früheren Joomla- und Mamboversionen wurde diese Positionangabe mit "Main" gekennzeichnet.
message ist verantwortlich für etwaige Fehlerausgaben oder wenn man eine eMail in den Kontakten abschickt - dann wird an der Stelle der erfolgreiche Versand gemeldet.
Weit verbreitet sind diese Angaben, die aber nicht zwingend so vorgegeben sind. Man kann also seine Banner auch an Positionen mit anderen Namen ausgeben:
banner läßt schon vermuten, dass man damit das Bannermodul, bzw. deren Inhalte ausgeben kann.
Die breadcrumbs ist die jetztige Bezeichnung für den "Pathway". Also die Pfadangabe, wo man sich gerade befindet im Webauftritt.
Die Platzhalter / Positionsangaben werden einfach zwischen den DIV-Tags geschrieben:
Das wars schon. Jetzt noch die Datei als index.php im Templateordner speichern.
Die templateDetails.xml Datei dient zum einen der Installation, enthällt Informationen über das Template und auch die möglichen Positionen des Templates.
Wenn man die Datei speichert, muss man auf die richtige Schreibweise - mit einem großen "D" in der Mitte - achten!
Betrachten wir die Datei im Einzelnen:
"utf-8" kann auch gegen einen anderen Zeichensatz ausgetauscht werden. Wobei utf-8 den europäischen Zeichensatz darstellen kann.
Die Version bezieht sich auf Joomla und der Typ kennzeichnet, das es ein Template ist. Das steht deshalb dort, weil Module oder Komponenten beispielsweise auch solche XML-Dateien haben. Für "TemplateName" tragen Sie den Namen Ihres Templates ein. Unter diesen Namen ist das Template später auch auswählbar.
Ich denke, die Angaben sprechen für sich und bedarf keiner weiteren Erklärung. Tun Sie mir aber bitte den Gefallen und kopieren Sie nicht meinen Namen mit, wenn Sie Ihre eigenen Templates erstellen
Mit den Umlauten gibt es manchmal Probleme. Weshalb es Sinn macht, statt der Umölaute ue, ae, etc. zu schreiben
Versionskontrolle kann nie schaden. Manchmal verändert man am Template etwas - hiermit hat man den Überblick.
Eine kurze Erklärung - zum Copyright oder wofür das Template ist oder ...
Schreiben Sie hier die Files hinein, die für das Template benötigt werden und geben Sie den relativen Pfad an, wo die Files hingeschreiben werden sollen, wenn das Template installiert wird. Dazu gehört natürlich auch diese Datei, die Sie gerade schreiben.
Sie brauchen nicht extra einen "images"-Block, auch nicht einen "css-Block", wie im Anschluss. Sie können diese Files auch direkt in den "files-Block" schreiben. So ist es aber etwas übersichtlicher. Besonders wenn Sie viele Grafiken oder auch mehrere CSS-Dateien haben. Denken Sie auch wieder an den korrekten relativen Pfad!
Wie gesagt: Sie müssen nicht extra einen css-Block anlegen, schaden kann es aber auch nicht....
Hier finden Sie die Positionen wieder, die wir in die "index.php" eingetragen haben. Wichtig zu wissen ist, dass hier die Positionen stehen, die Sie später auch in dem Dropdown-Button im Modul wieder finden. Anders ausgedrückt: vergessen Sie hier eine Position einzutragen, kann diese nachher auch nicht mit dem Dropdown-Button ausgewählt werden (wohl aber per Hand direkt in das Feld geschrieben werden).
Viele Templates, die Sie im Internet finden, haben hier mehr Positionen stehen, als tatsächlich im Template enthalten sind. Lassen Sie sich also nicht davon täuschen, dass Sie so viele Positionen auswählen können - schauen Sie besser nach, was tatsächlich da ist.
Am Ende die XML-Datei schließen und speichern.
Diese Datei steht im Downloadcenter auf time4mambo zur Verfügung.
Eine kommentierte CSS-Datei für Joomla. Es handelt sich dabei um alle möglichen Klassen oder IDs, die innerhalb Joomla vorkommen können.
Werden fremde Templates benutzt, können die CSS-Anweisungen stark von dieser Auflistung abweichen.
Es handelt sich hierbei um eine standardisierte template.css
In der CSS-Datei (template.css) ist dafür die Klasse "buttonheading " zuständig. Um beispielsweise den Rand um die Icons wegzubekommen, folgendes eingeben:
webdesign von time4mambo
www.time4joomla.de is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla! name and logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.