HTML Customizations
Here are some tips to overload default values of some display parameters like the color of a button, etc.
Overload values are given as examples for illustration. Replace them with those corresponding to your graphics standards.
Notes
- The HTML code provided is applied on the page where it is added.
- To set many overloads on the same page, group the whole code under one <style> tag.
- Add the code of the <style> tag in the Header of a widget. Check the display option so that the code in processed. If you don't want the header to be displayed, set its height property to 0 (zero).
- Note: A color may be entered as ASCII code or one of the 140 color names supported by all browsers
How to
Add the code below to change the default color of the action buttons Reject, Accept / Complete and Information Request.
<!--
/* Color of action button : Reject */
.actionsWizard0 button { background-color: #B22222!important; }
/* Color of action button : Complete/Accept */
.actionsWizard1 button { background-color: #008000!important; }
/* Color of action button : Information Request */
.actionsWizard2 button { background-color: #808080!important; }
-->
</style>
| Default | Customization |
|---|---|
|
|
Add the code below to overload the color of the New Request button and the color on mouse over.
<!--
/* Color of the New Request button */
.newRequestButton .button { background-color: #808080; }
.newRequestButton .button:hover { background-color: #5F9EA0; }
-->
</style>
This overload requires adding the code below on the #[EZVTAG-NEW-REQUEST]# tag:
<span class="newRequestButton">#[EZVTAG-NEW-REQUEST]#</span>
| Default | Customization |
|---|---|
|
|
Display the New Request button in a different color depending on a condition :
In this example we will display the New Request button in red for entries of the service requests catalog requiring a validation.
To do that, an available field renamed Needs Validation is added as checkbox to the details form of the service requests catalog.
The field must be added to the View referenced in the Data Source.
Add the code below which defines the 3 classes corresponding to the 3 values that the new field can take: 0, 1 or 'empty'.
The code allows overloading the color on mouse over too.
<!--
/* Color of the New Request button - Needs Validation option empty */
.newRequestButton .button { background-color: #808080; }
.newRequestButton .button:hover { background-color: #5F9EA0; }
/* Color of the New Request button - Needs Validation option = 0 */
.newRequestButton0 .button { background-color: #808080; }
.newRequestButton0 .button:hover { background-color: #5F9EA0; }
/* Color of the New Request button - Needs Validation option = 1 */
.newRequestButton1 .button { background-color: firebrick; }
.newRequestButton1 .button:hover { background-color: navy; }
-->
</style>
In the Data Viewer where the New Request button is placed:
1. Use the Data Picker to add the new field Needs Validation
2. Switch to the HTML mode
3. Copy the tag corresponding to the new field and paste it next to the class name:
<span class="newRequestButton#[FIELD('Needs Validation')">#[EZVTAG-NEW-REQUEST]#</span>
| Result |
|---|
|
Add the code below to overload the default color of the Search icon.
<!--
.com_easyvista_widget_searchfilterController .BtnSearch {
background-color: #6aa84f;
}
-->
</style>
| Default | Customized |
|---|---|
|
|
Add the code below to overload the default color of the Back button on the Form of a Data Viewer.
<!--
/* Color of the Back button on the Form */
.com_easyvista_widget_dataviewerController .dtv_CloseApp svg .no-hoverSvg{fill: #808080!important; }
/* Color of the Back button on the Form on mouse over */
.com_easyvista_widget_dataviewerController .dtv_CloseApp svg:hover .hoverSvg{fill: #5F9EA0!important; }
-->
</style>
| Default | Customized |
|---|---|
|
|
|
|
Add the code below to change the background color of the selected filter:
<!--
/* SELECTED FILTER BACKGROUND COLOR */
.list_li.ng-scope.li_current {background-color:#58af00;}
-->
</style>
With the Show Shadow Indicator option introduced in version 2016.6, you may remove the border on the indicators displayed in Menu widgets simply by unchecking the option.
If you're still in a previous version, add the code below to remove the border on the indicators:
<!--
/* Remove the border on indicators in a menu */
.com_easyvista_widget_menuController .indicatorShadow {box-shadow: none ;}
-->
</style>
| Default | Customized |
|---|---|
|
|
Add the code below to change the size, style and color of the box framing the selected element in a Data Viewer:
<!--
/* BORDER COLOR */
.com_easyvista_widget_dataviewerController .currentRecordSelected{ border: 1px solid #3D85C6;}
-->
</style>
Add the code below to space out items on a Tab widget:
<!--
/* SPACE BETWEEN TAB ITEMS */
.com_easyvista_core_visualwidgetController .tab-title{ margin: 0 3px 0 0px !important;}
-->
</style>
| Default | Customized |
|---|---|
|
|
