How can change the 'required' asterisk and the tooltip layout?

ChronoForms v5 adds an asterisk after the Label for required inputs and shows a red tooltip when a client-side validation error is found. This FAQ show show you can change the way these look.

The 'Required' asterisk

You can change the color of the asterisk by using this CSS in a Load CSS action in the On Load event of your form. This example uses 'blue' but you can add any color you like:

.chronoform .fa-asterisk{color:blue !important;}

And you can change the size like this:

.chronoform .fa-asterisk{font-size: 7px !important;}

You can change the asterisk to another character similarly. The string '2020' is the Hex value of the HTML entity you want to show, in this case it shows a dagger :

.chronoform .fa-asterisk:before { content: "\2020" !important; }

The 'Required' font

You can change the font - you will probably need to change the character as well. This CSS gives a Georgia asterisk:

.chronoform .fa-asterisk:before {
  font-family: Georgia !important;
  content: "\002A" !important; 
}

The Tooltip color

.gtooltip .gvalidation-error-tip {
  background-color: #4242ff !important;
  border: 1px solid #00f !important;
}
.gvalidation-error-tip .gtooltip-arrow-border {
  border-color: #00f transparent transparent transparent !important;
}
.gvalidation-error-tip .gtooltip-arrow {
 border-color: #4242ff transparent transparent transparent !important;
} 

.gvalidation-error-text {
  color: blue !important;
}

The Tooltip text

The Tooltip icon

.gbs3 .input-tooltip { 
  color: red !important;
  font-size: 24px !important;
}

.gbs3 .input-tooltip:before {
  content: "\f06b";
}