Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up

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


Recommended Posts

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

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

Link to post
Share on other sites

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

Link to post
Share on other sites

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

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

Edited by zidky
Link to post
Share on other sites

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

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

.row {

margin:0 !important;

}

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

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

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

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

Edited by jaffagold
Link to post
Share on other sites

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

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

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

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

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

Edited by zidky
Link to post
Share on other sites

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

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

Edited by jaffagold
Link to post
Share on other sites

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

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

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

Edited by zidky
Link to post
Share on other sites

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

 

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

Edited by zidky
Link to post
Share on other sites

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

.row {

margin:0 !important;

}

 

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

Link to post
Share on other sites

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

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

Edited by zidky
Link to post
Share on other sites

Цитата

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

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

 

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

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

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

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

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

P.S.

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

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

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

Фон body по бокам

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

 

Edited by jaffagold
Link to post
Share on other sites

24 minutes ago, jaffagold said:

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

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

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

24 minutes ago, jaffagold said:

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

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

 

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

Edited by zidky
Link to post
Share on other sites

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

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

  • +1 1
Link to post
Share on other sites

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

Edited by zidky
Link to post
Share on other sites

Цитата

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

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

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

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

Edited by jaffagold
Link to post
Share on other sites

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

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

Edited by zidky
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.