External appearance

The external views of Umantis, e. g. for applicants, employees or external persons may have very differently customized designs. For example, a job market or a public events catalog is often customized to match the design of the company's homepage. There follows a description of how to do these customizations and what you particularly need to look out for when doing them.

Here you will find all the links for Integrating applicant management and Integrating employee management.

Basic settings

See Design.

Integration type

You can design external pages in Applicant management, such as, for example, the job market, or external sites in employee management, such as, e.g. an events catalog, as your own complete page and link from your homepage to this page. However, you can also incorporate the relevant pages of Umantisvia an iFrame in your homepage.

Microsite

The microsite is an independent site that is opened in a separate browser window. You can link to the relevant pages on your homepage. In case of a "microsite", the entire site is with Umantis. Umantisopens in a pop-up window and has the entire page area available (except for the title row, which you can configure as you wish in Umantis). You can customize the header, footer and banner in your solution, and also incorporate your company logo into it.

iFrame

Please note that an integration of pop-ups within an iframe should be completely avoided, or are even not supported. Some browser providers (e.g. Apple) do not allow / do not support this constellation. In addition, this type of integration is also not recommended for usability reasons.

If you integrate Umantis Applicant management into your website using the so-called iFrame (inline frame), you should leave out the header, footer and banner. With an iFrame integration, the navigation, title row and footer (sky blue areas) are up to you (homepage). In the content area you integrate the Umantis solution in a frame.

Since with this type of integration, the pure Umantis pages tend to look very "bare". Therefore, you generally should not have any links directly to the Umantis pages. Hence, you should configure all the links in your e-mail templates and system e-mails so that they point to the appropriate page of your homepage.

Configuring the iFrame for correct scrolling

To ensure that while navigating through the Umantis solution, your website scrolls up automatically, you need to configure your website a little more. With iFrame that you are using to integrate the Umantis solution, the attribute onLoad="self.scrollTo(0,0)" also needs to be set. In the context, it should then look roughly like this:

Automatic height adjustment of the iFrame

So that the height of the iFrame on your website adjusts dynamically to the height of the Umantis solution, a few adjustments to your website are required. Some Javascript experience is required and the following points should ideally be carried out by your appointed website administrator or web designer.

Your website must have jQuery embedded, ideally the latest version. Depending on which jQuery version is used, please note the following points:

For jQuery versions >= 1.9 and <= 3.0, the official jQuery Migrate plugin must also be included.
For jQuery versions >= 2.0, the jQuery Browser plugin must also be included.

Next, an additional script is required on your website. Visit https://github.com/cowboy/jquery-postmessage to retrieve the jquery.ba-postmessage.js- script and integrate it into the header area of your site e.g. <script type="text/javascript" src="jquery.ba-postmessage.js"></script>.
The following script should likewise appear in the header area.

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

Where on the fourth line the https://recruitingapp-xxxx.umantis.com/Vacancies should be replaced by your desired target page, which is then loaded in the iframe. In addition, you can specify at width="980" and / or height="500" your desired mass of the iframe, where the value for height is rather incidental, since this will ultimately always dynamically adapt to the height of the Umantis solution.

In the body area, instead of your own iframe <iframe src="..."></iframe> you have to use the following DIV element (the script from above finally places an iframe in this div): <div id="umantis_iframe"></div>.
Finally, in the design settings of your Umantis solution, the following CSS must be inserted in the General CSS field: div#wrapper { min-height: 0; }.

The next steps are only necessary if you use ad templates to which the iframe of your website should also dynamically adapt:

Include jQuery as well as the jQuery Migrate plugin and/or the jQuery Browser plugin in the HTML files of the ad templates as before.

Also jquery.ba-postmessage.js needs to be included again. The best way to include it is to upload the script as an attachment to the listing and access the script with <script type="text/javascript" src="[document.attachmentX]"></script> (where X represents the unique number of the attachment).
Last but not least, the following script follows in the head section, where instead of $('#container') you need to specify the selector to the outermost (and thus probably potentially highest) HTML element in your ad. Often this is the 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

If the micro-site is responsive, the integration via iFrame should also be responsive. Depending on the integration or the CSS which is applied to the iFrame, accordingly also the "total package" is responsive. The iFrame has to have a relative width (e.g. width: 90%) or respond responsively via media-queries. The "content" of Umantis reacts in iFrame, just like the Umantis solution in the "Browser" window. With respect to responsiveness, the Umantis solution does not notice whether it is directly open in a browser window or in an iFrame. (EXCEPTION: For Dynamic iFrame height adjustment via javascript, see: Automatic height adjustment of the iFrame (new user interface only).

Set up a design

Configure the integration of Umantis

Your header

Here you can upload an HTML file that appears at the top, above the entire Umantis solution. It is essential that this HTML file has the name "header.html", otherwise it will not display. You also need to specify the header height in pixels so that enough space is reserved for it. If you specify too little, only part of the header will appear, while if you specify too much, it may result in an unnecessarily large empty space.
You can access a sample header here: Umantis_onlinehelp_example_header.zip

Your footer

Here you can upload an HTML file that appears below the Umantis solution. It is essential that this HTML file has the name "footer.html", otherwise it will not display. You also need to specify the footer height in pixels so that enough space is reserved for it. If you specify too little, only part of the footer will appear, while if you specify too much, it may result in an unnecessarily large empty space.

Your 404-page

Here you can upload an HTML file that appears to those people who are on the Umantis web system but have called a page which does not exist. It is essential that this HTML file is called "404.html", otherwise it will not display. If you also want to add images to the error file, you need to upload them further down and access them via the "/pubhtml" directory in the "404.html". Assuming the image file is called "fehlerbild.jpg" you can insert the image into the "404.html" with "<img src="/pubhtml/fehlerbild.jpg">".

Notes:

If no further settings have been applied, the error page is always displayed in the "German" language by default. If the error page must also be supported in other languages, the pages must be placed into the corresponding pages and uploaded separately.

New error pages: 403_404.zip

Your 403-page

Here you can upload an HTML file that appears to those people who are on the Umantis web system but have called a page for which they have no permission. It is essential that this HTML file is called "403.html", otherwise it will not display. To insert images, you need to note the same as with the 404 page.

Notes:

If no further settings have been applied, the error page is always displayed in the "German" language by default. If the error page must also be supported in other languages, the pages must be placed into the corresponding pages and uploaded separately.

New error pages: 403_404.zip

Your label

A form in the Umantis solution is divided into two columns, with the left-hand side containing the labels or identifiers of the fields to be filled in on the right-hand side. Here with "Your label", you can change the width of the left-hand column, which is particularly useful if you want to integrate the Umantis solution in an iFrame and the form pages are too wide for your iframe. Please ensure that, when specifying the width, you only give the number in pixels without "px", that is e.g. if you want to set the width to 200 pixels, just enter "200" in the field and not "200px". If there is nothing in the field, the default width of 300 pixels is used.

* Width of the label

Files which can be linked in the header and/or the banner

Here you can upload files that can be linked to in the header, banner, footer and the external design. Note that a maximum of 10 files may be uploaded in each language.

Customize external design

Basic design: Tables and tabs

Check this box if you want to have the corners rounded on tables, tabs, search boxes and various content boxes.

General

Here very general items can be set up which impact on all or very many screens in the external design. For example the background colour for the Umantis banner can be specified (this is the area coloured in red in the screenshot further below). In doing this you can use any valid CSS color value formats. For example, the red in the sample screenshot can be specified in different formats; "red", "#ff0000" and "rgb(255,0,0)" (in each case with no inverted commas) all have the same result.

The font family used for the text in the external design can also be specified. Ensure that font names that include one or more spaces are put between quotes (inverted commas). An example would be: 'Times New Roman'. If you specify more than one font, you need to use commas to separate them (e.g. Arial, Helvetica, Verdana, Geneva, sans-serif). When you do this, there is first a search to see whether the first font (e.g. Arial) is available. If it is not, the next font (e.g. Helvetica) is looked for. This step is repeated until the browser has found a font that it recognizes and can display.

For the font sizes practice has shown that it is beneficial if the same size is used for both input fields, in order to achieve a more consistent appearance. The '12px' (enter it without the quotation marks) size is very popular.

You can enter the Width of solution either as a percentage or in pixels. Ensure that the solution is aligned or stays fixed on the left-hand side of the browser window. If you wish to set the Umantis solution to a fixed width and have it aligned in the centre in the window, you need to set that up further below with general CSS inputs.

* Width of solution

Tabs

Here you can adjust the appearance of the main navigation. Note here that these settings behave differently, depending on whether you have set "rounded corners" or not. If you have not activated this option, all the tab settings apply here. The horizontal line that separates the main navigation area from the content area takes the values that are specified for "Frame above". This also applies if the "rounded corners" option has been activated, however one cannot influence the color and frame strength of the tabs oneself, no matter what one enters.

Left

The color and font specifications used for the links apply to most of the links, but there are a couple of exceptions. For example, it does not impact on the font size of the main navigation. In our experience, you get the best visual appearance if you enter the same font sizes for the links as above for the "Normal font size" or "Small font size". You also have the choice of customizing the main statuses of a link. One of the most popular methods is to keep the font size and color the same everywhere. Only "Color of link on mouse contact" is easily changed so that one can see a difference, besides the change in the cursor, when you roll over a link.

Page title

For the page titles, not only the font color and font size can be specified, but also the strength of the font and the background color. The variations "normal" and "bold" are those most commonly used to specify the strength of the font.

Form title

The settings for the form titles behave in the same way as those for the page titles. The best results are usually obtained when the same settings are applied to the form titles and page titles.

Table header

For the table headers' (column titles') font size, it is again best to use the same specifications as with "Normal font size" or "Small font size".

Chart entry

For the chart headers' font size, it is again best to use the same specifications as with "Normal font size" or "Small font size".

Forms

Here you can set, for example, the width of the form. If you use percentages, the width is calculated relative to the total width of the solution. If you want the form to take up the entire width, set the value to "100%". The form's background colour can also be specified, and the font sizes and alignments of the various input fields and their labels can be changed. If you have not activated the "rounded corners" option you can also customize the form's horizontal and vertical frame. If you want to hide it, enter a frame strength of 0px for both input fields, i.e. for example enter the value "0px solid #000000" for "Frame above" and "Frame right". The settings also have an effect if the "rounded corners" option has been activated, but they will have unattractive results. An exception is if the 0px frame strength is used to hide the frame.

Separation line

In some forms, the input fields are divided into logical groups using separation lines. For these separation lines you can change the background color, font and frame color and the font size.

Linked text in list views

Does not currently have any impact on the external design.

Linked text in list view

Does not currently have any impact on the external design.

Linked subtitle in list views

Here a few of the main links in lists can be displayed differently to normal links. This setting has an impact on, for example, the job market in applicant management. It means that the job title, in particular, can be highlighted.

General CSS

This is really the most important input field if you want to really customize a design very specifically and on a large scale. However, to do this, HTML and CSS skills are required as you need to write CSS into this input field if you want to customize the design.
It is also very useful if you have access to one or two tools. For Internet Explorer there is the "IE Developer Toolbar" (IE9 has it installed by default). If you have not yet installed it, it is best to google "IE Developer Toolbar" and the top hit should take you straight to the correct download page. Once it has been successfully installed into Internet Explorer, the tool can be opened with the F12 key. The equivalent for Firefox is called "Firebug" and can also be opened with F12 once it has been successfully installed. Both tools enable the user to, e.g., find out the page structure or particular class names so that you can use CSS to really control the elements that you want to customize.

Actions

Reset design to default

External appearance

Contents

Basic settings

Integration type

Microsite

iFrame

Configuring the iFrame for correct scrolling

Automatic height adjustment of the iFrame

Responsive iFrames

Set up a design

Configure the integration of Umantis

Your header

Your footer

Your 404-page

Your 403-page

Your label

Files which can be linked in the header and/or the banner

Customize external design

Basic design: Tables and tabs

General

Tabs

Left

Page title

Form title

Table header

Chart entry

Forms

Separation line

Linked text in list views

Linked text in list view

Linked subtitle in list views

General CSS

Actions

Navigation menu

External appearance

Basic settings

Integration type

Microsite

iFrame

Configuring the iFrame for correct scrolling

Automatic height adjustment of the iFrame

Responsive iFrames

Set up a design

Configure the integration of Umantis

Your header

Your footer

Your 404-page

Your 403-page

Your label

Files which can be linked in the header and/or the banner

Customize external design

Basic design: Tables and tabs

General

Tabs

Left

Page title

Form title

Table header

Chart entry

Forms

Separation line

Linked text in list views

Linked text in list view

Linked subtitle in list views

General CSS

Actions

Navigation menu

Search