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?

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

Wie ändere ich die Farbe der Schrift im Header?

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

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 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;
}

Inhaltsbereich

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

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