When using the Web or Integration Theme, the rendered Form Controls are injected directly into the existing page.
This allows Form Controls to be customized using CSS styles, supplied by your website (Integration Theme), or custom skin (Web Theme).
This could be used to match your current site style, or add additional effects using modern CSS with ease (transitions, filter/blur, radius, hover/focus etc).
Ensure any templates rendering the Form reference your custom styles, e.g. <link rel=”stylesheet” href=”custom-styles.css” />
These could be combined into the main styles for the site, or as a standalone CSS file, included only where a Form is rendered.
The “Corporate Website” example demonstrates a method of injecting custom styles (and scripts) based on the current project’s name - useful in situations where multiple projects are available.
Loading custom styles requires you to use a Custom Skin that includes your own styles.
For setting up a new custom skin, see Skin Customization example
Once using a custom skin, you can either:
These styles will be loaded on all templates and for all Forms.
If using the "Integration Module" in the Web Theme to embed your Form in another site, the Form is rendered inside an iFrame. This brings some limitations:
Custom styles can be written in plain CSS, just like any other website component.
To make it easy to target specific Form Controls and UI elements, the Metadata property can be utilized on individual controls to add unique selectors.
In the "Form Design" view, select a Control to open it’s property pane on the right-hand side.
Under "General", find the property titled (Metadata).
Any values entered here will be made accessible in the rendered Form control.
You can use a combination of whitespace-separated values, and then target each individually, or the entire value as a whole.
Once the Metadata property has been set on a control, it will be displayed in the markup outputted by both the Web and Integration Theme.
If you inspect a control in a browser (right-click, inspect element), you will be able to see that a new data-metadata attribute has been applied - with your provided values:
It is important to note that the Metadata property is only attached to the parent element of each control. From this, you can drill down and target any additional markup inside.
You may notice that each rendered control is given it’s own unique identifier automatically as it’s ID attribute. You may be tempted to use this for targeting controls, but this is not advised.
The safest and most reliable method to apply styles is through a known metadata selector.
This value will only change when you (or your rules) update the Metadata property, and will not be affected by any outside influence e.g. renaming an element.
DriveWorks provides no guarantee that the HTML markup will remain consistent between DriveWorks versions.
Any customizations will need to be double checked as part of a customers upgrade procedure.
These values can then be targeted in a number of ways using custom CSS rules and Attribute selectors:
Value is exactly "save-button". This would match data-metadata="save-button", but not match data-metadata="save-button rounded".
String is found anywhere in the value. Matches both "rounded" and "button-rounded".
Full string exists in a list of space-separated words e.g. data-metadata="save-button large rounded"
When inspecting the HTML generated by DriveWorks, you will see that each control has it's own complex structure.
If you want to style a specific part of a control, you may need to specifically target a single element inside.
Target any <button> element’s inside of data-metadata="save-button":
Target only <button> element's that are direct children of the parent:
Target only child elements with a data-id containing a string:
<div data-id="1234Button_OuterImageContainer" style="background: white;"></div>
See: CSS attribute selectors for more information.
Be wary of specificity (how 'strong' your rules are) when applying styles to your controls.
Inline styles <div style="..."> will require the use of !important to overrule - as they carry the most weight when it comes to specificity.
See: CSS Specificity for more information.
Using CSS you can now add additional styling, including:
For more information on querySelector, see: query selector