rudolfl Posted February 18, 2017 Share Posted February 18, 2017 Hi all, I am writing a new add-on module for index page. The idea is to make tiles for some categories to allow a quick selection. It is working, but I have some CSS problems. Here is site I am working on: https://www.hatsfromoz.com.au/new-hats/index.php I want tiles to be same size and I want them to change size as viewport changes. Is there a class in BS that can help me? Thanks, Rudolf Link to comment Share on other sites More sharing options...
greasemonkey Posted February 18, 2017 Share Posted February 18, 2017 I've created a similar content mod - post you template file and we can compare. Link to comment Share on other sites More sharing options...
rudolfl Posted February 21, 2017 Author Share Posted February 21, 2017 Eventually, functionality will be controlled via admin interface. For now, it is hard-coded here. <?php $cats_tiles = array( array('117','hats_images/fashion/special/SP390_red_thumb.jpg','Shop Spring Fashion Hats'), array('116','hats_images/fashion/Summer2014/S105_silver_thumb.jpg','Shop Spring Racing Fascinators') ); ?> <div class="col-sm-<?php echo $content_width; ?> new-products"> <h3><?php echo MODULE_CONTENT_RL_CATEGORIES_HEADING; ?></h3> <div class="row list-group"> <?php foreach ($cats_tiles as $tile) { $out = '<div class="col-cm-' . $product_width . ' link-in-div">'; $out .= '<a href="' . tep_href_link(FILENAME_DEFAULT, 'cPath=' . $tile[0]) .'">'; $out .= '<div class="thumbnail equal-height rl_categories" style="background-image: url(images/' . $tile[1] . ');" />'; $out .= '<p class="text-center rl-categories-button">' . $tile[2] . '</p>'; $out .= '</div></a></div>'; echo $out; } ?> </div> css: .rl_categories { min-height:150px; min-width:187px; max-width:250px; margin:20px; background-size:cover; background-repeat:no-repeat; background-position:center; display : flex; align-items : center; } .link-in-div a:hover{ text-decoration:none; } .rl-categories-button { color:#fff; text-align:center; font-size:20px; border-radius:.25em; /*padding:1.3125rem 0;*/ width:100%; background:rgba(0,0,0,.4); transition:background .3s,ease-in-out; position:relative; bottom:-50px; } .rl-categories-button:hover { background:rgba(0,0,0,1); } </div> Thanks, Rudolf Link to comment Share on other sites More sharing options...
rudolfl Posted February 21, 2017 Author Share Posted February 21, 2017 Just found a small error. Line $out .= '<div class="thumbnail equal-height rl_categories" style="background-image: url(images/' . $tile[1] . ');" />'; Should not have self-closing tag. Should be $out .= '<div class="thumbnail equal-height rl_categories" style="background-image: url(images/' . $tile[1] . ');" >'; Sorry, could no longer edit original post. Rudolf Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.