Customer Success Confidential

Theming for V12
Customer Success
What is Theming?
Theming allows Admins to apply custom or pre-selected visual design
styles to the SuccessFactors User Interface (UI). Admins can create a
theme by changing selected page attributes, such as background and
text color. A theme can be as simple as a color shift in the background of
the interface or it can be very complex. For example, Admins can include
tiled images (patterns that create the look of textures) and features such
as lighting effects (an overlay of a tonal gradient).
More importantly, theming makes it possible for customers to transform
the appearance of SuccessFactors products so that they meet the visual
design standards that are part of their company's brand requirements.
Types of Themes
Base Themes
• A set of pre-made themes that are included with the V12 release.
• They are listed on the Manage Themes page in Admin Tools.
• They are ready to be used as soon as a company logo is added.
• They cannot be deleted or directly edited.
Base Themes can, however, be duplicated and the copied version
renamed, edited and saved. These are then considered Custom Themes.
Types of Themes
Custom Themes
• Admins can also create one or more Custom Themes by clicking the
Create a New Theme button on the Manage Themes page.
• Either method requires the Admin to then make changes to a set of
page attributes that will specify a look and feel in the control panel of
the Create a Theme page.
• Admins can create as many Custom Themes as needed from a Base
Theme; companies that have sub-brands, for example, can benefit
from this feature.
Types of Themes
Visible Themes
• The Visible Theme is the theme the Admin selects as the one to be
used live (or viewed).
• It can be a Custom or Base Theme.
• The Visible Theme is selected on the Manage Themes page.
• Admins can Try out a Theme for the session they are in before
selecting it to be the Viewable Theme.
Applying a theme
What can be themed?
Page attributes that can be changed
• Main page background color, texture and lighting effects for the UI
• Placemat (holds the page content) background color, texture and
• Accent color scheme generated that assigns colors to certain UI
elements: portlet headers, primary button, menu highlights,
navigation labels, table background colors (rows and header)
• Whether the logo has a container around it and if so, the color
• Text color
• Icon sets based on light or dark color theme
How to theme
Do it in Admin Tools
Option1: Out of the box
Select a ready to use base theme provided by SuccessFactors.
Upload a logo and adjust the background of the logo’s container.*
Preview as you go (all options have this feature).
Save to the Manage Themes page in Admin Tools
Select as the Viewable Theme.
*must be done by SuccessFactors PS/CS
How to theme
Option2: Create a Quick Theme:
• Select a base theme to build from; currently SuccessFactors offers
the choice of a light or dark theme, but will add more themes in the
near future.
• Admins can then change the background color.
• They can pick an accent color that the system will use to generate a
color scheme consisting of ten different values of the Hex color. Each
of these is automatically applied to specific page attributes.
• Save the named Custom Theme to the Manage Themes page.
• Select the theme as the Viewable Theme or store it to be used later or
as part of a number of themes to be reviewed.
How to theme
Option3: Fine Tune (Customize as needed)
Use Fine Tuning on the Quick Theme you created or a copy of a Base Theme to
customize any of the page attributes that are theme-able, including those
assigned by the Accent Color Scheme Generator.
Fine-Tune items include:
Background color for the whole page, the placemat and placemat border, portlet
headers and sidebar, primary buttons, table headers and rows, and logo container.
Text color of navigation labels, page titles, headers, drop down menus, footer content,
table content and more.
Page background texture: select one of ours or upload your own.
Page background lighting effects: select one of ours, or upload your own.
Page background using a single large image: upload your own.
Placemat opacity and placemat border opacity.
Placemat background texture: select one of ours or upload your own.
Light or Dark set of icons.
How to theme: Accent Color Scheme Generator
A part of the Quick Theme feature is the generation of an accent color scheme. The Admin
enters a Hex# color (base color) that can be from the list of recommended colors or any of their
choosing and this becomes the basis for a system generated color scheme (see below).
The base color is located at top left (#007187 in this example)
Ten shades of the base color, located top-left, are created at varying degrees of opacity.
The top row emulates opacity over a white background, the bottom over black.
The opacity values are 100% opaque, 75%, 50%, 25% and 10% on the top row.
The bottom row begins at 85% rather than 100% and continues on as the first.
These colors will be applied to the following items in the UI (see next page):
How to theme: Accent Color Scheme
How to theme: Recommended Accent Color Schemes
How to Theme: Example one
How to Theme: Example two
Different themes for sub-orgs
(Expected 7/2012)
What it is
• B1207: Allow users who are part of different subsidiaries or
sub-brands to have their own identity
How to do it
• Create permission groups for different groups of users
(e.g. in different subsidiaries)
• Assign a different theme to each group

similar documents