0
Изменение Формы Иконок
Автор abram3, 25 июня 2016 09:07
Сообщений в теме: 6
#1
Отправлено 25 Июнь 2016 - 09:07
Добрый день!Помогите изменить форму иконок "Хит","Новинка","Скидки".Надо сделать их круглыми.Цвет,шрифт оставить как есть
#2
Отправлено 25 Июнь 2016 - 10:19
abram3 (25 Июнь 2016 - 09:07) писал:
Добрый день!Помогите изменить форму иконок "Хит","Новинка","Скидки".Надо сделать их круглыми.Цвет,шрифт оставить как есть
Здравствуйте.
Попробуйте, пожалуйста, делать следующее:
В шаблоне main.css найдите данный код:
#producttabs .pdt-nav li span { display: block; border-radius: 30px; border: 1px solid #dddddd; text-transform: uppercase; padding: 10px 28px; color: #b7b7b7; letter-spacing: 1.5px; }
И замените его вот этим вот кодом:
#producttabs .pdt-nav li span { display: inline-flex; border-radius: 100px; border: 1px solid #dddddd; text-transform: uppercase; padding: 19px 17px; color: #b7b7b7; letter-spacing: 1.5px; height: 100px; width: 100px; text-align: center; }
Далее снова в том же шаблон найдите, пожалуйста, следующий код:
#producttabs .pdt-nav li { float: none; display: inline-block; padding: 0 1px; }
И замените его вот этим кодом:
#producttabs .pdt-nav li { float: none; display: inline-flex; padding: 0 1px; }
#4
Отправлено 03 Июль 2016 - 19:57
Кто нибудь ответит на мой вопрос?
#5
Отправлено 03 Июль 2016 - 20:03
abram3 (25 Июнь 2016 - 10:47) писал:
Спасибо!НО я видимо неправильно выразился,вот эти иконки
abram3 (03 Июль 2016 - 19:57) писал:
Кто нибудь ответит на мой вопрос?
Здравствуйте.
Тогда попробуйте, пожалуйста, сделать следующее:
В шаблоне main.css найдите данный код:
.ico-product .ico-best:before, .ico-product .ico-best:after { content: ""; position: absolute; width: 0; left: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; }
И замените его вот этим вот кодом:
.ico-product .ico-best:before, .ico-product .ico-best:after { content: ""; position: absolute; width: 0; left: 0; }
После чего в том же шаблоне найдите, пожалуйста, следующий код:
.ico-product .ico-best { background-color: #fb8233; width: 40px; color: #ffffff; font-size: 13px; position: absolute; z-index: 3; height: 20px; top: 5px; left: 5px; line-height: 20px; margin: 11px 0; display: block; text-align: center; }
И замените его этим вот кодом:
.ico-product .ico-best { background-color: #fb8233; width: 40px; color: #ffffff; font-size: 13px; position: absolute; z-index: 3; height: 40px; top: 5px; left: 5px; line-height: 40px; margin: 11px 0; display: block; text-align: center; border-radius: 50px; }
#6
Отправлено 03 Июль 2016 - 22:01
RayLi (03 Июль 2016 - 20:03) писал:
Здравствуйте.
Тогда попробуйте, пожалуйста, сделать следующее:
В шаблоне main.css найдите данный код:
И замените его вот этим вот кодом:
После чего в том же шаблоне найдите, пожалуйста, следующий код:
И замените его этим вот кодом:
Тогда попробуйте, пожалуйста, сделать следующее:
В шаблоне main.css найдите данный код:
.ico-product .ico-best:before, .ico-product .ico-best:after { content: ""; position: absolute; width: 0; left: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; }
И замените его вот этим вот кодом:
.ico-product .ico-best:before, .ico-product .ico-best:after { content: ""; position: absolute; width: 0; left: 0; }
После чего в том же шаблоне найдите, пожалуйста, следующий код:
.ico-product .ico-best { background-color: #fb8233; width: 40px; color: #ffffff; font-size: 13px; position: absolute; z-index: 3; height: 20px; top: 5px; left: 5px; line-height: 20px; margin: 11px 0; display: block; text-align: center; }
И замените его этим вот кодом:
.ico-product .ico-best { background-color: #fb8233; width: 40px; color: #ffffff; font-size: 13px; position: absolute; z-index: 3; height: 40px; top: 5px; left: 5px; line-height: 40px; margin: 11px 0; display: block; text-align: center; border-radius: 50px; }
Супер!Спасибо!А проделать тоже самое с "Новинка" и "Скидки"
#7
Отправлено 04 Июль 2016 - 11:34
abram3 (03 Июль 2016 - 22:01) писал:
Супер!Спасибо!А проделать тоже самое с "Новинка" и "Скидки"
Здравствуйте.
Для новинок и скидок будут аналогичные изменения:
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
.ico-product .ico-new:before, .ico-product .ico-new:after {content: "";position: absolute;width: 0;left: 0;border-left: 27px solid transparent;border-right: 27px solid transparent;}
Замените на:
.ico-product .ico-new:before, .ico-product .ico-new:after {content: "";position: absolute;width: 0;left: 0;}
Найдите код:
.ico-product .ico-new {background-color: #e77a9c;width: 54px;color: #ffffff;font-size: 13px;position: absolute;z-index: 3;height: 27px;top: 5px;left: 5px;line-height: 27px;margin: 11px 0;display: block;text-align: center;}
Замените на:
.ico-product .ico-new {background-color: #e77a9c;width: 54px;color: #ffffff;font-size: 13px;position: absolute;z-index: 3;height: 27px;top: 5px;left: 5px;line-height: 27px;margin: 11px 0;display: block;text-align: center;border-radius:50%;}
Для скидок:
Найдите код:
.ico-product .ico-sale:before, .ico-product .ico-sale:after {content: "";position: absolute;width: 0;left: 0;border-left: 23px solid transparent;border-right: 23px solid transparent;}
Замените на:
.ico-product .ico-sale:before, .ico-product .ico-sale:after {content: "";position: absolute;width: 0;left: 0;}
Найдите код:
.ico-product .ico-sale {background-color: #18bd9c;width: 46px;color: #ffffff;font-size: 13px;position: absolute;z-index: 3;height: 23px;top: 5px;right: 5px;line-height: 23px;margin: 11px 0;display: block;text-align: center;}
Замените на:
.ico-product .ico-sale {background-color: #18bd9c;width: 46px;color: #ffffff;font-size: 13px;position: absolute;z-index: 3;height: 23px;top: 5px;right: 5px;line-height: 23px;margin: 11px 0;display: block;text-align: center;border-radius:50%;}
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных