{"id":847,"date":"2016-07-12T03:43:30","date_gmt":"2016-07-12T03:43:30","guid":{"rendered":"http:\/\/docs.contentviewspro.com\/?p=847"},"modified":"2023-12-27T10:42:55","modified_gmt":"2023-12-27T10:42:55","password":"","slug":"scrollable-list-elements-navigation-button-indicator","status":"publish","type":"docs","link":"https:\/\/contentviewspro.com\/documentation\/article\/scrollable-list-elements-navigation-button-indicator\/","title":{"rendered":"Scrollable list &#8211; customize style, color, position&#8230;"},"content":{"rendered":"<p>All custom CSS should be put in &#8220;Custom CSS&#8221; field in Content Views &gt;&gt; Settings page.<\/p>\n<blockquote><p>To make the changes for only specific View, please replace <code>.pt-cv-scrollable<\/code> in below code with <br \/> <code>#pt-cv-view-VIEWID<\/code> (with VIEWID is the ID of your View)<\/p><\/blockquote>\n<h2>Background color of the next\/prev buttons ( <> )<\/h2>\n<pre style=\"font-size:13px\">.pt-cv-scrollable .carousel-control span {background: YOUR_COLOR !important}<\/pre>\n<h2>Hover color of next\/prev buttons ( <> )<\/h2>\n<pre style=\"font-size:13px\">.pt-cv-scrollable .carousel-control:hover span {color: YOUR_COLOR !important}<\/pre>\n<h2>Move next\/prev buttons ( <> ) to bottom<\/h2>\n<pre style=\"font-size:13px\">.pt-cv-scrollable .carousel-control {bottom: -20px!important; top: auto!important;}<\/pre>\n<h2 id=\"center-vertical\">Center next\/prev buttons ( <> ) vertically on both sides<\/h2>\n<pre style=\"font-size:13px\">\n.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;}\n<\/pre>\n<h2>Replace next\/prev buttons ( <> ) with custom arrow images<\/h2>\n<pre style=\"font-size:13px\">\n.pt-cv-wrapper .glyphicon-chevron-left:before, .pt-cv-wrapper .glyphicon-chevron-right:before {content: \"\" !important;}\n.pt-cv-wrapper .glyphicon-chevron-left {background: url(URL_OF_ARROW_1); background-size: contain;}\n.pt-cv-wrapper .glyphicon-chevron-right {background: url(URL_OF_ARROW_2); background-size: contain;}\n<\/pre>\n<h2>Background color of indicator (circle icon at bottom of slides)<\/h2>\n<pre style=\"font-size:13px\">.pt-cv-scrollable .pt-cv-carousel-indicators li.active {background-color: YOUR_COLOR !important; background-image: none !important;}<\/pre>\n<h2>Add border for each post<\/h2>\n<pre style=\"font-size:13px\">.pt-cv-scrollable .pt-cv-carousel-caption {border:1px solid YOUR_COLOR; padding:10px}<\/pre>\n<h2>Slowdown the transition duration<\/h2>\n<pre style=\"font-size:13px\">.pt-cv-scrollable .item {transition-duration: 2s !important;}<\/pre>\n<h2>Remove red background, just keep white next\/prev buttons<\/h2>\n<pre style=\"font-size:13px\">\n.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}\n<\/pre>\n<h2>Change background color of Caption on hover<\/h2>\n<pre style=\"font-size:13px\">\n#pt-cv-view-VIEWID .pt-cv-carousel-caption:hover {background-color: YOUR_COLOR !important;}\n<\/pre>\n<p>(replace <strong>VIEWID <\/strong> with ID of your View)<\/p>\n<h2>Show text on the right of the thumbnail<\/h2>\n<p>By default, text is shown below the thumbnail in the Scrollable list.<br \/>\nTo show text below the thumbnail, here is the CSS:<\/p>\n<pre style=\"font-size:13px\">\n#pt-cv-view-VIEWID .pt-cv-thumbnail {\n    width: 50%;\n}\n#pt-cv-view-VIEWID div.pt-cv-carousel-caption {\n    left: 50% !important;\n    top: 1px !important;\n    width: 50% !important;\n}\n<\/pre>\n<p>(replace <strong>VIEWID <\/strong> with ID of your View)<\/p>\n<p>Best regards,<\/p>\n","protected":false},"excerpt":{"rendered":"<p>All custom CSS should be put in &#8220;Custom CSS&#8221; field in Content Views &gt;&gt; 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 &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/contentviewspro.com\/documentation\/article\/scrollable-list-elements-navigation-button-indicator\/\"> <span class=\"screen-reader-text\">Scrollable list &#8211; customize style, color, position&#8230;<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","footnotes":""},"doc_category":[47],"doc_tag":[24],"class_list":["post-847","docs","type-docs","status-publish","hentry","doc_category-customize-css-style","doc_tag-scrollable-list"],"year_month":"2026-09","word_count":297,"total_views":"2","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"admin1","author_nicename":"admin1","author_url":"https:\/\/contentviewspro.com\/documentation\/author\/admin1\/"},"doc_category_info":[{"term_name":"Customize CSS\/Style","term_url":"https:\/\/contentviewspro.com\/documentation\/cats\/customize-css-style\/"}],"doc_tag_info":[{"term_name":"scrollable list","term_url":"https:\/\/contentviewspro.com\/documentation\/tags\/scrollable-list\/"}],"_links":{"self":[{"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/docs\/847","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/comments?post=847"}],"version-history":[{"count":1,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/docs\/847\/revisions"}],"predecessor-version":[{"id":5425,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/docs\/847\/revisions\/5425"}],"wp:attachment":[{"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/media?parent=847"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/doc_category?post=847"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/doc_tag?post=847"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}