Solved

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

Posted on 2013-05-20
6
766 Views
Last Modified: 2013-05-21
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
Comment
Question by:bogorman
6 Comments
 
LVL 13

Expert Comment

by:Arrow_1
ID: 39182313
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
 
LVL 9

Expert Comment

by:scifikillr
ID: 39182388
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
 
LVL 17

Expert Comment

by:nanharbison
ID: 39182962
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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:bogorman
ID: 39183979
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
 
LVL 13

Accepted Solution

by:
Arrow_1 earned 500 total points
ID: 39184013
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
 

Author Comment

by:bogorman
ID: 39184054
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

Featured Post

Microsoft Certification Exam 74-409

Veeam® is happy to provide the Microsoft community with a study guide prepared by MVP and MCT, Orin Thomas. This guide will take you through each of the exam objectives, helping you to prepare for and pass the examination.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

How important is it to take extra precautions to protect your online business? These are some steps you can take to make sure you're free of any cyber crime.
Learn about the eCommerce marketing trends for the year ahead.
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
This tutorial demonstrates a quick way of adding group price to multiple Magento products.

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question