Change the Logo and Color Schemes of a Classic Theme
Use this example to configure the logo and the color schemes of an application that has a classic theme applied to it. You see the logo in the global header.
This table summarizes the key decisions for this scenario.
|
Decisions to Consider |
In This Example |
|---|---|
|
What's the name of the new theme? |
MyCompany |
|
Which existing theme are you going to base this theme on? |
Default |
|
Which default home page layout are you going to use? |
Banner |
|
Which image are you going to use as the new logo? |
MyCompany.png Tip: You can use a logo of any size, but the recommended
width is lesser than 200 px and height is lesser than 50 px.
|
|
Which image are you going to use as your application's bookmark icon for desktop? |
MyDesktopIcon.png Tip: For best results, use a square-shaped icon with each
side measuring lesser than 16 px.
|
|
Which image are you going to use as your application's shortcut icon for mobile devices? |
MyMobileIcon.png Tip: For best results, use a square-shaped icon with each
side measuring more than 57 px and lesser than 144 px.
|
|
Which background image are you going to use? |
WatermarkOracle.png Tip: For best results, use an image size that's as close
to 1024 by 768 pixels as possible.
|
Change the Logo and Color Schemes
Use the Themes page to specify the look and feel aspects of the various UI elements, such as navigation icons and buttons. The fields available for you to change these appearance settings may vary based on what you select for some fields. For example, if you've News feed as the default home page layout, you won't find the Group Indicator Color field for selection because this field isn't applicable for the news feed home page layout.
Here's how you change the logo and color schemes.-
Activate a sandbox that has the Appearance tool in it. Don't include spaces or special characters in the sandbox name.
-
Click .
-
From the Themes list, select Sky Blue.
-
From the Default Home Page Layout list, select Banner.
Note: The home page with a banner layout mainly contains the page control to navigate to the infolets, the work area icons (standalone or in groups), and the banner displaying information, such as company announcements. -
From the Logo list, select File as the type of location where your logo is stored. Browse and select MyCompany.png.
-
Select the Configure bookmark icon for desktop checkbox, and from the Desktop Icon list, select File. Browse and select MyDesktopIcon.png.
-
Select the Configure shortcut icon for mobile checkbox, and from the Mobile Icon list, select File. Browse and select MyMobileIcon.png.
-
From the Background Image list, select File as the type of location where your background image is stored. Browse and select WatermarkOracle.png.
-
To specify the general appearance of the application, enter the values as shown in this table, or select the colors from the color palette.
Field
Value
Global Region Background Color
A9A9A9 (Dark Gray)
This field specifies the background color of the global header, which is the uppermost region in the UI.
Global Text and Icon Color
4169E1 (Royal Blue)
This field specifies the color of the text that appear in general and with icons in the global header.
Enable color gradient
Select the checkbox, specify the gradient type as Top to bottom, and start and end colors of the gradient as follows:
-
Start Color: 00BFFF (Deep Sky Blue)
-
End Color: 4169E1 (Royal Blue)
Cover Image
Select File as the type of location where your cover image is stored. Browse and select MyCover.png. This image will appear on the banner.
For the home page with the banner layout, the recommended image size if 2600x290 px.
Panel Style
Light
This field specifies the style of the main panel on the home page.
-
-
To specify the appearance of the navigation icons, enter the values as shown in this table, or select the colors from the color palette.
Field
Value
Icon Type
Solid
Size
Small
Image Color
Multicolor
Group Indicator Color
D02090 (Violet Red)
This field specifies the color of the three dots that appear on certain icons on the springboard to indicate that these icons are group icons.
Label Color
000000 (Black)
This field specifies the color of the label text of the navigation icons.
Background Shape
Circle
Background Color
Multicolor
This field isn't displayed if you have selected None as the background shape.
-
To specify the appearance of the application pages, enter the values as shown in this table, or select the colors from the color palette.
Field
Value
Heading Color
8B008B (Dark Magenta)
This field specifies the color of the header text on the application pages.
Link Color
0000FF (Blue)
This field specifies the color of the links that appear on the application pages.
Selection Color
FFB6C1 (Light Pink)
This field specifies the color of a selected or highlighted UI element on a page.
Highlight Color
FFB6C1 (Yellow)
Card Style
Light
This field specifies the style of cards displayed on application pages having a grid view.
Landing Page Icons for Employees
Blue
This field specifies the icon color of the landing pages for all work areas related to employees, for example Personal Information, Benefits, and Absences.
-
To specify the appearance of the buttons, enter the values as shown in this table, or select the colors from the color palette.
Field
Value
Label
000000 (Black)
This field specifies the color of the label text of the buttons.
Border
000000 (Black)
This field specifies the color of the button borders.
Enable color gradient
Select the checkbox and specify the start and end colors of the gradient as follows:
-
Start Color: 4169E1 (Royal Blue)
-
End Color: 00BFFF (Deep sky Blue)
Corner Rounding
Small
This field specifies the extent to which the button corners are rounded. For example, None indicates that the button corners aren't rounded and Small indicates that the button corners are slightly rounded.
-
-
On the Actions menu, select Save As, and enter the theme name as MyCompany.
-
Make sure that the Apply this theme checkbox is selected.
-
Click OK.