Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2013-05-20
6
Medium Priority
?
835 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 13

Expert Comment

by:Aaron Feledy
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
Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

 

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:
Aaron Feledy earned 2000 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Often people are aiming at development of perfect Magento websites. Though, it is easier said than done. You know what’s much easier? To ruin everything. It can be done in seconds. Many of us experimented with design, tried to change some values dir…
Are you using email marketing software? If not, you're missing out on effortless marketing and the reaching of desired conversion rates through email marketing software.
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…

604 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