Перейти к публикации
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...

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


Рекомендованные сообщения

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

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

Ссылка на комментарий
Поделиться на других сайтах


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

Ссылка на комментарий
Поделиться на других сайтах


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

2017-05-15 17_52_14-https___demo.opencart.com_index.php_route=product_product&path=20_27&product_id=.png

Изменено пользователем zidky
Ссылка на комментарий
Поделиться на других сайтах


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

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

.row {

margin:0 !important;

}

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

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

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

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

Изменено пользователем jaffagold
Ссылка на комментарий
Поделиться на других сайтах


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

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

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

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

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

Изменено пользователем zidky
Ссылка на комментарий
Поделиться на других сайтах


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

demo-ocstore-1.thumb.jpg.72fa6236fa6e2e1dc3dd2b5dd8b42db5.jpg

Так надо?

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

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

<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 поубирать

Изменено пользователем jaffagold
Ссылка на комментарий
Поделиться на других сайтах


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

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

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

Изменено пользователем zidky
Ссылка на комментарий
Поделиться на других сайтах


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

 

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

Изменено пользователем zidky
Ссылка на комментарий
Поделиться на других сайтах


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

.row {

margin:0 !important;

}

 

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

Ссылка на комментарий
Поделиться на других сайтах


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

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

Изменено пользователем zidky
Ссылка на комментарий
Поделиться на других сайтах


Цитата

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

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

 

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

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

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

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

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

P.S.

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

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

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

Фон body по бокам

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

 

Изменено пользователем jaffagold
Ссылка на комментарий
Поделиться на других сайтах


24 minutes ago, jaffagold said:

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

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

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

24 minutes ago, jaffagold said:

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

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

 

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

Изменено пользователем zidky
Ссылка на комментарий
Поделиться на других сайтах


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

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

  • +1 1
Ссылка на комментарий
Поделиться на других сайтах


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

Изменено пользователем zidky
Ссылка на комментарий
Поделиться на других сайтах


Цитата

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

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

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

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

Изменено пользователем jaffagold
Ссылка на комментарий
Поделиться на других сайтах


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

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

Изменено пользователем zidky
Ссылка на комментарий
Поделиться на других сайтах


Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
 Поделиться

  • Сейчас на странице   0 пользователей

    • Нет пользователей, просматривающих эту страницу.
×
×
  • Создать...

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.