Location of CSS

• izenda-ui.css : Main location for CSS Stylings.

CSS Conflicts

CSS conflicts may arise if the host application utilizes similar or same the CSS libraries as Izenda that are utlize different release versions or customizations. For instance, Bootstrap 2 may cause conflicts with the Bootstrap resources found with the Izenda application. For an updated list of Izenda dependencies, please refer to our Acknowledgements Page .

Customization (Simple)

The simplest way to change an element’s color is to find the CSS selector corresponding to an HTML element and replace the listed color with your new color. In Notepad++ , this can be accomplished by pressing CTRL + F and navigating to “Replace” tab.

Customization (Scalable)

CSS Variables allow you to change one value in the CSS to change all of our CSS selectors.

• Add the following on top of izenda-ui.css

  

• Replace all instances of #1c4e89 with var(–main-color).

  

• Example Replacement:

  

• Result on page.

  

Key Styling Colors

Key styling for Chrome and Firefox is located in the file izenda-ui.css. Below, we list 11 variables that will help you stylize your application.

root {
							--main-co: pink; /* #1c4e89 */
							--sub-style-co:green; /* #10427c */
							--fontello-co: #b3cbda; /* #b3cbda */
							--menu-text-and-panel-co: purple; /* #fff */
							--panel-border-co: indigo; /* #EEE */
							--main-bg-co: teal; /* #e4e8eb */
							--search-icon-and-data-source-borders: yellow; /* #DEDEDE */
							--rp-edit-mode-tab-borders: blue; /* #ddd */
							--error-1-co: pink; /* #D0021B */
							--error-2-co: yellow; /* red */
							--garfunkle: orange; /*Arbitrary variable created #f5f5f5 */
							}
						

Visually Editing CSS

You would usually need to refresh the page to see updates to your application. Fortunately, Chrome provides the functionality to edit the working instance of a page’s CSS to see real-time changes. The following example uses CSS Selectors.

• To access Chrome’s Developer Tools, press F12 to open the console.

  

• Toggle over to the Sources tab and locate the CSS file you wish to edit.

  

  Note: To increase screen real-estate, you can pop the Developer Tool out into a separate window

• Develop!

  
  

• To save, right click on the file on left-hand panel and select save.

  

Common CSS Customizations

• Customize the default cell padding in grid report parts

  .izenda.table.table-cell-content{padding:5px!important;}

  
  

• Customize the width of the report list to increase the width of the report name

  .panel.report-detail.izenda-GridLayout-Row.izenda-GridLayout-Col2{width:41.66667%!important;}.panel.report-detail.izenda-GridLayout-Row.izenda-GridLayout-Col6{width:25%!important;}.panel.report-detail.izenda-GridLayout-Row.izenda-GridLayout-Col3{width:25%!important;}.panel.report-detail.izenda-GridLayout-Row.izenda-GridLayout-Col1{width:8.33333%!important;}

  
  

• Hide filters’ description including the type and operator in the report viewer

  .filter-label.operator{visibility:hidden!important;}.filter-item-label{pointer-events:none!important;}

  

Customizing the Report Designer Tooltips & Overlay

Izenda version v2.7.0 and greater feature new tooltips and overlays to provide guidance to the user for creating reports.

These items can be customized using the CSS samples below:

/* Customize the tooltip */.tooltip.tooltip-inner.info{background-color:#8e8e8f;color:#fff;font-size:13px;max-width:250px;padding:10px;}/* Customize the overlay */.izenda.izenda-ReportDesigner.izenda-ReportDesigner-Overlay{background-color:rgba(255,105,180,0.75)}