Сообщений в теме: 32

[kaisyRUS]

Mikola (17 Февраль 2013 - 16:50) писал:

ок....
вы побывали советовать
данного сообщения http://forum.storela...ной/#entry37256

Да, пробывал. Там ячейки без заголовка и картинки слева по середине

[support 2.0]

kaisyRUS (18 Февраль 2013 - 06:06) писал:

Да, пробывал. Там ячейки без заголовка и картинки слева по середине

вот этот код для вставки на страницу, где Вы хотите поместить эти блоки

<div id="top-promo">
					 <div class="prod-details-prom-1">
<div class="pdp-1">
<div class="top-promo-title">Заголовок 1</div>
<div class="top-promo-desc">основной текст</div>
<div class="top-promo-slogan">текст под основным текстом<br>. . .</div>
</div>
</div>
<div class="prod-details-prom-2">
<div class="pdp-2">
<div class="top-promo-title">Заголовок 2</div>
<div class="top-promo-desc"> основной текст <br> продолжение текста<br> и т.д. </div>
<div class="top-promo-slogan">текст под основным текстом</div>
</div>
</div>
<div class="prod-details-prom-3">
<div class="pdp-3">
<div class="top-promo-title">Заголовок 3</div>
<div class="top-promo-desc">основной текст <br>продолжение текста<br> и т.д. </div>
<div class="top-promo-slogan">текст под основным текстом</div>
</div>
</div>
				 </div>

вот этот код вставьте в файл main.css

/*--3 блока---*/
#top-promo{border:none;margin-bottom:20px;padding:0;overflow:hidden}
.prod-details-prom-1,.prod-details-prom-2,.prod-details-prom-3{width:33.3%;float:left;margin:0;padding:0;text-align:center}
.prod-details-prom-1 .pdp-1{background:#fff url('ссылка на первую картинку') 131px 56px no-repeat;border-radius:5px;border:1px solid #d2d2d4;border-bottom-color:#a2a2a4;box-shadow:inset 0 0 0 1px rgba(255,255,255,1.0),0 1px 0 rgba(0,0,2,0.05);padding:5px;margin:0 5px;font-size:12px;line-height:150%;height:130px}
.prod-details-prom-1 .pdp-1 .top-promo-title{font-family:'Open Sans',sans-serif;font-size:19px!important;color:#134679;text-transform:uppercase;font-weight:600;margin:6px 0 15px 0}
.prod-details-prom-1 .pdp-1 .top-promo-desc{text-align:left}
.prod-details-prom-1 .pdp-1 .top-promo-slogan{text-align:left;font-family:'Open Sans',sans-serif;font-size:13px!important;color:#134679;text-transform:uppercase;font-weight:600;margin-top:15px}
.prod-details-prom-2 .pdp-2{background:#fff url('ссылка на вторую картинку') 131px -83px no-repeat;border-radius:5px;border:1px solid #d2d2d4;border-bottom-color:#a2a2a4;box-shadow:inset 0 0 0 1px rgba(255,255,255,1.0),0 1px 0 rgba(0,0,2,0.05);padding:5px;margin:0 5px;font-size:12px;line-height:150%;height:130px}
.prod-details-prom-2 .pdp-2 .top-promo-title{font-family:'Open Sans',sans-serif;font-size:17px!important;color:#92035e;text-transform:uppercase;font-weight:600;margin:6px 0 10px 0}
.prod-details-prom-2 .pdp-2 .top-promo-desc{text-align:left}
.prod-details-prom-2 .pdp-2 .top-promo-slogan{text-align:left;font-family:'Open Sans',sans-serif;font-size:11px!important;color:#92035e;text-transform:uppercase;font-weight:600;margin-top:5px}
.prod-details-prom-3 .pdp-3{background:#fff url('ссылка на третью картинку') 138px -222px no-repeat;border-radius:5px;border:1px solid #d2d2d4;border-bottom-color:#a2a2a4;box-shadow:inset 0 0 0 1px rgba(255,255,255,1.0),0 1px 0 rgba(0,0,2,0.05);padding:5px;margin:0 5px;font-size:12px;line-height:150%;height:130px}
.prod-details-prom-3 .pdp-3 .top-promo-title{font-family:'Open Sans',sans-serif;font-size:20px!important;color:#6f9b06;text-transform:uppercase;font-weight:600;margin:6px 0 10px 0}
.prod-details-prom-3 .pdp-3 .top-promo-desc{text-align:left}
.prod-details-prom-3 .pdp-3 .top-promo-slogan{text-align:left;font-family:'Open Sans',sans-serif;font-size:12px!important;color:#6f9b06;text-transform:uppercase;font-weight:600;margin-top:5px}

вместо ссылка на первую картинку, ссылка на вторую картинку, ссылка на третью картинку вставьте ссылки на изображения для 1, 2 и 3 блока соответственно. Здесь они должны быть примерно 90х90 пикселей. Вы можете создать изображение, где эти 3 картинки будут идти друг за другом и далее указать ссылку на изображение везде одинаковую, а потом уже регулировать высоту изображений, например, как это сделано здесь

url('ссылка на первую картинку') 131px 56px
url('ссылка на вторую картинку') 131px -83px
url('ссылка на третью картинку') 138px -222px

[kaisyRUS]

support 2.0 (18 Февраль 2013 - 18:05) писал:

вот этот код для вставки на страницу, где Вы хотите поместить эти блоки

<div id="top-promo">
					 <div class="prod-details-prom-1">
<div class="pdp-1">
<div class="top-promo-title">Заголовок 1</div>
<div class="top-promo-desc">основной текст</div>
<div class="top-promo-slogan">текст под основным текстом<br>. . .</div>
</div>
</div>
<div class="prod-details-prom-2">
<div class="pdp-2">
<div class="top-promo-title">Заголовок 2</div>
<div class="top-promo-desc"> основной текст <br> продолжение текста<br> и т.д. </div>
<div class="top-promo-slogan">текст под основным текстом</div>
</div>
</div>
<div class="prod-details-prom-3">
<div class="pdp-3">
<div class="top-promo-title">Заголовок 3</div>
<div class="top-promo-desc">основной текст <br>продолжение текста<br> и т.д. </div>
<div class="top-promo-slogan">текст под основным текстом</div>
</div>
</div>
				 </div>

вот этот код вставьте в файл main.css

/*--3 блока---*/
#top-promo{border:none;margin-bottom:20px;padding:0;overflow:hidden}
.prod-details-prom-1,.prod-details-prom-2,.prod-details-prom-3{width:33.3%;float:left;margin:0;padding:0;text-align:center}
.prod-details-prom-1 .pdp-1{background:#fff url('ссылка на первую картинку') 131px 56px no-repeat;border-radius:5px;border:1px solid #d2d2d4;border-bottom-color:#a2a2a4;box-shadow:inset 0 0 0 1px rgba(255,255,255,1.0),0 1px 0 rgba(0,0,2,0.05);padding:5px;margin:0 5px;font-size:12px;line-height:150%;height:130px}
.prod-details-prom-1 .pdp-1 .top-promo-title{font-family:'Open Sans',sans-serif;font-size:19px!important;color:#134679;text-transform:uppercase;font-weight:600;margin:6px 0 15px 0}
.prod-details-prom-1 .pdp-1 .top-promo-desc{text-align:left}
.prod-details-prom-1 .pdp-1 .top-promo-slogan{text-align:left;font-family:'Open Sans',sans-serif;font-size:13px!important;color:#134679;text-transform:uppercase;font-weight:600;margin-top:15px}
.prod-details-prom-2 .pdp-2{background:#fff url('ссылка на вторую картинку') 131px -83px no-repeat;border-radius:5px;border:1px solid #d2d2d4;border-bottom-color:#a2a2a4;box-shadow:inset 0 0 0 1px rgba(255,255,255,1.0),0 1px 0 rgba(0,0,2,0.05);padding:5px;margin:0 5px;font-size:12px;line-height:150%;height:130px}
.prod-details-prom-2 .pdp-2 .top-promo-title{font-family:'Open Sans',sans-serif;font-size:17px!important;color:#92035e;text-transform:uppercase;font-weight:600;margin:6px 0 10px 0}
.prod-details-prom-2 .pdp-2 .top-promo-desc{text-align:left}
.prod-details-prom-2 .pdp-2 .top-promo-slogan{text-align:left;font-family:'Open Sans',sans-serif;font-size:11px!important;color:#92035e;text-transform:uppercase;font-weight:600;margin-top:5px}
.prod-details-prom-3 .pdp-3{background:#fff url('ссылка на третью картинку') 138px -222px no-repeat;border-radius:5px;border:1px solid #d2d2d4;border-bottom-color:#a2a2a4;box-shadow:inset 0 0 0 1px rgba(255,255,255,1.0),0 1px 0 rgba(0,0,2,0.05);padding:5px;margin:0 5px;font-size:12px;line-height:150%;height:130px}
.prod-details-prom-3 .pdp-3 .top-promo-title{font-family:'Open Sans',sans-serif;font-size:20px!important;color:#6f9b06;text-transform:uppercase;font-weight:600;margin:6px 0 10px 0}
.prod-details-prom-3 .pdp-3 .top-promo-desc{text-align:left}
.prod-details-prom-3 .pdp-3 .top-promo-slogan{text-align:left;font-family:'Open Sans',sans-serif;font-size:12px!important;color:#6f9b06;text-transform:uppercase;font-weight:600;margin-top:5px}

вместо ссылка на первую картинку, ссылка на вторую картинку, ссылка на третью картинку вставьте ссылки на изображения для 1, 2 и 3 блока соответственно. Здесь они должны быть примерно 90х90 пикселей. Вы можете создать изображение, где эти 3 картинки будут идти друг за другом и далее указать ссылку на изображение везде одинаковую, а потом уже регулировать высоту изображений, например, как это сделано здесь

url('ссылка на первую картинку') 131px 56px
url('ссылка на вторую картинку') 131px -83px
url('ссылка на третью картинку') 138px -222px

Вот, как и хотел. Как теперь немного увеличить высоту, слоганы не входят. Спасибо

[support 2.0]

kaisyRUS (19 Февраль 2013 - 09:40) писал:

Вот, как и хотел. Как теперь немного увеличить высоту, слоганы не входят. Спасибо

высота для первого блока

.prod-details-prom-1 .pdp-1 {
background: #fff url('ссылка') 131px 56px no-repeat;
border-radius: 5px;
border: 1px solid #d2d2d4;
border-bottom-color: #a2a2a4;
box-shadow: inset 0 0 0 1px rgba(255,255,255,1.0),0 1px 0 rgba(0,0,2,0.05);
padding: 5px;
margin: 0 5px;
font-size: 12px;
line-height: 150%;
height: 130px;
}

высота для второго блока

.prod-details-prom-2 .pdp-2 {
background: #fff url('ссылка') 131px -83px no-repeat;
border-radius: 5px;
border: 1px solid #d2d2d4;
border-bottom-color: #a2a2a4;
box-shadow: inset 0 0 0 1px rgba(255,255,255,1.0),0 1px 0 rgba(0,0,2,0.05);
padding: 5px;
margin: 0 5px;
font-size: 12px;
line-height: 150%;
height: 130px;
}

высота для третьего блока

.prod-details-prom-3 .pdp-3 {
background: #fff url('ссылка') 138px -222px no-repeat;
border-radius: 5px;
border: 1px solid #d2d2d4;
border-bottom-color: #a2a2a4;
box-shadow: inset 0 0 0 1px rgba(255,255,255,1.0),0 1px 0 rgba(0,0,2,0.05);
padding: 5px;
margin: 0 5px;
font-size: 12px;
line-height: 150%;
height: 130px;
}

меняйте значение height: 130px; - высота каждого блока

[kaisyRUS]

support 2.0 (19 Февраль 2013 - 16:49) писал:

высота для первого блока

.prod-details-prom-1 .pdp-1 {
background: #fff url('ссылка') 131px 56px no-repeat;
border-radius: 5px;
border: 1px solid #d2d2d4;
border-bottom-color: #a2a2a4;
box-shadow: inset 0 0 0 1px rgba(255,255,255,1.0),0 1px 0 rgba(0,0,2,0.05);
padding: 5px;
margin: 0 5px;
font-size: 12px;
line-height: 150%;
height: 130px;
}

высота для второго блока

.prod-details-prom-2 .pdp-2 {
background: #fff url('ссылка') 131px -83px no-repeat;
border-radius: 5px;
border: 1px solid #d2d2d4;
border-bottom-color: #a2a2a4;
box-shadow: inset 0 0 0 1px rgba(255,255,255,1.0),0 1px 0 rgba(0,0,2,0.05);
padding: 5px;
margin: 0 5px;
font-size: 12px;
line-height: 150%;
height: 130px;
}

высота для третьего блока

.prod-details-prom-3 .pdp-3 {
background: #fff url('ссылка') 138px -222px no-repeat;
border-radius: 5px;
border: 1px solid #d2d2d4;
border-bottom-color: #a2a2a4;
box-shadow: inset 0 0 0 1px rgba(255,255,255,1.0),0 1px 0 rgba(0,0,2,0.05);
padding: 5px;
margin: 0 5px;
font-size: 12px;
line-height: 150%;
height: 130px;
}

меняйте значение height: 130px; - высота каждого блока

Ставлю значение больше 140 - пропадает полностью промоблок. Ставил как для одного, так и для все сразу блоков. Почему так?

[support 2.0]

kaisyRUS (20 Февраль 2013 - 09:57) писал:

Ставлю значение больше 140 - пропадает полностью промоблок. Ставил как для одного, так и для все сразу блоков. Почему так?

Вообще не знаю почему у Вас так получается. Может Вы удаляете px?
Потому что у меня получается увеличить длину на любое значение. Например, я сделала height:175px и получилось так, как на прикрепленном скриншоте

Прикрепленные изображения

• 

[kaisyRUS]

support 2.0 (20 Февраль 2013 - 10:31) писал:

Вообще не знаю почему у Вас так получается. Может Вы удаляете px?
Потому что у меня получается увеличить длину на любое значение. Например, я сделала height:175px и получилось так, как на прикрепленном скриншоте

Попробуем исчо

[kaisyRUS]

support 2.0 (20 Февраль 2013 - 10:31) писал:

Вообще не знаю почему у Вас так получается. Может Вы удаляете px?
Потому что у меня получается увеличить длину на любое значение. Например, я сделала height:175px и получилось так, как на прикрепленном скриншоте

С высотой вышло (видимо ABtest мешал). Теперь меняю размер и положение слогана. Изменения ни как не вступают в силу (кеш обновлял). С высотой также изменения долго вступали в силу. В чем может быть проблема?

[kaisyRUS]

kaisyRUS (21 Февраль 2013 - 08:46) писал:

С высотой вышло (видимо ABtest мешал). Теперь меняю размер и положение слогана. Изменения ни как не вступают в силу (кеш обновлял). С высотой также изменения долго вступали в силу. В чем может быть проблема?

вот код с моими изменениями. может где накосячил. Изменял размер шрифта и маргин топ слогана

/*--3 блока---*/
#top-promo{border:none;margin-bottom:20px;padding:0;overflow:hidden;margin-top:20px}
.prod-details-prom-1,.prod-details-prom-2,.prod-details-prom-3{width:33.3%;float:left;margin:0;padding:0;text-align:center}
.prod-details-prom-1 .pdp-1{background:#fff url('http://files.storeland.ru/web/upload/sitefiles/5/435/434163/top-promo-all.jpg') 131px 56px no-repeat;border-radius:5px;border:1px solid #d2d2d4;border-bottom-color:#a2a2a4;box-shadow:inset 0 0 0 1px rgba(255,255,255,1.0),0 1px 0 rgba(0,0,2,0.05);padding:5px;margin:0 5px;font-size:12px;line-height:150%;height:160px}
.prod-details-prom-1 .pdp-1 .top-promo-title{font-family:'Open Sans',sans-serif;font-size:19px!important;color:#134679;text-transform:uppercase;font-weight:600;margin:6px 0 15px 0}
.prod-details-prom-1 .pdp-1 .top-promo-desc{text-align:left}
.prod-details-prom-1 .pdp-1 .top-promo-slogan{text-align:left;font-family:'Open Sans',sans-serif;font-size:11px!important;color:#134679;text-transform:uppercase;font-weight:600;margin-top:10px}
.prod-details-prom-2 .pdp-2{background:#fff url('http://files.storeland.ru/web/upload/sitefiles/5/435/434163/top-promo-all.jpg') 131px -83px no-repeat;border-radius:5px;border:1px solid #d2d2d4;border-bottom-color:#a2a2a4;box-shadow:inset 0 0 0 1px rgba(255,255,255,1.0),0 1px 0 rgba(0,0,2,0.05);padding:5px;margin:0 5px;font-size:12px;line-height:150%;height:160px}
.prod-details-prom-2 .pdp-2 .top-promo-title{font-family:'Open Sans',sans-serif;font-size:17px!important;color:#92035e;text-transform:uppercase;font-weight:600;margin:6px 0 10px 0}
.prod-details-prom-2 .pdp-2 .top-promo-desc{text-align:left}
.prod-details-prom-2 .pdp-2 .top-promo-slogan{text-align:left;font-family:'Open Sans',sans-serif;font-size:11px!important;color:#92035e;text-transform:uppercase;font-weight:600;margin-top:15px}
.prod-details-prom-3 .pdp-3{background:#fff url('http://files.storeland.ru/web/upload/sitefiles/5/435/434163/top-promo-all.jpg') 138px -230px no-repeat;border-radius:5px;border:1px solid #d2d2d4;border-bottom-color:#a2a2a4;box-shadow:inset 0 0 0 1px rgba(255,255,255,1.0),0 1px 0 rgba(0,0,2,0.05);padding:5px;margin:0 5px;font-size:12px;line-height:150%;height:160px}
.prod-details-prom-3 .pdp-3 .top-promo-title{font-family:'Open Sans',sans-serif;font-size:20px!important;color:#6f9b06;text-transform:uppercase;font-weight:600;margin:6px 0 10px 0}
.prod-details-prom-3 .pdp-3 .top-promo-desc{text-align:left}
.prod-details-prom-3 .pdp-3 .top-promo-slogan{text-align:left;font-family:'Open Sans',sans-serif;font-size:11px!important;color:#6f9b06;text-transform:uppercase;font-weight:600;margin-top:5px}

[support 2.0]

kaisyRUS (21 Февраль 2013 - 12:14) писал:

вот код с моими изменениями. может где накосячил. Изменял размер шрифта и маргин топ слогана

/*--3 блока---*/

Как именно Вы меняете?
код слога для первого блока

.prod-details-prom-1 .pdp-1 .top-promo-slogan{text-align:left;font-family:'Open Sans',sans-serif;font-size:11px!important;color:#134679;text-transform:uppercase;font-weight:600;margin-top:10px}

для второго

.prod-details-prom-2 .pdp-2 .top-promo-slogan{text-align:left;font-family:'Open Sans',sans-serif;font-size:11px!important;color:#92035e;text-transform:uppercase;font-weight:600;margin-top:15px}

для третьего

.prod-details-prom-3 .pdp-3 .top-promo-slogan{text-align:left;font-family:'Open Sans',sans-serif;font-size:11px!important;color:#6f9b06;text-transform:uppercase;font-weight:600;margin-top:5px}

[kaisyRUS]

support 2.0 (21 Февраль 2013 - 12:23) писал:

Как именно Вы меняете?
код слога для первого блока

.prod-details-prom-1 .pdp-1 .top-promo-slogan{text-align:left;font-family:'Open Sans',sans-serif;font-size:11px!important;color:#134679;text-transform:uppercase;font-weight:600;margin-top:10px}

для второго

.prod-details-prom-2 .pdp-2 .top-promo-slogan{text-align:left;font-family:'Open Sans',sans-serif;font-size:11px!important;color:#92035e;text-transform:uppercase;font-weight:600;margin-top:15px}

для третьего

.prod-details-prom-3 .pdp-3 .top-promo-slogan{text-align:left;font-family:'Open Sans',sans-serif;font-size:11px!important;color:#6f9b06;text-transform:uppercase;font-weight:600;margin-top:5px}

Как? Взял и поставил в этих блоках везде размер font-size:11px и margin-top изменил. А изменений на сайте нет

[support 2.0]

kaisyRUS (21 Февраль 2013 - 14:54) писал:

Как? Взял и поставил в этих блоках везде размер font-size:11px и margin-top изменил. А изменений на сайте нет
ывыв.png ычыч.png

Пожалуйста, попробуйте еще раз сделать данные изменения. Иногда может помочь, если нажать 2 раза сохранить. Хотя нами не удалось заметить данной ошибки на Вашем сайте. Не очень понятно как это могло произойти.
Если подобное также повторится, напишите нам еще раз.

[kaisyRUS]

support 2.0 (21 Февраль 2013 - 16:00) писал:

Пожалуйста, попробуйте еще раз сделать данные изменения. Иногда может помочь, если нажать 2 раза сохранить. Хотя нами не удалось заметить данной ошибки на Вашем сайте. Не очень понятно как это могло произойти.
Если подобное также повторится, напишите нам еще раз.

Опа - заработала!