...
| Info |
|---|
In case lack of a specific HTML element in Styla DOM is limiting implementation of your design, try adding pseudoelements in Module settings. For every HTML element on every module you can set :hover or :after or :nth-of-type(n). This is the only way to add some custom elements into Styla DOM. |
Remember that you can override every general setting from all node in smallScreen just for mobile views. Even without any explicit settings in smallScreen most modules will look differently once you make you shrink your browser window below 767px as they inherit a set of CSS for this media query from default Layout Engine app settings. This is especially valid for Banner, Product and Editorial Shopping modules.
Naming convention and property values
...
| Expand |
|---|
| title | Code snippet for Product details module |
|---|
|
| Code Block |
|---|
{
"PRODUCTDETAILS": {
"settings": {
"showArrows": false
},
"styles": {
"container": {
"all": {
"marginLeft": "auto",
"marginRight": "auto",
"maxWidth": "1488px",
"padding": "60px 0px"
},
"smallScreen": {
"padding": "20px 0px"
}
}
}
}
} |
|
...
Text
A very straightforward module consisting of a text field for which background and paddings can be customised with the Editor UI. Its width is per default set to 88 base units which you can change in Theme settings.
| Expand |
|---|
| title | Code snippet for Text |
|---|
|
| Code Block |
|---|
{
"TEXT": {
"styles": {
"ordered-item:before": {
"all": {
"color": {
"id": "emerald",
"type": "colors"
},
"marginRight": 1.75
}
}
}
}
} |
|
...
Text on video
This module a banner with an .mp4 video file in the background. Same as banner, it display a text container with CTA buttons that can be customised with the Editor UI.
| Expand |
|---|
| title | Code snippet for Text on Video |
|---|
|
| Code Block |
|---|
{
"TEXTONVIDEO": {
"styles": {
"ctaLink": {
"all": {
"border": "2px solid",
"fonts.formats": "button",
"padding": "14px 22px",
"transitionDelay": "0s, 0s",
"transitionDuration": "0.25s, 0.25s",
"transitionProperty": "background-color, color",
"transitionTimingFunction": "ease-out, ease-out",
"WebkitFontSmoothing": "antialiased"
},
"smallScreen": {
"textAlign": "center"
}
}
}
}
} |
|