1. Implementing Recruiting
  2. Configure a Career Site Theme

Configure a Career Site Theme

You can personalize the look and feel of external career sites so it aligns with your organization's branding. You can personalize elements such as logos, background image, text, fonts, colors, custom header, footer, and CSS.

These configuration options are available in the Theme tab. As soon as you configure a theme element, it’s shown right away on the page preview. It will be visible on the active career site as soon as you publish it.

Option

Description

Logo

You can use different images as logo for mobile and desktop devices.

To use a logo on a career site, the logo must first be uploaded to any publicly accessible website. Then, you can add the image URL in the Insert URL for desktop logo field. The logo is displayed in the left corner of the career site. The logo allowed size is 150 x 40 pixels. If the logo is larger, it's reduced to fit the allowed size. If the logo is smaller, it's not stretched to fit the allowed size.

If you don't add an image for Social Sharing, the desktop logo is used when jobs are shared in social channels. For optimal experience when sharing job links in social media sites, the majority of social platforms require aspect ratio of 1.9:1 for images. If your logo will be used for social sharing, make sure you verify the aspect ratio recommended by the platforms you use before uploading the image. .
Global Header

You can create different header design styles that can be used globally or on specific pages of the career site.

  • Header Options: You can select the horizontal or hamburger navigation
  • Hide Logo: When you select this option, the logo isn’t displayed.
  • Hide I'm an employee button icon: When you select this option, the icon next to the text "I am an Employee" isn’t displayed.
  • I'm an Employee Text: Enter the text you want to display. Leave the field blank if you don’t want to display any text.
  • Hide profile button icon: When you select this option, the Manage Profile icon isn’t displayed.
  • Profile Text: Enter the text you want to display. Leave the field blank if you don’t want to display any text.
    Note: If you enter custom text in the I'm an Employee Text and Profile Text fields, you can then translate the text in the Translations tab.

Background Image

You can upload a URL for a background image. The background image appears on the career site home page. It's applied to any screen resolution. The ideal size is 2560 x 1600 pixels. The file should not exceed 1 MB. If the file is larger, use a tool to compress it.

In minimal template, background image applies to career site home page only. Background color of career site search page can be defined using Theme Color 4 (for example #ffffff).

Branding Text

You can enter a branding text. The text appears on the career site home page. It's the first thing candidates see when they access the career site.

Global Fonts

You can select the font for all pages of the career site. A predefined list of fonts is available.

To add a new font, click Add, enter the font name, and add a woff URL or woff2 URL. For example:

  • https://www.xxxxx.com.hk/fonts/noto-sans-v12-latin-regular.woff
  • https://www.xxxxx.com.hk/fonts/noto-sans-v12-latin-regular.woff2
Note: For a browser to render a font correctly, the font must be installed on the operating system.

Colors

You can configure colors used in the career site. Select theme colors (set of colors applying to groups of elements). The colors depend on the template that you selected. You can also define the color of several UI elements such as header, footer, buttons, text, background, panels, menus, filters, tiles. Click Reset Colors to restore the template default colors.

Custom Header

You can create a custom header to match your corporate branding. The custom header is displayed on top of the template header. To create a custom header, you provide the HTML code.

Custom Footer

You can create a custom footer to match your corporate branding. To create a custom footer, you provide the HTML code. Only one footer can be active. If you use the template footer, you can't use the custom footer.
Header Links You can define up to 25 links and sublinks to be used in the global header.

Custom CSS

You can add Cascading Style Sheets (CSS) to control the look and feel of the external career site. You can edit the CSS code in the panel, but you can also open the editor in a separate window.

When an image is added to the media section of a job requisition details page, add the following custom CSS to your career site to avoid having grey bars at the side of the image when viewing the job on the career site.

.media-slider__item-content {
  background-size: cover !important;
}

Custom JavaScript

You can add JavaScript to career sites to enable third-party analytics tools. You need to add JavaScript, not HTML script. However, you can load HTML dynamically.

Favicon

You can add a personalized favicon to your external career sites. For details, see Add a Personalized Favicon to the Career Site and Configure Career Site Location Search.

Here's an example of how an original Google Analytics tracking code would be transformed.

Original Tracking Code

Transformed Code to Enter in Career Site 


<!--Global site tag (gtag.js) - Google Analytics-->

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-12345678-9"><script>

<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'UA-12345678-9');

</script>
 

var script = document.createElement('script');
script.src = 'https://www.googletagmanager.com/gtag/js?id=UA-12345678-9';
document.head.appendChild(script);

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-12345678-9');