Tutorials

Table of contents
Close

Repurposing HubSpot blog templates

While HubSpot blogs are generally used to create listings of Inbound marketing content, HubSpot blog templates can be repurposed as the basis for other types of listings and can act as a substitute for custom listing features on other platforms (ie taxonomies on Wordpress or CCKs on Drupal). Some examples of other types of listings that you can create with a customized blog temlate include the following:

  • Product listings
  • Event listings
  • Portfolio listings
  • Documentation listings

Since you can create unlimited number of blogs and blog templates, the possibilities are limitless. This tutorial will walk you through repurposing the standard blog into a portfolio listing. The concepts of this tutorial can be applied to create your own variation listings.

This tutorial uses dummy portfolio of HubSpot content and optional CSS used to style the final example. Click here, to view the final example.

Create a new blog template layout

Navigate to Design Manager and create a new template layout. Choose to create a blog template and save your template. You can learn more about creating templates, in this article

New blog template

Remove sidebar

Depending on the type of listing that you are creating, you may or may not want a sidebar in your layout. In this example, we are building a portfoilio listing; therefore, we will remove the sidebar group, by selecting the gear icon and clicking Delete Group. You will most likely also want to remove the comments module. 

delete-group.png

Customize the individual post template

Now that you have a new blog template, we need to repurpose the individual post to be an individual portfolio item (or the type of item that you want to create a listing of). 

Edit the post layout of a single post. Below is the standard markup of a single post item.


<div class="blog-section">
    <div class="blog-post-wrapper cell-wrapper">
                <div class="blog-section">
            <div class="blog-post-wrapper cell-wrapper">
                <div class="section post-header">
                    <h1>{{ content.name }}</h1>
                    <div id="hubspot-author_data" class="hubspot-editable" data-hubspot-form-id="author_data" data-hubspot-name="Blog Author" >
                        <span class="hs-author-label">Posted by</span>
                        {% 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 }}
                            {% if content.blog_post_author.avatar %} <div class="hs-author-avatar"> <img src="{{ content.blog_post_author.avatar }}" alt="{{ content.blog_post_author.display_name }}"> </div> {% endif %}
                            {% if content.blog_post_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 content.blog_post_author.facebook %}
                                            <a href="{{ content.blog_post_author.facebook }}" target="_blank" class="hs-author-social-link hs-social-facebook">Facebook </a>
                                        {% endif %}
                                        {% if content.blog_post_author.linkedin %}
                                            <a href="{{ content.blog_post_author.linkedin }}" target="_blank" class="hs-author-social-link hs-social-linkedin">LinkedIn</a>
                                        {% endif %}
                                        {% if content.blog_post_author.twitter %}
                                            <a href="{{ content.blog_post_author.twitter }}" target="_blank" class="hs-author-social-link hs-social-twitter">Twitter </a>
                                        {% endif %}
                                        {% if content.blog_post_author.google_plus %}
                                            <a href="{{ content.blog_post_author.google_plus }}?rel=author" target="_blank" class="hs-author-social-link hs-social-google-plus">Google+</a>
                                        {% endif %}
                                    </div>
                                </div>
                            {% endif %}
                        {% endif %}
                    </div>
                </div>
                {% blog_social_sharing "blog_social_sharing" overrideable=False, label='Blog Social Sharing' %}
                <div class="section post-body">
                    {{ content.post_body }}
                </div>
                {% 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 %}
            </div>
        </div>


        <!-- Optional: Blog Author Bio Box -->
        {#<div class="about-author-sec row-fluid">
            <div class="span2">
                <img alt="{{ content.blog_post_author.display_name }}" src="{{ content.blog_post_author.avatar }}">
            </div>
            <div class="span10">
                <h3>Written by <a class="author-link" href="{{ group.absolute_url }}/author/{{ content.blog_post_author.slug }}">{{ content.blog_post_author.display_name }}</a></h3>
                <p>{{ content.blog_post_author.bio }}</p>
                {% if content.blog_post_author.has_social_profiles %}
                    <div class="hs-author-social-section">
                        <div class="hs-author-social-links">
                            {% if content.blog_post_author.facebook %}
                                <a href="{{ content.blog_post_author.facebook }}" target="_blank" class="hs-author-social-link hs-social-facebook">Facebook</a>
                            {% endif %}
                            {% if content.blog_post_author.linkedin %}
                                <a href="{{ content.blog_post_author.linkedin }}" target="_blank" class="hs-author-social-link hs-social-linkedin">LinkedIn</a>
                            {% endif %}
                            {% if content.blog_post_author.twitter %}
                                <a href="{{ content.blog_post_author.twitter }}" target="_blank" class="hs-author-social-link hs-social-twitter">Twitter</a>
                            {% endif %}
                            {% if content.blog_post_author.google_plus %}
                                <a href="{{ content.blog_post_author.google_plus }}?rel=author" target="_blank" class="hs-author-social-link hs-social-google-plus">Google+</a>
                            {% endif %}
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>#}

    </div>
</div> 

Remove unnecessary markup

Since this blog template will serve as a portfolio listing, there is certain information that can be removed. Depending on the type of listing, you will want to strip out more or less of the standard markup. In this example we will remove:

  • Author information
  • Publish date
  • Social sharing

The code block below shows the individual post markup, with the code for this information removed.

When removing markup from the post listing, be careful to ensure that you do not leave any if statements open. Every "if" should have an "endif". You can always use the template's revision history to undo to roll back to a previous version of the template.

<div class="blog-section">
    <div class="blog-post-wrapper cell-wrapper">
                <div class="blog-section">
            <div class="blog-post-wrapper cell-wrapper">
                <div class="section post-header">
                    <h1>{{ content.name }}</h1>
                </div>
                <div class="section post-body">
                    {{ content.post_body }}
                </div>
                {% 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 %}
            </div>
        </div>
    </div>
</div>

Add additional custom HubL fields

Now that the individual post has been stripped down to the essentials, we will want to add some markup to allow content creators to add additional portfolio information to their posts. If you are used to working on Wordpress, this process is very similar to using a plugin to add custom fields to a template PHP file. In this example, we will add markup and HubL modules for:

  • Portfolio image (used as a background image)
  • Website URL
  • Completion date

While you could use HubSpot's standard featured image functionality, in this example, a custom portfolio image will be implemented for the sake of demonstration and to allow for a custom image to be added outside of the post body. Rather than rendering the <img>, the image's src attribute it used as the background of div with the CSS property background-size: cover to ensure the image always fits that area.

You can create additional HubL modules, to suit the needs of your listings. Below individual post item markup with the additional HubL fields and comments.  


{% image "portfolio_image" src='//cdn2.hubspot.net/hubfs/327485/Designers_Docs_2015/Designers-Home.png', label='Select a porfolio image', export_to_template_context=True %} <!-- Custom image module outside of post body, exported to template context -->
<div class="blog-section">
    <div class="post-portfolio-image" style="background:url('{{ widget_data.portfolio_image.src }}'); background-size:cover"></div> <!-- Using the dynamically defined image src for the background image of a div for each listing item -->
   		<div class="blog-post-wrapper cell-wrapper">
        	<div class="blog-section">   
                <div class="section post-header">
                    <h1>{{ content.name }}</h1>
                </div>
                <h3>About the project:</h3>
                <div class="section post-body">
                    {{ content.post_body }}
                </div>
                    <p class="project-website">Website: 
                    <a href="{% text "website_url" label='Enter URL of project website', value='http://designers.hubspot.com', no_wrapper=True %}" target="_blank"> <!-- Custom field that defines the link URL of the project -->
                        {% text "website_url" %} <!-- Prints the URL of the project -->
                    </a>    
                    </p>
                    <p class="completion-date">Completion date:
                        {% text "completion_date" label='Enter the date that project was completed', value='January 1, 2015' %} <!-- Custom field for completion date -->
                    </p>
                {% if content.topic_list %}
                     <p id="hubspot-topic_data" > Category:
                        {% 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 %}

        </div>
    </div>
</div>

Customize the listing layout

Now that you have customized the markup of the individual post, you want to modify the listing layout markup to support the information that you want to include in the listing view. In this example, the listing will show the title of the project, the category of project (topic), and the image of the project.


<div class="blog-section">
    <div class="blog-listing-wrapper cell-wrapper">
                <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 }}" alt="{{ blog_author.display_name }}"> </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">
                            {% if not simple_list_page %}
                                <div class="post-header">
                                    <h2><a href="{{content.absolute_url}}">{{ content.name }}</a></h2>
                                    <div id="hubspot-author_data" class="hubspot-editable" data-hubspot-form-id="author_data" data-hubspot-name="Blog Author">
                                        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>
                                    {% blog_social_sharing "blog_social_sharing" overrideable=False, label='Blog Social Sharing' %}
                                </div>
                                <div class="post-body clearfix">
                                    <!--post summary-->
                                    {% if content.post_list_summary_featured_image %}
                                        <div class="hs-featured-image-wrapper">
                                            <a href="{{content.absolute_url}}" title="" class="hs-featured-image-link">
                                                <img src="{{ content.post_list_summary_featured_image }}" class="hs-featured-image">
                                            </a>
                                        </div>
                                    {% endif %}
                                    {{ content.post_list_content|safe }}
                                </div>
                                {% if content_group.show_summary_in_listing %}
                                    <a class="more-link" href="{{ content.absolute_url }}">Read More</a>
                                {% endif %}
                                <div class="custom_listing_comments">
                                    {% set comments_number =  content.comment_list|length %}
                                    {% set comments_label = "Comment" if comments_number == 1 else "Comments" %}
                                    {{ comments_number }} {{ comments_label }} <a href="{{content.absolute_url}}#comments-listing">Click here to read/write comments</a>
                                </div>
                                {% 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>
                    {% 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>

    </div>
</div>

Remove unnecessary markup

Since the portfolio listing view doesn not require all of the information used on a standard blog, you will want to strip down the markup and remove unnecessary tags. In this example, the following markup is removed:
  • Author listing if statement
  • Author byline
  • Publish date
  • Social sharing
  • Featured image
  • Comments
  • Read more link
  • Blog body content
When removing markup from the post listing, be careful to ensure that you do not leave any if statements or for loops open. Every "if" should have an "endif" and every "for" should have a "endfor".

<div class="blog-section">
    <div class="blog-listing-wrapper cell-wrapper">
                <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 %}">
                    {% for content in contents %}
                        <div class="post-item">
                            {% if not simple_list_page %}
                                <div class="post-header">
                                    <h2><a href="{{content.absolute_url}}">{{ content.name }}</a></h2>
                                </div>
                                <div class="post-body clearfix">                                
                                    {{ content.post_list_content|safe }}
                                </div>
                                {% 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>
                    {% 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>

    </div>
</div>    

Add markup to render custom HubL module output

We now want to render certain custom fields that were added to the individual post layout. The values of the individual post fields get stored in a dict content.widgets. To print a parameter stored in that custom HubL field within the individual post, you must use the following syntax:

content.widgets.module_name.body.parameter

For example, in the portfolio example, we can retrieve the src parameter of the custom image module with the following statement:

content.widgets.portfolio_image.body.src

In the example, the image src is used for a background of an area within each listing item (you could also use HubSpot's standard featured image tags to achieve a similar effect).

 
<div class="blog-section">
    <div class="blog-listing-wrapper cell-wrapper">
        <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 %}">
                    {% for content in contents|sort(False, False, 'name') %} <!-- sort contents alphabetically by content.name -->
                    <div class="post-item {% for topic in content.topic_list %}{% if loop.first %}{{ topic.slug }}{% endif %}{% endfor %}"> <!-- print first topic as element class -->
                        {% if not simple_list_page %}
                        <a href="{{content.absolute_url}}">
                            <span class="portfolio-image" style="background:url('{{ content.widgets.portfolio_image.body.src }}'); background-size:cover"></span><!-- creates a background image section based on custom image src-->
                        </a>
                        <div class="post-header">
                            <h2><a href="{{content.absolute_url}}">{{ content.name }}</a></h2>
                        </div>
                        {% if content.topic_list %}
                        <p class="topic-list">
                            {% 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>
                    {% 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 projects</a> {% if next_page_num %}
                    <a class="next-posts-link" href="{{ blog_page_link(next_page_num) }}">Next</a> {% endif %}
                </div>
                {% endif %}
            </div>
        </div>

    </div>
</div>

Add topic filters to the template

Since a portfolio will only have a predetermined number of topics, we can hardcode links at the top of the listing layout that redirect to a topic specific listing. In our example, we will create a link for the following topics:

  • Website design
  • Print design
  • Video production
  • UX research

Our example adds the following code above the blog content module within a HubL Template module.


<ul class="topic-filters">
<li><a href="{{ group.absolute_url }}/topic/website-design"></a></li>
<li><a href="{{ group.absolute_url }}/topic/print-design"></a></li>
<li><a href="{{ group.absolute_url }}/topic/video-production"></a></li>
<li><a href="{{ group.absolute_url }}/topic/ux-research"></a></li>
</ul>

Add a custom class blog content module

Adding a custom class to the body of your template will make it easier to style this particular blog. By selecting the elements nested within this class, you will make it so any of your CSS only affects this blog, and not all blogs created in your HubSpot account. In this example, we apply a class of "portfolio" to the blog content module (Edit > Body CSS).

custom-class.png

Style the template

Now that you have the desired markup rendering and a custom class applied to differentiate this blog from other blogs, you are ready to style your template. How you end up styling your template is completely up to you (or your designer). But for the sake of demonstation, this tutorial includes some simple CSS that is applied to the example. The code is included and commented below.

You can learn more about attaching CSS files to templates here. To see a list of standard HubSpot CSS selectors, check our HubSpot Boilerplate CSS.

 
/* Color variables used for post item background color based on topic */

{% set topic_color = "#4F6B4A" %} 
{% set topic_color2 = "#6297C3" %}
{% set topic_color3  = "#EF5E29" %}
{% set topic_color4  = "#333535" %}

/* CSS3 transition macro */

{% macro trans(value) %} 
-webkit-transition: {{value}};
-moz-transition: {{value}};
-o-transition: {{value}};
-ms-transition: {{value}};
transition: {{value}};
{% endmacro %}


/* Apply border-box to all elements on portfolio blog */
.portfolio *,
.portfolio *:after,
.portfolio *:before {
    box-sizing: border-box;
}

/* Remove body margin and set font-weight */
body.portfolio {
    margin: 0;
    font-weight: 200;
}

/* Centers header and footer text (You would most likely remove this) */

.portfolio .header-container-wrapper,
.portfolio .footer-container-wrapper {
    text-align: center;
}

/* Blog Post Title */

.portfolio .post-header h2 {
    padding: 0 10px;
}
.portfolio .post-header h2 {
    font-size: 28px;
    word-wrap: break-word;
}
.portfolio .post-header h2 a {
    line-height: 1.2em;
}

/* Listing section */

.portfolio .post-listing {
    width: 100%;
    display: inline-block;
    border-bottom: 1px solid #eeeeee;
}

/* Use this to set up different styling for your blog posts in listing*/

.portfolio .blog-listing-wrapper .post-listing .post-item {
    box-sizing: border-box;
    width: 25%;
    float: left;
    font-weight: light;
    min-height: 400px;
    text-align: center;
    position: relative;
    border-top: 1px solid #eeeeee;
    border-left: 1px solid #eeeeee;
}
.portfolio .blog-listing-wrapper .post-listing .post-item:nth-child(4n) {
    border-right: 1px solid #eeeeee;
}
.portfolio .blog-listing-wrapper .post-listing .post-item a {
    color: #ffffff;
    text-dexoration: none;
    {{ trans('all .3s ease-in-out') }}
}
.portfolio .blog-listing-wrapper .post-listing .post-item a:hover {
    color: #FF8221;
    text-decoration: none;
}
.blog-listing-wrapper .post-listing .post-item .post-body {} .portfolio .blog-post-wrapper {
    max-width: 1080px;
    margin: 0 auto;
}
/* Post Featured Image on Listings Page */

.hs-featured-image-wrapper {} .hs-featured-image-wrapper .hs-featured-image-link {} .hs-featured-image-wrapper .hs-featured-image-link img.hs-featured-image {
    border-width: 0;
    max-height: 170px;
    max-width: 210px;
    height: auto;
    width: auto;
    display: inline-block !important;
    float: right;
    margin: 20px 0 20px 20px;
}
.portfolio h1 {
    text-align: center;
    margin-top: 10px;
}

/* Listing topic filters */

.topic-filters {
    list-style: none;
    max-width: 600px;
    display: block;
    margin: 0 auto;
}
.topic-filters li {
    display: inline-block;
    float: left;
    width: 25%;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    text-align: center;
    text-decoration: none;
    {{ trans('background .3s ease-in-out') }}
}
.topic-filters li:last-child {
    border-right: 1px solid #eee;
}
.topic-filters li:hover {
    background: #ff8221;
}
.topic-filters li:hover a {
    color: #ffffff;
}
.topic-filters li a {
    color: #555;
    text-decoration: none;
    padding: 20px 0;
    display: inline-block;
}

/* Topics within post items */

.topic-list {
    bottom: 0;
    position: absolute;
    text-align: center;
    display: block;
    width: 100%;
    margin: 0;
}
.topic-list a {
    border-radius: 8px 8px 0 0;
    padding: 10px;
    display: inline-block;
    color: #797979;
    {{ trans('all .3s ease-in-out') }}
}
.topic-list a:hover {
    min-height: 55px;
}

/* Listing image section */

.post-listing .portfolio-image {
    height: 200px;
    display: block;
    {{ trans('opacity .2s ease-in-out') }}
}
.post-listing .portfolio-image:hover {
    opacity: .5;
}

/* Portfolio image on post */
.post-portfolio-image {
    width: 100%;
    height: 400px;
    border-top: 10px solid #555;
    border-bottom: 10px solid #555;
}



/* Pagination */

.portfolio .blog-pagination {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}
.previous-posts-link {
    position: absolute;
    left: 0;
}
.next-posts-link {
    position: absolute;
    right: 0;
}

/* Sets background colors for topic classes */

.print-design {
    background: {{ topic_color }};
}
.ux-research {
    background: {{ topic_color2 }};
}
.website-design {
    background: {{ topic_color3 }};
}
.video-production {
    background: {{ topic_color4 }};
}

/* Sets topic links to be a darker variation of background colors */

.print-design .topic-list a {
    background: {{ color_variant(topic_color, -80) }};
}
.ux-research .topic-list a {
    background: {{ color_variant(topic_color2, -80) }};
}
.website-design .topic-list a {
    background: {{ color_variant(topic_color3, -80) }};
}
.video-production .topic-list a {
    background: {{ color_variant(topic_color4, -80) }};
}


/* CSS for viewports below 768px */

@media (max-width: 767px) {
    .topic-filters li {
        width: 100%;
    }
    .portfolio .post-header h2 {
        margin-bottom: 50px;
    }
    .portfolio .blog-listing-wrapper .post-listing .post-item {
        min-height: 0;
        border-right: 1px solid #eeeeee;
    }
    .portfolio .blog-listing-wrapper .post-listing .post-item {
        width: 100%;
    }
}

Conclusion

You can see the final example here. While this tutorial is meant to be a starting point to give you some ideas of what can be accomplished with HubSpot's blog, you can take these concepts much further, and create much more complex listings.