Shoppingcart/Freeship in Header support

It's hard to discuss styling changes from a screenshot, but I can see that you have a box background image that is smaller than the content, so it starts to repeat. You will either need to make the container dimensions smaller or make the image wider. If you want the full height of the box image to show, with round corners at bottom, you will need to specify the height of the container to equal the image height.

To get space on the upper left for the cart image, you can add padding-left to the container or one of its components. I could give specific advice when seeing it live.

*nevermind*

I just thought of something... You could install the Shoppingcart/Freeship and add to your stylesheet

#cartHeader {display: none;}

which would hide it from everybody.
I could then delete that in my local view and see it live to advise, without affecting anyone else.

Thanks Glen,
I changed the image a little so that I can leave it on and not have it glaring at me. Let me know if you can give me more specifics....I REALLY appreciate it!

Here you go...

Code:

---

#cartHeader{
position:absolute;
top:3.0em;
right:1.3em;
width:145px;
height:81px;
background:url(/includes/templates/future_zen/images/cartheader.jpg) no-repeat;
border:1px solid #ffaa88;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
#cartHeader h3{text-align:center;}
#cartCount{border-top:1px solid #999;text-align:center}
#cartCount a{}
#cartTotal{}#cartFreeShip{margin:0 0.3em}
#cartCheckout{float:right;margin:0.2em}

---

The current #cartCount a{) is a typo in the mod styles; it should be #cartCount a{}

You can use the properties in green instead of the background-image to put a rounded border on the box, in all modern browsers except IE.

Thank you so much, that worked!!! I am have lots of work to do on it yet, but that made it workable!!!!

Ok, one more question, I have now added an image to the border and I can't get the text to move right off the border. Also is there a way to call up a different go to checkout button, I need to make it slightly smaller because it blocks all of my ez pages. Or if you have another idea ;)
Thanks again, so happy to have this working!

Increase the margin here:

#cartFreeShip{margin:0 0.2em}

You appear to have given up the checkout button in the header, which seems fine since there is one in the sidebox just below it. The checkout button would require a flexible height box, or one that is always tall enough to hold the button.

Great, things are coming together but I'd like to make the cart image a link and also add another image next to my logo.

I have added this to my tpl_header file, but my image is not showing up:

PHP Code:

---

<div id="logoWrapper">
      <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>
    </div><div id="logosecond"><img height="150" width="150" title="mailbox" alt="Free Shipping"src="includes/templates/future_zen/images/mailbox.gif"></div>
<br class="clearBoth">
</div>

---

I also added this to my stylesheet, I understand the position may not be correct but I figured I could play with that.

PHP Code:

---

#logosecond  {
float:right;
padding-right:225px;
} 


---

Thanks so much!!!!! I only wish I knew everything you do about coding and css!

Update:
I was finally able to get the image to show up but it is pushed way down. I know you can't tell a lot from the screen shot but maybe you can push me in a direction.
I have adjusted the header.php file to fit the new logo (left) and adjusted my css also:
#logoWrapper {
width:100%;
height: 127px;
text-align:left;
}
#logosecond {
float:right;
padding-right:235px;
}

Thanks again, Oh I'm still trying to make the cart image a link to the shopping cart page also.