INTRODUCTIONCustom CSS Variables
In Custom tab of Hero Posts elements you can find ‘Custom style‘ field.
This field allows you to add custom CSS to override some of the elements’ settings.
In the sections below you can find available variables and example values that can be added to them.
Note that variables and values need to be added in the same format as the example below – two middle lines before the variable name, colon, desired value, semi colon.
--hero-posts-item-content-padding: 0 25% 0 4em;
SECTION 01Article item
| CSS variable | Default value | Description |
|---|---|---|
--hero-posts-item-gap |
calc(var(–hero-posts-base-gap) / 2) | Gap between text and image (top, bottom, left, right image position) |
--hero-posts-item-content-show-in-gap |
10px | Gap between show-in elements |
--hero-posts-item-content-image-position-background-margin |
20px | Content area margin (image position: background) |
--hero-posts-item-content-image-margin |
20px | Image content area margin |
--hero-posts-item-content-padding |
0 | Content area padding, edit |
--hero-posts-item-content-max-width |
100% | Content area max width |
--hero-posts-light-color |
#fff | General light color |
--hero-posts-dark-color |
#000 | General dark color |
--hero-posts-item-content-color |
inherit | Content area color |
--hero-posts-item-content-background-color |
none | Content area background color |
--hero-posts-item-content-image-position-background-color |
var(–hero-posts-light-color) | Content area color (image postion: background) |
--hero-posts-item-content-image-position-background-background-color |
none | Content area background color (image position: background) |
--hero-posts-item-image-content-top-color |
var(–hero-posts-light-color) | Top content area font color |
--hero-posts-item-image-content-bottom-color |
var(—hero-posts-light-color) | Bottom content area font color |
--hero-posts-item-content-supertitle-margin |
0 0 0.25em 0 | Supertitle content margin |
--hero-posts-item-content-title-margin |
0 0 0 0 | Title content margin |
--hero-posts-item-content-subtitle-margin |
0.25em 0 0 0 | Subtitle content margin |
--hero-posts-item-content-excerpt-margin |
0.5em 0 0 0 | Excerpt content margin |
--hero-posts-post-data-delimiter* |
“/” | Delimiter between post data elements |
--hero-posts-item-taxonomy-pill-background-color |
var(–hero-posts-accent-color) | Background color of taxonomy pill |
--hero-posts-item-taxonomy-pill-color |
white | Color of taxonomy pill |
--hero-posts-item-taxonomy-pill-padding |
2px 6px | Padding of taxonomy pill |
--hero-posts-item-taxonomy-pill-border-radius |
4px | Border radius of taxonomy pills |
--hero-posts-item-side-image-width |
33% | Image width (side) |
--hero-posts-item-image-background-color |
none | Image container background color f.e. rgba(0, 0, 0, 0.05) |
--hero-posts-item-image-border-radius |
0 | Image container border radius |
--hero-posts-item-image-hover-zoom-to |
1 | Image start scale |
--hero-posts-item-image-hover-zoom-from |
1.1 | Image final (hover) scale |
--hero-posts-item-image-hover-zoom-duration |
400ms | Zoom transition duration |
--hero-posts-item-image-hover-blur-from |
0 | Image start blur |
--hero-posts-item-image-hover-blur-to |
2px | Image final (hover) blur |
--hero-posts-item-image-hover-blur-duration |
400ms | Blur transition duration |
--hero-posts-item-image-hover-move-content |
0 | Move content |
--hero-posts-item-image-hover-move-content-delay-supertitle |
0ms | Move content (translateY) |
--hero-posts-item-image-hover-move-content-delay-title |
100ms | Move content (translateY) |
--hero-posts-item-image-hover-move-content-delay-subtitle |
200ms | Move content (translateY) |
--hero-posts-item-image-overlay-hover-opacity-from |
1 | Image overlay start opacity |
--hero-posts-item-image-overlay-hover-opacity-to |
0 | Image overlay final (hover) opacity |
--hero-posts-item-image-overlay-hover-opacity-duration |
400ms | Opacity transition duration |
--hero-posts-item-image-overlay-background-color |
none | Image overlay background color |
--hero-posts-item-side-image-width |
50% | Change image width (if left or right position is active) for Image poistion |
--hero-posts-item-align |
inherit | Item alignment |
--hero-posts-item-content-margin* |
0.5em 0 0 | Item content margin |
--hero-posts-item-background-color* |
transparent | Item background color |
--hero-posts-item-max-height* |
none | Item max height |
--hero-posts-item-min-height* |
none | Item min height |
--hero-posts-item-content-vertical-align* |
flex-start | Item content vertical alignment |
--hero-posts-item-content-top-border-top* |
medium none color | Item content top border of top content |
--hero-posts-item-content-top-padding* |
0 | Item content top padding |
--hero-posts-item-content-top-margin* |
0 | Item content top margin |
--hero-posts-item-content-top-font-size* |
medium | Item content top font size |
--hero-posts-item-content-middle-inner-padding* |
0 | Item content middle padding |
--hero-posts-item-content-middle-inner-background-color* |
transparent | Item content middle background color |
--hero-posts-item-content-bottom-border-top* |
medium none color | Item content bottom border top |
--hero-posts-item-content-bottom-padding* |
0 | Item content bottom padding |
--hero-posts-item-content-margin* |
0 | Item content margin |
--hero-posts-item-content-bottom-font-size* |
medium | Item content bottom font size |
--hero-posts-item-content-top-hover-color |
#000 | Item content top color on hover |
--hero-posts-item-content-top-hover-text-decoration* |
none | Item content top text decoration on hover |
--hero-posts-item-content-top-text-transform* |
capitalize | Item content top text transform |
--hero-posts-item-content-top-font-weight* |
normal | Item content top font weight |
--hero-posts-item-content-top-letter-spacing* |
normal | Item content top letter spacing |
--hero-posts-item-content-top-line-height* |
normal | Item content top line height |
--hero-posts-item-content-top-text-decoration* |
none | Item content top text decoration |
--hero-posts-item-content-bottom-hover-color* |
#000 | Item content bottom color on hover |
--hero-posts-item-content-bottom-hover-text-decoration* |
none | Item content bottom text decoration on hover |
--hero-posts-item-content-bottom-text-transform* |
capitalize | Item content bottom text transform |
--hero-posts-item-content-bottom-font-weight* |
normal | Item content bottom font weight |
--hero-posts-item-content-bottom-letter-spacing* |
normal | Item content bottom letter spacing |
--hero-posts-item-content-bottom-line-height* |
normal | Item content bottom line height |
--hero-posts-item-content-bottom-text-decoration* |
none | Item content bottom text decoration |
--hero-posts-item-content-supertitle-hover-color* |
#000 | Item content supertitle color on hover |
--hero-posts-item-content-supertitle-hover-text-decoration* |
none | Item content supertitle text decoration on hover |
--hero-posts-item-content-supertitle-text-transform* |
capitalize | Item content supertitle text transform |
--hero-posts-item-content-supertitle-font-weight* |
normal | Item content supertitle font weight |
--hero-posts-item-content-supertitle-letter-spacing* |
normal | Item content supertitle letter spacing |
--hero-posts-item-content-supertitle-line-height* |
normal | Item content supertitle line height |
--hero-posts-item-content-supertitle-text-decoration* |
none | Item content supertitle text decoration |
--hero-posts-item-content-title-hover-color* |
#000 | Item content title color on hover |
--hero-posts-item-content-title-hover-text-decoration* |
none | Item content title text decoration on hover |
--hero-posts-item-content-title-text-transform* |
capitalize | Item content title text transform |
--hero-posts-item-content-title-font-weight* |
normal | Item content title font weight |
--hero-posts-item-content-title-letter-spacing* |
normal | Item content title letter spacing |
--hero-posts-item-content-title-line-height* |
normal | Item content title line height |
--hero-posts-item-content-title-text-decoration* |
none | Item content title text decoration |
--hero-posts-item-content-subtitle-hover-color* |
#000 | Item content subtitle color on hover |
--hero-posts-item-content-subtitle-hover-text-decoration* |
none | Item content subtitle text decoration on hover |
--hero-posts-item-content-subtitle-text-transform* |
capitalize | Item content subtitle text transform |
--hero-posts-item-content-subtitle-font-weight* |
normal | Item content subtitle font weight |
--hero-posts-item-content-subtitle-letter-spacing* |
normal | Item content subtitle letter spacing |
--hero-posts-item-content-subtitle-line-height* |
normal | Item content subtitle line height |
--hero-posts-item-content-subtitle-text-decoration* |
none | Item content subtitle text decoration |
--hero-posts-item-content-excerpt-hover-color* |
#000 | Item content excerpt color on hover |
--hero-posts-item-content-excerpt-hover-text-decoration* |
none | Item content excerpt text decoration on hover |
--hero-posts-item-content-excerpt-text-transform* |
capitalize | Item content excerpt text transform |
--hero-posts-item-content-excerpt-font-weight* |
normal | Item content excerpt font weight |
--hero-posts-item-content-excerpt-letter-spacing* |
normal | Item content excerpt letter spacing |
--hero-posts-item-content-excerpt-line-height* |
normal | Item content excerpt line height |
--hero-posts-item-content-excerpt-text-decoration* |
none | Item content excerpt text decoration |
SECTION 02Slider (Swiper)
| CSS varialble | Default value | Description |
|---|---|---|
--swiper-navigation-size |
33px | Navigation arrow |
--swiper-pagination-progressbar-height |
8px | Pagination height |
--swiper-pagination-fraction-color |
var(–hero-posts-light-color) | Pagination (e.g. 1/6) color |
--swiper-pagination-fraction-opacity |
0.5 | Pagination (e.g. 1/6) opacity |
--swiper-pagination-fraction-font-size |
inherit | Pagination (e.g. 1/6) size |
--swiper-pagination-bullet-size |
12px | Navigation bulett |
--swiper-navigation-color |
var(–hero-posts-light-color) | Navigation color |
--swiper-navigation-outside-color |
var(–hero-posts-dark-color) | Navigation outside color |
--swiper-pagination-bullet-inactive-color |
var(–hero-posts-light-color) | Pagination color of inactive bullet |
--hero-posts-slider-swiper-space-between |
var(–hero-posts-base-gap) | Slider space between |
SECTION 03Other elements
| CSS varialble | Default value | Description |
|---|---|---|
--hero-posts-base-gap |
20px | General gap, inherited by row, row inner etc |
--hero-posts-column-gap |
var(–hero-posts-base-gap) | Default column gap |
--hero-posts-separator-top-margin |
var(–hero-posts-base-gap) | Default separator top margin |
--hero-posts-separator-bottom-margin |
var(–hero-posts-base-gap) | Default separator bottom margin |
--hero-posts-separator-top-margin |
var(–hero-posts-base-gap) | Separator / Top margin |
--hero-posts-separator-line-width |
1px | Separator line width |
--hero-posts-separator-line-style |
none | Separator line style |
--hero-posts-separator-line-color |
#ccc | Separator line color |
--hero-posts-banner-border-width |
1px | Banner border width |
--hero-posts-banner-border-style |
solid | Banner border style |
--hero-posts-banner-border-color |
gray | Banner border color |
--hero-posts-column-gap-half |
calc(var(–hero-posts-column-gap) / 2) | Gap inherited by item row column |
--hero-posts-column-gap-full |
var(–hero-posts-column-gap) | Gap inherited by item row column |