Hello @Anton,
Thank you so much for your help.
I’ve tried everything you’ve recommended and I probably **bleep** something up because it doesn’t appear to be working. Here’s the code for my Listing Template (with the suggested inclusion of <div class=“post-item {{topic.name}}”>:
<div class="blog-section">
<div class="blog-listing-wrapper cell-wrapper">
{# simple_list_page indicates the "blog/all" page, which is a list of links to every blog post #}
<div class="post-listing{% if simple_list_page %}-simple{% endif %}">
{% if blog_author %}
<div class="hs-author-profile">
<h2 class="hs-author-name">{{ blog_author.display_name }}</h2>
{% if blog_author.avatar %} <div class="hs-author-avatar"> <img src="{{ blog_author.avatar }}"> </div> {% endif %}
<div class="hs-author-bio">{{ blog_author.bio }}</div>
{% if blog_author.has_social_profiles %}
<div class="hs-author-social-section">
<span class="hs-author-social-label">Find me on:</span>
<div class="hs-author-social-links">
{% if blog_author.facebook %}
<a href="{{ blog_author.facebook }}" target="_blank" class="hs-author-social-link hs-social-facebook"> </a>
{% endif %}
{% if blog_author.linkedin %}
<a href="{{ blog_author.linkedin }}" target="_blank" class="hs-author-social-link hs-social-linkedin"> </a>
{% endif %}
{% if blog_author.twitter %}
<a href="{{ blog_author.twitter }}" target="_blank" class="hs-author-social-link hs-social-twitter"> </a>
{% endif %}
{% if blog_author.google_plus %}
<a href="{{ blog_author.google_plus }}?rel=author" target="_blank" class="hs-author-social-link hs-social-google-plus"> </a>
{% endif %}
</div>
</div>
{% endif %}
</div>
<h3 class="hs-author-listing-header">Recent Posts</h3>
{% endif %}
{% for content in contents %}
<div class="post-item {{topic.name}}">
{% if not simple_list_page %}
{% if content.post_list_summary_featured_image %}
<div class="hs-featured-image-wrapper" style="background: url({{ content.post_list_summary_featured_image }}) center center no-repeat; background-size: cover; position: relative;">
<a href="{{content.absolute_url}}" title="" class="hs-featured-image-link"></a>
</div>
{% endif %}
<div class="post-listing-body">
<!--post summary-->
<div class="post-header">
<h2><a href="{{content.absolute_url}}">{{ content.name }}</a></h2>
</div>
<div>
{% if content_group.show_summary_in_listing %}
{{ content.meta_description }}<br>
<a class="more-link-blog-post-listing" href="{{ content.absolute_url }}">Read More</a>
{% endif %}
</div>
<div class="custom_listing_comments">
{% set comments_number = content.comment_list|length %}
{% if comments_number == 1 %}
{% set comments_lable = "Comment" %}
{% else %}
{% set comments_lable = "Comments" %}
{% endif %}
{{ comments_number }} {{ comments_lable }} <a href="{{content.absolute_url}}#comments-listing">Click here to read/write comments</a>
</div>
<div id="hubspot-author_data" class="hubspot-editable" data-hubspot-form-id="author_data" data-hubspot-name="Blog Author">
<div class="author-blog-post-listing">
Posted by
{%if content.blog_post_author %}
<a class="author-link" href="{{ group.absolute_url }}/author/{{ content.blog_post_author.slug }}">{{ content.blog_post_author.display_name }}</a> on {{ content.publish_date_localized }}
{% endif %}
</div>
</div>
<!--Topics links
{% if content.topic_list %}
<p id="hubspot-topic_data"> Topics:
{% for topic in content.topic_list %}
<a class="topic-link" href="{{ group.absolute_url }}/topic/{{ topic.slug }}">{{ topic.name }}</a>{% if not loop.last %},{% endif %}
{% endfor %}
</p>
{% endif %}
{% else %}
<h2 class="post-listing-simple"><a href="{{content.absolute_url}}">{{ content.name }}</a></h2>
{% endif %}
-->
</div>
</div>
{% endfor %}
</div>
{% if not simple_list_page %}
<div class="blog-pagination">
{% if last_page_num %}
<a class="previous-posts-link" href="{{ blog_page_link(last_page_num) }}">Previous</a>
{% endif %}
<a class="all-posts-link" href="{{ group.absolute_url }}/all">All posts</a>
{% if next_page_num %}
<a class="next-posts-link" href="{{ blog_page_link(next_page_num) }}">Next</a>
{% endif %}
</div>
{% endif %}
</div>
</div>
And here’s the associated CSS using auto-diy as the tag — i’m just using that one as a test and, for the time being, i’m just trying to change the background to orange (#EB5937) to make sure it’s working:
.blog-listing-wrapper .post-listing .post-item.auto-diy {
border-bottom: 1px solid #cccccc;
padding: 0 10px 0 0;
margin: 0 0 20px;
background: #eb5937;
display:flex;
width:100%;
box-sizing:border-box;
align-content: stretch;
}
After implementing the above, the relevant blog post listings don’t appear to be affected at all with the change. Here’s an example of one blog post listing that should be orange as it’s tagged as Auto DIY:
The Augmented Reality for Automotive DIY listing on our blog (
blog.anthonythomas.com) should have an orange background based on the tag of Auto DIY — but as you can see, it still has the cream colored background.
Here’s what inspector spits out for the Augmented Reality for Automotive DIY listing — i’m not sure, but it doesn’t appear to be picking up the tag name as part of the post-item class…
I’ve looked over everything that was suggested and I’m pretty sure I **bleep** something up — but i can’t seem to find out where i went wrong. I hope you can help me.
Also, one additional question (if you don’t mind): since each of our blog posts are tagged with multiple tags, how will I be able to tell the system which tag CSS should superce all others within the suggested method. That is, I’d love to be able to tell the system: if has tag X, use this CSS and if it doesn’t, then use the “standard” CSS.
Once again… thank you so much for helping me out.
Cheers.
Dani
| Did my post help answer your query? Help the Community by marking it as a solution |
