How to narrow space between cat. icons?
Posted: Wed Jun 27, 2012 11:31 pm
Hi there, here the "problem":
thank you in advance for your cooperation.
thank you in advance for your cooperation.
OpenCart Community
OpenCart Community Forum - Discuss shopping cart and e-commerce solutions.
https://forum.opencart.com/
How to narrow space between cat. icons?
Page 1 of 1
Re: How to narrow space between cat. icons?
Posted: Wed Jun 27, 2012 11:56 pm
You will need to edit it in your css. If you've got a live site, please post a link
Re: How to narrow space between cat. icons?
Posted: Thu Jun 28, 2012 5:43 pm
Hi there and thank you for the reply. You can see it @ http://www.autoricambiusa.it/shop/index ... th=152_154
As you can see, the last icon is out of the line. Now, I found the css line related to this (stylesheet.css):
.box-product {
width: 100%;
overflow: auto;
}
.box-product > div {
width: 125px;
display: inline-block;
vertical-align: top;
margin-right: 20px;
margin-bottom: 20px;
...but if I narrow the value on the line: margin-right: 20px , in home page the articles looks messy because too much close each other (the text description). So the solution should be to create e new DIV relative the the cat image icons box only (I guess...). If it is right, someone help to do that? Tnxs
As you can see, the last icon is out of the line. Now, I found the css line related to this (stylesheet.css):
.box-product {
width: 100%;
overflow: auto;
}
.box-product > div {
width: 125px;
display: inline-block;
vertical-align: top;
margin-right: 20px;
margin-bottom: 20px;
...but if I narrow the value on the line: margin-right: 20px , in home page the articles looks messy because too much close each other (the text description). So the solution should be to create e new DIV relative the the cat image icons box only (I guess...). If it is right, someone help to do that? Tnxs
Re: How to narrow space between cat. icons?
Posted: Thu Jun 28, 2012 5:59 pm
Just change the
to
Code: Select all
width: 125px;Code: Select all
width: 85px;Re: How to narrow space between cat. icons?
Posted: Thu Jun 28, 2012 6:20 pm
OK, as you can see now, the 6 icons are in line in category, so it's ok:
BUT look at home page, the text box of the products, mess up the layout:
BUT look at home page, the text box of the products, mess up the layout:
Re: How to narrow space between cat. icons?
Posted: Thu Jun 28, 2012 6:35 pm
Hmm I see. OK you're going to need to give that box on your categories an ID for the containing div you have above. Is the refine search a module? I don't see it on my 1.5.1.3.1 template for the category.tpl
Re: How to narrow space between cat. icons?
Posted: Thu Jun 28, 2012 6:50 pm
Hi, yes, Is the refine search a module. Sorry, Also I forgot to say that I've installed a vqmod image cat. option on V. 1.5.1.3:
Code: Select all
<file name="catalog/controller/product/category.php">
<operation>
<search position="replace" index="1" offset="6"><![CDATA[
$product_total = $this->model_catalog_product->getTotalProducts($data);
]]></search>
<add><![CDATA[
$product_total = $this->model_catalog_product->getTotalProducts($data);
$image = $this->model_tool_image->resize($result['image'], 60, 60);
$this->data['categories'][] = array(
'name' => $result['name'] . ' (' . $product_total . ')',
'href' => $this->url->link('product/category', 'path=' . $this->request->get['path'] . '_' . $result['category_id'] . $url),
'thumb' => $image
);
}
]]></add>
</operation>
</file>
<file name="catalog/view/theme/default/template/product/category.tpl">
<operation>
<search position="replace" index="1" offset="22"><![CDATA[
<?php if ($categories) { ?>
]]></search>
<add><![CDATA[
<?php if ($categories) { ?>
<div class="box">
<div class="box-heading"><?php echo $text_refine; ?></div>
<div class="box-content">
<div class="box-product">
<?php foreach ($categories as $category) { ?>
<div>
<?php if ($category['thumb']) { ?>
<div class="image" style="text-align: center">
<a href="<?php echo $category['href']; ?>"><img src="<?php echo $category['thumb']; ?>" alt="<?php echo $category['name']; ?>" /></a>
</div>
<?php } ?>
<div style="text-align: center"><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></div></div>
<?php } ?>
</div>
</div>
</div>
<?php } ?>
]]></add>
</operation>
</file>
</modification>Re: How to narrow space between cat. icons?
Posted: Thu Jun 28, 2012 6:59 pm
Code: Select all
<?php if ($categories) { ?>
<div class="box">Code: Select all
<?php if ($categories) { ?>
<div class="box" id="cat-head">Code: Select all
#cat-head .box-product > div {
width: 85px
}Re: How to narrow space between cat. icons?
Posted: Thu Jun 28, 2012 7:14 pm
Works perfect! 
Ciao e Tante Grazie.
Ciao e Tante Grazie.
Re: How to narrow space between cat. icons?
Posted: Thu Jun 28, 2012 7:19 pm
No problem 