# Add a custom face to Forms

**URL:** <https://forum.flowable.org/t/add-a-custom-face-to-forms/1326>\
**Category:** Flowable Designer\
**Created:** [December 12, 2017, 4:06pm UTC](https://forum.flowable.org/t/add-a-custom-face-to-forms/1326 "2017-12-12T16:06:35Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![seq2seq](https://avatars.discourse-cdn.com/v4/letter/s/0ea827/32.png) [@seq2seq](https://forum.flowable.org/u/seq2seq)\
**Post date:** [December 12, 2017, 4:06pm UTC](https://forum.flowable.org/t/add-a-custom-face-to-forms/1326/1 "2017-12-12T16:06:35Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![fegorama](https://yyz1.discourse-cdn.com/flex035/user_avatar/forum.flowable.org/fegorama/32/313_2.png) [@fegorama](https://forum.flowable.org/u/fegorama)\
**Post date:** [December 12, 2017, 4:45pm UTC](https://forum.flowable.org/t/add-a-custom-face-to-forms/1326/2 "2017-12-12T16:45:50Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![seq2seq](https://avatars.discourse-cdn.com/v4/letter/s/0ea827/32.png) [@seq2seq](https://forum.flowable.org/u/seq2seq)\
**Post date:** [December 12, 2017, 10:01pm UTC](https://forum.flowable.org/t/add-a-custom-face-to-forms/1326/3 "2017-12-12T22:01:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![fegorama](https://yyz1.discourse-cdn.com/flex035/user_avatar/forum.flowable.org/fegorama/32/313_2.png) [@fegorama](https://forum.flowable.org/u/fegorama)\
**Post date:** [December 13, 2017, 11:39am UTC](https://forum.flowable.org/t/add-a-custom-face-to-forms/1326/4 "2017-12-13T11:39:45Z")

</div>

Yes, I thing as more eficient and easy.

---

<div class="post-metadata">

**Author:** ![seq2seq](https://avatars.discourse-cdn.com/v4/letter/s/0ea827/32.png) [@seq2seq](https://forum.flowable.org/u/seq2seq)\
**Post date:** [December 15, 2017, 12:30am UTC](https://forum.flowable.org/t/add-a-custom-face-to-forms/1326/5 "2017-12-15T00:30:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![fegorama](https://yyz1.discourse-cdn.com/flex035/user_avatar/forum.flowable.org/fegorama/32/313_2.png) [@fegorama](https://forum.flowable.org/u/fegorama)\
**Post date:** [December 26, 2017, 10:19am UTC](https://forum.flowable.org/t/add-a-custom-face-to-forms/1326/6 "2017-12-26T10:19:12Z")

</div>

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](https://canada1.discourse-cdn.com/flex035/uploads/flowable/original/1X/73fbf9eaf452aa4e86be60ce6fca2dc7572eeaa8.png)

Regards.

---

<div class="post-metadata">

**Author:** ![rohit2910](https://avatars.discourse-cdn.com/v4/letter/r/e79b87/32.png) [@rohit2910](https://forum.flowable.org/u/rohit2910)\
**Post date:** [November 15, 2020, 1:43pm UTC](https://forum.flowable.org/t/add-a-custom-face-to-forms/1326/7 "2020-11-15T13:43:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![PHH](https://yyz1.discourse-cdn.com/flex035/user_avatar/forum.flowable.org/phh/32/94_2.png) [@PHH](https://forum.flowable.org/u/PHH)\
**Post date:** [November 15, 2020, 3:53pm UTC](https://forum.flowable.org/t/add-a-custom-face-to-forms/1326/8 "2020-11-15T15:53:10Z")

</div>

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/](https://forum.flowable.com/) - if you’re playing with the trial version, there’s a topic for that.

Cheers  
Paul.