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


Изменить Дизайн Верхнего Меню, Дизайн Кнопок.


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

#1 nikon

nikon

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

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

Отправлено 30 Сентябрь 2015 - 08:30

Поменять кнопочки, и заменить на такие. (цвет подберу самостоятельно). Как?

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

  • bandicam 2015-09-30 08-26-54-312.jpg


#2 Danil

Danil

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

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

Отправлено 30 Сентябрь 2015 - 10:02

Просмотр сообщенияnikon (30 Сентябрь 2015 - 08:30) писал:

Поменять кнопочки, и заменить на такие. (цвет подберу самостоятельно). Как?
В конец style.css добавьте
nav.head ul.head li {
	background-color: #2C3E92;
	border-radius: 16px;
}
изменяйте стили на свои

#3 nikon

nikon

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

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

Отправлено 01 Октябрь 2015 - 01:09

Просмотр сообщенияDanil (30 Сентябрь 2015 - 10:02) писал:

В конец style.css добавьте
nav.head ul.head li {
background-color: #2C3E92;
border-radius: 16px;
}
изменяйте стили на свои
Спасибо. А подскажите еще пожалуйста, поменять уже фон на панели с кнопками. черный на свой.

И цвет букв - названия страницы.

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

  • bandicam 2015-10-01 01-06-45-347.jpg


#4 Vaccina

Vaccina

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

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

Отправлено 01 Октябрь 2015 - 01:27

В style.css найдите:
.global {
	background: #000;
	padding: 10px;
}

В нем измените значение стиля background

Для изменения цвета шрифта меню в style.css найдите:
.head li a {
	color: #FFF;
	box-sizing: border-box;
}
в нем измените значение стиля color

#5 nikon

nikon

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

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

Отправлено 11 Ноябрь 2015 - 16:08

Просмотр сообщенияVaccina (01 Октябрь 2015 - 01:27) писал:

В style.css найдите:
.global {
background: #000;
padding: 10px;
}

В нем измените значение стиля background

Для изменения цвета шрифта меню в style.css найдите:
.head li a {
color: #FFF;
box-sizing: border-box;
}
в нем измените значение стиля color

Здравствуйте, а можно на вашей платформе вот так сделать: ка на картинке. что бы на кнопку новости показывались последние новости...

Просмотр сообщенияVaccina (01 Октябрь 2015 - 01:27) писал:

В style.css найдите:
.global {
background: #000;
padding: 10px;
}

В нем измените значение стиля background

Для изменения цвета шрифта меню в style.css найдите:
.head li a {
color: #FFF;
box-sizing: border-box;
}
в нем измените значение стиля color

Просмотр сообщенияnikon (11 Ноябрь 2015 - 16:07) писал:

Здравствуйте, а можно на вашей платформе вот так сделать: ка на картинке. что бы на кнопку новости показывались последние новости...
это было бы круто... то что надо.

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

  • bandicam 2015-11-11 16-03-44-764.jpg


#6 Ирина345

Ирина345

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

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

Отправлено 11 Ноябрь 2015 - 20:26

Просмотр сообщенияnikon (11 Ноябрь 2015 - 16:08) писал:

Здравствуйте, а можно на вашей платформе вот так сделать: ка на картинке. что бы на кнопку новости показывались последние новости...



это было бы круто... то что надо.
Здравствуйте, найдите в шаблоне HTML
  <ul class="head">
		  {% FOR menu %}
			{% FOR header %}
			  {% FOR links %}
						 <li {% IF menu.header.links.NAME=Отзывы %}class="otziv"{% ENDIF %}>
								  <a href="{menu.header.links.URL}"  {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a>
								</li>
						 {% ENDFOR %}
			{% ENDFOR %}
		  {% ENDFOR %}
		  </ul>
замените на
<ul class="head">
		  {% FOR menu %}
			{% FOR header %}
			  {% FOR links %}
						 <li {% IF menu.header.links.NAME=Отзывы %}class="otziv"{% ENDIF %}>
								  <a href="{menu.header.links.URL}"  {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a>
								</li>
						 {% ENDFOR %}
			{% ENDFOR %}
		  {% ENDFOR %}
		  <li><a>Новости</a>
			<ul class="menu_news">
			   {% FOR news_list_mass_media %}
					<li><a href="{news_list_mass_media.URL}" title="Перейти к странице &laquo;{news_list_mass_media.TITLE}&raquo;" {% IF news_list_mass_media.ID = NEWS_ID %}class="selected"{%ENDIF%}>{news_list_mass_media.TITLE}</a></li>
				  {% ENDFOR %}
			</ul>
		  </li>
		  </ul>
далее в конец style.css добавьте
.menu_news {
	position: absolute;
	width: 200px;
	display: none;
	background: #000;
	z-index:999;height: 129px !important;
}
.menu_news li{
		 background: none;
}
.head li:hover ul {
	display: block !important;
}
.menu_news a, .menu_news li {
	padding: 0 !important;
	background: none !important;
	color: #000;
	text-align:left !important;
	float: none !important;
	line-height: 18px !important;
	margin: 0 !important;
}


#7 nikon

nikon

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

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

Отправлено 12 Ноябрь 2015 - 00:39

Просмотр сообщенияИрина345 (11 Ноябрь 2015 - 20:26) писал:

Здравствуйте, найдите в шаблоне HTML
<ul class="head">
		 {% FOR menu %}
		 {% FOR header %}
			 {% FOR links %}
						 <li {% IF menu.header.links.NAME=Отзывы %}class="otziv"{% ENDIF %}>
								 <a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a>
							 </li>
						 {% ENDFOR %}
		 {% ENDFOR %}
		 {% ENDFOR %}
		 </ul>
замените на
<ul class="head">
		 {% FOR menu %}
		 {% FOR header %}
			 {% FOR links %}
						 <li {% IF menu.header.links.NAME=Отзывы %}class="otziv"{% ENDIF %}>
								 <a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a>
							 </li>
						 {% ENDFOR %}
		 {% ENDFOR %}
		 {% ENDFOR %}
		 <li><a>Новости</a>
		 <ul class="menu_news">
			 {% FOR news_list_mass_media %}
				 <li><a href="{news_list_mass_media.URL}" title="Перейти к странице &laquo;{news_list_mass_media.TITLE}&raquo;" {% IF news_list_mass_media.ID = NEWS_ID %}class="selected"{%ENDIF%}>{news_list_mass_media.TITLE}</a></li>
				 {% ENDFOR %}
		 </ul>
		 </li>
		 </ul>
далее в конец style.css добавьте
.menu_news {
position: absolute;
width: 200px;
display: none;
background: #000;
z-index:999;height: 129px !important;
}
.menu_news li{
		 background: none;
}
.head li:hover ul {
display: block !important;
}
.menu_news a, .menu_news li {
padding: 0 !important;
background: none !important;
color: #000;
text-align:left !important;
float: none !important;
line-height: 18px !important;
margin: 0 !important;
}

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

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

  • bandicam 2015-11-12 00-36-59-139.jpg


#8 Vaccina

Vaccina

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

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

Отправлено 12 Ноябрь 2015 - 05:13

При подобном изменении, кнопка "Новости" черного цвета в один ряд с остальными и выпадающий список работает только при наведении на нее.

Код css разместите после:
.head li:nth-child(5) {
		background-color: #13AF13;
}
.head li:nth-child(6) {
		background-color: #13AF13;
}
nav.head ul.head li {
		border-radius: 5px;
}


после изменения почистите кэш браузера, чтобы новые изменения вступили в силу =)

#9 nikon

nikon

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

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

Отправлено 12 Ноябрь 2015 - 05:26

Просмотр сообщенияVaccina (12 Ноябрь 2015 - 05:13) писал:

При подобном изменении, кнопка "Новости" черного цвета в один ряд с остальными и выпадающий список работает только при наведении на нее.

Код css разместите после:
.head li:nth-child(5) {
	 background-color: #13AF13;
}
.head li:nth-child(6) {
	 background-color: #13AF13;
}
nav.head ul.head li {
	 border-radius: 5px;
}


после изменения почистите кэш браузера, чтобы новые изменения вступили в силу =)
Воо :D то что нужно) :lol:  спасибо. я в Вас не сомневался

#10 nikon

nikon

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

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

Отправлено 12 Ноябрь 2015 - 05:32

Просмотр сообщенияnikon (12 Ноябрь 2015 - 05:26) писал:

Воо :D то что нужно) :lol:  спасибо. я в Вас не сомневался
только кнопочка новости не активная, на нее нельзя нажать и перейти ко всем новостям на странице.

#11 Vaccina

Vaccina

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

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

Отправлено 12 Ноябрь 2015 - 05:56

Для этого в шаблоне HTML найдите:
<li><a>Новости</a>

замените на:
<li><a href="#">Новости</a>
и вместо знака # пропишите необходимую ссылку

#12 nikon

nikon

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

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

Отправлено 12 Ноябрь 2015 - 06:00

Просмотр сообщенияVaccina (12 Ноябрь 2015 - 05:56) писал:

Для этого в шаблоне HTML найдите:
<li><a>Новости</a>

замените на:
<li><a href="#">Новости</a>
и вместо знака # пропишите необходимую ссылку
Все получилось ) спасибоще Вам огроменное))у меня теперь "самая крутая" кнопочка с новостями )




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

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