Homepage featured products - Change play icon to post name

Basically, I need to change this:


To this:


I'm pretty new to HTML/CSS, so some specific instructions on how to achieve this would be amazing.
Thanks a lot, loving these themes

It requires some work, you have to edit gavern/widgets.news_gallery.php file and add additionaly data-attribute to a tag (around line 166)

Code: Select all

data-title="'.strip_tags($art_title).'"

Then you have to edit Simplicity/js/widgets/news_gallery.js file and change line

Code: Select all

img.html(img.html() + '<div class="gk-img-overlay"><span></span></div>');

to

Code: Select all

img.html(img.html() + '<div class="gk-img-overlay"><span>' + img.attr('data-title') + '</span></div>');

and of course you have to remove existing overlay image from CSS and add your own style to title.

Thanks, support here is awesome



I've gotten this far, how do I remove existing overlay image from CSS?
How do I style the title to be white text, centered horizontally and vertically in the box?

Also, I want to remove the border around the image, how do I do this?

You have to use CSS. The best place for your own css rules is css/override.css file. First enable this option in Dashboard -> Template Options -> Advanced Tab.

Add this code:

Code: Select all

.gk-news-gallery .gk-images-wrapper > a > .gk-img-overlay > span {
   background: #fec54c !important;
   color: #fff;
   text-align: center;
}

Rest of rules you should find yourself. To center text vertically i think you should use another span inside this:

Code: Select all

<span>' + img.attr('data-title') + '</span>

Try to use Firebus or chrome dev tools to check which selectors you should use.