Das Design und das CSS

von Angie Radtke

Bei der Gestaltung habe ich bewusst versucht, immer wieder auftauchende CSS-Fragen zu beantworten. Das Floaten von Inhalten genauso wie das absolute Positionieren innerhalb von relativen Elementen.

14.11.1Die Beez-internen CSS-Dateien

Innerhalb des CSS-Ordners finden sich eine Reihe von CSS-Dateien mit unterschiedlichen Aufgaben.

Die Positionierung und die Darstellung wurden absichtlich in unterschiedliche Dateien ausgelagert. Dies hat den großen Vorteil, dass man, wenn man lediglich die Farben ändern möchte, diese Änderungen nur in der layout.css vornehmen muss, und die Positionierung unberührt bleibt. Man kann also weniger falsch machen.

CSS-Dateien im Überblick

• position.css
• layout.css
• print.css
• template.css
• ie7only.css
• ieonly.css
• generell.css
• template_rtl.css

14.11.2 Positionierung

Die Positionierung der eigentlichen Inhalte ist in der position.css geregelt.

Hier finden Sie alle CSS-Angaben für das so genannte Rahmendokument, wie es in der index.php festgelegt worden ist, und die Positionierung für die Ein- und Zweispaltigkeit im Inhaltsbereich sowie die Leading story. Eingriffe in die position.css sollte nur vornehmen, wer genau weiß, was er tut und was er erreichen will.

Der folgende Code z.  B. hinterlegt die Leading story mit dem Hintergrundbild des Bienchens.

.leading {
  background: #EFDEEA url(../images/biene.gif) no-repeat top left;
  border: solid 1px #CCC;
  color: #000;
  margin: 30px 0px 10px   0px;
  padding: 20px 20px 40px 120px;
  position: relative;
}

14.11.3 Das Layout

In der layout.css können Sie sich nach Herzenslust austoben, denn hier sind alle Formatierungen und Farbschemata hinterlegt. Aber auch die Positionierung von bestimmten inhaltlichen Elementen können Sie hier finden.

Das folgende CSS formatiert die Überschrift der Leading story und positioniert den Readmore-Link in die rechte untere Ecke. Dies geschieht durch die absolute Positionierung in der relativ positionierten Leading story.

#main .leading h2,#main2 .leading h2 {
  background:#EFDEEA;
  border-bottom:solid 0 #333;
  color:#93246F;
  font-family:trebuchet MS, sans-serif;
  font-size:1.4em;
  font-weight:normal;
  margin:0 0 10px;
  text-transform:uppercase;
}
 
#main .leading .readon,#main2   .leading .readon {
  background:url(../images/pfeil.gif) #93246F   no-repeat;
  border:solid 0;
  bottom:0;
  color:#FFF   !important;
  display:block !important;
  margin-top:20px   !important;
  position:absolute;
  right:0;
  text-decoration:none;
  padding:2px 2px 0 30px;
}

14.11.4 Sonstiges

Die template.css wird immer dann in Joomla! eingebunden, wenn Popups ohne Browsernavigation auftauchen, z.  B. in dem Email to friend-Popup-Fenster, oder wenn Sie über die Navigation einen Menüpunkt in diesem Stil anlegen. Die Formatierung dieser Ansicht erfolgt ausschließlich über diese Datei.

ie7only.css und ieonly.css kümmern sich um die Browserbugs der verschiedenen Internet Explorer-Versionen und sind im Kopf der index.php durch Conditional Comments eingebunden.

Conditional Comments sind spezielle Kommentare, die nur vom Microsoft Internet Explorer ab Version 5 interpretiert werden, um ausschließlich diese Browser mit Anweisungen zu versorgen.

<!--[if lte IE 6]>
<link href="<?php echo $this->baseurl ?>/templates/beez/css/ieonly.css"
      rel="stylesheet"
      type="text/css" />
<![endif]-->
<!--[if IE 7]>
<link href="<?php echo $this->baseurl ?>/templates/beez/css/ie7only.css"
      rel="stylesheet"
      type="text/css" />
<![endif]--> 

Zur print.css gibt es nicht viel zu sagen. Sie formatiert die Seite für den Ausdruck und wird nur dort benutzt. Der ein oder andere wird sich vielleicht wundern, warum vor dem eigentlichen Inhalt ganz groß das Wörtchen Content steht, obwohl das in dieser Form nicht im Quelltext vorkommt.

Mit CSS ist man in der Lage, Content in ein Dokument zu schreiben. Der folgende Code erledigt das für uns. Nicht alle Browser können damit umgehen – die standardkonformen schon.

#main2:before {
 content: " content ";
 …
} 

Die generell.css ist eigentlich schon eine Hierarchieebene höher im Systemordner vorhanden. Möchte man jedoch auch die Joomla!-internen Fehlermeldungen seinem Design entsprechend anpassen, ist dafür hier der richtige Ort.

Und last but not least die template_rtl.css. RTL bedeutet Right to Left, was sich auf die Leserichtung der installierten Sprache bezieht. Die Leserichtung ist in der xml-Datei des ausgewählten Sprachfiles angegeben und als Variable in der index.php des Templates verfügbar.

<?php
if($this->direction == 'rtl') :
?>
  <link rel="stylesheet"   
        href="<?php echo $this->baseurl ?>/templates/beez/css/template_rtl.css"
        type="text/css"   />
<?php
endif;
?>

Mit dieser CSS--Datei wird die Darstellung von Beez entsprechend der Leserichtung verändert, wenn Sie eine Sprache wie Hebräisch oder Arabisch installiert haben.

Spaßeshalber können Sie einfach mal ausprobieren, was passiert, wenn Sie in der englischen Standardsprache die Leserichtung ändern, indem Sie die entsprechende Variable von 0 auf 1 setzen (Abbildung 14.11).

Pfad: language/en-GB/en-GB.xml

...
<metadata>
...
<rtl>1</rtl>
...
</metadata>

Abbildung 14.11: Beez in RTL-Schreibrichtung