Изменение Цвета Разных Элементов Шаблона
#1
Отправлено 22 Апрель 2016 - 16:20
И интересует также, как изменить текст у элементов, которые сразу под слайдером? (на первом фото также выделила их)
Аккаунт SL-370167
#2
Отправлено 22 Апрель 2016 - 16:58
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 Баннеры -->
и заменяйте русский текст в этом коде на свой.
#4
Отправлено 23 Апрель 2016 - 13:04
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;}
#5
Отправлено 23 Апрель 2016 - 16:27
1. Наверняка можно уменьшить отступы до и после логотипа (выделила на скриншоте)? Хотелось бы чуть уменьшить эти поля
2. Где можно настроить кнопки соц. сетей? Мне нужно в верхней меню добавить Инстаграм + оставить ВК, остальные удалить, тоже самое в нижней части сайта.. И виджет всплывающий справа - есть его какие-то другие формы возможно? Или как его настроить на свою группу в ВК?
3. Ранее я каким-то образом убрала отображение "Товары на главной" с главной страницы... Как сделать так, чтобы эта группа товаров снова отображалась на главной? (в html сменила название блока на "Товары со скидкой")
#6
Отправлено 23 Апрель 2016 - 17:33
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) Сейчас у Вас в категории "Товары на главной" нет ни одного товара. Добавьте их в разделе ТОВАРЫ-ТОВАРЫ, они отобразятся на сайте автоматически.
#7
Отправлено 23 Апрель 2016 - 18:27
#8
Отправлено 26 Апрель 2016 - 16:43
1. Мы добавили в шапке кнопку инстаграм, но при наведении она так и остается серой. А кнопка ВК подсвечивается, но другим цветом (мы ранее заменили цвет шрифтов и подсвечивания элементов на другой цвет). Как сделать подсветку иконки инстаграм, а также заменить цвет иконки ВК? (Вложение 001)
2. Как можно поменять один из значков под банером? Я могу сама нарисовать такой, как мне надо в двух вариантах - серый и подсвеченный. Подскажите, где в каких строках шаблонов найти эти изображения и поменять? (вложение 002)
#9
Отправлено 27 Апрель 2016 - 12:30
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 варианта.
#10
Отправлено 21 Июнь 2016 - 14:07
.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;}
как вы писали выше
#11
Отправлено 22 Июнь 2016 - 03:49
#12
Отправлено 29 Июнь 2016 - 10:13
#13
Отправлено 29 Июнь 2016 - 10:34
Маргарита Пандар (29 Июнь 2016 - 10:13) писал:
Код
.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 строке.
#15
Отправлено 30 Июнь 2016 - 14:00
Маргарита Пандар (30 Июнь 2016 - 13:54) писал:
Здравствуйте.
Цвет данных иконки с помощью кода изменить не получится, поскольку они являются изображениями. Вы можете изменить их цвет в графическом редакторе. Сама картинка расположена в редакторе шаблонов в блоке Изображения с названием action-lgrid.png
Ее Вы можете скачать, изменить и загрузить обратно.
#18
Отправлено 30 Июнь 2016 - 16:21
#19
Отправлено 30 Июнь 2016 - 16:29
На скрине выделила его мышкой чтобы было видно
#20
Отправлено 30 Июнь 2016 - 16:34
Маргарита Пандар (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' }); } });*/
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных