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...

#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:

 
<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
#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.

My final post on this issue, hopefully. I have managed to get all of the images moved up, added links as desired, but my final problem is: my text is below the cart image. I have figured out how to move it up, however when I do it goes behind the image instead of on top.
Any suggestion.
Thanks so much!!!

Could this be modiflied to work with a sidebox shopping cart???
The template that I am using can't modify the header unless you move a lot fields elsewhere...

I have not fully investigated to see if header can be changed easily, I will shorty.. just wanted some input before I do...

Thanx :unsure:

Could this be modiflied to work with a sidebox shopping cart???It was originally modified FROM a sidebox mod, so moving it back shouldn't be a big deal...

If I can see your site, I can advise on the best way to use this in the header.

I probably have to look at the stylesheet to move locations of it but I've included a photo of what needs to done...

1. move the Home Login ... etc fields to left under the logo
2. take out the search field
3. move the Currencies and languages down to where the search field was.

Any help would be great... I'm sure afterwards this will look great!

Richard :bigups:

Sorry I forgot the site address: http://store.printersparts.com/store/

I see you have the search-header turned off. The rest of the elements are built into that structure by Template Monster, and you will need to rework tpl_header.php to move them into the part of the header where you want them. CSS can't reliably do it all.
An example of what you can do - rather brute force, but it works:
in stylesheet_tm.css, add two rules and add a property to an existing rule, as shown in red:

.header_t {position: relative;}
.user_menu2 {position: absolute; top: 114px; left: 10px}
.header_t .row2{}
.header_t .row2 .inner1{background:url(../images/header_t_bg2.gif) repeat-x left top #072846; width:100%;}
.header_t .row2 .inner2{background:url(../images/header_t_bg1.gif) no-repeat left top; width:100%;}
.header_t .row2 .inner3{background:url(../images/header_t_bg3.gif) no-repeat right top; padding-bottom:5px; height:20px;}

The most robust way to handle this is to move the home/login menu and the currency/language section into <div class="inner3">; then they will automatically stay there and fill it up to the correct height, and not interfere with positioning the shoppingcart/freeship in the upper right area.

Everything is working out now.... I've just found out a problem and fixed it... just now modifying to look and it'll be all set...
Thanks for everything....

Regards,
Richard

I am having issues with centering the #cartFreeShip in the sylesheet.css file...
I've used text-aligh: center but it still is aligned left...

Did you put any of the styles from the readme into your stylesheet? If so, you might have carried over a typo in a previous rule from the readme:
#cartCount a {)
instead of the correct
#cartCount a {}

That would invalidate following rules:
#cartTotal {}
#cartFreeShip {
margin: 0 0.3em;
text-align: center;
}