Shoppingcart/Freeship in Header support

[gjh42]

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.

[lindasdd]

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

[lina0962]

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!

[lina0962]

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? www.best4future.com

Thanks a lot!!!

[gjh42]

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;}

[gjh42]

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;
    }

[lina0962]

[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 (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!!

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

[lina0962]

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!

[gjh42]

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