Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

background в модулях

infobook

Автор: ,
в Twig

 Share

Recommended Posts

infobook Rookie

infobook

Опубліковано:
Опубліковано: (змінено)

Здравствуйте!

Недавно начал разбираться с OpenCart и в связи с этим появились вопросы по верстке.

 

1. Как убрать отступ в хедере между блоками nav и header?

https://prnt.sc/tgh6u8

 

2. Как растянуть background у модуля на всю ширину?

Данный модуль выводит "Рекомендованные" товары. /catalog/view/theme/default/template/extension/module/featured.twig

https://prnt.sc/tgh7au

 

Общий background дефолтный. Version 3.0.3.3

 

Змінено користувачем infobook
Надіслати
Поділитися на інших сайтах

infobook Rookie

infobook

Опубліковано:
  • Автор
Опубліковано:
В 13.07.2020 в 06:17, anboza сказал:

1. найти в стилях и убрать

 

Здесь разобрался, оказывается было все банально, стоял отступ в 20px.

В 13.07.2020 в 06:17, anboza сказал:

2."container-fluid" для родительного блока. для внутрянки "container" 

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

template/extension/module/featured.twig 

<div class="bg-header">
<h3>{{ heading_title }}</h3>
<div class="row">
 {% for product in products %}
  <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
    <div class="product-thumb transition">
      <div class="image"><a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive" /></a></div>
      <div class="caption">
        <h4><a href="{{ product.href }}">{{ product.name }}</a></h4>
        <p>{{ product.description }}</p>
        {% if product.rating %}
        <div class="rating">
          {% for i in 5 %}
          {% if product.rating < i %}
          <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
          {% else %}
          <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span>
          {% endif %}
          {% endfor %}
        </div>
        {% endif %}
        {% if product.price %}
        <p class="price">
          {% if not product.special %}
          {{ product.price }}
          {% else %}
          <span class="price-new">{{ product.special }}</span> <span class="price-old">{{ product.price }}</span>
          {% endif %}
          {% if product.tax %}
          <span class="price-tax">{{ text_tax }} {{ product.tax }}</span>
          {% endif %}
        </p>
        {% endif %}
      </div>
      <div class="button-group">
        <button type="button" onclick="cart.add('{{ product.product_id }}');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ button_cart }}</span></button>
        <button type="button" data-toggle="tooltip" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><i class="fa fa-heart"></i></button>
        <button type="button" data-toggle="tooltip" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><i class="fa fa-exchange"></i></button>
      </div>
    </div>
  </div>
  {% endfor %}
</div>
</div>

stylesheet.css 

.bg-header {
    background: url('bg.png');
	padding: 0;

 

Screenshot_3.jpg

Надіслати
Поділитися на інших сайтах

anboza Veteran

anboza

Опубліковано:
Опубліковано:
7 часов назад, infobook сказал:

.bg-header { background: url('bg.png'); padding: 0;

если у вас однотонный фон, лучше использовать не картинку, а заливку цветом: background-color: #000;

7 часов назад, infobook сказал:

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

template/extension/module/featured.twig

принципиальная конструкция выглядит так: 

<div class="container-fluid">

//здесь все, что на всю ширину экрана

<div class="container">
//здесь все, что на ширину контейнера 
</div>

</div>

у вас скорее всего, модули подключены через схемы, а значит, чтобы они были "на весь экран", нужно вывести <?php echo $content_top; ?> и <?php echo $content_bottom; ?>  в соответствующие зоны конструкции. Выше пример.

 

 

Надіслати
Поділитися на інших сайтах
1

infobook Rookie

infobook

Опубліковано:
  • Автор
Опубліковано: (змінено)

Не получилось. Я не нашел даже упоминаний в stylesheet.css о container-fluid и container. Может у меня не правильная сборка или еще какие-то нюансы?

Саму суть решения понял. Но вот где данные классы понять не могу.

 

Тема default

Змінено користувачем infobook
Надіслати
Поділитися на інших сайтах

lexxkrt Community Regular

lexxkrt

Опубліковано:
Опубліковано: (змінено)
3 минуты назад, infobook сказал:

Не получилось. Я не нашел даже упоминаний в stylesheet.css о container-fluid и container. Может у меня не правильная сборка или еще какие-то нюансы?

Саму суть решения понял. Но вот где данные классы понять не могу.

 

Тема default

так добавьте данные классы в stylesheet.css

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

Змінено користувачем lexxkrt
Надіслати
Поділитися на інших сайтах

infobook Rookie

infobook

Опубліковано:
  • Автор
Опубліковано: (змінено)

Тогда не понимаю, что я делаю не так:

  

<div class="container-fluid">
<div class="bg-header">
</div>
</div>
<div class="container">
<h3>{{ heading_title }}</h3>
<div class="row">
 {% for product in products %}
  <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
    <div class="product-thumb transition">
      <div class="image"><a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive" /></a></div>
      <div class="caption">
        <h4><a href="{{ product.href }}">{{ product.name }}</a></h4>
        <p>{{ product.description }}</p>
        {% if product.rating %}
        <div class="rating">
          {% for i in 5 %}
          {% if product.rating < i %}
          <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
          {% else %}
          <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span>
          {% endif %}
          {% endfor %}
        </div>
        {% endif %}
        {% if product.price %}
        <p class="price">
          {% if not product.special %}
          {{ product.price }}
          {% else %}
          <span class="price-new">{{ product.special }}</span> <span class="price-old">{{ product.price }}</span>
          {% endif %}
          {% if product.tax %}
          <span class="price-tax">{{ text_tax }} {{ product.tax }}</span>
          {% endif %}
        </p>
        {% endif %}
      </div>
      <div class="button-group">
        <button type="button" onclick="cart.add('{{ product.product_id }}');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ button_cart }}</span></button>
        <button type="button" data-toggle="tooltip" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><i class="fa fa-heart"></i></button>
        <button type="button" data-toggle="tooltip" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><i class="fa fa-exchange"></i></button>
      </div>
    </div>
  </div>
  {% endfor %}
</div>
</div>

Перепробовал несколько вариантов с этими классами, но не получилось растянуть бэкграунд на всю ширину для этого модуля

Змінено користувачем infobook
Надіслати
Поділитися на інших сайтах

anboza Veteran

anboza

Опубліковано:
Опубліковано:
Спойлер 

<div class="container-fluid">
	<div class="bg-header">
	</div> <!-- это ваш фон у него в css задаете background-image: url(/путь/фон.jpg); background-size: cover;-->

		<div class="container">
		<h3>{{ heading_title }}</h3>
		<div class="row">
		 {% for product in products %}
		  <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
			<div class="product-thumb transition">
			  <div class="image"><a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive" /></a></div>
			  <div class="caption">
				<h4><a href="{{ product.href }}">{{ product.name }}</a></h4>
				<p>{{ product.description }}</p>
				{% if product.rating %}
				<div class="rating">
				  {% for i in 5 %}
				  {% if product.rating < i %}
				  <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
				  {% else %}
				  <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span>
				  {% endif %}
				  {% endfor %}
				</div>
				{% endif %}
				{% if product.price %}
				<p class="price">
				  {% if not product.special %}
				  {{ product.price }}
				  {% else %}
				  <span class="price-new">{{ product.special }}</span> <span class="price-old">{{ product.price }}</span>
				  {% endif %}
				  {% if product.tax %}
				  <span class="price-tax">{{ text_tax }} {{ product.tax }}</span>
				  {% endif %}
				</p>
				{% endif %}
			  </div>
			  <div class="button-group">
				<button type="button" onclick="cart.add('{{ product.product_id }}');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ button_cart }}</span></button>
				<button type="button" data-toggle="tooltip" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><i class="fa fa-heart"></i></button>
				<button type="button" data-toggle="tooltip" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><i class="fa fa-exchange"></i></button>
			  </div>
			</div>
		  </div>
		  {% endfor %}
		</div>
			</div>

</div>

 

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

Надіслати
Поділитися на інших сайтах
1

unlakc Apprentice

unlakc

Опубліковано:
Опубліковано:

в браузере Google Chrome имеется отличный инструмент для веб-разработчика.

Горячие клавиши для вызова Ctrl+Shift+i 

Там сверху слева нажимаете на курсор и мышью указываете нужный элемент. Вам покажет весь код + какие css используются и из какого файла. Тут же на ходу можно менять код не изменяя сами файлы. Эксперименты наше всё

Надіслати
Поділитися на інших сайтах
1

lexxkrt Community Regular

lexxkrt

Опубліковано:
Опубліковано:
17 часов назад, infobook сказал:

Тогда не понимаю, что я делаю

в этом и проблема.

вы открываете div.container-fluid вставляете в него div.row и закрываете container-fluid. а весь код находится после него. это раз.

второе контейнер создается не тут, а шаблоном выше. т.е. если в данном случае модуль на главной странице то в шаблоне common/home.twig. даже если вы данный модель поместите все в container-fluid, то данный контейнер растянется на ширину вышестоящего контейнера. если вы хотите чтобы страница была на всю ширину то нужно и базовые контейнеры делать на всю ширину.

ну и фон делать для всей страницы home а не для модуля. а может вообще стиль для body фон поставить

Надіслати
Поділитися на інших сайтах

infobook Rookie

infobook

Опубліковано:
  • Автор
Опубліковано:
2 часа назад, lexxkrt сказал:

в этом и проблема.

вы открываете div.container-fluid вставляете в него div.row и закрываете container-fluid. а весь код находится после него. это раз.

второе контейнер создается не тут, а шаблоном выше. т.е. если в данном случае модуль на главной странице то в шаблоне common/home.twig. даже если вы данный модель поместите все в container-fluid, то данный контейнер растянется на ширину вышестоящего контейнера. если вы хотите чтобы страница была на всю ширину то нужно и базовые контейнеры делать на всю ширину.

ну и фон делать для всей страницы home а не для модуля. а может вообще стиль для body фон поставить

Я понял, что моя теория не верна, спасибо! Подскажите, как реализовать бэкграунд каждого модуля на главной странице на всю ширину страницы?

Надіслати
Поділитися на інших сайтах

anboza Veteran

anboza

Опубліковано:
Опубліковано: (змінено)
Только что, infobook сказал:

Я понял, что моя теория не верна, спасибо! Подскажите, как реализовать бэкграунд каждого модуля на главной странице на всю ширину страницы?

меняете по образу и подобию home.tpl (или как там в 3-ке называется) как во вложении и далее делаете разметку каждого блока отдельно, конструкцией, как я писал выше

home.tpl

Змінено користувачем anboza
Надіслати
Поділитися на інших сайтах
1

infobook Rookie

infobook

Опубліковано:
  • Автор
Опубліковано: (змінено)

Всем огромное спасибо!!!

Благодаря Вам всем разобрался!

Ключевым моментом в завершение всей саги стал файл home.twig.

 

Может для тех кто только начинает, этот пост станет полезным:

В строке 

<div id="common-home" class="container">

удалил class="container" и благодаря первым ответам в этой теме узнал про классы container-fluid и container. В модуле расставил правильно дивы и все сработало!

 

Еще раз, всем огромное спасибо!

Змінено користувачем infobook
Надіслати
Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
 Share
Перейти до списку тем

  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку

Покупцям

Розробникам

Корисна інформація

Останні розширення

×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.

  Я даю згоду