Перейти к содержимому


Можно Ли Поставить Рамку С Информацией Об Интернет-Магазине Как На Изображении

Автор Yustus, 14 июля 2015 16:16

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 14

#1 Yustus

Yustus

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 177 сообщений
  • ГородОмск

Отправлено 14 Июль 2015 - 16:16

Хочу поставить рамку на свой интернет-магазин с другого интернет-магазина.

Изображение

http://gudmebel.ru/


Вижу это примерно так

Изображение

#2 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 810 сообщений

Отправлено 14 Июль 2015 - 17:10

Просмотр сообщенияYustus (14 Июль 2015 - 16:16) писал:

Хочу поставить рамку на свой интернет-магазин с другого интернет-магазина.

Изображение

http://gudmebel.ru/


Вижу это примерно так

Изображение

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> HTML, найдите код:
		 <!-- Главная страница -->
		 {% IF index_page %}
		 <!-- Список товаров на главной -->

Замените на:
		 <!-- Главная страница -->
		 {% IF index_page %}
	 <ul id="information">
	 <li class="info">
	 <div>Почему&nbsp;все покупают именно&nbsp;у&nbsp;нас?</div></li>
	 <li class="trigger"><a class="icon delivery" href="page/Доставка"></a>
	 <div><a href="page/Доставка"><span>Быстрая и бесплатная</span> доставка</a></div></li>
	 <li class="trigger"><a class="icon price" href="ссылка"></a>
	 <div><a href="ссылка"><span>Цены всегда ниже</span> чем в других ТЦ</a></div></li>
	 <li class="trigger"><a class="icon guarantee" href="ссылка"></a>
	 <div><a href="ссылка"><span>100% гарантия возврата</span> денег</a></div></li>
	 <li class="trigger"><a class="icon reviews" href="http://comments.texstil-optom.ru/"></a>
	 <div><a href="http://comments.texstil-optom.ru/"><span>Смотрите отзывы</span> покупателей</a></div></li>
	 <li class="info">
	 <div>жмите&nbsp;на иконку&nbsp;и&nbsp;узнаете подробнее!</div></li>
	 </ul>
		 <!-- Список товаров на главной -->

Вместо слов ссылка вставьте недостающие ссылки на нужные страницы.

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, добавьте в конце код:
#information {
list-style: none;
width: 940px;
	 height: 108px;
	 padding: 0 25px;
font-size: 17px;
	 line-height: 19px;
text-transform: uppercase;
	 text-align:center;
	 margin-top:45px;
	 background: #575F63;
color: #FFF;
}
#information li {
float:left;
	 width: 150px;
	 height:138px;
}
#information li.info {
width: 170px;
}
#information li.info div {
	 height:108px;
vertical-align: middle;
	 display:table-cell;
}
#information li.trigger div span {
color:#fefb99;
	 font-size: 17px;
	 text-transform: uppercase;
	 display: inline-block;
	 font-weight: 700;
}
#information li.trigger div {
	 height:78px;
vertical-align: middle;
	 display:table-cell;
	 text-transform: none;
}
#information li.trigger div a{
color:#fff;
	 text-decoration:none;
}
#information li.trigger a.icon{
	 width: 56px;
	 height: 56px;
	 display: inline-block;
	 border: 2px solid #575F63;
	 margin-top: -30px;
	 background-color: #DFE5EB;
	 border-radius: 30px;
	 background-repeat: no-repeat;
}
#information li.trigger a.icon.delivery{background-image:url('{ASSETS_IMAGES_PATH}delivery.png');background-position:50% 50%;}
#information li.trigger a.icon.price{background-image:url('{ASSETS_IMAGES_PATH}price.png');background-position:50% 50%;}
#information li.trigger a.icon.guarantee{background-image:url('{ASSETS_IMAGES_PATH}guarantee.png');background-position:50% 50%;}
#information li.trigger a.icon.reviews{background-image:url('{ASSETS_IMAGES_PATH}reviews.png');background-position:50% 50%;}
#information li.trigger:hover a.icon{
background-color: #F55800;
	 border: 2px solid #F55800;
}
#information li.trigger:hover a.icon.delivery{background-image:url('{ASSETS_IMAGES_PATH}deliveryw.png');background-position:50% 50%;}
#information li.trigger:hover a.icon.price{background-image:url('{ASSETS_IMAGES_PATH}pricew.png');background-position:50% 50%;}
#information li.trigger:hover a.icon.guarantee{background-image:url('{ASSETS_IMAGES_PATH}guaranteew.png');background-position:50% 50%;}
#information li.trigger:hover a.icon.reviews{background-image:url('{ASSETS_IMAGES_PATH}reviewsw.png');background-position:50% 50%;}#information li.trigger a.icon.reviews:hover{background-image:url('{ASSETS_IMAGES_PATH}reviewsw.png');background-position:50% 50%;}

Далее скачайте и разархивируйте архив с иконками из приложения, зайдите в админ. панель -> Сайт -> Редактор шаблонов -> кнопка "Добавить файлы" и загрузите иконки, скачанные ранее.

Прикрепленные файлы

  • Прикрепленный файл  icons.zip   26,88К   49 Количество загрузок:

#3 Yustus

Yustus

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 177 сообщений
  • ГородОмск

Отправлено 14 Июль 2015 - 17:58

Всё супер. Есть несколько нюансов:

1) Изменить фон иконок при наведении ( сейчас он оранжевый, мне нужно сделать его таким же как цвет шапки

2) Выравнять по центру рамки надпись

3) Сделать отступ между нижней частью рамки и надписью "ХИТЫ ПРОДАЖ"



Изображение

#4 Yustus

Yustus

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 177 сообщений
  • ГородОмск

Отправлено 14 Июль 2015 - 18:15

И еще необходимо сократить немножко рамку. Слева все отлично, но справа немного выступает. (На скриншоте показал)




Изображение

#5 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 810 сообщений

Отправлено 14 Июль 2015 - 18:52

Просмотр сообщенияYustus (14 Июль 2015 - 17:58) писал:

Всё супер. Есть несколько нюансов:

1) Изменить фон иконок при наведении ( сейчас он оранжевый, мне нужно сделать его таким же как цвет шапки

2) Выравнять по центру рамки надпись

3) Сделать отступ между нижней частью рамки и надписью "ХИТЫ ПРОДАЖ"



Изображение


1. Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
#information li.trigger:hover a.icon{
background-color: #F55800;
			 border: 2px solid #F55800;
}

Замените на:
#information li.trigger:hover a.icon{
background-color: #CD3333;
border: 2px solid #CD3333;
}

2. Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> HTML, найдите код:
		 <li class="ссылка">
		 <div>Почему&nbsp;все покупают именно&nbsp;у&nbsp;нас?</div></li>

Замените на:
		 <li class="info">
		 <div>Почему&nbsp;все покупают именно&nbsp;у&nbsp;нас?</div></li>


3,4 Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
#information {
list-style: none;
width: 940px;
			 height: 108px;
			 padding: 0 25px;
font-size: 17px;
			 line-height: 19px;
text-transform: uppercase;
			 text-align:center;
			 margin-top:45px;
			 background: #575F63;
color: #FFF;
}

Замените на:
#information {
list-style: none;
width: 940px;
height: 108px;
padding: 0 12px;
font-size: 17px;
line-height: 19px;
text-transform: uppercase;
text-align:center;
margin: 45px 0 45px 0;
background: #575F63;
color: #FFF;
}

#6 Yustus

Yustus

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 177 сообщений
  • ГородОмск

Отправлено 14 Июль 2015 - 19:12

При наведении на первую иконку она крутится, а остальные нет.
Можно сделать чтоб все 4 иконки так крутились?




Изображение

#7 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 810 сообщений

Отправлено 14 Июль 2015 - 20:16

Просмотр сообщенияYustus (14 Июль 2015 - 19:12) писал:

При наведении на первую иконку она крутится, а остальные нет.
Можно сделать чтоб все 4 иконки так крутились?




Изображение

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
#information li.trigger a.icon.delivery{background-image:url('{ASSETS_IMAGES_PATH}delivery.png');background-position:50% 50%;}
#information li.trigger a.icon.price{background-image:url('{ASSETS_IMAGES_PATH}price.png');background-position:50% 50%;}
#information li.trigger a.icon.guarantee{background-image:url('{ASSETS_IMAGES_PATH}guarantee.png');background-position:50% 50%;}
#information li.trigger a.icon.reviews{background-image:url('{ASSETS_IMAGES_PATH}reviews.png');background-position:50% 50%;}
#information li.trigger:hover a.icon{
background-color: #CD3333;
border: 2px solid #CD3333;
}
#information li.trigger:hover a.icon.delivery{background-image:url('{ASSETS_IMAGES_PATH}deliveryw.png');background-position:50% 50%;}
#information li.trigger:hover a.icon.price{background-image:url('{ASSETS_IMAGES_PATH}pricew.png');background-position:50% 50%;}
#information li.trigger:hover a.icon.guarantee{background-image:url('{ASSETS_IMAGES_PATH}guaranteew.png');background-position:50% 50%;}
#information li.trigger:hover a.icon.reviews{background-image:url('{ASSETS_IMAGES_PATH}reviewsw.png');background-position:50% 50%;}#information li.trigger a.icon.reviews:hover{background-image:url('{ASSETS_IMAGES_PATH}reviewsw.png');background-position:50% 50%;}

Замените на:
#information li.trigger a.icon.delivery{background-image:url('{ASSETS_IMAGES_PATH}delivery.png');background-position:50% 50%;transition: all 0.5s ease 0s;-webkit-transition: all 0.5s ease 0s;-ms-transition: all 0.5s ease 0s;-moz-transition: all 0.5s ease 0s;-o-transition: all 0.5s ease 0s;}
#information li.trigger a.icon.price{background-image:url('{ASSETS_IMAGES_PATH}price.png');background-position:50% 50%;transition: all 0.5s ease 0s;-webkit-transition: all 0.5s ease 0s;-ms-transition: all 0.5s ease 0s;-moz-transition: all 0.5s ease 0s;-o-transition: all 0.5s ease 0s;}
#information li.trigger a.icon.guarantee{background-image:url('{ASSETS_IMAGES_PATH}guarantee.png');background-position:50% 50%;transition: all 0.5s ease 0s;-webkit-transition: all 0.5s ease 0s;-ms-transition: all 0.5s ease 0s;-moz-transition: all 0.5s ease 0s;-o-transition: all 0.5s ease 0s;}
#information li.trigger a.icon.reviews{background-image:url('{ASSETS_IMAGES_PATH}reviews.png');background-position:50% 50%;transition: all 0.5s ease 0s;-webkit-transition: all 0.5s ease 0s;-ms-transition: all 0.5s ease 0s;-moz-transition: all 0.5s ease 0s;-o-transition: all 0.5s ease 0s;}
#information li.trigger:hover a.icon{
background-color: #CD3333;
border: 2px solid #CD3333;
}
#information li.trigger:hover a.icon.delivery{background-image:url('{ASSETS_IMAGES_PATH}deliveryw.png');background-position:50% 50%;transform:rotate(360deg);-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);}
#information li.trigger:hover a.icon.price{background-image:url('{ASSETS_IMAGES_PATH}pricew.png');background-position:50% 50%;transform:rotate(360deg);-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);}
#information li.trigger:hover a.icon.guarantee{background-image:url('{ASSETS_IMAGES_PATH}guaranteew.png');background-position:50% 50%;transform:rotate(360deg);-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);}
#information li.trigger:hover a.icon.reviews{background-image:url('{ASSETS_IMAGES_PATH}reviewsw.png');background-position:50% 50%;transform:rotate(360deg);-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);}

#8 Yustus

Yustus

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 177 сообщений
  • ГородОмск

Отправлено 14 Июль 2015 - 20:31

Красата. Огромное спасибо.

#9 Yustus

Yustus

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 177 сообщений
  • ГородОмск

Отправлено 16 Июль 2015 - 11:33

Напишите пожалуйста в каких строчках в коде можно менять ссылки на кнопках?




Изображение

#10 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 17 Июль 2015 - 01:35

Данный код находится в шаблоне HTML со строки 512 по 525

#11 Malina

Malina

    Пользователь

  • Пользователи
  • PipPip
  • 26 сообщений

Отправлено 29 Август 2015 - 11:56

А как сделать так, чтобы на разных устройствах эта плашка открывалась одинаково?

#12 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 468 сообщений

Отправлено 29 Август 2015 - 14:12

Просмотр сообщенияMalina (29 Август 2015 - 11:56) писал:

А как сделать так, чтобы на разных устройствах эта плашка открывалась одинаково?

Уточните номер Вашего аккаунта, чтобы мы могли посмотреть.

#13 Malina

Malina

    Пользователь

  • Пользователи
  • PipPip
  • 26 сообщений

Отправлено 30 Август 2015 - 16:03

Мой аккаунт SL-354853

#14 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 468 сообщений

Отправлено 30 Август 2015 - 17:12

Просмотр сообщенияMalina (30 Август 2015 - 16:03) писал:

Мой аккаунт SL-354853

Если Вы хотите, чтобы сайт на мобильном выглядел как на компьютере, то в шаблоне HTML удалите код:
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

#15 Malina

Malina

    Пользователь

  • Пользователи
  • PipPip
  • 26 сообщений

Отправлено 30 Август 2015 - 18:19

СПАСИБО!!!!!!!
Обратно в Изменение общей стилистики


Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Весна
  5. → Изменение общей стилистики
  6. Privacy Policy