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.

Note: You need to store images on a public-facing server that doesn't require authentication. For example, this can be the same server that you use for your corporate public websites or any publicly accessible website. Also, you can't store images in Oracle Recruiting Cloud (ORC).The URL can't contain the customer's POD URL.

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.
    Note: If a screen width is less than 1024 px, a hamburger menu will be displayed. If a screen size is equal to or greater than 1024 px, the menu type shown is based on user configuration.

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.

Career Site oCustom CSS

You can add Cascading Style Sheets (CSS) to apply custom styling to design elements created using the Custom HTML element within the Career Site Builder. Also, other elements—such as Paragraph Text, Images, and Headings—can be assigned CSS class or ID names in the More Options area, allowing them to be styled via custom CSS.

When leveraged effectively, Custom CSS can be used to create dynamic visual components, such as image carousels and interactive content.

It can also be used adjust image view in the job details page. 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.

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

It's important to adhere to best practices while applying custom CSS:

  • Limit custom CSS usage to elements within the Custom HTML element and other designated areas.
  • Applying custom CSS on native application elements isn't supported, as class or ID names for those might change without a formal change management process, potentially breaking custom styling.

Custom JavaScript (JS)

You can add custom JavaScript to career sites to facilitate third-party analytics tools and control custom cookies on the oracle career sites. While it allows for limited JavaScript functionality, there are key considerations to keep in mind:

  • The use of custom Java Script is supported for the following use cases:
    • Add third party analytics and tracking tools to Oracle career sites.
    • Control custom cookies on the career sites.
  • Custom JS loads after the rest of the application, so expect a delay, and plan script execution accordingly.
  • Applying custom Java Script on native application behavior isn't supported, and the code might not work after release update.

For third party analytics, see example codes below.

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

For Google Tag Manager you can use the code below. You need to replace XXXXX in the example with the tag that needs to be used.

Google Tag Manager Tracking Code 

(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');