Customizing the Look of Shipping Estimator with CSS

With CSS, there's a lot that can be done and I'm confident about what I can do, but... I'd like to find a way to get my shipping estimator a little more stylized to sort of "separate" FedEx and UPS. When the list comes up, it's just boring looking. I really want to enhance the shipping estimator by putting <div>'s with special background around each carrier (i.e. FedEx and UPS).

After poking around the templates, I'm not sure my desired intent can even be done. I can manage the CSS part of it, but I'm not sure the templates can be altered to accommodate my vision. Does anyone have any tips for this? I've attached an image to help visualize my goal...

You could customize the:
tpl_modules_shipping_estimator.php

using your templates and overrides ...

Then around line 100, add the code in RED so you have classes to work with in your stylesheet.css

      for ($i=0, $n=sizeof($quotes); $i<$n; $i++) {
[B]        $extra = $quotes[$i]['id'];
[/B]        if(sizeof($quotes[$i]['methods'])==1){

Ajeh, you rock! I added the code as you described, then used my Firefox Web Developer Tools to pinpoint DIV and class names on the shipping estimator. I created a couple images, added some CSS code and the layout is tons better! Visually, the two separate carrier types are easy to identify and easy on the eyes.

Thanks so much. For anyone else, here's the CSS I used along with a snapshot of the finished and working modification:

#shippingEstimatorContent .fedexwebservices { background-color:#cdbca9; background-image:url(/images/fedex-mini.png); background-position:center right; background-repeat:no-repeat}
#shippingEstimatorContent .ups { background-color:#e7c69f; background-image:url(/images/UPS-mini.png); background-position:center right; background-repeat:no-repeat}

Thanks for the update that this was able to work for you ... :smile:

This thread has helped a lot and I've been searching but I can't find much on changing the layout of the shipping estimator. I want to make the table width smaller and remove the borders and possibly change the colors of some of the individual cells (maybe have the price cells white and the description cells grey). How could i do this?