{"id":3364,"date":"2017-01-05T01:59:27","date_gmt":"2017-01-05T01:59:27","guid":{"rendered":"https:\/\/docs.contentviewspro.com\/?p=3364"},"modified":"2023-12-29T07:50:40","modified_gmt":"2023-12-29T07:50:40","password":"","slug":"shuffle-filter-show-the-filters-on-the-left-and-the-result-on-the-right","status":"publish","type":"docs","link":"https:\/\/contentviewspro.com\/documentation\/article\/shuffle-filter-show-the-filters-on-the-left-and-the-result-on-the-right\/","title":{"rendered":"Shuffle Filter \u2013 show filters on the left\/right side of result"},"content":{"rendered":"<p>The Shuffle Filter feature of Content Views Pro helps you to show category, tag and custom taxonomy as options to filter result with animation (<a href=\"https:\/\/contentviewspro.com\/demo\/shuffle-filter\/\" target=\"_blank\" rel=\"noopener noreferrer\">see demo<\/a>).<br \/>\nBy default, filters will be display above result.<\/p>\n<ul>\n<li>To show the filters on the left and the result on the right, please add this code to <strong>Custom CSS<\/strong> field (the left textarea) in <a href=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2018\/03\/Content-Views-_-Settings.png\">Content Views &gt;&gt; Settings<\/a> page:\n<pre style=\"font-size: 13px;\">[id^=\"pt-cv-filter-bar-VIEWID\"] {\n    width: 20% !important;\n    float: left !important;\n}\n[id^=\"pt-cv-filter-bar-VIEWID\"] .btn, \n[id^=\"pt-cv-filter-bar-VIEWID\"] .pt-cv-filter-egroup {\n    width: 100% !important;\n}\n#pt-cv-view-VIEWID {\n    clear: none !important;\n    margin-left: 20% !important;\n}\n<\/pre>\n<\/li>\n<li>To show the filters on the right and the result on the left, please add this code to <strong>Custom CSS<\/strong> field (the left textarea) in <a href=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2018\/03\/Content-Views-_-Settings.png\">Content Views &gt;&gt; Settings<\/a> page:\n<pre style=\"font-size: 13px;\">[id^=\"pt-cv-filter-bar-VIEWID\"] {\n    width: 20% !important;\n    float: right !important;\n}\n[id^=\"pt-cv-filter-bar-VIEWID\"] .btn, \n[id^=\"pt-cv-filter-bar-VIEWID\"] .pt-cv-filter-egroup {\n    width: 100% !important;\n}\n#pt-cv-view-VIEWID {\n    clear: none !important;\n    margin-right: 20% !important;\n}\n<\/pre>\n<\/li>\n<\/ul>\n<p>(replace <strong>VIEWID<\/strong> in above code with <a href=\"https:\/\/contentviewspro.com\/documentation\/article\/what-is-id-of-a-view\/\">ID of your View<\/a>)<\/p>\n<p>Best regards,<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Shuffle Filter feature of Content Views Pro helps you to show category, tag and custom taxonomy as options to filter result with animation (see demo). By default, filters will be display above result. To show the filters on the left and the result on the right, please add this code to Custom CSS field &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/contentviewspro.com\/documentation\/article\/shuffle-filter-show-the-filters-on-the-left-and-the-result-on-the-right\/\"> <span class=\"screen-reader-text\">Shuffle Filter \u2013 show filters on the left\/right side of result<\/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":[53],"doc_tag":[29],"class_list":["post-3364","docs","type-docs","status-publish","hentry","doc_category-shuffle-filter","doc_tag-custom-css"],"year_month":"2026-09","word_count":150,"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":"Shuffle Filter","term_url":"https:\/\/contentviewspro.com\/documentation\/cats\/shuffle-filter\/"}],"doc_tag_info":[{"term_name":"custom CSS","term_url":"https:\/\/contentviewspro.com\/documentation\/tags\/custom-css\/"}],"_links":{"self":[{"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/docs\/3364","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=3364"}],"version-history":[{"count":2,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/docs\/3364\/revisions"}],"predecessor-version":[{"id":5643,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/docs\/3364\/revisions\/5643"}],"wp:attachment":[{"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/media?parent=3364"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/doc_category?post=3364"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/doc_tag?post=3364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}