CSS Tricks

Here are some Cascading Style Sheet tricks that can be used to good effect in the MonsterCommerce software. You don't have to be familiar with CSS or HTML in order to use all of these, but it will help.

Border Around Product Thumbnails

Some clients have requested the ability to put small grey boxes around each product thumbnail. Whereas there is no setting that can do this in the admin panel (yet), if you add the following lines of code to your 'custom.css' file from the file manager -

/* Border around product thumbnails */
table.prodvieweven td {border-color: grey; border-style: solid;border-width: 1px;}
table.prodviewodd td {border-color: grey; border-style: solid;border-width: 1px;}
- OR add the following to Site HTML > Top of Page HTML Editor -
<!-- Border around product thumbnails -->
<style type="text/css">
table.prodvieweven td {border-color: grey; border-style: solid;border-width: 1px;}
table.prodviewodd td {border-color: grey; border-style: solid;border-width: 1px;}
</style>
- then this will add a solid grey border around each product thumbnail on a category or search page. If you want, you can alternate colors OR leave off one of the lines to have the borders alternate.

Horizontal Category List

This one is an interesting trick which requires the use of CSS and MonsterCommerce proprietary function calls. Some clients have asked for a way to take the Main Category list Horizontal as opposed to Vertical. This is difficult to do without manually coding it, since the cart generates each category in it's own HTML 'paragraph' tag (<p>), which usually adds a new line after each paragraph. However, if you use the following code, with display: inline; applied, then these do not wrap to the new line. If you were to put the following into your top of page or bottom of page editors, then this will put the full list of main categories in a Horizontal list across the full width of the table, at which point it will wrap to another line if you have that many. Add the following to your 'custom.css' file -
/* Horizontal Category List */
#horiz p {display: inline; padding-right: 15px;}
- or add this to your Site HTML > Top of Page Editor -
<!-- Horizontal Category List -->
<style type="text/css">
#horiz p {display: inline; padding-right: 15px;}
</style>
- and then add this code at some point BELOW it -
<table id="horiz">
<tr>
<td><%DRAWCATEGORIES%></td>
</tr>
</table>
- you will have Horizontal category lists! Feel free to adjust the amount of padding-right: as you see fit.

Arrows in front of Categories

The category list does not have little arrows or widgets in front of each category name and this has led some clients to manually add this character to each category name or use other tricks to get it into place, but the following use of CSS and MC function calls will accomplish it much faster. Add the following to your 'custom.css' file -
/* Arrows in front of Categories */
#arrows p {
padding-left: 11px;
background-image: url(images/arrow.gif);
background-repeat: no-repeat;
background-position: center left;
}
- or add this to your Site HTML > Top of Page Editor, as usual -
<!-- Arrows in front of Categories -->
<style type="text/css">
#arrows p {
padding-left: 11px;
background-image: url(images/arrow.gif);
background-repeat: no-repeat;
background-position: center left;
}
</style>
- and then add this where you want your category list to appear -
<table id="arrows">
<tr>
<td><%DRAWCATEGORIES%></td>
</tr>
</table>
- and you will see the small arrows that are already included in your /images folder centered to the left of each category name. Feel free to modify the style information to a different image. If you use a different size image (the provided one is 11 x 9) you may also want to adjust the padding-left: to make more space if it is larger.

Fair warning should go out at this point to everyone that some browsers interpret different CSS rules and applications in different ways, but this is always true even with straight HTML, so feel free to try these out in a custom page and then see how you might want to use them in your site. I hope this helps!