Overwriting CSS of controls

Within the CSS files it is possible to overwrite the appearance of embedded TwinCAT HMI controls. For example, if you want to change the appearance of an embedded button within a control, you can do this by applying the CSS styles of the button.

Please ensure that all buttons are not inadvertently assigned this appearance and that the CSS file of the general button does not overwrite that of the embedded control. Both can be achieved by so-called descendant selectors (spaces in CSS): 

.TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1 .TcHmi_Controls_Beckhoff_TcHmiButton {
    background-image: linear-gradient(135deg, #eff1f3, #aeb9c2);
    color: #4794da;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.6);
}

.TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1 .TcHmi_Controls_Beckhoff_TcHmiButton.down {
    background-image: linear-gradient(135deg, #aeb9c2, #eff1f3);
    color: #000000;
    box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.6);
}

All main elements of a control are assigned the control name (extended by the namespace) as CSS class name (here TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1). If this is attached before the style of the control to be overwritten, the new appearance in the example only applies to buttons below the framework control.

CSS selectors are always read from right to left: