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


Изминения Общей Стилистики


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

#41 AnnaM

AnnaM

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

  • Модератоpы
  • 1 040 сообщений

Отправлено 17 Ноябрь 2014 - 20:32

Просмотр сообщенияViktorIG (17 Ноябрь 2014 - 20:21) писал:

Подскажите, как уменьшить высоту пунктов каталога в шапке? У нас сейчас категории в каталоге распределились на 3 строки и заголовок каталога получается очень высоким.
В main.css замените
.header .primary .navbar .nav > li > a {
background: none;
border: 1px solid #fff;
border: 1px solid transparent;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #1e1e1e;
padding: 11px 13px;
position: static;
text-shadow: none;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
z-index: 901;
}
на
.header .primary .navbar .nav > li > a {
background: none;
border: 1px solid #fff;
border: 1px solid transparent;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #1e1e1e;
padding: 6px 13px;
position: static;
text-shadow: none;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
z-index: 901;
}


#42 ViktorIG

ViktorIG

    Пользователь

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

Отправлено 17 Ноябрь 2014 - 22:37

Спасибо, все получилось.

Подскажите, а почему уже дважды проигнорировали мою просьбу по переносу полей обратного звонка в шапку, по нажатию на иконку телефона?

#43 Vaccina

Vaccina

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

  • Модераторы
  • 23 716 сообщений

Отправлено 18 Ноябрь 2014 - 04:29

В шаблоне HTML найдите:
<!-- Телефон при нажатии -->
				<div class="phone-active col-sm-10 col-md-10">
				  <a href="#" class="close"><span>Закрыть</span>×</a>
				  {% IF SETTINGS_STORE_PHONE_NUMBER1 %}
					<span class="title">{SETTINGS_STORE_PHONE_COUNTRY_CODE1} {SETTINGS_STORE_PHONE_CITY_CODE1}</span> <strong>{SETTINGS_STORE_PHONE_NUMBER1}</strong>
				  {% ELSE %}
					<span class="no-phone">Добавьте номер телефона в Настройках</span>
				  {% ENDIF %}
				</div>
замените на:
<!-- Телефон при нажатии -->
				<div class="phone-active col-sm-10 col-md-10">
				  ОБРАТНЫЙ ЗВОНОК
	  <form method="post" action="{CALLBACK_URL}" class="callbackForm" enctype="multipart/form-data">
	   
		 <input type="hidden" name="hash" value="{HASH}" />
		 <!-- Набор полей которые не видит пользователь, но видят боты. Когда они их заполняют мы точно знаем, что их прислал нам бот и мы не сохраняем подобный отзыв о товаре, а боту отправившему отзыв сообщаем, что отзыв добавлен успешно, но будет отображён здесь после прохождения модерации -->
		 {ANTISPAM_CODE}
		 <table class="form">
				 <tr>
				 <td><label for="callback_person" class="required">Имя</label></td>
				 <td><input id="callback_person" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PERSON}]" value="{FORM_CALLBACK_PERSON}" maxlength="50" class="required"/></td>
				 </tr>
				 <tr>
				 <td><label for="callback_phone" class="required">Телефон</label></td>
				 <td><input id="callback_phone" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PHONE}]" value="{FORM_CALLBACK_PHONE}" maxlength="255" class="required input-text"/></td>
				 </tr>
		 </table>
		 {% IFNOT FORM_SEND_OK %}<button type="submit" title="Отправить" class="button">Отправить</button>{% ENDIF %}
</form>
				</div>


#44 ViktorIG

ViktorIG

    Пользователь

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

Отправлено 18 Ноябрь 2014 - 13:55


  • Просмотр сообщенияVaccina (18 Ноябрь 2014 - 04:29) писал:

    замените на:

Спасибо. Сделал, как вы порекомендовали. Прошу посмотреть, что получилось - выводится надпись "Обратный звонок", вроде как появляется поле для редактирования, но при клике на этом поле курсор появляется и после сразу появляется каталог.

  • Номер аккаунта:sl-297630


#45 Alekseys

Alekseys

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

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

Отправлено 18 Ноябрь 2014 - 14:14

Просмотр сообщенияViktorIG (18 Ноябрь 2014 - 13:55) писал:

Спасибо. Сделал, как вы порекомендовали. Прошу посмотреть, что получилось - выводится надпись "Обратный звонок", вроде как появляется поле для редактирования, но при клике на этом поле курсор появляется и после сразу появляется каталог.
  • Номер аккаунта:sl-297630
Здравствуйте. Уточните пожалуйста, что именно Вам нужно изменить.

#46 ViktorIG

ViktorIG

    Пользователь

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

Отправлено 18 Ноябрь 2014 - 14:30

Просмотр сообщенияAlekseys (18 Ноябрь 2014 - 14:14) писал:

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

Нам надо сделать так, чтобы при нажатии на иконку телефона в шапке, в шапке появлялись поля для ввода данных обратного звонка и кнопка заказа обратного звонка. По аналогии, как это сейчас работает при нажатии на кнопку поиска.

Вот так:
5.png

#47 Prorock_Ugl

Prorock_Ugl

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

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

Отправлено 18 Ноябрь 2014 - 15:51

Просмотр сообщенияRayLi (17 Ноябрь 2014 - 14:26) писал:

Найдите в шаблоне main.css следующие коды:
1. Найдите первый код:


Кое что вышло. Не получилось с бордюрами. И в выпадающем меню хочется получить результат аналогичный полю корзины

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

  • скрин2.png
  • скрин.png


#48 RayLi

RayLi

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

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

Отправлено 18 Ноябрь 2014 - 16:09

Просмотр сообщенияProrock_Ugl (18 Ноябрь 2014 - 15:51) писал:

Кое что вышло. Не получилось с бордюрами. И в выпадающем меню хочется получить результат аналогичный полю корзины
Здравствуйте.
Зайдите в шаблон main.css и найдите следующие коды:
1. Ищем первый код:
.header .primary .navbar .nav > li.parent:hover > a {
background: #fff;
border-bottom-color: transparent;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
И заменяем этим:
.header .primary .navbar .nav > li.parent:hover > a {
border-bottom-color: transparent;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
2. Ищем второй код:
.header .primary .sub {
background: #fff;
border: 1px solid #ccc;
-webkit-border-radius: 0 3px 3px 3px;
-moz-border-radius: 0 3px 3px 3px;
border-radius: 0 3px 3px 3px;
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.15);
-moz-box-shadow: 0 0 5px rgba(0,0,0,.15);
box-shadow: 0 0 5px rgba(0,0,0,.15);
display: none;
font-size: 13px;
line-height: 24px;
margin: -1px 0 0;
padding: 15px 20px;
position: absolute;
z-index: 905;
}
И заменяем этим кодом:
.header .primary .sub {
background: rgba(148, 45, 45, 0.8);
border: 1px solid #ccc;
-webkit-border-radius: 0 3px 3px 3px;
-moz-border-radius: 0 3px 3px 3px;
border-radius: 0 3px 3px 3px;
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.15);
-moz-box-shadow: 0 0 5px rgba(0,0,0,.15);
box-shadow: 0 0 5px rgba(0,0,0,.15);
display: none;
font-size: 13px;
line-height: 24px;
margin: -1px 0 0;
padding: 15px 20px;
position: absolute;
z-index: 905;
}
3. Ищем третий код:
.header .primary .navbar .nav > li.parent:hover > a:after {
background: #fff;
display: block;
-webkit-transition: background 0.1s linear;
transition: background 0.1s linear;
}
И заменяем его:
.header .primary .navbar .nav > li.parent:hover > a:after {
display: block;
-webkit-transition: background 0.1s linear;
transition: background 0.1s linear;
}
4. Ищем четвёртый код:
#footer .sidebar .widget .footer-header .title {
color: #1e1e1e;
font-size: 16px;
font-weight: normal;
line-height: 1.3;
text-transform: uppercase;
margin: 0;
}
И заменяем его этим кодом:
#footer .sidebar .widget .footer-header .title {
color: #A63636;
font-size: 16px;
font-weight: normal;
line-height: 1.3;
text-transform: uppercase;
margin: 0;
}
5. Теперь найдите пятый код:
.phone-header, .search-header, .compare-header {
border-right: 1px solid #ccc;
color: #1e1e1e;
display: inline-block;
height: 30px;
margin: 8px 0;
position: relative;
text-align: center;
vertical-align: top;
width: 30px;
}
И замените го, например на этот код:
.phone-header, .search-header, .compare-header {
border-right: 1px solid rgba(142, 40, 40, 0.8);
color: #1e1e1e;
display: inline-block;
height: 30px;
margin: 8px 0;
position: relative;
text-align: center;
vertical-align: top;
width: 30px;
}


#49 Prorock_Ugl

Prorock_Ugl

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

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

Отправлено 19 Ноябрь 2014 - 13:04

Просмотр сообщенияRayLi (18 Ноябрь 2014 - 16:09) писал:

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


Отлично, все вышло. Осталось сделать кнопку меню как при наведении(показано на скрине)

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

  • скрин3.png


#50 Danil

Danil

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

  • Модераторы
  • 4 645 сообщений

Отправлено 19 Ноябрь 2014 - 13:32

Просмотр сообщенияProrock_Ugl (19 Ноябрь 2014 - 13:04) писал:

Отлично, все вышло. Осталось сделать кнопку меню как при наведении(показано на скрине)
Здравствуйте.
В main.css найдите
.header .primary .navbar .nav > li:hover > a {
background: #fff;
border-color: #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.15);
-moz-box-shadow: 0 0 5px rgba(0,0,0,.15);
box-shadow: 0 0 5px rgba(0,0,0,.15);
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
и замените на
.header .primary .navbar .nav > li:hover > a {
background: rgba(100, 40, 40, 0.8);
border-color: #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.15);
-moz-box-shadow: 0 0 5px rgba(0,0,0,.15);
box-shadow: 0 0 5px rgba(0,0,0,.15);
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}


#51 Prorock_Ugl

Prorock_Ugl

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

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

Отправлено 19 Ноябрь 2014 - 13:41

Все получилось как надо. Спасибо. Идем дальше

#52 Prorock_Ugl

Prorock_Ugl

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

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

Отправлено 19 Ноябрь 2014 - 14:38

Настала пора поработать с полем поиска.

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

  • скрин4.png


#53 Danil

Danil

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

  • Модераторы
  • 4 645 сообщений

Отправлено 19 Ноябрь 2014 - 14:45

Просмотр сообщенияProrock_Ugl (19 Ноябрь 2014 - 14:38) писал:

Настала пора поработать с полем поиска.
В main.css найдите
.search-active .search-string {
background: #ffffff;
}
и замените на
.search-active .search-string {
background: rgba(144, 60, 60, 0.68);
}
изменяйте значение background(параметр 0.68 - прозрачность)
так же найдите
.search-active .search-string, .search-active .search-string:hover {
color: #1e1e1e;
font-size: 24px;
max-height: 65px;
line-height: 30px;
margin: 0;
padding: 14px 135px 14px 18px;
width: 100%;
display: block;
background-color: #F22020;
border: 1px solid #e1e1e1;
border-radius: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-moz-box-shadow: none;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
и замените на
.search-active .search-string, .search-active .search-string:hover {
color: #1e1e1e;
font-size: 24px;
max-height: 65px;
line-height: 30px;
margin: 0;
padding: 14px 135px 14px 18px;
width: 100%;
display: block;
background: rgba(144, 60, 60, 0.68);
border: 1px solid #e1e1e1;
border-radius: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-moz-box-shadow: none;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
изменяйте по аналогии с предыдущим

#54 Prorock_Ugl

Prorock_Ugl

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

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

Отправлено 19 Ноябрь 2014 - 15:07

Спасибо, осталось убрать белое поле

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

  • скрин5.png


#55 Danil

Danil

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

  • Модераторы
  • 4 645 сообщений

Отправлено 19 Ноябрь 2014 - 15:15

Просмотр сообщенияProrock_Ugl (19 Ноябрь 2014 - 15:07) писал:

Спасибо, осталось убрать белое поле
Изменения произвели, проверьте.

#56 Prorock_Ugl

Prorock_Ugl

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

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

Отправлено 19 Ноябрь 2014 - 15:26

Просмотр сообщенияDanil (19 Ноябрь 2014 - 15:15) писал:

Изменения произвели, проверьте.

Спасибо, а размер поля поиска можно в ширину отредактировать?

Снова поле появилось((

#57 Danil

Danil

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

  • Модераторы
  • 4 645 сообщений

Отправлено 19 Ноябрь 2014 - 15:34

Просмотр сообщенияProrock_Ugl (19 Ноябрь 2014 - 15:26) писал:

Спасибо, а размер поля поиска можно в ширину отредактировать?

Снова поле появилось((
Изменения вернул.
Для редактирования поля поиска в конец main.css добавьте
.search-active.col-sm-10.col-md-10.open form {
width: 100%;
}
изменяйте 100%

#58 Prorock_Ugl

Prorock_Ugl

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

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

Отправлено 19 Ноябрь 2014 - 15:37

че-то не прокатило с белым полем((

Можно его навсегда убрать?..оно не к чему там..а цвет менять на усмотрение

#59 Danil

Danil

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

  • Модераторы
  • 4 645 сообщений

Отправлено 19 Ноябрь 2014 - 15:39

Просмотр сообщенияProrock_Ugl (19 Ноябрь 2014 - 15:37) писал:

че-то не прокатило с белым полем((

Можно его навсегда убрать?..оно не к чему там..а цвет менять на усмотрение
В main.css найдите
.search-active.col-sm-10.col-md-10.open {
background: #fff;
}
и замените на
.search-active.col-sm-10.col-md-10.open {
{background: url(http://kzearphone.storeland.net/bg.gif) repeat;-webkit-transition: background 0.2s linear;transition: background 0.2s linear;}
}
так же найдите
.search-active .search-string, .search-active .search-string:hover {
color: #1e1e1e;
font-size: 24px;
max-height: 65px;
line-height: 30px;
margin: 0;
padding: 14px 135px 14px 18px;
width: 100%;
display: block;
background: rgba(144, 60, 60, 0.68);
border: 1px solid #e1e1e1;
border-radius: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-moz-box-shadow: none;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
и замените на
.search-active .search-string, .search-active .search-string:hover {
color: #1e1e1e;
font-size: 24px;
max-height: 65px;
line-height: 30px;
margin: 0;
padding: 14px 135px 14px 18px;
width: 100%;
display: block;
background: #fff;
border: 1px solid #e1e1e1;
border-radius: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-moz-box-shadow: none;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}


#60 Prorock_Ugl

Prorock_Ugl

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

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

Отправлено 19 Ноябрь 2014 - 15:59

Супер..А цвет текста ввода поиска покажите, пожалуйста, где в коде заменить можно?




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных