PDA

View Full Version : padding in order form table: how to?



salty
03-04-07, 12:58 AM
I finally *almost* finished my integration of WHMCS. One big thing remains, and that is the no cell padding on the order form.

I tried adding some room by both css and the old hard-code html method, but nothing is working.

my page:
support.inlethost.com/order.php

Can anyone offer any advice?
Thanks.

skshost
03-04-07, 01:25 AM
I see what you mean, it would look far better with padding.
Check out these styles: orderheadingrow, orderrow1, orderrow2.

BTW, I like what you've done with the Bookmark...Print icons in the bottom right.

salty
03-04-07, 02:16 AM
I tried the class's that you recommended, and cleared my cache every time. Also, to make sure that I wasn't missing anything, I over-exaggerated the padding. Cellspacing works, cellpadding doesn't. Still nothing..... :(

My CSS:
.orderheadingrow {background-color: #6495ED; color: #ffffff; padding: 30px; }

.orderrow1 {background-color: #E8F0F9; color: #000000; padding: 30px; }

.orderrow2 {background-color: #D6E4F6; color: #000000; padding: 30px; }

skshost
03-04-07, 02:39 AM
"old hard-code html method" isn't working?

Maybe you can post your step files and we'll have a look. Anyone who's done this could set in right about now.

salty
03-04-07, 03:33 PM
Alright, here's where I am. Padding works on Product Group, Product Select, & Submit, but not product. I tried adding individualized divs, but that only solved the radio cell blocks. I made different parts of the CSS-SS different amounts to try to isolate the issue. (I put them in one at a time, but for review sake, I added them all together.) The Product descriptions aren't budging..... :x

Thank you for all your help sks. :)

Step One:
<form method="post" action="{$smarty.server.PHP_SELF}?step=2">

<div align="center">

<table width="90%" cellspacing="1" cellpadding="10" class="tablepad-2x">
<tr class="orderheadingrow"><td colspan=2></td></tr>
{foreach key=num item=product from=$products}
<tr class="orderrow{if $num % 2}2{else}1{/if}">
<td width="20" align="center">

<div class="tablepad-5x"><input type="radio" name="pid" value="{$product.pid}"></div></td>
<td><div class="tablepad-5x">{$product.name} {if $product.qty!=""}({$product.qty} {$LANG.orderavailable}){/if} - {$product.description} </div></td></tr>
{/foreach}
<tr class="orderheadingrow"><td colspan=2></td></tr>
</table>

</div>

<p align="center"></p>
<p align="center"><input type="submit" value="{$LANG.ordercontinuebutton}" class="blueform"></p>

</form>

Custom Stylesheet CSS involved:
.blueform {font-family: Arial; font-size: 11px; color: #FFFFFF; font-weight: bold; border: 1px solid #E8E8E8; padding: 2px; background-color: #6495ED; }

.yellowform {font-family: Arial; font-size: 11px; color: #333; font-weight: bold; border: 2px solid #ccc; padding: 2px; background-color: #ffffbe; }

div#tablepad-5x {padding: 5px;}
.tablepad-2x {padding: 2px;}

WHMCS Stylesheet CSS:
/* Order Form Classic */

td#classicbox {width:550px; border: 1px solid #cccccc; background-color: #ffffff; color: #000000; text-align: center; }

td#classicorder {color: #000000; }

td#classiccustomfield {color: #cc0000; }

#classicaddonstable {width: 95%; background-color: #cccccc; border-collapse: seperate; padding: 30px;}

td#classicaddonstableheading {text-align:center; font-weight: bold; background-color: #efefef; color: #000000; padding: 30px; }

td#classicaddonstablerow {background-color: #ffffff; color: #000000; padding: 30px; }

/* Order Form Standard */

#standardaddonstable {width: 95%; background-color: #cccccc; border-collapse: seperate; }

td#standardaddonstableheading {text-align:center; font-weight: bold; background-color: #efefef; color: #000000; }

td#standardaddonstablerow {background-color: #ffffff; color: #000000; }

.orderheadingrow {background-color: #6495ED; color: #ffffff; padding: 30px; }

.orderrow1 {background-color: #E8F0F9; color: #000000; padding: 30px; }

.orderrow2 {background-color: #D6E4F6; color: #000000; padding: 30px; }

madhippo
03-04-07, 09:36 PM
hi

you have 3 css files attached to that order page. none of them have a class defined for tablepad-5x

add this into one of your css files and reload it. it will work after that...

.tablepad-5x {
padding: 5px;

}

skshost
03-04-07, 10:21 PM
hi

you have 3 css files attached to that order page. none of them have a class defined for tablepad-5x

add this into one of your css files and reload it. it will work after that...

.tablepad-5x {
padding: 5px;

}

Yeah, that should do it

salty
03-04-07, 10:34 PM
Thanks guys. I don't know how I missed that. :?:

:D

skshost
03-05-07, 02:49 AM
Thanks guys. I don't know how I missed that. :?:

:D

There's always something that seems so obvious once you figure it out.