formatting minicart

[rlw]

I am using the minicart that lists all items in the cart. Everything works fine but I am trying to format it so that it matches my site design better. I have tried adjusting the font size a bunch of ways (including changing the font size at the top of the code) without luck. I'm sure this is easy but I am not an html or javascript coder so am not having any luck. Please help.

[ShopSite Lauren]

The best way to do this is with CSS. Something similar to:

<style type="text/css">
div.MiniCart, div.MiniCart td, div.MiniCart a {
font-size: 12px;
font-family: arial;
}
</style>

[rlw]

thanks Lauren. unfortunately this is a bit cryptic for me given my lack of experience. Can you put this in context with the actual minicart code? or direct me to an example?

[ShopSite Lauren]

You would include that anywhere on the page. So if you are using ShopSite to build your pages, you can paste that code into the header field under Preferences > Layout Settings (or Page Header/Footer). If you are building your pages outside of ShopSite, then you will just want to copy and paste that code somewhere on your pages. You can include it before of after your mini cart code so that it is close to the mini cart.

[rlw]

Lauren,
I pasted into header of minicart html but nothing changed. Pasted into header of page html, same result. I'm guessing that the formatting code defines format for an object called minicart. In the minicart code, I cannot see anything that names the object - am I missing something.

Here are the steps I have taken
- pasted minicart code that I found in the shopsite help (the one that lists all items in cart) into my site html
- calling minicart within an iframe for display on site pages
- pasted the formatting code you gave me

So I am using pretty much vanilla code.

[BFChris]

If the minicart has hard-coded font tags in the code, I don't think the CSS styles will override them, as the font tags in the page code are placed closer to the content.

[rlw]

this seems to be the formatting code in the minicart...which is placed just above the section where the minicart table writing is taking place. I've changed the font-size here without effect. The code mentioned by Lauren was placed just above this. Seems to be many ways to format but I haven't found anything that actually effects the output. Would the iframe have anything to do with it?

document.write("<div style=\"color:" + textColor + ";");
document.write("background-color:" + backgroundColor + ";");
document.write("text-align:" + textAlign + ";");
document.write("font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;");
document.write("font-size: 8pt;");
document.write("position:absolute;left:0px;top:0px;");
document.write("\">\n");

[rlw]

just noticed that I managed to get the font to change, but not the font size

[ShopSite Lauren]

Can you provide the URL to the page that you are working on with the minicart?

For the section of code that you provided in the post above, that code will most likely not affect the mini cart table. That code is used for content in the div, but since inside that div is a table, that code does not necessarily affect the code inside the table. You should be able to remove the following lines, because they are most likely not affecting the table content at all.

document.write("text-align:" + textAlign + ";");
document.write("font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;");
document.write("font-size: 8pt;");

The best way to modify the look of the mini cart is with CSS. I use the same mini cart code in all templates that I create, and I simply use CSS to modify the look and feel of the cells. The mini cart code I supplied earlier was with the assumption that the div had the class MiniCart assigned to it, which many of the built in templates in ShopSite have. But I just looked at the code in the ShopSite Custom Template Cookbook for adding the mini cart to your non-ShopSite generated pages and that div does not have the class MiniCart assigned. So I would suggest adding the MIniCart class to that code. Then the CSS that I gave you will affect the code inside the cells. So in your JavaScript for the mini cart, the code should look like:

document.write("<div class=\"MiniCart\">\n");

Then the CSS that you place before or after the minicart should look like:

<style type="text/css">
div.MiniCart, div.MiniCart td{
font-size: 8pt;
font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
}
</style>