MS-Project VBA-Programmierung

Nur die zusammenhängenden Vorgänge anzeigen

Der Vorgangspfad kennzeichnet zwar die zusammenhängenden Vorgänge, zeigt sie aber nicht allein an. Wnen zwischen den Vorgängen viele andre Zeilen liegen, bleibt es unübersichtlich. In meinem Makro habe ich das Problem gelöst.
Nur die zusammenhängenden Vorgänge anzeigen
Dieses Tutorial steht auch als PDF-Download (https://www.time4mambo.de/download/office) auf time4mambo zur Verfügung (allerdings ohne den letzten Absatz mit dem Makros). https://support.microsoft.com/de-de/office/feldfunktionen-ref-feld-b2531c23-05d6-4e3b-b54f-aee24447ceb2
Eigene Felder mit veränderbaren Text (Überarbeitet: Dezember 2021)
Das Tutorial steht auch als PDF-Datei zum Download auf time4mambo (https://www.time4mambo.de/download/office) bereit Optional … empfehle ich zunächst vorhandene Überschriften zu kopieren,
Gegliederte Überschriften in Word

Diagramm mit IST-/SOLL - Neg./Pos. Abweichung

Positive/Negative Abweichung in einem Excel-Diagramm
Diagramm mit IST-/SOLL - Neg./Pos. Abweichung

Excelliste mit bestimmter Hintergrundfarbe addieren

Mit VBA eine kleine Funktion programmieren, die Zahlen mit einer bestimmten Farbe summiert.
Excelliste mit bestimmter Hintergrundfarbe addieren
Eigentlich klingt das ganz einfach. Gibt schließlich sogar eine Befehlsschaltfläche um eine Excel-Tabelle in PowerPoint einzufügen. Aber da wir es mit Microsoft und einem starken Programm zu tun haben, gibt
Verschiedene Möglichkeiten Excel in PowerPoint einzufügen

Jetzt als kostenloses Onlinebook:

Seblod - Das Handbuch

Komplettabdruck der zweiten Auflage. (Fast) alles zum CCK Seblod! Der wohl mächtigsten Erweiterung von Joomla!
Seblod - Das Handbuch
Dieses Tutorial entstand ursprünglich für Dozenten und wurde während der Coronakrise geschrieben. Das ein oder andere Seminar fand auch statt. Um den Kolleginnen und Kollegen, die sich nicht so auskannten
Einführung in Microsoft Teams
In Joomla gibt es ein Modul, welches RSS-Feeds erzeugt, die andere abonnieren können. Das Problem ist nur, dass dieses Modul jeweils nur einen Feed für die gerade aktuelle Seite/Kategorie erzeugt.
RSS-Feeds kompakt ohne Erweiterung

Rechnung in Word - ohne Excel

Mit etwas einfacher Makroprogrammierung lässt sich in Word auch ohne Excel rechnen und somit eine Rechnung erstellen. Das Tutorial zeigt in mehreren Teilen, wie sich eine Rechnung mit allem Drum und Dran erstellen lässt.
Rechnung in Word - ohne Excel
Filter in zwei oder mehr Spalten zu setzen, die nicht voneinander abhängig sind, ist mit den Filtermöglichkeiten, die Excel bietet, nicht möglich. Angenommen Sie haben eine Tabelle mit ein paar Städten, zwei verschiedene Kategorien und zugehörigen Umsätzen. Aktivieren Sie über das Menüband Daten in der Gruppe Sortieren und Filtern den
Zwei Filter setzen mit ODER(...)
Die App kann bei https://www.time4mambo.de/download/seblod (https://www.time4mambo.de/download/seblod) downgeloadet werden ----------------- Mir gefiehlen die guten alten Weblinks von Joomla nicht, als ich diese Site relaunchte. Beispielsweise war es nicht möglich die Sprache der
SEBLOD: Weblinks mit automatisierten Screenshots

Excel-Lösungen

  • Tutorials zu Fragen rund um Excel
  • Teilweise mit Makroprogrammierungen.
  • Fertige Excel-Sheets mit Teillösungen zum Download
Excel-Lösungen
Dieses Tutorial steht auf time4mambo (https://www.time4mambo.de/download/office) als PDF zur Verfügung Einfache Rechnung Einzelpostenauflistung, Zwischensumme, Gesamtsumme und Mehrwertsteuer – für den Geschäftsmann
Rechnungserstellung mit Word und Excel
Seit Joomla 3 ist das CSS-Framework Bootstrap fester Bestandteil in Joomla und kann für eigene Templates somit einfach benutzt werden. Auf time4jaoomla erfahren Sie, wie es geht.
Bootstrap mit Joomla
Original-Auszug aus dem Buch Die Überlegung: Wir haben eine Kulturredaktion, der eine Kategorie zugeordnet ist. Und wir haben eine Politikredaktion, die in zwei Kategorien schreibt. Beide Redaktionen sollen nur ihre eigenen Beiträge bearbeiten, veröffentlichen und löschen können. Außerdem bekommen beide Redaktionen noch einen Chefreakteur zur Seite, der in allen
Fallbeispiel: Redaktionssystem
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
Wie funktioniert CSS
Das Tutorial steht auf time4mambo zum Download bereit: http://www.time4mambo.de/download/joomla/CommunityBuilder_v04-Joomla 3x.pdf (http://www.time4mambo.de/download/joomla/CommunityBuilder_v04-Joomla%203x.pdf) Dieses Tutorial ist ursprünglich für Joomla! 1.5 geschrieben worden. So ich es derzeit überblicke hat das Tutorial aber auch in
Community Builder
Dieses Tutorial und die zugehörige App stehen als Download auf http://www.time4mambo.de/webdesign/referenz.html (http://www.time4mambo.de/webdesign/referenz.html)
SEBLOD: Einführung am Beispiel eines selbsterstellten Portfolios
Grafische Rollovers mit dem JCE zu machen ist ja recht einfach, weil der JCE hier schon fertige Einstellmöglichkeiten sehr einfach mitbringt.Aber wie wird ein Rollover-Effekt bei einer Textmarke erzielt? Eigentlich genauso wie ein grafischer Rollover-Effekt - nur mit einem klitzekleinen Trick: Zunächst schreiben wir den Text: Lass uns was schreiben und mittendrin einen
Text-Rollover mit dem JCE

IST/SOLL mit Fehlerindikatoren

Ein Diagramm mit Fehlerindikatoren erstellen
IST/SOLL mit Fehlerindikatoren

Selbst geschrieben: Joomla für Redakteure

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.

Joomla für Redakteure


Deutschsprachige Seblod-Community

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.

https://seblod.time4mambo.de


Para- und Nonverbale Kommunikation

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:

Körpersprache


Selbst geschrieben: SEBLOD - Das Handbuch

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.

SEBLOD - Das Handbuch


Dankesagen...

Wenn die Tutorials dir weitergeholfen haben, dann kannst du mit einer kleinen Spende Danke sagen.

Schulungen

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

  •     VBA für Excel, Word und Outlook
  •     MS-Excel
        2003 / 2007 / 2010 / 2016 / 2019
  •     MS-Project
        2003 / 2007 / 2010 / 2016 / 2019
  •     MS-Word
        2003 / 2007 / 2010 / 2016 / 2019
  •     MS-PowerPoint
        2010 / 2016 / 2019
  •     Office 365
  •     Joomla! 3x
  •     Körpersprache

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

<jdoc:include type="head" />

<link href='http://fonts.googleapis.com/css?family=Cardo' rel='stylesheet' type='text/css'>

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

<link href='http://fonts.googleapis.com/css?family=Share+Tech' rel='stylesheet' type='text/css'>

Nun die zugehörige CSS-Datei editieren und dort einfach diese Zeile dort eintragen, wo ihr die Google-Schrift verwenden möchtet:

font-family: "Cardo";

Oder bei Schriftartennamen mit mehreren Wörtern (an dieser Stelle also mit Leerzeichen und nicht mit dem "+"):

font-family: "Share Tech";

Wird die Zeile beispiel für den body- oder html-Tag eingegeben, gilt diese Schriftart für die ganze Website:

body { font-family: "Cardo"; }

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:

/* Für den IE */
@font-face {
 font-family:meine_schrift;
 src:url(fruitopia.eot);
}

/* Für alle anderen Browser */
@font-face {
 font-family:meine_schrift;
 src:url(fruitopia.ttf);
}

Dort wo man die Schriftart benutzen möchte, einfach so eingeben, wie in diesem Beispiel bei einer h3-Überschrift:

h3 {
font-family: meine_schrift;
}

"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!

CSS im Internet Explorer finden – Das Auswahlwerkzeug

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.

CSS im Internet Explorer finden – Der Überblick

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.

CSS im Opera finden

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.

12 09

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.

Der Firebug in seiner ganzen Pracht

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.

Entwickler-Tool im Chrome

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.

 

Ein konkretes Beispiel, wie man mit den Tools arbeiten kann

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.

index php template

 

 

Um ein eigenes Template zu erstellen, wird folgende Verzeichnisstruktur benötigt:

Template-Verzeichnisstruktur

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.


index.php

 

<?phpdefined( '_JEXEC' ) or die( 'Restricted access' );?>

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.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" > 

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.

<head>
<jdoc:include type="head" />

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

<link rel="stylesheet" href="/<?php echo $this->baseurl; ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/<?php echo $this->baseurl; ?>/templates/system/css/general.css" type="text/css" />

Zwei CSS-Dateien, die von Joomla für generelle Ausgaben benutzt werden.

<link rel="stylesheet" href="/<?php echo $this->baseurl; ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />

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.

<link rel="shortcut icon" href="/<?php echo $this->baseurl; ?>/images/favicon.ico" />

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.

</head>

Das Ende des Kopfes der index.php

<body>
</body>
</html>

Zwischen den "body-Tags" kommt das grundsätzliche Aussehen des Templates und in der CSS-Datei wird das Template formatiert.

Übung mit einfachen Div-Design

Zur Übung wollen wir ein einfaches DIV-Template erstellen:

oben
rechts
mitte
unten

Der Code sieht folgendermaßen aus:

<div id="oben_beispiel">oben</div>
<div>
<div id="links_beispiel">links</div>
<div id="rechts_beispiel">rechts</div>
<div id="mitte_beispiel">mitte</div>
</div>
<div id="unten_beispiel">unten</div>

Und in die CSS-Datei (template.css) müssen diese Angaben rein:

#oben_beispiel {
border-width:thin;border-style:solid;border-color:#000000;
background-color:#FFFF00;
}
#links_beispiel {
width:200px;float:left;border-width:thin;border-style:solid;border-color:#000000;
background-color:#80FF80;
}
#rechts_beispiel {
width:200px;float:right;border-width:thin;border-style:solid;border-color:#000000;
background-color:#00FF80;
}
#mitte_beispiel {
margin: 0 15.5em;border-width:thin;border-style:solid;border-color:#000000;
background-color:#80FFFF;
}
#unten_beispiel {
border-width:thin;border-style:solid;border-color:#000000;
background-color:#FF8040;
}

 

Positionen

 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:

<jdoc:include type="modules" name="left" style="none" />

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:

  • none
    kein spezieller Stil soll augegeben werden. Diese Angabe kann auch weggelassen werden. Also einfach nur:
    <jdoc:include type="modules" name="left">
  • xhtml
    Der Inhalt wird in DIV-Tags ausgegeben
  • table
    Der Inhalt wird in TABLE-Tags ausgegeben (td)
  • horz
    Der Inhalt wird horizontal ausgegeben
  • outline
    Der Inhalt wird hervorgehoben (mit einer Hintergrundfarbe belegt)
  • rounded
    Der Inhalt wird mit einem Rahmen und aberundeten Ecken versehen. Vorraussetzung ist allerdings, dass selbige auch in der CSS-Datei definiert sind. Sonst wird diese Angabe einfach ignoriert.

 

Besondere Positionen / Platzhalter

Ein paar Positionsangaben unterscheiden sich von den anderen:

<jdoc:include type="component" />
<jdoc:include type="message" />

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:

<jdoc:include type="modules" name="breadcrumbs" style="none" />
<jdoc:include type="modules" name="banner" style="none" />

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.

 

Einfügen der Positionen ins Template

Die Platzhalter / Positionsangaben werden einfach zwischen den DIV-Tags geschrieben:

<div id="oben_beispiel">
<jdoc:include type="modules" name="top" style="none" />
</div>
<div>
<div id="links_beispiel">
<jdoc:include type="modules" name="left" style="none" />
</div>
<div id="rechts_beispiel">
<jdoc:include type="modules" name="right" style="none" />
</div>
<div id="mitte_beispiel">
<jdoc:include type="component" />
</div>
</div>
<div id="unten_beispiel">
<jdoc:include type="modules" name="bottom" style="none" />
</div>

Das wars schon. Jetzt noch die Datei als index.php im Templateordner speichern.

 


templateDetails.xml

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:

<!xml version="1.0" encoding="utf-8">

"utf-8" kann auch gegen einen anderen Zeichensatz ausgetauscht werden. Wobei utf-8 den europäischen Zeichensatz darstellen kann.

<!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN"
"<a href="http://www.joomla.org/xml/dtd/1.6/template-install.dtd">http://www.joomla.org/xml/dtd/1.6/template-install.dtd</a>">

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.

TemplateName

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.

<creationDate>05/2009</creationDate>
<author>Dein Name</author>
<copyright>Dein Name/Deine Firma/...</copyright>
<authorEmail>Deine eMail-Adresse</authorEmail>
<authorUrl>Deine Website</authorUrl>

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

<version>0.1</version>

Versionskontrolle kann nie schaden. Manchmal verändert man am Template etwas - hiermit hat man den Überblick.

<description>This template ist free under the GNU/GPL-lizense</description>

Eine kurze Erklärung - zum Copyright oder wofür das Template ist oder ...

<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
</files>

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.

<images>
<filename>images/bild.jpg</filename>
</images>

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!

<css>
<filename>css/template.css</filename>
</css>

Wie gesagt: Sie müssen nicht extra einen css-Block anlegen, schaden kann es aber auch nicht....

<positions>
<position>left</position>
<position>right</position>
<position>top</position>
<position>bottom</position>
</positions>

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.

</extension>

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.

 

/**
* ---------------------------------------------------------------------------
* Eine kommentierte CSS-Datei für Joomla!1.6
* Es handelt sich dabei um alle möglichen Klassen oder IDs,
* die innerhalb von Joomla vorkommen koennen.
* ---------------------------------------------------------------------------
* Zusammengestellt von:
* Axel Tueting
* http://www.time4mambo.de
* Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!
* ---------------------------------------------------------------------------
* Juni 2011
*
*
*/



/**
*
* Beitrag
*
*/

.item-page {

}

/* Mit eigener 'Seitenklasse' */

/* Mit Bindestrich */
.item-page[-meineSeitenklasse] {

}

/* Als Klasse (also mit einem Leerzeichen am Beginn der 'Seitenklasse) */
.item-page.[meineSeitenklasse] {

}

/* Beitragsueberschrift */
h2 {

}

/* Leiste in der rechts das Druck-Icon, etc. steht */
ul.actions {

}

li.print-icon {

}

li.email-icon {

}

/* Beitragsbewertung */
.content_rating {

}

content_vote {

}

.content_vote input {

}

.content_vote input.button {

}

/* Beitragsinfo */
dl.article-info {

}

dd.category-name {

}

dd.create {

}

dd.modified {

}

dd.published {

}

dd.createdby {

}

dd.hits {

}

/* Beitragsblog */

.blog {

}

.blog h2 {

}

.subheading-category {

}

.category-desc {

}

.items-leading {

}

.leading-0 {

}

.item column-1 {

}

.items-row {

}

.cols-2 {

}

.row_0 {

}

.row-seperator {

}


/**
*
* Beitragsliste
*
*/

.category-list {

}

.display-limit {

}

select#limit {

}

.cat-items {

}

form#adminForm {

}

table.category {

}

th#tableOrdering {

}

th#tableOrdering2 {

}

th#tableOrdering3 {

}
th#tableOrdering4 {

}

td.list-title {

}

tr.cat-list-row0 {

}

tr.cat-list-row1 {

}

td.createdby {

}

td.list-hits {

}

.cat-children {

}

.cat-children h3 {

}

.cat-items {

}

li.first {

}

li.first span.item-title {

}

li.first span.item-title a {

}

li.last {

}

li.last span.item-title {

}

li.last span.item-title a {

}


/**
*
* Kategorienliste
*
*/

.categories-list {

}

li.first {

}

.categories-list li.first {

}

.categories-list li.last {

}

.categories-list span.item-title {

}

.categories-list dl.article-count {

}

/* Text: Beitragsanzahl */
dl.article-count dt {

}

/* Anzahl der Beitraege */
dl.article-count dd {

}
 
/**
*
* Seitennavigation
* "Weiter - Zurück"-Buttons am Seitenende
*  Die eingesetzten Formatierungen bringen die Buttons beispielsweise nebeneinander
*/
div.pagination {

}
div.pagination ul {
  list-style: none;
}


div.pagination ul li {
  float: left;
  padding: 0 10px;
}


div.pagination ul li a {
 
 }

div.pagination ul li a:link {

}



div.pagination ul li a:hover{
 
 }



/**
*
*Menue
*
*/

ul.menu {

}

/* Alle Menueverweise */
ul.menu li a:link {

}

ul.menu li a:hover {

}

ul.menu li a:visited {

}

ul.menu li.active {

}

ul.menu li.current {

}

ul.menu li.current.active {

}

/*
* Einzelner Menueverweise
* ---------------------------------------------------------------------------
* in [MenuID] muss die MenuID vom Backend rein.
* Also in der Menueuebersicht ganz rechts die ID auslesen und dann hier eingeben. 
* So koennen einzelne Menuepunkte direkt angesprochen werden.
* ---------------------------------------------------------------------------
* Beispiel: 
* li#item-101 {...} 
*
*/

li#item-[MenuID] {

}

li#item-101.active {

}

li#item-101.current {

}

li#item-101.current.active {

}

/* Wenn ein Icon im Menueverweis angezeigt wird */
li#item-101 a img {

}

li#item-101 a span.image-title {

}

/* Hauptverweis bei Untermenues */
li#item-101.parent {

}

/* Individuelles Menue-Modul mit dem 'Menu Tag ID' vom Backend */
ul#[meineMenuTagID] {

}

ul#[meineMenuTagID].menu {

}

/* Eigener 'Link CSS Style' im Backend gesetzt */
a.[MeinLinkCSSStyle] {

}


/**
*
* pathway - breadcrumbs 
*
*/

.breadcrumbs {

}

.breadcrumbs img {

}

a.pathway {

}


/**
*
* Module
*
*/

.moduletable {

}
.moduletable h3 {

}

/* Individuelles Modul mit der 'Modulklassensuffix' */

/* Mit Bindestrich: */
.moduletable-[MeineSuffix] {

}

/* Als Klasse (also mit einem Leerzeichen zu Beginn in der Modulklassensuffix) */
.moduletable.[MeineSuffix] {

}

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.

<p> Erster Absatz </p>
<p> Zweiter Absatz </p>


Schreiben wir nun in unserer CSS-Datei

p { color: blue; }


werden unsere Absätze mit blauer Schrift dargestellt.
Möchten wir einen Absatz in blau und den anderen Absatz in roter Schrift anzeigen lassen, vergeben wir einfach zwei Klassen:

<p class="KlasseEins"> Erster Absatz in blauer Schrift </p>
<p class="KlasseZwei"> Zweiter Absatz in roter Schrift </p>


In der CSS definieren wir nun für jede Klasse eine andere Schriftfarbe:

p.KlasseEins { color:   blue; }
p.KlasseZwei { color:  red; }


Klassen werden in der CSS immer mit einem Punkt vor dem Klassennamen eingeleitet. der Punkt ist aber nur in der CSS, in der HTML (oder index.php des Templates) ist dieser Punkt nicht vorhanden.

Auf diese Art sind nun zwei Klassen, die einem p-Tag zugeordnet sind, definiert.
Statt die Klassen einem p-Tag zu zuordnen, können wir sie auch "alleinstehend" definieren und dann für andere Tags auch benutzen. Also:

.KlasseEins { color:   blue; }


In der index.php des Templates kann nun diese Klasse an jeder beliebigen Stelle benutzt werden:

<div class="KlasseEins"> Irgendein Text der in blauer Schrift erscheint </div>
<table class="KlasseEins">...</table>


Somit kann ich Klassen an bestimmten HTML-Tags binden oder für alle Tags zugänglich machen.

Statt Kassen können auch Bereiche / IDs definiert werden. Der einzige Unterschied ist, dass statt eines Punktes eine Raute die CSS-Zuweisung einleitet:

#MeinBereich { ... }
p#MeinBereich { ... }

Und im HTML:

<p id="MeinBereich"> ... </p>


Der Unterschied ist eher ein gedachter Unterschied. Ein Bereich wird in der Regel zur Definition von zentralen Formaten eingesetzt und sind in der Regel nicht an einem bestimmten Tag gebunden. Wohingehend Klassen meist an einem oder wenigen Tags gebunden sind.


Eigentlich war es das schon. Lediglich die Befehle muss man kennen und wissen, was für Werte man zuweisen kann. Da sich das aber niemand merken kann, gibt es dafür natürlich Listen und Erklärungen, wo man nachschauen kann. Oder auch Editoren, die einem da weiter helfen. Der professionelle Dreamweaver bietet beispielsweise die Möglichkeit den Befehl selbstständig zu schreiben, wenn man ihn aus der sehr umfangreichen Liste auswählt.

Für den schmalen Geldbeutel gibt es aber SelfHTML (Link siehe unten), wo eine hervorragende Dokumentation bereit steht.

CSS für Fortgeschrittene

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.

<b> Eine fette Sache hier </b>


Nun kan ich aber auch sagen, die fette Schrift soll in grün ausgegeben werden, aber nur wenn der fette Text in einem Absatz steht. Steht die Fettausgabe nicht in einem Absatz, soll sie normal ausgegeben werden.

Im CSS löse ich das dadurch, in dem ich eine "Verschachtelung" schreibe (der Fachmann nennt das "Kontextsensitive Selektoren"):

p b { color:green; }


Ich schreibe also erst den Tag, der erfüllt sein muss, damit das innere Tag, also der b-Tag dann die grüne Schriftfarbe enthällt. Ist kein p-Tag vorhanden, in dem der b-Tag liegt, wird diese Anweisung einfach ignoriert.

<p> Dieses ist <b>ein fetter grüner </b>Text</p>
<b> ich bin ein normaler fetter Text</b>



Ebenfalls ist es möglich sowohl eine Klasse, als auch eine ID einem Tag zu zuweisen. Etwas, das man beispielsweise in Joomla häufiger findet. So kann ich zum Beispiel einem Verweis generell eine grüne Schrift zuweisen und einem bestimmten davon immer in Großbuchstaben ausgeben lassen:

a.MeineKlasse { color:green; }
a.MeineKlasse#MeineID { text-transform:uppercase; }


In "MeineKlasse" ist generell die grüne Schrift für alle Verweise, die mit dieser Klasse definiert sind, zugewiesen. Und zusätzlich gibts noch für die passende ID die Verweise in Großbuchstaben. Im HTML sieht das dann so aus:

<a class="MeineKlasse" id="MeineID" href="/Verweis-URL">Verweistext</a>



Will man mehrere Tags mit den gleichen Angaben versehen, dann kann man diese mit einem Komma trennen und braucht die CSS-Befehle nur einmal zu schreiben:

p, b, div { ... }


Das ist jetzt keine Verschachtelung, sondern die Formatierung gilt für alle drei Tags. Eine Verschachtelung hat kein Komma.
Ich kann auch Tags mehrmals definieren. Zum Beispiel erst mit einer gemeinsamen Definition belegen, die für mehrere Tags gilt, wie eben gemacht und danach noch mal eine gezielte Definition, die nur für einen Tag gilt. Also beispielsweise kann ich im nachstehenden Beispiel sowohl dem ganzen Absatz, als auch der fetten Schrift, als auch einen div gekennzeichneten Bereich grüne Schrift zufügen, aber dem b-Tag noch eine Schriftgröße von 20 Punkt mitgeben, so dass sich die fette Schrift deutlichst abhebt:

p, b, div { color: green; }
b { font-size: 20pt; }


Natürlich gibts noch ein paar weitere interessante Möglichkeiten, aber zum Einstieg soll das hier reichen und bei Interesse auf SelfHTML verwiesen werden.


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.