cancel
Showing results for 
Search instead for 
Did you mean: 

Custom Theme Fiori Launchpad - CSS parameter

jvanattenhoven
Participant
0 Kudos

I've been working on branding our Launchpad using the theme designer. For the moment that works fine, except for 1 important thing: the title in the shell. I found some CSS parameters online, but they don't seem to work. Related parameters do work for the icons in the shell header such as the search bar icon.

Essential is that I want the shell bar to have a different background color than the content part of the Launchpad. There are theme parameters for that.

But there are no theme parameters for entering different text colors for header vs. content. This means that the contrast between background and text will always be bad in either shell header of content.

So in short, I would like to see "Beginscherm" on top to be in white text (see picture).

Some of the following CSS parameters work; the one for the title doesn't:

// Change the background color of the header
.sapUshellShellHeader {background: #1d8db0;}
// Change the background color of the header (search icon, avatar and user name)
.sapUshellShellHeadEnd {background: #1d8db0;}
// Change text color and text shadow of search icon
.sapUshellShellHeadItm span {
    color: #fff;
}
// Change text color and text shadow of avatar and user name
.sapUshellShellHeadAction {
    color: #fff;
}
.sapUshellShellHeaderTitleColor{
    color: #fff;
}
.sapUshellShellHeadTitle{
    color: #fff;
}
.sapUshellContainerTitle{color: #fff;}

Accepted Solutions (0)

Answers (1)

Answers (1)

0 Kudos

This is how I did.

// Change the background color of the header

.sapUshellShellHeader {background: #000;}

// Change the background color of the header (search icon, avatar and user name)

.sapUshellShellHeadEnd {background: #000;}

// Change text color and text shadow of search icon

.sapUshellShellHeadItm span {

color: #fff;

}

// Change text color and text shadow of avatar and user name

.sapUshellShellHeadAction {

color: #fff;

}

.sapUshellHeaderTitleColor{

color: #fff;

}

.sapUshellHeadTitle{

color: #fff;

}

.sapUshellContainerTitle{color: #fff;}