Hi,
Unfortunately the theme doesn’t have a style like that and you will need custom modifications for it. I will ad this on our feature request list and we will consider it. You will have to get someone to do it for you if you need it and don’t know how to do it.
Thanks for the message!
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 🙂
