site not reflecting edits made to child theme blog module

DeZinerly · October 30, 2023, 11:53pm

Hey, fellow marketeers. One of the modules (Blog) copied to my child theme of TrendBiz by MagicalMtas refuses to show updates on the site. I deleted the clone, recloned afresh, then made some minor copy edits and still found no updates making it through. I believe this is no caching issue, as edits to all other cloned modules (local and global) work fine. Are there any community-known gotchas that can cause a child theme module to be ignored? There is no module.js in this module, but the html+hubl and css files are as follows:

module.html

{% require_css %}<style>
 {% scope_css%} .section-title {
 {% if module.style.section_title_alignment.text_alignment =='left' %}text-align: left;{% endif %}
 {% if module.style.section_title_alignment.text_alignment =='center'%}text-align: center;{% endif %}
 {% if module.style.section_title_alignment.text_alignment =='right'%}text-align: right;{% endif %} }
 .blog{
 background: rgba({{ module.style.blog_background_color.color|convert_rgb }}, {{ module.style.blog_background_color.opacity/100 }});
 border-radius: {{ module.style.blog_radius_number }}px;
 }
 .blog .blog-thumb .blog-date {
 background: rgba({{ module.style.blog_date_background_color.color|convert_rgb }}, {{ module.style.blog_date_background_color.opacity/100 }});
 color: rgba({{ module.style.blog_date_text_color.color|convert_rgb }}, {{ module.style.blog_date_text_color.opacity/100 }});
 border-radius: {{ module.style.blog_date_radius }}px;
 }
 .blog .btn {
 color: rgba({{ module.style.button_color_field.button_text_color.color|convert_rgb }}, {{ module.style.button_color_field.button_text_color.opacity/100 }});
 border: 1px solid rgba({{ module.style.button_color_field.button_border_color.color|convert_rgb }}, {{ module.style.button_color_field.button_border_color.opacity/100 }});
 background-color: rgba({{ module.style.button_color_field.button_background_color.color|convert_rgb }}, {{ module.style.button_color_field.button_background_color.opacity/100 }});
 }
 .blog .btn:hover {
 color: rgba({{ module.style.button_color_field.button_text_hover_color.color|convert_rgb }}, {{ module.style.button_color_field.button_text_hover_color.opacity/100 }});
 border: 1px solid rgba({{ module.style.button_color_field.button_border_hover_color.color|convert_rgb }}, {{ module.style.button_color_field.button_border_hover_color.opacity/100 }});
 background-color: rgba({{ module.style.button_color_field.button_background_hover_color.color|convert_rgb }}, {{ module.style.button_color_field.button_background_hover_color.opacity/100 }});
 }

 .blog .btn.btn-outline {
 color: rgba({{ module.style.button_outline_color_field.button_outline_text_color.color|convert_rgb }}, {{ module.style.button_outline_color_field.button_outline_text_color.opacity/100 }});
 border: 1px solid rgba({{ module.style.button_outline_color_field.button_outline_border_color.color|convert_rgb }}, {{ module.style.button_outline_color_field.button_outline_border_color.opacity/100 }});
 background-color: rgba({{ module.style.button_outline_color_field.button_outline_background_color.color|convert_rgb }}, {{ module.style.button_outline_color_field.button_outline_background_color.opacity/100 }});
 }

 .blog .btn.btn-outline:hover {
 color: rgba({{ module.style.button_outline_color_field.button_outline_text_hover_color.color|convert_rgb }}, {{ module.style.button_outline_color_field.button_outline_text_hover_color.opacity/100 }});
 border: 1px solid rgba({{ module.style.button_outline_color_field.button_outline_border_hover_color.color|convert_rgb }}, {{ module.style.button_outline_color_field.button_outline_border_hover_color.opacity/100 }});
 background-color: rgba({{ module.style.button_outline_color_field.button_outline_background_hover_color.color|convert_rgb }}, {{ module.style.button_outline_color_field.button_outline_background_hover_color.opacity/100 }});
 }
 .blog .btn svg{
 width: 16px;
 height: 16px;
 color: rgba({{ module.style.button_icon_color_field.button_icon_color.color|convert_rgb }}, {{ module.style.button_icon_color_field.button_icon_color.opacity/100 }});
 }
 .blog .btn:hover svg{
 color: rgba({{ module.style.button_icon_color_field.button_icon_hover_color.color|convert_rgb }}, {{ module.style.button_icon_color_field.button_icon_hover_color.opacity/100 }});
 }
 .blog .btn svg path{
 fill: currentColor;
 stroke: currentColor;
 }

 {% end_scope_css%}</style>
{% end_require_css %}

{% if module.blog_layout == 'with-title' %}<!-- Blog Section Start -->
<div class="blog-area section-padding">
 <div class="container">
 <div class="section-title">
 {{ module.section_subtitle }}
 {{ module.section_title }} </div>

 <div class="row mb-n30">
 {% set posts = blog_recent_posts('default', module.number_blog_to_show ) %}
 {% set posts = blog_recent_posts(module.blog, 3) %}
 {% for post in posts %} 
 <!-- Blog Start -->
 <div class="col-lg-4 col-md-6 mb-30">
 <div class="blog">
 <div class="blog-thumb">
 <a href="{{post.absolute_url}}" class="image">
 <img src="{{ post.post_list_summary_featured_image }}" alt="blog">
 </a>
 <div class="blog-date">
 <span>{% for tag in content.tag_list[0] %}{{ tag.name }}{% endfor %}</span>
 </div>
 </div>
 <div class="blog-info">
 <ul class="meta">
 <li>by {{ post.blog_post_author.display_name }}</li>
 <li>{{post.comment_count}} Comments</li>
 </ul>
 <h3><a href="{{post.absolute_url}}">{{ post.name }}</a></h3>
 <p>{{ post.post_list_content|striptags|truncate(90) }}</p>
 <a href="{{post.absolute_url}}" class="btn {{ module.button_type }} {{ module.button_size }}">
 {{ module.button_text }}
 {% if module.button_icon_enable_disable %}
 {% icon
 name="{{ module.button_icon.name }}"
 style="{{ module.button_icon.type }}"
 unicode="{{ module.button_icon.unicode }}"
 icon_set="{{ module.button_icon.icon_set }}"
 %}
 {% endif %} </a>
 </div>
 </div>
 </div>
 <!-- Blog End -->
 {% endfor %} </div>
 </div>

</div>
<!-- Blog Section End -->
{% else %}<!-- Blog Section Start -->
<div class="blog-area section-padding-top">
 <div class="container">

 <div class="row">
 {% for content in contents %} <!-- Blog Start -->
 <div class="col-lg-4 col-md-6 mb-30">
 <div class="blog">
 <div class="blog-thumb">
 <a href="{{content.absolute_url}}" class="image">
 <img src="{{ content.post_list_summary_featured_image }}" alt="blog">
 </a>
 <div class="blog-date">
 <span>{{content.publish_date|datetimeformat('%b %e %Y') }}</span>
 </div>
 </div>
 <div class="blog-info">
 <ul class="meta">
 <li>by {{ content.blog_post_author.display_name }}</li>
 <li>{{content.comment_count}} Comments</li>
 </ul>
 <h3><a href="{{content.absolute_url}}">{{ content.name }}</a></h3>
 <p>{{ content.post_list_content|striptags|truncate(70) }}</p>
 <a href="{{content.absolute_url}}" class="btn {{ module.button_type }} {{ module.button_size }}">
 {{ module.button_text }}
 {% if module.button_icon_enable_disable %}
 {% icon
 name="{{ module.button_icon.name }}"
 style="{{ module.button_icon.type }}"
 unicode="{{ module.button_icon.unicode }}"
 icon_set="{{ module.button_icon.icon_set }}"
 %}
 {% endif %} </a>
 </div>
 </div>
 </div>
 <!-- Blog End -->
 {% endfor %} </div>
 </div>

</div>
<!-- Blog Section End -->
{% endif %}

module.css

/* Blog CSS */
.blog {
 overflow: hidden;
 height: 100%;
 -webkit-transition: var(--transition);
 -o-transition: var(--transition);
 transition: var(--transition);
 -webkit-box-shadow: 0 0 40px 0 rgba(51, 51, 51, 0.1);
 box-shadow: 0 0 40px 0 rgba(51, 51, 51, 0.1);
}
.blog .blog-thumb {
 position: relative;
 overflow: hidden;
}
.blog .blog-thumb .image {
 display: block;
}
.blog .blog-thumb .image img {
 width: 100%;
 -webkit-transition: var(--transition);
 -o-transition: var(--transition);
 transition: var(--transition);
}
.blog .blog-thumb .blog-date {
 position: absolute;
 top: 30px;
 left: 30px;
 padding: 8px 20px;
 line-height: 1;
}
.blog .blog-info {
 position: relative;
 padding: 25px 30px 30px;
 display: flex;
 flex-direction: column;
 height: 60%;
}
.blog .blog-info .meta {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -ms-flex-wrap: wrap;
 flex-wrap: wrap;
 margin-bottom: 15px;
 padding-left: 0;
 list-style: none;
 color: var(--headings-color);
 color: red;
}
.blog .blog-info .meta li {
 position: relative;
}
.blog .blog-info .meta li:first-child::before {
 display: none;
}
.blog .blog-info .meta li::before {
 content: "-";
 margin: 0 7px;
}
.blog .blog-info .meta li:last-child {
 margin-right: 0;
}
.blog .btn {
 margin-top: auto;
 width: fit-content;
}
.blog:hover {
 -webkit-box-shadow: 0 14px 59px rgba(0, 0, 0, 0.1);
 box-shadow: 0 14px 59px rgba(0, 0, 0, 0.1);
}
.blog:hover .blog-thumb .image img {
 -webkit-transform: scale(1.1);
 -ms-transform: scale(1.1);
 transform: scale(1.1);
}

@media only screen and (max-width: 767px) {
 .blog .blog-info {
 padding: 25px 17px 30px;
 min-height: 50%;
 }
}

Jaycee_Lewis · October 31, 2023, 9:55pm

Hi, @DeZinerly Thanks for your question. Let’s invite some community members and see if they can help with your question “Are there any community-known gotchas that can cause a child theme module to be ignored?”

Hey, @Jnix284 @WMM_Inbound @Indra do you have any troubleshooting tips you can share with @DeZinerly?

Best,

Jaycee

jnix284 · November 1, 2023, 1:49pm

@DeZinerly while I’m not familiar with this specific theme, one thing you can check is the base.html file in the child theme to see if there is anything specific to the blog modules which could be causing it to overlook the child theme version and continue to direct back to the parent/marketplace version.

Topic		Replies	Views
Child Theme Module Change Restriction CMS Development professional	3	1821	January 23, 2024
Update Module in Child Theme CMS Development	1	1690	September 22, 2023
Use child theme modules after data entry CMS Development enterprise	3	1225	December 18, 2023
Child theme css changes not reflecting. CMS Development css	12	6477	May 21, 2025
Theme Modules not visible in Webpage editor CMS Development design-manager	4	4040	January 8, 2025

site not reflecting edits made to child theme blog module

module.html

module.css

Related topics