Überblick

Shortcuts


Style-Elemente

Hier finden Sie unseren Styleguide: Vordefinierte Style-Elemente, die Sie "out of the box" nutzen können.


Web-Icons

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

Allgemeine Hinweise

STRG + F5

Ihre Seite sieht zerschossen aus oder Sie haben etwas in Ihrem Stylesheet geändert, aber die Änderungen werden nicht angezeigt?
Oft liegt das am Browser-Speicher. Wenn Sie die Tastenkombination STRG + F5 drücken lädt sich der Browser-Cache nach und Ihre Änderungen werden sichtbar.

Sollte das jedoch auch nicht helfen, wenden Sie sich gerne an die Web-Entwicklung, vielleicht können wir weiterhelfen.
internet@uni-bielefeld.de

Fragen, Anregungen, Verbesserungsvorschläge?

Vermissen Sie eine jQuery-Funktion? Ist eine Anleitung unverständlich? Brauchen Sie Hilfe beim ersten Einbinden in Ihre Seiten?

Melden Sie sich gerne in der Web-Entwicklung bei
Manuela Ewers
manuela.ewers@uni-bielefeld.de

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
Styleguide

Übersicht der aktuellen Style-Elemente


Hier finden Sie eine durchsuchbare Auflistung aller aktuellen Style-Elemente für das 2017er Template. Viele der Elemente sind auch in früheren Templates nutzbar (außer JavaScript-Elemente).

Hinweis: Vereinzelte jQuery-Animationen funktionieren in dem iframe-Popup nicht 100%ig korrekt. Zur korrekten Ansicht rufen Sie die entsprechende Anleitung über das Icon auf der rechten Seite in einem neuen Tab auf.

Elemente durchsuchen:
  • A bis Z Liste
    Mit der A bis Z Liste können Sie Inhalte alphabetisch sortiert präsentieren.
    Beim Anklicken eines Index-Buchstabens, werden lediglich die Einträge dieses Buchstabens angezeigt.
  • Anker mit Ausklapp- und Highlight-Funktion
    Sie möchten von einer anderen Seite aus direkt auf einen bestimmten Absatz in einer Klappbox verweisen?
    Dies ist mit der AnkerKlapp-Funktion möglich.
  • Automatische ordnerbasierte Bilder-Galerie
    Sie haben eine Reihe von Bildern, die Sie gerne als Galerie auf Ihrer Webseite darstellen lassen möchten?
    Dies ist automatisiert möglich, indem Sie lediglich alle Bilder in einem Ordner ablegen und den entsprechenden Code-Schnipsel in der Seite einbinden.
  • Bildanzeige / Bild-Popup (mit einer Lightbox)
    Wenn Sie Bilder auf Ihren Webseiten haben, können diese in einem größeren Format als Popup geöffnet werden.
    Mehrere Bilder können in einer Art Galerie zusammengefasst und durchgeklickt werden.
  • Bilder im Fließtext (mit Bildunterschrift)
  • Bild-Boxen
    Diese Bild-Boxen finden Sie häufig auf Portal-Startseiten.
  • Bild-Slider
    Ein kleiner Bild-Slider für Inhaltsseiten.
  • Content-Boxen
    Mit Content-Boxen können Sie die Inhalte Ihrer Webseite übersichtlicher struktrieren.
  • Content-Spalten
    Contentspalten können Sie beispielsweise in den Startseitenboxen für Portale verwenden.
    Dadurch vermeiden Sie, dass Textzeilen zu lang und somit schlechter lesbar werden.
  • Fancybox - Siehe Bildanzeige
  • Galerie - Siehe Bildanzeige oder Bild-Slider
  • Glossar - Siehe A bis Z Liste
  • Interaktive Karte
    Dahinter verbirgt sich eine NRW-Karte. Bei Klick auf eine der Städte wird eine Inhaltsbox sichtbar.
    Die NRW-Karte kann bei Bedarf auch mit einer anderen Grafik ausgetauscht werden. Hierfür müssen dann ebenso die Koordinaten der <area>-Tags angepasst werden.
  • Kartei - Siehe A bis Z Liste
  • Klappbox
    Mit Klappboxen können Sie die Inhalte Ihrer Webseite übersichtlicher struktrieren.
    Durch Klicken werden Abschnitte aus- oder eingeklappt.
  • Kopfbild-Slider
    Auch im Kopfbereich Ihrer Webseite kann ein Slider eingebaut werden.
    Hier haben Sie sogar die Möglichkeit zwischen verschiedenen Navigationsarten zu wählen (Pfeile, Index-Punkte,..).
  • Lightbox - Siehe Bildanzeige
  • Listen
    Das 2017er-Template bietet verschiedene Styles für Listen an.
    Beispielsweise können der jeweiligen Liste verschiedene Listen-Icons vorangestellt werden.
  • News-Slider
    Wie auch die Uni.Blickpunkte auf der Startseite, können Sie einzelne Bild&Text-Beiträge in einem News-Slider darstellen lassen.
  • Personen-Boxen
    Diese Boxen sind zur Darstellung mehrerer Team-Mitglieder gedacht.
    Für ein optimales Ergebnis sollten die Fotos das gleiche Format haben.
    Zur Darstellung einzelner Mitarbeiter: Siehe Visitenkarte.
  • Personen-Reiter - Siehe Reiter / Tabs
  • PUB-Einbindung
    Es gibt die Möglichkeit Ihre PUB-Einträge über einen Code-Schnipsel auf Ihrer Webseite einzubetten.
    Die Einträge werden dann automatisch aktualisiert, wenn Sie etwas im PUB ändern oder hinzufügen. Dadurch sparen Sie sich die manuelle Pflege der Inhalte.
  • Reiter / Tabs
    Um viele Informationen möglichst übersichtlich darzustellen, können Sie die "Reiter" verwenden.
    Beispielsweise eignen sie sich gut für eine Personen-Detailseite mit Foto, Kontaktdaten, Lebenslauf, Publikationen, etc.
  • RSS-Feeds
    Sie haben einen BIS-Blog und möchten den entsprechenden RSS-Feed in Ihre Webseite einbetten? So funktioniert's.
  • Startseiten-Boxen - Siehe Bild-Boxen
  • Seitenboxen
    Sie haben Inhalte, die nicht im Haupttext untergehen sollen?
    Beispielsweise Wichtige Hinweise, Download-Links, andere kurze Texte. Diese können Sie in einer linken (direkt unter dem Menü) oder rechten Seitenbox darstellen.
  • Tabellen
    Tabellen sind nur zur übersichtlichen Darstellung tabellarischer Inhalte gedacht. Nicht zur Gestaltung von Bild- und Text-Elementen.
    Bitte sehen Sie davon ab Tabellen als Gestaltungs-Element zu benutzen, da diese nur sehr bedingt zur Darstellung auf mobilen Endgeräten geeignet sind.
  • Testimonial Bubbles (Personen)
    Die Testimonial Bubbles sind ebenso wie die Personen-Boxen gut geeignet für die Darstellung von mehreren Team-Mitgliedern.
    Das Foto wird per CSS automatisch rund angezeigt (auch wenn das Ursprungsbild ein anderes Format hat).
    Die Bubbles gibt es in zwei verschiedenen Varianten. Für die Darstellung einzelner Mitarbeiter: Siehe Visitenkarte.
  • Videoanzeige / Video-Popup (mit einer Lightbox)
    Wie auch für die Bildanzeige kann man zur Videoanzeige eine Lightbox verwenden. Das bedeutet, dass sich beim Klick auf ein Vorschaubild ein Popup öffnet und das Video im Vollbild-Format abgespielt wird.
    Auch Video-/Bilder-Galerien können angelegt werden.
  • Visitenkarten (Personen)
    Die Visitenkarten können zur Darstellung einzelner oder mehrerer Team-Mitglieder verwendet werden.
  • Web-Icons
    Um einige Ihrer Inhalte hervorzuheben, können Sie Web-Icons verwenden.
  • Zebrastreifen
    Hier hinter verbirgt sich die Färbung des Hintergrunds jedes zweiten Elements einer Liste, Tabelle, Content- oder Klappbox zur besseren Unterscheidbarkeit.


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
JavaScript

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