Databases
StackOverflow2013
Postsdbo
PONeed to overwrite theme CSS
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PONeed to overwrite theme CSS
    text
    copied!<p>I have been working on this problem for days now and I just can't seem to find the answer.</p> <p>I am using Drupal 7 and I am trying to use E-junkie's shopping cart in one of my blocks on the frontpage. The pop-up overlay and etc. are fine but apparently my Drupal theme's CSS Styles is overwriting that of my shopping so it comes out wrong.</p> <p>This is the website that I am working on: <a href="http://eastwestcards.com" rel="nofollow">http://eastwestcards.com</a> - Under the big View Cart button there is an Add to Cart button that you can use to add a free product for the sake of being able to see what I mean by the shopping cart coming out all wrong. My checkout button is all the way to the left and if you click an empty space at the bottom it actually sends you to checkout, the item lists and the rest of the tables have no borders or cell spacing/padding and a few other things.</p> <p>Now this site on the other hand is how my shopping cart should like: <a href="http://pixilate.com/fonts/gardenia-px" rel="nofollow">http://pixilate.com/fonts/gardenia-px</a> - Just click Add to Cart for the product and you will see the different between my cart and that sites'.</p> <p>I have been looking for help all over and I've tried everything that has been suggested to me, I have tried exempting the cart's design from my CSS stylesheet, I have tried overwriting my drupal theme's CSS and etc, I've even tried using the View Source Chart plugin for firefox to try and determine which tags and etc. I should be trying to fix in order to change the appearance of the shopping cart on the site. I used the View Source Chart plugin because viewing my page's source normally doesn't show the HTML code for the shopping cart pop up because it is a javascript code that is provided by e-junkie that I simply put on my site. I am fairly new to all of this but I have really tried my best to fix this problem and I hope someone will be kind enough to help me! Thank you in advance!</p> <hr> <p>I made this change "border-collapse: separate" and "border-spacing: 2px" and i also added this stuff at the end of my css stylesheet, some of it works, some of it doesn't but it seems to look okay now: </p> <pre><code>#EJEJC_window table { background-color: white; !important; } div#EJEJC_iframeContent td #EJEJC_iframeContent div { border-width: 3px; border-spacing: 20px; border-style: solid; border-color: green; border-collapse: collapse; background-color: white; !important; } #EJEJC_iframeContent th { border-width: 3px; border-spacing: 20px; border-style: solid; border-color: green; border-collapse: collapse; background-color: white; !important; } #ejejctable table { font-family: arial; font-size: 12pt; background-color: white; border-style: solid; border-color: white; padding: 4 px; !important; } #ejejctable th { border-width: 4px; border-style: solid; border-color: white; padding: 4px; !important; } #ejejctable td { border-width: 4px; border-style: solid; border-color: white; padding: 4px; !important; } #ejejctable tr { border-width: 4px; border-style: solid; border-color: white; padding: 4px; !important; } #ejejctable tbody { border-width: 4px; border-style: solid; border-color: white; padding: 4px; !important; } #tdHeader { padding: 25px; !important; } td#tdPmntOptions tr { float:right; !imporant; } #tdPmntOptions tr { float:right; !imporant; } img#btnEJ { float:right; !imporant; } #btnEJ { float:right; !imporant; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload