Dynamisches Joomla Template

Dienstag, den 23. Juni 2009 um 17:47 Uhr

Das folgende Tutorial für ein dynamisches Template haben wir von unserem User Turlaccio bekommen - vielen dank dafür.

Ich bin hier gelandet, als ich meine Templates dynamisieren wollte. Und ich versteh' nur wenig von CSS. Aber ausreichend genug, um es selber herausgefunden zu haben. Ist nicht schwer.

Man muss die CSS abändern. Welche CSS muss man denn abändern? In der Regel sehen sich die meisten Nutzer mit einem neueren IE oder Firefox die Webseite an. Darum sollte man template.css abändern (Artisteer 2.2) oder das style.css (Artisteer 2.1, glaub' ich).

Und was ändert man genau? Im Prinzip ändert man die Breiten (width), die in fixen Pixelbreiten angegeben sind (z. B. 1240px, oder folgend 1000px) in Prozente um (z. B. 100%). Aber nicht alle, sondern nur einige. Nämlich die Spalten, den Menübalken und den Fussbalken.

Nehmen wir an, du hast ein Template mit 3 Spalten, links eine schmale (20% der Breite), in der Mitte den Textblock (sagen wir 55%) und rechts nochmal eine schmale (der fehlende Rest, also 25%). Dem Template hast du, um den Rest einfacher zu erläutern, eine Breite von sagen wir mal 1000px gegeben.

Und jetzt template.css (bzw. style.css) ändern:

1. Alle width-Angaben von 1000px, bzw. die höchsten Angaben, habe ich auf 100% geändert. Die allererste dieser Angaben findest du ganz weit oben unter .Main, wo "width: 1000px" steht.

2. Auf .contentLayout sind diese 20%, 55% und 25% als Pixelbreite zu finden. Im Falle, dass die Webseite 1000px breit geplant war, entspricht dies natürlich 200px, 550px und 250px. Diese Breiten-Angaben in Pixel wandelstu um in Prozente. Die findest du bei .contentLayout unter .sidebar1 (da sind die Angaben zur linken Spalte), .content (der zentrale Blog-Inhalt), sidebar2 (die rechte Spalte). Oder, bei Artisteer 2.2, findest du sie hier:
.sidebar1 (linke Spalte)
.content (Inhalt, also Texte)
.content-sidebar1 (linke Spalte plus Inhalt)
.content-sidebar2 (Inhalt plus rechte Spalte)
.content-wide (alles zusammen)
.sidebar2 (rechte Spalte)
also z. B. statt "width: 200px;" setztu "width: 20%;"

Achtung: Am Ende der Zeilen immer einen Strichpunkt.

Das ist schon fast alles. Wenn du jetzt speicherst, sollte es schon klappen. Jetzt kommt kleine Kosmetik dazu. Weiter unten ab Punkt 3.

Anmerkung: wenn man die drei Zahlen 20, 25 und 55% addiert, kommt man schön auf 100%. Aber in diesem Fall gibt es oft kleine Darstellungsfehler, wenn man das Browserfenster später auf der Website mit gedrückter Maustaste auf dem rechten/linken Browserfenster-Rand schmaler und breiter macht. Dann "kippt" nämlich die rechte Spalte nach unten aufgrund eines kleinen mathematischen Fehlers. Die rechte Spalte kriegt nämlich in seltenen Fällen für ihre 25% nicht genug Pixel, dann springt sie runter und rechts ist gar nichts.

Tipp dazu: Ziehe beim Textblock 0.1% ab. Damit wäre links 20%, Mitte 54.9%, rechts 25%.
Nach dem gleichen Prinzip sollte man bei Artisteer 2.2 den .content, den .content-wide (auf 99.9%), den .content-sidebar1 und den .content-sidebar2 je 0.1% abziehen.

Hier die Kosmetik:

3. Den Header (das Logo oben) willst du wahrscheinlich auch linksbündig machen. Da musst du div.Header-jpeg suchen und die "background-position" auf "left center" statt "center center" setzen. "left" steht dann für horizontal linksbündig, "center" (bzw. das zweite Wort) steht für vertikal mittig.

Anmerkung: Wenn jetzt der Header zu schmal ist, für die ganz breiten Fensterbreiten, und du willst nicht, dass rechts neben dem Header einfach eine Lücke klafft, dann mache einen neuen Header, der mindestens 2000px breit wäre, und überschreibe damit deinen alten Header.jpg im images-Ordner deines Template. Ich habe auf meinen Seiten ganz einfach den Header rechts um eine Farbfüllung erweitert.

Letzte Kosmetik: Der Menübalken und der Footer werden nicht breiter als die ursprünglich geplanten 1000px, weil diese balkenartigen Hintergrundgrafiken von Artisteer in genau der angegebenen Breite gespeichert worden sind. Diese Grafiken muss man horizontal "repeaten" lassen, damit sie auch die ganze Breite ausfüllen.

4. Den Footer (den Balken zuunterst) muss man auch anvisieren. Dazu suche im .Footer das .Footer-background, ändere da das "background-repeat: no-repeat" auf "repeat-x". Dies ermöglicht, dass der Balken nicht nach 1000px endet, sondern auch breiter wird.

.Footer .Footer-background
{
position:absolute;
z-index:-1;
background-repeat:no-repeat;
background-image: url('../images/Footer.png');

Also hier oben "no-repeat" auf "repeat-x" ändern.

5. Das Gleiche auch für den oberen Menübalken machen. Man sucht unter .artmenu ein bisschen weiter unten folgendes:

.nav .l, .nav .r div
{
background-position: left top;
background-repeat: no-repeat;
background-image: url('../images/nav.png');

Da ändern wir wiederum das "no-repeat" auf "repeat-x"

6. Freiwillig. Etwas für echte Schlaumeier: Setze Mindest-Breiten ein. Der Befehl dazu heisst "min-width". Ich mache das so:

Zum Beispiel ist die linke Spalte auf 20% gesetzt. Ich will aber, dass meine Webseite nirgends kleiner als 800px dargestellt wird, weil mir sonst die Bilder nicht drauf passen. 20% von 800 px sind 160px. Ich ergänze den Block der .sidebar1 unter "width: 20%" mit der Zeile "min-width: 160px". Das Gleiche mache ich mit der .sidebar2 und dem .content, bei Artisteer 2.2 auch die zwei restlichen, indem ich immer als Richtwert meine gewünschte Minimalbreite (800px) nehme und die jeweiligen Prozente verwende.

Zurück

Als Favorit markieren

Lesezeichen setzen

Kommentare (6) add comment