1. Configuring User Experience
  2. Configuring Theme Attributes

Configuring Theme Attributes

This topic lists and describes all of the theme attributes you can add to a theme to define the appearance and behavior of your Public Sector Cloud service.

Working with Theme Attributes

The following table contains descriptions of the theme attributes you can add and configure to adjust the display and user experience of the service.

Theme Attribute

Description

Favorite icon

Use to add a “favicon” image for your site. The favorite icon appears in the browser tab, and it also appears as the icon in the favorites list if a user bookmarks the page.

Use https:// to reference a hosted image or use base64 encoded images.

The favorite icon must be:

  • ICO image type

  • 16x16 pixels or 32x32 pixels

Note: Not all browsers support the favorite icon, and not all browsers support base64 encoded icons.

Mobile device home screen icon

Use to add a home screen image for a browser page from this cloud offering if a user pins the page to the home screen while using a mobile device.

Use https:// to reference a hosted image or use base64 encoded images.

Application Label

Enter the title for your application.

For example:

City of Carlsbad Permits Center

By default, the application label only appears as the text on the browser tab.

Select the Show application logo in header attribute to have the application logo appear also in the application header.

Show application label in header

Turn on the Value switch to set the application label to appear in the application header.

Note: When displayed, the application label appears to the right of the application logo, and on a smartphone the application label appears in the center of the header.
Note: You can achieve the same by overriding the following CSS style: pscts-theme-header-text-app-label. See the following section covering free-form styles for more information.

Copyright text

Enter text displayed in the footer for copyright purposes.

Page background color

Specify the main color for the page. For example:

#111

Header background image

Use to include a background image for the header.

Use https:// to reference a hosted image or use base64 encoded images.

Header background color

Specify the main color for the header color. For example:

#a0a0a0

Header text color

Specify the color of the header text, as well as the color of the Application Navigation button and the Search button.

Header icon color

Specify the color of the header icons, such as Home, Page Finder, Alerts, and so on.

Content area border color

Specify the main color for the border of the content area. For example:

#eeeeee

Footer background color

Specify the main color for the footer color. For example:

#a0a0a0

Footer background image

Use to include a background image for the footer.

Use https:// to reference a hosted image or use base64 encoded images.

Footer text color

Enter the color for the text appearing in the footer.

Welcome banner background color

Specify the background color you want to set for the welcome banner on the public landing pages.

Welcome banner text

Enter the text you want to appear in the welcome banner on the public landing pages.

Welcome banner text color

Enter the color of the text you want to appear in the welcome banner on the public landing pages.

Digital assistant launcher icon

Enter the URL pointing to the image you want to appear on the agency springboard or the user landing page for the Digital Assistant. You click this image to launch the Digital Assistant.

Note: The Digital Assistant is a chatbot feature.

For more information on the Digital Assistant, see Configuring the Digital Assistant Parameters.

Use https:// to reference a hosted image or use base64 encoded images.

Digital assistant logo

Enter the URL pointing to the image you want to appear on the left side of the Digital Assistant banner that the user sees after launching the Digital Assistant.

Note: The Digital Assistant is a chatbot feature.

For more information on the Digital Assistant, see .Configuring the Digital Assistant Parameters

Use https:// to reference a hosted image or use base64 encoded images.

Theme style sheet

Specify the stylesheet containing the style classes you reference in the theme properties on this page.

Free-form styles

Add any additional Cascading Style Sheet (CSS) style class definitions to further brand your implementation if needed. The styles you add can be used to override styles applied to delivered items not associated with a specific branding attribute, such as landing page tiles.

See the following section for descriptions of the elements to which you can apply free-form CSS.
Note: You do not select branding images using the Theme Attribute Details page. You use the Oracle Fusion Applications Appearance tool to upload branding images.

For more information on branding images, see Applying Branding Images.

Modifying Delivered Style Classes with Freeform CSS Styles

Some elements in the interface are not represented by a theme attribute that you can modify using the Theme Attribute Details page. If needed you can add your own CSS to the Freeform Style theme attribute to override the CSS style applied by default. The following table lists UI elements and their associated style class that you can override with your own CSS.

UI Element

Style Class Override Example

Background color of the Anonymous User Landing page

 
.pscts-theme-page .PSCHM_GUEST_LINK{
background-color: silver;
}

Background color of the Search box on the Anonymous User Landing page

 
.pscts-theme-page .PSCHM_SEARCH{
background-color: gray;
}

Background color of the tiles on:

  • Anonymous User Landing page

  • Registered User Landing page

 
.pscts-theme-page .psc-citizen-svg{
background-color: green;
}

Background color of Registered User Landing page

 
.pscts-theme-page .PSCHM_PUBLIC_LINK{
background-color: #00FFFF;
}

Background color of Agency Springboard

 
.pscts-theme-page .PSC_AGENCY_HOME{
background-color: #00FFFF;
}

Quick Actions (I Want To) drop-down list on the Agency Springboard

 
.pscts-theme-page .psc-home-two-column{
background-color: silver;
}

Application label to appear in global header

 
.pscts-theme-page .pscts-theme-header-text-app-label {
    white-space: nowrap;
   display: block;
}