Überblick

Überblick über die verschiedenen Style-Elemente


Style-Elemente

Hier finden Sie unseren Styleguide: Vordefinierte Style-Elemente, die Sie "out of the box" nutzen können ohne sich selbst mit CSS auskennen zu müssen.


Interaktive Elemente

Interaktive Elemente wie zum Beispiel Klappboxen, Bild-Slider, etc. mit Hilfe von jQuery umsetzen.


Web-Icons

Dies ist eine Sammlung von Icons, die Sie auf Ihren Internetseiten verwenden können.


Bilder-Galerien

Diese Möglichkeiten haben Sie Bilder auf Ihren Internetseiten darzustellen.


Startseiten-Bildboxen

Hier findet Sie eine Anleitung zu den Bildboxen auf den Portal-Startseiten.

Styleguide

Die grundlegenden Style-Elemente

Allgemeines

Bilder im Fließtext (mit Bildunterschrift)

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...

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:

Bild links

<div class="float-left margin-r10">
  <img src="/images/template_2009/kopfbilder2/10.jpg" width="242" />
  <div class="copyright">&copy; Copyright-Hinweis</div>
</div>

Ohne Bildunterschrift:

<img src="/images/template_2009/kopfbilder2/3.jpg" width="242" class="float-left margin-r10" />

Bild rechts

<div class="float-right margin-l10">
  <img src="/images/template_2009/kopfbilder2/3.jpg" width="242" />
  <div class="copyright">Meine Bildunterschrift</div>
</div>

Ohne Bildunterschrift:

<img src="/images/template_2009/kopfbilder2/3.jpg" width="242" class="float-right margin-l10" />


Contentspalten

Contentspalte - gesamte Breite

Um die gesamte Inhaltsbreite der Webseiten nutzen zu können, verwenden Sie folgenden Code-Schnipsel:

<div class="content_full"> <h1>Test-Titel</h1> Hier der Inhalt... </div>

WICHTIG:
Zu beachten ist, dass "content_full" nicht in Kombination mit der Seitenbox rechts verwendet werden kann, da es hierbei zu Überschneidungen und Inhaltsverlusten in der Darstellung kommt!

 

Text automatisch in mehrere Spalten aufteilen

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

Zwei Spalten

<div class="spalten2">
  <insert file="/kommunikation/internet/lorem-ipsum.html" />
</div>


Drei Spalten

<div class="content_full">

  <div class="spalten3">
    <insert file="/kommunikation/internet/lorem-ipsum.html" />
  </div>

</div> <!-- content_full ende -->




Pfeil-Listen

  • Dies ist beispielhaft eine Liste mit Pfeil-Aufzählungszeichen
  • Den Abstand zum linken Rand können Sie mit den 3 Margin-Klassen (margin-l10, margin-l20 oder margin-l30) bestimmen
  • Die Farbe der Pfeile entspricht der Farbe der Fakultät oder Einrichtung, welche in der Config-Datei angegeben ist

Code-Schnipsel: Liste mit Links

<ul class="pfeil-liste margin-l20">
  <li><a href="">Punkt1</a></li>
  <li><a href="">Punkt2</a></li>
  <li><a href="">Punkt3</a></li>
</ul>

Code-Schnipsel: Liste ohne Links

<ul class="pfeil-liste margin-l20">
  <li>Punkt1</li>
  <li>Punkt2</li>
  <li>Punkt3</li>
</ul>


Dokumenten-Listen

Vorschau

  • Titel des Dokuments
    Beschreibung des Dokumenten-Inhalts
    Link zum Dokument
    Stand: 12.4.2023
  • Dokumenten-Titel
    Ausführlichere Beschreibung des Dokumenten-Inhalts
    Word-Dokument
    Stand: 17.1.2025
  • Überschrift
    Beschreibung des Dokumenten-Inhalts
    PDF-Dokument
    Stand: 21.11.2021

Code-Schnipsel

<ul class="dokumenten-liste feed"><br />

  <li><strong>Titel des Dokuments</strong><br>
  Beschreibung des Dokumenten-Inhalts<br>
  <a href="#"><i class="font-icon small pfeil-rechts2 unigruen"></i> Link zum Dokument</a><br>
  <span class="footer">Stand: 12.4.2023</span></li>

  <li><strong>Dokumenten-Titel</strong><br>
  Ausführlichere Beschreibung des Dokumenten-Inhalts<br>
  <a href="#"><i class="font-icon small pfeil-rechts2 unigruen"></i> Word-Dokument</a><br>
  <span class="footer">Stand: 17.1.2025</span></li>

  <li><strong>Überschrift</strong><br>
  Beschreibung des Dokumenten-Inhalts<br>
  <a href="#"><i class="font-icon small pfeil-rechts2 unigruen"></i> PDF-Dokument</a><br>
  <span class="footer">Stand: 21.11.2021</span></li>

</ul>


Liste mit länglichen, grünen Aufzählungszeichen

Code-Schnipsel:

<div class="contentbox portal-farbe-hell">
  <h2> // Fakultäten </h2>
  <ul class="listen">
    <li><a href="/Universitaet/Einrichtungen/Fakultaeten/Biologie/">Fakultät für Biologie</a></li>
    <li><a href="/chemie/index.html">Fakultät für Chemie</a></li>
    <li> ... </li>
  </ul>
</div>


Seitenboxen

Rechte Seiten-Boxen

Die Seitenboxen werden immer rechts oben im Content-Bereich angezeigt (Siehe Screenshot).

Code-Schnipsel:

<!-- Seitenboxen -->
<div class="seitenbox">

  <div class="infoboxrechts">
    <h2>1.Box</h2>
    <p>Text</p>
  </div>

  <div class="infoboxrechts">
    <h2>2.Box</h2>
    <p>Text</p>
  </div>

</div>


Tabellen

Zur übersichtlichen Aufbereitung von Informationen können nachfolgende Tabellen mit im Stylesheet vordefinierten Farben verwendet werden.

Bitte nutzen Sie Tabellen nicht zur grafischen Gestaltung/Strukturierung von Inhalten, da diese nur eingeschränkt mobilfähig sind.

Tabelle Typ1 Farbwert-Kopf: #d4d0c8
Spalte 1, Zeile 1 - Farbwert: #EFF3F7 Spalte 2, Zeile 1
Spalte 1, Zeile 2 Spalte 2, Zeile 2
Code-Schnipsel

<table class="tabelle-typ1" cols="2" cellspacing="2" cellpadding="8" align="center">

  <thead>
    <tr>
      <th> Tabelle Typ1 </th>
      <th> Farbwert: #d4d0c8 </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td> Spalte 1, Zeile 1 </td>
      <td> Spalte 2, Zeile 1 </td>
    </tr>
    <tr>
      <td> Spalte 1, Zeile 2 </td>
      <td> Spalte 2, Zeile 2 </td>
    </tr>
  </tbody>

</table>

 

Alternative Tabelle (mit der Klasse "mobile-float")

Um eine Tabelle ansatzweise mobilfähig zu machen, fügen Sie einfach die Klasse "mobile-float" hinzu. Diese bewirkt, dass die Zellen in der Mobil-Version untereinander statt nebeneinander angeordnet werden.

Überschrift / Titel

Tabelle Typ2
Farbwert: #F0F0F0

Spalte 2, Zeile 1

Spalte 1, Zeile 2

Spalte 2, Zeile 2

Code-Schnipsel

<div class="contentbox">
  <h1>Überschrift / Titel</h1>
  <table class="tabelle-typ2 mobile-float" cellpadding="4" cellspacing="2" width="100%">
  <tbody>
    <tr>
      <td width="180" valign="top"><p><strong>Spalte 1, Zeile 1 - Farbwert: #F0F0F0</strong></p></td>
      <td valign="top"><p>Spalte 2, Zeile 1</p></td>
    </tr>
    <tr>
      <td valign="top"><p><strong>Spalte 1, Zeile 2</strong></p></td>
      <td valign="top"><p>Spalte 2, Zeile 2</p></td>
    </tr>
  </tbody>
  </table>
</div>

 

 

Verschiedene Content-Boxen

Content-Boxen

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>


Personen-Boxen

Personenfoto: Fabian Hartl

Fabian Hartl
Universitätsarchivar

Personenfoto: Nina Kothy

Nina Kothy
Referentin für interne Kommunikation

Personenfoto: Eva Maria Glatz

Eva Maria Glatz
Assistenz und Organisation

Personenfoto: Jörg Heeren

Jörg Heeren
Referent Wissenschaftskommunikation

Personenfoto: Maren Vollmer

Maren Vollmer
Mitarbeiterin Hochschulkommunikation

Foto nicht vorhanden

Moritz Schmidt-Degenhard
Referent Social Media

Code-Schnipsel

<div class="personen-boxen">

  <div class="boxen">
    <img src="/kommunikation/images/personen/fabian.jpg" height="200" alt="Personenfoto: Vorname Nachname" />
    <p><strong>Vorname Nachname</strong><br>
    Tätigkeitsbeschreibung</p>
  </div>

  <div class="boxen">
    <img src="http://via.placeholder.com/200x200/ddd/fff?text=Kein+Foto" height="200" alt="Foto nicht vorhanden" />
    <p><strong>Vorname Nachname</strong><br>
    Tätigkeitsbeschreibung</p>
  </div>

  <div class="boxen noborder">
    <img src="http://via.placeholder.com/200x200/ddd/fff?text=Kein+Foto" height="200" alt="Foto nicht vorhanden" />
    <p><strong>Vorname Nachname</strong><br>
    Tätigkeitsbeschreibung</p>
  </div>

  <div class="boxen_trenner"> </div>

  <div class="boxen">
    <img src="http://via.placeholder.com/200x200/ddd/fff?text=Kein+Foto" height="200" alt="Foto nicht vorhanden" />
    <p><strong>Vorname Nachname</strong><br>
    Tätigkeitsbeschreibung</p>
  </div>

  <div class="boxen noborder"></div>
  <div class="boxen noborder"></div>

</div>

 

Startseiten-Boxen
Testimonial Bubbles

The many faces of Bielefeld

Testimonial Bubble Washington, USA

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Dagmar da Silveira Macedo North Carolina, USA

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque unde dignissimos vitae iusto repellat.

Prof. Dr. Moritz Schmidt-Degenhardt Massachusetts, USA

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque vitae iusto repellat.

Testimonial Bubble Washington, USA

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Dagmar da Silveira Macedo North Carolina, USA

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque unde dignissimos vitae iusto repellat.

Prof. Dr. Moritz Schmidt-Degenhardt Massachusetts, USA

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque vitae iusto repellat.

Code-Schnipsel

<div class="bild-boxen flexcontainer">

  <div class="boxen breite3 noborder"><h4>The many faces of Bielefeld</h4></div>

  <!-- Bubble 1 -->
  <div class="boxen bubbles2">
    <a href="index.html">Testimonial Bubble</a>
    <i>Washington, USA</i>
    <img src="/kommunikation/images/personen/jochen.jpg" class="bild" width="150">
    <p><q>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</q></p>
  </div>

  <!-- Bubble 2 -->
  <div class="boxen bubbles2">
    <a href="index.html">Dagmar da Silveira Macedo</a>
    <i>North Carolina, USA</i>
    <img src="/kommunikation/images/personen/christine.jpg" class="bild" width="150">
    <p><q>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque unde dignissimos vitae iusto repellat.</q></p>
  </div>

  <!-- Bubble 3 -->
  <div class="boxen bubbles2 noborder">
    <a href="index.html">Prof. Dr. Moritz Schmidt-Degenhardt</a>
    <i>Massachusetts, USA</i>
    <img src="/kommunikation/images/personen/moritz.jpg" class="bild" width="150">
    <p><q>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque vitae iusto repellat.</q></p>
  </div>

  <div class="boxen_trenner breite3"></div>

  <!-- Bubble 1 -->
  <div class="boxen bubbles">
    <a class="intern" href="index.html">
      <img src="/kommunikation/images/personen/jochen.jpg" class="bild" width="150">
      <strong>Testimonial Bubble</strong>
    </a>
    <i>Washington, USA</i>
    <p><q>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</q></p>
  </div>

  <!-- Bubble 2 -->
  <div class="boxen bubbles">
    <a class="intern" href="index.html">
      <img src="/kommunikation/images/personen/christine.jpg" class="bild" width="150">
      <strong>Dagmar da Silveira Macedo</strong>
    </a>
    <i>North Carolina, USA</i>
    <p><q>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque unde dignissimos vitae iusto repellat.</q></p>
  </div>

  <!-- Bubble 3 -->
  <div class="boxen bubbles noborder">
    <a class="intern" href="index.html">
      <img src="/kommunikation/images/personen/moritz.jpg" class="bild" width="150">
      <strong>Prof. Dr. Moritz Schmidt-Degenhardt</strong>
    </a>
    <i>Massachusetts, USA</i>
    <p><q>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque vitae iusto repellat.</q></p>
  </div>

</div>

 

Visitenkarten
Foto Vorname Nachname

Vorname Nachname

Positionsbezeichnung

Raum: U1-234

Tel.: (0521) 106-1111
E-Mail: xxx@uni-bielefeld.de

Tätigkeitsschwerpunkte:
- Schwerpunkt
Code-Schnipsel

<div class="visitenkarte">
  <img class="float-left" width="120" border="0" src="/kommunikation/images/personen/markus.jpg" alt="Foto Vorname Nachname" />
  <div class="personendaten">
    <h3>Vorname Nachname</h3>
    <b>Positionsbezeichnung</b><br /><br />
    Raum: U1-234 <br /><br />
    Tel.: (0521) 106-1111<br />
    E-Mail:
    <a href="mailto:xxx@uni-bielefeld.de">xxx@uni-bielefeld.de</a><br />
    <b>Tätigkeitsschwerpunkte:</b><br />
    - Schwerpunkt
  </div>
</div> <!-- visitenkarte ende -->

 

Farben

Die Farb-Übersicht der Fakultäten und Einrichtungen finden Sie auf dieser Seite:
Corporate Design Farben

Die Aktuelle Style-Datei

Hier finden Sie die aktuelle Style-Datei, die automatisch ins Template 2017 integriert wird:
CSS-Datei 2017


Die Style-Klassen des Portal-Templates 2017

Die Klassen "portal-farbe", "portal-farbe-hell" und "portal-farbe-dunkel" wurden neu eingeführt.
Diese sind in den 2017er Templates in der Regel automatisch freigeschaltet. Sollten Sie jedoch Probleme mit der Anwendung dieser Klassen haben, nehmen Sie einfach Kontakt mit uns auf.

Standardmäßig werden die Uni-Farben für diese Klassen verwendet. Sie können die Farbabstufungen aber auch in Ihrer Config-Datei selbst an Ihre Portal-Farbe anpassen:

<!-- Portal-Farbe normal (default = #B6C828) -->
<xsl:variable name="portal-color" select="'#B6C828'" />

<!-- Portal-Farbe dunkel (default = #007656) -->
<xsl:variable name="portal-color1" select="'#007656'" />

<!-- Portal-Farbe hell (default = #E0EB98) -->
<xsl:variable name="portal-color2" select="'#E0EB98'" />

Schauen Sie sich dazu auch die Beschreibung zur Config-Datei an:
Anleitung Config-Datei


Allgemeine Style-Klassen (auch Templates vor 2017)

Folgende Style-Klassen sind in allen Standard-Templates integriert und nutzbar:

Screenreader

Mit der Klasse "screenreader" können Sie zusätzliche Informationen für Screenreader bereitstellen, die in der normalen Ansicht der Webseite unsichtbar sind.
Dies bietet sich beispielsweise bei zusätzlichen Formularfeldbeschriftungen oder für Skip-Links an.

Barrierefreiheit im Web
Online-Formulare

Textfarben

.unigruen { color: #B6C828; }
.orange { color: #F59F00; }
.rot {color: #E30026;}
.lila {color: #CA2D78;}
.blau {color: #0784C8;}
.white { color: #fff; }
.black { color: #000; }

Float-Elemente

.float-left { float: left; }
.float-right { float: right; }
.clear { clear: both; }

Margin

.margin-10 { margin: 10px; }
.margin-20 { margin: 20px; }
.margin-30 { margin: 30px; }
.margin-l10 { margin-left: 10px; }
.margin-l20 { margin-left: 20px; }
.margin-l30 { margin-left: 30px; }
.margin-r10 { margin-right: 10px; }
.margin-r20 { margin-right: 20px; }
.margin-r30 { margin-right: 30px; }
.margin-lr10 { margin-left: 10px; margin-right: 10px; }
.margin-lr20 { margin-left: 20px; margin-right: 20px; }
.margin-lr30 { margin-left: 30px; margin-right: 30px; }

Verschiedenes

.footer { color: #909090; font-weight: normal; text-decoration: none; font-size: 8pt; }
<span class="footer"> grauer Text in kleinerer Schriftgröße </span>
.all-caps { text-transform: capitalize; }
<span class="all-caps"> Verwandelt alle Zeichen in Großbuchstaben </span>
.scroll { overflow-y: scroll; }
<div class="scroll" style="height: 200px;"> Fügt einem div einen Scrollbalken hinzu. </div>
.big-link { cursor: pointer; font-weight: bold; font-size: 14px; color: #20496E; line-height: 1.475; }
<a class="big-link" href="#"> Lässt einen Link wie die Überschrift einer Klappbox aussehen </a>
.noborder { border: none; }
<div class="boxen noborder"> Löscht alle vordefinierten Rahmen dieses Elements. (Siehe Startseitenboxen) </div>


Klassen und Anpassungen für mobile Endgeräte
jQuery

Interaktive Elemente (jQuery-Animationen)

Aktuelle Portal-Templates

Die Code-Schnipsel, die Sie auf dieser Seite finden, funktionieren in den 2017er Templates unmittelbar nachdem Sie sie in Ihre Seite kopiert/eingefügt haben.

Templates vor 2017

Für fast alle Templates vor 2017 kontaktieren Sie uns bitte, damit wir Ihnen den zusätzlichen JavaScript-Quellcode zu den gewünschten Elementen bereitstellen können.

jQuery-Dateien

Die allgemeinen jQuery-Dateien, die in den 2017er-Templates eingebunden sind, befinden sich unter

/javascript/jquery.min.js
und
/template-files/portal-jquery-scripts.js

Sie vermissen eine Funktionalität?

Sprechen Sie uns einfach darauf an!

In den meisten Fällen finden wir eine Lösung, die wir in unser Repertoire aufnehmen und von der auch andere profitieren können.

Kontakt



A bis Z Liste / Kartei
  • Listeneintrag Numero Uno
  • Dies ist Liste A
  • Nicht vorhandene Buchstaben werden automatisch ausgegraut
  • usw.
  • Verschiedene Einträge
  • Blindtext
  • Lorem Ipsum
  • Listenpunkte mit mehr Text sehen wie folgt aus:
  • 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.
  • keine Einträge

Code-Schnipsel

<div id="kartei">

  <ul class="liste-A">
    <li>Listeneintrag Numero Uno</li>
    <li>Dies ist Liste A</li>
    <li>usw.</li>
  </ul>

  <ul class="liste-C">
    <li>Verschiedene Einträge</li>
    <li>Blindtext</li>
    <li>Lorem Ipsum</li>
  </ul>

  <ul class="liste-G">
    <li>Listenpunkte mit mehr Text sehen wie folgt aus:</li>
    <li>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.</li>
  </ul>

  <div id="kein-eintrag">
    <ul class="pfeil-liste"><li>keine Einträge</li></ul>
  </div>

</div> <!-- kartei ende -->

 

 

Anker mit Ausklapp- und Highlight-Funktion

Wenn Sie auf bestimmte Inhalte in einer Seite mit Ausklapp-Boxen verlinken möchten und sich die entsprechende Box bereits beim Aufrufen der Seite ausklappen und hervorgehoben werden soll, können Sie dies auf unterschiedliche Weise erreichen:


Version 1

Für Klappboxen, die komplett hervorgehoben werden sollen.

Die URL muss folgende Form haben, um den Anker direkt aufzurufen:
http://www.uni-bielefeld.de/Ordner/datei.html#ankername
ankername steht hierbei für den Namen der Box, die sich ausklappen und hervorgehoben werden soll.

Achtung:
Der entsprechende Anker muss bereits auf der zu verlinkenden Seite integriert sein.
Auf der Seite muss laut diesem Beispiel also eine Klappbox mit der id="text1" existieren.

Code-Schnipsel

Binden Sie diesen Quellcode in den Fuß der Seite ein, die den Anker beinhaltet:

<script type="text/javascript">
//Anker-Markierung mit Ausklapp-Funktion
//Der Anker muss diese Form haben: /kommunikation/index.html#ankername

var url = window.location.href;
var ankername = url.substring(url.indexOf("#") + 1);

$(document).ready(function() {
if (ankername != "") {
$("#" + ankername).find(".klappbox-text").show("slow");
setTimeout(function() { $("#" + ankername).addClass("portal-farbe-hell"); }, 500);
}
});
</script>


Version 2

Für Klappboxen, in denen nur einzelne Textabschnitte hervorgehoben werden sollen.

Die URL muss folgende Form haben:
http://www.uni-bielefeld.de/Ordner/datei.html?text1#abschnitt1
text1 steht hierbei für den Namen der Box, die sich ausklappen und
abschnitt1 für den Abschnitt, der gehighlightet werden soll.

Wenn Sie keinen Abschnitt definiert haben, der gehighlightet werden und sich lediglich eine Box ausklappen soll, so geben sie einfach einen Anker dieser Form an:
http://www.uni-bielefeld.de/Ordner/datei.html?text1#

Achtung:
Die entsprechenden Anker müssen bereits auf der zu verlinkenden Seite integriert sein.
Auf der Seite muss laut diesem Beispiel also ein Klappbox-Text mit der id="text1" und ein Abschnitt mit der id="abschnitt1" existieren.

 Hier finden Sie eine Beispiel-Seite
      http://www.uni-bielefeld.de/zll/publikationen.html?text1#aktuell_1

Code-Schnipsel

Binden Sie diesen Quellcode in den Fuß der Seite ein, die den Anker beinhaltet:

<script type="text/javascript">
setTimeout(function() {
  //Anker-Markierung mit Ausklapp-Funktion
  //Der Anker muss diese Form haben: /zll/publikationen.html?text1#aktuell_1

  var url = window.location.href;
  var ankername = url.substring(url.indexOf("#") + 1);
  var boxname = url.substring(url.indexOf("?") + 1, url.indexOf("#"));

  if (boxname != "") {
    $("#" + boxname).show("slow");
    if (ankername != "") {
      $("#" + ankername).css("background", "yellow");
      $("html, body").animate({ scrollTop: $("#" + ankername).offset().top }, 'slow');
    }
  }
}, 500);
</script>

Dieser Code funktioniert leider nicht ohne weiteres in der Roxen-Vorschau, da Roxen hinter die View-URL noch einen Ausdruck hinter das Fragezeichen schreibt.
Um also eine Vorschau dieser Anker-Funktion sehen zu können, müssen Sie in der View-URL den hinteren Teil löschen:
http://wwwedit.uni-bielefeld.de/Ordner/datei.html?__sb_force_userid=1234&100231456
und durch Ihren Anker ersetzen:
http://wwwedit.uni-bielefeld.de/Ordner/datei.html?text1#abschnitt1

Bildanzeige (mit einer Lightbox)
Bild-Slider
Interaktive Karte

Sie können eine interaktive Karte (wie im Folgenden abgebildet) in Ihre Seiten einbinden. Wenn Sie auf die Städtenamen klicken, öffnen sich die jeweiligen beschreibenden Texte.

Karte von NRW Bonn Köln Düsseldorf Duisburg Essen Bochum Dortmund Münster Paderborn Bielefeld Osnabrück

Bonn

Text

Köln

Text

Düsseldorf

Text

Duisburg

Text

Essen

Text

Bochum

Text

Dortmund

Text

Münster

Text

Bielefeld

Text

Osnabrück

Text

Code-Schnipsel

<div class="content_full citymap-typ1">
  <h1>Map
  <p>Beschreibung</p>

  <p class="footer" id="stadtklick">Klicken Sie auf die Städte!</p>

  <img alt="Karte von NRW" src="/kommunikation/internet/images/nrwkarte.png" usemap="#NRWmap" id="nrwkarte" width="727" />
  <map id="NRWmap" name="NRWmap">
    <area shape="rect" coords="256,561,303,531" class="cityname" id="bonn" title="Bonn" alt="Bonn" />
    <area shape="rect" coords="230,501,277,474" class="cityname" id="koeln" title="Köln" alt="Köln" />
    <area shape="rect" coords="195,428,288,400" class="cityname" id="duesseldorf" title="Düsseldorf" alt="Düsseldorf" />
    <area shape="rect" coords="204,363,117,338" class="cityname" id="duisburg" title="Duisburg" alt="Duisburg" />
    <area shape="rect" coords="264,340,219,370" class="cityname" id="essen" title="Essen" alt="Essen" />
    <area shape="rect" coords="276,335,336,359" class="cityname" id="bochum" title="Bochum" alt="Bochum" />
    <area shape="rect" coords="322,333,409,319" class="cityname" id="dortmund" title="Dortmund" alt="Dortmund" />
    <area shape="rect" coords="350,194,420,216" class="cityname" id="muenster" title="Münster" alt="Münster" />
    <area shape="rect" coords="554,263,634,283" class="cityname" id="paderborn" title="Paderborn" alt="Paderborn" />
    <area shape="rect" coords="512,190,576,152" class="cityname" id="bielefeld" title="Bielefeld" alt="Bielefeld" />
    <area shape="rect" coords="421,127,500,106" class="cityname" id="osnabrueck" title="Osnabrück" alt="Osnabrück" />
  </map>

  <div class="citytext contentbox gray" id="bonn-text">
    <h2>Bonn</h2>
    <p>Text</p>
  </div>
  <!-- Bonn ende -->

  <div class="citytext contentbox gray" id="koeln-text">
    <h2>Köln</h2>
    <p>Text</p>
  </div>
  <!-- Köln ende -->

  <div class="citytext contentbox gray" id="duesseldorf-text">
    <h2>Düsseldorf</h2>
    <p>Text</p>
  </div>
  <!-- Düsseldorf ende -->

  <div class="citytext contentbox gray" id="duisburg-text">
    <h2>Duisburg</h2>
    <p>Text</p>
  </div>
  <!-- Duisburg ende -->
  <div class="citytext contentbox gray" id="essen-text">
    <h2>Essen</h2>
    <p>Text</p>
  </div>
  <!-- Essen ende -->

  <div class="citytext contentbox gray" id="bochum-text">
    <h2>Bochum</h2>
    <p>Text</p>
  </div>
  <!-- Bochum ende -->

  <div class="citytext contentbox gray" id="dortmund-text">
    <h2>Dortmund</h2>
    <p>Text</p>
  </div>
  <!-- Dortmund ende -->

  <div class="citytext contentbox gray" id="muenster-text">
    <h2>Münster</h2>
    <p>Text</p>
  </div>
  <!-- Paderborn ende -->

  <div class="citytext contentbox gray" id="bielefeld-text">
    <h2>Bielefeld</h2>
    <p>Text</p>
  </div>
  <!-- Bielefeld ende -->

  <div class="citytext contentbox gray" id="osnabrueck-text">
    <h2>Osnabrück</h2>
    <p>Text</p>
  </div>
  <!-- Osnabrück ende -->

</div> <!-- content_full ende -->

Hinweis:

Wenn Sie die IDs der Städte verändern oder weitere Städte hinzufügen, achten Sie darauf, dass der Stadtname in dem <area>-Tag exakt so geschrieben wird wie in dem zugehörigen <div>-Tag weiter unten:
  <area ... id="bonn" />
  <div class="citytext" id="bonn-text"> ... </div>

 

 

Klappbox

Code-Schnipsel

<div class="klappbox contentbox">

  <div class="klappbox-klick">
    <i class="font-icon plus-orange"></i>
    Titel
  </div>

  <div class="klappbox-text">
    <insert file="/kommunikation/internet/lorem-ipsum.html" />
  </div> <!-- klappbox-text ende -->

</div> <!-- klappbox ende -->


Zu Beginn geöffnete Box

Um eine Box beim Laden der Webseite direkt geöffnet darzustellen, fügen Sie der Klappbox die Klasse "open" hinzu:

<div class="klappbox contentbox open">
  ...
</div> <!-- klappbox ende -->

 

 

News-Slider
(Personen-)Reiter / Tabs
Videoanzeige (mit einer Lightbox)
Web-Icons

Vektor-Icons

                                 

Einbindung

Sie können Vektor-Icons auf den Uni-Seiten einbinden, die - im Gegensatz zu Pixel-Grafiken - beim Hereinzoomen in die Seite nicht unscharf werden.

Kopieren Sie einfach den jeweiligen Code-Schnipsel und fügen Sie ihn an gewünschter Stelle ein.

Alle Icons sind in den Farben " orange ", " gruen " und " grau " verfügbar.

Auf die Größe der Icons haben Sie Einfluss über die Klassen " small " und " large ".

Barrierefreiheit

Zur Verbesserung der Barrierefreiheit wird automatisch allen Icons, die die Klasse "font-icon" besitzen, das Attribut [aria-hidden="true"] hinzugefügt.


Zitate

Bei Zitaten, die von <q>-Tags umgeben sind, werden automatisch die Anführungsstriche eingefügt.
<q>Zitat</q>

Pfeile

Pfeil 1 (dreieckig)

  <i class="font-icon pfeil-rechts orange"></i>
<i class="font-icon pfeil-links orange"></i>
<i class="font-icon pfeil-hoch orange"></i>
<i class="font-icon pfeil-runter orange"></i>


Pfeil 2 (umrandet)

  <i class="font-icon pfeil-rechts2 large orange"></i>
<i class="font-icon pfeil-link2 large orange"></i>
<i class="font-icon pfeil-hoch2 large orange"></i>
<i class="font-icon pfeil-runter2 large orange"></i>


Pfeil 3 (umrandet)

  <i class="font-icon pfeil-rechts3 orange"></i>
<i class="font-icon pfeil-links3 orange"></i>
<i class="font-icon pfeil-hoch3 orange"></i>
<i class="font-icon pfeil-runter3 orange"></i>


Längliche Pfeile

  <i class="font-icon pfeil-lang-rechts orange"></i>
<i class="font-icon pfeil-lang-links orange"></i>
<i class="font-icon pfeil-lang-hoch orange"></i>
<i class="font-icon pfeil-lang-runter orange"></i>


Winkel

  <i class="font-icon winkel-rechts orange"></i>
<i class="font-icon winkel-links orange"></i>
<i class="font-icon winkel-hoch orange"></i>
<i class="font-icon winkel-runter orange"></i>


Dokumente

Word

<i class="font-icon fa-file-word-o"></i>

Excel

<i class="font-icon fa-file-excel-o"></i>

Powerpoint

<i class="font-icon fa-file-powerpoint-o"></i>

PDF

<i class="font-icon fa-file-pdf-o"></i>

Bild-Datei

<i class="font-icon fa-file-image-o"></i>

Audio-Datei

<i class="font-icon fa-file-audio-o"></i>

Video-Datei

<i class="font-icon fa-file-video-o"></i>

Code

<i class="font-icon fa-file-code-o"></i>
Verschiedenes

 

Plus

<i class="font-icon plus orange"></i>
 

Minus

<i class="font-icon minus orange"></i>
 

Ausrufezeichen

<i class="font-icon wichtig orange"></i>
 

Fragezeichen

<i class="font-icon fa-question-circle orange"></i>
 

Info

<i class="font-icon info orange"></i>
 

Check

<i class="font-icon fa-check orange"></i>
 

Kreuz

<i class="font-icon fa-times orange"></i>
 

Blitz

<i class="font-icon fa-bolt orange"></i>
 

Stift

<i class="font-icon fa-pencil orange"></i>
 

Anführungszeichen - rechts

<i class="font-icon fa-quote-right orange"></i>
 

Anführungszeichen - links

<i class="font-icon fa-quote-left orange"></i>


Bisher verwendete Web-Icons (Pixelgrafiken)

Hier finden Sie eine Übersicht der verwendeten Web-Icons.

Pfeile
Allgemein
Uni
PDF-Icons

pdf-Dokument
Code:
<img src="/images/buttons/pdf.gif" width="23" alt="PDF-Dokument" />

pdf-Dokument
Code:
<img src="/images/buttons/pdf1.gif" width="17" alt="PDF-Dokument" />

pdf-Dokument
Code:
<img src="/images/buttons/pdf_button.gif" width="35" alt="PDF-Dokument" />
Weitere
Bilder-Galerien