Customizing Career Site Builder (CSB) Styles

Objective

After completing this lesson, you will be able to describe global styles.

Global Styles

Access Global Styles from Appearance→Styles.
The main sections on the Global Styles page are as follows:
- Global Styles
- Headers
- Footers
Expand each to view the brands and locales configured in Command Center. (Locales are set up at the end of the project and so are not shown here.)
The Main Brand displays if the system does not recognize a brand. When building pages in CSB, the Main Brand page is created and duplicated for the other brands, making any necessary changes.

Main Styles

The Main tab allows you to adjust the colors for the main areas of the career site and upload images for the site as a whole and main content areas.
To open the Color Palette menu, click on any existing colors. Use the Add icon at the top of the Color Palette menu to add new colors to the palette. Click the Archived button at the top to view colors that have been previously removed. Note that a color used on the site cannot be removed.
To replace an existing color, click on the color and then click the Edit icon. Be aware that the color menu auto-saves! So unless you intend to replace color throughout the CSB site, click Add to begin.
Enter a Label for the color, if desired. Create a new color using the color picker grid or enter an RGB, HSV, or hex code value. To create a color gradient, check the Is Gradient Color box and select the two colors you want to make the gradient.
Use the bottom slide to adjust how opaque the color will be on the site (in other words, whether it is a solid color or you can see through it).
You can upload images for the site and content pages using the Main page. Images uploaded as the Site Background Image serve as the background for the entire site. Images uploaded as the Content Background Image serve as the background on any content pages.
You can upload a Favicon for each brand. A Favicon is a small rendering of the brand identity/logo. It is most often applied to a website to be displayed on a browser address bar next to the page URL address and next to the page’s name in a list of bookmarks when the candidate bookmarks a page.

This screenshot shows a Favicon upload screen.

Meta Images for Social Media Posts

Customers can add meta images from the Global Styles Main page to associate them with your career site in social media posts.
Some third-party sites, such as Facebook, LinkedIn, and X, formerly known as Twitter, allow you to associate an image when you post a link and information for your career site.
The Meta Image setting allows you to specify one image per brand, so any branded pages within the career site will contain the same meta image.

This screenshot shows an example of a meta image, a CSB URL pasted into Microsoft Teams.

This screenshot shows an example of a meta image, a CSB URL pasted into LinkedIn.

Header Details

Configurations are made for each language and brand from Appearance→Styles→Headers. Several options are configured on the Details page.
Choose whether to always display the header on Desktop devices, select where the logo is displayed, and determine whether the header is to extend the full width of the site or centered.
From Header Style, you can configure a Custom header. Details are included later in this section.
If a Custom header is not selected, you also enable the sign-in widget and locale selector from this page.

This screenshot shows part of a header with locale selector.

This screenshot shows the Header Details Settings.

Header Links

To add the header links, click Add and select the type of link you want to add.
Additional details are discussed in the SAP SuccessFactors Recruiting: Candidate Experience Administration course (HR832).
- Category link: Links to existing category pages.
- Content: Links to existing category pages.
- Cookie Consent Manager: Opens the Cookie Consent Manager.
- External: Links to external sites or other pages in the career site.
- Home Page: Links to existing home page. When brands are enabled, the Home Page link takes the user to that brand’s home page.
- List: Displays a dropdown link.
- TC Join: Links to subscribe page (Join Talent Community).
- Top Jobs: Only used in the footer. The Top Jobs page contains system-generated pages corresponding to the top job searches that direct users to the career site.
- View All Jobs: The out-of-the box setting is only used in the footer.

This screenshot shows the Link Setup screen and Type drop-down menu.

Custom Header

Customers can select additional customization options for the header by selecting Header Style: Custom from the Details page.
A different header layout can be configured for each brand and locale, as well as desktop and mobile devices.
Customers can mix custom and default header styles on their career site.

Custom Header Example

In this example, the customer requested that the Logo appear at the top left, with the Menu options to the right. Below that, a Line was added across the full width of the page. Below the line, a Text box was added in the center of the page, with the Sign-in and Language component to the right.
The components that can be added to a custom header are shown here.
The logo for a custom header can be added from either the Logo component or the Image component. To use a logo that is optimized for different display settings (such as desktop and mobile), use the Logo component.
The Sign-in and Language component is required.

This screenshot shows the Custom Header component options.

Footers Row Menu or Column Menu

Select either Row Menu or Column Menu to add links to the Footer.
In the example shown, both the Row Menu and Column Menu have been configured.
The same link types that can be used in the header are available for the footer.

Social Links

Social Links are presented in the footer.
In the Social Links area, add the desired links and enter the company’s preferred URL for their social networks.
Best practice only includes social networking links specific to job seekers.

This screenshot shows an example of a footer that includes social links.

Mobile Apply

Career sites created with Career Site Builder support Mobile Apply.
Mobile Apply supports the ability to search for jobs, create and manage a profile, and complete the job application process using mobile devices such as a smartphone or a tablet computer.
When Mobile Apply is enabled, the Candidate Profile and Application are consolidated into a single page. In the example, notice that a resume and cover letter (and other attachments) can be submitted.
Note that when Mobile Apply is enabled, candidates will visit Jobs Applied from the Candidate Profile to view their status in the application process.

Microsites and Brands

Job branding can be consistent across SAP SuccessFactors Recruiting by associating microsites with brands. This allows a user to view a job on the CSB career site, apply for the job, and have the same brand experience.
The brands control the accordion colors during the application process:
- Accordion & button color (Navigation background color)
- Accordion hover color (Navigation hover color) – shown at the top of the screen captures
- Text on Accordion (Navigation menu Text color)
The wrapper pulls the header, footer, and a few other styling elements so the candidate doesn’t notice that they went from one system to another.

This screenshot shows an example of job branding for a microsite.

This screenshot shows another example of job branding for a microsite.

Translations Overview

The Translation menu allows you to override default (system) text for site elements for any locale.
After you've changed the text, it appears in the translation grid. Default text appears in italics, and new labels appear as regular text.
You can import and export your custom translations from this page. These are performed separately from the site import and export.

This screenshot shows a Translation grid.

Summary

Global and Main Styles: Customize the appearance of your career site, including colors and images, using Global Styles and the Main tab. You can adjust the color palette, add gradients, and upload images for backgrounds, favicons, and meta images for social media.
Header and Footer Customization: Configure headers and footers for different brands and locales. Options include displaying headers on desktop devices, logo placement, and header width. Customize header links and use Row or Column menus for footer links.
Mobile Apply and Microsites: Enable Mobile Apply for a seamless job application process on mobile devices. Use microsites to maintain consistent job branding across SAP SuccessFactors Recruiting, controlling colors and navigation during the application process.
Social Links and Translating Site Elements: Add social networking links in the footer specific to job seekers. Use the Translation menu to override default system text for site elements in different locales and manage custom translations.
Custom Header Options: Create a unique header layout for each brand and locale, with optional components like logo placement, sign-in, and language selection. Mix custom and default header styles on your career site.

Next lesson