Customize Camunda UI

Dear forum, has anyone successfully customize Camunda webapps? I’m talking about changing the font family, font colour, logo, etc. I checked the official docs (https://docs.camunda.org/manual/latest/webapps/cockpit/extend/configuration/ ) and it seems it only takes modifying a css file.
Problem I’m having is with the last step: “Compiling with Grunt”. I’m no expert in grunt, do I need to create a package.json directory? Which location exactly?

Thanks,
Matias

Following the documentation you linked, if you’re just updating user-styles.css, you shouldn’t need grunt. For example, from my Tomcat installation, if I update webapps/camunda/app/cockpit/styles/user-styles.css and then reload the Cockpit page, I see the customizations right away (notice the awful blue header).

Are you attempting to do more advanced customizations?

@jgigliotti how do you apply custom css themes, if the camunda webapps is embedded in springboot applications?

Good question… haven’t done this myself, but I’d start with the suggestions in this thread.

Hi,

As per @jgigliotti’s suggestion - one way is you effectively rebuild the tasklist and cockpit jars locally with your modified look and feel. The consulting code shows a number of ways to do this…

Once you have your customr jar files, change the pom in your springboot to include your custom cockpit rather than the default one…

regards

Rob

Hi, i tried to edit the file but i don’t see any changes on the web app.

For now i only tried to modify the logo (see below the background-image url). I inspected the site and i can see that it is using the newly updated css (see image below).

Any ideas? How does your css look like after you changed to that awful blue header :slight_smile: ?

/*
.navbar-brand {
text-indent: -999em;
background-image: url(“C:\Users…\LOGO_RGB_MR.png”);
width: 80px;
}

[cam-widget-header] {
border-bottom-color: blue;
}
*/

Hi
You may need to remove the comment markers "/**"and ‘*/’ as these comment out the contained block of CSS style…

Regards

Rob

1 Like

Hi, thanks all for your replies, I managed to customize several items of the UI, however I can’t seem to change the logo. I added the path to the background-image property inside user-style.css but the logo is still the same. Only thing I noticed is this msg while inspecting the website:
“Not allowed to load local resource”

This seems to be a security restriction in modern browsers so my question is has anyone successfully changed the logo? If so, do you have to make any additional steps besides changing the css file?

Thanks again,
matias

Hi @matiass,

the logo has to be part of the project and packaged in the war.

Have a look at this example: https://github.com/camunda-consulting/code/blob/master/snippets/camunda-webapp-customized/src/main/webapp/app/cockpit/styles/user-styles.css#L15.

The referenced picture is in the folder images.

Hope this helps, Ingo

Hallo Ingo, forgive my ignorance but you mean i should simply move my logo to the folder images?
I tried that but now i’m getting “Not Found” since the browser is trying to show an image by doing:
GET http://localhost:8080/camunda/app/cockpit/images/some-logo.png and this is returning 404 Not found.

Vielen Danken,
Matias.

I think you just need to make sure it’s in an images folder under the cockpit application. To Ingo’s point, I think if you ever re-deploy a new version of Cockpit, you’ll want to make sure your customizations don’t get wiped out.

Hi @matiass,

in other words than @jgigliotti said: the browser is not allowed to show pictures from the local hard drive anymore (security!). That’s why the file must be part of the application.

Hope this helps, Ingo

Hi @Ingo_Richtsmeier and @jgigliotti, thanks for your answers i think i narrowed down the problem to the cockpit re-deploy.
I did the following:

  • Clone the code snippets from GIT
  • Inside camunda-webapp-customized/…/Cockpit/images/ changed the logo for a different one
  • Run mvn install

Here is where it starts to get messy for me, the example is for JBoss, I’m using Tomcat so what i had to do some changes. Attached is my pom.xml

pom.xml (1.1 KB)

This is the error i get when running mvn install:

[INFO] ------------------------------------------------------------------------
[INFO] BUILD FAILURE
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 18.568 s
[INFO] Finished at: 2020-06-09T02:40:55+02:00
[INFO] ------------------------------------------------------------------------
[ERROR] Failed to execute goal on project camunda-webapp-customized: Could not resolve dependencies for project com.camunda.demo:camunda-webapp-customized:war:1.0.0-SNAPSHOT: Could not find artifact org.camunda.bpm.webapp:camunda-webapp:war:1.0.0-SNAPSHOT → [Help 1]
[ERROR]
[ERROR] To see the full stack trace of the errors, re-run Maven with the -e switch.
[ERROR] Re-run Maven using the -X switch to enable full debug logging.
[ERROR]
[ERROR] For more information about the errors and possible solutions, please read the following articles:
[ERROR] [Help 1] DependencyResolutionException - Apache Maven - Apache Software Foundation

Any ideas? Do you have a sample pom.xml i can take a look?

For the camunda-webapp dependency, you need to reference the version of Camunda you’re using, not the version of your app… e.g.

<properties>
    <camunda.version>7.13.0</camunda.version>
</properties>

<dependencies>
    <dependency>
        <groupId>org.camunda.bpm.webapp</groupId>
        <artifactId>camunda-webapp</artifactId>
        <version>${camunda.version}</version>
        <type>war</type>
        <scope>runtime</scope>
    </dependency>
    ...
</dependencies>

Thanks @jgigliotti i was able to make it work. So the overall process to customize the webapps is:

  1. Modify static files (css, images, js scripts), plugins, etc…
  2. Create the war file (camunda-webapps-customized.war is created)
  3. Move the war file to the webapps folder (in case of Apache-Tomcat)
  4. The war file will be deployed automatically (camunda-webapss-customized/ folder is created)
  5. Replace the previous webapps/camunda/ directory with the new customized one
  6. Restart camunda server (start-camunda.bat)

Is this correct?

I’m not sure I completely follow your steps. If you’re making your customizations and packaging them in steps #1 and #2, what are you doing in step #5? Once you deploy the war and start tomcat, it will take care of unpacking the war and your customizations will be deployed with it.

It’s because of my folder structure and for sure it can be optimized.
I have a separate folder structure where i run the war creation. It contains:

build.xml
pom.xml
src/main/webapp/app/cockpit (inside there is an images, styles folders and index.html)
target/

Here is where i edit the static files and run mvn install to create the war file.

On another folder i have the camunda installation path, in particular the webapps folder where if i copy the above war file it will be deployed.

Probably i can get rid of this duplication and edit the files under the camunda installation path directly and run mvn install from webapps folder (so i don’t have to maintain to double folder structure and moving war files from here and there)

A simple approach would be to implement a servlet filter and return your custom css file from there - non-invasive and if caching is done properly, performance is just fine.

@Override
protected void doFilterInternal(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, FilterChain filterChain) throws ServletException, IOException {
	if (httpServletRequest.getRequestURI().endsWith("styles/user-styles.css")) {
		httpServletResponse.setHeader("Content-Type", "text/css");
		IOUtils.copy(getClass().getResourceAsStream("/camunda/styles/user-styles.css"), httpServletResponse.getOutputStream());
		return;
	}
		
	filterChain.doFilter(httpServletRequest, httpServletResponse);
}
1 Like