Direkt zum InhaltDirekt zur SucheDirekt zur Navigation
▼ Zielgruppen ▼

Humboldt-Universität zu Berlin - Web-Support des Computer- und Medienservice

Zusätzliche CSS-Klassen in Plone-Instanzen

Plone 2.5

Für alle, die das Corporate Design der HU installiert haben, ist es bereits ab Plone 2.0 möglich folgende Styles zu nutzen. In Plone 2.5 finden Sie sie im Root-Verzeichnis unter portal_skins -> hu_cd_styles -> huContent.css

Um diese CSS-Klassen zu nutzen müssen Sie Ihre Texte mindestens einmal in der HTML-Ansicht bearbeiten. Zu allen der folgenden Klassen werden Beispiele angegeben oder verlinkt. Bitte betrachten Sie den Quelltext des jeweiligen Beispiels.

 

Randlose Tabellen

Die Standardformatierung einer Tabelle sieht einen Rand um jede Zelle vor. Um den Rand nicht in jeder Zelle, Spalte oder Zeile überschreiben zu müssen, sollten Sie der Tabelle die Klasse noborder geben. Die Klasse ist definiert als:

table.noborder tr th,
table.noborder tr td {
    border: none;
}
Bitte betrachten Sie den Quelltext des Beispiels.

 

Wichtiger Text

Möchten Sie einen Text als wichtig bzw. rot markieren, vergeben Sie die Klasse wichtig. Die Klasse ist definiert als:

.wichtig {
  color: #993333; 
}

Bitte betrachten Sie den Quelltext des Beispiels.

 

Seiten zweispaltig anzeigen

Für zweispaltigen Text müssen Sie den Text durchlaufend schreiben und dann nach Spalten trennen. Folgende CSS-Definitionen sind dafür vorgesehen:

/* zweispaltige Texte */
div.multiColumnsV01 {
 width: 100%;
 margin: 0;
 padding: 0;
}

div.multiColumnsV01 p {
 margin: 0;
 padding: 0;
}

div.multiColumnsV01 .first{
 padding: 0;
 margin: 0;
 float: left;
 width: 48%;
}

div.multiColumnsV01 .second{
 padding: 0;
 margin: 0;
 margin-left: 52%;
}

Wie die "class" dann zu verwenden sind, finden Sie in einem kleinen oder großen Beispiel.

 

 

Klassen für die Portalansicht

Bei der Portalansicht einer Seite, möchten Sie vielleicht dennoch nicht auf das Zierbild links verzichten. Folgende Klassen erleichern das Einbinden eines Zierbildes:

.kasten-aussen {
   margin: 1em 0pt 0pt 0px; 
   min-height: 150px; 
   top: 1em;
}

.kasten-aussen img {
   float: left; 
   margin-top: 0.3em;
}

.kasten-innen {
   padding-left: 1em; 
   margin-left: 150px;
}

.kasten-innen h4 {
   margin-top: 0.1em; 
}

Bitte betrachten Sie den Quelltext des verlinkten Beispiels.