Styling & colour of Text boxes

[ChrisGooding]

Hi,

 

I have just painstakingly gone over all the customisation of our cart, including changing the various css files anf tpl files (for me this is a great achievement).

 

However I cannot seem to solve these last 2 issues.....

 

Firstly the colour of the text entry & drop down boxes are still white with black text, and I can't for the life of me find where they can be changed. I have tried using firebug (great little discovery ) but to no avail, there simply seems to be no indication of where they are drawing they're style from.

 

example: -

 

Secondly, the box alignment on so many of the cart pages is out of sync. And I am really struggling to get them aligned..... all I have managed so far is to make the text disappear to the left of them

 

 

 

Any help on either issue will be greatly appreciated

 

Thanks in advance

[ChrisGooding]

I left it a while as I was hoping there would be something from someone.......

 

I've had as few more stabs at it but with no joy. Does anyone have ANY idea, I'm starting to get a bit flustered with it.

 

Thanks in advance.

[BAJI26]

In the css can't you do something like:

input { 
   padding-left: whateverpx;
   color: #whatever;
   border: #whatever;
   background-color: #whatever;
  }

[Zorro67]

That would work!

 

re input boxes, I had the same challenges.

The easy way to do this is to go through each template, an separte the labels from the inout field

eg from

<td> {$label} {$input}</td>

to

<td> {$label} </td><td> {$input}</td>

 

Of course you could use <div>, but the you have to add to css.

however, the above worked for us, and everything lines up PERFECTLY

[ChrisGooding]

Thanks to both of you... I'm going to get on this.

 

Will let you know how it goes.

 

Cheers

[ChrisGooding]

In the css can't you do something like:

input { 
   padding-left: whateverpx;
   color: #whatever;
   border: #whatever;
   background-color: #whatever;
  }

 

OK this worked, but I had to also add an additional set of fields for the 'select' boxes, as below

 

select { 
   padding-left: whateverpx;
   color: #whatever;
   border: #whatever;
   background-color: #whatever;
  }

 

The only issue I had, is that it then changed the 'order Now' buttons, so I am going to have to do some template changes to either provide the text boxes with different names, or the order now button. I personally think that the order now would be the best to change..... what's your opinions guys?

 

Also, the <td> idea to line the boxes up didn't work. Maybe I'm missing something

 

Heres the code from the template.... Where do I ad the tags?

 

{if $configurableoptions}
<p class="cartsubheading">{$LANG.orderconfigpackage}</p>
<p>{$LANG.cartconfigoptionsdesc}</p>
<div class="cartbox">
{foreach key=num item=configoption from=$configurableoptions}
{$configoption.optionname}: <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 />
{/foreach}
</div>
{/if}

{if $addons}
<p class="cartsubheading">{$LANG.cartaddons}</p>
<p>{$LANG.orderaddondescription}</p>
<div class="cartbox">
<table>
{foreach key=num item=addon from=$addons}
<tr><td>{$addon.checkbox}</td><td><label for="a{$addon.id}"><strong>{$addon.name}</strong> - {$addon.description} ({$addon.pricing})</label></td></tr>
{/foreach}
</table>
</div>
{/if}

{if $customfields}
<p class="cartsubheading">{$LANG.orderadditionalrequiredinfo}</p>
<p>{$LANG.cartcustomfieldsdesc}</p>
<div class="cartbox">
{foreach key=num item=customfield from=$customfields}
{$customfield.name}: {$customfield.input} {$customfield.required}<br />
{/foreach}
</div>
{/if}

{if $domainoption}
<p class="cartsubheading">{$LANG.cartproductdomain}</p>

{if $domains}
<input type="hidden" name="domainoption" value="{$domainoption}" />
<p>
{foreach key=num item=domain from=$domains}
<input type="hidden" name="domains[]" value="{$domain.domain}" />
<input type="hidden" name="domainsregperiod[{$domain.domain}]" value="{$domain.regperiod}" />
{$LANG.orderdomain} {$num+1} - {$domain.domain}{if $domain.regperiod} ({$domain.regperiod} {$LANG.orderyears}){/if}<br />
{/foreach}
</p>
{/if}

{if $additionaldomainfields}
<table>
{foreach key=domainfieldname item=domainfield from=$additionaldomainfields}
<tr><td nowrap>{$domainfieldname}</td><td>{$domainfield}</td></tr>
{/foreach}
</table>
{/if}

{/if}

 

Once again thanks.

[BAJI26]

I don't think the <td> tag wouldn't work but if the changes you made with the css did what you needed to do with the boxes, now just create one for the order button.

 

or instead of of using

 

input {

padding-left: whateverpx;

color: #whatever;

border: #whatever;

background-color: #whatever;

}

 

You could just put a class or id in the input fields like:

 

input.boxes { 
   padding-left: whateverpx;
   color: #whatever;
   border: #whatever;
   background-color: #whatever;
  }

and in the input code:

 

<input class="boxes"....

 

This way it wouldn't affect the order button.

[ChrisGooding]

Ahh I think I didn't explain correctly. I can style the boxes now (using tags and css).

 

But I am still struggling with getting them lined up correctly

 

I tried adding the <td> & </td> tags as Zorro 67 suggested, but I think I am either putting them in the wrong place, or in the wrong file.

 

I posted the large code entry (taken from the 'products.tpl' file, as I tried the codes in numerous positions, but with no joy.

 

What I am trying to achieve is lining the text/select boxes up vertically, so there is less of a 'slope'..

[BAJI26]

That's where the padding comes in.

[Zorro67]

Try modding this to suit your requirements, but keep in a backup copy

 

{if $configurableoptions}

<p class="cartsubheading">{$LANG.orderconfigpackage}</p>

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

<div class="cartbox">

<table>

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

<tr><td>{$configoption.optionname}: </td><td><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 /></td>

{/foreach}

</table>

</div>

{/if}

 

{if $addons}

<p class="cartsubheading">{$LANG.cartaddons}</p>

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

<div class="cartbox">

<table>

{foreach key=num item=addon from=$addons}

<tr><td>{$addon.checkbox}</td><td><label for="a{$addon.id}"><strong>{$addon.name}</strong> - {$addon.description} ({$addon.pricing})</label></td></tr>

{/foreach}

</table>

</div>

{/if}

 

{if $customfields}

<p class="cartsubheading">{$LANG.orderadditionalrequiredinfo}</p>

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

<div class="cartbox">

<table>

{foreach key=num item=customfield from=$customfields}

<tr><td>{$customfield.name}: </td><td>{$customfield.input} {$customfield.required}<br /></td>

{/foreach}

</table>

</div>

{/if}

[ChrisGooding]

Sorry, yes.........

 

If you were in my office you would have just heard the sound of a penny dropping

[Zorro67]

Wait til you hear the sound your jaw makes when it hits the floor after seeing my invoice

[ChrisGooding]

lol