Configuring the Initial Site-Wide Elements

Using the Career Site Builder, you can update the configuration for the site as a whole using the Global Settings and Global Styles, located under Appearance. These settings control site-wide elements like headers, footers, button color, and so on.

Additional site-wide settings are located under Tools, Settings, Layouts, and other menus.

See the Setting Up and Maintaining SAP SuccessFactors Recruiting guide on the SAP Help Portal for additional descriptions not included in this course.

From the site menu, you can adjust font settings.

If you need to change the font after building the site, you will need to replace the font in each individual page component.

Rather than using the Padding options located on this page, spacing around individual components is now managed by using Enable Spacing Control, configured at the component level. See more information in the Pages and Components unit.

• Font types and sizes can be changed for individual components.
• Customers who own fonts may use them on their Career Site Builder site.
  • The file type can be either .tff or .otf.
  • The maximum size limit for uploading custom fonts is 50 MB.
  • Note that many free fonts have restrictions regarding embedding the font in an application; refer to the license information provided with the font.
• To use a custom font:

  1. Choose Open Custom Font Editor and upload the font.

  2. To select the font that was added, choose Font.

• Troubleshooting:

  • If the font is not replaced in all instances, check for font overrides on the configured page components.

  • If the font appears as Times New Roman, it is not compatible. Upload a different font.

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 any of the 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 that is being used on the site cannot be removed.

• Leading practice is to enter a label for the color. Create a new color by using the color picker grid, or entering an RGB, HSV, or hex code value. To create a color gradient, check the Is Gradient Color box, and select the two colors you would like to create the gradient.

• To replace an existing color, click the color, and then click the Edit icon. Be aware that the color menu auto-saves. Unless you intend to replace a color throughout the CSB site, click Add to begin. 

• Click the Archived button at the top to view colors that have been previously removed. Note that a color that is being used on the site cannot be removed.

• 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 whether you can see through it).

• Always label colors that use a gradient or transparency.

• From the Content Style dropdown, select Centered or Full. Note that you’ll be presented with the same options for the header and footer, and they don’t need to match. (In other words, some customers have chosen to have headers and footers fill the page horizontally, while their content is centered on the page.)

• 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 identify/logo and is most often applied to a website to be displayed on a browser address bar next to the page URL address and also next to the page’s name in a list of bookmarks when the candidate bookmarks a page.

Consider the following points when using meta images for social media posts:

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

• The Search Form and Search Experience options are discussed in the Configure the Career Site Search Experience unit.

• The Header tab allows you to customize the colors of some elements of the site header.

• The Row Footer and Column Footer tabs allow you to customize the colors of some elements of the site footer. You can configure links in the footer either as a single row or as columns of related links. You can also configure both footer menu types, and apply styles for them separately. If you configure both a row and column menu for the footer, the row menu displays above the columns.

Users with access to the back-end application Command Center use a quick link to open Career Site Builder.

Customer administrators access the Career Site Builder from SAP SuccessFactors → Admin Center. The required role-based permissions are described in the Site Setup section of this course.

Help text is provided on some pages.

Choose ? in the top right for overall information about that page. Choose ? next to fields for information about completing that field.

Build the Default Brand pages first, then duplicate for other brands and locales. To use the Duplicate function, begin on the page that you will copy from.

After you make changes in the CSB tool, choose Save. Do not make too many changes between saves.

You can preview what the actual site will look like by choosing Preview in the upper-right corner. This launches the page that you are working on, and you can navigate to other pages to preview if desired.

There is no undo button.

You can control the appearance of the page for different devices (mobile, tablet, or desktop). Enable the checkbox next to your desired devices for each component. To see which components are enabled for each device, select the device name in the upper-right corner (next to Add Component).

To remove a component from the home page, choose the trash can icon.

To navigate to a different page or menu, use the back arrows at the top of the page.

When making changes to a page, you can save the page as a draft by choosing Save Draft. This allows the user, or a different user, to return and edit the page.

Draft pages can be previewed.

To make the updated page visible on the customer site, choose Publish. When a page is published, a version is saved. Up to 10 versions can be saved.

You can view previous versions of the page by clicking the gear icon in the upper left of the page. Then choose View Published Revisions. This shows the previously published versions of the page, when they were published, and the user who published them.

Choose Edit to revise a previous version of the page. Choose Preview to view how the page would appear on the customer site.

This allows you to revert to earlier versions. If you’d like to revert to a previously-published version, select it to edit, make any necessary adjustments, and then publish the page.

The following is an example of a use case for versioning and drafts:

• Paula has permission to edit content pages.

• She accesses the CSB and edits one of the published content pages.

• Paula would like Olivia to review her work, so she chooses Save Draft.

• Olivia accesses the CSB and navigates to the page that Paula edited.

• Because there is a published version and a draft version of that page, by default Olivia sees the published version. Olivia chooses the gear icon and selects Edit Published to view Paula’s draft page.

• Olivia is presented with the message shown in the figure shown below, and chooses Yes. She has not made any changes yet, so she is not concerned with changes being overwritten.

• Now Olivia can view and publish Paula’s content page, or she can make changes and Save Draft or Publish.