9/28/2017 Customize the Fiorified BI Launchpad in BOE 4.

2 | SAP Blogs

Products
Products Industries
Industries Support
Support Training
Training Community
Community Developer
Developer Partner
Partner

About
About

Home / Community / Blogs + Actions

Customize the Fiorified BI

Launchpad in BOE 4.2
September 27, 2017 | 7 Views |

Younes Hasba
more by this author

SAP BusinessObjects Business Intelligence platform

bi launchpad customize | SAP BusinessObjects Launchpad

share
0 share
2 tweet share
1 2
like

Follow

https://blogs.sap.com/2017/09/27/customize-the-fiorified-bi-launchpad-in-boe-4.2/ 1/6
9/28/2017 Customize the Fiorified BI Launchpad in BOE 4.2 | SAP Blogs

Starting from BI 4.2 SP4 its possible to use the new Fiorified
Launchpad, which is a great enhancement of the current BI
Launchpad.

At the begining i started by reading the very good

Blog Bharath B N

Fiorified BI Launchpad in BOE 4.2

Which goes through the details of the fiorifed Launchpad

and the Settings needed to be done.

Now while having the new look but not being able to use it is
as of now not possible customize the look of the new
Launchpad; i started looking how can we change at least the
Color and the SAP Logo i.o. to make it ready to rollout.

In my first blog ill share with you my findings and will give
you first hints how you can do this.

This is only a workaround until we have the final solution

from SAP, everyone who has alreay worked with the Fiori
Launchpad knows already the UI Theme Designer, so i hope
that SAP will deliver same tool in order to customize
everything in the new Launchpad.

As said, my goal was only to change the blue colour to grey

and the company logo.

Ill not go through every thing, so if you want you can modify
the css files as per your requirement.

Note: before starting, please make sure you make a backup of the file

going to change.

https://blogs.sap.com/2017/09/27/customize-the-fiorified-bi-launchpad-in-boe-4.2/ 2/6
9/28/2017 Customize the Fiorified BI Launchpad in BOE 4.2 | SAP Blogs

There are 2 css Files which i came accross which you can
find in this folder:

Homepage.css
Logonpage.css

..\tomcat\webapps\BOE\WEB-
INF\eclipse\plugins\webpath.Bing\web\com\sap\bing\css

Place your Company Logo in following Folder i.e. here

company_logo.png:

..\tomcat\webapps\BOE\WEB-
INF\eclipse\plugins\webpath.Bing\web\com\sap\bing\images

Now you have to change the following Classes:

In the Logonpage.css
Note: the width and height here correspond to the Height
and Width of your Logo

.BILP-Logo
{
width: 140px !important;
height: 31px !important;
top:0.75rem !important;
bottom: 0.75rem !important;
left:1rem !important;
right: 1rem !important;
position:fixed;
background-image : url("../images/company_logo.png") !i
}

Change the Background Color:

https://blogs.sap.com/2017/09/27/customize-the-fiorified-bi-launchpad-in-boe-4.2/ 3/6
9/28/2017 Customize the Fiorified BI Launchpad in BOE 4.2 | SAP Blogs

Note: Change the linear-gradient or put your own CSS to

change the background.

.BILP-launchpadbackground{
background-image: linear-gradient(to bottom,#ffffff,#cc
opacity: 1;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

In the Homepage.css
Note: Change the Width and Height as per your Company
Logo

.BILP_logo{
padding-left: 0.5rem;
padding-right: 45px;
max-height: 2.5rem;
max-width: 6rem;
vertical-align: middle !important;
height: 31px !important;
width: 140px !important;
/* position: relative; */
top: 6px;
margin-left:0.5rem !important;
background-image: url("../images/company_logo.png")
}

Note: please clear your browser cache , otherwise youll see no differe

doing the changes.

Result:

https://blogs.sap.com/2017/09/27/customize-the-fiorified-bi-launchpad-in-boe-4.2/ 4/6
9/28/2017 Customize the Fiorified BI Launchpad in BOE 4.2 | SAP Blogs

Alert Moderator

https://blogs.sap.com/2017/09/27/customize-the-fiorified-bi-launchpad-in-boe-4.2/ 5/6
9/28/2017 Customize the Fiorified BI Launchpad in BOE 4.2 | SAP Blogs

Be the first to leave a comment

Add Comment

Share & Follow

Privacy Terms of Use Legal Disclosure Copyright Trademark Sitemap Newsletter

https://blogs.sap.com/2017/09/27/customize-the-fiorified-bi-launchpad-in-boe-4.2/ 6/6