Shorts Story

Caast Shorts Story is an experience allowing you, to render a collections of contents like you see on instagram. You can customize every displayed medias and also extract some shorts from your existing contents. Just sit and let your users enjoy the all-in-one Caast shorts experience.

Settings

You can configure a lots of of visual informations via our administration interface.

Styling

Caast Shorts Story is totally stylable via your own style declaration. You have the possibility to add styles override on the targeted page inside a classic <style> tag. You can also give us the style override, it will be directly merged with the final render, this option allow you to avoid editing your own page and rely totally on Caast

/*
* -----------------------------------
* Style for Caast Shorts Story
* -----------------------------------
*/

/*
* A set of css variable used to customize the collection,
* the values came from our configuration but you can overwrite them locally
*/
:root {
  --caast-button-background;
  --caast-button-background-darken;
  --caast-button-color;
  --caast-short-card-width;
  --caast-short-card-gap;
  --caast-short-play-size;
  --caast-short-extra-width;
  --caast-short-item-width;
}

/*
*   Wrapper for injected content
*/
.caast-item[data-caast-type="shorts_story"] {
}
/*
*   Class for shorts title
*/
.caast-short__title {
}
/*
*   Wrapper for short slider
*/
.caast-short__slider {
}
/*
*   Wrapper for short item
*/
.caast-short__item[data-caast-theme="story"] {}
/*
*   Wrapper for short item body
*/
.caast-short__body {
}
/*
*   Class for short item image
*/
.caast-short__image {
}
/*
*   Class for short item play icon
*/
.caast-short__play {
}


/*
*   Class for collection slider arrows
*/
.caast-slider__arrow {
}
/*
*   Class for collection slider arrows position
*/
.caast-slider__arrow-next,
.caast-slider__arrow-prev {
}
/*
*   Class for collection slider arrow disabled state
*/
.caast-slider__arrow[aria-disabled='true']{
}
/*
*   Wrapper for slider container
*/
.caast-slider__container {
}
/*
*   Class for slider when using native scroll on mobile
*/
.caast-slider__container-native {
}
/*
*   Wrapper for slider
*/
.caast-slider {
}
/*
*   Wrapper for slider inner content
*/
.caast-slider__track {
}
/*
*   Class for slider slide
*/
.caast-slider__slide {
}