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. The Theme tab is where you set global elements such as the corporate logos, background image, text, fonts, colors, custom header, footer, and CSS.

The main view on the Theme tab contains the live preview of the career site and shows the changes you make on the configuration panel. As soon as you configure a theme element, it’s shown right away on the page preview. You can preview the career site for desktop, tablet, and mobile devices. Changes you make to the theme 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 the best experience when sharing job links in social media sites, most 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. .

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.

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

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.

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.

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');