Перейти к содержанию

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

Здравствуйте! Подскажите как можно фон контентной части на стандартном шаблоне 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

Поделиться сообщением


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

demo-ocstore-2.thumb.jpg.7bb51776d133d07125702de5be52b070.jpg

а так?

Поделиться сообщением


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

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