Remove an element on the Blog Page (ONLY from the subsequent category pages) Homepage is OK as is.

Developer Support CMS Development
1

I’m an entry level developer and need assistance with this.
I want to keep the “Subscribe” element on the Blog homepage. My request is to get that element removed from the proceeding category pages (see attahced). I’m hoping there is an easy way to hide it when it on those pages only.

35691i2356762F063E5EAD.jpg
35691i2356762F063E5EAD.jpg999×546 144 KB

1. Blog Homepage - Leave this page “as is”.
35689i19AF0BA57CF3693D.jpg
35689i19AF0BA57CF3693D.jpg999×578 142 KB

2. Remove “Stay up to date SUBSCRIBE TO OUR BLOG” element from all category pages. (It should ONLY be on the Blog Homepage.

2

Hey @gramirez

Glad to see you working with HubSpot for your project! :wink:

If you could do us a favor and post the code that holds that button. You are going to want to wrap it in an if statement, but we will be able to pin point where if you show us the code block.

@Kevin-C and @tette_engage will definitely be able to help you out

3

Here is the Listing Template code (Button Code is BOLD:disappointed_face:

<div class=“filterAllLink” style=“display:none;”><li><a href=“{{ group.absolute_url }}”>All</a></li></div>
<div class=“blog-section”>
<div class=“postListing clearfix”>
{% if topic %}
<div class=“itemWrap” id=“topicBox”>
<div class=“postItem” style=“height:300px;”>
<div class=“listingContent”>
<h5 style=“margin-top:0”>Viewing posts in:</h5>
<h2 style=“margin-top:0”>{{ topic|replace(‘-’,’ ')|title }}</h2>
<div class=“listingAuthor”>
</div>
</div>
</div>
</div>
{% elif blog_author %}
<div class=“itemWrap” id=“authorBox”>
<div class=“postItem” style=“height:300px;”>
<div class=“listingContent”>
<h2>{{ blog_author.display_name }}</h2>
<div class=“listingAuthor”>
</div>
</div>
</div>
</div>
{% endif %}

{% for content in contents %}
{% if loop.first %}
<div class=“itemWrap” style=“position:relative; margin-bottom: 150px;”>
{% else %}
<div class=“itemWrap” style=“position:relative”>
{% endif %}

<div class=“postItem”>
{% if content.post_list_summary_featured_image %}
<a class=“ListingImage bg” href=“{{ content.absolute_url }}”>
<img style=“width: 100%” src=“{{ content.post_list_summary_featured_image }}”>
</a>
{% endif %}
<div class=“listingContent font14”>
<h2 style=“margin-top:-20px;”><a href=“{{content.absolute_url}}”>{{ content.name }}</a></h2>
<div class=“listingAuthor clearfix”>
<span class=“leftAligned”>{{ content.publish_date_local_time|datetimeformat(‘%B %e, %Y’) }}</span>
<span class=“rightAligned”>
{%if content.blog_post_author %}
By <a class=“author-link” href=“{{ group.absolute_url }}/author/{{ content.blog_post_author.slug }}”><b>{{ content.blog_post_author.display_name }}</b></a>
{%if content.blog_post_author.avatar %}
<img src=“{{ content.blog_post_author.avatar }}” style = “float: right; width: 60px; border-radius: 50%; margin-top: -20px; margin-left:15px;”>
{% endif %}
{% endif %}
</span>
</div>
<div class=“listingSummary”>{{ content.post_summary }}</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>

{% set total_pages = contents.total_page_count %} <!-- sets variable for total pages -->
{% set more_pages = total_pages - current_page_num %} <!-- sets variable for how many more pages are past the current pages -->
{% if total_pages > 1 %}
<nav>
<ul class=“blogPagination pt40 text-center”>
<li class=“{% if current_page_num == 1 %}disabled{% endif %}”><a href=“{% if last_page_num==“1” %}{{ group.absolute_url }}{% else %}{{blog_page_link(last_page_num)}}{% endif %}”><i class=“fa fa-angle-double-left”></i></a></li>
{% if more_pages == 0 %}
{% if current_page_num - 4 == 1 %}<li><a href=“{{ group.absolute_url }}”>{{ current_page_num - 4 }}</a></li>{% endif %}
{% if current_page_num - 4 > 1 %}<li><a href=“{{ blog_page_link(current_page_num - 4) }}”>{{ current_page_num - 4 }}</a></li>{% endif %}
{% endif %}
{% if more_pages <= 1 %}
{% if current_page_num - 3 == 1 %}<li><a href=“{{ group.absolute_url }}”>{{ current_page_num - 3 }}</a></li>{% endif %}
{% if current_page_num - 3 > 1 %}<li><a href=“{{ blog_page_link(current_page_num - 3) }}”>{{ current_page_num - 3 }}</a></li>{% endif %}
{% endif %}
{% if current_page_num - 2 == 1 %}<li><a href=“{{ group.absolute_url }}”>{{ current_page_num - 2 }}</a></li>{% endif %}
{% if current_page_num - 2 > 1 %}<li><a href=“{{ blog_page_link(current_page_num - 2) }}”>{{ current_page_num - 2 }}</a></li>{% endif %}
{% if current_page_num - 1 == 1 %}<li><a href=“{{ group.absolute_url }}”>{{ current_page_num - 1 }}</a></li>{% endif %}
{% if current_page_num - 1 > 1 %}<li><a href=“{{ blog_page_link(current_page_num - 1) }}”>{{ current_page_num - 1 }}</a></li>{% endif %}
<li class=“active”><a href=“{% if current_page_num==1 %}{{ group.absolute_url }}{% else %}{{ blog_page_link(current_page_num) }}{% endif %}”>{{ current_page_num }}</a></li>
{% if current_page_num + 1 <= total_pages %}<li><a href=“{{ blog_page_link(current_page_num + 1) }}”>{{ current_page_num + 1 }}</a></li>{% endif %}
{% if current_page_num + 2 <= total_pages %}<li><a href=“{{ blog_page_link(current_page_num + 2) }}”>{{ current_page_num + 2 }}</a></li>{% endif %}
{% if current_page_num <= 2 %}
{% if current_page_num + 3 <= total_pages %}<li><a href=“{{ blog_page_link(current_page_num + 3) }}”>{{ current_page_num + 3 }}</a></li>{% endif %}
{% endif %}
{% if current_page_num == 1 %}
{% if current_page_num + 4 <= total_pages %}<li><a href=“{{ blog_page_link(current_page_num + 4) }}”>{{ current_page_num + 4 }}</a></li>{% endif %}
{% endif %}
<li class=“{% if current_page_num == total_pages %}disabled{% endif %}”><a href=“{{blog_page_link(next_page_num)}}”><i class=“fa fa-angle-double-right”></i></a></li>
</ul>
</nav>
{% endif %}
_______________________
Here is the Inline Styling applied to the Rich Text Module
z-index: 10; position: absolute; margin-top: 600px;
Here is the “Edit source code” from the Rich Text Module
<div style=“float: none; text-align: center;”>
<p style=“font-size: 18px; text-align: center; padding-bottom: 7px; font-weight: 500;”><span style=“color: #000000;”>Stay up to date</span></p>
<a href=“http://go.socialstudies.com/subscribe-page” target=“_blank” class=“sub_top” rel=“noopener” style=“color: #000000;”> Subscribe to our blog </a></div>

35616iC419B32C65D9BFC5.jpg
35616iC419B32C65D9BFC5.jpg998×640 146 KB

1. Listing Template Code
35719i04B85CE7B7E32102.png
35719i04B85CE7B7E32102.png999×526 151 KB

2. Rich Text Module and Inline Styles
35615i3BCD0BAB25594DC1.png
35615i3BCD0BAB25594DC1.png998×217 120 KB

3. Rich Text Module “Edit source code”

4

Listing Page Template (Button code is BOLD:disappointed_face:

<div class=“filterAllLink” style=“display:none;”><li><a href=“{{ group.absolute_url }}”>All</a></li></div>
<div class=“blog-section”>
<div class=“postListing clearfix”>
{% if topic %}
<div class=“itemWrap” id=“topicBox”>
<div class=“postItem” style=“height:300px;”>
<div class=“listingContent”>
<h5 style=“margin-top:0”>Viewing posts in:</h5>
<h2 style=“margin-top:0”>{{ topic|replace(‘-’,’ ')|title }}</h2>
<div class=“listingAuthor”>
</div>
</div>
</div>
</div>
{% elif blog_author %}
<div class=“itemWrap” id=“authorBox”>
<div class=“postItem” style=“height:300px;”>
<div class=“listingContent”>
<h2>{{ blog_author.display_name }}</h2>
<div class=“listingAuthor”>
</div>
</div>
</div>
</div>
{% endif %}

{% for content in contents %}
{% if loop.first %}
<div class=“itemWrap” style=“position:relative; margin-bottom: 150px;”>
{% else %}
<div class=“itemWrap” style=“position:relative”>
{% endif %}

<div class=“postItem”>
{% if content.post_list_summary_featured_image %}
<a class=“ListingImage bg” href=“{{ content.absolute_url }}”>
<img style=“width: 100%” src=“{{ content.post_list_summary_featured_image }}”>
</a>
{% endif %}
<div class=“listingContent font14”>
<h2 style=“margin-top:-20px;”><a href=“{{content.absolute_url}}”>{{ content.name }}</a></h2>
<div class=“listingAuthor clearfix”>
<span class=“leftAligned”>{{ content.publish_date_local_time|datetimeformat(‘%B %e, %Y’) }}</span>
<span class=“rightAligned”>
{%if content.blog_post_author %}
By <a class=“author-link” href=“{{ group.absolute_url }}/author/{{ content.blog_post_author.slug }}”><b>{{ content.blog_post_author.display_name }}</b></a>
{%if content.blog_post_author.avatar %}
<img src=“{{ content.blog_post_author.avatar }}” style = “float: right; width: 60px; border-radius: 50%; margin-top: -20px; margin-left:15px;”>
{% endif %}
{% endif %}
</span>
</div>
<div class=“listingSummary”>{{ content.post_summary }}</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>

{% set total_pages = contents.total_page_count %} <!-- sets variable for total pages -->
{% set more_pages = total_pages - current_page_num %} <!-- sets variable for how many more pages are past the current pages -->
{% if total_pages > 1 %}
<nav>
<ul class=“blogPagination pt40 text-center”>
<li class=“{% if current_page_num == 1 %}disabled{% endif %}”><a href=“{% if last_page_num==“1” %}{{ group.absolute_url }}{% else %}{{blog_page_link(last_page_num)}}{% endif %}”><i class=“fa fa-angle-double-left”></i></a></li>
{% if more_pages == 0 %}
{% if current_page_num - 4 == 1 %}<li><a href=“{{ group.absolute_url }}”>{{ current_page_num - 4 }}</a></li>{% endif %}
{% if current_page_num - 4 > 1 %}<li><a href=“{{ blog_page_link(current_page_num - 4) }}”>{{ current_page_num - 4 }}</a></li>{% endif %}
{% endif %}
{% if more_pages <= 1 %}
{% if current_page_num - 3 == 1 %}<li><a href=“{{ group.absolute_url }}”>{{ current_page_num - 3 }}</a></li>{% endif %}
{% if current_page_num - 3 > 1 %}<li><a href=“{{ blog_page_link(current_page_num - 3) }}”>{{ current_page_num - 3 }}</a></li>{% endif %}
{% endif %}
{% if current_page_num - 2 == 1 %}<li><a href=“{{ group.absolute_url }}”>{{ current_page_num - 2 }}</a></li>{% endif %}
{% if current_page_num - 2 > 1 %}<li><a href=“{{ blog_page_link(current_page_num - 2) }}”>{{ current_page_num - 2 }}</a></li>{% endif %}
{% if current_page_num - 1 == 1 %}<li><a href=“{{ group.absolute_url }}”>{{ current_page_num - 1 }}</a></li>{% endif %}
{% if current_page_num - 1 > 1 %}<li><a href=“{{ blog_page_link(current_page_num - 1) }}”>{{ current_page_num - 1 }}</a></li>{% endif %}
<li class=“active”><a href=“{% if current_page_num==1 %}{{ group.absolute_url }}{% else %}{{ blog_page_link(current_page_num) }}{% endif %}”>{{ current_page_num }}</a></li>
{% if current_page_num + 1 <= total_pages %}<li><a href=“{{ blog_page_link(current_page_num + 1) }}”>{{ current_page_num + 1 }}</a></li>{% endif %}
{% if current_page_num + 2 <= total_pages %}<li><a href=“{{ blog_page_link(current_page_num + 2) }}”>{{ current_page_num + 2 }}</a></li>{% endif %}
{% if current_page_num <= 2 %}
{% if current_page_num + 3 <= total_pages %}<li><a href=“{{ blog_page_link(current_page_num + 3) }}”>{{ current_page_num + 3 }}</a></li>{% endif %}
{% endif %}
{% if current_page_num == 1 %}
{% if current_page_num + 4 <= total_pages %}<li><a href=“{{ blog_page_link(current_page_num + 4) }}”>{{ current_page_num + 4 }}</a></li>{% endif %}
{% endif %}
<li class=“{% if current_page_num == total_pages %}disabled{% endif %}”><a href=“{{blog_page_link(next_page_num)}}”><i class=“fa fa-angle-double-right”></i></a></li>
</ul>
</nav>
{% endif %}

5

Rich Text Module Inline Styles
z-index: 10; position: absolute; margin-top: 600px;
Here are some screenshots as well.

35717i523858648A327584.png
35717i523858648A327584.png714×999 139 KB

Blog Page Template
35718iB1A9E1A57A244995.jpg
35718iB1A9E1A57A244995.jpg999×730 114 KB

Listing Page Template (Styles)
35616iC419B32C65D9BFC5.jpg
35616iC419B32C65D9BFC5.jpg998×640 146 KB

Listing Page Template (Content)
35719i04B85CE7B7E32102.png
35719i04B85CE7B7E32102.png999×526 151 KB

Rich Text Module that contains the Button
35615i3BCD0BAB25594DC1.png
35615i3BCD0BAB25594DC1.png998×217 120 KB

Rich Text Module Button Code
35617i1A58CFBAA3AF75A6.png
35617i1A58CFBAA3AF75A6.png998×711 174 KB

Button Link Styles

6

Hi @gramirez
How about you add a css-class to the rich text module and then comment it out with ‘display:none;’ in all pages except that homepage? :slightly_smiling_face:

7

@gramirez would either of these work:
give the rich text module a class, for example .sub-button
Then
1. add in your css file .listingContent .sub-button {

display:none; }
or
2. in your Listing Page Template (content) in {% for content in contents %} add <div class=“sub-button” style=“display:none;”>

8

Hey @gramirez , I would recommend targeting the tag pages. If you look to the right sidebar, there is an option to add “wrapping html”

If you add something like this:

{% if not tag %}
{{ html }}
{% endif %}

the module should not render on any tag listing pages :smiling_face_with_sunglasses:

9

This WORKED! Thank you sooooooo much Dennis! (Thank you all who took the time to provide possible solutions as well, I really appreceiate the time and effort! You all ROCK!) Have a Merry Christmas and a Happy New Year!:victory_hand: