<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>custom CSS &#8211; Content Views Pro</title>
	<atom:link href="https://contentviewspro.com/documentation/tags/custom-css/feed/" rel="self" type="application/rss+xml" />
	<link>https://contentviewspro.com/documentation</link>
	<description>Most Popular Filter &#38; Grid Plugin For WordPress</description>
	<lastBuildDate>Fri, 29 Dec 2023 08:28:06 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	
	<item>
		<title>Show bullet list with Grid layout</title>
		<link>https://contentviewspro.com/documentation/article/show-bullet-list-with-grid-layout/</link>
		
		<dc:creator><![CDATA[admin1]]></dc:creator>
		<pubDate>Fri, 06 Mar 2020 03:37:57 +0000</pubDate>
				<guid isPermaLink="false">https://docs.contentviewspro.com/?p=3854</guid>

					<description><![CDATA[To show bullet list with Grid layout, please use this CSS: #pt-cv-view-VIEW_ID .pt-cv-title a { list-style-type: disc; margin-left: 25px !important; display: list-item; } (replace VIEW_ID with ID of your View) With Content Views Pro, please add above code to Custom CSS field in Content Views >> Settings page. With Content Views Free, please add above &#8230;<p class="read-more"> <a class="" href="https://contentviewspro.com/documentation/article/show-bullet-list-with-grid-layout/"> <span class="screen-reader-text">Show bullet list with Grid layout</span> Read More &#187;</a></p>]]></description>
										<content:encoded><![CDATA[<p>To show bullet list with Grid layout, please use this CSS:</p>
<pre style="font-size:13px">
#pt-cv-view-VIEW_ID .pt-cv-title a {
    list-style-type: disc;
    margin-left: 25px !important;
    display: list-item;
}
</pre>
<p>(replace <strong>VIEW_ID</strong> with <a href="https://contentviewspro.com/documentation/article/what-is-id-of-a-view/">ID of your View</a>)</p>
<p>With Content Views Pro, please add above code to <strong>Custom CSS</strong> field in Content Views >> Settings page.<br />
With Content Views Free, please add above code to file style.css of your active theme.</p>
<p>Best regards,</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Pagination &#8211; hide the First, Last button in the Ajax numbered pagination</title>
		<link>https://contentviewspro.com/documentation/article/pagination-hide-the-first-last-button-in-the-ajax-numbered-pagination/</link>
		
		<dc:creator><![CDATA[admin1]]></dc:creator>
		<pubDate>Thu, 05 Mar 2020 03:29:28 +0000</pubDate>
				<guid isPermaLink="false">https://docs.contentviewspro.com/?p=3847</guid>

					<description><![CDATA[To hide the first and last buttons (&#8810; &#8811;) in the Ajax numbered pagination, please add this code to Custom CSS field (the left textarea) in Content Views >> Settings page: .cv-pageitem-first, .cv-pageitem-last {display: none !important;} (If you are using the Free version, you might add above CSS to the file style.css of the theme) &#8230;<p class="read-more"> <a class="" href="https://contentviewspro.com/documentation/article/pagination-hide-the-first-last-button-in-the-ajax-numbered-pagination/"> <span class="screen-reader-text">Pagination &#8211; hide the First, Last button in the Ajax numbered pagination</span> Read More &#187;</a></p>]]></description>
										<content:encoded><![CDATA[<p>To hide the first and last buttons (&#8810; &#8811;) in the Ajax numbered pagination, 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 >> Settings</a> page:</p>
<pre style="font-size:13px">
.cv-pageitem-first, .cv-pageitem-last {display: none !important;}
</pre>
<p>(If you are using the Free version, you might add above CSS to the file style.css of the theme)</p>
<p>Best regards,</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Live Filter &#8211; custom style for the Checkbox</title>
		<link>https://contentviewspro.com/documentation/article/live-filter-custom-style-for-the-checkbox-type/</link>
		
		<dc:creator><![CDATA[admin1]]></dc:creator>
		<pubDate>Wed, 10 Jul 2019 04:17:53 +0000</pubDate>
				<guid isPermaLink="false">https://docs.contentviewspro.com/?p=3645</guid>

					<description><![CDATA[This document helps you to style the checkbox type of Live Filter to look like this: 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 { &#8230;<p class="read-more"> <a class="" href="https://contentviewspro.com/documentation/article/live-filter-custom-style-for-the-checkbox-type/"> <span class="screen-reader-text">Live Filter &#8211; custom style for the Checkbox</span> Read More &#187;</a></p>]]></description>
										<content:encoded><![CDATA[<p>This document helps you to style the checkbox type of Live Filter to look like this:</p>
<p><img fetchpriority="high" decoding="async" src="https://contentviewspro.com/documentation/wp-content/uploads/2019/07/cvp-live-filter-checkbox.png" alt="cvp-live-filter-checkbox" width="557" height="275" class="alignnone size-full wp-image-3646" srcset="https://contentviewspro.com/documentation/wp-content/uploads/2019/07/cvp-live-filter-checkbox.png 557w, https://contentviewspro.com/documentation/wp-content/uploads/2019/07/cvp-live-filter-checkbox-300x148.png 300w" sizes="(max-width: 557px) 100vw, 557px" /></p>
<p>To do that, 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 >> Settings</a> page:</p>
<pre style="font-size:13px">
/* 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;
}
</pre>
<p>Best regards,</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Change border of Read More button</title>
		<link>https://contentviewspro.com/documentation/article/change-border-width-style-color-of-read-more-button/</link>
		
		<dc:creator><![CDATA[admin1]]></dc:creator>
		<pubDate>Wed, 10 Apr 2019 02:39:27 +0000</pubDate>
				<guid isPermaLink="false">https://docs.contentviewspro.com/?p=3572</guid>

					<description><![CDATA[With Pro version, you can change Border in Style Settings &#62; Read More. 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: &#8230;<p class="read-more"> <a class="" href="https://contentviewspro.com/documentation/article/change-border-width-style-color-of-read-more-button/"> <span class="screen-reader-text">Change border of Read More button</span> Read More &#187;</a></p>]]></description>
										<content:encoded><![CDATA[<p>With Pro version, you can change Border in Style Settings &gt; Read More.</p>
<p>With Free version, to change border (width, style, color) of Read More button, please use this CSS:</p>
<pre style="font-size: 13px;">/* 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;
}
</pre>
<p>You can change values of width, style, color as you want.</p>
<p>Best regards,</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Live Filter – hide Submit, Reset button</title>
		<link>https://contentviewspro.com/documentation/article/live-filter-hide-the-submit-reset-button/</link>
		
		<dc:creator><![CDATA[admin1]]></dc:creator>
		<pubDate>Tue, 12 Feb 2019 07:12:08 +0000</pubDate>
				<guid isPermaLink="false">https://docs.contentviewspro.com/?p=3535</guid>

					<description><![CDATA[To hide the Submit button, please use this CSS: .cvp-live-submit { display: none !important; } To hide the Reset button, please use this CSS: .cvp-live-reset { display: none !important; } You can add above code to Custom CSS field (the left textarea) in Content Views >> Settings page. Best regards,]]></description>
										<content:encoded><![CDATA[<p>To hide the Submit button, please use this CSS:</p>
<pre style="font-size:13px">
.cvp-live-submit {
    display: none !important;
}
</pre>
<p>To hide the Reset button, please use this CSS:</p>
<pre style="font-size:13px">
.cvp-live-reset {
    display: none !important;
}
</pre>
<p>You can add above 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 >> Settings</a> page.</p>
<p>Best regards,</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Pagination &#8211; hide the caret (the down arrow) in the &#8220;Load more&#8221; pagination</title>
		<link>https://contentviewspro.com/documentation/article/pagination-hide-the-caret-the-down-arrow-in-the-load-more-pagination/</link>
		
		<dc:creator><![CDATA[admin1]]></dc:creator>
		<pubDate>Mon, 29 Oct 2018 04:03:22 +0000</pubDate>
				<guid isPermaLink="false">https://docs.contentviewspro.com/?p=3410</guid>

					<description><![CDATA[Please add this code to Custom CSS field (the left textarea) in Content Views >> Settings page: .pt-cv-more .caret {display: none !important;} Best regards,]]></description>
										<content:encoded><![CDATA[<p>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 >> Settings</a> page:</p>
<pre style="font-size:13px">
.pt-cv-more .caret {display: none !important;}
</pre>
<p>Best regards,</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Shuffle Filter &#8211; remove scroll bar in &#8220;Group by Taxonomy&#8221; type (checkboxes)</title>
		<link>https://contentviewspro.com/documentation/article/shuffle-filter-remove-scroll-bar-in-group-by-taxonomy-filter-checkboxes/</link>
		
		<dc:creator><![CDATA[admin1]]></dc:creator>
		<pubDate>Mon, 08 Oct 2018 02:33:08 +0000</pubDate>
				<guid isPermaLink="false">https://docs.contentviewspro.com/?p=3370</guid>

					<description><![CDATA[With the Shuffle Filter feature, you can show categories, tags and custom taxonomies as options in several types to filter result. When you show options as checkboxes, the scrollbar will be shown if there are a lot of options. To show all options without scrollbar, Please add this code to Custom CSS field (the left &#8230;<p class="read-more"> <a class="" href="https://contentviewspro.com/documentation/article/shuffle-filter-remove-scroll-bar-in-group-by-taxonomy-filter-checkboxes/"> <span class="screen-reader-text">Shuffle Filter &#8211; remove scroll bar in &#8220;Group by Taxonomy&#8221; type (checkboxes)</span> Read More &#187;</a></p>]]></description>
										<content:encoded><![CDATA[<p>With the Shuffle Filter feature, you can show categories, tags and custom taxonomies as options in several types to filter result. When you show options as checkboxes, the scrollbar will be shown if there are a lot of options.<br />
To show all options without scrollbar, 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:</p>
<pre style="font-size: 13px;">.pt-cv-filter-group ul {max-height: 500px;}
</pre>
<p>Best regards,</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Live Filter &#8211; show checkboxes and radio buttons horizontally in rows &#038; columns</title>
		<link>https://contentviewspro.com/documentation/article/live-filter-show-checkboxes-radio-buttons-rows-columns-instead-vertical-list/</link>
		
		<dc:creator><![CDATA[admin1]]></dc:creator>
		<pubDate>Mon, 23 Apr 2018 11:40:54 +0000</pubDate>
				<guid isPermaLink="false">https://docs.contentviewspro.com/?p=3050</guid>

					<description><![CDATA[To show Live Filter checkboxes and radio buttons in rows and columns (instead of vertical list), please add this code to Custom CSS field (the left textarea) in Content Views &#62;&#62; Settings page: /* Live Filter - show checkboxes &#38; radio buttons horizontally in rows, columns */ .cvp-live-filter, .cvp-live-filter label { display: block !important; } &#8230;<p class="read-more"> <a class="" href="https://contentviewspro.com/documentation/article/live-filter-show-checkboxes-radio-buttons-rows-columns-instead-vertical-list/"> <span class="screen-reader-text">Live Filter &#8211; show checkboxes and radio buttons horizontally in rows &#038; columns</span> Read More &#187;</a></p>]]></description>
										<content:encoded><![CDATA[<p>To show Live Filter checkboxes and radio buttons in rows and columns (instead of vertical list), 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:</p>
<pre style="font-size: 13px;">/* Live Filter - show checkboxes &amp; radio buttons horizontally in rows, columns */
.cvp-live-filter, .cvp-live-filter label {
    display: block !important;
}

.cvp-live-filter .checkbox, .cvp-live-filter .radio {
    display: inline-block;
    width: 33%;
}

/* on mobile */
@media (max-width: 768px) {
    .cvp-live-filter .checkbox, .cvp-live-filter .radio {
        width: 50% !important;
    }
}
</pre>
<p>Please replace 33% by another value (for example: 25%) to change the number of columns.</p>
<h2>Notice:</h2>
<p>To use above styles for <strong>specific View only</strong>, please replace</p>
<pre style="font-size: 13px;">.cvp-live-filter
</pre>
<p>with</p>
<pre style="font-size: 13px;">.cvp-live-filter[data-sid="VIEW_ID"]
</pre>
<p>(replace <strong>VIEW_ID</strong> with <a href="https://contentviewspro.com/documentation/article/what-is-id-of-a-view/">ID of your View</a>)</p>
<p>Best regards,</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Lightbox &#8211; change background color, opacity, close icon&#8230;</title>
		<link>https://contentviewspro.com/documentation/article/lightbox-change-background-color-opacity-close-icon-etc/</link>
		
		<dc:creator><![CDATA[admin1]]></dc:creator>
		<pubDate>Thu, 12 Apr 2018 09:20:08 +0000</pubDate>
				<guid isPermaLink="false">https://docs.contentviewspro.com/?p=3037</guid>

					<description><![CDATA[Change background color and opacity around the lightbox: #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; &#8230;<p class="read-more"> <a class="" href="https://contentviewspro.com/documentation/article/lightbox-change-background-color-opacity-close-icon-etc/"> <span class="screen-reader-text">Lightbox &#8211; change background color, opacity, close icon&#8230;</span> Read More &#187;</a></p>]]></description>
										<content:encoded><![CDATA[<h2>Change background color and opacity around the lightbox:</h2>
<pre style="font-size: 13px;">#cvpboxOverlay {
    background: #000 !important;
    opacity: 0.5 !important;
}
</pre>
<h2>Change the border of the lightbox:</h2>
<pre style="font-size: 13px;">#cvpboxLoadedContent {
    border: 5px solid #000 !important;
}
</pre>
<h2>Change the close icon:</h2>
<pre style="font-size:13px">
#cvpboxClose {
    background: url(URL_OF_YOUR_CLOSE_ICON_HERE) !important;
}
</pre>
<h2>Lightbox of thumbnail: Move the arrows outside the image:</h2>
<pre style="font-size:13px">
#cvpboxPrevious {
    left: -45px !important;
}
#cvpboxNext {
    right: -45px !important;
}
</pre>
<h2>Lightbox of thumbnail: change styles of the text/description</h2>
<pre style="font-size:13px">
#cvpboxTitle {
    font-size: 20px;
    color: #ccc;
    font-family: Arial, serif;
}
</pre>
<h2>Lightbox of thumbnail: remove the text/description</h2>
<pre style="font-size:13px">
#cvpboxTitle {
    display: none !important;
}
</pre>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Live Filter – hide the &#8220;ALL&#8221; option of the Button type</title>
		<link>https://contentviewspro.com/documentation/article/live-filter-hide-option-button-type/</link>
		
		<dc:creator><![CDATA[admin1]]></dc:creator>
		<pubDate>Thu, 05 Apr 2018 02:31:53 +0000</pubDate>
				<guid isPermaLink="false">https://docs.contentviewspro.com/?p=3023</guid>

					<description><![CDATA[To hide the ALL option of the Button type, Please add this code to Custom CSS field (the left textarea) in Content Views >> Settings page: /* Live Filter – hide the ALL option of the Button type */ .cvp-live-filter.cvp-button .btn:first-of-type {display:none!important} Best regards,]]></description>
										<content:encoded><![CDATA[<p>To hide the ALL option of the Button type, 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 >> Settings</a> page:</p>
<pre style="font-size:13px">
/* Live Filter – hide the ALL option of the Button type */
.cvp-live-filter.cvp-button .btn:first-of-type {display:none!important}
</pre>
<p>Best regards,</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
