The second tab in the Component menu is the Style tab. Here you can alter the appearance of a component. Styling options differ between components. Below is a non-exhaustive list of common styling options.
Size and position
|Grid size||Changes the width and height of the component’s container.|
|Pixel size||Affects the size of components that are contained within a horizontal or vertical list, meaning their size is no longer determined by the grid.|
|Position||The origin of the grid is in the top left corner. This corresponds with “0 x 0”. See the Template grid page for more information. Increasing the left and right number will move the component to the left and lower it, respectively.|
These are the possible action views:
|Normal||The normal view.|
|On hover||When hovering with the mouse over the component.|
|On focus||When the cursor is in the input field. Usually applies to form components.|
|When active||When a link or one of the component’s buttons is clicked.|
You can reset each option below to its default values by clicking the refresh icon next to the option’s name.
These are the styling options:
|Border||Adds a border that surrounds the component. Options:|
– Border type: the general appearance of the border, for example dotted or solid.
– Color: the color of the border.
– Width: alter the width of the border.
– Radius: increasing this value will round the corners of the border.
By pressing the unlink button in the middle, you can change the border on every side of the component separately.
|Padding||Creates extra space within a component. By pressing the unlink button in the middle, you can change the padding on every side of the component.|
|Background||Adds a background to the component. This can be a solid color or a (non-)repeating image. Options:|
– Background color: choose a solid color as background.
– Background image: choose an image as background. Provide a link to it or select it from the media library.
– Background attachment: sets whether a background image scrolls with the rest of the page, or is fixed.
– Background position x: move the background along the x-axis (positive value is to the right)
– Background position y: move the background along the y-axis (positive value is downwards)
– Background repeat: choose whether or not the background should repeat, and how.
– Background size: alter the size of the background.
– Background origin: set the origin of the background.
|Font||Changes the font for components that contain text. Options include:|
– Font type: select a font type from this drop-down menu.
– Size: select the size of the font (in the same menu as the font type).
– Color: the color of the text.
– Weight: make your text lighter or bolder.
– Stretch: increase the horizontal width of each word.
– Variant: choose a variant of the font.
– Caps variant: alter the capitalization of the text.
– Text alignment: change the positioning of the text in its container.
|Inputfield border||Similar to Border but specifically for input fields within a component.|
|Overflow||This specifies what happens if a component overflows this component’s box.|
Choose whether to clip content or to add scrollbars when a component’s content is too big to fit.
|Shadow||Adds shadow to the edges of the component. Options: |
– Color: the color of the shadow.
– Offset x: offsets the shadow to the right, following the horizontal x-axis.
– Offset y: offsets the shadow downwards, following the vertical y-axis.
– Blur radius: blurs the edges of the shadow. The higher this number, the further towards the center of the shadow the blur penetrates.
– Spread radius: increases the size of the shadow.
|Cursor||Choose the type of cursor that appears when the user hovers over this component.|
The image below shows the styling menu for a Password component.