Externer Auftritt

Die externen Ansichten auf Umantis z.B. für Bewerber, Mitarbeiter oder externe Personen können vom Design her sehr stark angepasst werden. Häufig wird so beispielsweise ein Stellenmarkt oder ein öffentlicher Veranstaltungskatalog an das Design der Unternehmenshomepage angepasst. Im Folgenden wird beschrieben, wie diese Anpassungen vorgenommen werden können und worauf speziell geachtet werden sollte.

Hier finden Sie alle Links für die Einbindung Bewerbermanagement und die Einbindung Mitarbeitermanagement.

Anpassung des Umantis Designs für Externe Ansichten

Sofern Sie eine individuelle Anpassung des Umantis Designs für den Externen Auftritt vornehmen möchten, finden Sie im folgenden Dokument hilfreiche Informationen:

Basiseinstellungen

Siehe Design.

Art der Einbindung

Externe Seiten im Bewerbermanagement, wie z.B. den Stellenmarkt, oder externe Seiten im Mitarbeitermanagement, wie z.B. einen Veranstaltungskatalog, können Sie als eigene komplette Seite gestalten und von Ihrer Homepage auf diese Seite verlinken. Sie können aber auch die entsprechenden Seiten von Umantis über ein iframe auf Ihrer Homepage einbinden.

Microsite

Die Microsite ist eine eigenständige Seite, die in einem eigenen Browser-Fenster geöffnet wird. Sie können auf Ihrer Homepage auf die entsprechenden Seiten verlinken. Im Falle einer "Microsite" liegt die gesamte Seite bei Umantis. Dabeit wird Umantis in einem Pop-up-Fenster geöffnet und hat den gesamten Seitenbereich zur Verfügung (ausser der Titelzeile, die Sie in Umantis beliebig anpassen können). Sie können den Header, den Footer und den Banner in Ihrer Lösung anpassen und in diesem ebenfalls Ihr Firmenlogo einbinden.

iframe

Beachten Sie bitte, dass eine Einbindung von Pop-ups innerhalb eines Iframes unbedingt vermieden werden sollte, bzw. gar nicht unterstützt wird. Einige Browser-Anbieter (bspw. Apple) erlauben es gar nicht / unterstützen diese Konstellation nicht. Zudem ist diese Art der Einbindung aus Usability-Gründen ebenfalls nicht empfohlen.

Wenn Sie das Umantis Bewerbermanagement direkt über das sogenannte iframe (inline frame) auf Ihrer Website einbinden, sollten Sie Header, Footer und Banner weglassen. Im Falle einer iframe-Einbindung liegen Navigation, Titelzeile und Fusszeile (hellblaue Bereiche) bei Ihnen (Ihrer Homepage). Im Content-Bereich (Inhalt) binden Sie in einem Frame die Umantis-Lösung ein.

Da in dieser Art der Einbindung die reinen Umantis-Seiten meist sehr "nackt" daherkommen, sollte kein Link mehr direkt auf die Umantis-Seiten zeigen. Sie sollten daher alle Links in Ihren E-Mail Vorlagen und System-E-Mails so anpassen, dass sie auf die entsprechende Seite Ihrer Homepage zeigen.

Anpassen des iframes für korrektes Scrollen

Damit beim Navigieren durch die Umantis-Lösung auch Ihre Webseite automatisch nach oben scrollt, müssen Sie Ihre Website noch etwas anpassen. Beim iframe, mit dem Sie die Umantis-Lösung einbinden, muss zusätzlich noch das Attribut onLoad="self.scrollTo(0,0)" gesetzt werden. Im Kontext sollte das dann ungefähr so aussehen:

Automatische Höhenanpassung des iFrames

Damit sich die Höhe des iframes auf Ihrer Website dynamisch auf die Höhe der Umantis-Lösung anpasst, sind ein paar Anpassungen auf Ihrer Website nötig. Es wird etwas Javascript-Erfahrung benötigt und die folgenden Punkte sollten im Idealfall von Ihrem zuständigen Website-Administrator oder Webdesigner erledigt werden:

Auf Ihrer Website muss jQuery eingebunden sein, idealerweise die neuste Version. Jenachdem welche jQuery Version verwendet wird, beachten Sie bitte die folgenden Punkte:

Für jQuery Versionen >= 1.9 und <= 3.0 muss zusätzlich noch das offizielle jQuery Migrate plugin eingebunden werden
Für jQuery Versionen >= 2.0 muss zusätzlich noch das jQuery Browser plugin eingebunden werden

Als nächstes wird auf Ihrer Website ein weiteres Script gebraucht. Holen Sie sich auf https://github.com/cowboy/jquery-postmessage das jquery.ba-postmessage.js-Script und binden Sie es im Head-Bereich Ihrer Seite ein, z.B. <script type="text/javascript" src="jquery.ba-postmessage.js"></script>.
Ebenfalls in den Head-Bereich kommt das folgende Script:

<script type="text/javascript">
	$(document).ready(function() {
		var if_height,
		src = 'https://recruitingapp-xxxx.umantis.com/Vacancies',
		iframe = $( '<iframe src="' + src + '" name="' + document.location.href + '" width="980" height="500" frameborder="0" scrolling="no"><\/iframe>' ).appendTo( '#umantis_iframe' );

		$.receiveMessage(function(e){
			
			var h = Number(e.data.replace(/[^0-9\.]+/g,""));

			if (!isNaN( h ) && h > 0 && h !== if_height) {
				/* Height has changed, update the iframe */
				if_height = h;
				iframe.height(h);
			}
		} );
	});
</script>

Wobei auf der vierten Linie das https://recruitingapp-xxxx.umantis.com/Vacancies durch Ihre gewünschte Zielseite ersetzt werden sollte, die dann im iframe geladen wird. Zudem können Sie bei width="980" und/oder height="500" Ihre Wunschmasse des iframes angeben, wobei der Wert für height eher nebensächlich ist, da dieser sich schlussendlich immer dynamisch der Höhe der Umantis-Lösung anpassen wird.

Im Body-Bereich müssen Sie anstatt Ihrem eigenen iframe <iframe src="..."></iframe> das folgende DIV-Element verwenden (das Script von oben platziert schlussendlich ein iframe in dieses div): <div id="umantis_iframe"></div>
Schlussendlich muss bei den Design-Einstellungen Ihrer Umantis-Lösung im Feld Allgemeines-CSS folgendes CSS eingefügt werden: div#wrapper { min-height: 0; }

Die nächsten Schritte sind nur notwendig, falls Sie Inserate-Templates verwenden, auf die sich das iframe Ihrer Website auch dynamisch anpassen soll:

Binden Sie in die HTML-Files der Inserate-Templates wie vorhin jQuery sowie das jQuery Migrate plugin und/oder das jQuery Browser plugin ein.

Auch jquery.ba-postmessage.js muss wieder eingebunden werden. Am besten binden Sie es ein, indem Sie das Script als Attachement zum Inserat hochladen und mit <script type="text/javascript" src="[document.attachementX]"></script> auf das Script zugreifen (wobei X die eindeutige Nummer des Anhangs repräsentiert).
Zu guter letzt folgt im Head-Bereich das folgende Script, wobei anstatt $('#container') der Selektor zum äussersten (und damit wahrscheinlich potentiell höchstem) HTML-Element in Ihrem Inserat angegeben werden muss. Oftmals ist dies das Body-Element $('body'):

<script type="text/javascript">
	$(document).ready(function() {
		var parentiframe_autoresize = window != window.parent;	/* Check if current content is loaded in an iframe */
		if(parentiframe_autoresize) {							/* If so, periodically send content-height to the parent-window/iframe */
			var parent_url = window.name;

			function setCustomerHeight() {
				$.postMessage({ if_height: $('#container').height() }, parent_url, parent );
			};
			setCustomerHeight();
			setInterval(setCustomerHeight, 500);
		}
	});
</script>

Responsive iFrames

Sofern die Mikro-Site responsive ist, sollte auch die Einbindung via iFrame responsive sein. Abhängig von der Einbindung resp. vom CSS, das auf das iFrame angewendet wird, ist dementsprechend auch das "Gesamtpaket" responsive. Das iFrame muss eine relative Breite (z.B. width: 90%) bekommen oder via media-queries responsive reagieren. Der "Inhalt" von Umantis reagiert im iFrame gleich wie die Umantis-Lösung im "Browserfenster". Die Umantis-Lösung merkt bezüglich responsiveness nicht, ob sie direkt in einem Browserfenster offen ist oder in einem iFrame. (AUSNAHME: Dynamische iFrame-Höhenanpassung via Javascript, siehe: Automatische Höhenanpassung des iFrames.

Design einrichten

Navigation

Bewerbermanagement: Einstellungen > Grundeinstellungen > Design > Externer Auftritt
Mitarbeitermanagement: Einstellungen > Grundeinstellungen > Einbindung & Design > Externer Auftritt

Konfiguration der Einbindung von Umantis

Ihr Header

Hier können Sie eine HTML-Datei hochladen, die zuoberst über der gesamten Umantis-Lösung angezeigt wird. Die HTML-Datei muss dabei unbedingt den Namen "header.html" tragen, ansonsten wird diese nicht angezeigt. Ausserdem sollten Sie auch noch die Höhe des Headers in Pixel angeben, damit entsprechend viel Platz dafür reserviert wird. Geben Sie zu wenig an, wird nur ein Teil des Headers angezeigt, geben Sie zu viel an, kann ein unnötig grosser Leerraum entstehen.
Hier haben Sie Zugriff auf ein Beispiel-Header: Umantis_onlinehelp_example_header.zip

Ihr Footer

Hier können Sie eine HTML-Datei hochladen, die unten an der Umantis-Lösung angezeigt wird. Die HTML-Datei muss dabei unbedingt den Namen "footer.html" tragen, ansonsten wird diese nicht angezeigt. Ausserdem sollten Sie auch noch die Höhe des Footers in Pixel angeben, damit entsprechend viel Platz dafür reserviert wird. Geben Sie zu wenig an, wird nur ein Teil des Footers angezeigt, geben Sie zu viel an, kann ein unnötig grosser Leerraum entstehen.

Ihre 404-Seite

Hier können Sie eine HTML-Datei hochladen, die den Nutzern angezeigt wird, die sich auf dem Umantis-Websystem befinden aber eine Seite aufgerufen haben, die nicht existiert. Die HTML-Datei muss dabei unbedingt "404.html" heissen, ansonsten wird diese nicht angezeigt. Wollen Sie zusätzlich noch Bilder in die Fehlerdatei einbinden, so müssen Sie diese weiter unten hochladen und in der "404.html" über das Verzeichnis "/pubhtml" darauf zugreifen. Angenommen die Bilddatei wird "fehlerbild.jpg" genannt, so können Sie das Bild mit "<img src="/pubhtml/fehlerbild.jpg">" in der "404.html" einbinden.

Hinweise:

Falls keine weiteren Einstellungen vorgenommen werden, wird die Fehlerseite standardmässig immer in der Sprache "Deutsch" angezeigt. Falls die Fehlerseite auch in anderen Sprachen unterstützt werden soll, müssen die Seiten separat aufgesetzt und hochgeladen werden.

In folgendem Zip-Ordner finden Sie neu gestaltete, mehrsprachige 403- und 404-Dateien, die Sie in Ihre Umantis-Lösung einbinden können: 403_404.zip
Um neue 403-/404-Seiten zu verwenden, müssen Sie die bestehenden löschen und im Anschluss die neuen hochladen.

Ihre 403-Seite

Hier können Sie eine HTML-Datei hochladen, die den Nutzern angezeigt wird, die sich auf dem Umantis-Websystem befinden aber eine Seite aufgerufen haben, für die sie keine Berechtigung haben. Die HTML-Datei muss dabei unbedingt "403.html" heissen, ansonsten wird diese nicht angezeigt. Für das Einbinden von Bildern muss dasselbe wie für die 404-Seite beachtet werden.

Hinweise:

Falls keine weiteren Einstellungen vorgenommen werden, wird die Fehlerseite default-mässig immer in der Sprache "Deutsch" angezeigt. Falls die Fehlerseite auch in anderen Sprachen unterstützt werden soll, müssen die Seiten separat aufgesetzt und hochgeladen werden.

In folgendem Zip-Ordner finden Sie neu gestaltete, mehrsprachige 403- und 404-Dateien, die Sie in Ihre Umantis-Lösung einbinden können: 403_404.zip
Um neue 403-/404_Seiten zu verwenden, müssen Sie die bestehenden löschen und im Anschluss die neuen hochladen.

Ihr Label

Ein Formular in der Umantis-Lösung ist in zwei Spalten aufgeteilt, wobei die linke Seite die Labels resp. Bezeichner der (auf der rechten Seite) auszufüllenden Felder enthält. Hier können Sie bei "Ihr Label" die Breite der linken Spalte anpassen. Dies ist vor allem nützlich, wenn Sie die Umantis-Lösung in ein iframe einbinden möchten und die Formular-Seiten zu breit für das iframe sind. Bitte beachten Sie, dass Sie bei der Angabe der Breite nur die Zahl in Pixeln angeben ohne "px" - Beispiel: Wenn Sie die Breite auf 200 Pixel festsetzen möchten, geben Sie nur "200" in das Feld ein (und nicht "200px"). Falls nichts in dem Feld hinterlegt ist, wird die Standardbreite von 300 Pixel verwendet.

* Breite der Labels

Dateien, auf welche im Header und/oder Banner verwiesen werden kann

Hier können Sie Dateien hochladen auf welche im Header, Banner, Footer und dem externen Design verwiesen werden. Beachten Sie, dass pro Sprache maximal bis zu 10 Dateien hochgeladen werden können.

Externen Auftritt gestalten

Grunddesign: Tabellen und Reiter

Falls Sie bei Tabellen, Reitern, Suchboxen und diversen Inhaltsboxen die Ecken abgerundet haben möchten, suchen Sie im Abschnitt Allgemeines CSS den Namen des Tags, das Sie abrunden möchten sowie das dazugehörige DIV und runden Sie die Ecken ab, indem Sie Folgendes (ohne Anführungszeichen) eintragen: "div.xxx {border-radius: 5px !important;} xxx=klasse/element name"

Generell

Hier lassen sich ganz generelle Sachen einstellen, die auf alle oder sehr viele Screens des externen Designs Auswirkungen haben. So lässt sich zum Beispiel die Hintergrundfarbe der Webseite einstellen. Dabei können Sie sämtliche gültige CSS-Farbwertformate benutzen. So lässt sich bspw. Rot in verschiedenen Formaten angeben: "red", "#ff0000" und "rgb(255,0,0)" (jeweils ohne Anführungszeichen), wobei alle Formate zum selben Ergebnis führen.

Des Weiteren kann die Schriftfamilie angegeben werden, welche für den Text des externen Designs verwendet wird. ( Informationen zur Schriftart) Vergewissern Sie sich, dass Schriftarten, die ein oder mehrere Leerzeichen enthalten, in Quotes (Hochkommata) eingekapselt werden. Ein Beispiel dafür: 'Times New Roman'. Falls Sie mehrere Schriftarten angeben, müssen Sie die jeweiligen Schriftarten mit Kommas voneinander trennen (z.B. Arial, Helvetica, Verdana, Geneva, sans-serif). Dabei wird zuerst überprüft, ob die erste Schriftart (z.B. Arial) vorhanden ist. Sollte dies nicht der Fall sein, wird anschliessend überprüft, ob die nächste Schriftart (z.B. Helvetica) vorhanden ist. Dieser Schritt wird solange wiederholt, bis der Browser eine Schriftart gefunden hat, die er kennt und darstellen kann.

Bei den Schriftgrössen hat sich in der Praxis gezeigt, dass es von Vorteil ist, wenn für beide Eingabefelder die gleiche Grösse verwendet wird, um ein konstanteres Erscheinungsbild zu gewährleisten. Sehr beliebt ist dabei die Grössenangabe '12px' (ohne Anführungszeichen eingeben).

Bei der Breite der Lösung können Sie sowohl Prozent- als auch Pixel-Angaben machen. Beachten Sie bitte, dass die Lösung an der linken Seite des Browserfensters ausgerichtet wird resp. kleben bleibt. Wollen Sie die Umantis-Lösung auf eine fixe Breite setzen und zentriert im Fenster ausgerichtet haben, so müssen Sie dies mit allgemeinen CSS-Angaben weiter unten bewerkstelligen.

* Breite der Lösung

Links

Die Farb- und Schriftgrössen-Angaben, die an dieser Stelle für die Links angegeben werden, gelten mit einigen Ausnahmen für alle Links Ihrer Lösung. Eine dieser Ausnahmen stellt die Schriftgrösse der Hauptnavigation dar, die davon nicht beeinflusst wird. Erfahrungsgemäss erhalten Sie die optisch ansprechendste Darstellung, wenn Sie für die Links die gleichen Schriftgrössen eingeben wie weiter oben für die "Normale Schriftgrösse" resp. "Kleine Schriftgrösse". Sie haben ausserdem die Möglichkeit, die wichtigsten Zustände eines Links individuell anzupassen. Eine der beliebtesten Methoden ist dabei, die Schriftgrösse und Farbe überall gleich zu halten. Nur die "Farbe beim Mauskontakt" sollte leicht angepasst werden, damit – neben der Veränderung des Mauszeigers – ein Unterschied zu erkennen ist, wenn über einen Link "gefahren" wird.

Menüs

Sie können hier die Schriftfamilie, -farbe und -grösse der Menüs bestimmen und auch die Texttransform (uppercase, lowercase oder normal) für das Haupt- und Sekundärmenü einstellen.

Überschriften

Bei den Überschriften können Sie sowohl für die Seiten- als auch für die Zwischenüberschriften die Schriftfamilie, -grösse und -farbe einstellen. Des Weieren können Sie für die "Seitenüber- bzw. Zwischenschrift Auszeichnung" (Schriftstärke) angeben, ob diese "bold" oder "normal" sein soll.

Tabellenkopf

Für die Schriftgrösse der Tabellenköpfe (Spaltentitel) verwenden Sie am besten wieder die gleichen Angaben wie bei "Normale Schriftgrösse" resp. "Kleine Schriftgrösse".

Tabelleninhalt

Für die Schriftgrösse der Tabelleninhalte verwenden Sie am besten wieder die gleichen Angaben wie bei "Normale Schriftgrösse" resp. "Kleine Schriftgrösse".

Formulare

An dieser Stelle können Sie die Hintergrundfarbe der Formulare und auch die (Schrift-)Farbe der Formular-Buttons einstellen. Des Weiteren können Sie bestimmen, welche (Schrift-)Farbe bei Mauskontakt angezeigt werden soll. Grundsätzlich wird aus optischen und technischen Gründen empfohlen, für die Formular- und Seitenüberschriften dieselben Einstellungen vorzunehmen.

Allgemeines CSS

Wollen Sie Ihr Design noch spezifischer und umfangreicher bearbeiten, können Sie an dieser Stelle entsprechende CSS-Angaben eintragen. Beachten Sie bitte, dass es hierfür gewisse Kenntnisse in den Bereichen HTML und CSS benötigt, um Fehler in den Design-Einstellungen zu vermeiden.
Es ist hilfreich, wenn Sie dabei gewisse Tools zur Hilfe nehmen: Beispielsweise gibt es für die Einstellungen im Internet Explorer die "IE Developer Toolbar", wobei die IE9 bereits standardmässig installiert ist. Falls Sie noch keine derartige Toolbar installiert haben, wird empfohlen, diese auf einer entsprechenden Internetseite (leicht auffindbar durch simples "googeln") herunterzuladen und zu installieren. Nach erfolgreicher Installation lässt sich das Tool im Internet Explorer mit der Taste "f12" aufrufen; für den Firefox-Browser heisst das äquivalente Tool "Firebug", welches sich ebenfalls nach erfolgreicher Installation mit "f12" aufrufen lässt. Beide Tools erlauben es, bspw. die Seitenstruktur oder bestimmte Klassen-Namen herauszufinden, wodurch mit den CSS-Angaben diejenigen Elemente angesteuert werden können, welche angepasst werden sollen.

Aktionen

Design auf Standard zurücksetzen

CSS- Befehl Beispiele

Linie unter der Überschrift in den Containern löschen

div.mainblock_textblock {
border-top: 1px none #aaa;
line-height: 2.2em;
margin-bottom: 0;
min-height: 25px;
}

Linie unter der AKTION - Überschrift im Aktionsblock löschen

div.actionbar_title, div.actionbar_title_noborder {
border-bottom: 3px none #ccc;
}

Relevante Seiten

Externer Auftritt

Inhaltsverzeichnis

Anpassung des Umantis Designs für Externe Ansichten

Basiseinstellungen