Frames Customisation and Styling

In order, to ensure seamless integration with your user experience the frames controls allow for a range of styling and customisation options. Styling can either be applied to the container via CSS or in the scenario you want to make styling changes inside the frame the styling can be injected into the elements at run time via the options configuration.

Customise the Frame container

To customise the Frame container to better fit into your site design you can define normal CSS classes targetting the container. An element has several classes that can be used as targets for styling:

• woolies-element
• container
• error (only applied when the element has been validated and reported an error)

Here is an example of how one might use these classes to customise the style of the elements:

.woolies-element.container {
    border: 1px solid #d9d9d9;
    margin-left: 5px;
    padding: 5px;
}

.woolies-element.error {
    border: 1px solid #D0021B;
    background-color: #FFECEE;
}

Customising the Frames controls

If you would like to style the internal aspects of the frames elements such as font-family/style/weight you can do so using the options object.

The options object allows you to either apply styling to all elements under the control of an action, or scope your changes to only the elements you want to change.

For instance this example would set the height of the frame elements top 40px and apply a font size of 30 pixels to all elements:

let options = {
	"height": "40px",
  "style": {
		"fontSize": "30px"
  }
}

You can also style individual frames. For example, if you wanted to the text within the Card Number field to be bold while making the other fields italic you could do so like this:

let options = {
    "cardNo": {
        "style": {
            "fontWeight": "bold",
            "fontStyle": "normal"
        }
    },
    "style": {
        "fontStyle": "italic"
    }
}

The cardNo element is a little unique in that it has a sub element type that is used to show an image based on card scheme. This element can also be targeted and has an additional property allowing you to choose which side of the element it is displayed on.

This example moves the card type to the right and sets the image width to 50px to fill out the space:

let options = {
    "cardNo": {
        "cardType": {
            "layout": "right",
            "style": {
                "width": "50px"
            }
        }
    }
}

Sometimes you want to make customisations that can't be inlined such as; styling the placeholder text or have a different colour on hover. You are able to do this by injecting CSS styling into the frame using the CSS property.

This example sets the placeholder colour to blue and changes it to green on hover:

let options = {
    "css" : `
        input::placeholder {
            color: blue;
        }

        input:hover::placeholder {
            color: green;
        }
    `
}