Just like SAP, many companies have their own branding requirement even for internal used tools and applications. They want their own logo to be appeared, their own fonts to be used, their own colors to be brushed.
We support such kind of UI customization since BPC 10.1 NW initial release. Still, lots of customers are not aware of it and ask for more information in terms of how to do it. Here I will introduce the details and hope it's useful for people in such needs.
What can be customized
As illustrated below, following things can be customized.
example of after customization.
Not just things in home page, the UI elements in other pages can also be customized. For example, color and font in each page's tool bar and pop-up dialog boxes are open for customization as well.
after customization.
How to customize
Technically the customization is done in a CSS file, which looks like below.
There are many selectors in this CSS file. You need to know where to define what. Following table gives you a mapping of UI elements and selectors.
BPC 10.1 NW delivers two themes: standard (the default one, which is also called goldreflection internally) and high-contrast theme. You can customize any of them only or customize all. If you don't specify a prefix, you define at global level and your CSS code impacts all themes; if you specify a prefix, you only customize the particular theme.
Here is the mapping between theme name and CSS prefix.
Some sample code
Define your logo. Note the logo has a fixed height of 18 pixels. Your own logo will be resized proportionally to fit the height. The file type can be gif, jpg or png. And for your reference, the original SAP logo image is a 73x36 png file.
Change Background Color. Obviously, following code is only for the standard theme – Goldreflection
Change Background Image.
If you want to change application name and browser tab icon, you need a customize.json file and put following code into the file. Note the icon image should be a 32x32 ico file.
Sample files
To accelerate such customization, we also delivered sample files in your BPC installation. Here is how to get the sample files.
How to deploy
You need to rename the file name as customer.css and cutomize.json and upload them to your BPC web server, then activate them. Here are the detail steps (we create the files in server directly and paste your code into them).
Summary
In BPC 10.1 NW, with simple CSS writing, you are able to customize BPC web UI to your own theme to support your organization's branding need. Such customization is supported by the product, it will keep intact and work as before even if you upgrade to a later BPC support package. The solution is also independent of modelling technology (BPC Standard and BPC Embedded) as the web server is shared.
We support such kind of UI customization since BPC 10.1 NW initial release. Still, lots of customers are not aware of it and ask for more information in terms of how to do it. Here I will introduce the details and hope it's useful for people in such needs.
What can be customized
As illustrated below, following things can be customized.
- logo and application name, including the icon displayed in browser's tab
- Shell background. You can define a different color or use an image as the background.
- Icons at home page
- Name under each icon
- Separator line
- Content background color
- all font faces
example of after customization.
Not just things in home page, the UI elements in other pages can also be customized. For example, color and font in each page's tool bar and pop-up dialog boxes are open for customization as well.
after customization.
How to customize
Technically the customization is done in a CSS file, which looks like below.
/* ==================================================================================================================== */
/* Special CSS for Customer Start Here; */
/* Customer Can Modify Font Style(Size/Color/Family); Nav Icon; Page Background; Logo */
/* Customer's Modification Can Affect One Theme or All Themes */
/* ==================================================================================================================== */
/* ============================================================================================== */
/* For All Themes */
/* ============================================================================================== */
/* ======================================================================== */
/* Global Font Face */
/* ======================================================================== */
.sapUiBody * {
font-family: Times New Roman;
}
/* ======================================================================== */
/* Logo */
/* ======================================================================== */
.bpc-shell-logo {
background:url(img_c/logo_sample.png) no-repeat;
background-size:100%;
width:40px;
}
/* ============================================================================================== */
/* For Theme Goldreflection */
/* All Selector Should Begin by 'html[class*='goldreflection']' */
/* ============================================================================================== */
/* ======================================================================== */
/* Global Font Style */
/* ======================================================================== */
html[class*='goldreflection'] .sapUiBody * {
font-family: Century Gothic;
}
/* ======================================================================== */
/* Shell Background */
/* ======================================================================== */
html[class*='goldreflection'] .sapUiUx3ShellHeader,
html[class*='goldreflection'] .sapUiUx3ShellBgImg {
background:#213950;
}
html[class*='goldreflection'] .slideClass {
background-color:#F5F2E8;
}
/* ======================================================================== */
/* Homepage Top Nav Icon */
/* ======================================================================== */
html[class*='goldreflection'] .homeview-navigation-bar li:nth-child(2) {
background-image: url(img_c/home_bar_activities_sample.png);
}
html[class*='goldreflection'] .homeview-navigation-bar li:nth-child(3) {
background-image: url(img_c/home_bar_library_sample.png);
}
html[class*='goldreflection'] .homeview-navigation-bar li:nth-child(4) {
background-image: url(img_c/home_bar_consolidation_sample.png);
}
html[class*='goldreflection'] .homeview-navigation-bar li:nth-child(5) {
background-image: url(img_c/home_bar_administration_sample.png);
}
html[class*='goldreflection'] .homeview-navigation-bar li:nth-child(6) {
background-image: url(img_c/home_bar_reports_sample.png);
}
html[class*='goldreflection'] .homeview-navigation-bar li:nth-child(7) {
background-image: url(img_c/home_bar_documents_sample.png);
}
html[class*='goldreflection'] .homeview-navigation-bar li:nth-child(8) {
background-image: url(img_c/home_bar_temp_sample.png);
}
/* ======================================================================== */
/* Homepage Top Nav Title */
/* ======================================================================== */
html[class*='goldreflection'] .homeview-navigation-bar .sapUiUx3NavBarItemSel > a {
color:#921F1F;
}
html[class*='goldreflection'] .homeview-navigation-bar .sapUiUx3NavBarItem {
color:#B6AF9E;
}
/* ======================================================================== */
/* Shell Navigation Bar Line & Arrow */
/* ======================================================================== */
html[class*='goldreflection'] .sapUiUx3NavBar {
border-color:#AD754F;
}
html[class*='goldreflection'] .sapUiUx3NavBarArrow {
border-bottom-color:#AD754F;
}
/* ======================================================================== */
/* Workspace */
/* ======================================================================== */
html[class*='goldreflection'] .sapEpmUiControlsCustomToolBar {
background:#C9D6DB;
}
html[class*='goldreflection'] .sapEpmUiControlsWorkspaceLowerDiv > .sapUiSplitter > .sapUiVSplitterFirstPane {
background:#FFF;
}
html[class*='goldreflection'] .sapEpmUiControlsViewContainer {
background:#FFF;
}
/* ======================================================================== */
/* Dialog */
/* ======================================================================== */
html[class*='goldreflection'] .sapUiDlg {
background:#213950;
}
/* ============================================================================================== */
/* For Theme UX */
/* All Selector Should Begin by 'html[class*='ux']' */
/* ============================================================================================== */
/* ======================================================================== */
/* Global Font Style */
/* ======================================================================== */
html[class*='ux'] .sapUiBody * {
font-family: Tahoma;
}
/* ============================================================================================== */
/* For Theme HCB */
/* All Selector Should Begin by 'html[class*='hcb']' */
/* ============================================================================================== */
/* ======================================================================== */
/* Global Font Style */
/* ======================================================================== */
html[class*='hcb'] .sapUiBody * {
font-family: Trebuchet MS;
}There are many selectors in this CSS file. You need to know where to define what. Following table gives you a mapping of UI elements and selectors.
| Function Part | CSS Selector |
| All Font Face | .sapUiBody * |
| Logo | .bpc-shell-logo |
| Shell Background | .sapUiUx3ShellHeader, .sapUiUx3ShellBgImg |
| Content Background | .slideClass |
| Navigation Icons | .homeview-navigation-bar li:nth-child(2)/(3)/(4)… |
| Navigation Title (Highlight) | .homeview-navigation-bar .sapUiUx3NavBarItemSel > a |
| Navigation Title (Normal) | .homeview-navigation-bar .sapUiUx3NavBarItem |
| Navigation Line | .sapUiUx3NavBar |
| Navigation Arrow | .sapUiUx3NavBarArrow |
| Workspace Toolbar | .sapEpmUiControlsCustomToolBar |
| Workspace Left Pane Background | .sapEpmUiControlsWorkspaceLowerDiv > .sapUiSplitter > .sapUiVSplitterFirstPane |
| Workspace Right Pane Background | .sapEpmUiControlsViewContainer |
| Dialog Border/Header Background | .sapUiDlg |
BPC 10.1 NW delivers two themes: standard (the default one, which is also called goldreflection internally) and high-contrast theme. You can customize any of them only or customize all. If you don't specify a prefix, you define at global level and your CSS code impacts all themes; if you specify a prefix, you only customize the particular theme.
Here is the mapping between theme name and CSS prefix.
| Theme Name | Prefix in CSS |
| Gold Reflection | html[class*='goldreflection'] |
| High Contrast Black | html[class*='hcb'] |
Some sample code
Define your logo. Note the logo has a fixed height of 18 pixels. Your own logo will be resized proportionally to fit the height. The file type can be gif, jpg or png. And for your reference, the original SAP logo image is a 73x36 png file.
.bpc-shell-logo {
background:url(img_c/logo.png) no-repeat;
background-size:100%;
width:40px;
}Change Background Color. Obviously, following code is only for the standard theme – Goldreflection
html[class*='goldreflection'] .sapUiUx3ShellHeader,
html[class*='goldreflection'] .sapUiUx3ShellBgImg {
background:#213950;
}Change Background Image.
html[class*='goldreflection'] .sapUiUx3ShellHeader,
html[class*='goldreflection'] .sapUiUx3ShellBgImg {
background:url(img_c/background.png) no-repeat;
}If you want to change application name and browser tab icon, you need a customize.json file and put following code into the file. Note the icon image should be a 32x32 ico file.
{
"title": "Business Planning and Consolidation",
"titleImage": "themes/bas/img_c/saplogo.ico"
}Sample files
To accelerate such customization, we also delivered sample files in your BPC installation. Here is how to get the sample files.
- Logon to your application server with enough privilege.
- Open transaction SE80
- Navigate to “Repository Browser”, and open BSP Application “bpcwebclient”
- Go to “bpcwebclient/Page Fragments/themes/bas/” to download the sample css file (customer_sample.css) or copy the code.
- Go to “bpcwebclient/Page Fragments/” to download the sample JSON file (customize_sample.json) or copy the code.
How to deploy
You need to rename the file name as customer.css and cutomize.json and upload them to your BPC web server, then activate them. Here are the detail steps (we create the files in server directly and paste your code into them).
- Logon to your application server with enough privilege.
- Open transaction SE80
- Navigate to “Repository Browser”, and open BSP Application “bpcwebclient”
- Right click “Page Fragments”, and then click “Create” on popup context menu.
- Enter “themes/bas/customer.css” as page name, and select “Page Fragment” as page type, and then click save button to save. (refer to screenshot below)
- Copy the content of your local customer.css into the file, and then activate it (Ctrl + F3).
- Goto “MIMEs/themes/base/img_c/”.
- Right click folder “img_c”, and then click “Import MIME objects” on popup context menu.
- Upload your image files one by one.
- Right click “Page Fragments”, and then click “Create” on popup context menu.
- Enter “customize.json” as page name, and select “Page Fragment” as page type, and then click save button to save.
- Copy the content of your local customize.json into the file, and then activate it (Ctrl + F3).
Summary
In BPC 10.1 NW, with simple CSS writing, you are able to customize BPC web UI to your own theme to support your organization's branding need. Such customization is supported by the product, it will keep intact and work as before even if you upgrade to a later BPC support package. The solution is also independent of modelling technology (BPC Standard and BPC Embedded) as the web server is shared.
- SAP Managed Tags:
4 Comments
