CSS

Über den Punkt „CSS Layout“ in den Einstellungen kann das Design von mediaDESK konfiguriert und geändert werden.

Sie können aus einer Reihe von vorgegebenen CSS-Designs auswählen. Es ist auch möglich eigene CSS-Designs zu verwenden.

Wenn bei CSS-Theme die Option „none – use custom-css“ ausgewählt wird, können sie selbst das CSS-Stylesheet (siehe Wikipedia http://de.wikipedia.org/CSS) programmieren. Diese Option ist nur für Fortgeschrittene Benutzer mit Webdesign-Kenntnissen gedacht.

Mit dem Firefox-Plugin Web-Developer gibt es ein gutes Werkzeug um CSS zu testen und zu debuggen.

Zusätzliches CSS definieren

Mit dem zweiten Textfeld können zu den aktuellen Layouts diverse Formatierungen und Farben via CSS-Script geändert werden. Wenn Sie hier CSS-Anweisungen einfügen, werden diese mit höchster Priorität in mediaDESK dargestellt:

Mit der Anweisung: body { background-color:#c8c8c8; background-image:none; } wird beispielsweise ein grauer Hintergrund in der Bilddatenbank angezeigt. #c8c8c8 ist der Hex-Wert für die Farbe Grau.

Wie kann ich mein eigenes Hintergrund-Bild in das Layout der Bilddatenbank einfügen?

Mit einem zusätzlichen CSS ist es möglich ein benutzerdefiniertes Hintergrundbild in mediaDESK einzufügen. Verwenden sie dazu den folgenden CSS-Code und ändern sie #url# gegen die Adresse ihres Hintergrundbildes. Anschließend fügen sie den Code in das zweite Textfeld bei „Zusätzliches CSS“ ein.

 body {
   background-image: url('http://#url#');
 }

Sobald sie abspeichern, wird bereits das neue Hintergrundbild dargestellt. Mehr über Css finden sie auf http://www.css4you.de

Vier Thumbnails in einer Reihe anzeigen

Mit einem zusätzlichen CSS ist es möglich 4 statt der ursprünglichen 3 Bilder (Thumbnails) pro Überssichtsseite anzuzeigen.

 #site {
     width:1200px;
 }
 
 #main {
   width:950px;
 }
 
 #menue {
     width:1155px;
 }
 
 #content {
     width:736px;
 }

Tragen sie diesen CSS-Code unter Einstellungen -> CSS-Layout ein.

Informationen auf der Thumbnail-Seite ausblenden

Auf der Bildübersichtsseite (Thumbnails) werden im Standard folgende Informationen unter den Bildern angezeigt:

• Titel (css-class imgTitle)
• Leute (css-class imgPeople)
• Ort (css-class imgSite)
• Datum (css-class imgDate)
• Byline (css-class imgByline)

Einzelne oder alle Informationen können via CSS ausgeblendet werden: Dabei ist die CSS-Klasse anzugeben. Im folgenden Beispiel wird der Titel ausgeblendet.

 p.imgTitle {
   display:none;
 }

Elemente für nicht eingeloggte Benutzer ausblenden

Je nachdem ob ein Benutzer eingeloggt ist oder nicht, wird dem Body-Tag die CSS-Classe loggedIn oder loggedOut mitgegeben. Damit können davon abhängig, verschiedene Elemente ein oder ausgeblendet werden wenn ein Benutzer aus bzw. eingeloggt ist.

Beispiel: Blendet das Suchformular für nicht eingeloggte Benutzer aus

 .loggedIn #search {
    display:none;
 }

Beispiel: Blendet das komplette linke Panel für nicht eingeloggte Benutzer aus

 .loggedOut #panel {
   display:none;
 }