Wählen Sie als Nächstes die Datensätze aus, die Sie sichern wollen. Im Zweifelsfall entscheiden Sie sich für die Option Alle auswählen.

Setzen Sie nun einen Haken bei der Option Senden und bestätigen Sie Ihre Auswahl mit OK.

Speichern Sie nun die Datenbank ab.

Der Textabschnitt wurde dem Buch “Joomla! für Profis” von Stephan Brey entnommen, das im Franzis-Verlag erschienen ist. Sie können es hier direkt bestellen.

Backup über die Komponente JoomlaPack

Der Clou an der Sicherung mit JoomlaPack ist, dass ein Installer in die Sicherung integriert wird, was das Wiedereinspielen zum Kinderspiel macht. Diesem Tutorial liegt die JoomlaPack-Version 2. Spezial zugrunde, die unter der URL www.joomla-downloads.de zu finden ist.

Ich habe diese Variante gewählt, weil sie auch lokal getestet werden kann und einige Extra-Features eingebaut sind. Leider ist es nicht möglich, zeitlich festgelegte Backups anzulegen. Es ist aber möglich, ein Makro zu erstellen, welches diese Aufgabe erfüllen könnte.

Diese Version ermöglicht es, bestimmte Elemente bei der Datensicherung auszuschließen. Im Hauptmenü kann die Datensicherung nach eigenem Gusto konfiguriert werden. Dateien, die nicht mitgesichert werden sollen, lassen sich über diese Funktionen festlegen:
• Dateien ausschließen,
• Verzeichnisse ausschließen,
• Verzeichnisinhalt ausschließen,
• Datenbanktabellen ausschließen

Das ist ganz praktisch, da es nicht immer nötig ist, alles zu sichern. Wenn z. B. nur ein neues Modul installiert wurde und gesichert werden soll, können Sie alle anderen Dateien ausschließen. Das Backup über JoomlaPack verläuft nicht inkrementell, sondern es wird jeweils ein neues vollständiges Backup angelegt. Um den Sicherungsvorgang zu starten, klicken Sie entweder auf den Link Jetzt sichern oder auf den Button Jetzt sichern.

Die Sicherung läuft nun und wirft beim Abschluss eine Erfolgsmeldung aus. Zur besseren Übersicht über die angelegten Backups können Sie die Funktion Sicherungen verwalten aufrufen. Übersichtlich und nach Zeit und Datum sortiert sind die Backups dort aufgelistet. In diesem Bereich lassen sich auch die Datensicherungen wiederherstellen, löschen oder downloaden.

Da das vollständige Backup in einem Ordner im Webverzeichnis abgelegt wird, sollte der Ordner mit einer .htaccess-Datei geschützt werden.

Der Textabschnitt wurde dem Buch “Joomla! für Profis” von Stephan Brey entnommen, das im Franzis-Verlag erschienen ist. Sie können es hier direkt bestellen.

Es gibt auch eine Reihe von Extensions, die als ZIP-Archiv angeboten werden, vor dem Upload aber noch entpackt werden müssen. In der Regel weist der Name des Archivs darauf hin.

Der Menüpfad Erweiterungen > Installieren/Deinstallieren ist im Kontrollzentrum von Joomla sehr leicht zu finden.

Durch den Klick auf die Option Erweiterungen > Installieren/Deinstallieren öffnet sich das Menü Erweiterungen. Die Menüoptionen in diesem Browserfenster sind eigentlich selbsterklärend. Wenn Sie ein Erweiterungspaket auf Ihren Rechner geladen haben, können Sie per Klick auf den Knopf Durchsuchen in den Verzeichnissen Ihres lokalen Rechners danach blättern.

Mögliche Fehlerquellen

Beim Installieren der Erweiterungen kann es zu Fehlern kommen. Die meisten Fehler lassen sich recht schnell beheben, zumindest dann, wenn Sie auf eines der hier aufgeführten Probleme stoßen.

Problem: Fehler beim Installieren eines Installationspakets (z. B. Zugriff verweigert).
Ursache: Eventuell bestehen keine Schreibrechte auf das Verzeichnis.
Lösung: Sie müssen die Rechteeinstellungen ändern.

Problem: Ein installiertes Modul wird nicht angezeigt.
Lösung: Sehr wahrscheinlich wurde das Modul installiert, aber nicht in der Modulübersicht aktiviert. Bei jeder Installation eines Moduls muss noch explizit die Freigabe über den Menüpfad Backend / Module erfolgen.

Problem: Die Fehlermeldung Xml File not found in Package wird angezeigt.
Lösung: Dieser Fehler taucht häufig beim Installieren von Erweiterungen auf. Die Meldung bedeutet, dass die XML-Datei im ZIP-Archiv, das hochgeladen werden sollte, nicht gefunden wurde. In diesem Fall ist Folgendes zu prüfen: Ist das Archiv wirklich ein ZIP-Archiv bzw. wurde selbst eine ZIP-Datei erstellt? Falls die Erweiterung tatsächlich als ZIP-Archiv vorliegt, ist das Archiv möglicherweise fehlerhaft. Die Erweiterung sollte nochmals aus dem Web heruntergeladen und installiert werden.

Selbst erstellte ZIP-Archive können nur funktionieren, wenn sie eine XML-Datei mit den notwendigen Installationsinformationen für das Modul enthalten. Hier ein Beispiel:

Problem: Umlaute (ä, ö, ü) werden nicht richtig angezeigt.
Mögliche Ursachen: Die zugrunde liegende Datenbank wurde von ISO nach UTF-8 importiert oder umgekehrt. Dadurch wurden alle Umlaute in der Datenbank verändert. Oder Joomla wurde mit einem externen Editor geöffnet.
Lösung: Kodieren Sie die Umlaute über das PHPMyAdmin-Tool neu.

Der Textabschnitt wurde dem Buch “Joomla! für Profis” von Stephan Brey entnommen, das im Franzis-Verlag erschienen ist. Sie können es hier direkt bestellen.

Hintergrundbild

.body_bg {
background: #fefefe;
margin: 30px 0 0 0;
background-image: url(../body_bg.jpg);
background-repeat: repeat-x;
}

Da keine Größenänderung des Hintergrundbildes nötig ist, sondern wir lediglich ein anderes Bild wünschen, bleibt der Code weitgehend so, wie er ist. Es wird lediglich der Name der einzubindenen Bilddatei in der Zeile background-image: geändert. In unserem Beispiel ist dies body_bg.jpg.

Boxen auf der linken und rechten Seite

Die Boxen auf der linken und auf der rechten Seite sind folgendermaßen codiert:

/* LEFT COL H3 */
#leftcolumn h3, #rightcolumn h3 {
font-family: Tahoma, Arial, sans-serif;
width: 170px;
color: #fff; /*color: #798950;*/
font-size: 12px;
height: 36px;
text-decoration: none;
text-align: left;
padding: 0 0 0 10px;
font-weight: bold;
line-height: 25px;
margin: 0;
background: url(../images/h3.png) top left no-repeat;

Damit werden die Größe und die Positionierung der Menüboxen festgelegt. Hier das Hauptmenü:

Die Boxen auf der linken...

... und auf der rechten Seite.

Der Fußbereich der Seite (Footer)

Den so genannten Footer beschreibt der gleichnamige Abschnitt:

#footer {
margin: 0 auto;
text-align: center;
width: 960px;
height: 54px;
}

Der Textabschnitt wurde dem Buch “Joomla! für Profis” von Stephan Brey entnommen, das im Franzis-Verlag erschienen ist. Sie können es hier direkt bestellen.

Für unseren Geschmack ist das Bild im Header zu hoch. Momentan beträgt die Höhe  251 Pixel. Für unseren Geschmack ist es jedoch angenehmer, die Höhe um etwa ein Fünftel auf 200 Bildpunkte zu verringern. Auch dafür müssen wir die Datei template.css manipulieren. Es genügt allerdings noch nicht, die Höhe in der CSS-Datei auf 200px zu verkleinern. Das Bild selbst ist 251px hoch. Das bedeutet, wir müssen das Bild in einem Bildbearbeitungsprogramm auf 200px verkleinern oder schneiden. Anschließend wird das bearbeitete Bild wieder im Ausgangsverzeichnis gespeichert. Die Header-Bilddatei liegt im Verzeichnis: /templates/wm_01_j15/images.

Position des Header-Bildes und der Höhe (200px)

#header {
height: 251px;
background: url (../header_bg.jpg) no-repeat left top;
margin: 0 auto;
width: 820px;
padding: 15px 10px 0 0;
}

Die Höhe des Header-Bildes soll auf 200px verringert werden. Dazu tragen wir in die betreffende Zeile (height:) den neuen Wert von 200 Bildpunkten ein. Der neue Header-Abschnitt in der CSS-Datei sieht wie folgt aus:

#header {
height: 200px;
background: url (../header_bg.jpg) no-repeat left top;
margin: 0 auto;
width: 820px;
padding: 15px 10px 0 0;
}

Und hier die angepasste Header-Grafik:

Dies hat alles wunderbar geklappt. Was stört noch am Template? Der dunkle Rahmen um die Webseite sieht nach Trauer aus und das wollen wir nicht. Wir wollen eine lebendige Seite. Die Rahmenfarbe des Templates ist im CSS-Abschnitt #page_bg hinterlegt:

#page_bg {
width: 940px;
height: 100%;
padding: 10px;
margin: 0 auto;
background: #454851;
}

Die dunkle Rahmenfarbe ist in der Zeile background: #454851 festgelegt. Ändern wir diese Hexadezimalzahl im Joomla oder in einem Editor zu #ffffff ab. Der veränderte Abschnitt lautet dann folgendermaßen:

 
#page_bg {
width: 940px;
height: 100%;
padding: 10px;
margin: 0 auto;
background: #ffffff
}

Hier das Ergebnis. Zunächst der alte Seitenrand …

… der nun durch einen freundlicheren hellen Rand ersetzt wurde.

Der Textabschnitt wurde dem Buch “Joomla! für Profis” von Stephan Brey entnommen, das im Franzis-Verlag erschienen ist. Sie können es hier direkt bestellen.

Manche Templates haben sogar mehr als eine solche Stylesheet-Datei. Die fundamentalen Vorgaben in der template.css sind zum Beispiel die Schriftarten, die Hintergrundfarbe und die Höhe sowie die Breite des Templates. In dieser umfangreichen Datei sind eine Menge Informationen gespeichert; der gesamte Code der template.css kann um die 20 Seiten und mehr umfassen.

Das Template wm_01_j15 ist eine gute Vorlage für die eigene Templateerstellung, weil bereits alle wichtigen Module vorinstalliert sind, sowohl ein linker als auch ein rechter Seitenbereich existiert und sich die Grafiken relativ leicht ersetzen bzw. editieren lassen. Wenn das Template heruntergeladen und importiert wurde, befindet es sich im Verzeichnis /templates/ wm_01_j15.

Für ist an dieser Stelle erst einmal die Datei template.css interessant. Hierüber erfolgt die Anpassung des neuen Templates. Zu Anfang sieht das Original-Template wie in der Abbildung unten aus. Dabei ist schön zu erkennen, wie Joomla die Positionen für die Module farblich festlegt. Um diese Ansicht zu erhalten, wählen Sie das Template im Backend-Menü Erweiterungen/Templates aus und klicken im Parametermenü auf den Vorschau-Button:

Die Schriftart

Uns interessiert zunächst die im Template verwendete Schriftart. In unserem Fall ist das die Schriftart Tahoma. Sollte auf Ihrem Rechner dieser Font nicht vorhanden sein, wird eine andere serifenlose Schrift wie z. B. die Verdana verwendet.

Der Abschnitt body der Datei ist folgendermaßen aufgebaut:

 
body {
background: #FEFEFE; Hintergrundfarbe
font-family: Tahoma, Arial, sans-serif; Schriftart
line-height: 1.3em;
margin: 0;
padding: 0;
font-size: 12px;
color: #333;
}

Sehen wir einmal nach, was das bedeutet: Wenn wir die Schriftart Tahoma durch die Courier New ersetzen, sieht der body-Bereich der Datei wie folgt aus:

body {
background: #fefefe;
font-family: "courier new", Tahoma, Arial, sans-serif;
line-height: 1.3em;
margin: 0;
padding: 0;
font-size: 12px;
color: #333;
}

Und die Darstellung auf dem Bildschirm ändert sich:

Die Hintergrundfarbe

Vielleicht gefällt Ihnen die Hintergrundfarbe des Templates nicht. Im Augenblick wird sie in der template.css in der Zeile background durch den Hexadezimal-Wert #fefefe definiert. Das entspricht einer – sagen wir mal – weißlichen Hintergrundfarbe.

Jedem Farbton ist ein sechsstelliger Hexadezimal-Code zugeordnet. Farbtabellen, denen Sie die jeweiligen Codes entnehmen können, finden Sie im Web, zum Beispiel unter: www.uni-koeln.de/rrzk/www/tips/farben.html. Ersetzen Sie einfach den background-Wert durch eine andere Hexadezimal-Zahl. Experimentieren Sie ein wenig.

Der Textabschnitt wurde dem Buch “Joomla! für Profis” von Stephan Brey entnommen, das im Franzis-Verlag erschienen ist. Sie können es hier direkt bestellen.

Die zahlreichen Funktionen hier zu beschreiben würde den Rahmen sprengen. Probieren Sie es! Das Werkzeug ist zum Beispiel über folgende Webadresse zu beziehen:

http://www.erweiterungen.de/detail/Web_Developer/

Einige Anwendungsbeispiele:
• HTML und CSS Elemente lassen sich validieren (auf Gültigkeit prüfen).
• HTML, CSS und Quelltext lassen sich bearbeiten.
• Grafiken lassen sich deaktivieren, speichern und hervorheben.
• Die Webseite lässt sich in verschiedenen Auflösungen testen.

Test einer Webseite in verschiedenen Auflösungen

Sie können auch einen Blick in das CSS der angezeigten Seite werfen. Oder Sie können testen, wie die Webseite ohne CSS aussieht. Das erreichen Sie über die Funktion Styles deaktivieren. Sie können das in der geöffneten Seite hinterlegte CSS kopieren oder Ihr eigenes hinzufügen.

Die Toolbar erlaubt Ihnen, Stile zu deaktivieren

Für die eigene Sicherheit lassen sich Passwörter in Formularen und Logins anzeigen. Mit der Funktion Passwörter anzeigen ist dies möglich. Das betrifft selbstverständlich nur Ihre eigenen.

Horchen Sie Ihre eigenen Passwörter aus

Auch der Umgang mit Bildern und Grafiken ist eine Stärke der Web Developer Toolbar: Grafken können ausgeblendet, Bilder können vergrößert und hervorgehoben werden. Darüber hinaus gibt es viele weitere interessante Möglichkeiten.

Die Web Developer Toolbar

Der Textabschnitt wurde dem Buch “Joomla! für Profis” von Stephan Brey entnommen, das im Franzis-Verlag erschienen ist. Sie können es hier direkt bestellen.

Zur Erstellung der CSS-Datei steht ein Grundgerüst mit allen von Joomla verwendeten Klassen zur Verfügung. Ein weiteres Feature ist der integrierte XML-Generator, womit sich in Sekundenschnelle die XML-Datei zum Template erstellen lässt. Downloadbar ist die Template Toolbar auf diversen Webseiten wie etwa www.joomlaos.de.

Mit der Funktion Insert Module lassen sich Module bzw. Modulpositionen an entsprechender Stelle einfügen. Klicken Sie auf Insert Module und dann zum Beispiel auf Datei. Nichts hat sich getan. Doch wenn Sie im Kontextmenü auf Einfügen klicken, wird Ihnen folgender Code angezeigt:

<?php echo JHTML::Date($this->date_field, "%A, %d. %B %Y"); ?>

Das Einfügen eines Bildes (über Insert Module / Image) sieht folgendermaßen aus:

<img src="templates/<?php echo $this->template
?>/images/CHANGE_THIS_TO_YOUR_IMAGE_FILENAME" alt="" title="" />

Die Template Toolbar bietet somit viele Funktionen, mit denen sich Zeit und Arbeit sparen lassen.

Der Textabschnitt wurde dem Buch “Joomla! für Profis” von Stephan Brey entnommen, das im Franzis-Verlag erschienen ist. Sie können es hier direkt bestellen.

Diese Buchstaben-Zahlen Abfrage dient als Spam-Schutz für den Betreiber der Webseite. So etwas gibt es für Joomla auch. Ein Tipp: Installieren Sie es und Sie können sicher sein, dass die Joomla-Website nicht für Spam-Mails missbraucht werden kann. Für Joomla gibt es Module, die eine Captcha-Abfrage ermöglichen. Zum einen gibt es das Modul EasyCaptcha, welches recht kompliziert einzurichten ist. Ein weiteres Captcha-Modul ist Jollom. Auch Jollom ist nicht einfach zu installieren, es bietet aber im Gegenzug viele Funktionen an.

Das Konfigurationsmenü von Jollom Captcha

Hier ein Beispielfoto von EasyCaptcha! Das Werkzeug ist nicht übel, aber die Installation ist recht schwierig.

EasyCaptcha

Ich persönlich habe mich für das Antispam-Tool ReCaptcha entschieden. Wie die beiden erstgenannten Captcha-Modulen ist auch Recaptcha über diverse Webseiten wie z. B. www.joomlaos.de erhältlich. Die Installation ist relativ einfach, denn es ist lediglich nötig, einige Dateien in Joomla zu kopieren. Die gewohnte Installationsprozedur über
Erweiterungen / Installieren – deinstallieren steht hier leider nicht zur Verfügung. Das Archiv muss entpackt werden und die darin enthaltenen Verzeichnisse und Dateien müssen in die namensgleichen Ordner im Joomla-Verzeichnis kopiert werden.

Die ReCaptcha-Dateiinhalte, die kopiert werden müssen

ReCaptcha wirkt direkt bei der Benutzerregistrierung. Nur derjenige, der neben seinen persönlichen Daten auch die Buchstaben-Zahlen-Kombinationen richtig eingibt, kann sich anmelden.

ReCaptcha im Einsatz

Der Textabschnitt wurde dem Buch “Joomla! für Profis” von Stephan Brey entnommen, das im Franzis-Verlag erschienen ist. Sie können es hier direkt bestellen.

Natürlich beginnen wir in der CSS-Datei wieder mit einem Standardblock für die Basisformate. Gleichzeitig definieren wir die Breite der Galerie.

/*
Funktion: css-Datei fuer uebung15.html
Erstellt: 01-10-2009 12: 11: 00, Clemens Gull
*/
/* Basisformate */
body {
margin: 25px;
background-color: #C0C0C0;
font-family: "Comic Sans MS", Georgia, 
"Times New Roman", Times, serif;
font-size: 1em;
color: #000099;
font-weight: normal;
}
/* Ueberschriften */
h1 {
width: 90%;
padding: 0px 20px 20px 20px;
margin: 0px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1.75em;
color: #000066;
font-weight: normal;
font-style: italic;
}
/* Galerie */
div#gallery {
width: 500px;
}

Nun sehen wir bereits die Bilder und die Titel untereinander dargestellt. Denn der umgebende div-Tag legt die Breite mit maximal 500px fest.

Jetzt formatieren wir die Klasse polaroid, um der Galerie ein wenig Form zu geben. In dieser Formatierung ist eigentlich nichts Spezielles versteckt. Wir nutzen nur das Wissen aus den vorherigen Kapiteln über die Positionierung, die Ränder und die Hintergrundfarben. Die verwendete float-Eigenschaft benötigen wir, damit die Bilder mit der nächsten Formatierung elegant nebeneinander dargestellt werden.

/* Formatierung fuer die Bilder */
div.polaroid {
float: left;
background-color: #FFFFFF;
margin-left: 10px;
margin-bottom: 13px;
padding: 10px;
border: 1px solid #333333;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
font-size: 0.8em;
font-style: italic;
text-align: center;
}

Als Letztes nutzen wir die Möglichkeit des Kontext-Selektors, um die Bilder zu definieren. Wenn wir hier die Eigenschaft width nutzen, können wir die Photos proportional kleiner rechnen. Gleichzeitig definieren wir den img-Tag mit der Eigenschaft display als Block-Element. Damit wirkt sich die Eigenschaft float aus der vorhergehenden Definition aus und wir haben die Galerie so dargestellt, wie wir es uns wünschen. Denn jetzt wird auch der Titel automatisch unter dem Bild dargestellt.

Dieser Text ist dem Buch “Webseiten-Layout mit CSS” von Clemens Gull entnommen, das im Franzis-Verlag erschienen ist. Sie können es hier direkt bestellen.

]]> http://webdeveloper.franzis.de/webdesign/css-bilder-im-polaroid-stil-formatieren/feed/ 0