I solved this problem. If someone helps do this:
In style.css change Post template 4 code with:
/* ----------------------------------------------------------------------------
Template 4
*/
.td-post-template-4 header {
position: absolute;
bottom: 0px;
}
.td-post-template-4 header .entry-title,
.td-post-template-4 header .td-post-sub-title,
.td-post-template-4 header .meta-info,
.td-post-template-4 header .entry-date,
.td-post-template-4 header .td-post-author-name a,
.td-post-template-4 header .td-post-comments a {
color: #ffffff;
}
.td-post-template-4 header h1 {
font-size: 24px;
line-height: 29px;
margin-top: 7px;
margin-bottom: 5px;
position: relative;
right: 2px;
/* responsive portrait tablet */
/* responsive portrait phone */
}
@media (min-width: 768px) and (max-width: 1023px) {
.td-post-template-4 header h1 {
font-size: 24px;
line-height: 29;
}
}
@media (max-width: 767px) {
.td-post-template-4 header h1 {
font-size: 24px;
line-height: 29px;
right: 0px;
}
}
.td-post-template-4 .meta-info {
margin-bottom: 16px;
/* responsive portrait phone */
}
@media (max-width: 767px) {
.td-post-template-4 .meta-info {
margin-bottom: 10px;
}
}
.td-post-template-4 .entry-thumb {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3) inset;
transition: box-shadow 0.2s ease-in-out 0s;
padding-bottom: 0px;
margin-bottom: 0px;
}
.td-post-template-4 .entry-crumbs {
top: 0px;
padding: 15px 0px 15px 0px;
}
.td-post-template-4 .td-post-header {
width:680px;
padding-top: 0px;
border-bottom: 0px;
}
.td-post-template-4 .td-post-sharing-top {
border-top: 0px;
border-bottom: 1px solid #e6e6e6;
}
.td-post-template-4 .td-post-featured-image {
min-height: 200px;
background-color: #444444;
/* responsive portrait phone */
}
@media (max-width: 767px) {
.td-post-template-4 .td-post-featured-image {
min-height: 182px;
}
}
.td-post-template-4 .td-post-featured-image .wp-caption-text {
bottom: 0;
color: #FFFFFF;
position: absolute;
right: 0;
margin-right: 20px;
max-width: 400px;
height: 17px;
overflow: hidden;
/* responsive portrait phone */
}
@media (max-width: 767px) {
.td-post-template-4 .td-post-featured-image .wp-caption-text {
display: none;
}
}
.td-post-template-4 .td-post-content {
border-top: none;
margin-top: 0px;
padding-top: 14px;
/* responsive portrait phone */
}
@media (max-width: 767px) {
.td-post-template-4 .td-post-content {
padding-top: 10px;
}
}
.td-post-template-4 .td-post-sub-title {
font-size: 16px;
line-height: 26px;
border: 0px;
padding: 0px;
}
In single_template_4.php delete all and paste this:
<?php
// Template 4 - post-final-4.psd - full image + overlay full title
//get the global sidebar position from single.php
global $loop_sidebar_position;
$td_mod_single = new td_module_single($post);
?>
<article id="post-<?php echo $td_mod_single->post->ID;?>" class="<?php echo join(' ', get_post_class('td-post-template-4'));?>" <?php echo $td_mod_single->get_item_scope();?>>
<div class="td-container">
<div class="td-container-border">
<div class="td-pb-row">
<?php
//the default template
switch ($loop_sidebar_position) {
default:
?>
<div class="td-pb-span8 td-main-content" role="main" itemprop="mainContentOfPage" itemscope="itemscope" itemtype="<?php echo td_global::$http_or_https?>://schema.org/Blog">
<div class="td-ss-main-content">
<div class="td-post-header td-container">
<div class="td-entry-crumbs td-pb-padding-side"><?php echo td_page_generator::get_single_breadcrumbs($td_mod_single->title); ?></div>
<div class="td-post-featured-image td-image-gradient">
<?php echo $td_mod_single->get_image('td_1021x580'); ?>
<header class="td-pb-padding-side">
<?php echo $td_mod_single->get_category(); ?>
<?php echo $td_mod_single->get_title();?>
<?php if (!empty($td_mod_single->td_post_theme_settings['td_subtitle'])) { ?>
<p class="td-post-sub-title"><?php echo $td_mod_single->td_post_theme_settings['td_subtitle'];?></p>
<?php } ?>
<div class="meta-info">
<?php echo $td_mod_single->get_author();?>
<?php echo $td_mod_single->get_date(false);?>
<?php echo $td_mod_single->get_views();?>
<?php echo $td_mod_single->get_comments();?>
</div>
</header>
</div>
</div>
<?php
locate_template('loop-single-4.php', true);
comments_template('', true);
?>
</div>
</div>
<div class="td-pb-span4 td-main-sidebar" role="complementary" itemscope="itemscope" itemtype="<?php echo td_global::$http_or_https?>://schema.org/WPSideBar">
<div class="td-ss-main-sidebar">
<?php get_sidebar(); ?>
</div>
</div>
<?php
break;
case 'sidebar_left':
?>
<div class="td-pb-span4 td-main-sidebar" role="complementary" itemscope="itemscope" itemtype="<?php echo td_global::$http_or_https?>://schema.org/WPSideBar">
<div class="td-ss-main-sidebar">
<?php get_sidebar(); ?>
</div>
</div>
<div class="td-pb-span8 td-main-content" role="main" itemprop="mainContentOfPage" itemscope="itemscope" itemtype="<?php echo td_global::$http_or_https?>://schema.org/Blog">
<div class="td-ss-main-content">
<?php
locate_template('loop-single-4.php', true);
comments_template('', true);
?>
</div>
</div>
<?php
break;
case 'no_sidebar':
//td_global::$load_featured_img_from_template = 'art-slide-big';
td_global::$load_featured_img_from_template = 'full';
?>
<div class="td-pb-span12 td-main-content" role="main" itemprop="mainContentOfPage" itemscope="itemscope" itemtype="<?php echo td_global::$http_or_https?>://schema.org/Blog">
<div class="td-ss-main-content">
<?php
locate_template('loop-single-4.php', true);
comments_template('', true);
?>
</div>
</div>
<?php
break;
}
?>
</div> <!-- /.td-pb-row -->
</div>
</div> <!-- /.td-container -->
</article> <!-- /.post -->
Now, go to the Theme panel in Post Settings activate Post style 4.
Good luck 🙂
