Personal tools

External appearance

From Onlinehelp

Jump to: navigation, search

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.

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 umantis via 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. umantis opens 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

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.

Example of the adjustment of links with iFrame (Manor)

In the Manor example, the job market was integrated in an iFrame on the home page: http://www.manor.ch/de/stellenangebot/stellen-my-jobs.html On umantis' pure content job market page, one can hardly detect that this is the Manor job market, because most of the design elements and the logo are contained on the homepage itself: https://recruitingapp-1583.umantis.com/Jobs/1?CompanyID=&Reset=G

Accordingly, the link in the password forgotten e-mail should not point to the umantis website, as it does in the template, but to the Manor homepage with relevant umantis content. This is implemented differently at the customer premises depending on the CMS or homepage design. In most cases, the link to the umantis job market is passed as a parameter in the URL.

In the Manor case, in the e-mails to the applicants, for example, the link to set a new password has been changed from:

https://[Special.Hostname]/SelfService/Passwordforgotten?customer=[Special.Customer]&CompanyID=[Position.CompanyID]

to:

http://www.manor.ch/de/jobs-umantis.html?umantisUrl=/SelfService/Passwordforgotten?customer=[Special.Customer]&CompanyID=[Position.CompanyID]

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:

<iframe src="https://recruitingapp-123.umantis.com/Jobs/1" width="123" height="123" name="myIframe" onLoad="self.scrollTo(0,0)"></iframe>

Automatic height adjustment of the iFrame (new interface only)

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.

  • jQuery must be integrated into your website. For jQuery versions >= 1.9 the official jQuery Migrate plugin must also be integrated.
  • 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. <code><script type="text/javascript" src="jquery.ba-postmessage.js"></script></code>.
  • The following script should likewise appear in the header area.
<script type="text/javascript">
	$(document).ready(function() {
		var if_height, src = 'http://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( /.*if_height=(\d+)(?:&|$)/, '$1' ) );

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

Whereby http://recruitingapp-xxxx.umantis.com/Vacancies in the fourth line should, of course, be replaced by your desired destination page, which is then loaded in iFrame. In addition, with <code>width="980"</code> and/or <code>height="500"</code> you can of course specify your desired dimensions for the iFrame, whereby the value for height is somewhat incidental as ultimately this is always dynamically adjusted to the height of the umantis solution.

  • In the body area, instead of you own iFrame <iframe src="..."></iframe> you must use the following DIV element (the script above ultimately places an iFrame in this div): <code><div id="umantis_iframe"></div></code>
  • In the end, all that is required is that the following CSS be inserted in the General-CSS field in the Design Settings of your umantis solution: <code>div#wrapper { min-height: 0; }</code>

The next steps are required only if you are using advertisement templates to which the iFrame of your website must adjust dynamically.

  • As before, integrate jQuery into the HTML file of the advertisement template, and if jQuery >= 1.9 integrate the jQuery Migrate plugin.
  • jquery.ba-postmessage.js must also be integrated once again. The best method is to integrate it be uploading the script as an attachment to the advertisement and to access the script with <code><script type="text/javascript" src="[document.attachementX]"></script></code> (whereby X represents the unique attachment number).
  • Last but not least, the following script goes in the Head area, whereby instead of <code>$('#container')</code> the selector for the outermost (and therefore probably the highest) HTML element in your job advertisement must be stated. This is often the Body element <code>$('body')</code>:
<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 banner

Here you can upload an HTML file that appears to the left of the umantis solution. It is essential that this HTML file has the name "banner_left.html", otherwise it will not display. You also need to specify the banner width in pixels so that enough space is reserved for it.

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.

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

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

Design BreiteDerLabels DE.JPG

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

Design Generell.png

* 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
In other languages