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

[darya_kolos]

Добрый день! Подскажите, возможно ли разом, или как вообще  изменить цвета элементов шаблона.. Интересует, например, полоса на самом верху сайта, всплывающее меню при наведении на миниатюру товара, значки "хит" и "Новинка" и многие другие элементы. Приложила несколько скриншотов и выделила подобные элементы, в которых хотелось бы изменить цвет.

И интересует также, как изменить текст у элементов, которые сразу под слайдером? (на первом фото также выделила их)

Аккаунт SL-370167

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

• 
• 
• 

[Юля123]

darya_kolos (22 Апрель 2016 - 16:20) писал:

Добрый день! Подскажите, возможно ли разом, или как вообще  изменить цвета элементов шаблона.. Интересует, например, полоса на самом верху сайта, всплывающее меню при наведении на миниатюру товара, значки "хит" и "Новинка" и многие другие элементы. Приложила несколько скриншотов и выделила подобные элементы, в которых хотелось бы изменить цвет.

И интересует также, как изменить текст у элементов, которые сразу под слайдером? (на первом фото также выделила их)

Аккаунт SL-370167

Здравствуйте, разом поменять не получится, но можно изменять с помощью встроенного поиска ctrl+f,


в поле поиска введите код цвета ( у Вас этот цвет #3cabda ):ищите этот код в файле main.css. Если Вам нужно везде заменить на другой цвет (одинаковый везде), но нажмите еще раз ctrl+f, появится еще одно поле. В нем введите код того цвета, что Вам нужно.




и нажмите на кнопку "Replace" для последовательного изменения и "All" чтобы заменить везде.


2) В шаблоне  HTML найдите код:

	 <!-- Баннеры -->
	 {% IF index_page %}
	 <div id="topsl" class="wrap">
	 <div class="container">
		 <div class="row">
		 <div class="block free-shipping col-sm-3 col-sms-6 col-smb-12">
			 <div class="block-title"><span>Бесплатная доставка</span></div>
			 <div class="block-content">Доставка по городу и области Бесплатна!</div>
		 </div>
		 <div class="block money-back col-sm-3 col-sms-6 col-smb-12">
			 <div class="block-title"><span>30 дней гарантии</span></div>
			 <div class="block-content">Вы можете вернуть товар в течении 30 дней после получения заказа</div>
		 </div>
		 <div class="block orders-247 col-sm-3 col-sms-6 col-smb-12">
			 <div class="block-title"><span>Прием заказов 24/7</span></div>
			 <div class="block-content">Оформите заказ в интернет-магазине "{SETTINGS_STORE_NAME}" Прямо сейчас!</div>
		 </div>
		 <div class="block secured-payment col-sm-3 col-sms-6 col-smb-12">
			 <div class="block-title"><span>Безопасная оплата</span></div>
			 <div class="block-content">Оплата товаров с использованием технологии 3D Secure.</div>
		 </div>
		 </div>
	 </div>
	 </div>
	 {% ENDIF %}
	 <!-- /END Баннеры -->

и заменяйте русский текст в этом коде на свой.

[darya_kolos]

Спасибо большое. Почти всё получилось. Не изменилась только панель, всплывающая при наведении на товар. Приложила скрин - здесь видно разные цвета. Где ее отыскать?

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

• 

[RedHead]

darya_kolos (23 Апрель 2016 - 12:59) писал:

Спасибо большое. Почти всё получилось. Не изменилась только панель, всплывающая при наведении на товар. Приложила скрин - здесь видно разные цвета. Где ее отыскать?

Здравствуйте. В редакторе шаблонов, в шаблоне main.css найдите строку:

.products-grid .item .item-inner .item-img .item-box-hover {z-index: 2;background-color: #3bb3c3;background-color: rgba(62, 171, 218, 0.8);position: absolute;width: 100%;height: 90px;bottom: -90px;left: 0px;}

замените ее на:

.products-grid .item .item-inner .item-img .item-box-hover {z-index: 2;background-color: #3bb3c3;position: absolute;width: 100%;height: 90px;bottom: -90px;left: 0px;}

[darya_kolos]

Спасибо! Всё именно так, как и хотела А можно еще пару вопросов не по теме?

1. Наверняка можно уменьшить отступы до и после логотипа (выделила на скриншоте)? Хотелось бы чуть уменьшить эти поля
2. Где можно настроить кнопки соц. сетей? Мне нужно в верхней меню добавить Инстаграм + оставить ВК, остальные удалить, тоже самое в нижней части сайта.. И виджет всплывающий справа - есть его какие-то другие формы возможно? Или как его настроить на свою группу в ВК?
3. Ранее я каким-то образом убрала отображение "Товары на главной" с главной страницы... Как сделать так, чтобы эта группа товаров снова отображалась на главной? (в html сменила название блока на "Товары со скидкой")

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

• 

[RedHead]

darya_kolos (23 Апрель 2016 - 16:27) писал:

Спасибо! Всё именно так, как и хотела А можно еще пару вопросов не по теме?

1. Наверняка можно уменьшить отступы до и после логотипа (выделила на скриншоте)? Хотелось бы чуть уменьшить эти поля
2. Где можно настроить кнопки соц. сетей? Мне нужно в верхней меню добавить Инстаграм + оставить ВК, остальные удалить, тоже самое в нижней части сайта.. И виджет всплывающий справа - есть его какие-то другие формы возможно? Или как его настроить на свою группу в ВК?
3. Ранее я каким-то образом убрала отображение "Товары на главной" с главной страницы... Как сделать так, чтобы эта группа товаров снова отображалась на главной? (в html сменила название блока на "Товары со скидкой")

Здравствуйте!

1) В шаблоне main.css найдите строку:

#header {position: relative;padding: 32px 0 30px;}

измените ее на:

#header {position: relative;padding: 10px 0 10px;}

2) В шаблоне html найдите строки:

<li><a href="#" class="fa fa-facebook"></a></li>
				  <li><a href="#" class="fa fa-twitter"></a></li>
				  <li><a href="#" class="fa fa-youtube"></a></li>
				  <li><a href="#" class="fa fa-vk"></a></li>

замените их на:

				  <li><a href="#" class="fa fa-inst"></a></li>
				  <li><a href="#" class="fa fa-vk"></a></li>

Вместо "#" вставьте ссылки на соцсети.

Затем, в шаблоне main.css после строки:

#header .header-right .header-right-inner .connect-us li a.fa-vk:hover {border-color: #537599;color: #537599;}

вставьте:

.fa-inst:before {content: "\f16d";}
#header .header-right .header-right-inner .connect-us li a.fa-vk:hover {border-color: #537599;color: #537599;}

В подвале:

в шаблоне html найдите блок кода:

<ul class="link-follow">
				<li><a class="facebook fa fa-facebook" href="https://www.facebook.com/" title="FaceBook.com"></a></li>
				<li><a class="twitter fa fa-twitter" href="https://twitter.com/" title="Twitter.com"></a></li>
				<li><a class="odnoklassniki fa fa-odnoklassniki" href="https://ok.ru/" title="Odnoklassniki"></a></li>
				<li><a class="vk fa fa-vk" href="https://vk.com/" title="VK.com"></a></li>
				<li><a class="youtube fa fa-instagram" href="https://instagram.com/" title="Instagram.com"></a></li>
			  </ul>

замените его на:

<ul class="link-follow">
				<li><a class="inst fa fa-inst" href="#" title=""></a></li>
				<li><a class="vk fa fa-vk" href="https://vk.com/" title="VK.com"></a></li>
			  </ul>

В конец main.css вставьте:

a.inst.fa.fa-inst::before {
	content: "\f16d";
}

затем, в том же шаблоне найдите строку:

#footer .link-follow {list-style: none;margin: 0 0 0 -155px;text-align: center;position: relative;top: -28px;width: 315px;left: 50%;height: 55px;padding:0;}

замените ее на:

#footer .link-follow {list-style: none;margin: 0 auto;text-align: center;position: relative;top: -28px;width: 130px;height: 55px;padding:0;}

Боковой виджет:
в шаблоне html найдите блок кода:

<div id="community_widget_right">
      <div class="community-widget">
        <span class="community-widget-button"><i class="fa fa-vk"></i></span>
        <div class="community-widget-content">
          <!-- VK Widget. Замените id(20003922) на id Вашей группы -->
          <div id="vk_groups"></div>
          <script type="text/javascript">
          VK.Widgets.Group("vk_groups", {mode: 0, width: "220", height: "400", color1: 'FFFFFF', color2: '666666', color3: '#3cabda'}, 20003922);
          </script>
        </div>
      </div>
    </div>

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

3) Сейчас у Вас в категории "Товары на главной" нет ни одного товара. Добавьте их в разделе ТОВАРЫ-ТОВАРЫ, они отобразятся на сайте автоматически.

[darya_kolos]

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

[darya_kolos]

Возникла еще парочка (надеюсь последних) вопросов....

1. Мы добавили в шапке кнопку инстаграм, но при наведении она так и остается серой. А кнопка ВК подсвечивается, но другим цветом (мы ранее заменили цвет шрифтов и подсвечивания элементов на другой цвет). Как сделать подсветку иконки инстаграм, а также заменить цвет иконки ВК? (Вложение 001)

2. Как можно поменять один из значков под банером? Я могу сама нарисовать такой, как мне надо в двух вариантах - серый и подсвеченный. Подскажите, где в каких строках шаблонов найти эти изображения и поменять? (вложение 002)

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

• 
• 

[Юля123]

darya_kolos (26 Апрель 2016 - 16:43) писал:

Возникла еще парочка (надеюсь последних) вопросов....

1. Мы добавили в шапке кнопку инстаграм, но при наведении она так и остается серой. А кнопка ВК подсвечивается, но другим цветом (мы ранее заменили цвет шрифтов и подсвечивания элементов на другой цвет). Как сделать подсветку иконки инстаграм, а также заменить цвет иконки ВК? (Вложение 001)

2. Как можно поменять один из значков под банером? Я могу сама нарисовать такой, как мне надо в двух вариантах - серый и подсвеченный. Подскажите, где в каких строках шаблонов найти эти изображения и поменять? (вложение 002)

Здравствуйте,

1) в main.css найдите код:

#header .header-right .header-right-inner .connect-us li a.fa-vk:hover {border-color: #537599;color: #537599;}

и замените на код:

#header .header-right .header-right-inner .connect-us li a.fa-vk:hover, #header .header-right .header-right-inner .connect-us li a.fa-inst:hover {
	border-color: #537599;
	color: #537599;
}

2) в main.css код:

#topsl .block .block-title span:after {position: absolute;content: "";background: url("{ASSETS_IMAGES_PATH}ico-shoppolicy.png") no-repeat -78px top;left: 50%;top: 4px;margin-left: -39px;height: 78px;width: 78px;}

соответственно изображение ico-shoppolicy.png - это изображение, которое отображается для каждого из элементов, меняя позицию. Это изображение Вы можете найти в разделе изображений. На картинке для каждой иконки два варианта в сером цветет и в белом. Если Вы будете изменять картинку, желательно чтобы так же было 2 варианта.

[Маргарита Пандар]

Здравствуйте. Не получилось поменять цвет всплывающего меню товара, не нахожу строку
.products-grid .item .item-inner .item-img .item-box-hover {z-index: 2;background-color: #3bb3c3;background-color: rgba(62, 171, 218, 0.8);position: absolute;width: 100%;height: 90px;bottom: -90px;left: 0px;}
как вы писали выше

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

• 

[Vaccina]

Укажите пожалуйста ваш номер аккаунта магазина.

[Маргарита Пандар]

Аккаунт SL-388992

[Danil]

Маргарита Пандар (29 Июнь 2016 - 10:13) писал:

Аккаунт SL-388992

Здравствуйте.
Код

.products-grid .item .item-inner .item-img .item-box-hover {z-index: 2;background-color: #BCCB66;background-color: rgba(62, 171, 218, 0.8);position: absolute;width: 100%;height: 90px;bottom: -90px;left: 0px;}

находится на 379 строке.

[Маргарита Пандар]

Спасибо.  Цвет всплывающего меню товара поменялся, но при наведении на иконки все равно остался голубой

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

• 

[Firefly]

Маргарита Пандар (30 Июнь 2016 - 13:54) писал:

Спасибо.  Цвет всплывающего меню товара поменялся, но при наведении на иконки все равно остался голубой

Здравствуйте.
Цвет данных иконки с помощью кода изменить не получится, поскольку они являются изображениями. Вы можете изменить их цвет в графическом редакторе. Сама картинка расположена в редакторе шаблонов в блоке Изображения с названием action-lgrid.png

Ее Вы можете скачать, изменить и загрузить обратно.

[Маргарита Пандар]

Спасибо, все получилось.
Добавила интаграм, но при наведении иконка не меняет цвет

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

• 

[Firefly]

Маргарита Пандар (30 Июнь 2016 - 15:57) писал:

Спасибо, все получилось.
Добавила интаграм, но при наведении иконка не меняет цвет

Внес Вам дополнительные изменения. Проверьте, пожалуйста.

[Маргарита Пандар]

Спасибо, светится красным

[Маргарита Пандар]

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

На скрине выделила его мышкой чтобы было видно

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

• 

[Firefly]

Маргарита Пандар (30 Июнь 2016 - 16:29) писал:

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

На скрине выделила его мышкой чтобы было видно

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Скрипты -> main.js, найдите код:

// Функция фиксации шапки
jQuery(document).ready(function($){
if($('#menu')){
$('#menu').stick_in_parent({
sticky_class: 'keep-menu'
});
}
});

Замените на:

// Функция фиксации шапки
/*jQuery(document).ready(function($){
if($('#menu')){
$('#menu').stick_in_parent({
sticky_class: 'keep-menu'
});
}
});*/