Minicart Font Size

[lance uppercut]

I'm using Shopsite pro and have a custom template I'm in the process of developing. I've added a line of code to cite the Include file for the minicart, which was pretty much based on the sample provided by SS. My problem is, I can't figure out how to shrink the font size a bit in the minicart. Its basically displaying a +1 or thereabouts. Here's my code in the Include file:

#### Mini Cart Detail Display ####

#### YOU CAN CHANGE THESE VALUES IF NEEDED ####
[-- IF PAGE.LinkColor --]
[-- VAR.MiniCartTextColor "#003366" --]
# [-- VAR.MiniCartBackgroundColor PAGE.BackgroundColor --]
[-- VAR.MiniCartBackgroundColor "#EEEEEE" --]
[-- ELSE --]
[-- VAR.MiniCartTextColor "#003366" --]
# [-- VAR.MiniCartBackgroundColor MORE_INFO.BackgroundColor --]
[-- VAR.MiniCartBackgroundColor "#EEEEEE" --]
[-- END_IF --]
[-- VAR.ShowCart "yes" --]
[-- VAR.MiniCartColor "black" --]
[-- VAR.TextAlign "left" --]

#### DON'T CHANGE ANYTHING BELOW HERE ####

<script language="javascript">
var cookies=document.cookie; //read in all cookies
var start = cookies.indexOf("ss_cart_[-- STORE_Serial_Number --]=");
var cartvalues = "";
var linecount = 0;
var start1;
var end1;
var tmp;

// Start Output
document.write("<div style=\"color: [-- VAR.MiniCartTextColor --];");
document.write("background-color: [-- VAR.MiniCartBackgroundColor --];");
document.write("text-align: [-- VAR.TextAlign --];");
document.write("font-family: Verdana, Arial, Helvetica, sans-serif;");
document.write("font-size: 8pt;");
document.write("\">\n");

document.write("<table>\n");
document.write("<tr>\n");
document.write("<th colspan=\"3\" align=\"center\">");

[-- IF VAR.ShowCart "yes" --]
document.write("<a href=\"[-- SHOPPING_CART_URL --]\"");
document.write("style=\"text-decoration: underline;");
document.write("color: [-- VAR.MiniCartTextColor --];");
document.write("\">");
document.write("<img src=\"[-- OUTPUT_DIRECTORY_URL --]/media/themesmedia/cart-[-- VAR.MiniCartColor --].gif\" border=\"0\" name=\"cart\" align=\"top\">");
document.write("</a> ");
[-- END_IF --]

document.write("<a href=\"[-- SHOPPING_CART_URL --]\"");
document.write("style=\"text-decoration: underline;");
document.write("color: [-- VAR.MiniCartTextColor --];");
document.write("\">");
document.write("[-- STORE.SC_YourShoppingCart --]");
document.write("</a>");

document.write("</th></tr>");

if (start == -1) //No cart cookie
{
document.write("</table>\n");
}
else //cart cookie is present
{
start = cookies.indexOf("=", start) +1;
var end = cookies.indexOf(";", start);

if (end == -1)
{
end = cookies.length;
}

cartvalues = unescape(cookies.substring(start,end)); //read in just the cookie data

start = 0;
while ((start = cartvalues.indexOf("|", start)) != -1)
{
start++;
end = cartvalues.indexOf("|", start);
if (end != -1)
{
linecount++;

if (linecount == 3) // Product Subtotal
{
start1 = start;
end1 = end;
document.write("<tr><td>Qty</td>");
document.write("<td align=\"center\">Product</td>");
document.write("<td align=\"center\">Price</td></tr>\n");
}

if (linecount > 3) // individual products
{
tmp = cartvalues.substring(start,end);
colon = tmp.indexOf(":", 0);
document.write("<tr>");
document.write("<td>");
document.write(tmp.substring(0,colon));
document.write("</td><td>");
colon2 = tmp.indexOf(":", colon+1);
document.write(tmp.substring(colon2+1,end - start));
document.write("</td><td align=\"right\">");
document.write(tmp.substring(colon+1,colon2));
document.write("</td></tr>\n");
}

start = end;
}
else
{
break;
}
} // end while loop

//close minicart HTML
document.write("<tr>");
document.write("<td colspan=\"2\" align=\"right\">Subtotal</td>");
document.write("<td align=\"right\">");
tmp = cartvalues.substring(start1,end1);
colon = tmp.indexOf(":", 0);
document.write(tmp.substring(colon+1,end1 - start1));
document.write("</td>");
document.write("</tr>");
document.write("</table>\n");
}
document.write("</div>\n");
</script>

any insight on this would be appreciated, I'm sure its something obvious that I'm missing. TIA.

[BFChris]

Well, there's a line of code that reads

Code: Select all

document.write("font-size: 8pt;");

in the Start Output section.

I know the comment says not to edit below the line, but I don't think changing the font size to something more to your liking should hurt if you watch your punctuation.

Another thing you possibly do is take the whole first section of that "Start Output" code:

Code: Select all

document.write("<div style=\"color: [-- VAR.MiniCartTextColor --];");
document.write("background-color: [-- VAR.MiniCartBackgroundColor --];");
document.write("text-align: [-- VAR.TextAlign --];");
document.write("font-family: Verdana, Arial, Helvetica, sans-serif;");
document.write("font-size: 8pt;");
document.write("\">\n");

and replace it with:

Code: Select all

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

That would strip out all the formatting being applied by the "style" attribute on the DIV tag and allow you to format as desired using an external CSS style called "minicart."

NOTE: I haven't implemented this, but it should work OK in theory.....

~~Barefoot Chris
--------------------------------
Barefoot Chris Web Designs
www.barefootchris.net
--------------------------------

[lance uppercut]

Thanks, Chris. I had already tried the first option, changing that 8pt to 6pt, even to 1. I regenerated everything, and even confirmed in the source code itself that the change had been applied, but the text size itself was unchanged. Seems this should be a fairly easy configuration change to make, I must be missing something.

Regarding option #2, I'll look into that, thanks.

[BFChris]

Do you have an external style sheet applied to the page that may be applying formatting to the element tags within the mini cart code (such as the table, tr, or td tags) and overriding the style on the div?

~~Barefoot Chris

[lance uppercut]

yes. within my page template, I'm using a .css that is applying formatting rules for a js menu from the dynamic drive website (slashdot menu).

as an update, I tried to follow the instructions as given on the http://www.shopsite.com/help/8.1/en-US/ ... lude2.html help page, by copying sample include files and inserting them into my page template.

when I regenerated, all of my .css code from the minicart include was displayed at the top of the screen (which is odd given that the include was cited in the head section of the page template). I am assuming that there's some sort of conflict between the slashdot menu.css and my minicart.css files (can you even have two style sheets cited in the same head section?).

my next attempt is going to be to try and cobble together the two style sheets into a single document. but for now the minicart frustration continues!

[lance uppercut]

Another thing you possibly do is take the whole first section of that "Start Output" code:

Code: Select all

document.write("<div style="color: [-- VAR.MiniCartTextColor --];");
document.write("background-color: [-- VAR.MiniCartBackgroundColor --];");
document.write("text-align: [-- VAR.TextAlign --];");
document.write("font-family: Verdana, Arial, Helvetica, sans-serif;");
document.write("font-size: 8pt;");
document.write("">\n");

and replace it with:

Code: Select all

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

That would strip out all the formatting being applied by the "style" attribute on the DIV tag and allow you to format as desired using an external CSS style called "minicart."

NOTE: I haven't implemented this, but it should work OK in theory.....

--------------------------------

Chris, et al,

I tried this quoted option above, and it appears to have worked. I currently have that line pointing to my sdmenu.css file, which I had pasted the minicart.css content into previously.

that minicart css code had been based off the include template found in the back office. what I haven't yet determined is what should be added in there to specify a background color of #eeeeee; also, though the css specifies a verdana font face, my output is generating times new roman; not sure why that would be.

any input would be appreciated.

[BFChris]

This has to be caused by conflicting style assignments in your style sheets. I can't imagine anything else.

However, there is no problem with having multiple stylesheets applied to one document (I've seen it done often for a variety of good reasons), as long as the styles in them don't conflict.

Can I see your CSS files? Where do you want the background-color to be?

~~Barefoot Chris
-----------------------------------
Barefoot Chris Web Design
www.barefootchris.net
-----------------------------------