How to change logo and header color of TaskList UI in Camunda 7?

Camunda 7 Topics Discussion & Questions
1

Hi,
I am using spring boot Camunda 7. I need to change the Task List UI logo and header color. Basically I need to override the user-styles.css file of TaskList application.

Could anyone tell me where to add the user-styles.css file in Spring boot embedded Camunda embedded application?

Suggest me the folder structure.

Thanks in advance!
Regards,
Tiru

2

Hello my friend!

Inside src/main/resources you should have the META-INF folder.

Add a resources folder, and a webjars.
I’ll send you an image of my project as an example:

image

Place the logo image you want in the “assets/images” folder.

You will need to create this folder structure, and add the “user-styles.css” inside the “styles” folder. Notice that you will have a folder for each of the webapps (cockpit / tasklist / admin and welcome page).

To run your project you will also need to add this dependency in Maven (if you are using maven… if it is gradle, I suggest searching for it).

< dependency >
< groupId >org.webjars</ groupId >
< artifactId >webjars-locator-core</ artifactId >
</ dependency >

Place the logo image you want in the “assets/images” folder.

You will need to create this folder structure, and add the “user-styles.css” inside the “styles” folder. Notice that you will have a folder for each of the webapps (cockpit / tasklist / admin and welcome page).

And code this on user-styles.css:

.navbar-brand {
   text-indent: -999em;
   background-image: url(../assets/images/my-logo.png);
   background-repeat: no-repeat;
   background-size: 210px;
   background-position: center;
   width: 230px;
}

If I managed to help you in any way, please gimme your “like <3” and mark it as “solved”.

If you have any questions, don’t hesitate to contact me :smiley:
I hope this helps.

Regards.
William Robert Alves

1 Like
3

Camunda logo and my logo both are coming.
image

4

Hi @Tiruvenkatasamy_Bask,

you have to create your own camunda-webapps with maven overlays like here: https://github.com/camunda-consulting/camunda-7-code-examples/tree/main/snippets/springboot-customized-webapps

Hope this helps, Ingo

5

Hi Ingo,
Here is my folder structure.

image
image1034Ă—364 32.9 KB

I am getting the both the images(Camunda logo and custom image)
I have added the pom.xml. Could you tell me that any dependency needs to be added in pom.xml?


4.0.0
Email
Email
0.0.1-SNAPSHOT

<properties>
	<camunda.spring-boot.version>7.18.0</camunda.spring-boot.version>
	<spring-boot.version>2.5.4</spring-boot.version>
	<maven.compiler.source>11</maven.compiler.source>
	<maven.compiler.target>11</maven.compiler.target>
</properties>

<dependencyManagement>
	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-dependencies</artifactId>
			<version>${spring-boot.version}</version>
			<type>pom</type>
			<scope>import</scope>
		</dependency>
	</dependencies>
</dependencyManagement>

<dependencies>
	<dependency>
		<groupId>org.camunda.bpm.springboot</groupId>
		<artifactId>camunda-bpm-spring-boot-starter-webapp</artifactId>
		<version>${camunda.spring-boot.version}</version>
	</dependency>
	<!-- //for accessing camunda api's -->
	<!-- //for connectors -->
	<dependency>
		<groupId>org.camunda.bpm.springboot</groupId>
		<artifactId>camunda-bpm-spring-boot-starter-rest</artifactId>
		<version>${camunda.spring-boot.version}</version>
	</dependency>

	<dependency>
		<groupId>org.camunda.connect</groupId>
		<artifactId>camunda-connect-http-client</artifactId>
		<version>1.3.0</version>
	</dependency>
	<dependency>
		<groupId>org.camunda.connect</groupId>
		<artifactId>camunda-connect-soap-http-client</artifactId>
		<version>1.3.0</version>
	</dependency>
	<dependency>
		<groupId>org.camunda.bpm</groupId>
		<artifactId>camunda-engine-plugin-connect</artifactId>
		<version>7.16.0</version>
	</dependency>

	<dependency>
		<groupId>com.h2database</groupId>
		<artifactId>h2</artifactId>
	</dependency>
	<dependency>
		<groupId>com.sun.xml.bind</groupId>
		<artifactId>jaxb-impl</artifactId>
		<version>2.3.5</version>
	</dependency>
	<!--for email -->
	<dependency>
		<groupId>org.camunda.bpm.extension</groupId>
		<artifactId>camunda-bpm-mail-core</artifactId>
		<version>1.2.0</version>
	</dependency>
	<dependency>
		<groupId>com.sun.mail</groupId>
		<artifactId>javax.mail</artifactId>
		<version>1.4.5</version>
	</dependency>
	<dependency>
		<groupId>org.codehaus.groovy</groupId>
		<artifactId>groovy-jsr223</artifactId>
		<scope>runtime</scope>
	</dependency>
	<dependency>
		<groupId>org.webjars</groupId>
		<artifactId>webjars-locator-core</artifactId>
	</dependency>
</dependencies>

<build>
	<plugins>
		<plugin>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-maven-plugin</artifactId>
			<version>${spring-boot.version}</version>
			<configuration>
				<layout>ZIP</layout>
			</configuration>
			<executions>
				<execution>
					<goals>
						<goal>repackage</goal>
					</goals>
				</execution>
			</executions>
		</plugin>
	</plugins>
</build>