CODEWITHSUNDEEP
csssapui5
Jaro
Jaro

Reputation: 1754

Change color of back button in the page header

I want to change color (e.g. to red) of back button in the page header, please look in the picture:

enter image description here

When I used the css bellow:

.sapUiIcon:before {
    color: red;
}

It works but it changed all sapUiIcons as:

enter image description here

I would like to change just back button color but in the all app pages, so it can be applied globally for all back buttons. Probably there will be solution for approaching specific back button in the specific page header and apply css style, but I would prefer global solution, one css class for all pages if it is possible. Thanks for any hint.

EDITED 13:15 160517 (added back button element):

enter image description here

EDITED 14:07 160517 added woring demo, please try the css styling in the test.css file.

Upvotes: 0

Views: 871

Answers (3)

Kyle
Kyle

Reputation: 612

Per SAP standards, do not override control class styling. See Developer Guide

If you want a red nav-back button on your page, try using sap.m.Bar.

<Page showHeader="false">
    <Bar design="Header">
        <contentLeft>
            <core:Icon src="sap-icon://nav-back" color="red" press="onNavBack"/>
        </contentLeft>
        <contentMiddle>
            <Title text="Page Title"/>
        </contentMiddle>
    </Bar>
    <content>

    </content>
</Page>

This isn't a global solution like you've requested, but the best solution to stay within SAP standards.

Upvotes: 0

santhosh
santhosh

Reputation: 476

Add (nav-color) class to the desired page and extend the selector.

.nav-color button[title="Back"] .sapUiIcon:before{
  color: red!important;
 }



var oPage = new sap.m.Page({
    title : "Page title: ChartContainer",
    enableScrolling : false,
    showNavButton: true,
    content : [fixFlex]
});

oPage.addStyleClass("nav-color");

Upvotes: 1

achwilko
achwilko

Reputation: 804

Based on your screenshots, I would try using below:

.sapMBtnIconLeft.sapUiIcon::before { color: red }

I guess HTML class ".sapMBtnIconLeft" indicates arrow left icon, so using together with ".sapUiIcon" will increase specificity a little bit ;-)

Upvotes: 0

Related Questions