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.
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:
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
Google-Fonts in Joomla einbinden, ist wirklich sehr einfach. Dazu zunächst die index.php des benutzten Templates editieren, welches ihr unter /templates/NameDesBenutztenTemplates/ findet und zwischen den Head-Elementen nachfolgenden Code schreiben (ich schreibs immer unter dem jdoc:include type="head")
Wobei Cardo die Schriftart ist und gegebenfalls durch die verwendete Schriftart ersetzt werden muss.
Wenn Schriftarten mit einem Leerzeichen im Fontnamen verwendet werden, dann muss stattdessen ein "+" geschrieben werden. Hier ein Beispiel mit dem Font "Share Tech":
Nun die zugehörige CSS-Datei editieren und dort einfach diese Zeile dort eintragen, wo ihr die Google-Schrift verwenden möchtet:
Oder bei Schriftartennamen mit mehreren Wörtern (an dieser Stelle also mit Leerzeichen und nicht mit dem "+"):
Wird die Zeile beispiel für den body- oder html-Tag eingegeben, gilt diese Schriftart für die ganze Website:
Dazu lassen sich nun noch Schriftgröße, Type und alles, was sonst auch geht, dazu schreiben.
Die Überschriften auf dieser Site bestehen aus einem Font, den ich per CSS eingebunden und entsprechend den Joomla-Klassen zugewiesen habe.
Leider benutzen der Internet Explorer von Microsoft und die meisten anderen Browser unterschiedliche Fonttypen.
Für die meisten Browser reicht ein True-Type-Font (TTF) aus. Der IE benötigt aber einen Open-Type-Font (EOT).
Die allermeisten Schriften, die sich im Internet finden, sind TTF-Schriften. Es gibt aber einige Konverter, die einem eine TTF-Datei in eine EOT-Datei wandelt. Einen solchen Konverter findet man beispielsweise hier:
http://www.kirsle.net/wizards/ttf2eot.cgi
Hat man seine Schriften zusammen, lädt man diese am besten direkt in das CSS-Verzeichnis des Templates und schreibt dann am Anfang der CSS-Datei dieses hier:
Dort wo man die Schriftart benutzen möchte, einfach so eingeben, wie in diesem Beispiel bei einer h3-Überschrift:
"meine_schrift" ist ein beliebiges Wort, welches den verwendeten Font kennzeichnet. Man kann also sowohl den Fontnamen (ohne ttf oder eot) benutzen oder einfach "apfelkuchen" schreiben. Wichtig ist nur, dass das Wort am Anfang beim "font-face" identisch mit dem Benutzten bei der Zuweisung ist.
Man sollte aber vorsichtig sein, mit den eigenen Schriftarten. Zum einen ist es gar nicht so einfach, eine passende zu finden, welche in den Webauftritt passt und zum anderen brauchen Schriften auch einiges an Performance. Also nicht unterschätzen und sparsam damit umgehen.
In meinen Nützlichen Links finden sich einige Webseiten mit freien Fonts.
[Weiter unten finden Sie ein Beispiel, wie Sie mit dem Firebug arbeiten können.]
Das einfachste, aber auch mühseligste ist, einfach in den Quellcode zu schauen.
Es gibt aber ein paar nützliche Helferlein, die einem das Auffinden der CSS-Angaben erleichtern. Dazu bringt jeder Browser ein Addon mit oder hat es auch schon fest eingebaut.
Beim Microsoft Internet Explore, Versionen 8 und 9, reicht ein beherztes drücken auf die F12-Taste. Dann erscheint ein Fenster mit den CSS-Angaben für die aktuell geöffnete Seite. Dort zunächst auf den kleinen weißen Pfeil oben links klicken.
Bei den Versionen 6 und 7 kann man sich dieses Tool zusätzlich installieren. Dazu bitte entweder auf den Microsoft-Seiten suchen gehen oder besser gleich eine Suchmaschine seiner Wahl benutzen. Beim Downloaden unbedingt auf die verwendete Brwoserversion achten!
Bild: CSS im Internet Explorer finden – Das Auswahlwerkzeug
Bewegt man sich jetzt wieder mit der Maus auf die Website im Internet Explorer kann man sehen, wie sich kleine und große Vierecke um verschiedene Bereiche legen. Wenn man den Bereich umrahmt hat, zu dem man die CSS-Angaben wissen möchte, dann einfach einmal die linke Maustaste anklicken – und schon erscheint im zweiten Fenster die CSS-Angabe dazu und wird blau hinterlegt.
Im linken Teil des Fensters ist jetzt der Code, wie man ihn in etwa auch im Queltext widerfindet, dargestellt. Allerdings übersichtlich strukturiert. Im rechten Teil des Fensters finden sich die verwendeten CSS-Angaben. Alles was nicht durchgestrichen ist, ist gerade aktuell für den markierten Bereich.
Bild: CSS im Internet Explorer finden – Der Überblick
Sie können nun im rechten Bereich die Häckchen wegnehmen und wieder neu set-zen und im Internet Explorer direkt sehen, ob und was sich verändert. Sie können auch im rechten Bereich des Fensters direkt in eine Zeile klicken und den CSS-Wert verändern. Nachdem Sie ENTER gedrück haben, können Sie die Änderung direkt im Browser sehen.
Keine Angst, Sie verändern damit nichts Dauerhaftes. Wenn Sie die Werte dauerhaft verändern möchten, müssen Sie die zugehörige CSS-Datei editieren und mit Ihren Werten versehen. In diesem Tool können Sie lediglich ausprobieren und suchen, aber nicht speichern.
Was im Internet Explorer geht, geht auch im Opera. Auch dort ist so ein Tool fest eingebaut. Sie finden es über das Menü:
Ansicht --> Entwicklerwerkzeuge --> Opera Dragonfly
Alle diese Tools funktionieren sehr ähnlich. Wobei Sie hier den Vorteil haben, dass das Fenster unten aufgeht und damit den Browser teilt.
Bild: CSS im Opera finden
Beim Opera müssen Sie den grünen Pfeil benutzen, der an dritter Stelle in der Iconleiste steht. Mit diesem dann im oberen Bereich den Bereich heraussuchen, zu dem Sie nähere Informationen haben möchten und diesen anklicken. Unten erscheinen jetzt wieder, wie im Internet Explorer auch, im linken Bereich der strukturelle Aufbau und im rechten Bereich des unteren Fensters die CSS-Angaben. Sie können rechts auch einen Haken setzen, bzw. entfernen. Dazu einfach mit der Maus über die Zeile bewegen, dann erscheint ein kleines Kästchen zum Haken setzen. Wenn Sie direkt in die CSS-Zeile klicken, können Sie dort auch die Werte verändern und wesentlich komfortabler als im Internet Explorer direkt die Veränderungen im oberen Fenster sehen.
Was auch interessant und nur im Opera ist, sind die Hilfslinien im oberen Fenster, mit dem Sie sehr schön das Layout überprüfen können.
Aber auch hier speichern Sie nichts. Speichern müssen Sie stets direkt in der zugehörigen CSS-Datei des Templates. Auch hier können Sie nur ausprobieren und suchen.
Als ich dieses Tutorial schrieb, musste man beim Firefox erst noch ein entsprechendes Tool installieren. Mittlerweile ist das nicht mehr notwendig und kann ebenfalls mit F12 direkt aufgerufen werden. Es sieht etwas anders aus, als der Firebug, funktioniert aber letztlich genauso.
Der Firefox hat wohl das konformtabelste Tool dieser Art, muss allerdings erst installiert werden. Dazu gehen Sie im Menü unter Extras --> Add-ons. Es erscheint dann ein kleines Fenster. Dort klicken Sie bitte auf das erste Icon Add-ons suchen und dort geben Sie dann in das Suchenfeld (Alle Add-ons durchsuchen) Firebug ein.
Bild: Add-on Firebug für den Firefox installieren
Es erschenen dannn mehrere Tools in dem das Wort Firebug vorkommt. Sie entscheiden sich bitte für das erste, welches nur diesen einen Namen hat und klicken "Zu Firefox hinzufügen" an. In Ihrem Browser haben Sie nun unten rechts einen kleinen winzigen Käfer. Wenn Sie den einmal anklicken, dann erscheint im unteren Bereich des Browsers der Firefox. Alternativ können Sie den Firebug über das Menü finden: Extras --> Firebug --> Firebug öffnen oder Sie können auch die F12-Taste drücken.
Im Endeffekt funktioniert auch der Firebug genauso, wie die bereits vorgestellten. In der Iconleiste des unteren Fensters haben Sie links einen weißen Pfeil, mit dem Sie oben Ihre Auswahl treffen. Im unteren Fenster haben sie links wieder die Struktur und rechts die CSS-Angaben.
Sie können im rechten Bereich aber von allen genannten Tools am besten arbeiten. Zumal auch eine automatische Eingabevervollständigung angeboten wird. Interessant ist auch, dass Sie nicht nur die CSS-Angaben angezeigt bekommen, sondern auch, in welchen Dateien und in welcher Zeile sich die Angaben befinden. Wenn Sie mit der Maus eine Sekunde über den blauen Dateinamen im rechten Bereich des unteren Fensters verharren, bekommen Sie sogar den vollständigen Pfad als Tooltip angezeigt.
Bild: Der Firebug in seiner ganzen Pracht
Die meisten Profis die ich kenne, arbeiten mit dem Firebug für den Firefox. Aber arbeiten Sie mit dem Browser und dem zugehörigen Tools, mit dem Sie sich auskennen und wo Sie sich wohl fühlen. Im Endeffekt sind alle sehr ähnlich und unterscheiden sich nur in Kleinigkeiten.
Beim Chrome gibt es ebenfalls einen fertig eingebautes Developer-Tool, das über das Tastaturkürzel Strg+Umschalt+I erreichbar ist.
Um direkt Bereiche in der Webseite zu markieren und sich die CSS-Angaben anzeigen zu lassen, muss man ganz unten auf die "Lupe" klicken. Interessant ist, dass Sie direkt beim überfahren mt der Maus Angaben zu den CSS-Elementen erhalten.
Bild: Entwickler-Tool im Chrome
Beim Chrome gibt es einige weitere interessante Dinge, wie beispielsweise die Seite gleich zu übersetzen oder auch weitere verschiedene Möglichkeiten der Analyse.
Unter diesem Beitrag kann man Kommentare schreiben. Da gibt es die Zeile
"Veröffentlichen Sie ihre Kommentare..."
(gab es mal - inzwischen habe ich die Kommentar-Komponente gewechselt. Das Beispiel selber ist aber natürlich weiterhin gültig.)
Ich zeige Ihnen nun, wie Sie die Formatierung dieser Zeile mit Hilfe des Firebug verändern können.
Dazu klicke ich zunächst auf das Icon vom Firebug und suche die Zeile so lange, bois ich einen blauen Rahmen um diese Zeile habe und klicke dann auf sie.
Unten links im Firebug wird mir nun angezeigt, wie das Ganze in der HTML-Ansicht ausschaut. Man kann sich dort mit der Maus bewegen und sieht im oberen Fenster durch blau hinterlegte Bereiche, welche HTML-Angaben wowür zuständig sind. So kann man auch die Stellen suchen, die man verändern möchte, denn nicht immer ist die direkt ausgewählt Stelle auch die, die man tatsächlich ändern muss, um das gewünschte Ergebniss zu erhalten. Wenn man die Stelle gefunden hat, unten einfach auf die Stelle klicken, dann ist sie fixiert und man kann nun rechts die CSS-Formatierungen anpassen.
In unserem konkreten Beispiel jedoch reicht die direkte Auswahl, wir müssen nicht weiter suchen gehen.
Rechts sehen Sie die Formatierungen für unsere Zeile. Es handelt sich um ein h3-Tag, der einer Farbe zugewiesen wurde und eine bestimmte Schriftart enthält.
Wenn Sie die Maus etwa eine Sekunde auf der Farbe verweilen, wird Ihnen der Farbton direkt angezeigt. Ebenso erhalten Sie ein kleines Beispielkästchen, wie die Schriftart in verschiedenen Größen und Buchstaben wirkt. Das kann allerdings nur der Firebug im Firefox.
Am Rande sei vermerkt, dass meine "font-family" solch einen merkwürdigen Namen trägt, weil ich an dieser Stelle mit einer zugeladenen Schriftart arbeite. Sie finden bei Interesse hier auch ein Tutorial, wie Sie eigene Schriftarten einbinden können.
Wenn Sie direkt in das Farbfeld klicken, können Sie es nach Belieben ändern. Ich habe den Wert für eine grüne Farbe in unserem Beispiel eingetragen und SIe können direkt sehen, wie sich die Überschrift oben in der Farbe ändert.
Möchten Sie die Abstände verändern, klicken Sie einmal auf den letzen Eintrag ("haupttitel" wäre das) und drücken ENTER. Sie können nun neue Formatierungen eintragen und gleich sehen, was passiert. Im Beispiel verändere ich die Abstände nach allen Seiten:
Beim schreiben macht Ihnen Firebug auch gleich einen Vorschlag, wie das Element heißen könnte. Wenn Sie mit dem Vorschlag einverstanden sind, drücken Sie einfach die TAB-Taste. Firebug vervollständigt dann das Wort, schreibt den Doppelpunkt dahinter und springt in das Feld, wo Sie die Werte eingeben können. Ich habe einfach mal einen 50px Abstand nach allen Seiten gewählt. Das Ergebnis wird Ihnen sofort oben angezeigt.
Sie brauchen bei all dem keine Angst zu haben, dass Sie etwas kaputt machen. Wenn Sie meinem Beispiel gefolgt sind, sind Sie auch gerade dabei, meine Website zu verändern ;)
Wenn Sie Ihre Eingaben dauerhaft verändern möchten, zeigt Ihnen Firebug, welche Datei Sie dafür editieren müssen und in welcher Zeile Sie den Eintrag finden. Verharren Sie wieder eine Sekunde über den Dateinamen und Firebug zeigt Ihnen den kompletten Pfad, wo Sie die Datei finden.
Diese Datei müssen Sie nun also mit einem Editor Ihrer Wahl editieren und zu Zeile 457 gehen. Haben Sie einen Editor ohne Zeilennummern, klönnen Sie aber einfach den Eintrag mittels der Suchfunktion im Editor suchen. Eine Suchfunktion hat jeder Editor. Ich habe direkt in meinem FTP-Programm einen eingebauten Editor, in dem ich kleine Anpassungen zur Laufzeit vornehme oder ich arbeite zunächst auf dem Desktop und lade dann die CSS-Datei hoch in das Termplate-Verzeichnis.
Wenn Sie die CSS-Datei editieren, stehen in dieser natürlich die alten Werte. Sie haben ja bisher nichts wirklich verändert, sondern nur so getan als ob ;)
Es ist nur ein kleines Beispiel und auch nur eine kleine Einführung in den Firebug. Die anderen hier erwähnten Tools arbeiten alle sehr ähnlich.
Im Downloadcenter auf time4mambo stehen die drei Grunddateien zum Download bereit (index.php, templateDetails.xml, template.css).
Leider verändert Joomla immer wieder gern den eingegebenen Code und lässt wichtige Zeilen verschwinden, bzw. ersetzt sie ungefragt mit den tatsächlichen Daten. Es wird also der Code ausgeführt, obwohl er eigentlich hier zur Ansicht eingestellt ist.
Da ich dieses Phänomen nicht wirklich lösen kann, stelle ich zu Beginn dieses Tutorials einen Screenshot vom Orginalcode der index.php hier ein. Im PDF-Tutorial ist hingegen der korrekte Code.
Um ein eigenes Template zu erstellen, wird folgende Verzeichnisstruktur benötigt:
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.
Das DOCTYPE gibt an, um welche Sprache es sich handelt. Also das es ein XML-File ist und wie es im Detail zu interpretieren ist.
Die Version bezieht sich auf Joomla und der Typ kennzeichnet, das es ein Template ist. client gibt an, für welchen Bereich das Template gemacht ist. client="site" gibt an, dass es ein Frontend-Template ist. Mit client="admin" wird ein Template für das Backend gekennzeichnet. 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 - zusammen mit der index.php und der templateDetails.xml - im Downloadcenter auf time4mambo zur Verfügung
Es handelt sich hierbei um die grundsätzlichen CSS-Klassen und -IDs, die Joomla benutzt. Ich habe nach besten Wissen gearbeitet und überprüft - aber es ist nicht auszuschließen, dass ich etwas übersehen habe.
Schaut man sich das erste Mal einen CSS-Befehl an, führt das meistens zu einem panischen Weiterklicken, weil das alles sehr kompliziert ausschaut. Aber eigentlich ist es das nicht. Bei genauer Betrachtung ist CSS eigentlich sogar selbsterklärend und wenn man eine Weile damit umgegangen ist, geht es schon beinahe wie von selbst.
Ein CSS-Befehl ist immer gleich aufgebaut:
Eigenschaft: Wert ;
Es gibt also eine Eigenschaft, wie beispielsweise die Farbe (color) und der wird ein Wert zugewiesen (beispielsweise "white"). Abgeschlossen wird jeder Befehl mit einem Semikolon. Das sieht dann in CSS so aus:
color: white ;
(ob man da Leerzeichen zwischen macht oder nicht, ist egal)
Um allerdings nun mit der Farbdefinition etwas sinnvolles anfangen zu können, muss es einem HTML-Befehl oder einer so genannten Klasse, wahlweise eines Bereiches zugewiesen werden.
Keine Angst - klingt komplizierter als es in Wirklichkeit ist.
Einige HTML-Befehle sind relativ bekannt:
p für Absätze
div für Bereiche
a href für Verweise
img src für Grafiken
table für Tabellen
Und noch ein paar mehr. Für jeden HTML-Befehl kann man die vorgegebene Formatierungsdefinition verändern. Normalerweise macht der p-Tag (HTML-Befehle werden als Tag (englisch gesprochen) bezeichnet) nichts weiter als einen Absatz zu kennzeichnen. Das bedeutet, dass bei zwei aufeinanderfolgenden Absätzen diese mit einer Zeile dazwischen ausgegeben werden im Browser.
Es gibt natürlich noch ein paar Tricks und Kniffs, die man mit CSS umsetzen kann. Hier ein paar interessante Beispiele:
Den p-Tag kennen wir schon. Der b-Tag gibt den so gekennzeichneten Bereich in Fettschrift aus.
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.