Add a custom face to Forms

Flowable Designer
1

I know the form definitions are json files, how can customize the face (html, css) of such forms to change color or add a company logo?

Please tell me where and which files should I add or modify.
Thanks.

2

Hi!

Do you can personalize your modeler as CSS and images, I think.

In file tomcat/webapps/flowable-task/scripts/app-cfg.js add:

FLOWABLE.CONFIG.resources = {
’*’: [
{
‘tag’: ‘link’,
‘rel’: ‘stylesheet’,
‘href’: FLOWABLE.CONFIG.webContextRoot + ‘/custom-style.css?v=1.0’
}
]
};

for load your recourses.

3

Do you think changing the whole look alike of the flowable-task is a good choice?

So I don’t have to make stuff programmatically

4

Yes, I thing as more eficient and easy.

5

Do you know any public example on github or so where the lookalike of flowable task has been changed?

6

HI!, I don’t know, but a little example for /flowable-task is:

In your file app-cfg.js add:

FLOWABLE.CONFIG.resources = {
‘*’: [
{
‘tag’: ‘link’,
‘rel’: ‘stylesheet’,
‘href’: ‘styles/theme-2.css’
}
]
};

And create a new file named theme-2.css in styles folder and add:

.app-link-icon.theme-2,
.app.theme-2 {
background-color: #7FFFD4;
}
.app.theme-2 {
border-color: #7FFFD4;
text-shadow: 1px 1px #FFE4C4;
}

.app-indicator.theme-2 {
background: #7FFFD4;
background: -moz-linear-gradient(left, rgba(125,169,176,0) 0%, rgba(125,169,176,0.02) 1%, rgba(125,169,176,1) 30%, rgba(125,169,176,1) 100%); /* FF3.6+ /
background: -webkit-linear-gradient(left, rgba(125,169,176,0) 0%,rgba(125,169,176,0.02) 1%,rgba(125,169,176,1) 30%,rgba(125,169,176,1) 100%); / Chrome10+,Safari5.1+ /
background: -ms-linear-gradient(left, rgba(125,169,176,0) 0%,rgba(125,169,176,0.02) 1%,rgba(125,169,176,1) 30%,rgba(125,169,176,1) 100%); / IE10+ /
background: linear-gradient(to right, rgba(125,169,176,0) 0%,rgba(125,169,176,0.02) 1%,rgba(125,169,176,1) 30%,rgba(125,169,176,1) 100%); / W3C /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#00269abc’, endColorstr=’#269abc’,GradientType=1 ); / IE6-9 */
}

.app-indicator.theme-2 > .btn-group {
border-color: #FFE4C4;
}

.app-indicator.theme-2 > .btn-group .btn-default:hover, .app-indicator.theme-2 > .btn-group .btn-default:focus {
background-color: #FFE4C4;
}

.app.theme-2 .actions+.dropdown-menu li:hover a {
background-color: #FFE4C4;
}

.app.theme-2 .backdrop i {
color: #F1adb4;
}

.app.theme-2 .logo i {
color: #FFE4C4;
}

Create a new app with theme-2. This is the new aspect:

image

Regards.

7

Hi,

I have tried to apply CSS on my forms under flowable-engage. I followed following steps:

There was no scripts folder under flowable\tomcat\webapps\flowable-engage

I have created flowable\tomcat\webapps\flowable-engage\scripts\app-cfg.js and add code

FLOWABLE.CONFIG.resources = {
‘*’: [
{
‘tag’: ‘link’,
‘rel’: ‘stylesheet’,
‘href’: ‘./mystyle.css’
}
]
};

I have also created mystyle.css under

flowable\tomcat\webapps\flowable-engage\WEB-INF

mystyle.css

body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

label {
cursor: pointer;
color: #555;
display: block;
padding: 10px;
margin: 3px;
}

input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
background-color: #e74c3c;
}

Still CSS is not getting applied on forms under flowable-engage

8

HI Roohit,

This forum is for the open source Flowable. What you’re asking about is the enterprise version - best you ask in the enterprise forums: https://forum.flowable.com/ - if you’re playing with the trial version, there’s a topic for that.

Cheers
Paul.