We can recommend using the View Source Chart extension for Firefox to help you see how the overlay-style cart is structured within your page when it's being displayed, find element IDs, work out how elements are nested, etc. Once you have the View Source Chart extension installed, click a cart button to view the cart in your page, then right-click on the cart and select View Source Chart. You will find the cart added as a large DIV at the end of your original page source.
You can also use View Source Chart to see the structure of your thank-you pages, though this would be a bit trickier when you're embedding our thank-you page content inside yours. You can bring up your thank-you page for a transaction, right-click in the iframe where our thank-you page content is displayed and (in Firefox) select This Frame > Open Frame in New Tab/Window, or you can open your Transaction Log, right-click on a linked Transaction ID and select Copy Link Location, then paste that into your address bar and add &noredirect=true to it, like so:
https://www.e-junkie.com/d/?t=jg-l5rooge0092d567&c=fup&noredirect=true
...then just right-click on that page and select View Source Chart.
Examining the cart structure with View Source Chart, it looks like any custom replacement for the "Your Shopping Cart" graphic in the standard cart header should be no larger than 700x63px. You can also target #tdHeader (rather than #imgHeader) to completely replace the standard cart's IMG tag with any innerHTML content you wish.
On the thank-you pages we generate, "Click here to download [item name]" is shown for products using Single File Download, whereas "Click here to access [item name]" is shown for products using Redirection.
The other concerns you raised have largely to do with proper jQuery/CSS syntax and the CSS concepts of cascading, inheritance, and specificity. In a nutshell, styles declared later in the page override styles declared earlier, elements inherit styles from larger elements which contain them, and styles targeted to more-specific elements override broader styles. The upshot is that if an element in our standard cart already has an inherent style= attribute of its own, you can only override that with CSS "!important" declarations, like so:
<style type="text/css">
EJEJC_title {background-color:#F00 !important;}
EJEJC_closeWindowButton {color:white !important; font-size:12px !important;}
</style>
Then you'd only need to use a jQuery line in the cart-customization function EJEJC_shown() {} to replace the standard "<b>Close</b>" innerHTML content for #EJEJC_closeWindowButton like so:
function EJEJC_config() {
EJEJC_POSTCALL=true;
}
function EJEJC_shown() {
jQuery("#EJEJC_closeWindowButton").attr("innerHTML", "<b>X</b>");
}
BTW, it's a good idea to get out of the habit of using FONT tags, which have been deprecated in favor of CSS for over a decade now, for good reason -- learning CSS will make your web-designing life much easier in the long run. I can recommend the tutorials at HTMLDog.com in particular for an overview respecting standards compliance with best practices.
