Hi guys, can you please advise me is it possible to style individual tag added to custom post type?
For example, please check this link:
hidden link
I have on the right hand side Listings keywords block with keywords as taxonomies, keyword 1, keyword 2, keyword 3. Is it possible to style each keyword individually? Like for example these tag block:
hidden link
When I add shortcode, I can't add class or custom styling there
Please advise, thanks in advance
Sasa
Hi Sasa,
Thank you for contacting us and I'd be happy to assist.
To style the tags similar to the ones on the example page, you can wrap your shortcode inside a special div with a class 'tagcloud':
<div class="tagcloud">
// shortcode for the tags
</div>
Next, in your content template's CSS editor, you can include the following custom CSS code:
.tagcloud a {
font-size: 14px!important;
color: #000;
padding: 12px 15px;
margin: 4px;
line-height: 1;
float: left;
border: 1px solid #ebebeb;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
.tagcloud a:hover {
background: #f26522;
border-color: #f26522;
color: #fff;
}
I hope this helps and please let me know if you need any further assistance with this.
regards,
Waqar
Hi Waqar, thanks so much, it works, much appreciate your response.
I have another issue, if you can check. Somehow I can't push element below that tag block, element below is overlapping with tag element above. Can you please check? I even added additional wrapper div to you code:
hidden link
<div class="tagCloudWrapper">
<div class="tagCloud">
[wpv-post-taxonomy type="listing-keyword" separator=" "]
</div>
</div>
---
.tagCloudWrapper {margin-bottom: 64px!important;}
.tagCloud a {
font-size: 14px!important;
color: #000000;
padding: 12px 15px;
margin: 4px;
line-height: 1;
float: left;
border: 1px solid #ebebeb;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
.tagCloud a:hover {
background: #f26522;
border-color: #f26522;
color: #ffffff;
}
If I add additional padding-bottom: 64px!important to .tagCloudWrapper class, it moves element bellow, but any additionally added tag will just not move element below, but eventually overlap with it.
Please advise and thanks in advance
Sasa
Thanks for the update and glad I could help.
To fix this overlapping, you can replace this CSS code:
.tagCloudWrapper {
margin-bottom: 64px!important;
padding-bottom: 128px!important;
}
With:
.tagCloudWrapper {
overflow: hidden;
}
Hi Waqar, this works, awesome, thanks again. Just another, if you can help me.
Hi can I achieve number of used keywords like here: hidden link
Thanks again for your prompt and helpful support
Best regards
Sasa
The feature of showing the number of times a tag has been used would depend on what you're using for showing those tags.
Are you using any shortcode or a widget for this? If yes, please check its options or documentation.
If you're not sure, you can share a screenshot of how this tags section is set up in the admin area.
Hi Waqar, I'm using a shortcode on listing content template, here is the screenshot
hidden link
If you need admin account, please let me know, this is our dev env.
Best regards
Sasa
Thank you for sharing the screenshot.
To have more control over the output of those taxonomy links, you can replace the "wpv-post-taxonomy" shortcode, with a combination of shortcodes, wrapped inside the 'wpv-post-taxonomy-iterator' shortcode, like this:
[wpv-post-taxonomy-iterator taxonomy="category"]
<a href="[wpv-taxonomy-url]" class="tag-cloud-link">
[wpv-taxonomy-title]<span class="tag-link-count"> ([wpv-taxonomy-post-count])</span>
</a>
[/wpv-post-taxonomy-iterator]
The information about all these shortcodes is available on our shortcode reference page at:
https://toolset.com/documentation/programmer-reference/views/views-shortcodes/
Note: I've shared the example code with line breaks and spaces just to make its usage clear and you can add it all in a single line too.
Hi Waqar, sorry for my late response, apologies, it was a busy week.
Unfortunately that shortcode doesn't work for me, but really that is not the problem now, I will see if the client requires how many posts do we have in any of added keywords.
My issues now is that I don't know how to hide keywords block if that custom post type doesn't have any keywords added. For example, if you check this page:
hidden link
and if you check the first two listings, first one have keywords added, second one doesn't have. How can I hide keyword block if the listing doesn't have associated keywords? I tried with conditional block, but without success
Any help will be appreciated
Thanks in advance
Sasa
To conditionally show some content, you can wrap it inside the conditional display shortcode:
https://toolset.com/documentation/legacy-features/views-plugin/conditional-html-output-in-views/
For example, suppose, you have this code to show the keywords section:
<div>
<span class="description-name">Keywords:</span>
<span class="description-value">
[wpv-post-taxonomy type='category' separator=', ']
</span>
</div>
To wrap it inside the conditional check for the empty value, you can use:
[wpv-conditional if="( '[wpv-post-taxonomy type='category' separator=', ']' ne '' )"]
<div>
<span class="description-name">Keywords:</span>
<span class="description-value">
[wpv-post-taxonomy type='category' separator=', ']
</span>
</div>
[/wpv-conditional]
As a result, the section wrapped inside this conditional statement will only show when the output of the shortcode [wpv-post-taxonomy type='category' separator=', '] is not empty.
For the keyword count not working, you're welcome to share the screenshot(s) of exactly how and where you followed the steps that I suggested in my last message. This will help in narrowing down any missing pieces.
Hi Waqar, everything works, thanks so much for your help on this issue!!!
Best regards
My issue is resolved now. Thank you!
