HTML Customizations

Last modified on 2022/05/28 10:55

Contents

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).
    Style in Header.PNG

How to

Add the code below to change the default color of the action buttons Reject, Accept / Complete and Information Request.

<style>
<!--
 /* 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

Action Bar Before-EN.PNG

Action Bar After-EN.PNG

Add the code below to overload the color of the New Request button and the color on mouse over.

<style>
<!--
/* 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

New Request Before-EN.PNG

New Request After-EN.PNG

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.

<style>
<!--
/* 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

New Request on condition-EN.PNG

Add the code below to overload the default color of the Search icon.

<style>
<!--
.com_easyvista_widget_searchfilterController .BtnSearch {
   background-color: #6aa84f;
}
-->
</style>
Default Customized

Search Before.PNG

Search After.PNG

Add the code below to overload the default color of the Back button on the Form of a Data Viewer.

<style>
<!--
/* 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

Back Before-EN.PNG

Back After-EN.PNG

Back Before-Hover-EN.PNG

Back After-Hover-EN.PNG

Add the code below to change the background color of the selected filter:

<style>
<!--
/* 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:

<style>
<!--
/* Remove the border on indicators in a menu */
.com_easyvista_widget_menuController .indicatorShadow {box-shadow: none ;}
-->
</style>
Default Customized

Menu indicators borders.PNG

Menu indicators without borders.PNG

Add the code below to change the size, style and color of the box framing the selected element in a Data Viewer:

<style>
<!--
/* BORDER COLOR */
.com_easyvista_widget_dataviewerController .currentRecordSelected{ border: 1px solid #3D85C6;}
-->
</style>

Add the code below to space out items on a Tab widget:

<style>
<!--
/* SPACE BETWEEN TAB ITEMS */
.com_easyvista_core_visualwidgetController  .tab-title{ margin: 0 3px 0 0px !important;}
-->
</style>
Default Customized

TAB Spacing Before.PNG

TAB Spacing After.PNG

Tags:
Powered by XWiki © EasyVista 2022