User-Style.css in 7.4

[webcyberrob]

Hi guys,

Ive used user-style.css in 7.4 successfully to change Tasklist look and feel. I have not been successful in 7.4. Is there a new trick to changing Tasklist style in 7.4?

regards

Rob

[Valentin Vago]

Hi Rob,

I guess you meant that it worked in 7.3 but not 7.4. Right?

Cheers,
Valentin

[Valentin Vago]

Hi again,

after digging a bit, I found out that the `user-styles.css` provided (as well as the documentation about its usage) should be slightly adapted. Nothing fancy.

The tasklist now use the `cam-header-widget` which means that some CSS selectors have to be adapted to match the new HTML scaffolding.

e.g.: in the `user-styles.css`, if you want to change the logo, it would look like:

[cam-widget-header] .navbar-brand {
  background-image: url(../images/your-app-logo.png);
}

I created an JIRA issue for that: https://app.camunda.com/jira/browse/CAM-5109

Cheers,

Valentin

[webcyberrob]

Thanks Valentin - yes I meant it worked in 7.3 but not 7.4. Thanks for the investigation and update.

regards

Rob

[Falko Menge]

Hi Vale,

changing the logo worked for me, but I couldn't figure out how to change this bit of CSS code:

.navbar-collapse,

.navbar-default,

.navbar-right > .divider-vertical,

.navbar-default .navbar-collapse,

.navbar-default .navbar-nav>.open>a,

.navbar-default .navbar-nav>.open>a:hover,

.navbar-default .navbar-nav>.open>a:focus {

  background-color: #009edf;

  border-color: #009ee0;

}

Here is the code of our consulting example with your patch applied:

https://github.com/camunda/camunda-consulting/tree/camunda-webapp-customized-7.4.0/snippets/camunda-webapp-customized

To try this out grab a wildfly distro of Camunda BPM and run:

mvn clean wildfly:deploy

Cheers,

Falko

[Valentin Vago]

Hallo Falko,

what you try to achieve is probably something like (for the 7.4):

[cam-widget-header] {

  background-color: #009edf;

  border-color: #006E99;

}

[cam-widget-header] > [ng-transclude] {

  border-right-color: rgba(0, 0, 0, 0.2);

}

[cam-widget-header] > .cam-nav {

  border-left-color: rgba(255, 255, 255, 0.5);

}

[cam-widget-header] .navbar-nav > .open > a,

[cam-widget-header] .navbar-nav > .open > a:hover,

[cam-widget-header] .navbar-nav > .open > a:focus {

  background-color: #006E99;

}

I made the test on my development environment and it looks like:

Should you have further questions, do not hesitate, I will update the example and the docs today.

Cheers,

Vale

[Falko Menge]

That solved it. Thank you, very much!