Applying visual changes to Bonita Portal

Q&A
1

Dear All
I have built Bonita BPM Community 7.3 from source. I want to modify the look’n feel of web pages. to do so, in Bonita-web project there are many less files that construct the appearance of the portal web page. for example, I change the @maincolor variable in skin.config.less.
After Compiling all of the projects the color changed. OK, I want to change other things, so it is very time-consuming to compile all of the projects.
Is it possible to see the response of my changes applied to the less files without compiling the whole projects? I mean faster.

Thanks in Advance.
REZA

2

Are you doing this for the Studio? If so then No.

If for the Production Portal (JBOSS, Wildfly or Tomcat) then you will be able to do this just by reloading the Portal (start/shutdown), this is the way we do it.

If you have a Windows Automation product (we use Windows most of the time) you can create your own robot to do this type of thing once you change the source file, much easier… :slight_smile:

regards
Seán

PS: As this reply answers your question, please mark as resolved.

3

I don’t know anything about the theme of the studio. If you know please inform me. so, I just change the color of the portal from red to blue.You said I modify the “less” files that create "bonita.css " file then make a new bundle( JBoss or tomcat). after that, I just run “bonita-start.sh” or “bonita-start.bat”. Ok, I’ll try it.
What about Automation software, is there any software for UBUNTU?

I have another question. can I use “mvn jetty:run -Pcss” command instead of compile bonita-web project?
The ReadMe file in looknfeel folder says for modifying “less” files we can compile them without Maven. How?

Yours faithfully,

4

to compile LESS files you use a LESS compiler, this is one for Windows, I don’t know any for Linux

http://winless.org/

There is a online version of this as follows:

http://winless.org/online-less-compiler

regards

5

I want to change the direction of left panel that shows “my task” and “to do” and “Done tasks”.
How can I show it on right side of the portal page I mean which less file should i modify?
There are a lot of “less” files and I confused. I can’t understand the relation between them.

6

OK, now we know what you want to do it is something much more different and complex.

Here we are talking about changing the LAYOUT not the theme. This is not readily available in Community. And you may have to keep compiling. It is a very large change you are proposing…

However to see how it works I did this:

  1. Opened Portal in Chrome
  2. Right Clicked on the left panel (To do, My tasks and Done tasks) and selected INSPECT
  3. This should take you to:

with the first line being highlighted.

  1. Click on this FIRST LINE and DRAG this line below

<div class=“TaskDetailsPanel” but above the

so it looks like this:

Voila! the left panel (To do, My tasks and Done tasks) is now the right panel (To do, My tasks and Done tasks)

How to do this from source you will have to look at and if you find out how to do it - please post how you did it for others…

Hope that helps,

regards
Seán

7

Thanks for your very useful reply.
Fortunately, I find the “task-list.html” file in /bonita-portal-js/main/features/user/tasks/list directory. In this file, there are some tags that you said in the previous comment. finally, I can change the direction of task panel from left to right.but there is an another problem. inside the “offcanvasMenu navbar” division tag the position property value is “relative” and I want the change direction of “to do” button. By the way, Maybe, there is a float property in .less files to modify them.

Best Regard.
REZA

8

Like Task Tab, I want to change direction for Processes tab and there are three

element that points to the “Section” class. these tags show following:

..
..
..
But, unluckily, I can't find them in the source code. please help me.

Regards.
REZA

9

Oh, Sorry my previouse post was broked.
`

`