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 navigation buttons ( <> )

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

Hover color of next (>), previous (<) icon

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

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

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

Move navigation to bottom

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

Center navigation vertically

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

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 {
    left: 50% !important;
    top: 1px !important;
    width: 50% !important;

(replace VIEWID with ID of your View)

Best regards,