base.css

Häufig gefragte CSS-Snippets

Die hier vorgeschlagenen Lösungen gehören in Ihre base.css. Werte und Farben (inder Deklaration rechts vom Doppelpunkt) passen Sie natürlich noch Ihren Bedürfnissen bzw. Ihrem Geschmack an.

Diese Seite ist work in progress — Sie wächst und gedeiht durch Ihre Anfragen.

Responsivität

Wo sind die Breakpoints?

@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 570px) {
}

Hintergrund

Wie unterdrücke ich das Hintergrundbild?

/*  Kein Hintergrundbild, nur Farbe  */
body {
  background-image:none;
}

Wie kriege ich eine eigene Hintergrundfarbe?

/*  Kein Hintergrundbild, nur Farbe  */
body {
  background-color:lime;
  background-image:none;
}

Wie erhalte ich ein eigenes Hintergrundbild?

/*  Anderes Hintergrundbild */
body {
  background-image:url("/t3resources/inst/layout01INSTITUTE/Img/MyBackgroundImage.jpg");
}

Header

Wie ändere ich die Hintergrundfarbe des Headers?

Wählen Sie aus den folgenden Deklarationsmethoden:

Deklaration mit Farbname

/*  Hintergrundfarbe des Headers  */
#page-header {
   background: DarkOrange; 
}

Deklaration mit Hex-Wert

/*  Hintergrundfarbe des Headers  */
#page-header {
   background: #99cc00; 
}

Deklaration mit RGB-Wert

/*  Hintergrundfarbe des Headers  */
#page-header {
   background-color: rgb(201, 76, 76); 
}

Deklaration mit RGB-Wert und Deckkraft

/*  Hintergrundfarbe des Headers  */
#page-header {
   background-color: rgb(201, 76, 76, 0.3); 
}

Deklaration mit HSL-Wert

/*  Hintergrundfarbe des Headers  */
#page-header {
   background-color: rgb(201, 76, 76); 
}

Wie ändere ich die Farbe der Schrift im Header?

/*  Schriftfarbe im Header  */
#page-header h1 span {
   color: Aqua;
}

Wie kann ich die Größe der Überschrift im Header anpassen?

.fold-header #page-header h1 #backflip {
    height: 60px;
    font-size: 220%;
}

Wie kann ich den Text im Header vertikal zentrieren?

/*  Vertikale Ausrichtung der Überschrift  */
#page-header h1 #backflip {
    vertical-align: middle;
}

Wie tausche ich die Position von Instituts-Logo und Headertext?

/*  Instituts-Logo links, Text rechts  */
#page-header h1 img {
float: left;
}

Instituts-Logo

Wie tausche ich die Position von Instituts-Logo und Headertext?

/*  Instituts-Logo links, Text rechts  */
#page-header h1 img {
float: left;
}

Wie schiebe ich das Institutslogo weiter nach unten?

/** Institutslogo weiter nach unten  */
#page-header h1 img {
    margin-top: 10px;
}

Wie kriege ich das Institutslogo weiter nach oben?

/** Institutslogo weiter nach oben  */
#page-header h1 img {
    margin-top: -10px;
}

Wie verberge ich das Instituts-Logo?

/*  Kein Instituts-Logo  */
#page-header h1 img,
.fold-header #page-header h1 img {
    display:none;
}

Wie zentriere ich das Instituts-Logo?

/* Instituts-Logo zentrieren */
#page-header h1 img {
  float:none;
}
#page-header h1 {
  text-align:center;
}

Hilfe! Das Instituts-Logo skaliert nicht richtig auf den unterschiedlichen Geräten!

/*  Damit im Firefox die Skalierung des Instituts-Logos richtig funktioniert  */
#page-header h1 img {
  height: 142px;
  width: auto;
}
.fold-header #page-header h1 img {
  height: 60px;
  width: auto; /* 99px */
}
/* Wenn der Bildschirm max. 1024 Pixel breit ist */
@media screen and (max-width: 1024px) {
  #page-header h1 img, .fold-header #page-header h1 img {
    height: 60px;
    width: auto; /* 99px */
  }
}

Teaser

Wie deklariere ich das Teaser-Hintergrundbild, für den Fall, wenn keine Teaser-Meldung vorhanden ist?

/**  Hintergrundbild falls kein Teaser vorhanden  */
.js #teaser-bar #teaser {
  background: #f0f0f0 url("../Img/baum_800_344.jpg") 50% 50% no-repeat;
}

Login-Formular

Wie kriege ich die Eingabefelder im Login-Formular gleich breit?

/* Eingabefelder im Login-Formular gleich breit */
.fe-ldap-login label {
  width: 100px !important;
  display: inline-block;
}

Submenu

Wie ändere ich die Farbe des Submenüs?

/* Menü-Farben ändern – Normalzustand*/
#sidebar-navigation ul a {
  color: #343434;
  border-bottom: 1px solid #FFF;
  background: #F0F0F0 none repeat scroll 0% 0%;
}

Wie ändere ich die Farben des Submenüs in Reaktion auf Mouse-Aktionen?

/* Menü-Farben ändern – Reaktionszustand */
#sidebar-navigation ul a:hover,
#sidebar-navigation ul a:focus,
#sidebar-navigation ul a.selected {
  color: #343434;
  background-color: rgba(0, 189, 220, 0.4);
}

Wie verhindere ich die Anzeige des Externer-Link-Icons?

/* Menü "Externer Link" ohne Icon */
#sidebar-navigation ul a.ext::before {
  background-image:none;
  margin:0;
  padding:0;
}

Linke Seitenleiste

Wie kann das Seitenmenü in der Variante mit Header nach oben „geschoben“ werden?

/*  Bei großen Bildschirmen: linken Seitenstreifen weiter oben positionieren  */
@media screen and (min-width: 571px) #sidebar {
    position: relative;
    top: -235px
}

Wie kann der unten Bereich links neben dem Teaserbild (bei kleinem Teaser) farblich abgesetzt werden?

/*  Bei Teaser klein: Bereich links neben dem Teaserbild umfärben  */
.js .fold-teaser #teaser-bar {
    background-color: #F0F0F0;
}

Wie verändere ich die Stärke der Trennlinien im Seitenbereich?

/*  Stärke von Trennlinien im Seitenbereich  */
#sidebar hr {
    height: 10px;
}

Wie verberge ich die weiße Linie um den Sprachumschalter?

/*  Rahmenlinie um den Sprachumschalter verbergen  */
#navigation-bar #language-switch span {
    border-width: 0;
}

Wie kann ich den Zeilenabstand von Überschriften verringern?

/*  Kleinerer Zeilenabstand für Überschriften h1 ... h6 im linken Seitenstreifen  */
#sidebar h1,
#sidebar h2,
#sidebar h3,
#sidebar h4,
#sidebar h5,
#sidebar h6 {
    line-height: 100%;
}

Inhaltsbereich

Wie kriege ich alle Schriften im Inhaltsbereich gleichmäßig größer? 

/*  Alle Schriften im Inhaltsbereich vergrößern */
#content {
  font-size: 140%;
}

Wie erhalte ich Blocksatz für alle Absätze im Inhaltsbereich?

/*  Blocksatz im Inhaltsbereich  */
#content p {
    text-align: justify;
}

Wie kann ich den Zeilenabstand von Überschriften verringern?

/*  Kleinerer Zeilenabstand für Überschriften h1 ... h6 im Inhaltsbereich  */
#content-frame h1, 
#content-frame h2, 
#content-frame h3, 
#content-frame h4, 
#content-frame h5, 
#content-frame h6 {
    line-height: 100%;
}

Wie verändere ich die Stärke der Trennlinien im Inhaltsbereich?

/*  Stärke von Trennlinien im Inhaltsbereich  */
#content-frame hr {
    height: 10px;
}

Wie zeige ich in einem Listenelement mehr als 99 Einträge an?

/*
  Darstellung des Listenelements bei Werten über 99
*/
#content ol {
    padding-left: 3rem;
}