Несколько дополнительных вариантов стиля для миниатюр шаблонов на пресете

Marina Black -

Если для вывода шаблонов вы используете пресет, то вы знаете, что стиль миниатюр шаблонов на пресете добавляется/редактируется в Layout Settings партнерского аккаунта. Для отображения нужного стиля миниатюр в Layout Settings достаточно просто выбрать один из готовых стилей, также можно редактировать готовый стиль или добавить свой адаптированный (css и html) на основе готового в 'Skin CSS code' и 'Skin HTML code'.

Если вы не можете написать свой css и html код, но хотели бы использовать стиль миниатюр, отличный от предлагаемых готовых стилей, то у нас есть 4 новых варианта адаптированных стилей для миниатюр шаблонов на пресетах. Они тоже добавляются в Layout Settings

Для использования этих дополнительных вариантов кодов нужно просто загрузить один из вариантов стиля, прикрепленный к данной статье и  скопировать адаптированные css и html в окна 'Skin CSS code' и 'Skin HTML code' секции Layout Settings. Можно просто скопировать css и html прямо из текста этой статьи. Архивы, прикрепленные к данной статье, также содержат полноразмерные изображения стиля миниатюр после добавления css и html в  Layout Settings

Два варианта стиля выводят миниатюры большего размера (даже большего, чем на TemplateMonster) и два - меньшего.

Предлагаем вам попровать использовать и улучшить стиль миниатюр, просто добавив фрагменты css и html кода в Layout Settings:

 

 

1. Стиль миниатюр 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. Стиль миниатюр 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. Стиль миниатюр 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. Стиль миниатюр 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>

 

Если у вас возникли еще вопросы, пожалуйста, обратитесь в нашу службу поддержки.

 

 

 

 

Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 0 из 0
Еще есть вопросы? Отправить запрос

Комментарии

На базе технологии Zendesk