Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 883
  • Last Modified:

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.
0
bogorman
Asked:
bogorman
1 Solution
 
Aaron FeledyDrupal Developer and ConsultantCommented:
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;
}
0
 
scifikillrCommented:
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).
0
 
nanharbisonCommented:
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.
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
bogormanAuthor Commented:
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.
0
 
Aaron FeledyDrupal Developer and ConsultantCommented:
The trick is to look at the source with firebug and find the unique elements for that page. For example, the checkout form has a form element(<form>) with an id of uc-cart-checkout-form. It's a pretty safe bet that this is unique to this form and you won't encounter it elsewhere on the site. That means you can target the form with css and no others will be affected. Next you have to decide which part of that form you are trying to target. Looking at the source, the table has a class name of "cart-review". If we wanted to change the text in the body of the table to black, we would select the tbody element with our css using the elements we discovered above:

#uc-cart-checkout-form .cart-review tbody {
  color: #000000;
}

This css means that any text within any <tbody>, within any element with a class of cart-review, within any element with an id of uc-cart-checkout-form will be black.

If we wanted to select links within that body of that same table, we'd simply add an "a" to the end so that any anchors will be selected.

#uc-cart-checkout-form .cart-review tbody a {
  color: #ffffff;
}

In the above example, any anchor(link) within any <tbody>, within any element with a class of cart-review, within any element with an id of uc-cart-checkout-form will be black.
0
 
bogormanAuthor Commented:
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
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now