In the template's header section you can add the <style> tag with custom css styles.

CSS

<style type="text/css">
		.item-title-container h1 {
			background-color: #FFEE00;
			border-radius: 6px;
		}
</style>

All custom templates will contain dynamically generated HTML code descibed below (Order may vary based on the layout):

Listing Title

HTML

<div class="item-title-container">
	<h1 class="item-title">Listing title</h1>
</div>

Main Picture

HTML

<div class="item-main-picture-container">
	<img alt="Main Picture" title="Main Picture" src="http://alphalister.com/***/1234567890.jpg" class="item-main-picture">
</div>

Listing Description

HTML

<div class="item-description">
	Item HTML description goes here...
</div>

Listing Picture Gallery

HTML

<div class="item-picture-gallery-container">
	<ul class="item-picture-gallery">
		<li class="item-picture-gallery-item">
			<a title="" href="http://alphalister.com/***/#prettyPhoto/1/" data-original-href="http://alphalister.com/***/1234567890.jpg"><img alt="" src="http://alphalister.com/***/1234567890_thumb.jpg"></a>
		</li>
		<li class="item-picture-gallery-item">
			<a title="" href="http://alphalister.com/***/#prettyPhoto/1/" data-original-href="http://alphalister.com/***/1234567890.jpg"><img alt="" src="http://alphalister.com/***/1234567890_thumb.jpg"></a>
		</li>
		...
	</ul>
</div>

Info Blocks

HTML

<div class="info-block-container">
	<div class="info-block">
		<h4 class="info-block-title">
			<!-- Auto Generated -->
			Info-Block Title 1
		</h4>
		<div class="info-block-content">
			<!-- Auto Generated -->
			Info-Block Description 1
		</div>
	</div>
	<div class="info-block">
		<h4 class="info-block-title">
			<!-- Auto Generated -->
			Info-Block Title 2
		</h4>
		<div class="info-block-content">
			<!-- Auto Generated -->
			Info-Block Description 2
		</div>
	</div>
	...
</div>

Scrolling Gallery

HTML

<div class="scrolling-gallery-container"><!-- Auto Generated --></div>