Ü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

Listen

Liste mit Pfeilen als Auflistungszeichen

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


Listenboxen

Zur übersichtlichen Auflistung mehrerer Menüpunkte steht die Listenbox zur Verfügung.

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>


Listenboxen schmal (links und rechts)

Die schmalen Listenboxen können Sie sowohl einzeln als auch zu mehreren neben- & untereinander im Fließtext einbauen.
Wie Sie mehrere Boxen nebeneinander anordnen sehen Sie weiter unten.

Linke Box

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 portal-farbe-hell float-left">
  <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>


Rechte Box

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 portal-farbe-hell float-right">
  <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>


Mehrere Listenboxen

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

Code-Schnipsel:

<div class="flexcontainer">

  <div class="listenbox 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="listenbox 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="listenbox 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="listenbox 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>


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




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.



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">
    1.Box
  </div>

  <div class="infoboxrechts">
    2.Box
  </div>

</div>


Tabellen

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

Überschrift 1 - Farbwert: #d4d0c8Überschrift 2
Spalte 1, Zeile 1 - Farbwert: #EFF3F7 Spalte 2, Zeile 1
Spalte 1, Zeile 2 Spalte 2, Zeile 2

 

Code-Schnipsel

<table cols="2" cellspacing="2" cellpadding="8" align="center">
  <tbody>
    <tr class="tabellenkopf">
      <th>Überschrift 1</th>
      <th>Überschrift 2</th>
    </tr>
    <tr class="tabelle">
      <td>Spalte 1, Zeile 1</td>
      <td>Spalte 2, Zeile 1</td>
    </tr>
    <tr class="tabelle">
      <td>Spalte 1, Zeile 2</td>
      <td>Spalte 2, Zeile 2</td>
    </tr>
  </tbody>
</table>

 

Alternative Tabelle

Überschrift / Titel

 

Code:

<div class="contentbox">
  <h1>Überschrift / Titel</h1>
  <table cellpadding="4" cellspacing="2" width="100%" class="print_table">
    <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>
  </table>
</div>

 

Startseiten-Boxen
Weitere Elemente

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

 

NEU

Die Klassen "portal-farbe" und "portal-farbe-hell" wurden neu eingeführt.
Diese funktionieren mit hoher Wahrscheinlichkeit noch nicht in allen Portal-Templates.

So schalten Sie sie frei

Achten Sie darauf, dass die beiden fett gedruckten Zeilen in Ihrem Template zu finden sind:

<style>
  h1 { border-bottom: 4px solid <xsl:value-of select="$portal-color"/>; }
  h2 { border-bottom: 2px dashed <xsl:value-of select="$portal-color"/>; }
  .portal-farbe { background-color: <xsl:value-of select="$portal-color"/> !important; }
  .portal-farbe-hell { background-color: <xsl:value-of select="$portal-color2"/> !important; }

  .treeview li, ul.main-menu-ul li { border-bottom-color: <xsl:value-of select="$portal-color"/> !important; }
  ul.main-menu-ul li.active a .menu-point, ul.sub-menu-ul li.active a .menu-point { background-color: <xsl:value-of select="$portal-color"/> !important; }
  #kopfbild #portal-slider_pag a.selected, .pagination a.selected { background: <xsl:value-of select="$portal-color"/> !important; }
  .Button { border-color: <xsl:value-of select="$portal-color"/>; }

  [...]

</style>

Zudem können Sie in der Config-Datei die Portal-Haupt- und Nebenfarbe angeben:

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

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


Allgemeine Style-Klassen und ihre CSS-Anweisungen

Unter anderem sind die folgenden Style-Klassen im neuen Portal-Template integriert und auf all Ihren Portal-Seiten nutzbar:

Für Float-Elemente

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

Textfarben

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

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; }
<div class="contentbox"> <a class="big-link" href="#"> Lässt einen Link wie die Überschrift einer Klappbox aussehen </a> </div>
.noborder { border: none; }
<div class="boxen noborder"> Löscht alle vordefinierten Rahmen dieses Elements. (Siehe Startseitenboxen) </div>
jQuery

Interaktive Elemente (jQuery-Animationen)

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.

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.

Information für Web-Admins

Die jQuery-Dateien befinden sich unter

/javascript/jquery.js
und
/javascript/jquery.min.js


Klappbox

Klicken Sie auf diese Klappbox

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="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 -->

 

 

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 NRWBonnKölnDüsseldorfDuisburgEssenBochumDortmundMünsterPaderbornBielefeldOsnabrü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>

 

 

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 ein Klappbox-Text 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

Web-Icons

Vektor-Icons

Sie können Vektor-Icons auf den Uni-Seiten einbinden, die anders als Pixel-Grafiken beim Hereinzoomen in die Seite nicht unscharf werden.
Kopieren Sie einfach den jeweiligen Code und fügen Sie ihn an gewünschter Stelle ein. Die Icons sind mindestens in Orange, in der Regel aber auch in Grau und Grün verfügbar.

                                 

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


Erläuterung zur Einbindung

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

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>
 

Anführungszeichen - rechts

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

Anführungszeichen - links

<i class="font-icon fa-quote-right 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

Bilder-Galerien

Folgende Möglichkeiten haben Sie, Bilder auf Ihren Seiten darzustellen


Lightbox-Bildanzeige

Die Scripte für die Lightbox-Bildanzeige sind bereits im Portal-Template integriert.

So benutzen Sie die Bildanzeige
<a href="/images/template_2009/kopfbilder1/87.jpg" data-lightbox="bildgruppe" data-title="Bild-Titel"> <img src="/images/template_2009/kopfbilder1/87.jpg" alt="Beschreibender Bildtext" width="242" /></a>

Beispiel - Klicken Sie auf das Bild:
Beschreibender Bildtext

Einen Bild-Titel angeben (data-title Attribut)

Das data-title Attribut ist nur in Lightbox2-master verfügbar. Überprüfen Sie daher, welches Lightbox-Script in Ihrem Template vorhanden ist und ersetzen Sie es gegebenenfalls durch das neuere:

<!-- Lightbox2 für Bildanzeige -->
<script src="/javascript/lightbox2/js/lightbox-2.6.min.js"></script>
<link href="/javascript/lightbox2/css/lightbox.css" rel="stylesheet" />

ersetzen durch:

<!-- Lightbox2-master für Bildanzeige -->
<script src="/javascript/lightbox2-master/js/lightbox.min.js"></script>
<link href="/javascript/lightbox2-master/css/lightbox.css" rel="stylesheet" />


Bilder-Galerie

Hier erfahren Sie wie Sie mit Roxen und Lightbox ganz schnell eine Bildergalerie zaubern können:

Lightbox-Bildergalerie


Kleiner Bild-Slider für Inhaltsseiten

Code-Schnipsel

Binden Sie diesen Quellcode in Ihrer Seite ein:

<div class="list_carousel breite484">
    <ul id="bildslider">

      <li>
        <img src="/Universitaet/Einrichtungen/Pressestelle/Informationsmanagement/Help/Templates/portale/images/1.jpg" width="484" class="foto" />
        <div class="copy">Foto: Universität Bielefeld</div>
        <div class="fototext">
          Die Universität Bielefeld wurde 1969 mit explizitem Forschungsauftrag und hohem Anspruch an die Qualität einer forschungsorientierten Lehre gegründet.
        </div>
      </li>

      <li>
        <img src="/Universitaet/Einrichtungen/Pressestelle/Informationsmanagement/Help/Templates/portale/images/2.jpg" width="484" class="foto" />
        <div class="copy">Foto: Universität Bielefeld</div>
        <div class="fototext">
          Heute umfasst sie 13 Fakultäten, die ein differenziertes Fächerspektrum in den Geistes-, Natur-, Sozial- und Technikwissenschaften abdecken.
        </div>
      </li>

      <li>
        <img src="/Universitaet/Einrichtungen/Pressestelle/Informationsmanagement/Help/Templates/portale/images/3.jpg" width="484" class="foto" />
        <div class="copy">Foto: Universität Bielefeld</div>
        <div class="fototext">
          Mit rund 24.000 Studierenden in 115 Studienangeboten, ca. 2.750 Mitarbeiterinnen und Mitarbeitern, gehört sie zu den mittelgroßen Universitäten in Deutschland.
        </div>
      </li>

    </ul>

    <!-- Slider-Navigation -->
    <a class="prev" id="bildslider_prev" href="#"><span>prev</span></a>
    <a class="next" id="bildslider_next" href="#"><span>next</span></a>
    <div class="pagination" id="bildslider_pag"></div>

    <div class="clear"></div>

</div> <!-- list_carousel Ende -->

 

Wenn Sie mehr als einen Bilder-Slider in Ihre Seite integrieren wollen, müssen Sie zusätzlichen jQuery-Code im Kopf der Seite einfügen:

+ Quellcode für weitere Bild-Slider

<script>
  jQuery( document ).ready(function( $ ) {

    //Scrolled by user interaction
    $("#weiterer-slider").carouFredSel({
      circular: true,
      infinite: true,
      scroll: {
        items: 1,
        duration: 2000,
        pauseOnHover: true
      },
      auto: true,
      prev: {
        button: "#weiterer-slider_prev",
        key: "left"
      },
      next: {
        button: "#weiterer-slider_next",
        key: "right"
      },
      pagination: "#weiterer-slider_pag"
    });

  });
</script>


<div class="list_carousel breite484">
    <ul id="weiterer-slider">

      <li>
        <img src="/Universitaet/Einrichtungen/Pressestelle/Informationsmanagement/Help/Templates/portale/images/Fotostrecke_Geniale_6.jpg" width="484" class="foto" />
        <div class="copy">Foto: Universität Bielefeld</div>
        <div class="fototext">
          Die Universität Bielefeld wurde 1969 mit explizitem Forschungsauftrag und hohem Anspruch an die Qualität einer forschungsorientierten Lehre gegründet.
        </div>
      </li>

      <li>
        <img src="/Universitaet/Einrichtungen/Pressestelle/Informationsmanagement/Help/Templates/portale/images/Fotostrecke_Geniale_12.jpg" width="484" class="foto" />
        <div class="copy">Foto: Universität Bielefeld</div>
        <div class="fototext">
          Heute umfasst sie 13 Fakultäten, die ein differenziertes Fächerspektrum in den Geistes-, Natur-, Sozial- und Technikwissenschaften abdecken.
        </div>
      </li>

      <li>
        <img src="/Universitaet/Einrichtungen/Pressestelle/Informationsmanagement/Help/Templates/portale/images/Fotostrecke_Geniale_1.jpg" width="484" class="foto" />
        <div class="copy">Foto: Universität Bielefeld</div>
        <div class="fototext">
          Mit rund 24.000 Studierenden in 115 Studienangeboten, ca. 2.750 Mitarbeiterinnen und Mitarbeitern, gehört sie zu den mittelgroßen Universitäten in Deutschland.
        </div>
      </li>

    </ul>

    <!-- Slider-Navigation -->
    <a class="prev" id="weiterer-slider_prev" href="#"><span>prev</span></a>
    <a class="next" id="weiterer-slider_next" href="#"><span>next</span></a>
    <div class="pagination" id="weiterer-slider_pag"></div>

    <div class="clear"></div>

</div> <!-- list_carousel Ende -->