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

Overview

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 in portals, and these Web parts will include a default style sheet compatible for 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 may do so by following the steps in this article.

 

 

Important

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, ensure 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 Web parts de Bizagi (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.

 

 

Customizing styles

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:

[BIZAGI_PORTAL_PATH]\jquery\overrides\css\desktop\portal\common\bizagi.webpart.override.css

(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:

 

01cssedited

 

 

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

 

03customresult

 

 

 

Considerations

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.

 

ClearCache

 

 

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.