Universität Bielefeld

© Universität Bielefeld

Contentboxen

Beispiel-Contentbox

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi...

Code-Schnipsel:

<div class="contentbox">

  <h2>Überschrift</h2>
  <p>Text</p>

</div>

 

Farbig hinterlegte Contentbox

Dies ist beispielhaft eine grau hinterlegte Contentbox, die Sie nutzen können, um Inhalte noch etwas stärker hervorzuheben.

Fügen Sie dem contentbox-Container einfach noch die Klasse "gray" hinzu.
<div class="contentbox gray">...

Dies ist beispielhaft eine grün hinterlegte Contentbox, die Sie nutzen können, um Inhalte noch etwas stärker hervorzuheben. Diese Contentbox wird immer in der Farbe angezeigt, die Sie in der Variable "portal-color2" in Ihrer Config-Datei definiert haben.

Fügen Sie dem contentbox-Container einfach noch die Klasse "portal-farbe-hell" hinzu.
<div class="contentbox portal-farbe-hell">...

 

Contentboxen - links & rechts

Code-Schnipsel:

<div class="contentbox halbe-breite float-left">
  hier der Text...
</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi...

Code-Schnipsel:

<div class="contentbox halbe-breite float-right">
  hier der Text...
</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi...



Mehrere Listenboxen

Die Boxen passen sich automatisch der höchsten Box einer Reihe an.

Code-Schnipsel:

<div class="flexcontainer">

  <div class="contentbox halbe-breite">
    <h2> // Fakultäten 1 </h2>
    <ul class="listen">
      <li><a href="/Universitaet/Einrichtungen/Fakultaeten/Biologie/">Fakultät für Biologie </a></li>
      <li><a href="/chemie/">Fakultät für Chemie</a></li>
      <li><a href="/erziehungswissenschaft/">Fakultät für Erziehungswissenschaft</a></li>
      <li><a href="/Universitaet/Einrichtungen/Fakultaeten/Geschichte_Philosophie_Theologie/index.html">Fakultät für Geschichtswissenschaft, Philosophie und Theologie</a></li>
      <li>...</li>
    </ul>
  </div>

  <div class="contentbox halbe-breite">
    <h2> // Fakultäten 2 </h2>
    <ul class="listen">
      <li><a href="/Universitaet/Einrichtungen/Fakultaeten/Biologie/">Fakultät für Biologie </a></li>
      <li><a href="/chemie/">Fakultät für Chemie</a></li>
      <li>...</li>
    </ul>
  </div>

  <div class="contentbox halbe-breite">
    <h2> // Fakultäten 3 </h2>
    <ul class="listen">
      <li><a href="/Universitaet/Einrichtungen/Fakultaeten/Biologie/">Fakultät für Biologie </a></li>
      <li>...</li>
    </ul>
  </div>

  <div class="contentbox halbe-breite">
    <h2> // Fakultäten 4 </h2>
    <ul class="listen">
      <li><a href="/Universitaet/Einrichtungen/Fakultaeten/Biologie/">Fakultät für Biologie </a></li>
      <li><a href="/chemie/">Fakultät für Chemie</a></li>
      <li>...</li>
    </ul>
  </div>

</div>