Adding basic CSS styles to the recommendation template
Styling the recommendations is generally quite straightforward. Just add a style block to the template and use CSS to style the recommendation elements as you would style any HTML content.
<style type="text/css">
.nosto-recommendation {
font-size:12px;
color:#333;
width:100%;
margin-bottom:10px;
}
.nosto-header {
font-size:14px;
font-weight:bold;
}
.nosto-product-list {
list-style:none;
margin:0;
padding:0;
}
.nosto-product-list-item {
float:left;
width:100px;
margin-right:10px;
}
.nosto-product-image {
display:block;
margin-bottom:5px;
}
.nosto-product-name {
font-weight:bold;
text-decoration:none;
}
</style>
<div class="nosto-recommendation">
<div class="nosto-header">$!title</div>
<ul class="nosto-product-list">
#foreach($product in $products)
<li class="nosto-product-list-item">
<a class="nosto-product-image" href="!$product.url">
<img src="$product.thumb(2)" alt="">
</a>
<div class="nosto-product-info">
<a class="nosto-product-name" href="$!product.url">$!product.name</a>
<div class="nosto-product-description">$!product.description</div>
<div class="nosto-product-price">$!product.price</div>
</div>
</li>
#end
</ul>
</div>
Encapsulating the styles
While the basic styling of the recommendations works great, it can be problematic if there are multiple recommendation elements on the same page. If styles from different recommendations share same classnames, the last element on the page will override the styles of the previous recommendations.
You can use the $divId variable to print out the current slot name in the template. Using the variable you can form CSS selectors that start with the ID of the slot, which limits the scope of the CSS to only the current recommendation element. You can also target styles to the recommendation slot directly by using the ID selector.
<style type="text/css">
#$divId {
margin-bottom:10px;
}
#$divId .nosto-recommendation {
font-size:12px;
color:#333;
width:100%;
}
#$divId .nosto-header {
font-size:14px;
font-weight:bold;
}
#$divId .nosto-product-list {
list-style:none;
margin:0;
padding:0;
}
#$divId .nosto-product-list-item {
float:left;
width:100px;
margin-right:10px;
}
#$divId .nosto-product-image {
display:block;
margin-bottom:5px;
}
#$divId .nosto-product-name {
font-weight:bold;
text-decoration:none;
}
</style>
<div class="nosto-recommendation">
<div class="nosto-header">$!title</div>
<ul class="nosto-product-list">
#foreach($product in $products)
<li class="nosto-product-list-item">
<a class="nosto-product-image" href="!$product.url">
<img src="$product.thumb(2)" alt="">
</a>
<div class="nosto-product-info">
<a class="nosto-product-name" href="$!product.url">$!product.name</a>
<div class="nosto-product-description">$!product.description</div>
<div class="nosto-product-price">$!product.price</div>
</div>
</li>
#end
</ul>
</div>