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


Изменение Формы Иконок


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

#1 abram3

abram3

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

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

Отправлено 25 Июнь 2016 - 09:07

Добрый день!Помогите изменить форму иконок "Хит","Новинка","Скидки".Надо сделать их круглыми.Цвет,шрифт оставить как есть

#2 RayLi

RayLi

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

  • Модераторы
  • 2 864 сообщений

Отправлено 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;
}


#3 abram3

abram3

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

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

Отправлено 25 Июнь 2016 - 10:47

Спасибо!НО я видимо неправильно выразился,вот эти иконки

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

  • Screenshot_12.png


#4 abram3

abram3

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

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

Отправлено 03 Июль 2016 - 19:57

Кто нибудь ответит на мой вопрос?

#5 RayLi

RayLi

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

  • Модераторы
  • 2 864 сообщений

Отправлено 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 abram3

abram3

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

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

Отправлено 03 Июль 2016 - 22:01

Просмотр сообщенияRayLi (03 Июль 2016 - 20:03) писал:

Здравствуйте.
Тогда попробуйте, пожалуйста, сделать следующее:
В шаблоне 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 Firefly

Firefly

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

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

Отправлено 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 анонимных