Link to home
Start Free TrialLog in
Avatar of bogorman
bogorman

asked on

Drupal 7 Ubercart - Changing colours in checkout and shopping cart pages

If you look at:

Checkout page

How can I change the colour of the text in the upper box of this page (and in the Review Page) and ALSO change the text color in the lower boxes?  Both colors need to be different as darkening the text in the upper box makes the lower box text unreadable against the blue background.

I have tried changing css coding but I simply cannot get it right.
Avatar of Aaron Feledy
Aaron Feledy
Flag of United States of America image

I'm not exactly sure which areas you're referring to, but when I add a product to the cart I see several text areas that could be changed. Here are examples:

The link in the notification area:
.messages a {
    color: #324769;
}

Text in the table:
#cart-form-pane table {
    color: #000000;
}

The table header:
#cart-form-pane thead {
    color: #000000;
}

The links in the table:
#cart-form-pane table a {
    color: #324769;
}
Avatar of scifikillr
scifikillr

We can give you a meal, or we can teach you how to fish. I prefer the latter.

Please immediately install the following if you haven't already:

1. Firefox
2. Firebug (for Firefox)

Once installed, Firebug will spawn a button on the toolbar, which will open a pane at the bottom portion of the window. This tool will let you select elements on the page (after clicking the Inspect button) and see how the CSS is being loaded. You can even go so far as to locate specific CSS rules and override them. In this way, you can identify the existing rules in CSS, and override them properly via a custom css file in your theme (see this page for more on this topic).
You can use Google Chrome and the latest versions of IE (press F12) to see the same thing as Firebug shows you. You can enter new css elements in the css on the right side of the page, and if the new rule works, then put that rule in the same style on the CSS sheet.
Avatar of bogorman

ASKER

Hi scifikillr and nanharbison,
Yes, I am using Firebug at present (unfortunately I use a Mac so IE is a no go for me. I believe an old version is still available but it seems to be not advised for the Mac).

Arrow_1.  Your solution works fine but how can I extend it to work on the Checkout and Review pages?  I just don't seem to be able to select the right CSS coding even when I select the elements of the forms on these pages for it to work.
ASKER CERTIFIED SOLUTION
Avatar of Aaron Feledy
Aaron Feledy
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Hi Arrow_1,
Thanks very much. Your description of using Firebug is really useful and the coding works.
I always took ages trying to wade through selecting an element and then going through the style coding, rather than using my intelligence to work out the CSS.
Thanks again
Brian