Solved

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

Posted on 2013-05-20
6
750 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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Every business owner understands the significance of online customer reviews and the impact it can have on sales and revenues. With technology advancing at such a rapid pace, getting online reviews has never been easier, especially when many regions…
For both online and offline retail, the cross-channel business is the most recent pattern in the B2C trade space.
This tutorial demonstrates a quick way of adding group price to multiple Magento products.
You have products, that come in variants and want to set different prices for them? Watch this micro tutorial that describes how to configure prices for Magento super attributes. Assigning simple products to configurable: We assigned simple products…

760 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now