Автор Тема: Фон (картинкой + цветом) вне блока с контентом и в шапке  (Прочитано 144 раз)

16 Октября 2016, 17:12:37
  • Новичок
  • *
  • Сообщений: 46
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Подскажите пожалуйста, куда именно в файле стилей поставить изображение (достаточно высокое), чтобы оно  повторялось только по горизонтали и видно его было бы только в шапке и по краям за пределами контента? Отмечено зеленым на скрине.

А ниже также за пределами контента сделать бежевый фон.

P.S. В шапку потом предполагается поставить еще один фон меньший по размеру.

16 Октября 2016, 23:21:14
Ответ #1
  • Пользователь
  • **
  • Сообщений: 98
  • Репутация: +2/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Блоки разные

красный фон:
header#header {
    background: red;
}

синий:
.columns-container {
    background: blue;
}

отключите кеширование CSS в админке Prestsashop и увидте пути к файлам CSS
изучайте страницу, нажмите F12 в браузере, если вы работаете в Chrome это называется DevTools http://htmlhook.ru/instrument-dlya-chrome-devtools.html

(* --[[ /* <!-- {* #  -- ; *} --> */ ]] *)
skype:vlad_stiff
17 Октября 2016, 17:40:58
Ответ #2
  • Новичок
  • *
  • Сообщений: 46
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Так то я поставлю, как вы привели код... А вот как мне нужно, не хватает знаний...
Надо чтобы картинка повторялась от левого края до правого через всю шапку, составляла единый непрерывающийся рисунок.
У меня схематично изображена одна вертикальная картинка (зеленым) от верха шапки до середины товара на витрине.
Но внутри основного блока с контентом ее не должно быть видно.
И фон то, что будет виден ниже картинки также должен быть только по краям. Именно как я заштриховал.
Плюс в шапку пойдет еще одна фоновая картинка полоской, там где лого, поиск, корзина. Это я знаю как сделать.
Получается фон зеленой картинкой будет проходить как бы под шапкой что ли. Т.к. два фоновых рисунка не поставить в один блок.
17 Октября 2016, 19:20:04
Ответ #3
  • Ветеран
  • *****
  • Сообщений: 13135
  • Репутация: +14553/-0
  • Сообщество PrestaShop
    • Просмотр профиля
18 Октября 2016, 08:39:48
Ответ #4
  • Новичок
  • *
  • Сообщений: 46
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Поставил в 2-местах упрощенно как смог
header {
  z-index: 1;
  position: relative;
  background: url(../img/header.jpg) repeat-y !important;
  padding-bottom: 15px; }

.columns-container {
  background: url(../img/header.jpg) repeat-y #fcfbdd !important; }



В итоге:
1. Изображение ниже шапки не является продолжением того, что в шапке.
И слевой колонки в шапку должно переходить, а не обрываться.
2. Повторяется вниз через небольшой отступ.
3. Распологается в блоке с контентом. А нужно только в левой и правой колонке.
4. Не отображается в правой колонке
5. Не возможно поставить в header еще одно фоновое изображение, т.к. получается уже есть.
6. Над лого осталась незакрашенная белая полоска.

18 Октября 2016, 10:54:41
Ответ #5
  • Ветеран
  • *****
  • Сообщений: 13135
  • Репутация: +14553/-0
  • Сообщество PrestaShop
    • Просмотр профиля
1. Чтобы являдось продолжение, нужно использовать 1-но изображение для 1-го блока.
2. Тоже самое что и п1.
3. У блока контента нужно установить непрозрачный бекграунд.
background:#fff;4. В правой колонке у всех блоков нужно установить прозрачный бекграунд.
5. Нельзя устанавливаить 2 изображения для 1-го блока. Можно только перекрывать один другим с помощью z-index.
6. Тоже самое что и п1.
21 Октября 2016, 18:14:50
Ответ #6
  • Новичок
  • *
  • Сообщений: 46
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Поставил фоновое изображение в body:

body {
  min-width: 320px;
  height: 100%;
  line-height: 18px;
  font-size: 13px;
  color: #777;
background: url(../img/header.jpg) repeat-x #fcfbdd !important; 
  }
  body.content_only {
    background: none;
    min-width: 0px;
  }

Только надо было repeat-x сделать, а не repeat-y. Отсюда и проблема с правой колонкой решена и дублированием вниз.

Сделал прозрачный фон у контейнера с колонками:

.columns-container {
  background: transparent !important;
}

Сделал контенту белый фон и отступы слева и с права по 15px :

#columns {
  position: relative;
  padding-bottom: 50px;
  padding-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  background:#fff;}

Сделал шапке прозрачный фон:

header {
  z-index: 1;
  position: relative;
background: transparent !important;
   }

Теперь в боковых колонках все ОК.
У контента белый фон - ОК.
Футер залился фоновым цветом. Этот момент решил, добавил !important. Теперь тоже ОК
.footer-container {
  background-color: #333 !important; }

Ту часть фонового изображения, которая должна быть в области шапки не видно (просто белый фон) - не ОК ))

Как исправить?




22 Октября 2016, 13:27:35
Ответ #7
  • Ветеран
  • *****
  • Сообщений: 13135
  • Репутация: +14553/-0
  • Сообщество PrestaShop
    • Просмотр профиля
header {
    background: /* здесь задаете ваш фон*/;
Для блоков div (banner, nav ...), которые входят в футер, задаете белый фон
background:#fff;
22 Октября 2016, 19:31:28
Ответ #8
  • Новичок
  • *
  • Сообщений: 46
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Блин, не знаю, как еще объяснить )
В шапке мне не надо другой фон отдельный. Я пытаюсь сделать один общий для шапки и боковых колонок (только контент его перекрывает белым, это сделал). Надо чтобы шапка стала прозрачной и через нее виднелся рисунок, часть которго видно в боковых колонках, а в шапке не видно сейчас почему то. Рисунок я поставил в body.

С футером разобрался. Он после установки фона в body футер залися тоже таким #fcfbdd. А серый дефолтный меня устраивал.
Поменял обратно, написал как.
22 Октября 2016, 22:40:37
Ответ #9
  • Ветеран
  • *****
  • Сообщений: 2163
  • Репутация: +49/-4
  • Сообщество PrestaShop
    • Просмотр профиля
header {
    background: /* здесь задаете ваш фон*/;
Для блоков div (banner, nav ...), которые входят в футер, задаете белый фон
background:#fff;
Везде сделай background:transparent
23 Октября 2016, 08:16:42
Ответ #10
  • Новичок
  • *
  • Сообщений: 46
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
В сообщении №6 приводил код как сделал прозрачность шапке.
header {
  z-index: 1;
  position: relative;
background: transparent !important;
   }
Но она остается белой. Что не так?
23 Октября 2016, 11:20:22
Ответ #11
  • Ветеран
  • *****
  • Сообщений: 20838
  • Репутация: +25276/-0
  • Prestashop - просто и эффективно
    • Просмотр профиля
В шаблоне header.tpl у header добавьте класс container.
<header id="header" class="container">В global.css
.header-container {
  background: transparent;
}
Эксперт Prestashop - решения всех проблем, написание модулей, создание тем для интернет-магазинов под Prestashop.
Эксперт Magento - создам сайт на Magento, программирование кастомных модулей для Magento, кастомизация тем Magento.
Лучшие цены!!!
23 Октября 2016, 12:29:43
Ответ #12
  • Новичок
  • *
  • Сообщений: 46
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
В шаблоне header.tpl у header добавьте класс container.
<header id="header" class="container">В global.css
.header-container {
  background: transparent;
}

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


И футер обрезался по краям.

23 Октября 2016, 16:15:31
Ответ #13
  • Ветеран
  • *****
  • Сообщений: 2163
  • Репутация: +49/-4
  • Сообщество PrestaShop
    • Просмотр профиля
Значит у тебя в header еще какие-то div и у них фон белый. Смотри в коде, найди все div в header и измени у них правило стилей  background: transparent.
23 Октября 2016, 18:11:01
Ответ #14
  • Новичок
  • *
  • Сообщений: 46
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Эврика! Получилось! ))
Не в div дело. Опять надо было добавить !important в header-container чтобы изменения применились
.header-container {
  background: transparent !important;
}

А как теперь футер вернуть в первоначальное состояние?
Вот такое как было не обрезанное по бокам: