OpenCart 2.0: Display Text over the Front Page Slideshow Banner Images

Here is a quick and simple hack that allows you to display text messages and/or html anywhere on the Slideshow images. It is a hack, but it requires only pasting a snippet of simple code to view>theme>default>template>module>slideshow.tpl and adding several CSS selectors to view>theme>default>stylesheet>stylesheet.css. This hack will work with up to three images.

This hack readjusts the size of the text as the screen gets smaller, and hides the it on small devices so the slideshow displays properly on mobile devices and this keep the text from overlapping the images the screen size decreases. Using the CSS you can move the text and the banner image around the screen independently of one another.

To get the exact title of the banner.  Set up your slideshow as usual in open cart, and cut and paste the title from banner>edit banner.

 
LIVE DEMO

step 1) add to stylesheet.css:

/*slideshow CSS override*/
.item{
margin-right:0px;
}
/*position the banner image for large screen*/
@media (min-width: 768px)
  {.bannerimage{margin-right:200px;}
      }

@media (max-width: 767px){
  .bannerimage-recenter{
    margin-right:0px;
    }
  }

.bannertitle{
  position: absolute;
  text-align:center;
  width: 30%;
  height: 100%;
  top: 0;
  right: 115px;
  padding:10px;
  }

.bannertitle h1{
  font-weight:400;
  }

.bannertitle h2{
  font-weight:400;
  line-height:40px
  }

@media (max-width: 992px) {
  .bannertitle{
    right: 50px;padding:0px;
    }
  .bannertitle h1{
    font-size:20px;
    font-weight:400;
    }
  .bannertitle h2{
    font-size:16px;
    font-weight:400;
    line-height:25px;
   }
 }

step 2: In slideshow.tpl replace everything within <div class=”item”></div> tags , including the div tags with:

<div class="item">

  <!--banner title mod-->
   <div class="bannertitle hidden-xs">
  <?php
$bannertitle = $banner['title'];
if($bannertitle == "exact title of first image"){
	echo "<h1>Example Text:</h1><h2>More example text to appear over image</h2>";
    }elseif($bannertitle == "exact title of second image"){
    echo "<h1>Different Text</h1><h2>different text to appear over image</h2>";
    }else{
    echo "<h1>More Text</h1><h2>yet another bit of text to appear</h2>";
    }
?>
  </div>
    <div class="bannerimage">
       <div class="bannerimage-recenter">
  <!--stop banner title mod-->

    <?php if ($banner['link']) { ?>
    <a href="<?php echo $banner['link']; ?>"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" /></a>
    <?php } else { ?>
    <img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
    <?php } ?>
    <!-- start banner title mod-->
      </div>
    </div>
    <!--stop banner title mod-->
</div>

You can do the same hack to get unique taglines to replace the category name.
Open view/theme/default/template/product/category.tpl
Just below:

<div id="content" class="<?php echo $class; ?>"><?php echo $content_top; ?>

add the following:

<?php
		if($heading_title == "Acne"){
    		$heading_tagline='The Acne Treatment That Moisturizes the Skin';
    		}elseif($heading_title == "Anti-Aging"){
    		$heading_tagline='Exquisite Anti-Aging for Sensitive Skin';
    		}else{
    		$heading_tagline='Skin softening for Rosacea product/category.tpl';
    		}
		?>

Then just below that change:

 <h2><?php echo $heading_title; ?></h2>

to:

 <h2><?php echo $heading_tagline; ?></h2>