Order Form Design Changes

[Maple-Hosting]

Hi everyone,

 

I opened this ticket to WHMCS:

 

Hello,

 

I attached a picture that shows the current way my custom options are aligned in the order form.

 

As you can see the length of the dropdown boxes depends on length of the longest option... I want to make it so that the length will be the same in all dropdown boxes, because as you can see, if it's in different sizes it looks very unprofessional, hope you understand what I'm asking, and that you can help me.

 

Further more,

I would like to ask how I can make more space between every custom option, as you can see they are all line by line very "crowded" and not easy to understand.

 

Their reply was:

Hi,

You can make whatever modifications you need by editing the templates/orderforms/*your active template*/configureproduct.tpl file. Specifially the code below {if $configurableoptions}

 

If we can be of any more assistance, please don't hesitate to get back in contact.

 

I went to the default template's confgureproduct.tpl and that is the code that is located there:

{if $configurableoptions}

<p><strong>{$LANG.orderconfigpackage}</strong></p>

<p>{$LANG.cartconfigoptionsdesc}</p>

<div class="orderbox">

<b class="orderboxrtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>

<div class="orderboxpadding">

<table>

{foreach key=num item=configoption from=$configurableoptions}

<tr><td>{$configoption.optionname}:</td><td>

{if $configoption.optiontype eq 1}

<select name="configoption[{$configoption.id}]">

{foreach key=num2 item=options from=$configoption.options}

<option value="{$options.id}"{if $configoption.selectedvalue eq $options.id} selected="selected"{/if}>{$options.name}</option>

{/foreach}

</select><br>

{elseif $configoption.optiontype eq 2}

{foreach key=num2 item=options from=$configoption.options}

<input type="radio" name="configoption[{$configoption.id}]" value="{$options.id}"{if $configoption.selectedvalue eq $options.id} checked="checked"{/if}> {$options.name}<br />

{/foreach}

{elseif $configoption.optiontype eq 3}

<input type="checkbox" name="configoption[{$configoption.id}]" value="1"{if $configoption.selectedqty} checked{/if}> {$configoption.options.0.name}

{elseif $configoption.optiontype eq 4}

<input type="text" name="configoption[{$configoption.id}]" value="{$configoption.selectedqty}" size="5"> x {$configoption.options.0.name}

{/if}

</td></tr>

{/foreach}

</table>

</div>

<b class="orderboxrbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>

</div>

{/if}

 

I tried changing the select to:

<select size="1" name="configoption[{$configoption.id}]">

or

<select width="250" name="configoption[{$configoption.id}]">

In order to make it that all of the dropdown boxes will be the same sizes and aligned.

 

Once I solve this first problem I can start working on the second one.

 

This is my last resort, I seriously need help.

Thanks guys.

[gurumani]

Hi everyone,

 

I opened this ticket to WHMCS:

 

 

 

Their reply was:

 

 

I went to the default template's confgureproduct.tpl and that is the code that is located there:

 

 

I tried changing the select to:

<select size="1" name="configoption[{$configoption.id}]">

or

<select width="250" name="configoption[{$configoption.id}]">

In order to make it that all of the dropdown boxes will be the same sizes and aligned.

 

Once I solve this first problem I can start working on the second one.

 

This is my last resort, I seriously need help.

Thanks guys.

 

Here use this:

 

<select style="width:250px;" name="configoption[{$configoption.id}]">

 

Notice i used style=""

[Maple-Hosting]

Here use this:

 

<select style="width:250px;" name="configoption[{$configoption.id}]">

 

Notice i used style=""

Thank you SO much!

[gurumani]

Thank you SO much!

 

Very Welcome!