X-Cart forums - Border around products.

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - Border around products. (https://forum.x-cart.com/showthread.php?t=46143)

mrerotic

03-09-2009 03:52 PM

Border around products.

How can I give a border color around each product (only on the outside) on multi product view. So basically I have 3 products per row being shown under each category. I want all three to wrapped in individual borders. How can this be done?

Thanks In advance.

WhiteDoveGifts

03-10-2009 01:41 AM

Re: Border around products.

I'd like to do that too...

ChristineP

03-10-2009 10:19 AM

Re: Border around products.

v4.2 Look in your main.css to find "Products list" styles

v4.1.10 Look in your skin1.css
You will find these styles
TD.PListImgBox
DIV.PListImgBox

mrerotic

03-10-2009 04:16 PM

Re: Border around products.

well i found products-list and I have tried all variables there by adding 'border: 1px #000 solid;' with no luck. Any other suggestions. I do appreciate it.

RichieRich

03-19-2009 12:21 PM

Re: Border around products.

in my opinion, even better would be to have a border in between to seperate, not on the outside

alec.thomas

04-06-2009 06:53 AM

Re: Border around products.

you would need to change this in main.css

Code:

 

.products-list .image {

float: left;

position: relative;

padding: 3px 20px 3px 10px;

margin-right: auto;

}

with this

Code:

 

.products-list .image {

  float: left;

  position: relative;

  padding: 3px 20px 3px 10px;

  margin-right: auto;

  border: thin solid #000000;

}

RichieRich

04-06-2009 07:40 AM

Re: Border around products.

Hi Alec, I meant the thumbnails in columns

alec.thomas

04-06-2009 08:46 AM

Re: Border around products.

Okay, I misunderstood where you want to do this. To add a border around category thumbnails, Add this line of code to your main.css

Code:

 

/*

Adds border around category images

*/

div.subcategories img {border: thin solid #000000;}

and to add a border around featured products, and sub-category thumbnails add this code to main.css

Code:

.products-list img{border: thin solid #000000;}

add a different stlye by putting your css in the curly brackets.

RichieRich

04-06-2009 09:36 AM

Re: Border around products.

really appreciate your help and knowledge, what I am after is for the featured products in columns to have a border in between the images, but not on the outside if this makes sense?

For exampe: O | O | O ... where the O is product and the | is seperater

alec.thomas

04-06-2009 09:50 AM

Re: Border around products.

Please give me a link to your site so I can see how its laid out. It's too hard to figure out what your trying to do without looking at your site.

RichieRich

04-06-2009 09:52 AM

Re: Border around products.

I have sent private message to website, as it is closed and under developement.

alec.thomas

04-07-2009 03:26 PM

Re: Border around products.

Try putting this code into main.css

Code:

 

.products products-table width-100 .product-cell {

 border-right-width: thin;

 border-left-width: thin;

 border-right-style: solid;

 border-left-style: solid;

 border-right-color: #CCCCCC;

 border-left-color: #CCCCCC;

}

if that works, you'll be able to change css to whatever you want to style it. Your template is different from mine and your featured products table doesn't have an id so its a little difficult to control it with css.

ARW VISIONS

04-07-2009 05:45 PM

Re: Border around products.

Quote:

Originally Posted by RichieRich

This is difficult because the columns are populated using a foreach loop, which will place the separator at the end of the row as such. O | O | O |

There maybe a way to count the array index and leave it out for every third product.

Will see if I can figure it out while I backup my drives.

Victor D

04-08-2009 01:22 AM

Re: Border around products.

fast borders mod (developed for our templates in 15 minutes)

1. add in the end of your main.css

Code:

   .products-table{border-left:1px solid #d7e8ff;border-top:1px solid #d7e8ff}

 .products-table td.product-cell {border-right:1px solid #d7e8ff}

 .products-table .last-row .product-cell{border-bottom:#d7e8ff solid 1px}

2. open customer/main/products_t.tpl and replace

Code:

      <tr>



        {foreach from=$row item=product}

          {if $product}



            <td class="product-cell product-cell-buynow">



                {if $config.Appearance.buynow_button_enabled eq "Y"}

                  {include file="customer/main/buy_now.tpl"}

                {else}

                  &nbsp;

                {/if}



            </td>



          {/if}

        {/foreach}

      </tr>

with

Code:

 <tr class="last-row">

        {foreach from=$row item=product}

          {if $product}



            <td class="product-cell product-cell-buynow">



                {if $config.Appearance.buynow_button_enabled eq "Y"}

                  {include file="customer/main/buy_now.tpl"}

                {else}

                  &nbsp;

                {/if}



            </td>



          {/if}

        {/foreach}

      </tr>

(actually just add class to the tr element in the first line of code above)

RichieRich

04-08-2009 01:30 AM

Re: Border around products.

Victor, thank you this seems to have a full border around the products which looks great, but not what I am looking for.

I think Ashley has worked out the method, to either use every third array, or not on the end of the table

Victor D

04-08-2009 01:42 AM

Re: Border around products.

I can't get what kind of borders you need but I can also give common recipe:

just add name to foreach f.e.
foreach name=prods

then youll be able treat it like this:

Code:

class="item {if $smarty.foreach.prods.first}left-item{else}{if $smarty.foreach.prods.last}right-item{/if}{/if}"

after adding this to css:

Code:

.item{border:#000 1px solid}

.left-item{border-left:0px none}

.right-item{border-right:0px none}

you will get no borders for left and right element

RichieRich

04-08-2009 01:45 AM

Re: Border around products.

ok that sounds perfect, will give it a try, thanks

mrerotic

06-21-2009 11:08 AM

Re: Border around products.

RichieRich - how did you achieve this? I'm really interested. Is there anyway you can send me your url so I can take a look at it too?

Thanks.

mrerotic

06-24-2009 11:43 PM

Re: Border around products.

Richie can you or will you provide this?

xtech

01-03-2012 09:58 AM

Re: Border around products.

I want to individual product border in category,featured product and manufacturer page.I want to get this for 4.4.2 Pro.

How to achieve that?

CottonAge.com

01-03-2012 10:05 AM

Re: Border around products.

can you provide a link to your store so we can take a look at the layout

Quote:

I want to individual product border in category,featured product and manufacturer page.I want to get this for 4.4.2 Pro.

How to achieve that?

ARW VISIONS

01-03-2012 08:09 PM

Re: Border around products.

There is no easy explanation for this.

You need to strip out the cell padding and cell spacing in your tables.

Then insert a spacer TD using smarty to only insert the space between the first and second and second and third but not after the third TDs. This assumes you use a 3 column layout.

so...

Code:

{if !$smarty.foreach.foo.iteration % 3 = 0}<td> </td>

then placed borders on the left side of the TDs that hold the product info.

now use a variation of above code to place a border on the right of only the last TD in the product foreach array.

Now just place a new set of TD in the product array to hold the top and bottom borders.

Hope this kinda helps, may have left out a step or two. I'm exhausted so I may revisit this in the AM.

xtech

01-04-2012 12:35 AM

Re: Border around products.

Hi,
Thanks for your reply.

But in 4.4 it is difficult to code.Is it possible to give me exact codes for my artistictune business theme?

Thanks again.

xtech

01-06-2012 12:07 AM

Re: Border around products.

I have done this by myself.I do not know why we are member of forum??

Forum is a place where everyone shares their codes to everyone and should help and co operate.But everyone demand me pricing for a small modifications ???

Great !!!

Thanks for your previous help !!!

Thanks,

gb2world

01-06-2012 12:38 AM

Re: Border around products.

Quote:

Forum is a place where everyone shares their codes to everyone and should help and co operate

It is good to know you feel this way and we can expect to see you post your code to help others.

---

mrerotic

01-06-2012 12:38 AM

Re: Border around products.

xtech - I completely agree with you. I think everyone has grown the mentality of charging people for everything they do after trying to get answers so many times from X-cart staff themselves when 99% of the time they wont even assist you unless you purchase support points.

X-cart is a great product and I still use it, however I have really given up on the forum and on x-cart staff after spending thousands and I mean thousands of dollars on them to help me. Then to find 6 months later that my support has run out for what I just paid thousands for and they wont answer a simple question without me adding more money.

Custom Modules - are however different. I repect the people who spent the time to develope new modules for xcart and I do think there should be a price on many of them but there are many that should just be out there for all x-cart members free of charge. Look at wordpress for example or oscommerce. Numerous people have spent hours and hours developing modules to help compliment the software and they dont charge for it. Why can't x-cart look at this and say wow. If we help people understand the code to achieve new modules then we will sell more licenses because our ecommerce software will be the best on the market for all of the members helping them achieve the best software available.

Just my 2 cents!

xtech

01-06-2012 01:34 AM

Re: Border around products.

Add-
style="width: {$cell_width}%; border-top:1px solid #cccccc; border-left:1px solid #cccccc; border-right:1px solid #cccccc; border-top-left-radius:10px; border-top-right-radius:10px;" in each td and after each td ends add

<td><img src="skin/common_files/images/spacer.gif" width="10" height="5"/></td>

-This code is for 4.4.2 Pro products_t.tpl.I have researched and try and after that successfully done.

ARW VISIONS

01-06-2012 07:14 AM

Re: Border around products.

can you show us a link to the finished product?

Ash

ARW VISIONS

01-06-2012 07:21 AM

Re: Border around products.

lol you are raking me over the coals via PM when I pretty much told you how to do this in the above post.

You said your HTML and Smart experience were limited so I offered to do it for you.

I of course can't do it for free, since I run a business. Sheesh... tough crowd.

cflsystems

01-06-2012 07:28 AM

Re: Border around products.

@ arw visions

Get use to it :)

Sure you are already

ARW VISIONS

01-06-2012 07:47 AM

Re: Border around products.

I am Steve. on another note....

change
<td><img src="skin/common_files/images/spacer.gif" width="10" height="5"/></td>

to

{if !$smarty.foreach.foo.iteration % 3 = 0}<td><img src="skin/common_files/images/spacer.gif" width="10" height="5"/></td>{/if}

and you won't ahve the extra space after the 3rd product in each row. of course change foo to the name of your foreach loop.

xtech

01-07-2012 01:05 AM

Re: Border around products.

Thanks...

All times are GMT -8. The time now is 10:06 PM.