Updating Global Styles

Objective

After completing this lesson, you will be able to update the colors and background images used on CSB Sites.

Global Styles

Global Styles are located in Career Site Builder under Appearance. The main sections on the Global Styles page are:

Global Styles
Headers
Footers

In the example shown, three brands and three locales have been enabled. The Default Brand displays if the system does not recognize a brand. When building pages in CSB, the pages for the Default Brand are created first and then duplicated for the other brands, making any necessary changes.

A screenshot of the Global Styles menu showing the following sections: Global Styles, Headers, and Footers

The Global Styles tab allows you to customize colors and background images across the career site. In addition, each configured brand for the site can have its own custom header or footer, with custom colors and images. For example, if a customer has Default Brand and Sub Brand configured, each brand can have its own look, with individual branded colors and images. Select Header or Footer in the Global Styles menu and then select a locale and brand.

Color selections are made for each brand, even if they are the same as the default brand.

Main Menu

On the Main tab you can adjust the colors for the main areas of the career site, and upload images for the site as a whole and main content areas.

A screenshot of the Main tab showing options to adjust features of the site

To open the Color Palette menu, click on 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.

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 a color throughout the CSB site, click Add to begin. Create a new color by using the color picker grid, or entering an RGB, HSV, or hex code value.

Enter a Label for the color, if desired. Always label colors that use a gradient or transparency.

To create a color gradient, check the Is Gradient Color box, and select the two colors you would like to create 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).

A screenshot of two slides that can be adjusted to select the level of transparency or the color of an image

You can also upload images for the site and content pages using the Main menu. 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.

A screenshot of a Favicon next to the page name, Jobs at Best Run

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 as 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 to specify one image per brand so that any branded pages within the career site will contain the same meta image.

A screenshot of a company image appearing on Microsoft Teams and LinkedIn. A note reads as follows: ''CSB URL pasted into Microsoft Teams''.

Other Global Style Settings

The Header menu allows you to customize the colors of some elements of the site header.
The Row Footer and Column Footer menus 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 you can apply styles for them separately. If you configure both a row and column menu for the footer, the row menu displays above the columns.

Modify Site Colors and Add a Social Link to the Footer

Business Example

Best Run would like to modify some of the colors used on the site. You will also view how the logo at the top left is configured to return the user to the home page and add a social link to the footer.

Note

As you navigate the site colors in this exercise, do not make any changes. There is no Save button, so any changes are saved automatically.

ExerciseStart Exercise

Steps

Navigate to CSB→Appearance→Styles→Global Styles→Default Brand and explore the settings. Additional colors can be added. Click on the Site Background color and then click on the pencil icon to see that it is a gradient. Notice that a site-wide background image has not been added, but a favicon has been uploaded.
Select the Search Form tab and notice the color selected for the Best Run search form.
Select the Header tab. In the left navigation pane, under Global Styles, select Red. Notice the color selected for the Red Brand search form. Switch back to viewing the Default Brand under Global Styles. Notice that the Menu Link is a dark blue, and Menu Link Hover is a light blue color. Confirm this in the header of your Best Run site.
Select the Search Experience tab and scroll through the available options. Feel free to implement changes to the way the search is presented. Now change the Menu Link Hover to Best Run Gold. Save and Preview. Now when you hover over any of the links in the Default Brand header on the Best Run site, they display in a gold font.
Click on the Row Footer tab and make the same change to a gold color for the Link Hover option. Click Save and Preview.
Navigate to CSB→Appearance→Styles→Headers→English→Default Brand. On the Logo page, notice that the Best Run logo has been uploaded and the Click URL is set to / which represents the Default Brand home page. Test this in your Best Run site by navigating to the home page for the Default Brand and then clicking on Not Finding a Job?→View All Jobs from the header. Return to the Default Brand home page by clicking the Best Run logo at the top left.
In CSB, click on Menu under Appearance→Styles→Headers→English→Default Brand. We will learn more about header menus later in class.
Navigate to Appearance→Styles→Headers→English→Red→Logo. Notice that the Red Brand logo has been uploaded, and the Click URL is set to /Red/. This URL is relative to the Red Brand home page. Test this in the Best Run site by navigating to the home page for the Red Brand, and then clicking on Why Work Here→Company in the header. Return to the Red Brand home page by clicking the Red Brand logo at the top left.
Navigate toCSB→Appearance→Styles→Footers→English→Default Brand→Details . If your company uses a copyright date on your CSB career site footer, you will want to remember to update it annually.
Click on the Row Menu tab and use the pencil icon to briefly compare the settings with the footer on your Best Run site.
Click on the Social Links tab.
Click +Add and select YouTube.
In the YouTube Link edit box, enter https://www.youtube.com/user/SAP.
Click Save and Preview. Notice that the YouTube icon has been added to the footer of the Best Run brand.
Navigate to CSB → Appearance → Styles → Footers → English → Red → Social Links and add the same link to YouTube for the Red brand.
Be aware that you have changed only the Default Brand. Since this is a multi-branded site, you would need to make the same change to the other brands as well. We will not do that in this exercise. Save and preview.

Header Details & Logo

From Header→Details, you can choose to have the header always displayed on Desktop devices. You can select where the logo is displayed, whether a custom header will be configured, whether the header is to extend the full width of the site or centered, and determine whether to display the Sign-In Widget and Locale Selector.

A screenshot of the Details page including toggles for Fixed Header, Sign-In Widget, and Locale Selector.

From Header→Logo, you can upload the logo for the header. For the Click URL (href) field, we recommend using the relative link (/) to represent "Home".

Next lesson