Home Search

DriveWorks Pro 22
How To: Customize a DriveWorks Live Form using CSS

Send Feedback

How To: Customize a DriveWorks Live Form using CSS

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).

Integration Theme

DriveWorks 21

DriveWorks 21 allows modern web styling to be directly applied to Form Controls using CSS.

Please see How To Apply CSS Styling To A Projects Forms for more information.

When using DriveWorks 20 or older:

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.

  • See loadCustomProjectAssets() in the Corporate Website example
  • This replaces loading one large file containing every custom style for every Form, and reduces any potential overlap between duplicate selectors on Forms.

Web Theme

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:

  1. Load your new styles into the existing stylesheet
    • /content/custom/skins/skin-name/skin.css

    Or

  2. Load the desired custom CSS file in the <head> of skin.cshtml, after skin.css:
    • <link rel="stylesheet" href="@SkinFile("custom-styles.css")"/>
    • <link rel="stylesMake sure the custom CSS file is stored in the same folder as the existing skin.css for the theme:
    • /content/custom/skins/*skin-name*/*custom-file*.css
Style Inheritance

These styles will be loaded on all templates and for all Forms.

  • Be wary of any overlap and potential clashes in your CSS selectors.
  • Try to use specific descriptive selectors (see using the Metadata property below).
Using the "Integration Module"

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:

  • Styles added to skin.css or a custom CSS file in your skin will be loaded inside of the iFrame.
  • External styles from the external site hosting the iFrame will not affect the contents of this iFrame. You must place custom styles in the skin.

Writing Custom Styles

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.

The value of the Metadata property is then included on markup generated by either Theme, which can then be easily picked up by CSS or JavaScript selectors. Metadata properties can be made dynamic and driven by Rules if desired.

Adding metadata

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.

This Property can be made dynamic and driven by a rule. Allowing for powerful automated style changes.

Reading metadata

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.

Using/targeting metadata

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.

Important Note - Upgrades

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.

Using Metadata should ensure the highest compatibility between versions.

These values can then be targeted in a number of ways using custom CSS rules and Attribute selectors:

Exact Match (=)

Value is exactly "save-button". This would match data-metadata="save-button", but not match data-metadata="save-button rounded".

Contains (*=)

String is found anywhere in the value. Matches both "rounded" and "button-rounded".

Word in list (~=)

Full string exists in a list of space-separated words e.g. data-metadata="save-button large rounded"

Target child elements

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":

  • <div data-metadata="save-button"><button>Save</button> </div>
  • <div data-metadata="save-button"><span><button>Save</button> </span></div>

Target only <button> element's that are direct children of the parent:

  • <div data-metadata="save-button"><button>Save</button> </div>
  • <div data-metadata="save-button"><span><button>Save</button> </span></div>

Target only child elements with a data-id containing a string:

<div data-metadata="save-button">

<button>Save</button>

<div data-id="1234Button_OuterImageContainer" style="background: white;"></div>

</div>

See: CSS attribute selectors for more information.

Dealing with Specificity

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:

  • Border-radius
  • Opacity
  • Advanced hover and focus effects
  • Transitions
  • Animations
  • CSS Filters
  • Custom Web Fonts
  • And more...

For more information on querySelector, see: query selector

© DriveWorks Ltd 2024 - All rights reserved.
Privacy Policy | Terms & Conditions