X-Cart forums

[premierbusiness]

Hi there all. Question on how to space out my Product Options. I have like 8 options for a product, with dropdown menus as a few inputs and text areas as a few inputs. The thing is, that all the options seem to run together when displayed. Let me just type an example here to illustrate.

Please choose a number of cards: (dropdown)
Please choose a design: (dropdown)
Please enter your name: (text area)
Do you want the optional backside? (dropdown)

I want there to be spaces between the options so that the options stand out more. You know like.

Please choose a number of cards: (dropdown)

Please choose a design: (dropdown)

Like that. I'd know how to do it with HTML on a page... but I tried inserting a <BR> right after the Option Text, but all that did was screw up the alignment for everything after the line. Any help is appreciated!

Thanks,
Brannon

[balinor]

You can edit the template directly and add in a break between rows:

skin1/modules/product_options/customer_options.tpl

[premierbusiness]

Thanks so much! Okay, so this seems really lame, but I'm working off no sleep with a 2 year old and a 3 year old at my feet here... would you be so kind as to show me where to put the <BR>s? If you could put them in bold or something, that would be ideal. Thanks SO much!
************************************************** *****

{* $Id: customer_options.tpl,v 1.24 2006/04/07 05:19:21 svowl Exp $ *}
{if $product_options ne ''}
{if $nojs ne 'Y'}
<tr style="display: none;"><td>
<script type="text/javascript" language="JavaScript 1.2">
<!--
var alert_msg = '{$alert_msg}';
-->
</script>
{include file="modules/Product_Options/check_options.tpl"}
</td></tr>
{/if}

{foreach from=$product_options item=v}
{if $v.options ne '' || $v.is_modifier eq 'T'}
<tr>
<td valign="middle" height="25">{if $usertype eq "A"}{$v.class}{else}{$v.classtext|default:$v.class }{/if}</td>
<td valign="middle">
{if $cname ne ""}
{assign var="poname" value="$cname[`$v.classid`]"}
{else}
{assign var="poname" value="product_options[`$v.classid`]"}
{/if}
{if $v.is_modifier eq 'T'}
<input id="po{$v.classid}" type="text" name="{$poname}" value="{$v.default|escape}" />
{else}
<select id="po{$v.classid}" name="{$poname}"{if $disable} disabled="disabled"{/if}{if $nojs ne 'Y'} onchange="javascript: check_options();"{/if}>
{foreach from=$v.options item=o}
<option value="{$o.optionid}"{if $o.selected eq 'Y'} selected="selected"{/if}>{$o.option_name}{if $v.is_modifier eq 'Y' && $o.price_modifier ne 0} ({if $o.modifier_type ne '%'}{include file="currency.tpl" value=$o.price_modifier display_sign=1 plain_text_message=1}{else}{$o.price_modifier}%{/if}){/if}</option>
{/foreach}
</select>
{/if}
</td>
</tr>
{/if}
{/foreach}
{/if}


{if $product_options_ex ne ""}
<tr>
<td colspan="2"><font id="exception_msg" color="red"></font></td>
</tr>
{if $err ne ''}
<tr>
<td colspan="2"><font class="CustomerMessage">{$lng.txt_product_options_ combinations_warn}:</font></td>
</tr>
{foreach from=$product_options_ex item=v}
<tr>
<td>{foreach from=$v item=o}{if $usertype eq "A"}{$o.class}{else}{$o.classtext}{/if}: {$o.option_name}<br />{/foreach}<br /></td>
</tr>
{/foreach}
{/if}
{/if}
************************************************** ***************

[balinor]

Here's an easy solution. Replace this:

<td valign="middle" height="25">{if $usertype eq "A"}{$v.class}{else}{$v.classtext|default:$v.class }{/if}</td>
<td valign="middle">

with this:

<td valign="middle" height="25" style="padding-bottom: 10px;">{if $usertype eq "A"}{$v.class}{else}{$v.classtext|default:$v.class }{/if}</td>
<td valign="middle" style="padding-bottom: 10px;">

Adjust the padding number until you get the spacing you want.

[premierbusiness]

PERFECT! Thank you so much. One more question about this. How do I make the margin on the Product Options Tex wider? I have a lot of text in the Options, and it's wrapping to a lot of consecutive lines, I'd love to make it just a little bit wider - even just a few characters - like 5 characters wider.

[willywaller]

In the same line that you modified, you can add a "width" tag. I used width="75%" and it worked well for me.