View Full Version : padding in order form table: how to?
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.
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.
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
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.
Powered by vBulletin® Version 4.2.0 Copyright © 2013 vBulletin Solutions, Inc. All rights reserved.