Advanced Customization of Layouts (CSS)

Overview

Learn how to use CSS to fine-tune your Novel journey based on your visual preference.

Use the exact element classes you are required to change that are provided within this document. Copy and paste these as is.

Customizing your Layouts

The Customize Theme sidebar has different options based on the layout that you select. The input field is the same, though you can use the image below to ensure you are using the correct layout.

CSS Input Field

You. have the option to add these code snippets by checking the Advanced Customization checkbox within the Customize Theme sidebar panel and inputing the relevant code snippet for your use-case within the Custom CSS input field. You can access this panel by clicking the green Preview button at the top right of the screen within the Novel Studio.

View image

Use the exact element classes you are required to change that are provided within this document. Copy and paste these as is.

Carousel Layout CSS Code Snippets

Always consider whether you need to fine-tune your layout with advanced CSS customization vs. change your fundamental layout. You can learn more about layout options here.

Below are a set of CSS code snippets for customizations you can make to the carousel layout. Please note the below only apply to the carousels layout, and cannot be applied to the stories, overlay, or spotlight layouts.

Change Border from Rounded to Square
(Carousel)

.carousel-container 
.swiper 
.swiper-wrapper 
.swiper-slide {
    border-radius: 0px;
}

Increase Space Between Videos
(Carousel)

.swiper-slide {
  margin-right: 25px !important;
}

Decrease Space Between Videos
(Carousel)

.swiper-slide{
  margin-right: 5px !important;
}

Increase Video Height
(Carousel)

.carousel-container 
.swiper 
.swiper-wrapper 
.swiper-slide {
    max-height: 200px;
    height: 200px;
}

Decrease Video Height
(Carousel)

.carousel-container 
    .swiper 
        .swiper-wrapper 
            .swiper-slide {
                min-height: 100px;
                height: 100px;
}

Increase Video Width
(Carousel)

.carousel-container {
  .swiper {
    .swiper-wrapper {
      .swiper-slide {
        width: 260px !important;
      }
    }
  }
}

Decrease Video Width
(Carousel)

.carousel-container 
    .swiper 
        .swiper-wrapper 
            .swiper-slide {
                width: 50px !important;
                min-width: 50px;
}

Change Play Button Color
(Carousel)

.play-button svg path{
 fill: #F00;
}

Replace #F00 with your desired color code. For example, #00F will change the play button color to blue.

Make Play Button Smaller
(Carousel)

.play-button svg {
width: 10px;
height: 10px;
}

.swiper-slide button {
width: 40px;
height: 40px;
}

Overlay Layout Customization: CSS Code Snippets

Always consider whether you need to fine-tune your layout with advanced CSS customization vs. change your fundamental layout. You can learn more about layout options here.

Below are a set of CSS code snippets for customizations you can make to the overlay layout. Please note the below only apply to the carousels layout, and cannot be applied to the stories, carousel, or spotlight layouts.

Smaller Overlay
(Overlay)

div.overlay-wrapper {
  height: 200px;
  width: 140px;
}

Make Overlay Larger
(Overlay)

div.overlay-wrapper {
  height: 400px;
  width: 240px;
}

Taller Overlay
(Overlay)

div.overlay-wrapper{
height: 300px;
width: 140px;
}

Wider Overlay
(Overlay)

div.overlay-wrapper{
  height: 100px;
  width: 300px;
}

Circular Overlay
(Overlay)

div.overlay-wrapper{
height: 200px;
width: 200px;
border-radius: 50%;
}

Square Overlay
(Overlay)

 div.overlay-wrapper{
 height: 200px;
 width: 200px;
 }

Remove Overlay Border
(Overlay)

div.overlay-wrapper {
    border: 0px;
}

Square Overlay Corners
(Overlay)

div.overlay-wrapper{
  border-radius: 0px;
}

Change Close Button Color
(Overlay)

div.overlay-wrapper 
    .close-button 
        svg 
            path {
                fill: #YourColorCode;
}

Replace #YourColorCode with the desired color code. For example, if you want to change the color to red, you would write fill: #FF0000;.

Stories Layout CSS Code Snippets

Always consider whether you need to fine-tune your layout with advanced CSS customization vs. change your fundamental layout. You can learn more about layout options here.

Below are a set of CSS code snippets for customizations you can make to the stories layout. Please note the below only apply to the carousels layout, and cannot be applied to the carousel, overlay, or spotlight layouts.

Increase Bubble Distance
(Stories)

.stories-wrapper .story {
 margin-right: 10px;
}

Decrease Bubble Distance
(Stories)

.stories-wrapper .story {
 margin-right: 25px;
}

Increase Font Size
(Stories)

.stories-wrapper 
    .story-name 
        span {
            font-size: 10px;
}

Decrease Font Size
(Stories)

.stories-wrapper 
    .story-name 
        span {
            font-size: 20px;
}