accept-charset account admin along appears applying area buttons cart changes click code continue custom don download ejc experience form general help html input lack link linked links matter number option over page payment product products responded share shopping show site source support target thank-you utf-8 won

I am looking for more specific help on using or altering CSS on my site to style the overlay cart

(such as the white BG needs to be black and the rows/cells a specific color..etc.. along with Text being white, not black..etc)


but I can 'not' figure out how to accomplish this?

Ive added things like:

div#EJEJC_window, div#EJEJC_window div, div#EJEJC_window table, div#EJEJC_window td{
background-color:#000000;
}

to my own style sheets and uploaded them.. (I havent seen any difference) looks like plain, default cart theme. =(


Also.. I need help on trying to get some CSS to apply itself to the custom THANK YOU & DOWNLOAD page I host on my site.

its over a BLACK background.. and some of the HTML text shows up 'white' (that is put in the custom HTML input fields in admin panel)..

but the actual LINKS for the downloads themselves still have BLACK text with a RED 'click here' link..

I have looked and search.. but have NOT seen any 'real' examples of CSS to use or edit?

Just a bunch of comments saying it inherits properties from the CSS on yo page..etc..



These are the two (major) obstacles I have left to tackle.. so any help is appreciated.


Any kind soul care to share some examples on how YOU altered the cart style and got the iFrame styling to change?


Thanks



update: lacking in any 'real' CSS experience..

I have found the source code for the 'cart code' in the HTML source..

however I am just not sure why things are NOT changing when I edit them?

Maybe Im just going about this all wrong?)

summary:

I go to site, I add product to cart... (cart overlay appears)
I right click it.. view source chart..
scroll down until I see this first entry: <div id="EJEJC_overlay"

So Im thinking ok..here are the div/element ID's to be used in my CSS..

as well as other ID's like:

<div id="EJEJC_window
<div id="EJEJC_title"
<div id="EJEJC_closeWindow"
<div id="EJEJC_iframeContent"
<form accept-charset="UTF-8" name="ej_ejc_frm_1" id="ej_ejc_frm_1"

(table after form has no ID)

<table id="ejejctable"

<tr id="td1"
<tr style="background-color: rgb(241, 241, 241);" id="td2"

(**why the above two lines seem so different I am not sure?) shoudl be DL link 1 & DL link 2? but the styling seems odd/different for each?


<input id="btnUpdtCart"
&
<input id="btnContShop"

to target the cart buttons to update/continue shopping


<td style="color:#000;margin:0;padding:0;border:0;align:right;text-align: right;vertical-align:bottom;" colspan="5" id="tdPmntOptions"
--to target payment option area/div


etc..etc..etc..


after messing around.. I got these to do 'something'

#EJEJC_iframeContent table{
background-color:#000000;
}

#EJEJC_window td{
background-color:#555555;
}




but I cant seem to target the text/font color no matter what I have tried?



side question:

Since the 'ROWS' are generated dynamically based on the number of products you have in you basket.. is there any way to target only the cell bg color of those 'rows'?


(just hard code some CSS for td1, td2, td3...etc.. (up to like 100 or whatever.. to sorta take into account a larger possibly amount of products being in there?)

reason i ask is because changing ALL the cell bg colors changes cell colors AFTER the Download link 'rows' and show the cell spacing/borders all over, which doesnt look that good)




ALSO... how hard would it be o add some new ID's to this? for cells/rows that can NOT be targeted for lack of ID's???

Example.. the HEADER row.. and the TOTAL/AMOUNT cells? How can we change the font or even bg color of those cells?

thanks

I've responded to your other thread about customizing the thank-you pages we generate for you:
http://www.e-junkie.com/bb/topic/5637

As for using CSS to restyle your cart, that is a matter of applying or expanding your own expertise with HTML and CSS; we can't really provide a tutorial on matters of general coding technique or theory. Honestly, our cart wasn't really ever designed or intended to be customized, aside from the cart customization code we support (linked in your other thread), so restyling it with CSS amounts to a "hack" that you'd just have to tinker and experiment with on your own to figure out what will or won't work. For elements that don't have IDs, you may need to experiment with child/descendant CSS selectors and/or attribute selectors; you may find this reference useful:
http://css.maxdesign.com.au/selectutorial/