Unable to hide app icon from header bar in Web App

,
1

I am exploring branding with Cumulocity’s Web SDK v.1019. I want to remove the app icon that appears in the navigation and header pannel.

image

image

I have identified the class that holds the icons as .app-noicon and have tried to hide it via LESS in the styles.less file but, so far, it has only applied to the navigation bar.

styles.less

@import '~@c8y/style/main.less';

.app-noicon {
    display: none;
}

Is this one of those cases where I have to deploy the application first to Cumulocity to see the effects?

2

Hi @luclib,

this is again pretty simple CSS functionality that we expect someone who is writing custom CSS to take care on their own.
Your CSS rule is overruled by a more specific rule. You would need to use a more specific identifier.:

image
image1186×543 38 KB

A more specific identifier could look like this:

.header-bar .app-noicon, .app-noicon {
  display: none;
}

As an alternative to a more specific identifier, you can also use:

.app-noicon {
  display: none !important;
}

Note that using just .app-noicon or .header-bar .app-noicon as a selectors might not be the smartest idea as this could also affect places that you might not intended to touch (e.g. the application switcher). Try to be as specific with the selectors as you can in case you only want to target specific places.

Regards,
Tristan

3

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.