Shoppingcart/Freeship in Header support

Thank you, the first code snippet works nicely!

Hi Glenn. Nice mod. thanks.

I want to eliminate the "Goto Checkout" button. I tried deleting the last line in tpl_cart_header.php but that just broke from that point on.
Any ideas?

Thanks

If you comment out this part you should be fine:```php
if ($cart_count) {
echo '<div id="cartCheckout"><a href="' . zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '">' . zen_image_button(BUTTON_IMAGE_CHECKOUT, BUTTON_CHECKOUT_ALT) . '</a></div>';
} ?>

//if ($cart_count) { 
//  echo '<div id="cartCheckout"><a href="' . zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '">' . zen_image_button(BUTTON_IMAGE_CHECKOUT, BUTTON_CHECKOUT_ALT) . '</a></div>';
//}  ?>
```

That worked! Thanks

The bottom text needs to be centered, like the top text is.
I can't see how to do that in the css provided.
Any ideas?

Thanks again

Let's see your site to be sure it will work in your particular case.

Thanks Glenn.

Look here: http://www.angiejolee.com/store/

If the bottom message text CAN be centered, how hard would it be to round the corners of the CSS box?

I can make a CSS box with image corners but I dont know how to make the mods contents display in that box.

Thanks again

Drunkguy

Add to your stylesheet

#cartFreeShip {text-align: center;}

#cartHeader {
    border-radius: 0.7em;
    -moz-border-radius: 0.7em;
    -webkit-border-radius: 0.7em;
    }
```The border-radius probably won't work in IE, though.

Thanks Glenn.

That change did NOT center the text at least in FF. Here is how I changed it. Its not exactly what you suggested. It didn't make sense to have 2 #cartFreeShip lines but I tried that anyway.

Before:
#cartFreeShip {
margin: 0 0.3em;
}

After:
#cartFreeShip {
text-align: center;
margin: 0 0.3em;
}

I havn't tried the radius corner thing yet.

Thanks again.

Drunkguy

The rules I posted worked when I tested them (in Firefox). What you posted is the exact same property, consolidated with the existing #cartFreeShip { rule as is good practice.

Hey gjh42,
I've got this setup at the moment as floating box with associated image. take a peek at store

Although it looks neat, I'm worried about it filling the screen and overlapping sideboxes for those whose screens aren't as wide as mine. I'd like it to sit in the header on the same line as my search box, but can't seem to get the CSS to comply.

Any ideas?

Thanks,
lindasdd

A fixed position like that will give problems any time the window gets narrower than a certain (very wide) width. If you want it always in the corner of the window no matter where the user scrolls, you might try the lower right, and restyle it to more of a corner triangle (which I have seen plenty of for security icons). That would be less obtrusive.

If you want it to stay in the header (a better idea, I think), you can give #headerWrapper {position: relative;} so that it acts as the positioning reference for the cart box; then you can use position: absolute; for the box location.

That worked thanks for your help. I just had to also absolute position the search bar in order to get it out of the way.

-lindasdd

I tried to edit the stylesheet code and couldn't get it done. I want to change the font size and color of the freeshipping notice.

I put the code
#cartFreeShip {
margin: 0 0.3em;
font-size: 1.2em;
font-color: #cc0000;
}

It didn;t have any effect on the stylesheet. Any tips??

Thank you!

I put an image cart1.jpg into the h3, and put another image cart2.jpg as the background image of cartcount. The two images, cart1.jpg and cart2.jpg, should form a perfect big button when put together.

But on the site, there is always a gap between cart1 and cart2. I deleted all margins, but the gap is still there. Could you please take a look at my site? https://www.best4future.com

Thanks a lot!!!

You have in stylesheet.css (line 80)

h1, h2, h3, h4, h5, h6 {
margin:0.3em 0;
}

Add a rule for this location:```
#cartFreeShip h3 {margin:0;}

Correction:

Find the rule for this location and add a margin declaration:```
#cartHeader h3 {
height: 55px;
margin: 0;
}

Font-color is not a valid property. Use color instead.```
#cartFreeShip {
    margin: 0 0.3em;
    font-size: 1.2em;
    color: #cc0000;
    }

[QUOTE=gjh42;940597]Correction:

Find the rule for this location and add a margin declaration:```
#cartHeader h3 {
height: 55px;
margin: 0;
}

Hello, gjh42,

Thank you so much for the tips. Now the header button looks great!!

I have another gap issue. I have looked everywhere is CSS to figure it out but failed. Could you please take a look at it?

Close to the bottom of the page (<https://www.best4future.com>), right above the footer menu, I put two long buttons. One is named "Best4Future Newsletter", on the left. The other is named "Best4future Community", on the right. 

The left button is one image. It is fine. The right one ("Best4future Community") is grouped by three smaller images. When you look at it, there is gap between those smaller images. And I don't know how to get rid of those gaps. 

Could you please advise me? Thank you so much!!

This was an odd one. There was no styling whatsoever that would put a space or margin between the links.

I finally found in view source that there is a new line for each link in the HTML output, and that is being translated as a space character. When I edited the HTML in Firebug to remove the newlines, the spaces closed up.

gjh42:

This was an odd one. There was no styling whatsoever that would put a space or margin between the links.

I finally found in view source that there is a new line for each link in the HTML output, and that is being translated as a space character. When I edited the HTML in Firebug to remove the newlines, the spaces closed up.

Hello, gjh42:

Thank you so much for the tip!

But as a outsider in the programming as I am, I don;t know where to edit the HTML output. Which file? in which folder? Could you please give me more details? Thank you so much!

"right above the footer menu, I put two long buttons. "

Whatever file you put those buttons in is the place to edit.
I also notice that your #headerWrapper div encloses your entire page instead of ending before #contentMainWrapper as it should. You need to check your editing in tpl_header.php to find where you eliminated the </div> (probably near the bottom of the file, or maybe at the end of the shoppingcart code).