Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

New content module -- alignment problem


Recommended Posts

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

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

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...