Applying visual changes to Bonita Portal

Submitted by reza.mirzaie68 on Tue, 02/07/2017 - 16:21
1
0
-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

#portal
1 answer

Submitted by Sean McP on Tue, 02/07/2017 - 20:51
1
+1
-1
This one is the BEST answer!

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... :)

regards
Seán

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

Comments

Submitted by reza.mirzaie68 on Wed, 02/08/2017 - 08:40

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,

Permalink
Submitted by Sean McP on Wed, 02/08/2017 - 10:28

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

Permalink
Submitted by reza.mirzaie68 on Wed, 02/08/2017 - 12:20

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.

Permalink
Submitted by Sean McP on Thu, 02/09/2017 - 01:36

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:

<div class="OffcanvasMenu navbar">
<div class="TaskList ng-scope" ng-if="!error">
<div class="TaskDetailsPanel" id="details" ng-class="{'TaskDetailsPanel--collapsed':!app.showDetails}">
</div>

with the first line being highlighted.

4) Click on this FIRST LINE and DRAG this line below

<div class="TaskDetailsPanel" but above the </div>

so it looks like this:

<div class="TaskList ng-scope" ng-if="!error">
<div class="TaskDetailsPanel" id="details" ng-class="{'TaskDetailsPanel--collapsed':!app.showDetails}">
<div class="OffcanvasMenu navbar">
</div>

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

Permalink
Submitted by reza.mirzaie68 on Sat, 02/11/2017 - 09:21

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

Permalink
Submitted by reza.mirzaie68 on Sun, 02/19/2017 - 06:20

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

<

div> 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

Permalink
Submitted by reza.mirzaie68 on Sun, 02/19/2017 - 06:24

Oh, Sorry my previouse post was broked.
<div class="section section_filters_panel filters_panel even">
<div class="section section_tables_panel tables_panel odd">
<div class="section section_details_panel details_panel even">

Permalink
Notifications