Scrollable list – customize style, color, position…

All custom CSS should be put in “Custom CSS” field in Content Views >> Settings page.

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,