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


Яркие Иконки Меню

яркие иконки техника

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

#1 Art

Art

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

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

Отправлено 23 Май 2014 - 14:16

В шаблоне техника, в меню слева ( каталог, контакты, доставка) иконки становятся яркими только когда на них наводишь мышь, как сделать так, что бы они были яркими постоянно?

#2 Ирина345

Ирина345

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

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

Отправлено 23 Май 2014 - 14:41

Просмотр сообщенияArt (23 Май 2014 - 14:16) писал:

В шаблоне техника, в меню слева ( каталог, контакты, доставка) иконки становятся яркими только когда на них наводишь мышь, как сделать так, что бы они были яркими постоянно?
Здравствуйте, чтобы сделать иконки цветными находим в main.css код
.header .links li a.address{background:url("{ASSETS_IMAGES_PATH}menu_icon_address_16.png") left center no-repeat;}
заменяем его на
.header .links li a.address{background:url("{ASSETS_IMAGES_PATH}menu_icon_address_16_act.png") left center no-repeat;}


#3 Art

Art

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

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

Отправлено 23 Май 2014 - 15:03

Просмотр сообщенияИрина345 (23 Май 2014 - 14:41) писал:

Здравствуйте, чтобы сделать иконки цветными находим в main.css код
.header .links li a.address{background:url("{ASSETS_IMAGES_PATH}menu_icon_address_16.png") left center no-repeat;}
заменяем его на
.header .links li a.address{background:url("{ASSETS_IMAGES_PATH}menu_icon_address_16_act.png") left center no-repeat;}
спасибо! а вот у меня на сайте строчка " о нас" в меню, как поставить на нее иконку?

#4 Ирина345

Ирина345

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

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

Отправлено 23 Май 2014 - 15:14

Просмотр сообщенияArt (23 Май 2014 - 15:03) писал:

спасибо! а вот у меня на сайте строчка " о нас" в меню, как поставить на нее иконку?
в main.css добавляете строчку


.header .links li a.us{background:url("{ASSETS_IMAGES_PATH}ваша картинка.png") left center no-repeat;}
но не забывайте она должна быть маленького размера 16х16 px

#5 Art

Art

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

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

Отправлено 23 Май 2014 - 23:28

А как изменить цвет надписей этих же?

А как изменить цвет надписей этих же?

#6 Vaccina

Vaccina

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

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

Отправлено 24 Май 2014 - 02:17

В main.css найдите:
.header .links li a {
	color: #B2B2B2;
	display: block;
	height: 20px;
	line-height: 20px;
	padding-left: 20px;
	text-align: left;
	text-decoration: none;
	vertical-align: middle;
	white-space: nowrap;
}
измените значение стиля color

#7 Art

Art

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

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

Отправлено 26 Май 2014 - 01:16

Просмотр сообщенияVaccina (24 Май 2014 - 02:17) писал:

В main.css найдите:
.header .links li a {
color: #B2B2B2;
display: block;
height: 20px;
line-height: 20px;
padding-left: 20px;
text-align: left;
text-decoration: none;
vertical-align: middle;
white-space: nowrap;
}
измените значение стиля color

спасибо большое! а как можно сделать так чтоб номера телефонов были прямо один под другим?сейчас как будто перед "+" пробел.

#8 MikDark

MikDark

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

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

Отправлено 26 Май 2014 - 07:25

Просмотр сообщенияArt (26 Май 2014 - 01:16) писал:

спасибо большое! а как можно сделать так чтоб номера телефонов были прямо один под другим?сейчас как будто перед "+" пробел.

В шаблоне HTML найдите:
<!-- Второй контактный телефон -->
				  {% IF SETTINGS_STORE_PHONE_NUMBER2 %}
					<br /><span class="phone-country-code">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}</span>
					{% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}({SETTINGS_STORE_PHONE_CITY_CODE2}){% ENDIF %}
					{SETTINGS_STORE_PHONE_NUMBER2}
				  {% ENDIF %}


и замените на:
<!-- Второй контактный телефон -->
				  {% IF SETTINGS_STORE_PHONE_NUMBER2 %}
					<br /><span class="phone-country-code" style="margin-left: -5px;">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}</span>
					{% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}({SETTINGS_STORE_PHONE_CITY_CODE2}){% ENDIF %}
					{SETTINGS_STORE_PHONE_NUMBER2}
				  {% ENDIF %}


#9 Art

Art

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

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

Отправлено 26 Май 2014 - 20:17

Просмотр сообщенияMikDark (26 Май 2014 - 07:25) писал:

В шаблоне HTML найдите:
<!-- Второй контактный телефон -->
				 {% IF SETTINGS_STORE_PHONE_NUMBER2 %}
				 <br /><span class="phone-country-code">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}</span>
				 {% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}({SETTINGS_STORE_PHONE_CITY_CODE2}){% ENDIF %}
				 {SETTINGS_STORE_PHONE_NUMBER2}
				 {% ENDIF %}


и замените на:
<!-- Второй контактный телефон -->
				 {% IF SETTINGS_STORE_PHONE_NUMBER2 %}
				 <br /><span class="phone-country-code" style="margin-left: -5px;">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}</span>
				 {% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}({SETTINGS_STORE_PHONE_CITY_CODE2}){% ENDIF %}
				 {SETTINGS_STORE_PHONE_NUMBER2}
				 {% ENDIF %}

спасибо огромное! получилось! А как увеличить расстояние между номерами?

#10 lew

lew

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

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

Отправлено 26 Май 2014 - 22:54

В HTML найдите код

<!-- Первый контактный телефон -->
				  {% IF SETTINGS_STORE_PHONE_NUMBER1 %}

					<span class="phone-country-code">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}</span>
					{% IF SETTINGS_STORE_PHONE_CITY_CODE1 %}({SETTINGS_STORE_PHONE_CITY_CODE1}){% ENDIF %}
					{SETTINGS_STORE_PHONE_NUMBER1}
				  {% ENDIF %}

				  <!-- Второй контактный телефон -->
								  {% IF SETTINGS_STORE_PHONE_NUMBER2 %}
										<br /><span class="phone-country-code" style="margin-left: -5px;">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}</span>
										{% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}({SETTINGS_STORE_PHONE_CITY_CODE2}){% ENDIF %}
										{SETTINGS_STORE_PHONE_NUMBER2}
								  {% ENDIF %}

и замените на

<!-- Первый контактный телефон -->
				  {% IF SETTINGS_STORE_PHONE_NUMBER1 %}
				  <div class="contact-phone-number">
					<span class="phone-country-code">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}</span>
					{% IF SETTINGS_STORE_PHONE_CITY_CODE1 %}({SETTINGS_STORE_PHONE_CITY_CODE1}){% ENDIF %}
					{SETTINGS_STORE_PHONE_NUMBER1}
				  </div>
				  {% ENDIF %}

				  <!-- Второй контактный телефон -->
								  {% IF SETTINGS_STORE_PHONE_NUMBER2 %}
										  <div class="contact-phone-number">  
										<br /><span class="phone-country-code" style="margin-left: -5px;">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}</span>
										{% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}({SETTINGS_STORE_PHONE_CITY_CODE2}){% ENDIF %}
										{SETTINGS_STORE_PHONE_NUMBER2}
										</div>
								  {% ENDIF %}


потом открыть main.css
под самый последний код добавьте новую строчку кода

contact-phone-number{ padding:0 0 2px;}


#11 Art

Art

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

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

Отправлено 27 Май 2014 - 21:29

спасибо

#12 admin

admin

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

  • Пользователи
  • PipPipPipPip
  • 489 сообщений
  • ГородСамара

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

Здравствуйте!
Как сделать иконки в меню как на скрине.

Как сделать иконки в меню как на скрине?

Сами иконки есть.

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

  • фото 7х1000.jpg


#13 Dars

Dars

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

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

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

Просмотр сообщенияUltraMag (09 Ноябрь 2014 - 10:41) писал:

Здравствуйте!
Как сделать иконки в меню как на скрине.

Как сделать иконки в меню как на скрине?

Сами иконки есть.
Загрузите, пожалуйста, иконки на сайт, а мы пришлем необходимые изменения.

#14 admin

admin

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

  • Пользователи
  • PipPipPipPip
  • 489 сообщений
  • ГородСамара

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

Я их добавил в css в самом низу .cat-name

#15 Dars

Dars

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

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

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

Просмотр сообщенияUltraMag (09 Ноябрь 2014 - 10:50) писал:

Я их добавил в css в самом низу .cat-name
В конец main.css добавьте строки:

.cat-name:nth-child(2) {background:url("http://design.ultramag-samara.ru/icons-uni-white.png") 0 16px no-repeat;}
.cat-name:nth-child(3) {background:url("http://design.ultramag-samara.ru/icons-uni-white.png") 0 -69px no-repeat;}
.cat-name:nth-child(4) {background:url("http://design.ultramag-samara.ru/icons-uni-white.png") 0 -156px no-repeat;}
.cat-name:nth-child(5) {background:url("http://design.ultramag-samara.ru/icons-uni-white.png") 0 -240px no-repeat;}
.cat-name:nth-child(6) {background:url("http://design.ultramag-samara.ru/icons-uni-white.png") 0 -326px no-repeat;}
.cat-name:nth-child(7) {background:url("http://design.ultramag-samara.ru/icons-uni-white.png") 0 -413px no-repeat;}
.cat-name:nth-child(8) {background:url("http://design.ultramag-samara.ru/icons-uni-white.png") 0 -503px no-repeat;}
.cat-name:nth-child(9) {background:url("http://design.ultramag-samara.ru/icons-uni-white.png") 0 -587px no-repeat;}
.cat-name:nth-child(10) {background:url("http://design.ultramag-samara.ru/icons-uni-white.png") 0 -675px no-repeat;}

Меняющиеся числа от 2 до 10 - пункты меню, от 16 до -675 - смещение картинки по вертикали, если захотите подровнять иконки или заменить одну на другую, редактируйте вторые значения.

#16 admin

admin

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

  • Пользователи
  • PipPipPipPip
  • 489 сообщений
  • ГородСамара

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

А как раздвинуть между собой иконки и само меню. А то слишком близко.

#17 Dars

Dars

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

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

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

Просмотр сообщенияUltraMag (09 Ноябрь 2014 - 11:28) писал:

А как раздвинуть между собой иконки и само меню. А то слишком близко.
В style.css найдите строку:

.et_categ_box a, .et_categ_box a:hover, #scroll-box a, #scroll-box a:hover{background:url(http://design.ultramag-samara.ru/icons-uni-white.png?6119) left no-repeat;display: inline-block;line-height: 1.3em;position: relative;color:#F2DBDB;border-top: 1px solid rgba(48, 26, 26, 0.71);padding: 0 12px;margin: 0;text-decoration:none;font-size:12px;font-family: 'Cuprum', Verdana, Geneva, sans-serif;text-transform:uppercase;line-height: 49px;}

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

.et_categ_box a, .et_categ_box a:hover, #scroll-box a, #scroll-box a:hover{background:url(http://design.ultramag-samara.ru/icons-uni-white.png?6119) left no-repeat;display: inline-block;line-height: 1.3em;position: relative;color:#F2DBDB;border-top: 1px solid rgba(48, 26, 26, 0.71);padding: 0 20px;margin: 0;text-decoration:none;font-size:12px;font-family: 'Cuprum', Verdana, Geneva, sans-serif;text-transform:uppercase;line-height: 49px;}

Меняется параметр padding, можете отрегулировать сами.

#18 admin

admin

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

  • Пользователи
  • PipPipPipPip
  • 489 сообщений
  • ГородСамара

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

А как сделать так что бы при наведении иконка не меняла цвет?

#19 Dars

Dars

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

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

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

Просмотр сообщенияUltraMag (09 Ноябрь 2014 - 11:35) писал:

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

#20 admin

admin

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

  • Пользователи
  • PipPipPipPip
  • 489 сообщений
  • ГородСамара

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

На сайте samara-light.ru этот вариант представлен.
Можно так же отцентрировать иконку и само меню?
И цвет иконки при наведении.





Темы с аналогичным тегами яркие иконки, техника

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

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