Jump to content

product description with a table


peterp

Recommended Posts

Hi All,

         I have a client that has clothing as their products and as all clothing comes in sizes they want to create a table with the various sizes eg. S,XL,L,M etc with the dimensions for each size. This they have been able to do using the description part of the product definition however sometimes the table is so wide that it over displays the column in the side bar. So is there a way that I can make the side bar move sideways if the table over displays or even make the shin wider. The skin I'm using is Mican Please see below

5a2f85cbaf8e0_BIJ236MLMenandLadycorejacketsworkgearselect_la.thumb.png.c82f48e71ac69640d65f5c848a8e0632.png

Link to comment
Share on other sites

We can move the Product Description under the Gallery.

In content.product.php, find:

	  <h2>{$LANG.catalogue.product_description}</h2>
  		<div class="product_description">
			{$PRODUCT.description}
			<p><strong>{$LANG.catalogue.product_code}:</strong> {$PRODUCT.product_code}</p>
			{if $PRODUCT.manufacturer}

Change to:

{*	  <h2>{$LANG.catalogue.product_description}</h2>  *}
  		<div class="product_description">
{*			{$PRODUCT.description}  *}
			<p><strong>{$LANG.catalogue.product_code}:</strong> {$PRODUCT.product_code}</p>
			{if $PRODUCT.manufacturer}

Find:

  {if isset($PRODUCT.discounts)}
  <div id="quantity_discounts">
	<h2>{$LANG.catalogue.quantity_discounts}</h2>

Change to:

  <h2>{$LANG.catalogue.product_description}</h2>
  {$PRODUCT.description}

  {if isset($PRODUCT.discounts)}
  <div id="quantity_discounts">
	<h2>{$LANG.catalogue.quantity_discounts}</h2>

 

Link to comment
Share on other sites

Hi All,

        Brian I have tried the suggested code but unfortunately it didn't work, I can't give you a URL as the site is in development and at this stage is only on a localhost. What I have noticed though is when I watch the programs by using firefox firebug I can see where the table is displayed and I noticed it had a 'float left' so while I was still in trace mode so to speak I change the float to be 'float right' this achieved the desired result of making the table display further to the left and outside of the sidebars. That is all so well and good but when I go looking for the CSS that is using I'm unable to find it in either layout.css or common.css. Firebug says the element that I'm looking at is in inline which is now beyond my limited knowledge. Where do I  change this inline css?

See below as to what I'm trying to explain, the highlighted code is what I was able to change to be 'Align=Right' which achieved measurements table to be justified to the left

Hope you can help

Regards,

Peterp

5a30c7e3a410d_productsizetable.thumb.png.8e8cd0fff07519d988ff94a6928b3b94.png

Link to comment
Share on other sites

First, editing a template may require that you have CubeCart clear its skin cache. Smarty will use it's previously compiled, cached version. (Admin, Maintenance, Rebuild tab, Clear Cache.) I urge you to try editing the template again.

Second, please know that this code:

<table align="left" ... >

is not a float. It is an alignment. It is not CSS. It is a prehistoric means of telling the browser where to place the object. "Shove this object up against the left side of its container." (Or right side, accordingly.)

Third, the table cannot shrink any narrower - regardless of having applied a CSS rule for a max-width. A table (generally) will not allow the columns to be narrower than the widest word in it. I think what has happened, like overflowing into the right sidebar, the table, being align=right, now overflows into the empty space below the gallery.

Fourth, know that an "in-line" CSS rule looks like this:

<table style="position: absolute; right: 0px;" ...>

This tells the browser to position the table absolutely against the right edge of its (also positioned) container, but maintain a gap of 0 (or however many) pixels.

This CSS rule will appear in the Inspector's Rules tab for the selected element.

Again, try editing the template. It is a huge waste to let all that white space stay white - giving you room for a nicely styled, uncrowded table.

Edited by bsmither
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...