Camunda Webpp UI Customization

I notice that there is a camunda symbol displayed in the top left of the navigation bar. I can see that this is generated from the below code in camunda-commons-ui/resources/shared/_mixins.less

.brand-logo:before {
color: @brand-primary;
display: inline-block;
font-family: “bpmn”;
font-style: normal;
font-weight: normal;
content: ‘\e831’;
}

I wish to change/remove this “before”, because the character is over the top of my brand image (added using .navbar-brand {background-image} ). However, I cannot see how to change the before. The _mixins.less file is generated, so I cannot edit it directly and if I overwrite the “before” in the user-styles.css as the character appears over this.

Can anyone tell me how I can modify this before? I have seen the documentation here, but this does not help as I want to include my own brand icon, but do not want to hide the text (as suggested) (I am using Camunda 7.7.0)

Hi @jon
The documentation you read is still valid in your case.
All you need to do if you don’t want to hide the text is to remove the line after the comment “hides the “Camunda Tasklist”” text.

.navbar-brand {
/* hides the “Camunda Tasklist” text /
text-indent: -999em;
/
put your logo /
background-image: url(./path/to/the/logo.png);
/
sets the width to match the logo’s width */
width: 80px;
}

Thanks for your reply. I have tried this, but the Camunda character that is created .brand-logo:before still appears, and worse, it actuall appears over the top of the background-image. I cannot see how to remove the .brand-logo:before character but leave the “Camunda Tasklist” text

Hi,

I have downloaded a full-distribution Camunda BPM (shared process engine) and I develop my process applications that run on this engine.
Where do I change the logos in this distribution? I can’t find the folders you mention.
Is it on the code of the webapps itself? Then how is this reflected to my downloaded distribution?

Thanks

I had the same problem and fixed it by adding
.brand-logo{
visibility: hidden!important;
}
to user-styles.css.
I hope its not a hack :slight_smile: