Сообщений в теме: 14

[Andrew S.]

Добрый день.

Помогите, пожалуйста, подправить:

1. Во втором, третьем режиме отображения каталога, в товаре в количестве, в выборе диапазона цены, при нажатии в поле где цифра, рамки становятся темнее если мышкой нажать, чтобы число ввести, а тут - нет:

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

Это пример:


2. Помогите убрать треугольники внизу:


3. Второй режим отображения товаров единственный нормальный в адаптивном, помогите исправить недочёт, не испортив этого:

Нужно чтобы внизу было как слева и как вверху. Каким-то минимумом, или отступами для фото или ещё как-то.
Чтобы это не повлияло ни на адаптивный, ни на первый, ни на третий режимы отображения товаров в каталоге.

4. А также в нижнем меню сделать чтобы при наведении был другой цвет:

Чтобы он регулировался отдельно от цвета выделения в верхнем меню!

5. Ещё внизу много лишнего пространства:

Там что-то какой-то конфликт или не понять что, плюс лишней области.

6. Изменить цвет границы во всплывающих сообщениях:

Не пойму где он находится.

7. Некорректное отображение фото во втором режиме крупным списком:

Если маленькое фото, оно уходит, не по центру. И его надо растянуть по размеру как у всех, как в первом режиме табличном:


8. Некорректный размер фото в первом режиме таблицы (это видно на последнем рисунке выше):
249*246. Нужно чтобы фото было квадратное с одинаковой длиной по x и y.

9. Почему-то мутно отображается меню:

Не всегда, в половине случаев. Смотря на какое место проскроллен экран.

ДАЛЕЕ ПУНКТЫ КАСАЕМО ТОЛЬКО РАЗМЕЩЕНИЯ ТОВАРОВ В ТРЁХ ТИПАХ КАТАЛОГА:
НЕОБХОДИМО ХОРОШО ОЧИСТИТЬ КЭШ, чтобы было всё видно
10. Фото в первом режиме, всё время разные ширина и высота. Как я понимаю, должно быть всегда 245.


11. Слишком большой отступ между фото и текстом справа. Сделать меньше, но чтобы оно всё не испортило в других местах!


Потом адаптивный чинить.

Сообщение отредактировал Andrew S.: 04 Апрель 2016 - 16:11

[RedHead]

Andrew S. (04 Апрель 2016 - 04:48) писал:

Добрый день.

Помогите, пожалуйста, подправить:

1. Во втором, третьем режиме отображения каталога, в товаре в количестве, в выборе диапазона цены, при нажатии в поле где цифра, рамки становятся темнее если мышкой нажать, чтобы число ввести, а тут - нет:
Border1.jpg
Помогите сделать также в этом первом табличном режиме, который на рисунке...

Это пример:
Border2.png

2. Помогите убрать треугольники внизу:
Triangle1.png

3. Второй режим отображения товаров единственный нормальный в адаптивном, помогите исправить недочёт, не испортив этого:
List1.jpg
Нужно чтобы внизу было как слева и как вверху. Каким-то минимумом, или отступами для фото или ещё как-то.
Чтобы это не повлияло ни на адаптивный, ни на первый, ни на третий режимы отображения товаров в каталоге.

4. А также в нижнем меню сделать чтобы при наведении был другой цвет:
HOVER.png
Чтобы он регулировался отдельно от цвета выделения в верхнем меню!

5. Ещё внизу много лишнего пространства:
DOWN2.jpg
Там что-то какой-то конфликт или не понять что, плюс лишней области.

6. Изменить цвет границы во всплывающих сообщениях:
BORDER3.jpg
Не пойму где он находится.

7. Некорректное отображение фото во втором режиме крупным списком:
Photo2rezhim1.jpg
Если маленькое фото, оно уходит, не по центру. И его надо растянуть по размеру как у всех, как в первом режиме табличном:
Photo2rezhim2.jpg

8. Некорректный размер фото в первом режиме таблицы (это видно на последнем рисунке выше):
249*246. Нужно чтобы фото было квадратное с одинаковой длиной по x и y.

9. Почему-то мутно отображается меню:
BLURRY.png
Не всегда, в половине случаев. Смотря на какое место проскроллен экран.

ДАЛЕЕ ПУНКТЫ КАСАЕМО ТОЛЬКО РАЗМЕЩЕНИЯ ТОВАРОВ В ТРЁХ ТИПАХ КАТАЛОГА:
НЕОБХОДИМО ХОРОШО ОЧИСТИТЬ КЭШ, чтобы было всё видно
10. Фото в первом режиме, всё время разные ширина и высота. Как я понимаю, должно быть всегда 245.
PHOTO11.jpg

11. Слишком большой отступ между фото и текстом справа. Сделать меньше, но чтобы оно всё не испортило в других местах!
PHOTO12.png

Потом адаптивный чинить.

Здравствуйте.  Перед внесением изменений, создайте бэкап шаблона.

2) В шаблоне main.css найдите строки:

.newCont:after,.newCont:before {
	bottom: 100%;
	right: 6.7%;
	width: 0;
	height: 0;
	content: ' ';
	pointer-events: none;
	border: solid transparent;
	position: absolute;
}

замените на:

.newCont:after,.newCont:before {
  display:none;
	bottom: 100%;
	right: 6.7%;
	width: 0;
	height: 0;
	content: ' ';
	pointer-events: none;
	border: solid transparent;
	position: absolute;
}

4) В том же шаблоне, найдите строку:

ul.head li:hover a, nav.footer-menu li:hover a {background-color:#999;}

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

ul.head li:hover a {background-color:#999;}
nav.footer-menu li:hover a {background-color:#fff;}

белый цвет замените на необходимый.

5) В том же шаблоне, найдите строки:

.footer-inner-content {
	display: inline-block;
	width: 100%;
	min-height: 100px;
	margin-bottom: -1em;
	padding-bottom: 1em;
	/* border-top: 0px solid #e1e1e1; */
	border-bottom: 1px solid #707070;
	/* background-color: #0c84ac; */
}

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

.footer-inner-content {
	display: inline-block;
	width: 100%;
	min-height: 100px;
	margin-bottom: -1em;
	/* border-top: 0px solid #e1e1e1; */
	border-bottom: 1px solid #707070;
	/* background-color: #0c84ac; */
}

1) В конец шаблона main.css вставьте строку:

.numeric.big-numeric input[type='number']:focus {border-color: #8c8c8c;}

3) там же, попробуйте строки:

.goods-list .goodsListImgBlcok > a img {
  display: block;
  margin: 0 auto;
  max-height: 245px;
  max-width: 245px;
  width: auto;
}

заменить на:

.goods-list .goodsListImgBlcok > a img {
  display: block;
  margin: 0 auto;
  max-height: 245px;
  max-width: 245px;
  width: auto;
	  padding-bottom: 8px;
}

если что-то окажется некорректным, отмените изменения этого пункта.

9) Не удалось зафиксировать данную проблему. В каком браузере Вы ее наблюдаете?

На остальные вопросы Вам ответят в следующем сообщении. На их решение потребуется немного больше времени.

[Andrew S.]

Давайте я заново всё изложу в подробностях. Из первого сообщения остаётся изменить пункт 6 с границами во всплывающем меню.

Остальное изложу заново для хорошего удобства.

[RedHead]

Andrew S. (04 Апрель 2016 - 16:14) писал:

Давайте я заново всё изложу в подробностях. Из первого сообщения остаётся изменить пункт 6 с границами во всплывающем меню.

Остальное изложу заново для хорошего удобства.

Если я правильно Вас понимаю, то по пунктам, которые Вы вычеркнули в сообщении #1, у Вас вопросов нет, и все получилось. По остальным вопросам можете расписать подробнее, если можно. Спасибо.

[Andrew S.]

Вверху - доделать пункт 6.

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

Как вижу сайт я:

1.
Измерив расстояние у фото, видно, что оно растянуто по горизонтали, что вносит искажение фотографии.
Сейчас размеры фото: 249 на 245. Это по осям x и y. 4 лишних пикселя по горизонтали. Надо 245*245.
Сам блок с фото и описанием товара вроде бы ничего. Но если уменьшить размер фото, отступы вокруг фото должны остаться одинаковыми, а значит.
Размеры блоков по горизонтали должны также уменьшиться на 4 пикселя и стать: 276*435.
Хотелось бы сделать так, чтобы размер фото и блока с фото и инфой о нём вместе с ценой и т.п. были жёстко одного размера в любых устройствах и т.п.

А расстояния между блоками по горизонтали чтобы были везде на странице одинаковыми, автоматически по ширине страницы с контентом. Это как в ворде: есть выровнять по левому или правому краю, по-середине, а есть по всей ширине. Дополнение к этому будет во второй части, как видит впервые зашедший на сайт, правда не во все разделы, а там, где нет блока с выбором диапазона цены или просмотренных товаров, т.к. он на сайте впервые. Это там, где, например, один товар.

2. Вид второй. Вроде бы всё ровно, пропорционально, но почему-то размер фото меньше: 239*239. Хотелось бы, чтобы они были как в первом режиме 245*245. Так вроде изначально положено на шаблоне.

Вернусь к этому во второй части сего повествования.

3. В третьем виде нет недочётов в неадаптивном шаблоне, т.к. им я много занимался.


Теперь о самом грустном. Открываем любой другой браузер. Если не хотите, чтобы пароли потерялись. Или   Чистим КЭШ без чистки паролей, чтобы сайт открылся как-будто Вы впервые на него зашли.
Как найти расположение на сайте с таким товаром - на фото.

1. Вид первый:

Как нужно описано в фото. Чтобы были блоки фиксированные. Размер фото фиксированный.

2. Вид второй:

Два варианта решения. Второй вариант всё-таки предпочтительный. Нужен второй. Если будут длинные описания товаров, они как раз займут всё место пустое.

3. В третьем всё нормально.


В товаре тоже всё норм.

Сообщение отредактировал Andrew S.: 04 Апрель 2016 - 19:01

[Andrew S.]

Жёсткие размеры фото 245*245 в первом и втором режимах. И жесткий размер блока в первом режиме.

Сообщение отредактировал Andrew S.: 04 Апрель 2016 - 19:03

[Andrew S.]

Не забывайте про лупу, которая будет бегать влево-вправо. Чтобы она в углу оставалась. Верхнем-правом.

[Vaccina]

Andrew S. (04 Апрель 2016 - 17:55) писал:

1. View1-276at435-245at345.jpg
Измерив расстояние у фото, видно, что оно растянуто по горизонтали, что вносит искажение фотографии.
Сейчас размеры фото: 249 на 245. Это по осям x и y. 4 лишних пикселя по горизонтали. Надо 245*245.
Сам блок с фото и описанием товара вроде бы ничего. Но если уменьшить размер фото, отступы вокруг фото должны остаться одинаковыми, а значит.
Размеры блоков по горизонтали должны также уменьшиться на 4 пикселя и стать: 276*435.
Хотелось бы сделать так, чтобы размер фото и блока с фото и инфой о нём вместе с ценой и т.п. были жёстко одного размера в любых устройствах и т.п.

А расстояния между блоками по горизонтали чтобы были везде на странице одинаковыми, автоматически по ширине страницы с контентом. Это как в ворде: есть выровнять по левому или правому краю, по-середине, а есть по всей ширине. Дополнение к этому будет во второй части, как видит впервые зашедший на сайт, правда не во все разделы, а там, где нет блока с выбором диапазона цены или просмотренных товаров, т.к. он на сайте впервые. Это там, где, например, один товар.

В main.css найдите:

.goods-table .goodsTableImg > a img {
	display: table-cell;
	height: 245px;
	width: 100%;
}

замените на:

.goods-table .goodsTableImg > a img {
	display: table-cell;
	height: 245px;
	width: auto;
	max-height: 245px;
	max-width: 245px;
}

Сам блок по ширине имеет процентный размер:

.goods-table figure {
	display: inline-block;
	float: left;
	width: 33.333333333333336%;
	height: 475px;
	padding: .6em;
}

укажите необходимый размер в px вместо %

Andrew S. (04 Апрель 2016 - 17:55) писал:

2. Вид второй. Вроде бы всё ровно, пропорционально, но почему-то размер фото меньше: 239*239. Хотелось бы, чтобы они были как в первом режиме 245*245. Так вроде изначально положено на шаблоне.
View2.jpg
Вернусь к этому во второй части сего повествования.

В main.css найдите:

.goods-list .goodsListImgBlcok > a img {
	display: block;
	margin: 0 auto;
	max-height: 245px;
	max-width: 245px;
	width: auto;
	padding-bottom: 6px;
}

замените на:

.goods-list .goodsListImgBlcok > a img {
	display: block;
	margin: 0 auto;
	max-height: 245px;
	max-width: 245px;
	padding-bottom: 6px;
	width: 245px;
	height: auto;
}

Andrew S. (04 Апрель 2016 - 17:55) писал:

1. Вид первый:
VIEW1-2.jpg
Как нужно описано в фото. Чтобы были блоки фиксированные. Размер фото фиксированный.

Проверьте поведение после изменения из первой части.

Andrew S. (04 Апрель 2016 - 17:55) писал:

2. Вид второй:
View2-2.jpg
Два варианта решения. Второй вариант всё-таки предпочтительный. Нужен второй. Если будут длинные описания товаров, они как раз займут всё место пустое.

В main.css найдите:

.goodsListImg {
	display: inline-block;
	float: left;
	width: 28%;
	position: relative;
	height: 100%;
}

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

[Andrew S.]

1.

Цитата

В main.css найдите:
.goodsListImg {
display: inline-block;
float: left;
width: 28%;
position: relative;
height: 100%;
}

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

Вот это я не понял.

2. Первый режим. Когда открыт один товар в каталоге в том разделе, что указан, когда было сильно растянуто, почему-то блок на 1 пиксель больше. Он всё равно гуляет:

И что за глюк? Я задаю бОльшие размеры, а они меньшими выходят:

.goods-table figure {
display: inline-block;
float: left;
width: 292px;
height: 475px;
padding: .6em
}

Почему всё равно всё гуляет туда сюда и размеры не те приходится подставлять? Неужели нигде нельзя вставить необходимые размеры и точка?

По-моему первый режим я уже сам сделал.

3. Второй режим. Нужно чтобы и по вертикали фото было 245. А не автоматически сколько ему вздумается.


Вот она где собака зарыта.. Второй тоже исправил. Третий режим изменялся в ущерб второму. Вот и всё.

Сообщение отредактировал Andrew S.: 05 Апрель 2016 - 08:29

[Andrew S.]

Всё, что было ДО в этой теме, вроде всё сделано, кроме:

Сначала очистить кэш, чтобы не было просмотренных товаров. Потом перейти в раздел: Главная » Каталог » Автозапчасти » Двигатель » Ремни

Смотрите:

А. В третьем режиме всё отображается пропорционально. Фото как бы по центру первой "ячейки", если представить это таблицей (но не создавать таблицу) :


Б. Но во втором режиме что-то когда-то испортили и фото уже не по центру:

Может посмотреть как в третьем режиме и поставить по аналогии? Я просто не пойму где нужные классы находятся.

Не нужно ставить фиксированные отступы. Нужно во втором режиме отображения товаров - позицию по ширине для фото задать автоматически по центру.

И, пожалуйста, чтобы не испортить ничего остального...

[Юля123]

Andrew S. (05 Апрель 2016 - 09:25) писал:

Всё, что было ДО в этой теме, вроде всё сделано, кроме:

Сначала очистить кэш, чтобы не было просмотренных товаров. Потом перейти в раздел: Главная » Каталог » Автозапчасти » Двигатель » Ремни

Смотрите:

А. В третьем режиме всё отображается пропорционально. Фото как бы по центру первой "ячейки", если представить это таблицей (но не создавать таблицу) :
rezhim3.png

Б. Но во втором режиме что-то когда-то испортили и фото уже не по центру:
rezhim2.png
Может посмотреть как в третьем режиме и поставить по аналогии? Я просто не пойму где нужные классы находятся.

Не нужно ставить фиксированные отступы. Нужно во втором режиме отображения товаров - позицию по ширине для фото задать автоматически по центру.

И, пожалуйста, чтобы не испортить ничего остального...

Здравствуйте, в main.css найдите код:

.goods-list .goodsListImgBlcok {background: #fff;display: block;height: 245px;text-align: center;width: 245px;overflow:hidden;position: relative;}

и замените на код:

.goods-list .goodsListImgBlcok {background: #fff;display: block;height: 245px;text-align: center;width: 245px;overflow:hidden;position: relative;margin: 0 auto;}

[Andrew S.]

Юля123 (05 Апрель 2016 - 12:38) писал:

Здравствуйте, в main.css найдите код:

.goods-list .goodsListImgBlcok {background: #fff;display: block;height: 245px;text-align: center;width: 245px;overflow:hidden;position: relative;}

и замените на код:

.goods-list .goodsListImgBlcok {background: #fff;display: block;height: 245px;text-align: center;width: 245px;overflow:hidden;position: relative;margin: 0 auto;}

margin: 0 auto;

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

[Юля123]

Andrew S. (05 Апрель 2016 - 15:08) писал:

margin: 0 auto;

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

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

[Andrew S.]

п. 6 не доделали:

Цвет границы не могу найти во всплывающих сообщениях

[Vaccina]

В main.css добавьте:

#noty_center_layout_container li {
	border: 1px solid #000 !important;
}

и измените значение цвета рамки на необходимое