Skip to Content

Change launchpad title color

When working with the Theme Designer, there is only one variable for the text color for both the title bar text and the anchor links that appear immediately below it. However, you can set different backgrounds for these elements, and so you may not want to use the same color for both.

I spent about 5 hours tracing through the javascript events to find the less files that were being compiled and found this (which controls the anchor items, notice where it sets the anchor item text color to @sapUiShellTextColor and the second code snippet below, which controls the shell

/* START "AnchorItem.less" */
/* ============================================= */
/* CSS for control sap.ushell/AnchorItem.control */
/* ============================================= */
@sapUshellAnchorItemNotRenderedColor: rgba(255,255,255, 0.5);


/* AnchorItem Dashboard */
//[Tags "Color"]
//[Description "Anchor bar text color"]
@sapUshellAnchorItemTextColor: @sapUiShellTextColor;


.sapUshellAnchorItem {
  font-family: @sapFontFamily;
  font-size: @sapMFontHeader6Size;
  font-weight: @sapUiFontHeaderWeight;
  color: @sapUshellAnchorItemTextColor;
  opacity: 1;
}
/* START "ShellHeader.less" */
/* ======================================================== */
/* CSS for sap.ui.unfied.ShellHeader.control (bluecrystal)  */
/* ======================================================== */
/* General Header Title Color */
... lines omitted...

.sapUshellHeadTitle{
  color: @sapUiShellTextColor;
}

So without using Custom CSS/LESS, which is not recommended, I don't see any way to change these colors independently, since even though AnchorItem has a color property set to @sapUshellAnchorItemTextColor, that property has been linked to @sapUiShellTextColor.

This is SAPUI5 1.44.29.

Can anybody suggest a different workaround other than custom LESS/CSS?

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • Feb 22 at 03:31 PM

    Try the following CSS :

    .sapMGT.OneByOne{

    background : black;

    }

    Add comment
    10|10000 characters needed characters exceeded