A Few Custom CSS Codes for Preset Thumbnails

Marina Black -

If you're using a preset for templates display you know there's an option to add own custom css and html for the thumbnails in the affiliate area Layout Settings. This is an easy-to-use option where you just write your custom css and/or html into the 'Skin CSS code' and 'Skin HTML code' boxes and click 'Submit'.

If you're not as tech savvy as to write own css and html codes we've got ready 4 custom skin styles you can submit in Layout Settings.
To use them you just need to download the attached archive, choose one of the custom styles and and copy the chosen custom style css and html into the boxes in Layout Settings. The archives also contain the styles full-size screenshots.

Two of the styles are large (even larger than on the new TM) and two are smaller.

Please, try and see how easy it is to improve the thumbnails style by just adding 2 snippets of code to 'css' and 'html' boxes in Layout Settings

 

1. Thumbnails Style 1

 

css:

body {

background-color:#FFFFFF;
margin:0px;
font-family:Tahoma,Verdana,sans-serif;
font-size:11px;
width:100%;
}
td {
color:#000000;
font-family:Tahoma,Verdana,sans-serif;
font-size:11px
}
.link {
color:#000000;
}
.current {
color:#818181;font-weight:bold
}
a.price, a.details{
cursor: pointer;
color: black;
}
a.price {float:left;}
a.details{float:right;}

.counter_container
{
position: absolute;
top: 1px;
left: 1px;
visibility: hidden;
}
.counter{
width:1px;
height:1px;
border:none;
}

#interface1 {
display:inline;
visibility:visible;
}

#top-pager {
width:100%;
text-align:right;
}

#bottom-pager {
clear:both;
float:left;
width:100%;
}

#prev_page_link {
float:left;
text-align:left;
}

#next_page_link {
float:right;
text-align:right;
}

.template_container{
width: 370px;
height: auto;
margin: 0px 20px 50px 20px;
}

.template_container hr{
border-top: 1px solid #b3b3b3;
border-bottom: none;
border-left: none;
border-right: none;
clear: both;
}

.screenshot_container{
width: 100%;
background: none;
text-align: left;
height: 370px;
}

.screenshot_container img{
width: 100%;
border: 1px solid #b9b9b9;
}

.screenshot_container img:hover{
cursor: pointer;
}

.short_description{
text-align: left;
margin-top: 18px;
height: 61px;
}

.short_description .template_type_number{
font-size: 18px;
font-family: Arial, sans-serif;
color: #19b4e6;
font-weight: normal;
display: block;
}

.short_description .template_price{
font-size: 18px;
font-family: Arial, sans-serif;
color: #3c3c3c;
font-weight: normal;
display: block;
}

.short_description .template_price .new_price{
font-weight: normal;
}

.short_description .template_price .old_price{
color: #929292;
font-size: 16px;
font-weight: normal;
text-decoration: line-through;
}

.details_container{
background-image: none;
width: 100%;
float: left;
margin-bottom: 34px;
}

.details_container a{
cursor: pointer;
color: #fff;
font-size: 18px;
text-decoration: none;
font-family: Arial,sans-serif;
padding: 10px 0px;
width: 48%;
background-color: #aaaaaa;
text-align: center;
}

.details_container a:hover{
background-color: #8a8a8a;
}

.details_container a.details{
margin-right: 5px;
float: left;
}

.details_container a.price{
margin-left: 5px;
float: right;
background-color: #e64a19;
}

.details_container a.price:hover{
background-color: #cb4015;
}

 

html:

<div class="template_container">
<div class="screenshot_container">
<img class="template_screenshot" src="{%URL_TO_IMG_MED}"
onclick="javascript:window.open(\'{%URL_TO_PREVIEW}\',\'preview{%TEMPLATE_NUMBER}\',\'resizable=yes, location=no, menubar=no, status=no,scrollbars=yes,width={%_PREVIEW_WIDTH},height={%_PREVIEW_HEIGHTS}\')" alt="{%_PREVIEW_ALT}" />
</div>
<div class="short_description">
<span class="template_type_number">{%TYPE}&nbsp;#{%TEMPLATE_NUMBER}</span>
<span class="template_price">{%CHAR_CURRENCY}{%PRICE}</span>
</div>
<div class="details_container">
<a href="{%URL_TO_PREVIEW}" class="details" target="_blank">View Details</a>
<a href="{%URL_TO_BUY}" target="_blank" class="price">Buy</a>
</div>
<hr/>
<div class="template_container_bottom"></div>
</div>

 

2. Thumbnails Style 2. 

 

css:

 

body {
background-color:#FFFFFF;
margin:0px;
font-family:Tahoma,Verdana,sans-serif;
font-size:11px;
width:100%;
}
td {
color:#000000;
font-family:Tahoma,Verdana,sans-serif;
font-size:11px
}
.link {
color:#000000;
}
.current {
color:#818181;font-weight:bold
}
a.price, a.details{
cursor: pointer;
color: black;
}
a.price {float:left;}
a.details{float:right;}

.counter_container
{
position: absolute;
top: 1px;
left: 1px;
visibility: hidden;
}
.counter
{
width:1px;
height:1px;
border:none;
}

#interface1 {
display:inline;
visibility:visible;
}

#top-pager {
width:100%;
text-align:right;
}

#bottom-pager {
clear:both;
float:left;
width:100%;
}

#prev_page_link {
float:left;
text-align:left;
}

#next_page_link {
float:right;
text-align:right;
}

.template_container{
width: 370px;
height: auto;
margin: 0px 20px 50px 20px;
}

.template_container hr{
margin-top: 16px;
border-top: 1px solid #b3b3b3;
border-left: none;
border-right: none;
border-bottom: none;
}

.screenshot_container{
width: 100%;
background: none;
text-align: left;
height: 370px;
}

.screenshot_container img{
width: 100%;
border: 1px solid #b9b9b9;
}

.screenshot_container img:hover{
cursor: pointer;
}

.short_description .template_price{
font-size: 18px;
font-family: Arial, sans-serif;
color: #3c3c3c;
font-weight: normal;
display: block;
}

.details_container{
background-image: none;
padding-top: 16px;
width: 100%;
padding-bottom: 16px;
float: left;
}

.details_container a{
cursor: pointer;
color: #fff;
font-size: 18px;
text-decoration: none;
font-family: Arial,sans-serif;
padding: 10px 0px;
width: 48%;
background-color: #aaaaaa;
text-align: center;
}
.details_container a:hover{
background-color: #8a8a8a;
}

.details_container a.details{
margin-right: 5px;
float: left;
}

.details_container a.price{
margin-left: 5px;
float: right;
background-color: #e64a19;
}

.details_container a.price:hover{
background-color: #cb4015;
}

.long_description span{
display: block;
color: #929292;
font-size: 14px;
line-height: 18px;
font-family: Arial, sans-serif;
}

.long_description span.template_type span.type_highlight{
color: #494949;
display: inline-block;
}

.price_summary{
padding-top: 0;
}

.price_summary span{
display: block;
color: #929292;
font-size: 18px;
font-family: Arial, sans-serif;
}

.price_summary span .amount {
color: #494949;
font-size: 18px;
font-weight: normal;
display: inline-block;
}

.price_summary span .amount .new_price{
font-weight: normal;
}

.price_summary span .amount .old_price{
color: #929292;
font-size: 16px;
font-weight: normal;
text-decoration: line-through;
}

 

html:

<div class="template_container">
<div class="screenshot_container">
<img class="template_screenshot" src="{%URL_TO_IMG_MED}"
onclick="javascript:window.open(\'{%URL_TO_PREVIEW}\',\'preview{%TEMPLATE_NUMBER}\',\'resizable=yes, location=no, menubar=no, status=no,scrollbars=yes,width={%_PREVIEW_WIDTH},height={%_PREVIEW_HEIGHTS}\')" alt="{%_PREVIEW_ALT}" />
</div>
<div class="details_container">
<a href="{%URL_TO_PREVIEW}" class="details" target="_blank">View Details</a>
<a href="{%URL_TO_BUY}" target="_blank" class="price">Buy</a>
</div>
<div class="long_description">
<span class="template_type">Type:&nbsp;<span class="type_highlight">{%TYPE}</span></span>
<span class="template_number">Item:&nbsp;#{%TEMPLATE_NUMBER}</span>
<span class="template_author">Author:&nbsp;{%AUTHOR}</span>
<span class="template_downloads">Downloads:&nbsp;{%DOWNLOADS}</span>
</div>
<hr/>
<div class="price_summary">
<span class="template_price">Price:&nbsp;<span class="amount">{%CHAR_CURRENCY}{%PRICE}</span></span>
<span class="template_buyout">Buyout Price:&nbsp;<span class="amount">{%CHAR_CURRENCY}{%PRICE_EXCLUSIVE}</span></span>
</div>
<div class="template_container_bottom"></div>
</div>

 

3. Thumbnails Style 3. 

 

css:

body {
background-color:#FFFFFF;
margin:0px;
font-family:Tahoma,Verdana,sans-serif;
font-size:11px;
width:100%;
}
td {
color:#000000;
font-family:Tahoma,Verdana,sans-serif;
font-size:11px
}
.link {
color:#000000;
}
.current {
color:#818181;font-weight:bold
}
a.price, a.details{
cursor: pointer;
color: black;
}
a.price {float:left;}
a.details{float:right;}

.counter_container
{
position: absolute;
top: 1px;
left: 1px;
visibility: hidden;
}
.counter
{
width:1px;
height:1px;
border:none;
}

#interface1 {
display:inline;
visibility:visible;
}

#top-pager {
width:100%;
text-align:right;
}

#bottom-pager {
clear:both;
float:left;
width:100%;
}

#prev_page_link {
float:left;
text-align:left;
}

#next_page_link {
float:right;
text-align:right;
}

.template_container{
width: 156px;
height: 240px;
padding: 5px 7px 5px 5px;
border: 1px solid #b9b9b9;
margin: 0 10px 30px 10px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}

.screenshot_container{
width: 100%;
height: 165px;
background: none;
text-align: left;
}

.screenshot_container img{
width: 100%;
border: 1px solid #3c3c3c;
}

.screenshot_container img:hover{
cursor: pointer;
}

.short_description {
display: block;
height: 55px;
padding-bottom: 3px;
}

.short_description a.template_type_number_link{
display: block;
font-size: 12px;
color: #19b4e6;
font-weight: normal;
text-decoration: underline;
padding-bottom: 8px;
}

.short_description a.template_type_number_link:hover{
text-decoration: none;
}


.short_description .template_price{
font-size: 18px;
font-family: Arial, sans-serif;
color: #3c3c3c;
font-weight: normal;
display: block;
}

.short_description .template_price .new_price{
font-weight: normal;
}
.short_description .template_price .old_price{
color: #929292;
font-size: 16px;
font-weight: normal;
text-decoration: line-through;
}

 

html:

 

<div class="template_container">
<div class="screenshot_container">
<img class="template_screenshot" src="{%URL_TO_IMG}"
onclick="javascript:window.open(\'{%URL_TO_PREVIEW}\',\'preview{%TEMPLATE_NUMBER}\',\'resizable=yes, location=no, menubar=no, status=no,scrollbars=yes,width={%_PREVIEW_WIDTH},height={%_PREVIEW_HEIGHTS}\')" alt="{%_PREVIEW_ALT}" />
</div>
<div class="short_description">
<a class="template_type_number_link" href="">{%TYPE}&nbsp;#{%TEMPLATE_NUMBER}</a>
<span class="template_price">{%CHAR_CURRENCY}{%PRICE}</span>
</div>
<div class="template_container_bottom"></div>
</div>

 

4. Thumbnails Style 4.

css:

 

body {
background-color:#FFFFFF;
margin:0px;
font-family:Tahoma,Verdana,sans-serif;
font-size:11px;
width:100%;
}
td {
color:#000000;
font-family:Tahoma,Verdana,sans-serif;
font-size:11px
}
.link {
color:#000000;
}
.current {
color:#818181;font-weight:bold
}
a.price, a.details{
cursor: pointer;
color: black;
}
a.price {float:left;}
a.details{float:right;}

.counter_container
{
position: absolute;
top: 1px;
left: 1px;
visibility: hidden;
}
.counter
{
width:1px;
height:1px;
border:none;
}

#templates_list_container{
width: 100%;
height: 90%;
}

#interface1 {
display:inline;
visibility:visible;
}

#top-pager {
width:100%;
text-align:right;
}

#bottom-pager {
clear:both;
float:left;
width:100%;
}

#prev_page_link {
float:left;
text-align:left;
}

#next_page_link {
float:right;
text-align:right;
}

.template_container{
width: 156px;
height: 345px;
padding: 5px 7px 0px 5px;
border: 1px solid #b9b9b9;
margin: 0 10px 30px 10px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}


.screenshot_container{
width: 100%;
height: 170px;
background: none;
text-align: left;
}

.screenshot_container img{
width: 100%;
border: 1px solid #3c3c3c;
}

.screenshot_container img:hover{
cursor: pointer;
}

.short_description .template_price{
font-size: 18px;
font-family: Arial, sans-serif;
color: #3c3c3c;
font-weight: normal;
display: block;
}

.details_container{
background-image: none;
display: inline-block;
padding-bottom: 16px;
width: 100%;
}

.details_container a{
cursor: pointer;
color: #19b4e6;
font-size: 12px;
text-decoration: underline;
font-family: Arial,sans-serif;
display: inline-block;
line-height: 14px;
}

.details_container a:hover{
text-decoration: none;
}

.details_container a.details{
padding-right: 11px;
border-right: 1px solid #c0c0c0;
float: left;
}

.details_container a.price{
margin-left: 11px;
}

.long_description span{
display: block;
color: #929292;
font-size: 12px;
line-height: 16px;
font-family: Arial, sans-serif;
}

.long_description span.template_type span.type_highlight{
color: #494949;
display: inline;
}

.price_summary{
padding-top: 16px;
}

.price_summary span{
display: block;
color: #929292;
font-size: 12px;
font-family: Arial, sans-serif;
}

.price_summary span .amount {
color: #494949;
font-size: 12px;
font-weight: normal;
display: inline-block;
}

.price_summary span .amount .new_price{
font-weight: normal;
}

.price_summary span .amount .old_price{
color: #929292;
font-size: 12px;
font-weight: normal;
text-decoration: line-through;
}

 

html:

 

<div class="template_container">
<div class="screenshot_container">
<img class="template_screenshot" src="{%URL_TO_IMG}"
onclick="javascript:window.open(\'{%URL_TO_PREVIEW}\',\'preview{%TEMPLATE_NUMBER}\',\'resizable=yes, location=no, menubar=no, status=no,scrollbars=yes,width={%_PREVIEW_WIDTH},height={%_PREVIEW_HEIGHTS}\')" alt="{%_PREVIEW_ALT}" />
</div>
<div class="details_container">
<a href="{%URL_TO_PREVIEW}" class="details" target="_blank">View Details</a>
<a href="{%URL_TO_BUY}" target="_blank" class="price">Buy Now</a>
</div>
<div class="long_description">
<span class="template_type">Type:&nbsp;<span class="type_highlight">{%TYPE}</span></span>
<span class="template_number">Item:&nbsp;#{%TEMPLATE_NUMBER}</span>
<span class="template_author">Author:&nbsp;{%AUTHOR}</span>
<span class="template_downloads">Downloads:&nbsp;{%DOWNLOADS}</span>
</div>
<div class="price_summary">
<span class="template_price">Price:&nbsp;<span class="amount">{%CHAR_CURRENCY}{%PRICE}</span></span>
<span class="template_buyout">Buyout Price:&nbsp;<span class="amount">{%CHAR_CURRENCY}{%PRICE_EXCLUSIVE}</span></span>
</div>
<div class="template_container_bottom"></div>
</div>

 

 

If you have affiliate questions or issues feel free to contact our affiliate support by submitting a ticket request

 

 

Have more questions? Submit a request

Comments

Powered by Zendesk