CMS Development

ATA-Daniel
Participant | Partner
Participant | Partner

Different CSS for Blog Listings Based on Topic/Tag

SOLVE

Hello,

We're in the process of re-designing our blog and we're getting there in terms of what we're trying to do: https://blog.anthonythomas.com/. The next step is making certain blog post listings appear a little different based on a topic/tag. That is, all the blog post listings will look essentially the same unless the post has a specific tag/topic — in which case we want to change the listing background color and text yada yada yada. Below is a pic of what we're trying to accomplish. Any help would be greatly appreciated.

 

Thank you.
Dani

Would like to show all the listings with the cream colored background unless they have a specific topic/tag — in which case they would be shown in the orange background.Would like to show all the listings with the cream colored background unless they have a specific topic/tag — in which case they would be shown in the orange background.

0 Upvotes
1 Accepted solution
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Different CSS for Blog Listings Based on Topic/Tag

SOLVE

Hi @ATA-Daniel,

 

sorry - my bad. I thought it would be enough to just put 

<div class="post-item {{topic.name}}">

after your feedback I've checked it and I was wrong. 

 

The working code is this one:

<div class="post-item {% for topic in content.topic_list %}{{ topic.name }} {% if not loop.last %} {% endif %}{% endfor %}">

 

For your additional question(no problem by the way 🙂 😞

This is why I've recommended you to the give each post a specific tag which you style.

 

For example:

You have a blogpost with following tags:

- auto-diy

- wood-diy

- cooking-diy

...

 

This tags shouldn't be styled since - you're correct - how would the system know which style it has to apply. (normaly it'll be always the last class which overwrites the other ones)

If you give it a specific tag(class) which is styled, then it will work.

So if you want that the right preview in the listing is orange add a "orange" as tag. 

 

 

Btw: Your CSS code is correct 🙂

 

 

regards
Anton

 

Did my post help answer your query? Help the Community by marking it as a solution

 

Anton Bujanowski Signature

View solution in original post

7 Replies 7
Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Different CSS for Blog Listings Based on Topic/Tag

SOLVE

Hi @ATA-Daniel

I think the easiest way would be to do it by styling the tags. For that you'll have to slightly modify your listing template.

 

Here you'll find the basic blog markup. In the "Listing post markup" section you'll find the "post topic snippet". 

It looks like this

{% if content.topic_list %} <p id="hubspot-topic_data"> Topics: {% for topic in content.topic_list %} <a class="topic-link" href="{{ blog_tag_url(group.id, topic.slug) }}">{{ topic.name }}</a>{% if not loop.last %},{% endif %} {% endfor %} </p> {% endif %}

The only thing I would copy from this is 

{{topic.name}}

Search for 

<div class="post-item">

in your listing template and paste

{{topic.name}}

after "post-item".

 

It should look like this

<div class="post-item {{topic.name}}">

 

After you've done that, all tags will be added as classes.

 

Now you can style them via CSS.

 

The CSS markup should look something like this:

.blog-listing-wrapper .post-listing .post-item.THE-SPECIFIC-TAG{
background-color:#YOUR-DESIRED-COLOR;
color:#YOUR-FONT-COLOR-FOR-THIS-BACKGROUND-COLOR;
}
.blog-listing-wrapper .post-listing .post-item.THE-SPECIFIC-TAG a{
color:#YOUR-FONTLINK-COLOR-FOR-THIS-BACKGROUND-COLOR;}

To prevent strange behaviors/display errors I recommend you to use a specific tag(like colors) to the blog posts and style them. With this method you can add different colors very quickly to your listing

 

Example: orange

.blog-listing-wrapper .post-listing .post-item.orange{
background-color:#YOUR-DESIRED-COLOR;
color:#YOUR-FONT-COLOR-FOR-THIS-BACKGROUND-COLOR;
}
.blog-listing-wrapper .post-listing .post-item.orange a{
color:#YOUR-FONTLINK-COLOR-FOR-THIS-BACKGROUND-COLOR;}

 

regards,

Anton

 

Did my post help answer your query? Help the Community by marking it as a solution
Anton Bujanowski Signature
ATA-Daniel
Participant | Partner
Participant | Partner

Different CSS for Blog Listings Based on Topic/Tag

SOLVE

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">&nbsp;</a>
                                {% endif %}
                                {% if blog_author.linkedin %}
                                    <a href="{{ blog_author.linkedin }}" target="_blank" class="hs-author-social-link hs-social-linkedin">&nbsp;</a>
                                {% endif %}
                                {% if blog_author.twitter %}
                                    <a href="{{ blog_author.twitter }}" target="_blank" class="hs-author-social-link hs-social-twitter">&nbsp;</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">&nbsp;</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.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...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

0 Upvotes
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Different CSS for Blog Listings Based on Topic/Tag

SOLVE

Hi @ATA-Daniel,

 

sorry - my bad. I thought it would be enough to just put 

<div class="post-item {{topic.name}}">

after your feedback I've checked it and I was wrong. 

 

The working code is this one:

<div class="post-item {% for topic in content.topic_list %}{{ topic.name }} {% if not loop.last %} {% endif %}{% endfor %}">

 

For your additional question(no problem by the way 🙂 😞

This is why I've recommended you to the give each post a specific tag which you style.

 

For example:

You have a blogpost with following tags:

- auto-diy

- wood-diy

- cooking-diy

...

 

This tags shouldn't be styled since - you're correct - how would the system know which style it has to apply. (normaly it'll be always the last class which overwrites the other ones)

If you give it a specific tag(class) which is styled, then it will work.

So if you want that the right preview in the listing is orange add a "orange" as tag. 

 

 

Btw: Your CSS code is correct 🙂

 

 

regards
Anton

 

Did my post help answer your query? Help the Community by marking it as a solution

 

Anton Bujanowski Signature
ATA-Daniel
Participant | Partner
Participant | Partner

Different CSS for Blog Listings Based on Topic/Tag

SOLVE

Hello @Anton,

Thanks so much for your help... the last note totally worked!!!

 

One question — is there something specific that I need to be aware of relative to the syntax of the tag as it relates to how it's used in the CSS? That is, i tried using different words as the tag and some worked while others didn't — and that didn't really make sense to me. For example, when i tried purple or orange as the tag and put them in the CSS as follows, everything worked:

.blog-listing-wrapper .post-listing .post-item.purple

.blog-listing-wrapper .post-listing .post-item.orange

But when i tried to use another term like Makers 1on1 or Makers1on1 or Makers-1on1, it didn't work. In those cases i tried all of the following in the CSS:

For Makers 1on1:
.blog-listing-wrapper .post-listing .post-item.Makers 1on1 (i knew this wouldn't work)
.blog-listing-wrapper .post-listing .post-item.Makers_1on1
.blog-listing-wrapper .post-listing .post-item.makers_1on1
.blog-listing-wrapper .post-listing .post-item.makers%201on1
.blog-listing-wrapper .post-listing .post-item.Makers-1on1
.blog-listing-wrapper .post-listing .post-item.makers-1on1

For Makers1on1:
.blog-listing-wrapper .post-listing .post-item.Makers1on1
.blog-listing-wrapper .post-listing .post-item.makers1on1

For Makers-1on1
.blog-listing-wrapper .post-listing .post-item.Makers-1on1
.blog-listing-wrapper .post-listing .post-item.makers-1on1

None of those seemed to work. So... is there something with how the tag is written in the CSS that I'm not doing correctly?

 

Once again, thank you so much for your help...

Have a great day.

Dani

0 Upvotes
Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Different CSS for Blog Listings Based on Topic/Tag

SOLVE

Hi @ATA-Daniel

good job on testing the different possibilites.

I've checked the source code of your blog and noticed that the tags have different spacings. Did you add spacings to the tag itself? If you did, it won't work because you would have to write

. Marketing-to-makers{}

and this doesn't get recognized by the

 

I've edited the "topic name" code to this and it worked in my hub.

<div class="post-item{% for topic in content.topic_list %} {{ topic.name|lower|replace(' ','-') }}{% if not loop.last %}{% endif %}{% endfor %}">

The things I've changed:

- convert all topic names in the post-item part to lowercase (it might be better)

- replace all spaces that are inside a tag with a dash

 

here's the differencehere's the difference

the first highlighted part is from your blog; the second from my hub. 

 

 

regards

Anton

 

Did my post help answer your query? Help the Community by marking it as a solution
Anton Bujanowski Signature
ATA-Daniel
Participant | Partner
Participant | Partner

Different CSS for Blog Listings Based on Topic/Tag

SOLVE

Thank you so much, @Anton... this worked!!!

0 Upvotes
ATA-Daniel
Participant | Partner
Participant | Partner

Different CSS for Blog Listings Based on Topic/Tag

SOLVE

Hello @Anton,

Thank you for your response. Unfortunately, something isn't working. Here's my Blog Listing code:

<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">&nbsp;</a>
                                {% endif %}
                                {% if blog_author.linkedin %}
                                    <a href="{{ blog_author.linkedin }}" target="_blank" class="hs-author-social-link hs-social-linkedin">&nbsp;</a>
                                {% endif %}
                                {% if blog_author.twitter %}
                                    <a href="{{ blog_author.twitter }}" target="_blank" class="hs-author-social-link hs-social-twitter">&nbsp;</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">&nbsp;</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 the auto-diy as the tag that I'm trying to style:

.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;
}

At this point, i only changed the background to see if it was working but it doesn't seem to be picking up the tag as a class. Here's what inspector shows for a post listing that is uniquely tagged with Auto DIY as the tag:

Blog-Topic-Custom-CSS-2.pngThis is what Inspector shows for the Augmented Reality for Automotive DIY post listing.This is what Inspector shows for the Augmented Reality for Automotive DIY post listing.

I know I probably **bleep** something up but I can't seem to figure out what I may have done incorrectly.

 

One additional question, if a post has multiple tags, how do i make sure the listing pics up the "right" css?

 

Please advise when you get a sec... and thank you so much for your help.

Cheers.

Dani

0 Upvotes