To make the changes for only specific View, please replace .pt-cv-scrollable in below code with
#pt-cv-view-VIEWID (with VIEWID is the ID of your View)

Background color of the next/prev buttons ( <> )

.pt-cv-scrollable .carousel-control span {background: YOUR_COLOR !important}

Hover color of next/prev buttons ( <> )

.pt-cv-scrollable .carousel-control:hover span {color: YOUR_COLOR !important}

Move next/prev buttons ( <> ) to bottom

.pt-cv-scrollable .carousel-control {bottom: -20px!important; top: auto!important;}

Center next/prev buttons ( <> ) vertically on both sides

.pt-cv-scrollable .item{padding-left:30px;padding-right:30px}.pt-cv-scrollable .carousel-control.left{left:0!important;}.pt-cv-scrollable .carousel-control.right{right:0!important;}.pt-cv-scrollable .carousel-control.left,.pt-cv-scrollable .carousel-control.right{position:absolute!important;margin-top:-25px!important;top:50%!important;}

Replace next/prev buttons ( <> ) with custom arrow images

.pt-cv-wrapper .glyphicon-chevron-left:before, .pt-cv-wrapper .glyphicon-chevron-right:before {content: "" !important;}
.pt-cv-wrapper .glyphicon-chevron-left {background: url(URL_OF_ARROW_1); background-size: contain;}
.pt-cv-wrapper .glyphicon-chevron-right {background: url(URL_OF_ARROW_2); background-size: contain;}

Background color of indicator (circle icon at bottom of slides)

.pt-cv-scrollable .pt-cv-carousel-indicators li.active {background-color: YOUR_COLOR !important; background-image: none !important;}

Add border for each post

.pt-cv-scrollable .pt-cv-carousel-caption {border:1px solid YOUR_COLOR; padding:10px}

Slowdown the transition duration

.pt-cv-scrollable .item {transition-duration: 2s !important;}

Remove red background, just keep white next/prev buttons

.pt-cv-scrollable .carousel-control .glyphicon{background:0 0!important;text-shadow:0 0 11px rgba(171,171,171,.925);font-size:30px!important;color:#fff!important}

Change background color of Caption on hover

#pt-cv-view-VIEWID .pt-cv-carousel-caption:hover {background-color: YOUR_COLOR !important;}

(replace VIEWID with ID of your View)

Show text on the right of the thumbnail

By default, text is shown below the thumbnail in the Scrollable list.
To show text below the thumbnail, here is the CSS:

#pt-cv-view-VIEWID .pt-cv-thumbnail {
    width: 50%;
}
#pt-cv-view-VIEWID div.pt-cv-carousel-caption {
    left: 50% !important;
    top: 1px !important;
    width: 50% !important;
}

(replace VIEWID with ID of your View)

Best regards,

To do that, Please add this code to Custom CSS field (the left textarea) in Content Views >> Settings page:

/* Live Filter – custom style for the checkbox type */
.cvp-live-filter.cvp-checkbox {
    min-width: 250px;
}

.cvp-live-filter.cvp-checkbox .cvp-label {
    font-size: 20px !important;
    line-height: 1.3 !important;
    color: #ffffff !important;
    background-color: #00aeef !important;
    display: block;
    margin-right: 0;
    padding: 10px;
}

.cvp-live-filter.cvp-checkbox .checkbox {
    border-bottom: 1px solid #f3f3f3 !important;
    padding: 5px 0px;
    color: red;
}

Best regards,

With Free version, to change border (width, style, color) of Read More button, please use this CSS:

/* Change border of Read More button */
.pt-cv-view .pt-cv-readmore {
    border-width: 3px !important;
    border-style: solid !important;
    border-color: red !important;
}

.pt-cv-view .pt-cv-readmore:hover {
    border-width: 3px !important;
    border-style: solid !important;
    border-color: red !important;
}

You can change values of width, style, color as you want.

Best regards,

.pt-cv-more .caret {display: none !important;}

Best regards,

#cvpboxOverlay {
    background: #000 !important;
    opacity: 0.5 !important;
}

Change the border of the lightbox:

#cvpboxLoadedContent {
    border: 5px solid #000 !important;
}

Change the close icon:

#cvpboxClose {
    background: url(URL_OF_YOUR_CLOSE_ICON_HERE) !important;
}

Lightbox of thumbnail: Move the arrows outside the image:

#cvpboxPrevious {
    left: -45px !important;
}
#cvpboxNext {
    right: -45px !important;
}

Lightbox of thumbnail: change styles of the text/description

#cvpboxTitle {
    font-size: 20px;
    color: #ccc;
    font-family: Arial, serif;
}

Lightbox of thumbnail: remove the text/description

#cvpboxTitle {
    display: none !important;
}

/* Pinterest – equal height columns */
@media (min-width: 992px) {
#pt-cv-view-VIEWID .pt-cv-pinmas {height:300px}
}

and:

• replace VIEWID with ID of your View
• replace 300px with relevant height for your View

Notice: There is a space between VIEWID and .pt-cv-pinmas

Best regards,

/* Show borders around each post in Grid */
.pt-cv-ifield {border: 1px solid #eee; padding: 15px;}

That will work for all grids.

To show the border for a specific view only, please use this CSS instead:

#pt-cv-view-VIEW_ID   .pt-cv-ifield {border: 1px solid #eee; padding: 15px;}

(and replace VIEW_ID with ID of your View)

Best regards,

/* Scrollable list – fade effect */
.pt-cv-carousel .item{transition:opacity ease-in-out .5s!important}.pt-cv-carousel .active.left,.pt-cv-carousel .active.right,.pt-cv-carousel .item{opacity:0!important}.pt-cv-carousel .active,.pt-cv-carousel .next.left,.pt-cv-carousel .prev.right{opacity:1!important}.pt-cv-carousel .active.left,.pt-cv-carousel .active.right,.pt-cv-carousel .next,.pt-cv-carousel .prev{transform:translate3d(0,0,0)!important}

Best regards,

1. Please ensure that the custom font was defined somewhere, for example:

@font-face {
  font-family: "My font";
  src: url("/fonts/Font1-Regular-webfont.woff2") format("woff2"),
       url("/fonts/Font1-Regular-webfont.woff") format("woff");
}

2.

• In the Style Settings tab, click the - Default Font - dropdown
• Select the Custom font option
• Enter the custom font name in the text field

Best regards,

Here are CSS selectors for page number, next/prev button when you want to use your own custom CSS:

/* Page number */
.pt-cv-pagination li a {
    
}

/* Page number - active */
.pt-cv-pagination li.active a {
    
}

Notice: For Pro users, please use the “Style Settings” tab of View to change color, font, align, transform, so on without writing CSS.