This chapter provides an overview on customizing Oracle Communications Billing Care's appearance using themes and changing the login screen logo.
Billing Care includes two theme cascading style sheet (CSS) that determine the Billing Care look and feel. CSS enables you to alter Billing Care's appearance (for example, colors and fonts) for your business needs. By default, theme_alta.css is enabled. An alternative theme named theme_default.css is also included. An entry in the registry file specifies which CSS file Billing Care uses.
Additionally, override CSS files can be used to change the appearance of specific elements in Billing Care when needed. For example, the Billing Care login page uses a CSS that specifies the displayed logo graphic file. See "Changing the Default Logo" for more information on using a custom logo.
The Billing Care SDK includes sample CSS files named customTheme.css and override.css in the SDK_home/BillingCare_SDK/samples/Themes/css directory, where SDK_home is the directory where you installed the SDK. Use these files when creating custom themes and overrides to change the Billing Care look and feel.
Note:
The theme_default.css and theme_alta.css files are not included in the Billing Care SDK. To retrieve these files for customization, set the desired theme using the registry file, then view and download the CSS using your browsers development tools.Add a new theme to Billing Care by creating a new CSS file and including it in your customizations shared library. The SDK includes a sample custom theme named customTheme.css in the SDK_home/BillingCare_SDK/samples/Themes/css directory, where SDK_home is the directory where you installed the SDK. Use this sample theme when creating your custom theme.
To add a new theme:
Create a new CSS file (for example, mytheme.css)
Copy your custom CSS file to the myproject/web/css directory where myproject is the NetBeans IDE project directory containing your Billing Care customizations.
Set Billing Care to use your custom theme in the registry file and deploy your custom theme to your Billing Care domain. See "Setting Which Billing Care Theme to Use" for instructions on specifying a theme in the registry and deploying your theme in the Billing Care domain.
You can override styles and add styles to the existing theme's CSS file. Billing Care applies the registry's configured theme first, then applies any override theme modifications. The SDK includes a sample override CSS file named override.css in the SDK_home/BillingCare_SDK/samples/Themes/css directory, where SDK_home is the directory where you installed the SDK.
To override and add styles to an existing theme:
Write a CSS file that overrides styles or adds styles (for example, theme_custom.css).
In the customRegistry.js file, add an entry under cssFiles for your override CSS file in the others parameter as shown in Example 9-1. See "About the Registry File" for more information on how to create a custom registry file.
Copy your override CSS file to the myproject/web/css directory where myproject is the NetBeans IDE project directory containing your Billing Care customizations.
Confirm Billing Care is configured to use your custom theme and overrides in the registry file and deploy your overrides to the Billing Care domain. See "Setting Which Billing Care Theme to Use" for instructions on specifying a theme in the registry and deploying your theme to the Billing Care domain.
Switch between themes by adding an entry in customRegistry.js using the same key as used in Registry.js, which points to the required theme's CSS file. See "About the Registry File" for information on creating the customRegistry.js file and including it in your shared library for deployment to your Billing Care domain.
Example 9-2 shows the entry in the registry file where a custom theme is specified.
Example 9-2 Billing Care Theme Registry Entry
var CustomRegistry= {
cssFiles: {
themeCss: 'css/theme_default.css'
}
};
To switch Billing Care themes:
Create a customRegistry.js file in a text editor. See "About the Registry File" for more information on how to create a custom registry file.
Update the customRegistry.js file specifying your CSS file in the themeCss entry.
Save and close the file.
Do one of the following:
If you are using an exploded archive for your shared library, log out of and back into Billing Care to see the new theme. See "About Using an Exploded Archive" for more information about using exploded archives.
Package your customizations shared library and deploy it to your Billing Care domain. Redeploy Billing Care and login to see the new theme. See "Packaging and Deploying Customizations" for more information on packaging and deploying your customizations.
By default, Billing Care displays the Oracle logo on the login page and in the header section that appears after you login.
To change the default logo:
Copy your custom logo into the myproject/web/resources/public/images directory, where myproject is the NetBeans IDE project directory containing your Billing Care customizations.
To change the default logo that appears on the login page, do the following:
Using the NetBeans IDE text editor, create an overrides-login.css file in the myproject/web/resources/public/css directory.
Ensure that the overrides-login.css file contains the location and size of your custom logo image file as shown in Example 9-3.
Example 9-3 Sample overrides-login.css File
/**
This is the CSS where an SDK developer can do out of box logo header changes.
Below example shows how to override the oracle logo that comes with
default Billing Care package.
**/
#logoHeader{
height: auto;
}
.logo-oracle {
background: url("../images/imagefile") no-repeat;!important;
margin: -3px 24px 0 12px;
width: 100px;
height: 80px;
float: left;
}
where imagefile references your custom logo image file located in your NetBeans project.
Adjust the margin, width, height, and float values in overrides-login.css so that your image renders properly.
Save and close the file.
To change the default logo in the header section that appears after you login, do the following:
Using the NetBeans IDE text editor, create an overrides.css file in the myproject/web/css directory.
Add the entries as shown in Example 9-3.
Change the following entry:
background: url("../images/imagefile") no-repeat;!important;
To this:
background: url(""../../resources/public/images/imagefile") no-repeat !important;
where imagefile references your custom logo image file located in your NetBeans project.
Adjust the margin, width, height, and float values in overrides.css so that your image renders properly.
Save and close the file.
Do one of the following:
If you are using an exploded archive for your shared library, log out of and back into Billing Care to see the new theme. See "About Using an Exploded Archive" for more information about using exploded archives.
Package your customizations shared library and deploy it to your Billing Care domain. Redeploy Billing Care and login to see the new theme. See "Packaging and Deploying Customizations" for more information on packaging and deploying your customizations.