Jump to content
infobook

background в модулях

Recommended Posts

Posted (edited)

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

Недавно начал разбираться с 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

 

Edited by infobook

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites
В 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

Share this post


Link to post
Share on other sites
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; ?>  в соответствующие зоны конструкции. Выше пример.

 

 

Share this post


Link to post
Share on other sites
Posted (edited)

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

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

 

Тема default

Edited by infobook

Share this post


Link to post
Share on other sites
Posted (edited)
3 минуты назад, infobook сказал:

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

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

 

Тема default

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

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

Edited by lexxkrt

Share this post


Link to post
Share on other sites
Posted (edited)

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

 

<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>

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

Edited by infobook

Share this post


Link to post
Share on other sites
Спойлер
<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>

 

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites
17 часов назад, infobook сказал:

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

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

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

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

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

Share this post


Link to post
Share on other sites
2 часа назад, lexxkrt сказал:

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

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

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

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

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

Share this post


Link to post
Share on other sites
Posted (edited)
Только что, infobook сказал:

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

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

home.tpl

Edited by anboza

Share this post


Link to post
Share on other sites
Posted (edited)

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

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

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

 

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

В строке

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

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

 

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

Edited by infobook

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×

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.