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


Изменить Меню Категорий


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

#1 rtnsl

rtnsl

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

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

Отправлено 25 Июль 2016 - 11:15

На http://kov.su . Уже проводили изменения ранее. Сейчас пришли к выводу, что изображения категорий слишком маленькие.


Нужно картинки категорий, увеличить в 2,5 раза, что бы штук 10 категорий вмещалось в строку, сделать центрирование. Название категории поместить под картинку. Прилагаю фото, как должно получиться

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

  • fghgfhfghfghgfhfg.jpg


#2 Stasya

Stasya

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

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

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

Просмотр сообщенияrtnsl (25 Июль 2016 - 11:15) писал:

На http://kov.su . Уже проводили изменения ранее. Сейчас пришли к выводу, что изображения категорий слишком маленькие.


Нужно картинки категорий, увеличить в 2,5 раза, что бы штук 10 категорий вмещалось в строку, сделать центрирование. Название категории поместить под картинку. Прилагаю фото, как должно получиться
В шаблоне HTML найдите блок
{%IF catalog_full.NAME = Вставки %}
			  <img align="middle" width="45px" src="http://mirkovki.storeland.net/kat1_1.jpg" />
			{%ELSEIF catalog_full.NAME = Шары %}
				<img align="middle" width="45px" src="http://mirkovki.storeland.net/kat2_1.jpg" />
			{%ELSEIF catalog_full.NAME = Декор %}
				<img align="middle" width="45px" src="http://mirkovki.storeland.net/kat3_1.jpg" />
			{%ELSEIF catalog_full.NAME = Заглушки %}
				<img align="middle" width="45px" src="http://mirkovki.storeland.net/kat4_1.jpg" />
			{%ELSEIF catalog_full.NAME = Орнамент %}
				<img align="middle" width="45px" src="http://mirkovki.storeland.net/kat5_1.jpg" />
			{%ELSEIF catalog_full.NAME = Корзинки %}
				<img align="middle" width="45px" src="http://mirkovki.storeland.net/kat6_1.jpg" />
			{%ELSEIF catalog_full.NAME = Листья %}
				<img align="middle" width="45px" src="http://mirkovki.storeland.net/kat7_1.jpg" />
			{%ELSEIF catalog_full.NAME = Цветы, накладки %}
				<img align="middle" width="45px" src="http://mirkovki.storeland.net/kat8_1.jpg" />
			{%ELSEIF catalog_full.NAME = Патина %}
				<img align="middle" width="45px" src="http://mirkovki.storeland.net/WSPatina.jpg" />
			{%ELSEIF catalog_full.NAME = Пики, навершия %}
				<img align="middle" width="45px" src="http://mirkovki.storeland.net/kat9_1.jpg" />
			{%ELSEIF catalog_full.NAME = Подпятники %}
				<img align="middle" width="45px" src="http://mirkovki.storeland.net/kat12_1.jpg" />
			{%ELSEIF catalog_full.NAME = Столбы, балясины %}
				<img align="middle" width="45px" src="http://mirkovki.storeland.net/kat11_1.jpg" />
			{%ELSEIF catalog_full.NAME = Трубы замятые %}
				<img align="middle" width="45px" src="http://mirkovki.storeland.net/kat10_1.jpg" />
			{%ELSEIF catalog_full.NAME = Скидки %}
				<img align="middle" width="45px" src="http://mirkovki.storeland.net/icon-sale.jpg" />
			{%ELSEIF catalog_full.NAME = Распродажа %}
				<img align="middle" width="45px" src="http://mirkovki.storeland.net/Lovimoment.jpg" />  
			{%ELSEIF catalog_full.NAME = Расходники %}
				<img align="middle" width="45px" src="http://mirkovki.storeland.net/Rashodniki.jpg" />  
			{%ELSEIF catalog_full.NAME = Квадрат замятый %}
				<img align="middle" width="45px" src="http://mirkovki.storeland.net/kat14_1.jpg" />  
			{%ELSEIF catalog_full.NAME = Лоза фактурная %}
				<img align="middle" width="45px" src="http://mirkovki.storeland.net/kat15_1.jpg" />  
			{%ELSEIF catalog_full.NAME = Трубы витые %}
				<img align="middle" width="45px" src="http://mirkovki.storeland.net/kat16_1.jpg" />  
			{%ELSEIF catalog_full.NAME = Хомутная полоса %}
				<img align="middle" width="45px" src="http://mirkovki.storeland.net/kat17_1.jpg" />  
			{%ELSEIF catalog_full.NAME = Перила, полосы %}
				<img align="middle" width="45px" src="http://mirkovki.storeland.net/kat13_1.jpg" />  
			{%ENDIF%}
		   

и замените его на
{%IF catalog_full.NAME = Вставки %}
			  <img align="middle" width="90px" src="http://mirkovki.storeland.net/kat1_1.jpg" />
			{%ELSEIF catalog_full.NAME = Шары %}
				<img align="middle" width="90px" src="http://mirkovki.storeland.net/kat2_1.jpg" />
			{%ELSEIF catalog_full.NAME = Декор %}
				<img align="middle" width="90px" src="http://mirkovki.storeland.net/kat3_1.jpg" />
			{%ELSEIF catalog_full.NAME = Заглушки %}
				<img align="middle" width="90px" src="http://mirkovki.storeland.net/kat4_1.jpg" />
			{%ELSEIF catalog_full.NAME = Орнамент %}
				<img align="middle" width="90px" src="http://mirkovki.storeland.net/kat5_1.jpg" />
			{%ELSEIF catalog_full.NAME = Корзинки %}
				<img align="middle" width="90px" src="http://mirkovki.storeland.net/kat6_1.jpg" />
			{%ELSEIF catalog_full.NAME = Листья %}
				<img align="middle" width="90px" src="http://mirkovki.storeland.net/kat7_1.jpg" />
			{%ELSEIF catalog_full.NAME = Цветы, накладки %}
				<img align="middle" width="90px" src="http://mirkovki.storeland.net/kat8_1.jpg" />
			{%ELSEIF catalog_full.NAME = Патина %}
				<img align="middle" width="90px" src="http://mirkovki.storeland.net/WSPatina.jpg" />
			{%ELSEIF catalog_full.NAME = Пики, навершия %}
				<img align="middle" width="90px" src="http://mirkovki.storeland.net/kat9_1.jpg" />
			{%ELSEIF catalog_full.NAME = Подпятники %}
				<img align="middle" width="90px" src="http://mirkovki.storeland.net/kat12_1.jpg" />
			{%ELSEIF catalog_full.NAME = Столбы, балясины %}
				<img align="middle" width="90px" src="http://mirkovki.storeland.net/kat11_1.jpg" />
			{%ELSEIF catalog_full.NAME = Трубы замятые %}
				<img align="middle" width="90px" src="http://mirkovki.storeland.net/kat10_1.jpg" />
			{%ELSEIF catalog_full.NAME = Скидки %}
				<img align="middle" width="90px" src="http://mirkovki.storeland.net/icon-sale.jpg" />
			{%ELSEIF catalog_full.NAME = Распродажа %}
				<img align="middle" width="90px" src="http://mirkovki.storeland.net/Lovimoment.jpg" /> 
			{%ELSEIF catalog_full.NAME = Расходники %}
				<img align="middle" width="90px" src="http://mirkovki.storeland.net/Rashodniki.jpg" /> 
			{%ELSEIF catalog_full.NAME = Квадрат замятый %}
				<img align="middle" width="90px" src="http://mirkovki.storeland.net/kat14_1.jpg" /> 
			{%ELSEIF catalog_full.NAME = Лоза фактурная %}
				<img align="middle" width="90px" src="http://mirkovki.storeland.net/kat15_1.jpg" /> 
			{%ELSEIF catalog_full.NAME = Трубы витые %}
				<img align="middle" width="90px" src="http://mirkovki.storeland.net/kat16_1.jpg" /> 
			{%ELSEIF catalog_full.NAME = Хомутная полоса %}
				<img align="middle" width="90px" src="http://mirkovki.storeland.net/kat17_1.jpg" /> 
			{%ELSEIF catalog_full.NAME = Перила, полосы %}
				<img align="middle" width="90px" src="http://mirkovki.storeland.net/kat13_1.jpg" /> 
			{%ENDIF%}
затем в файле main.css найдите блок
.conta .nav li {
	height: 80px;
	width: 227px;
}
и замените его на  
.conta .nav li {
	height: 122px;
	width: 103px;
}


#3 rtnsl

rtnsl

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

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

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

Спасибо, но немного не так выходит. Название остаётся справа, не уходит вниз. Ну и немного вылазят из меню картнинки, за нижний край


Просмотр сообщенияStasya (25 Июль 2016 - 14:24) писал:

В шаблоне HTML найдите блок
{%IF catalog_full.NAME = Вставки %}
<img align="middle" width="45px" src="http://mirkovki.storeland.net/kat1_1.jpg" />
{%ELSEIF catalog_full.NAME = Шары %}
<img align="middle" width="45px" src="http://mirkovki.storeland.net/kat2_1.jpg" />
{%ELSEIF catalog_full.NAME = Декор %}
<img align="middle" width="45px" src="http://mirkovki.storeland.net/kat3_1.jpg" />
{%ELSEIF catalog_full.NAME = Заглушки %}
<img align="middle" width="45px" src="http://mirkovki.storeland.net/kat4_1.jpg" />
{%ELSEIF catalog_full.NAME = Орнамент %}
<img align="middle" width="45px" src="http://mirkovki.storeland.net/kat5_1.jpg" />
{%ELSEIF catalog_full.NAME = Корзинки %}
<img align="middle" width="45px" src="http://mirkovki.storeland.net/kat6_1.jpg" />
{%ELSEIF catalog_full.NAME = Листья %}
<img align="middle" width="45px" src="http://mirkovki.storeland.net/kat7_1.jpg" />
{%ELSEIF catalog_full.NAME = Цветы, накладки %}
<img align="middle" width="45px" src="http://mirkovki.storeland.net/kat8_1.jpg" />
{%ELSEIF catalog_full.NAME = Патина %}
<img align="middle" width="45px" src="http://mirkovki.storeland.net/WSPatina.jpg" />
{%ELSEIF catalog_full.NAME = Пики, навершия %}
<img align="middle" width="45px" src="http://mirkovki.storeland.net/kat9_1.jpg" />
{%ELSEIF catalog_full.NAME = Подпятники %}
<img align="middle" width="45px" src="http://mirkovki.storeland.net/kat12_1.jpg" />
{%ELSEIF catalog_full.NAME = Столбы, балясины %}
<img align="middle" width="45px" src="http://mirkovki.storeland.net/kat11_1.jpg" />
{%ELSEIF catalog_full.NAME = Трубы замятые %}
<img align="middle" width="45px" src="http://mirkovki.storeland.net/kat10_1.jpg" />
{%ELSEIF catalog_full.NAME = Скидки %}
<img align="middle" width="45px" src="http://mirkovki.storeland.net/icon-sale.jpg" />
{%ELSEIF catalog_full.NAME = Распродажа %}
<img align="middle" width="45px" src="http://mirkovki.storeland.net/Lovimoment.jpg" />
{%ELSEIF catalog_full.NAME = Расходники %}
<img align="middle" width="45px" src="http://mirkovki.storeland.net/Rashodniki.jpg" />
{%ELSEIF catalog_full.NAME = Квадрат замятый %}
<img align="middle" width="45px" src="http://mirkovki.storeland.net/kat14_1.jpg" />
{%ELSEIF catalog_full.NAME = Лоза фактурная %}
<img align="middle" width="45px" src="http://mirkovki.storeland.net/kat15_1.jpg" />
{%ELSEIF catalog_full.NAME = Трубы витые %}
<img align="middle" width="45px" src="http://mirkovki.storeland.net/kat16_1.jpg" />
{%ELSEIF catalog_full.NAME = Хомутная полоса %}
<img align="middle" width="45px" src="http://mirkovki.storeland.net/kat17_1.jpg" />
{%ELSEIF catalog_full.NAME = Перила, полосы %}
<img align="middle" width="45px" src="http://mirkovki.storeland.net/kat13_1.jpg" />
{%ENDIF%}
		

и замените его на
{%IF catalog_full.NAME = Вставки %}
			 <img align="middle" width="90px" src="http://mirkovki.storeland.net/kat1_1.jpg" />
		 {%ELSEIF catalog_full.NAME = Шары %}
			 <img align="middle" width="90px" src="http://mirkovki.storeland.net/kat2_1.jpg" />
		 {%ELSEIF catalog_full.NAME = Декор %}
			 <img align="middle" width="90px" src="http://mirkovki.storeland.net/kat3_1.jpg" />
		 {%ELSEIF catalog_full.NAME = Заглушки %}
			 <img align="middle" width="90px" src="http://mirkovki.storeland.net/kat4_1.jpg" />
		 {%ELSEIF catalog_full.NAME = Орнамент %}
			 <img align="middle" width="90px" src="http://mirkovki.storeland.net/kat5_1.jpg" />
		 {%ELSEIF catalog_full.NAME = Корзинки %}
			 <img align="middle" width="90px" src="http://mirkovki.storeland.net/kat6_1.jpg" />
		 {%ELSEIF catalog_full.NAME = Листья %}
			 <img align="middle" width="90px" src="http://mirkovki.storeland.net/kat7_1.jpg" />
		 {%ELSEIF catalog_full.NAME = Цветы, накладки %}
			 <img align="middle" width="90px" src="http://mirkovki.storeland.net/kat8_1.jpg" />
		 {%ELSEIF catalog_full.NAME = Патина %}
			 <img align="middle" width="90px" src="http://mirkovki.storeland.net/WSPatina.jpg" />
		 {%ELSEIF catalog_full.NAME = Пики, навершия %}
			 <img align="middle" width="90px" src="http://mirkovki.storeland.net/kat9_1.jpg" />
		 {%ELSEIF catalog_full.NAME = Подпятники %}
			 <img align="middle" width="90px" src="http://mirkovki.storeland.net/kat12_1.jpg" />
		 {%ELSEIF catalog_full.NAME = Столбы, балясины %}
			 <img align="middle" width="90px" src="http://mirkovki.storeland.net/kat11_1.jpg" />
		 {%ELSEIF catalog_full.NAME = Трубы замятые %}
			 <img align="middle" width="90px" src="http://mirkovki.storeland.net/kat10_1.jpg" />
		 {%ELSEIF catalog_full.NAME = Скидки %}
			 <img align="middle" width="90px" src="http://mirkovki.storeland.net/icon-sale.jpg" />
		 {%ELSEIF catalog_full.NAME = Распродажа %}
			 <img align="middle" width="90px" src="http://mirkovki.storeland.net/Lovimoment.jpg" />
		 {%ELSEIF catalog_full.NAME = Расходники %}
			 <img align="middle" width="90px" src="http://mirkovki.storeland.net/Rashodniki.jpg" />
		 {%ELSEIF catalog_full.NAME = Квадрат замятый %}
			 <img align="middle" width="90px" src="http://mirkovki.storeland.net/kat14_1.jpg" />
		 {%ELSEIF catalog_full.NAME = Лоза фактурная %}
			 <img align="middle" width="90px" src="http://mirkovki.storeland.net/kat15_1.jpg" />
		 {%ELSEIF catalog_full.NAME = Трубы витые %}
			 <img align="middle" width="90px" src="http://mirkovki.storeland.net/kat16_1.jpg" />
		 {%ELSEIF catalog_full.NAME = Хомутная полоса %}
			 <img align="middle" width="90px" src="http://mirkovki.storeland.net/kat17_1.jpg" />
		 {%ELSEIF catalog_full.NAME = Перила, полосы %}
			 <img align="middle" width="90px" src="http://mirkovki.storeland.net/kat13_1.jpg" />
		 {%ENDIF%}
затем в файле main.css найдите блок
.conta .nav li {
height: 80px;
width: 227px;
}
и замените его на  
.conta .nav li {
height: 122px;
width: 103px;
}

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

  • Снимок экрана_2016-07-26_16-45-12.png


#4 Vaccina

Vaccina

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

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

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

В style.css найдите:
.nav li a img {
	vertical-align: middle;
}

замените на:
.nav li a img {
	display: block;
	margin: 0 auto;
}

далее найдите:
.nav > li > a {
	display: block;
	top: -1px;
}

замените на:
.nav > li > a {
	display: block;
	top: -1px;
	text-align: center;
}


#5 rtnsl

rtnsl

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

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

Отправлено 16 Август 2016 - 12:18

Спасибо, почти всё как нужно! Но картинки маленькие

Просмотр сообщенияVaccina (27 Июль 2016 - 05:47) писал:

В style.css найдите:
.nav li a img {
vertical-align: middle;
}

замените на:
.nav li a img {
display: block;
margin: 0 auto;
}

далее найдите:
.nav > li > a {
display: block;
top: -1px;
}

замените на:
.nav > li > a {
display: block;
top: -1px;
text-align: center;
}


#6 rtnsl

rtnsl

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

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

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

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

#7 Danil

Danil

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

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

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

Просмотр сообщенияrtnsl (16 Август 2016 - 12:28) писал:

а нет, это у меня не сохранилась правка. Немного не влазит новое меню в черную область на большом экране, и на маленьком экране типа смартфона там совсем ужас. С этим ведь можно что-то сделать?
В style.css найдите код
.conta .nav li {
	height: 122px;
	width: 103px;
}
и замените на

.conta .nav li {
	height: 142px;
	width: 103px;
}


#8 rtnsl

rtnsl

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

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

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

спасибо! работает.  В режиме для смартфонов не подскажете, как поправить? А то на маленьких экранах меню всё едет, как попало картинки и подписи. в режиме для смартфонов можно любой упорядоченный вид, хоть горизонтально картинку и текст, лишь бы не ад такой

Просмотр сообщенияDanil (16 Август 2016 - 13:09) писал:

В style.css найдите код
.conta .nav li {
height: 122px;
width: 103px;
}
и замените на

.conta .nav li {
height: 142px;
width: 103px;
}


#9 Vaccina

Vaccina

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

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

Отправлено 18 Август 2016 - 05:08

В main.css найдите:
.nav > li {
	float: none;
}

замените на:
.nav > li {
	float: left;
	text-align: center;
	margin: 0 5px;
}

далее найдите:
.nav > li > a {
	display: inline;
	line-height: 45px;
	top: -1px;
}

замените на:
.nav > li > a {
	display: block;
	top: -1px;
	padding: 0;
}


#10 rtnsl

rtnsl

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

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

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

спасибо, всё выровнялось и там. Пересматривал, как выглядит — вопрос ещё один возник: выровнять, чтоб отступы справа и слева одинаковы были, сильно сложно? Сейчас справа в большинстве случаев больше, чем слева, прилагаю скрин.

Просмотр сообщенияVaccina (18 Август 2016 - 05:08) писал:

В main.css найдите:
.nav > li {
float: none;
}

замените на:
.nav > li {
float: left;
text-align: center;
margin: 0 5px;
}

далее найдите:
.nav > li > a {
display: inline;
line-height: 45px;
top: -1px;
}

замените на:
.nav > li > a {
display: block;
top: -1px;
padding: 0;
}

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

  • W2f6XZF-8Xs.jpg


#11 Danil

Danil

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

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

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

Просмотр сообщенияrtnsl (23 Август 2016 - 10:22) писал:

спасибо, всё выровнялось и там. Пересматривал, как выглядит — вопрос ещё один возник: выровнять, чтоб отступы справа и слева одинаковы были, сильно сложно? Сейчас справа в большинстве случаев больше, чем слева, прилагаю скрин.
Здравствуйте.
Попробуйте следующий вариант:
в style.css найдите код
.nav > li {
	float: left;
}
и замените на

.nav > li {
	display: inline-block;
	vertical-align: top;
}


#12 rtnsl

rtnsl

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

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

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

да, это работает, но при наведении на меню курсора хаос начинается. всё начинает бегать и мельтешить. из-за всплывающих меню, я думаю. пока убрал

Просмотр сообщенияDanil (23 Август 2016 - 10:33) писал:

Здравствуйте.
Попробуйте следующий вариант:
в style.css найдите код
.nav > li {
float: left;
}
и замените на

.nav > li {
display: inline-block;
vertical-align: top;
}


#13 Danil

Danil

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

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

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

Просмотр сообщенияrtnsl (24 Август 2016 - 10:03) писал:

да, это работает, но при наведении на меню курсора хаос начинается. всё начинает бегать и мельтешить. из-за всплывающих меню, я думаю. пока убрал
Здравствуйте.
В style.css найдите код
.nav li.hover  {display: block !important;z-index:100;}
и замените на
.nav li.hover  {z-index:100;}
так же найдите
.nav > li {
float: left;
}
и замените на
.nav > li {
display: inline-block;
vertical-align: top;
}


#14 rtnsl

rtnsl

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

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

Отправлено 06 Сентябрь 2016 - 09:25

Спасибо, всё работает!

Просмотр сообщенияDanil (24 Август 2016 - 10:33) писал:

Здравствуйте.
В style.css найдите код
.nav li.hover {display: block !important;z-index:100;}
и замените на
.nav li.hover {z-index:100;}
так же найдите
.nav > li {
float: left;
}
и замените на
.nav > li {
display: inline-block;
vertical-align: top;
}





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

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