Styles in Web Parts

<< Click to Display Table of Contents >>

Navigation:  Bizagi Studio > Bizagi from external applications > Portals integration > Bizagi Web parts for SharePoint > Bizagi Web parts for SharePoint On Premises >

Styles in Web Parts


Bizagi Web Parts for SharePoint provide powerful integration options with no need of programming. This is an out-of-the-box feature providing quick and easy integration of Bizagi into portals. The Web Parts includes a default style sheet compatible with SharePoint server environments. For more information about this feature, refer to Bizagi Web Parts for SharePoint.


If your corporate site has specific style guidelines or if you wish to include additional customizations to the Web Parts, you can do so by following the steps in this article.


Using the Theme Builder

You can customize the appearance of the Work Portal using the theme builder. Web Parts rely on the theme configured in the project used for the configuration of your Web Parts in the SharePoint server. If you change the theme from the Theme Builder:




When the Web Part is rendered in the SharePoint page, it displays with the theme configured in the Work Portal:




Customizing styles

Bizagi Web Parts provide a set of default styles which adapt accordingly to SharePoint sites, and that meet with best practices and CSS guidelines to avoid alterations in other elements or third-party products in the same web pages. When customizing styles, or using styles from your master pages and layouts, make sure you follow best CSS practices in order to review and guarantee that these will not affect the Bizagi Web Parts in an undesired way. It is not Bizagi's responsibility that your custom styles should affect the Bizagi Web Parts in an uncontrolled way.


How are Web Parts displayed?

When including Bizagi Web Parts  (all of them save the button Web Part to start cases), these will be included inside of an HTML iframe element. Therefore, site styles coming from SharePoint will not affect how the content of Bizagi is displayed. To include customizations for this content, follow the recommendations below.


To customize the styles of Bizagi Web Parts or use a different theme in order to adapt the Web Parts to your corporate colors, you may edit the bizagi.webpart.override.css file located at the Bizagi server's path (where Automation Server runs). The path is:




(by default found as C:\BizAgi\Projects\[YOUR_PROJECT]\WebApplication\jquery\overrides\css\desktop\portal\common\bizagi.webpart.override.css).


In such file, you may override styles for the CSS classes involved in Bizagi Web Parts.


Definitions on this bizagi.webpart.override.css file will override the default styling.

Save the changes and close this file. You may have definitions which can look similarly to the image below:





At this point you are set, choosing a different style for your Bizagi Web Parts!





1. Note that to immediately view these changes in the Web Parts style, you may need to clear the browser's cache if you had already loaded this same site before the changes.





2. You will need to create a backup of the bizagi.custom.styles.css before upgrading to a newer version of Bizagi Web Parts for SharePoint.

Once you have updated it to a newer release, you may replace this file with the backup you took.


If you wish to customize the layout of how are these Web Parts shown (properties such as height, width, and others different from colors), refer to Customizing the layout.