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


Хлебные Крошки, Каталог, Иконки И Пр


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

#1 Lis

Lis

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

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

Отправлено 25 Март 2016 - 23:55

Здравствуйте!
Подскажите пожалуйста, нужно произвести следующие изменения:
1) Выровнять наименование категории в каталоге по центру (фото1).
2) В хлебных крошках между пунктами разместить fa-angle-double-right из fontawesome (шрифт установлен). На экране смартфона хлебные крошки скрываются под шапкой и отображается не весь путь (фото2).
3) Страница товара по структуре должна быть как в шаблоне "Ночь", а именно: слева - фото товара, справа - наименование, артикул, наличие, цена, краткое описание, модификации, выбор количества, кнопка купить.
4) Как установить дополнительные иконки icomoon? Пробовал это сделать, но вместо иконки отображается квадратик с ее кодом.
5) Можно ли реализовать как в шаблоне "Движение" появляющуюся плашку вверху при прокрутке страницы вниз?

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

  • Фото1.png
  • Фото2.png


#2 Vaccina

Vaccina

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

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

Отправлено 26 Март 2016 - 03:17

1. В main.css найдите:
.cat_prod_hold .nameWrp {
float: none;
}

замените на:
.cat_prod_hold .nameWrp {
float: none;
width: 100%;
}
.cat_prod_hold .nameWrp a {
width: 100%;
text-align: center;
}

2. В шаблоне HTML найдите:
<!-- Хлебные крошки -->
	 {% IFNOT index_page %}
	 <div id="breadcrumbs" class="wrap">
	 <div class="container">
		 <div id="pathway" class="clear">
		 <ul class="breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList">
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="home"><a itemprop="item" href="http://{NET_DOMAIN}/" title="Перейти на главную"><span itemprop="name">Главная</span></a></li>
			 {% IF MOD_LNAME=cart %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">{% IF cart_items_empty %}Корзина покупок пуста{% ELSE %}Корзина{% ENDIF %}</li>
			 {% ELSEIF MOD_LNAME=user && ACT=login %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">Войти или зарегистрироваться</strong></li>
			 {% ELSEIF MOD_LNAME=user && ACT=change %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="{USER_RECOVERY_URL}" title="Восстановление пароля"><span itemprop="name">Восстановление пароля</span></a></li>
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">Активация нового пароля</strong></li>
			 {% ELSEIF MOD_LNAME=user && ACT=recovery %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">Восстановление пароля</strong></li>
			 {% ELSEIF MOD_LNAME=user && ACT=favorites %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">Избранные товары</strong></li>
			 {% ELSEIF MOD_LNAME=user && ACT=history_info %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="{USER_SETTINGS_URL}" title="Личный кабинет"><span itemprop="name">Личный кабинет</span></a></li>
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="{USER_HISTORY_LIST_URL}" title="История моих заказов"><span itemprop="name">Мои заказы</span></a></li>
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">Карточка заказа</strong></li>
			 {% ELSEIF MOD_LNAME=user && ACT=history_list %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="{USER_SETTINGS_URL}" title="Личный кабинет"><span itemprop="name">Личный кабинет</span></a></li>
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">Мои заказы</strong></li>
			 {% ELSEIF MOD_LNAME=user && ACT=settings %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">Личный кабинет</strong></li>
			 {% ELSEIF MOD_LNAME=user && ACT=register %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">Регистрация клиента</strong></li>
			 {% ELSEIF MOD_LNAME=order && ACT=stage %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="{CART_URL}" title="Перейти в корзину"><span itemprop="name">Корзина</span></a></li>
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">Оформление заказа</strong></li>
			 {% ELSEIF MOD_LNAME=search %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">Поиск</strong></li>
			 {% ELSEIF MOD_LNAME=discount && ACT=index && ID %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="{DISCOUNT_URL}" title="Перейти на страницу акций магазина"><span itemprop="name">Акции магазина</span></a></li>
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">{PROMOTIONAL_CAMPAIGN_NAME}</strong></li>
			 {% ELSEIF MOD_LNAME=discount && ACT=index %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">Акции магазина</strong></li>
			 {% ELSEIF MOD_LNAME=order && ACT=info %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="{CART_URL}" title="Перейти в корзину"><span itemprop="name">Корзина</span></a></li>
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="{CART_URL}"><span itemprop="name">Оформление заказа</span></a></li>
			 <li>Заказ {% IF ORDER_NUM %}№{ORDER_NUM}{% ENDIF %} успешно оформлен.</li>
			 {% ELSEIF MOD_LNAME=feedback && ACT=index %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">Связь с администрацией</strong></li>
			 {% ELSEIF CURRENT_URL=NEWS_SHOP_URL || CURRENT_URL=NEWS_ARTICLES_URL || CURRENT_URL=NEWS_MASS_MEDIA_URL || CURRENT_URL=NEWS_ALL_URL %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">{NEWS_SECTION_NAME}</strong></li>
			 {% ELSEIF MOD_LNAME=news %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="{NEWS_SECTION_URL}" title="{NEWS_SECTION_NAME}"><span itemprop="name">{NEWS_SECTION_NAME}</span></a></li>
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">{NEWS_TITLE}</strong></li>
			 {% ELSEIF MOD_LNAME=compare %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">Список сравнения</strong></li>
			 {% ELSEIF MOD_LNAME=page %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">{PAGE_NAME}</strong></li>
			 {% ELSEIF MOD_LNAME= %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">Внутренняя ошибка сервера</strong></li>
			 {% ELSEIF MOD_LNAME=callback %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">Заказ обратного звонка</strong></li>
			 {% ELSEIF MOD_LNAME=goods %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="{CATALOG_URL}" title="Перейти в каталог товаров"><span itemprop="name">Каталог</span></a></li>
			 {% FOR upper_navigation %}
				 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="{upper_navigation.URL}" title="Перейти в категорию &laquo;{upper_navigation.NAME}&raquo;"><span itemprop="name">{upper_navigation.NAME}</span></a></li>
			 {% ENDFOR %}
				 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">{GOODS_NAME}</strong></li>
			 {% ELSEIF MOD_LNAME=catalog %}
			 {% IF IS_FULL_CATALOG %}
				 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">Каталог</strong></li>
			 {% ELSE %}
				 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="{CATALOG_URL}" title="Перейти в каталог продукции нашего магазина"><span itemprop="name">Каталог</span></a></li>
				 {% FOR upper_navigation %}
					 {% IF upper_navigation.CURRENT %}
					 <li>{upper_navigation.NAME}</li>
					 {% ELSEIF upper_navigation.CURRENT_PARENT %}
					 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="{upper_navigation.URL}" title="Перейти в категорию &laquo;{upper_navigation.NAME}&raquo;"><span itemprop="name">{upper_navigation.NAME}</span></a></li>
					 {% ENDIF %}
				 {% ENDFOR %}
			 {% ENDIF %}
			 {% ENDIF %}
		 </ul>
		 </div>
	 </div>
	 </div>
	 {% ENDIF %}
	 <!-- /END Хлебные крошки -->

замените на:
<!-- Хлебные крошки -->
	 {% IFNOT index_page %}
	 <div id="breadcrumbs" class="wrap">
	 <div class="container">
		 <div id="pathway" class="clear">
		 <ul class="breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList">
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="home"><a itemprop="item" href="http://{NET_DOMAIN}/" title="Перейти на главную"><span itemprop="name">Главная</span></a></li><i class="fa fa-angle-double-right"></i>
			 {% IF MOD_LNAME=cart %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">{% IF cart_items_empty %}Корзина покупок пуста{% ELSE %}Корзина{% ENDIF %}</li>
			 {% ELSEIF MOD_LNAME=user && ACT=login %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">Войти или зарегистрироваться</strong></li>
			 {% ELSEIF MOD_LNAME=user && ACT=change %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="{USER_RECOVERY_URL}" title="Восстановление пароля"><span itemprop="name">Восстановление пароля</span></a></li><i class="fa fa-angle-double-right"></i>
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">Активация нового пароля</strong></li>
			 {% ELSEIF MOD_LNAME=user && ACT=recovery %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">Восстановление пароля</strong></li>
			 {% ELSEIF MOD_LNAME=user && ACT=favorites %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">Избранные товары</strong></li>
			 {% ELSEIF MOD_LNAME=user && ACT=history_info %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="{USER_SETTINGS_URL}" title="Личный кабинет"><span itemprop="name">Личный кабинет</span></a></li><i class="fa fa-angle-double-right"></i>
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="{USER_HISTORY_LIST_URL}" title="История моих заказов"><span itemprop="name">Мои заказы</span></a></li><i class="fa fa-angle-double-right"></i>
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">Карточка заказа</strong></li>
			 {% ELSEIF MOD_LNAME=user && ACT=history_list %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="{USER_SETTINGS_URL}" title="Личный кабинет"><span itemprop="name">Личный кабинет</span></a></li><i class="fa fa-angle-double-right"></i>
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">Мои заказы</strong></li>
			 {% ELSEIF MOD_LNAME=user && ACT=settings %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">Личный кабинет</strong></li>
			 {% ELSEIF MOD_LNAME=user && ACT=register %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">Регистрация клиента</strong></li>
			 {% ELSEIF MOD_LNAME=order && ACT=stage %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="{CART_URL}" title="Перейти в корзину"><span itemprop="name">Корзина</span></a></li><i class="fa fa-angle-double-right"></i>
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">Оформление заказа</strong></li>
			 {% ELSEIF MOD_LNAME=search %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">Поиск</strong></li>
			 {% ELSEIF MOD_LNAME=discount && ACT=index && ID %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="{DISCOUNT_URL}" title="Перейти на страницу акций магазина"><span itemprop="name">Акции магазина</span></a></li><i class="fa fa-angle-double-right"></i>
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">{PROMOTIONAL_CAMPAIGN_NAME}</strong></li>
			 {% ELSEIF MOD_LNAME=discount && ACT=index %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">Акции магазина</strong></li>
			 {% ELSEIF MOD_LNAME=order && ACT=info %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="{CART_URL}" title="Перейти в корзину"><span itemprop="name">Корзина</span></a></li><i class="fa fa-angle-double-right"></i>
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="{CART_URL}"><span itemprop="name">Оформление заказа</span></a></li><i class="fa fa-angle-double-right"></i>
			 <li>Заказ {% IF ORDER_NUM %}№{ORDER_NUM}{% ENDIF %} успешно оформлен.</li>
			 {% ELSEIF MOD_LNAME=feedback && ACT=index %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">Связь с администрацией</strong></li>
			 {% ELSEIF CURRENT_URL=NEWS_SHOP_URL || CURRENT_URL=NEWS_ARTICLES_URL || CURRENT_URL=NEWS_MASS_MEDIA_URL || CURRENT_URL=NEWS_ALL_URL %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">{NEWS_SECTION_NAME}</strong></li>
			 {% ELSEIF MOD_LNAME=news %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="{NEWS_SECTION_URL}" title="{NEWS_SECTION_NAME}"><span itemprop="name">{NEWS_SECTION_NAME}</span></a></li><i class="fa fa-angle-double-right"></i>
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">{NEWS_TITLE}</strong></li>
			 {% ELSEIF MOD_LNAME=compare %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">Список сравнения</strong></li>
			 {% ELSEIF MOD_LNAME=page %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">{PAGE_NAME}</strong></li>
			 {% ELSEIF MOD_LNAME= %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">Внутренняя ошибка сервера</strong></li>
			 {% ELSEIF MOD_LNAME=callback %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">Заказ обратного звонка</strong></li>
			 {% ELSEIF MOD_LNAME=goods %}
			 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="{CATALOG_URL}" title="Перейти в каталог товаров"><span itemprop="name">Каталог</span></a></li><i class="fa fa-angle-double-right"></i>
			 {% FOR upper_navigation %}
				 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="{upper_navigation.URL}" title="Перейти в категорию &laquo;{upper_navigation.NAME}&raquo;"><span itemprop="name">{upper_navigation.NAME}</span></a></li><i class="fa fa-angle-double-right"></i>
			 {% ENDFOR %}
				 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">{GOODS_NAME}</strong></li>
			 {% ELSEIF MOD_LNAME=catalog %}
			 {% IF IS_FULL_CATALOG %}
				 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><strong itemprop="name">Каталог</strong></li>
			 {% ELSE %}
				 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="{CATALOG_URL}" title="Перейти в каталог продукции нашего магазина"><span itemprop="name">Каталог</span></a></li><i class="fa fa-angle-double-right"></i>
				 {% FOR upper_navigation %}
					 {% IF upper_navigation.CURRENT %}
					 <li>{upper_navigation.NAME}</li>
					 {% ELSEIF upper_navigation.CURRENT_PARENT %}
					 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="{upper_navigation.URL}" title="Перейти в категорию &laquo;{upper_navigation.NAME}&raquo;"><span itemprop="name">{upper_navigation.NAME}</span></a></li><i class="fa fa-angle-double-right"></i>
					 {% ENDIF %}
				 {% ENDFOR %}
			 {% ENDIF %}
			 {% ENDIF %}
		 </ul>
		 </div>
	 </div>
	 </div>
	 {% ENDIF %}
	 <!-- /END Хлебные крошки -->

3. В шаблоне HTML найдите:
{%IFNOT index_page%}
<div class="pagecont">
<div class="leftbar">

замените на:
{%IFNOT index_page%}
<div class="pagecont">
<div class="leftbar" {%IF MOD_LNAME = goods %}style="display:none;"{% ENDIF %}>

В шаблоне Товар найдите:
</div><!--END Item-->
	 </div>
{% ENDIF %}
<div class="clear"></div>

<div class="prodbox">

замените на:
</div><!--END Item-->
	 </div>
{% ENDIF %}

<div class="prodbox">

В main.css найдите:
.prodGlobalWrp {
float: left;
background: white;
padding: 0 10px 10px 10px;
position: relative;
border: 1px solid #EEE;
border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
}

замените на:
.prodGlobalWrp {
float: left;
background: white;
padding: 0 10px 10px 10px;
position: relative;
border: 1px solid #EEE;
border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
width: 100%;
}

далее найдите:
.prodbox {
margin-top: 10px;
}

замените на:
.prodbox {
margin-top: 10px;
float: right;
width: 50%;
}
.popup-gallery {
float: left;
width: 50%;
}

далее найдите:
#contents {
margin-top: 10px;
position: relative;
}
замените на:
#contents {
margin-top: 10px;
position: relative;
clear: both;
}
123.jpg
4. Немного не понятно, уточните пожалуйста, на данный момент у вас на сайте используется 2 шрифта awesome(можно пронаблюдать по иконкам в шапке сайта) и iconmoon(можно пронаблюдать в подвале)
5. Уточните пожалуйста, она должна появляться только в мобильной версии сайта?

#3 Lis

Lis

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

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

Отправлено 27 Март 2016 - 00:53

Просмотр сообщенияVaccina (26 Март 2016 - 03:17) писал:

4. Немного не понятно, уточните пожалуйста, на данный момент у вас на сайте используется 2 шрифта awesome(можно пронаблюдать по иконкам в шапке сайта) и iconmoon(можно пронаблюдать в подвале)
5. Уточните пожалуйста, она должна появляться только в мобильной версии сайта?
По пункту 4. К примеру хочу добавить иконку icon-cart в шрифт icomoon, для этого прописываю соответствующие коды в шаблонах HTML (<span class="icon-cart"></span>) и main.css (.icon-cart:before {content: "\e900";}), но в браузере отображается квадратик с кодом иконки.
По пункту 5. Она должна появляться только в полной версии сайта. Мобильная без изменений.
И еще подскажите пожалуйста где можно изменить размеры поля на фото.

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

  • Фото1.png


#4 RedHead

RedHead

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

  • Модераторы
  • 1 052 сообщений

Отправлено 27 Март 2016 - 12:23

Просмотр сообщенияLis (27 Март 2016 - 00:53) писал:

По пункту 4. К примеру хочу добавить иконку icon-cart в шрифт icomoon, для этого прописываю соответствующие коды в шаблонах HTML (<span class="icon-cart"></span>) и main.css (.icon-cart:before {content: "\e900";}), но в браузере отображается квадратик с кодом иконки.
По пункту 5. Она должна появляться только в полной версии сайта. Мобильная без изменений.
И еще подскажите пожалуйста где можно изменить размеры поля на фото.

Здравствуйте. Прошу немного уточнить Ваши вопросы.

5) О какой именно плашке Вы говорите? В шаблоне "Движение" Не увидели чего-либо примечательного в мобильной версии. На Вашем сайте, наоборот, в мобильной версии фиксируется шапка сайта при прокрутке страницы. Опишите, что Вы имеете ввиду.

6) По поводу размера всплывающих окон. Их размер проставляется автоматически для каждого окна, внутренними операциями модуля "fancybox", с помощью которого эти окна реализованы. При изменении размеров одного окна, неизбежно будут меняться размеры других окон. Например, в конец шаблона main.css вставьте строки:

.fancybox-wrap.fancybox-desktop.fancybox-type-html.fancybox-opened {width: 500px !important;}
.fancybox-wrap.fancybox-desktop.fancybox-type-html.fancybox-opened .fancybox-inner {width: 470px !important;}

Измените числовые значения на необходимые. Затем вызовите всплывающую форму быстрого оформления заказа. Эти изменения будут применены и к ней.

4) Также уточните, что Вы имеете ввиду: добавить иконки к шрифту. Они уже должны содержаться в шрифте, либо необходимо загружать новый шрифт. Укажите, пожалуйста, место на сайте, куда Вы хотите вставить иконки (разберем на одном примере)

#5 Lis

Lis

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

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

Отправлено 27 Март 2016 - 14:33

Просмотр сообщенияRedHead (27 Март 2016 - 12:23) писал:

Здравствуйте. Прошу немного уточнить Ваши вопросы.

5) О какой именно плашке Вы говорите? В шаблоне "Движение" Не увидели чего-либо примечательного в мобильной версии. На Вашем сайте, наоборот, в мобильной версии фиксируется шапка сайта при прокрутке страницы. Опишите, что Вы имеете ввиду.

4) Также уточните, что Вы имеете ввиду: добавить иконки к шрифту. Они уже должны содержаться в шрифте, либо необходимо загружать новый шрифт. Укажите, пожалуйста, место на сайте, куда Вы хотите вставить иконки (разберем на одном примере)

5) Речь идет только о полной версии сайта. В шаблоне Движение при прокрутке страницы вниз, после того как шапка сайта скрывается вверху экрана, появляется другая зафиксированная шапка с логотипом и поиском (см. фото). Я хочу применить такую же шапку, только без каких-либо объектов на ней (пустую шапку). Сам установлю то, что нужно.

4) Например, на сайте icomoon есть иконка icon-cart (.icon-cart:before {content: "\e900";}). Нужно чтобы эта иконка отображалась вместо той, что установлена сейчас.

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

  • фото.png


#6 Lis

Lis

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

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

Отправлено 28 Март 2016 - 23:18

Up

#7 Vaccina

Vaccina

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

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

Отправлено 29 Март 2016 - 02:05

4. На данном сайте присутсвует множество пакетов с вариациями иконок:
https://icomoon.io/

Выберите и скачайте необходимый, прикрепите его к своему сообщению, чтобы мы знали какой именно необходимо подключить.

5. В HTML найдите:
<div class="header">
			<div class="highRes">
			<div class="htwrp">
			  <div class="headerTop">
				<div class="header-menu">

перед ним вставьте:
<div id="fixed_header">
Ваш контент
</div>

В main.js найдите:
$(function(){
// hide #back-top first
  $("#back-top").hide();
 
  // fade in #back-top
$(window).scroll(function () {
  if ($(this).scrollTop() > 100) {
   $('#back-top').fadeIn();
  } else {
   $('#back-top').fadeOut();
  }
});

замените на:
$(function(){
// hide #back-top first
  $("#fixed_header").hide();
  $("#back-top").hide();

  // fade in #back-top
$(window).scroll(function () {
  if ($(this).scrollTop() > 100) {
   $('#fixed_header').fadeIn();
   $('#back-top').fadeIn();
  } else {
   $('#fixed_header').fadeOut();
   $('#back-top').fadeOut();
  }
});

В main,css найдите:
.headerTop{padding:10px;width:1200px;margin:0 auto;text-align:right;}
.headerTop a{padding:5px 15px;}

Перед ним пропишите:
#fixed_header{
width:100%;
padding:10px;
position:fixed;
top:0;
margin:0 auto;
left:0;
right:0;
backgground:#fff;
border-bottom:1px solid #ccc;
}


#8 Lis

Lis

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

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

Отправлено 29 Март 2016 - 20:27

Просмотр сообщенияVaccina (29 Март 2016 - 02:05) писал:

4. На данном сайте присутсвует множество пакетов с вариациями иконок:
https://icomoon.io/

Прикрепил архив с шрифтом

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

  • Прикрепленный файл  icomoon.zip   747,63К   74 Количество загрузок:


#9 Vaccina

Vaccina

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

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

Отправлено 30 Март 2016 - 06:13

Загрузите файлы из папки fonts, далее переименуйте файл style.css в icomoon.css и также загрузите его, в нем найдите:
src:	url('fonts/icomoon.eot?6uzhsk');
	src:	url('fonts/icomoon.eot?6uzhsk#iefix') format('embedded-opentype'),
		url('fonts/icomoon.ttf?6uzhsk') format('truetype'),
		url('fonts/icomoon.woff?6uzhsk') format('woff'),
		url('fonts/icomoon.svg?6uzhsk#icomoon') format('svg');

замените на:
src:	url('/design/icomoon.eot?6uzhsk');
	src:	url('/design/icomoon.eot?6uzhsk#iefix') format('embedded-opentype'),
		url('/design/icomoon.ttf?6uzhsk') format('truetype'),
		url('/design/icomoon.woff?6uzhsk') format('woff'),
		url('/design/icomoon.svg?6uzhsk#icomoon') format('svg');

В шаблоне HTML найдите:
<!-- Стили магазина -->
	<style>
	  @font-face {
  font-family: 'icomoon';
  src:url('/design/icomoon.eot?-pw711i');
  src:url('/design/icomoon.eot?#iefix-pw711i') format('embedded-opentype'),
  url('/design/icomoon.ttf?-pw711i') format('truetype'),
  url('/design/icomoon.svg?-pw711i#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}	</style>
	<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}owl.carousel.css?design=caramel">
	<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}owl.theme.css?design=caramel">
	<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}owl.transitions.css?design=caramel">
	<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}jquery.formstyler.css?design=caramel">
	<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}main.css?design=caramel">
	<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}mfp.css?design=caramel">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

замените на:
	<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}owl.carousel.css?design=caramel">
	<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}owl.theme.css?design=caramel">
	<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}owl.transitions.css?design=caramel">
	<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}jquery.formstyler.css?design=caramel">
	<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}main.css?design=caramel">
	<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}mfp.css?design=caramel">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}icomoon.css">

после этого попробуйте вставить где-нибудь иконку, в demo.html можете просмотреть пример вставки.

#10 Lis

Lis

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

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

Отправлено 30 Март 2016 - 10:49

Просмотр сообщенияVaccina (30 Март 2016 - 06:13) писал:

Загрузите файлы из папки fonts, далее переименуйте файл style.css в icomoon.css и также загрузите его, в нем найдите:
src: url('fonts/icomoon.eot?6uzhsk');
src: url('fonts/icomoon.eot?6uzhsk#iefix') format('embedded-opentype'),
	 url('fonts/icomoon.ttf?6uzhsk') format('truetype'),
	 url('fonts/icomoon.woff?6uzhsk') format('woff'),
	 url('fonts/icomoon.svg?6uzhsk#icomoon') format('svg');

замените на:
src: url('/design/icomoon.eot?6uzhsk');
src: url('/design/icomoon.eot?6uzhsk#iefix') format('embedded-opentype'),
	 url('/design/icomoon.ttf?6uzhsk') format('truetype'),
	 url('/design/icomoon.woff?6uzhsk') format('woff'),
	 url('/design/icomoon.svg?6uzhsk#icomoon') format('svg');

В шаблоне HTML найдите:
<!-- Стили магазина -->
<style>
	 @font-face {
font-family: 'icomoon';
src:url('/design/icomoon.eot?-pw711i');
src:url('/design/icomoon.eot?#iefix-pw711i') format('embedded-opentype'),
url('/design/icomoon.ttf?-pw711i') format('truetype'),
url('/design/icomoon.svg?-pw711i#icomoon') format('svg');
font-weight: normal;
font-style: normal;
} </style>
<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}owl.carousel.css?design=caramel">
<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}owl.theme.css?design=caramel">
<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}owl.transitions.css?design=caramel">
<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}jquery.formstyler.css?design=caramel">
<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}main.css?design=caramel">
<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}mfp.css?design=caramel">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

замените на:
<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}owl.carousel.css?design=caramel">
<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}owl.theme.css?design=caramel">
<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}owl.transitions.css?design=caramel">
<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}jquery.formstyler.css?design=caramel">
<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}main.css?design=caramel">
<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}mfp.css?design=caramel">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}icomoon.css">

после этого попробуйте вставить где-нибудь иконку, в demo.html можете просмотреть пример вставки.
Все сделал, но вместо иконки отображается квадрат с кодом (см. фото)

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

  • Фото.png


#11 Alekseys

Alekseys

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

  • Пользователи
  • PipPipPipPip
  • 2 355 сообщений

Отправлено 30 Март 2016 - 11:38

Просмотр сообщенияLis (30 Март 2016 - 10:49) писал:

Все сделал, но вместо иконки отображается квадрат с кодом (см. фото)
Здравствуйте. На данный момент отображаются пустые прямоугольники, пожалуйста очистите кэш. В случае, если это не поможет, уточните, с какого устройства, в каком браузере Вы работаете с сайтом, и как должны отображаться эти иконки.

#12 Lis

Lis

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

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

Отправлено 30 Март 2016 - 11:50

Просмотр сообщенияAlekseys (30 Март 2016 - 11:38) писал:

Здравствуйте. На данный момент отображаются пустые прямоугольники, пожалуйста очистите кэш. В случае, если это не поможет, уточните, с какого устройства, в каком браузере Вы работаете с сайтом, и как должны отображаться эти иконки.
Здравствуйте! Очистка кэша не помогает. Работаю с сайтом с ПК, браузеры - мозилла, хром и опера. Должны отображаться иконки из пакета icomoon (верхняя строка - иконка телефона, нижняя - иконка скайп).

#13 Alekseys

Alekseys

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

  • Пользователи
  • PipPipPipPip
  • 2 355 сообщений

Отправлено 30 Март 2016 - 12:15

Просмотр сообщенияLis (30 Март 2016 - 11:50) писал:

Здравствуйте! Очистка кэша не помогает. Работаю с сайтом с ПК, браузеры - мозилла, хром и опера. Должны отображаться иконки из пакета icomoon (верхняя строка - иконка телефона, нижняя - иконка скайп).
В разделе Сайт - Редактор шаблонов - в icomoon.css замените
.icon-old-phone:before {
content: "\e903";
}
на
.icon-old-phone:before {
content: "\2706";
}
и в шаблне HTML замените
<span class="icon-skype"></span>
на
<img class="skype" src"{ASSETS_IMAGES_PATH}skype.png" style="width:16px;">
и загрузите в редактор шаблонов прикрепленное изображение.

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

  • skype.png


#14 Lis

Lis

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

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

Отправлено 30 Март 2016 - 15:04

Просмотр сообщенияAlekseys (30 Март 2016 - 12:15) писал:

В разделе Сайт - Редактор шаблонов - в icomoon.css замените
.icon-old-phone:before {
content: "\e903";
}
на
.icon-old-phone:before {
content: "\2706";
}
и в шаблне HTML замените
<span class="icon-skype"></span>
на
<img class="skype" src"{ASSETS_IMAGES_PATH}skype.png" style="width:16px;">
и загрузите в редактор шаблонов прикрепленное изображение.
Меня интересует именно применение шрифта icomoon, который я установил ранее по инструкции от Vaccina.

#15 Alekseys

Alekseys

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

  • Пользователи
  • PipPipPipPip
  • 2 355 сообщений

Отправлено 30 Март 2016 - 15:06

Просмотр сообщенияLis (30 Март 2016 - 15:04) писал:

Меня интересует именно применение шрифта icomoon, который я установил ранее по инструкции от Vaccina.
Указанные изображения не появились по причине того, что они отсутствуют в файлах шрифта icomoon.

#16 Vaccina

Vaccina

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

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

Отправлено 31 Март 2016 - 01:45

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

#17 Lis

Lis

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

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

Отправлено 31 Март 2016 - 23:54

Просмотр сообщенияVaccina (31 Март 2016 - 01:45) писал:

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

#18 Vaccina

Vaccina

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

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

Отправлено 01 Апрель 2016 - 01:42

В шаблоне icomoon.css удалите:
@font-face {
font-family: 'icomoon';
src: url('/design/icomoon.eot?6uzhsk');
	 src: url('/design/icomoon.eot?6uzhsk#iefix') format('embedded-opentype'),
			 url('/design/icomoon.ttf?6uzhsk') format('truetype'),
			 url('/design/icomoon.woff?6uzhsk') format('woff'),
			 url('/design/icomoon.svg?6uzhsk#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}

В шаблоне HTML найдите:
<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}owl.carousel.css?design=caramel">
	 <link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}owl.theme.css?design=caramel">
	 <link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}owl.transitions.css?design=caramel">
	 <link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}jquery.formstyler.css?design=caramel">

перед ним вставьте:
<style>
	 @font-face {
font-family: 'icomoon';
src: url('/design/icomoon.eot?6uzhsk');
	 src: url('/design/icomoon.eot?6uzhsk#iefix') format('embedded-opentype'),
			 url('/design/icomoon.ttf?6uzhsk') format('truetype'),
			 url('/design/icomoon.woff?6uzhsk') format('woff'),
			 url('/design/icomoon.svg?6uzhsk#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
</style>

Проверила вставку иконки после изменений, она корректно выводится:
123.jpg

#19 Lis

Lis

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

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

Отправлено 01 Апрель 2016 - 11:18

Просмотр сообщенияVaccina (01 Апрель 2016 - 01:42) писал:

В шаблоне icomoon.css удалите:
@font-face {
font-family: 'icomoon';
src: url('/design/icomoon.eot?6uzhsk');
	 src: url('/design/icomoon.eot?6uzhsk#iefix') format('embedded-opentype'),
			 url('/design/icomoon.ttf?6uzhsk') format('truetype'),
			 url('/design/icomoon.woff?6uzhsk') format('woff'),
			 url('/design/icomoon.svg?6uzhsk#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}

В шаблоне HTML найдите:
<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}owl.carousel.css?design=caramel">
	 <link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}owl.theme.css?design=caramel">
	 <link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}owl.transitions.css?design=caramel">
	 <link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}jquery.formstyler.css?design=caramel">

перед ним вставьте:
<style>
	 @font-face {
font-family: 'icomoon';
src: url('/design/icomoon.eot?6uzhsk');
	 src: url('/design/icomoon.eot?6uzhsk#iefix') format('embedded-opentype'),
			 url('/design/icomoon.ttf?6uzhsk') format('truetype'),
			 url('/design/icomoon.woff?6uzhsk') format('woff'),
			 url('/design/icomoon.svg?6uzhsk#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
</style>

Проверила вставку иконки после изменений, она корректно выводится:
Прикрепленный файл 123.jpg
Спасибо большое, Vaccina! Все получилось.




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

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