Customizing the style of the widget payment form is possible by overloading the default style sheet provided by Payline.
The customization functions of the Widget in lightbox mode and in-shop mode (tab / column).
CSS attributes for Widget integration:
public static STYLE_ELEMENT_KEYS = ["font-size", "font-family", "font-weight", "font-style", "color", "padding-top",
"padding-right", "padding-bottom", "padding-left", "text-transform", "text-decoration", "letter-spacing", "word-spacing",
'line-height', 'text-align', 'vertical-align', 'direction', 'background-color',
'background-image', 'background-repeat', 'background-position', 'background-attachment', 'opacity', 'margin-top',
'margin-left', 'margin-right', 'margin-bottom'];
The detail of the class list:
Description | Class |
|---|---|
| Sets the character size of the element. | font-size |
| Sets the font family to use to display the content. | font-family |
| Sets the thickness of the font to apply to the element. | font-weight |
| Determines whether the item should be displayed in normal, italic, or oblique characters. | font-style |
| Sets the color of the text displayed in the foreground of the item. | color |
| These four properties make it possible to define individually the filling to be applied to each side of an element. | padding-top, padding-bottom, padding-right, padding-left |
| Controls the capitalization of the text of an element. | text-transform |
| Sets the enhancements to apply to the content of an item (underline, strikethrough, top bar, and blink). | text-decoration |
| Sets the spacing between characters within an element. | letter-spacing |
| Sets the spacing between words when the text is not subject to external spacing rules. | word-spacing |
| Sets the height of the area containing a physical line of the content. | line-height |
| Determines the horizontal alignment of the text within an element. | text-align |
| Two values, top and bottom , determine the placement of the text within this frame. | vertical-align |
| Defines the display direction of embedded content items and the order of filling table cells on a line. | direction |
| Sets the background color of the element. | background-color |
| Sets the background image to associate (if any) with the element. | background-image |
| Indicates whether or not to repeat the background image. | background-repeat |
| Sets the location of the left edge and the top edge of the background image. | background-position |
| Set whether the image scrolls relative to the document. | background-attachment |
| The opacity of an element is the opposite of its transparency | opacity |
| Define the margins of an element. | margin-top, margin-top, margin-left, margin-right, margin-bottom |