Фон контента в стандартном шаблоне 2.3

[zidky]

Здравствуйте! Подскажите как можно фон контентной части на стандартном шаблоне 2.3 сделать отдельного цвета, а не белого.

Задача скорее чтоб изменить фон основного фона, но там у контента не задан цвет и все заливается одним. Если присвоить цвет container или row центральной части отдельно, то он заливает с отступами по краям по 15px. У меню главное цвет не вылазит на края, а у части где контет - уже извелся.

[zidky]

После нескольких часов попыток, уже малодушно подумываю каждому расширению экрана создать свой фон картинкой с нужной шириной. Но колхоз не приветствуется.

[zidky]

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

Змінено 15 травня 2017 користувачем zidky

[jaffagold]

это из-за отрицательного марджина -15 пикселй у div.row

попробуйте глянуть такое:

.row {

margin:0 !important;

}

Тогда это белый блок станет вровень с меню. Но зато весь контент вдвинется в середину на 15 пикселей.

Может, проще в header.tpl в div.container вложить обертку  div.row? ( обернуть в нее <nav id="menu" class="navbar">)

Тут надо смотреть, в зависимости от вкуса.

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

Змінено 15 травня 2017 користувачем jaffagold

[zidky]

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

Изначально так и пробовал - обертку  div.row, но на мобильном оно неале.

Точнее пробовал обернуть все вроме этого центрально слоя и им задать другой стиль. Ведь этих центральных дивов куда больше прописано чем одного шаблона шапки и футера.

К тому же сторонние модули, если их вывести под контент, тоже будут требовать доработки если просто обернуть там див.

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

Змінено 15 травня 2017 користувачем zidky

[jaffagold]

Скрытый текст

Так надо?

Привожу кусок кода:

Скрытый текст

<div class="container">

<div class="row"><!--вот эту обертку вкладываем в div.container и у на все ровно-->
  <nav id="menu" class="navbar">
    <div class="navbar-header"><span id="category" class="visible-xs">Категории</span>
      <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
    </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">

Остается только ненужные margin border-bottom поубирать

Змінено 15 травня 2017 користувачем jaffagold

[zidky]

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

Именно как в Вашем примере и я когда-то поступил, но переделок и компенсаций под разные экраны там ненормально много.

Ведь на стандарте корзина ровняется с меню и всем контентом вообще. Как и лого с баннером - все ровненько.

Змінено 15 травня 2017 користувачем zidky

[jaffagold]

Скрытый текст

а так?

[pimur]

http://bootstrap-3.ru/index.php

[zidky]

jaffagold, а так будет с отступами только баннер (подозреваю и блок товаров, его не видно) , а все остальное - без отступов начиная с небольшого планшета. На десктопе кроме баннера все как нужно. Но все немного пришлось подправить -верно? А на остальных размерах получаем совсем печаль.

 

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

Змінено 15 травня 2017 користувачем zidky

[HyperLabTeam]

50 минут назад, jaffagold сказал:

.row {

margin:0 !important;

}

 

.row трогать плохая затея.
тут лучше по контейнеру втащить остальное

[zidky]

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

Но вот с меню и крошками такого не происходит почему-то. Они прекрасно сидят в том же контейнере и не жужжат, фон имеют по нужным границам.

Змінено 15 травня 2017 користувачем zidky

[jaffagold]

Цитата

.row трогать плохая затея.

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

 

23 минуты назад, zidky сказал:

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

Да я-то понимаю.

Вы себе противоречите, то вам контент надо ровнять, то поля. Да  еще и паддинги и марджины оставить.

делайте скриншот как есть и рисуйте на нем как надо.

P.S.

Я делал на одном сайте иначе

Я сделал сверху донизу div.wrapper

Открывающий тег был в header.tpl, а закрывающий в footer.tpl

Фон body по бокам

Фон центральной части задал для .wrapper

 

Змінено 15 травня 2017 користувачем jaffagold

[zidky]

24 minutes ago, jaffagold said:

Я сделал сверху донизу div.wrapper

Открывающий тег был в header.tpl, а закрывающий в footer.tpl

А если отступы между блоками (меню, контент, модули) нужно тоже в цвет фона? - выйдет все одним.

24 minutes ago, jaffagold said:

Вы себе противоречите, то вам контент надо ровнять, то поля. Да  еще и паддинги и марджины оставить.

А что в них плохого? Они нормально и на мобильном продуманы и на планшете, и на десктопе. Но вот центральный див (я обрисовал какой кусочек выпирает в первых постах) ведет себя не как меню и крошки. Я совсем не понимаю почему, если он с ними в одном контейнере даже находится.

 

Вот http://sstore23.octemplates.net в этом шаблоне такое сделано. Но не пойму как. Они что все выходит переписали и добавили во все модули свой див?  Это уж слишком отчаянно. Наверное проще выбросит этот bootstrap и на все разрешения переписать свои размеры всего )). Простецкая, казалось, затея...

Змінено 15 травня 2017 користувачем zidky

[jaffagold]

Я вам только что написал как это делается- обертка по всей высоте сайта.

посмотрите div.container после скриптов, который оборачивает весь контент. в том числе и <header class="row">  

[zidky]

Не поможет обертывание все решить. Прочие хитрости так же оказались рабочими только на десктопной версии. За то обнаружилось что после неких строк в стиле нужного row мир становится добрее а женщины мило улыбаются:
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
После бекграунд впрыгивает в желаемые границы и остается в них на всех размерах. 

Змінено 15 травня 2017 користувачем zidky

[jaffagold]

Цитата

-webkit-margin-start и -webkit-padding-start, которые эквиваленты margin-left и padding-left соответственно. ...

Вендорные свойства отсутствуют в спецификациях, поэтому делают CCS код невалидным.

Насчет невалидности- не знаю. Время идет..

а смысл? чем margin-left:0; margin-right:0; отличается в вашем случае?

Змінено 15 травня 2017 користувачем jaffagold

[zidky]

 Дело тонкое, о нем списана целая страница.

argin-left:0; margin-right:0; рушат шаблон и создают в последствии еще больше проблем, чем помощи от них. Если говорить конечно о поддержке всех функций шаблона. И конечно же речь идет именно об конкретном случае контента в этом шаблоне.

Змінено 15 травня 2017 користувачем zidky