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


Изменение Цвета Фона


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

#1 Владислав178

Владислав178

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

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

Отправлено 28 Май 2016 - 13:47

Здравствуйте! Подскажите как поменять черный цвет фона на белый?
Аккаунт SL-387027

#2 Danil

Danil

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

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

Отправлено 28 Май 2016 - 14:10

Просмотр сообщенияВладислав178 (28 Май 2016 - 13:47) писал:

Здравствуйте! Подскажите как поменять черный цвет фона на белый?
Аккаунт SL-387027
Здравствуйте.
У Вас за фон каждого элемента отвечает свой блок кода, поэтому рекомендуем воспользоваться следующей инструкцией.

#3 JIN

JIN

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

  • Пользователи
  • PipPip
  • 12 сообщений
  • ГородКонгаз

Отправлено 13 Октябрь 2016 - 14:58

Доброго времени суток как я могу изменить цвет и прозрачность до 50% смотрите в скрине ... в заранее благодарен

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

  • тут.jpg


#4 Mr.Nito

Mr.Nito

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

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

Отправлено 13 Октябрь 2016 - 15:05

Просмотр сообщенияJIN (13 Октябрь 2016 - 14:58) писал:

Доброго времени суток как я могу изменить цвет и прозрачность до 50% смотрите в скрине ... в заранее благодарен
Здравствуйте.
В разделе Сайт - Редактор шаблонов откройте файл main.css
Найдите (167 строка)
/*** Шапка ***/
#header {position: absolute;min-height: 100vh;background: #272727;left: 0;top: 0;padding: 0;width: 250px;z-index: 3;}
замените на
/*** Шапка ***/
#header {position: absolute;min-height: 100vh;background: rgba(2,114,114 ,1 ) ; left: 0;top: 0;padding: 0;width: 250px;z-index: 3;}
где
background: rgba(39,39,39 ,1 ) ; - цвет фона
(что означает  красный, зеленый, синий, степень прозрачности от 0 до 1 (0.1-0.2 и т.д))

Также измените цвет блоков
/* Шапка Нижняя часть */
.header-bottom {display: inline-block;position: absolute;background: #272727;width: 100%;bottom: 0;left: 0;padding: 20px 10px;vertical-align: middle;}

и (259 строка)
.form-search #search_mini_form .search-string {height: 40px;width: 100%;background-color: #1B1B1B;padding: 10px 15px;margin: 0;color: #fff;font-family: Arial;font-size: 13px;line-height: 20px;border: 0;border-bottom: 1px solid #343434;}
значение background-color:

Сообщение отредактировал Mr.Nito: 13 Октябрь 2016 - 15:12
Дополнение


#5 Paulett

Paulett

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

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

Отправлено 26 Ноябрь 2016 - 03:59

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

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

  • Фон товара1.jpg
  • Фон товара2.jpg


#6 Mr.Nito

Mr.Nito

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

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

Отправлено 26 Ноябрь 2016 - 09:36

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

В файле  main.css
найдите
.products-grid .item {display: inline-block;position: relative;margin: 0 10px 20px;text-align: center;}

замените на
.products-grid .item {display: inline-block;position: relative;margin: 0 10px 20px;text-align: center;background: #fff;}

далее найдите

.product-view .product-img-box .general-img {position: relative;text-align: center;min-height: 200px;}

замените на
.product-view .product-img-box .general-img {position: relative;text-align: center;min-height: 200px;background: #fff;}


#7 Paulett

Paulett

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

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

Отправлено 27 Ноябрь 2016 - 03:36

Спасибо. Подскажите пожалуйста как в каталоге обвести рамкой каждую категорию (как в товарах), и чтобы при наведении мышки - цветом выделялось не только название категории, но и картинка. Аккаунт SL-382253.

#8 RayLi

RayLi

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

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

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

Просмотр сообщенияPaulett (27 Ноябрь 2016 - 03:36) писал:

Спасибо. Подскажите пожалуйста как в каталоге обвести рамкой каждую категорию (как в товарах), и чтобы при наведении мышки - цветом выделялось не только название категории, но и картинка. Аккаунт SL-382253.

Здравствуйте.
К сожалению не совсем понятен ваш запрос, так как, на данный момент все товары в категориях на вашем сайте имеют рамку и при наведение их изображения затемняется.
Пример в виде скринота прикреплён к данному сообщению.
Проверьте, пожалуйста.

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

  • 27-11-2016 9-48-50.png


#9 Paulett

Paulett

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

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

Отправлено 27 Ноябрь 2016 - 10:06

Я хотел обвести рамкой не товары, а категории.

Скрин ниже.

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

  • категории.jpg


#10 RayLi

RayLi

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

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

Отправлено 27 Ноябрь 2016 - 12:09

Просмотр сообщенияPaulett (27 Ноябрь 2016 - 10:06) писал:

Я хотел обвести рамкой не товары, а категории.

Скрин ниже.

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

.categories .item {
	display: inline-block;
	position: relative;
	margin: 0 15px 20px;
	text-align: center;
	width: 200px;
}

И замените его вот этим вот кодом:

.categories .item {
	display: inline-block;
	position: relative;
	margin: 0 15px 20px;
	text-align: center;
	width: 200px;
	border: 1px solid #e1e1e1;
	box-shadow: 0 0 10px #d4d4d4;
}


После чего в самый конец того же шаблона добавьте, пожалуйста, следующий код:

img.goods-cat-image-medium:hover {
	background: rgba(0, 0, 0, 0.1);
}


#11 Paulett

Paulett

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

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

Отправлено 27 Ноябрь 2016 - 13:11

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

Код ниже:

/* Категории */
.categories {display: flex;justify-content: center;align-items: center;flex-wrap: wrap;text-align: center;}
.categories .item {display: inline-block;position: relative;margin: 0 15px 20px;text-align: center;width: {SETTINGS_GOODS_IMAGES_SIZE_CAT_MEDIUM | divide("2")}px;border: 1px solid #e1e1e1;box-shadow: 0 0 10px #d4d4d4;}
.categories .item .cat-image {height: {SETTINGS_GOODS_IMAGES_SIZE_CAT_MEDIUM | divide("2")}px;line-height: {SETTINGS_GOODS_IMAGES_SIZE_CAT_MEDIUM | divide("2")}px;}
.categories .item .cat-image a {display: block;}
.categories .item .cat-name {margin: 10px 0 0 0;padding: 10px;}
.categories .item .cat-name a {display: block;text-overflow: ellipsis;color: #434343;font-size: 16px;font-weight: 700;}
.categories .item:hover .cat-name a {color: #ff1a24;}

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

  • категории2.jpg


#12 Paulett

Paulett

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

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

Отправлено 27 Ноябрь 2016 - 14:32

Хотелось бы добиться результата как на скрине. Только чтобы картинки были выровнены по верхнему краю и не вылазили за пределы рамки. Мне кажется, что мой код некорректен.

/* Категории */
.categories {display: flex;justify-content: center;align-items: center;flex-wrap: wrap;text-align: center;}
.categories .item {display: inline-block;position: relative;margin: 0 15px 20px;text-align: center;width: {SETTINGS_GOODS_IMAGES_SIZE_CAT_MEDIUM | divide("2")}px;}
.categories .item .cat-image {height: {SETTINGS_GOODS_IMAGES_SIZE_CAT_MEDIUM | divide("2")}px;line-height: {SETTINGS_GOODS_IMAGES_SIZE_CAT_MEDIUM | divide("2")}px;}
.categories .item .cat-image a {display: block;border: 1px solid #e1e1e1;box-shadow: 0 0 10px #d4d4d4;}
.categories .item .cat-name {margin: 10px 0 0 0;padding: 10px;}
.categories .item .cat-name a {display: block;text-overflow: ellipsis;color: #434343;font-size: 16px;font-weight: 700;}
.categories .item:hover .cat-name a {color: #ff1a24;}

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

  • категории3.jpg

Сообщение отредактировал Paulett: 27 Ноябрь 2016 - 14:59


#13 RayLi

RayLi

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

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

Отправлено 27 Ноябрь 2016 - 15:03

Просмотр сообщенияPaulett (27 Ноябрь 2016 - 14:32) писал:

Хотелось бы добиться результата как на скрине. Только чтобы картинки были выровнены по верхнему краю и не вылазили за пределы рамки. Мне кажется, что мой код некорректен.

/* Категории */
.categories {display: flex;justify-content: center;align-items: center;flex-wrap: wrap;text-align: center;}
.categories .item {display: inline-block;position: relative;margin: 0 15px 20px;text-align: center;width: {SETTINGS_GOODS_IMAGES_SIZE_CAT_MEDIUM | divide("2")}px;}
.categories .item .cat-image {height: {SETTINGS_GOODS_IMAGES_SIZE_CAT_MEDIUM | divide("2")}px;line-height: {SETTINGS_GOODS_IMAGES_SIZE_CAT_MEDIUM | divide("2")}px;}
.categories .item .cat-image a {display: block;border: 1px solid #e1e1e1;box-shadow: 0 0 10px #d4d4d4;}
.categories .item .cat-name {margin: 10px 0 0 0;padding: 10px;}
.categories .item .cat-name a {display: block;text-overflow: ellipsis;color: #434343;font-size: 16px;font-weight: 700;}
.categories .item:hover .cat-name a {color: #ff1a24;}

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

.categories .item {
	display: inline-block;
	position: relative;
	margin: 0 15px 20px;
	text-align: center;
	width: 200px;
}

И замените его вот этим вот кодом:

.categories .item {
	display: inline-block;
	position: relative;
	margin: 0 15px 20px;
	text-align: center;
	width: 200px;
	height: 300px;
}


#14 Paulett

Paulett

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

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

Отправлено 27 Ноябрь 2016 - 16:02

Спасибо. Получилось. Подскажите пожалуйста по поводу выделения цветом.
img.goods-cat-image-medium:hover {
background: rgba(0, 0, 0, 0.1);
}

Это я добавил. Картинки выделяются. Но почти все они меньше рамки. Можно ли настроить выделение всей области, а не только картинки

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

  • категории4.jpg


#15 Paulett

Paulett

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

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

Отправлено 28 Ноябрь 2016 - 02:47

Вопрос неактуален.




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

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