Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

0

Кнопки Каталога И Корзины

Автор Beliu, 21 июня 2016 01:32

Авторизуйтесь для ответа в теме

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

#1 Beliu

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

Пользователи
366 сообщений

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

Доброй ночи помогите пожалуйста сейчас у меня две фиксированные кнопки каталога и корзины.
Можно надпись каталога перенести вниз кнопки вместо "D" вставить логотип. в кнопке корзины написать внизу кнопки написать корзина.

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

Наверх

#2 Vaccina

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

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

Отправлено 21 Июнь 2016 - 06:37

В main.css найдите:

#fixed_catalog:after {
  content:"D";
  position: absolute;
  top: 45%;
  left: 50%;
  display: block;
  width: 1.35em;
  height: 1.475em;
  color: rgb(121,193,244);
  font-size: 220%;
  line-height: 1.5em;
  text-align: center;
  text-shadow:
	0 0.025em rgba(255,255,255,0.5),
	0 -0.025em rgba(6,111,184,0.25);
  background: rgba(255,255,255,1);
  border-radius: 0.25em;
  box-shadow:
	inset 0 -0.025em 0.05em 0em rgba(0,0,0,0.15),
	inset 0 -2.5em 3em -2em rgba(0,0,0,0.2),
	0 0.05em 0.5em 0 rgba(6,111,184,1),
	0 0.35em 0.5em rgba(6,111,184,0.35);
  transform: translate(-50%,-50%);
}

замените на:

#fixed_catalog:after {
  content:" ";
  position: absolute;
  top: 45%;
  left: 50%;
  display: block;
  width: 1.35em;
  height: 1.475em;
  background: url('ссылка на лого') no-repeat center center;
  border-radius: 0.25em;
  box-shadow:
	inset 0 -0.025em 0.05em 0em rgba(0,0,0,0.15),
	inset 0 -2.5em 3em -2em rgba(0,0,0,0.2),
	0 0.05em 0.5em 0 rgba(6,111,184,1),
	0 0.35em 0.5em rgba(6,111,184,0.35);
  transform: translate(-50%,-50%);
}

в нем измените текст на ссылку

Далее найдите:

.cart-header:after {
  content: 'к';
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 1.25em;
  height: 1.275em;
  color: #ffffff;
  font-size:250%;
  line-height: 2.5em;
  text-align: center;
  text-shadow:
	0 0.025em rgba(255,255,255,0.5),
	0 -0.025em rgba(6,111,184,0.25);
  background: rgba(255,255,255,1);
  border-radius: 0.25em;
  box-shadow:
	inset 0 -0.025em 0.05em 0em rgba(0,0,0,0.15),
	inset 0 -2.5em 3em -2em rgba(0,0,0,0.2),
	0 0.15em 0.5em 0 rgba(6,111,184,1),
	0 0.75em 0.5em rgba(6,111,184,0.35);
  transform: translate(-50%,-50%);
}

замените на:

.cart-header:after {
	content: 'К';
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 1.25em;
	height: 1.275em;
	color: #ffffff;
	font-size: 250%;
	line-height: 140px;
	text-align: center;
	text-shadow: 0 0.025em rgba(255,255,255,0.5), 0 -0.025em rgba(6,111,184,0.25);
	background: rgba(255,255,255,1);
	border-radius: 0.25em;
	box-shadow: inset 0 -0.025em 0.05em 0em rgba(0,0,0,0.15), inset 0 -2.5em 3em -2em rgba(0,0,0,0.2), 0 0.15em 0.5em 0 rgba(6,111,184,1), 0 0.75em 0.5em rgba(6,111,184,0.35);
	transform: translate(-50%,-50%);
}

Наверх

#3 Beliu

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

Пользователи
366 сообщений

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

Vaccina (21 Июнь 2016 - 06:37) писал:

В main.css найдите:

#fixed_catalog:after {
content:"D";
position: absolute;
top: 45%;
left: 50%;
display: block;
width: 1.35em;
height: 1.475em;
color: rgb(121,193,244);
font-size: 220%;
line-height: 1.5em;
text-align: center;
text-shadow:
0 0.025em rgba(255,255,255,0.5),
0 -0.025em rgba(6,111,184,0.25);
background: rgba(255,255,255,1);
border-radius: 0.25em;
box-shadow:
inset 0 -0.025em 0.05em 0em rgba(0,0,0,0.15),
inset 0 -2.5em 3em -2em rgba(0,0,0,0.2),
0 0.05em 0.5em 0 rgba(6,111,184,1),
0 0.35em 0.5em rgba(6,111,184,0.35);
transform: translate(-50%,-50%);
}

замените на:

#fixed_catalog:after {
content:" ";
position: absolute;
top: 45%;
left: 50%;
display: block;
width: 1.35em;
height: 1.475em;
background: url('ссылка на лого') no-repeat center center;
border-radius: 0.25em;
box-shadow:
inset 0 -0.025em 0.05em 0em rgba(0,0,0,0.15),
inset 0 -2.5em 3em -2em rgba(0,0,0,0.2),
0 0.05em 0.5em 0 rgba(6,111,184,1),
0 0.35em 0.5em rgba(6,111,184,0.35);
transform: translate(-50%,-50%);
}

в нем измените текст на ссылку

Далее найдите:

.cart-header:after {
content: 'к';
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 1.25em;
height: 1.275em;
color: #ffffff;
font-size:250%;
line-height: 2.5em;
text-align: center;
text-shadow:
0 0.025em rgba(255,255,255,0.5),
0 -0.025em rgba(6,111,184,0.25);
background: rgba(255,255,255,1);
border-radius: 0.25em;
box-shadow:
inset 0 -0.025em 0.05em 0em rgba(0,0,0,0.15),
inset 0 -2.5em 3em -2em rgba(0,0,0,0.2),
0 0.15em 0.5em 0 rgba(6,111,184,1),
0 0.75em 0.5em rgba(6,111,184,0.35);
transform: translate(-50%,-50%);
}

замените на:

.cart-header:after {
content: 'К';
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 1.25em;
height: 1.275em;
color: #ffffff;
font-size: 250%;
line-height: 140px;
text-align: center;
text-shadow: 0 0.025em rgba(255,255,255,0.5), 0 -0.025em rgba(6,111,184,0.25);
background: rgba(255,255,255,1);
border-radius: 0.25em;
box-shadow: inset 0 -0.025em 0.05em 0em rgba(0,0,0,0.15), inset 0 -2.5em 3em -2em rgba(0,0,0,0.2), 0 0.15em 0.5em 0 rgba(6,111,184,1), 0 0.75em 0.5em rgba(6,111,184,0.35);
transform: translate(-50%,-50%);
}

Доброй ночи что то попробовал покрутил ни че не получается давайте с корзины начнем. Вот я что то и так и так этот контент крутил не доходит как уменьшить размер шрифта текста?

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

Наверх

#4 Beliu

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

Пользователи
366 сообщений

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

или может вместо контента просто отдельно вставить туда ссылку корзина?

Наверх

#5 Vaccina

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

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

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

Лучше избавить от данных нагромождений в css:

.cart-header:before {
  content: '';
  position: absolute;
  top: 15%;
  left: 50%;
  display: block;
  width: 1.575em;
  height: 1.275em;
  border: 2px solid rgba(255,255,255,1);
  border-radius: 50%;
  box-shadow:
	inset 0 0.25em 0.25em rgba(53,166,245,1),
	inset 0 0.35em 0.25em rgba(0,0,0,0.1);
  transform: translate(-50%,-50%);
}
.cart-header:after {
  content: 'к';
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 1.25em;
  height: 1.275em;
  color: #ffffff;
  font-size:250%;
  line-height: 2.5em;
  text-align: center;
  text-shadow:
	0 0.025em rgba(255,255,255,0.5),
	0 -0.025em rgba(6,111,184,0.25);
  background: rgba(255,255,255,1);
  border-radius: 0.25em;
  box-shadow:
	inset 0 -0.025em 0.05em 0em rgba(0,0,0,0.15),
	inset 0 -2.5em 3em -2em rgba(0,0,0,0.2),
	0 0.15em 0.5em 0 rgba(6,111,184,1),
	0 0.75em 0.5em rgba(6,111,184,0.35);
  transform: translate(-50%,-50%);
}

#fixed_catalog:after {
  content:"D";
  position: absolute;
  top: 45%;
  left: 50%;
  display: block;
  width: 1.35em;
  height: 1.475em;
  color: rgb(121,193,244);
  font-size: 220%;
  line-height: 1.5em;
  text-align: center;
  text-shadow:
	0 0.025em rgba(255,255,255,0.5),
	0 -0.025em rgba(6,111,184,0.25);
  background: rgba(255,255,255,1);
  border-radius: 0.25em;
  box-shadow:
	inset 0 -0.025em 0.05em 0em rgba(0,0,0,0.15),
	inset 0 -2.5em 3em -2em rgba(0,0,0,0.2),
	0 0.05em 0.5em 0 rgba(6,111,184,1),
	0 0.35em 0.5em rgba(6,111,184,0.35);
  transform: translate(-50%,-50%);
}

Вставить иконки с текстом напрямую, список иконок: http://fontawesome.ru/all-icons/

Наверх

#6 Beliu

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

Пользователи
366 сообщений

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

Vaccina (22 Июнь 2016 - 07:03) писал:

Лучше избавить от данных нагромождений в css:

.cart-header:before {
  content: '';
  position: absolute;
  top: 15%;
  left: 50%;
  display: block;
  width: 1.575em;
  height: 1.275em;
  border: 2px solid rgba(255,255,255,1);
  border-radius: 50%;
  box-shadow:
	inset 0 0.25em 0.25em rgba(53,166,245,1),
	inset 0 0.35em 0.25em rgba(0,0,0,0.1);
  transform: translate(-50%,-50%);
}
.cart-header:after {
  content: 'к';
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 1.25em;
  height: 1.275em;
  color: #ffffff;
  font-size:250%;
  line-height: 2.5em;
  text-align: center;
  text-shadow:
	0 0.025em rgba(255,255,255,0.5),
	0 -0.025em rgba(6,111,184,0.25);
  background: rgba(255,255,255,1);
  border-radius: 0.25em;
  box-shadow:
	inset 0 -0.025em 0.05em 0em rgba(0,0,0,0.15),
	inset 0 -2.5em 3em -2em rgba(0,0,0,0.2),
	0 0.15em 0.5em 0 rgba(6,111,184,1),
	0 0.75em 0.5em rgba(6,111,184,0.35);
  transform: translate(-50%,-50%);
}

#fixed_catalog:after {
  content:"D";
  position: absolute;
  top: 45%;
  left: 50%;
  display: block;
  width: 1.35em;
  height: 1.475em;
  color: rgb(121,193,244);
  font-size: 220%;
  line-height: 1.5em;
  text-align: center;
  text-shadow:
	0 0.025em rgba(255,255,255,0.5),
	0 -0.025em rgba(6,111,184,0.25);
  background: rgba(255,255,255,1);
  border-radius: 0.25em;
  box-shadow:
	inset 0 -0.025em 0.05em 0em rgba(0,0,0,0.15),
	inset 0 -2.5em 3em -2em rgba(0,0,0,0.2),
	0 0.05em 0.5em 0 rgba(6,111,184,1),
	0 0.35em 0.5em rgba(6,111,184,0.35);
  transform: translate(-50%,-50%);
}

Вставить иконки с текстом напрямую, список иконок: http://fontawesome.ru/all-icons/

не, получается что пропадет мой иконка пакет) За иконки спасибо

Наверх

#7 Beliu

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

Пользователи
366 сообщений

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

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

Наверх

#8 Beliu

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

Пользователи
366 сообщений

Отправлено 24 Июнь 2016 - 04:02

Beliu (24 Июнь 2016 - 01:55) писал:

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

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

Наверх

#9 Beliu

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

Пользователи
366 сообщений

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

Здравствуйте нагромождения со значка каталог убрал подскажите пожалуйста как туда вставить иконку iorder.

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

Наверх

#10 Firefly

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

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

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

Beliu (01 Июль 2016 - 01:18) писал:

Здравствуйте нагромождения со значка каталог убрал подскажите пожалуйста как туда вставить иконку iorder.

Здравствуйте.
Подключил Вам иконки по первому способу инструкции на сайте http://fontawesome.ru/ и установил требуемую иконку, добавив пару стилей в main.css.
Проверьте, пожалуйста.

Наверх

#11 Beliu

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

Пользователи
366 сообщений

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

Firefly (01 Июль 2016 - 09:58) писал:

Здравствуйте.
Подключил Вам иконки по первому способу инструкции на сайте http://fontawesome.ru/ и установил требуемую иконку, добавив пару стилей в main.css.
Проверьте, пожалуйста.

Спасибо большое. А как иконку побольше сделать?

Наверх

#12 Firefly

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

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

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

Beliu (01 Июль 2016 - 13:33) писал:

Спасибо большое. А как иконку побольше сделать?

Установил Вам размер шрифта иконки чуть больше (34px)

#fixed_catalog i {font-size:34px;}

Проверьте, пожалуйста.

Наверх

#13 Beliu

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

Пользователи
366 сообщений

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

Firefly (01 Июль 2016 - 14:01) писал:

Установил Вам размер шрифта иконки чуть больше (34px)

#fixed_catalog i {font-size:34px;}

Проверьте, пожалуйста.

спасибо

Наверх

#14 Beliu

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

Пользователи
366 сообщений

Отправлено 26 Август 2016 - 00:39

Vaccina (22 Июнь 2016 - 07:03) писал:

Лучше избавить от данных нагромождений в css:

.cart-header:before {
content: '';
position: absolute;
top: 15%;
left: 50%;
display: block;
width: 1.575em;
height: 1.275em;
border: 2px solid rgba(255,255,255,1);
border-radius: 50%;
box-shadow:
inset 0 0.25em 0.25em rgba(53,166,245,1),
inset 0 0.35em 0.25em rgba(0,0,0,0.1);
transform: translate(-50%,-50%);
}
.cart-header:after {
content: 'к';
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 1.25em;
height: 1.275em;
color: #ffffff;
font-size:250%;
line-height: 2.5em;
text-align: center;
text-shadow:
0 0.025em rgba(255,255,255,0.5),
0 -0.025em rgba(6,111,184,0.25);
background: rgba(255,255,255,1);
border-radius: 0.25em;
box-shadow:
inset 0 -0.025em 0.05em 0em rgba(0,0,0,0.15),
inset 0 -2.5em 3em -2em rgba(0,0,0,0.2),
0 0.15em 0.5em 0 rgba(6,111,184,1),
0 0.75em 0.5em rgba(6,111,184,0.35);
transform: translate(-50%,-50%);
}

#fixed_catalog:after {
content:"D";
position: absolute;
top: 45%;
left: 50%;
display: block;
width: 1.35em;
height: 1.475em;
color: rgb(121,193,244);
font-size: 220%;
line-height: 1.5em;
text-align: center;
text-shadow:
0 0.025em rgba(255,255,255,0.5),
0 -0.025em rgba(6,111,184,0.25);
background: rgba(255,255,255,1);
border-radius: 0.25em;
box-shadow:
inset 0 -0.025em 0.05em 0em rgba(0,0,0,0.15),
inset 0 -2.5em 3em -2em rgba(0,0,0,0.2),
0 0.05em 0.5em 0 rgba(6,111,184,1),
0 0.35em 0.5em rgba(6,111,184,0.35);
transform: translate(-50%,-50%);
}

Вставить иконки с текстом напрямую, список иконок: http://fontawesome.ru/all-icons/

помогите пожалуйста еще икону на корзину поставить (http://fontawesome.r...n/shopping-bag/) вот эту.

Наверх

#15 Danil

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

Пользователи
4 645 сообщений

Отправлено 28 Август 2016 - 19:38

Beliu (26 Август 2016 - 00:39) писал:

помогите пожалуйста еще икону на корзину поставить (http://fontawesome.r...n/shopping-bag/) вот эту.

Обозначьте, пожалуйста, на скриншоте, как примерно должна отображаться иконка на Вашем сайте. Нужно но ли удалить"0" и букву "к"?

Наверх

#16 Beliu

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

Пользователи
366 сообщений

Отправлено 29 Август 2016 - 09:19

Danil (28 Август 2016 - 19:38) писал:

Обозначьте, пожалуйста, на скриншоте, как примерно должна отображаться иконка на Вашем сайте. Нужно но ли удалить"0" и букву "к"?

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

Наверх

#17 Danil

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

Пользователи
4 645 сообщений

Отправлено 31 Август 2016 - 10:47

Beliu (29 Август 2016 - 09:19) писал:

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

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