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


Логотип И Телефон

Логитип номер телефона Телефон Шапка главная

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

#1 Дима Шумский

Дима Шумский

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

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

Отправлено 03 Май 2015 - 10:47

Здрасте! Аккаунт SL-335085. Будьте добры! Подскажите, как реализовать:

как.png

1. Установить номер телефона с размером шрифта как на картинке,
2. Подвинуть меню и на это место поместить логотип и телефон
3. Убрать серую полосу

Спасибо!

#2 Firefly

Firefly

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

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

Отправлено 03 Май 2015 - 12:33

Просмотр сообщенияДима Шумский (03 Май 2015 - 10:47) писал:

Здрасте! Аккаунт SL-335085. Будьте добры! Подскажите, как реализовать:

Прикрепленный файл как.png

1. Установить номер телефона с размером шрифта как на картинке,
2. Подвинуть меню и на это место поместить логотип и телефон
3. Убрать серую полосу

Спасибо!

Здравствуйте.
1,2 Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> HTML найдите и удалите код:
<!-- Логотип -->
			  <div class="logo col-lg-3 col-md-2 col-xs-12">
				<a title="{SETTINGS_STORE_NAME}" href="http://{NET_DOMAIN}/">			   
				  <img alt="{SETTINGS_STORE_NAME}" src="{ASSETS_IMAGES_PATH}logo.jpg?design=orange">								  
				</a>
			  </div>

Найдите код:
<!-- Основное меню -->
			  <div class="header-top-left col-lg-9 col-md-9 col-sm-6 col-xs-12">
				<div class="top-navbar">
				  <button type="button" class="button-navbar two btn-top-navbar" data-toggle="collapse" data-target=".top-navbar .navbar-collapse">
					<span class="text">Меню</span>
				  </button>
				  <div class="navbar-collapse collapse">

Замените на:
<!-- Основное меню -->
			  <div class="header-top-left col-lg-9 col-md-9 col-sm-6 col-xs-12">
				<div class="top-navbar">
				  <button type="button" class="button-navbar two btn-top-navbar" data-toggle="collapse" data-target=".top-navbar .navbar-collapse">
					<span class="text">Меню</span>
				  </button>
				  <div class="navbar-collapse collapse">
					<!-- Логотип -->
			  <div class="logo col-lg-3 col-md-2 col-xs-12">
				<a title="{SETTINGS_STORE_NAME}" href="http://{NET_DOMAIN}/">			   
				  <img alt="{SETTINGS_STORE_NAME}" src="{ASSETS_IMAGES_PATH}logo.jpg?design=orange">							 
				</a>
				<p>8-(123)-456-78-90</p>
			  </div>

Не забудьте изменить номер телефона на свой.

В самом конце main.css вставьте код:

.logo.col-lg-3.col-md-2.col-xs-12 a img {
height: 50px;
}
 
.logo.col-lg-3.col-md-2.col-xs-12 p {
  padding-left: 110px;
  position: relative;
  bottom: 45px;
  font: bold 35px sans-serif;
  white-space: nowrap;
}

3. В main.css найдите код:
.header-top {background-color: #f2f2f2;height: 50px;}

Замените на:
.header-top {height: 50px;}


#3 Дима Шумский

Дима Шумский

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

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

Отправлено 03 Май 2015 - 13:51

Сделал. Вроде вышло, но номер телефона стал заслонять доставку контакты и личный кабинет.

как2.png

1.Как можно сместить доставку, контакты, и личный кабинет вправо, как показано на картинке?
2.Как можно слегка отодвинуть номер телефона от логотипа вправо?
3 Возможно ли увеличить логотип, как показано на картинке?

Спасибо!

#4 Firefly

Firefly

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

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

Отправлено 03 Май 2015 - 14:59

Просмотр сообщенияДима Шумский (03 Май 2015 - 13:51) писал:

Сделал. Вроде вышло, но номер телефона стал заслонять доставку контакты и личный кабинет.

Прикрепленный файл как2.png

1.Как можно сместить доставку, контакты, и личный кабинет вправо, как показано на картинке?
2.Как можно слегка отодвинуть номер телефона от логотипа вправо?
3 Возможно ли увеличить логотип, как показано на картинке?

Спасибо!

1.В main.css найдите код:
.header-top .header-top-left .top-navbar-links {float:left;list-style:none;overflow: hidden;height: 50px;}

Замените на:
.header-top .header-top-left .top-navbar-links {float:right;list-style:none;overflow: hidden;height: 50px;}

2.Найдите код:
.logo.col-lg-3.col-md-2.col-xs-12 p {padding-left: 110px; position: relative; bottom: 45px; font: bold 35px sans-serif; white-space: nowrap;}

Замените на:
.logo.col-lg-3.col-md-2.col-xs-12 p {padding-left: 150px; position: relative; bottom: 45px; font: bold 35px sans-serif; white-space: nowrap;}

3.Найдите код:
.logo.col-lg-3.col-md-2.col-xs-12 a img {height: 50px;}

Замените на:
.logo.col-lg-3.col-md-2.col-xs-12 a img {height: 75px;}


#5 Дима Шумский

Дима Шумский

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

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

Отправлено 04 Май 2015 - 10:51

Немного разобрался. Но появились нюансы

как3.png

1.Пропала "кликабельность" логотипа. Как сделать так, чтобы на всю область логотипа можно было кликнуть?
2.Как сделать шрифт пунктов меню больше и жирнее
3.Как поменять цвет номера телефона?

Спасибо!

#6 Ирина345

Ирина345

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

  • Модераторы
  • 5 709 сообщений

Отправлено 04 Май 2015 - 15:57

Просмотр сообщенияДима Шумский (04 Май 2015 - 10:51) писал:

Немного разобрался. Но появились нюансы

Прикрепленный файл как3.png

1.Пропала "кликабельность" логотипа. Как сделать так, чтобы на всю область логотипа можно было кликнуть?
2.Как сделать шрифт пунктов меню больше и жирнее
3.Как поменять цвет номера телефона?

Спасибо!
Здравствуйте,
1. найдите в main.css
.logo.col-lg-3.col-md-2.col-xs-12 p {
 padding-left: 280px;
  position: relative;
  bottom: 100px;
  font: bold 75px sans-serif;
  white-space: nowrap;
}
замените на

.logo.col-lg-3.col-md-2.col-xs-12 p {
	position: relative;
  bottom: 100px;
  font: bold 75px sans-serif;
  white-space: nowrap;
  margin-left: 264px;
  color: #123456;
}
что бы изменить цвет телефона, меняйте значение  color: #123456;
2 далее найдите

.header-top .header-top-left .top-navbar-links li a {
  padding: 18px 18px 12px 18px;
  display: block;
  font-size: 115%;
}
замените на

.header-top .header-top-left .top-navbar-links li a {
  padding: 18px 18px 12px 18px;
  display: block;
  font-size: 15px;
  font-weight: bolder;
}
что изменить размер шрифта, изменяете значение
  font-size: 15px;

#7 Дима Шумский

Дима Шумский

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

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

Отправлено 05 Май 2015 - 11:56

Супер! Всё получилось. Только осталась ещё одна проблемка.

как4.png

На некоторых страницах остались категории, которые лезут под номер телефона.

Вопрос: Как убрать эти категории со всех страниц?

Спасибо!

#8 MikDark

MikDark

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

  • Модераторы
  • 6 469 сообщений

Отправлено 05 Май 2015 - 12:34

Просмотр сообщенияДима Шумский (05 Май 2015 - 11:56) писал:

Супер! Всё получилось. Только осталась ещё одна проблемка.

Прикрепленный файл как4.png

На некоторых страницах остались категории, которые лезут под номер телефона.

Вопрос: Как убрать эти категории со всех страниц?

Спасибо!

Удалите из шаблона HTML код:
<div class="container">
			<div class="row">
			  <!-- Каталог в шапке -->
			  <div class="yt-main-menu col-lg-9 col-md-10 col-xs-12">
				<!-- Кнопка каталога в меню для мобильных устройств -->
				<div id="yt-responsivemenu" class="yt-responsivemenu">
				  <button type="button" class="button-navbar two btn btn-navbar" title="Показать каталог">
					<span class="text">Каталог</span>
				  </button>
				</div>
{% IFNOT index_page %}
						 <!-- Каталог с подкатегориями -->
						 <div class="yt-menu">
								 <div class="yt-menu-nav">
								 <ul id="nav" class="clearfix">
								 {%IFNOT catalog_full_empty%}
										 {%FOR catalog_full%}
										 {% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub {% IF catalog_full.LEVEL > 2 %}hide-cat{% ENDIF %} {% IF catalog_full.LEVEL = 1 %}dropdown-menu{% ENDIF %}">{% ENDIF %}{% ENDIF %}
												 <li class="category-level-{catalog_full.LEVEL} {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}">
												 <a href="{catalog_full.URL}" class="lvl-{catalog_full.LEVEL} {% IF catalog_full.CURRENT %}selected{% ENDIF %}">{catalog_full.NAME}</a>
												 {% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %}
										 {% IF catalog_full.LAST %}{%FOR out%}</ul> {%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %}
										 {%ENDFOR%}
								 {%ENDIF%}
								 </ul>
								 </div>
						 </div>
						 <!-- /END Каталог с подкатегориями -->
{% ENDIF %}
				<!-- Адаптивный каталог с подкатегориями -->
				<div id="resmenu_sidebar">
				  <ul class="nav-menu clearfix">
					{% FOR catalog_full %}
					  {% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub">{% ENDIF %}{% ENDIF %}
						<li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="{% IF catalog_full.ISSET_SUB %}parent{% ENDIF %} {% IF catalog_full.LEVEL = 0 %}subhead{% ENDIF %} {% IF catalog_full.CURRENT || catalog_full.CURRENT_PARENT %}active{% ENDIF %}">
						  <a href="{catalog_full.URL}" {% IF catalog_full.CURRENT %}class="active"{% ENDIF %}>{% IF catalog_full.ISSET_SUB %}<span class="open-sub"></span>{% ENDIF %}{catalog_full.NAME}</a>
						{% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %}
						{% IF catalog_full.LAST %}{%FOR out%}</ul>{%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %}
					{% ENDFOR %}
				  </ul>
				</div>
				<!-- /END Адаптивный каталог с подкатегориями -->
			  </div>
			</div>
		  </div>

Далее напишите нам, мы поправим размер шапки.

#9 Дима Шумский

Дима Шумский

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

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

Отправлено 05 Май 2015 - 13:23

Всё сделал. Теперь соответственно вот:

Снимок2.PNG

Как поправить размер шапки?

#10 MikDark

MikDark

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

  • Модераторы
  • 6 469 сообщений

Отправлено 05 Май 2015 - 13:41

Просмотр сообщенияДима Шумский (05 Май 2015 - 13:23) писал:

Всё сделал. Теперь соответственно вот:

Прикрепленный файл Снимок2.PNG

Как поправить размер шапки?

В шаблоне main.css найдите код:
.header-top .header-top-left .top-navbar {
  min-height: 50px;
  padding-bottom: 0;
  overflow: visible;
  float: left;
}

и замените на:

.header-top .header-top-left .top-navbar {
  min-height: 150px;
  padding-bottom: 0;
  overflow: visible;
  float: left;
}

Далее код:
.header-top {
  height: 50px;
}

замените на:
.header-top {
  height: 150px;
}


#11 Дима Шумский

Дима Шумский

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

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

Отправлено 05 Май 2015 - 18:25

Замечательно! Вот ещё какое дело. При наведении курсором появляется всё тот же оранжевый оттенок в следующих местах:

1.При наведении на корзину.
1.png

2.При наведении на поиск.
2.png

3.При наведении как на "в корзину", так и на "быстрый заказ"
3.png

4.Описания, отзывы соответственно
4.png

5 При наведении на "показать больше"
5.png

6. Далее в разделе "вы смотрели" появляется оранжевая рамка
6.png

7.Ну и при наведении на сам товар
7.png

8.А так же при выборе "таблица-список" попеременно появляется
8.png

9.Ну и вот
9.png

Подскажите пожалуйста, где можно изменить цвет в этих случаях?

Спасибо!

#12 MikDark

MikDark

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

  • Модераторы
  • 6 469 сообщений

Отправлено 05 Май 2015 - 18:38

Просмотр сообщенияДима Шумский (05 Май 2015 - 18:25) писал:

Замечательно! Вот ещё какое дело. При наведении курсором появляется всё тот же оранжевый оттенок в следующих местах:

1.При наведении на корзину.
Прикрепленный файл 1.png

2.При наведении на поиск.
Прикрепленный файл 2.png

3.При наведении как на "в корзину", так и на "быстрый заказ"
Прикрепленный файл 3.png

4.Описания, отзывы соответственно
Прикрепленный файл 4.png

5 При наведении на "показать больше"
Прикрепленный файл 5.png

6. Далее в разделе "вы смотрели" появляется оранжевая рамка
Прикрепленный файл 6.png

7.Ну и при наведении на сам товар
Прикрепленный файл 7.png

8.А так же при выборе "таблица-список" попеременно появляется
Прикрепленный файл 8.png

9.Ну и вот
Прикрепленный файл 9.png

Подскажите пожалуйста, где можно изменить цвет в этих случаях?

Спасибо!

В шаблоне main.css нужно поменять параметр background-color или background у следующих участков кода:
1)
.header-top .mini-cartpro .block-title:hover {
  background-color: rgba(247,146,66,.7);
}

2)
.header-top .header-top-right #search_mini_form:hover {
  background-color: rgba(247,146,66,.5);
}

3)
#yt_wrapper .yt-product-detail .add-to-cart .btn-cart:hover {
  background-color: rgba(247,146,66,.7);
  cursor: pointer;
}

4)
#tabs > li:hover > a {
  background-color: rgba(247,146,66,.7);
  color: #fff;
}

5) Уточните, где можно увидеть данную кнопку (желательно ссылку на страницу)
6) Параметр box-shadow в коде:
.viewed .block-content .item:hover .product-image a:before {
  box-shadow: 0 0 0 3px rgba(247,146,66,.7) inset;
}

7) Параметр border в коде:
.products-grid .item-inner .product-image {
  border: 1px solid rgba(247,146,66,.7);
  height: 270px;
  width: 270px;
  vertical-align: middle;
  display: table-cell;
}

8)
#main .toolbar .view-mode-wrap .view-mode strong, .toolbar .view-mode-wrap .view-mode a:hover {
  background-color: rgba(247,146,66,.7);
}

9)
.products-list .item .product-addto-wrap .btn-addto:hover {
  background-color: rgba(247,146,66,.7);
}


#13 Дима Шумский

Дима Шумский

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

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

Отправлено 06 Май 2015 - 13:23

Всё классно! Такой ещё вопрос. Вот нашёл место:

http://sportpit-mosk.../Черешня-желтая

11.png

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

Спасибо!

#14 Danil

Danil

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

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

Отправлено 06 Май 2015 - 13:26

Просмотр сообщенияДима Шумский (06 Май 2015 - 13:23) писал:

Всё классно! Такой ещё вопрос. Вот нашёл место:

http://sportpit-mosk.../Черешня-желтая

Прикрепленный файл 11.png

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

Спасибо!
В конец main.css добавьте
.container-slider .control-button .preview, .container-slider .control-button .next {
background-color:#FF0;
}
изменяйте цвет FF0 на свой

#15 Дима Шумский

Дима Шумский

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

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

Отправлено 06 Май 2015 - 13:45

Ага. И сразу же вопрос.

12.png

При наведении курсора появляется следующий цвет. Как изменить его?

Спасибо!

#16 RayLi

RayLi

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

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

Отправлено 06 Май 2015 - 13:50

Просмотр сообщенияДима Шумский (06 Май 2015 - 13:45) писал:

Ага. И сразу же вопрос.

Прикрепленный файл 12.png

При наведении курсора появляется следующий цвет. Как изменить его?

Спасибо!

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

.container-slider .control-button .preview:hover, .container-slider .control-button .next:hover {
  background-color: rgba(202, 75, 98, 0.8);
  cursor: pointer;
  opacity: 1;
  filter: alpha(opacity=100);
}

В нём найдите строчку: background-color: rgba(202, 75, 98, 0.8); в которой измените значение цвета на тот, что вам нужен.





Темы с аналогичным тегами Логитип, номер телефона, Телефон, Шапка, главная

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

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