Customizing e-junkie shopping cart

[admin-GF]

I found this information,



http://www.e-junkie.com/ej/help.custom-cart.htm



I find the text and buttons are too close to the edge of the shopping cart lightbox. How can I adjust this, so there is some whitespace around the edge of the lightbox?

[E-junkie_Guru]

Since our standard overlay-style cart appears inside your page, it inherits any CSS your site/page may have. You can change the layout styling of the cart by adding/modifying the CSS in your page/site; it might also be that your existing CSS is already altering the cart's normal appearance adversely; see this help page for some tips:

http://www.e-junkie.com/ej/trouble.buttons.cart-css.htm

[admin-GF]

I'm really just interested in how to add a border or some space around the lightbox, so text and buttons don't appear to close to the edge like it does now. I assumed these types of modifications would by part of the cart itself, and not related to my CSS or web site. I'm not too experienced in this area, so I apologize if I am wrong here...

[E-junkie_Guru]

Normally the various elements of the cart shouldn't appear too close to the edge, as you can see with the sample cart display on our demo page here:

http://www.e-junkie.com/ej/demo.htm



If the cart overlay that displays in your page doesn't look exactly like that, then some CSS in your site (probably from a "theme" you're using, if you didn't add any CSS manually yourself) is probably affecting the cart's appearance in your site.



You can add a colored border around the edge of your cart by adding these lines to your View Cart code on every page, just before the "// -->" line in the standard code you obtained from Seller Admin:



function EJEJC_config() {

EJEJC_BRDRCOLOR = "blue";

}

[snatcher]

This worked for me:



function EJEJC_config() {

EJEJC_POSTCALL=true;

}

</script>

<script src='http://www.e-junkie.com/ecom/box.js' type='text/javascript'></script>

<style type="text/css">

table,tr,td { margin:0; table-layout:auto; border-collapse:collapse; border:0 !important; }

tdHeader { background:transparent; }

a#EJEJC_closeWindowButton { font:bold 10px arial; color:#fff; text-decoration:none; margin-left:600px; }

tr { }

b { padding-top:10px; padding-bottom:10px; }

.tdcells { font:bold 10px arial; color:#fff; height:40px; }

.tableheader { font:bold 11px arial; color:#FFB200; clip:inherit; }

.trheader { background:rgba(255,255,255,.05); margin-bottom:10px; position:relative; top:-10px; border-bottom:1px solid rgba(0,0,0,.6); border-top:1px solid rgba(255,255,255,.1); }

.trheader td { /* border-left:1px solid rgba(255,255,255,.1);*/ }

td1 { height:50px !important; border-bottom:1px dotted rgba(255,255,255,.25); margin-bottom:20px; }

tdPmntOptions { border-top:1px solid rgba(255,255,255,.1); box-shadow:inset 0px 2px 2px rgba(0,0,0,.25); }

.outertable { border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border:2px solid rgba(0,0,0,.2); box-shadow:2px 2px 15px rgba(0,0,0,.25);-moz-box-shadow:2px 2px 15px rgba(0,0,0,.25);-webkit-box-shadow:2px 2px 15px rgba(0,0,0,.25); }



</style>

<script type="text/javascript">

function EJEJC_shown() {

var newcode = jQuery('#EJEJC_window *').removeAttr('style').removeAttr('width').removeAttr('height').removeAttr('bgcolor').removeAttr('cellpadding').removeAttr('border').removeAttr('cellspacing');

jQuery('#imgHeader').attr({src:'http://dropcatches.com/wp-content/uploads/2012/01/logo3.png'});

jQuery('#EJEJC_window:lt(1)').css({'background-color':'rgba(0,0,0,.9)','width':'600px','padding':'20px' }).addClass('outertable');

jQuery('#EJEJC_window td').addClass('tdcells');

jQuery('a#EJEJC_closeWindowButton').unwrap().wrap('<span id="EJEJC_closeWindow"></span>').css({'position':'absolute'});

jQuery('span#EJEJC_closeWindow').unwrap();

jQuery('#ejejctable tbody tr td:lt(5)').addClass('tableheader');

jQuery('td[colspan=5]:lt(2)').parent('tr').remove();

jQuery(firsttr).addClass('trheader');

jQuery('#ejejctable tbody tr td:eq(1)').css('width','300px');

jQuery('tr td.tableheader:eq(4)').html('<b>Amt.(USD)</b>');

jQuery('input[type=button]').css({'position':'absolute'});

jQuery('#tdSell').parent('tr').remove();

}





</script>