Magento 2.2.5: Блоки добавлены в нижний колонтитул в неправильном порядке


Я работал над темой magento, которая наследуется от Magento/blank, найденной в http://murkyapparel.com.

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

current footer image

Чего бы я хотел, так это чего-то вроде этого:

desired footer image

Или это:

another desired footer image

(Извините за беспорядочную фотосъемку... я быть ленивым)

Я знаю, что могу использовать атрибуты before="-" и after="-" для изменения порядка, но печать comodo всегда размещается после (неработающей) ссылки на мой веб-сайт и не выровнена должным образом.

Я попытался отредактировать встроенные атрибуты float и display, используя инспектор кода chrome, с помощью каждой возможной комбинации атрибутов before и after, но я не могу найти никакой конфигурации, которая будет работать.

Соответствующие блоки в моем файле default.xml выглядят следующим образом следует:

<!-- Add joshuaflood.co.uk link to footer block -->
<referenceBlock name="footer">
    <block class="Magento\Framework\View\Element\Template" name="jcf-link" template="Magento_Theme::html/jcf_ad_link.phtml" after="-">
        <arguments>
            <argument name="block_id" xsi:type="string" translate="true">jcf_footer_url</argument>
        </arguments>
    </block>
</referenceBlock>
<!-- Add Comodo secure seal to footer -->
<referenceBlock name="footer">
    <block class="Magento\Framework\View\Element\Template" name="comodo-secure-seal" template="Magento_Theme::html/secure_seal.phtml" after="footer_links">
        <arguments>
            <argument name="block_id" xsi:type="string" translate="true">comodo_secure_seal</argument>
        </arguments>
    </block>
</referenceBlock>

Файл jcf_ad_link.phtml в настоящее время выглядит следующим образом (протестирован со всеми возможными вариантами опции display в атрибуте style, поэтому решил полностью удалить его, пока я (или кто-то здесь) решаю(решаю) проблему):

Веб-сайт, разработанный Джошуа Флудом

secure_seal.phtml выглядит так:

<div class="secure_seal" style="float: right;">
    <a href="https://www.instantssl.com/ssl-certificate.html" style="text-decoration:none; ">
        <img alt="SSL Certificate" src="https://www.instantssl.com/ssl-certificate-images/support/comodo_secure_100x85_transp.png" style="border: 0px;" />
    </a>
</div>

Больше нигде нет пользовательских стилей CSS для любого блока. Я знаю, что это не совсем стандарт magento, но я планирую преобразовать большинство из блоков моей темы в отдельные модули, поэтому я просто хочу сначала отсортировать базовый макет и убедиться, что все работает правильно.

Файл _extends.less в моей пользовательской теме содержит следующие стили нижнего колонтитула:

/* Footer */
.footer.links li {
    display: inline;
}
.footer.links li + li:before {
    content: " | ";
}
div[id^="st-"] .st-btn {
    margin-right: 16px !important;
}

К нижнему колонтитулу или содержащимся в нем элементам не применяется другой пользовательский стиль.

Заранее спасибо!

Author: Joshua Flood, 2018-09-12

1 answers

Замените свой less этим обновлением:

.footer{
    &.content{
        .links{
            margin-bottom: 20px;
            padding: 0 50px 0 0;
            vertical-align: top;
            float: left; 
        }
        .secure_seal{
            float: right;
        }
        .jcf_ad_link{
            float: none;
            clear: right;
        }
    }
}

Примечание: удалите все встроенные css.

 1
Author: Aakash Joshi, 2018-09-17 05:50:36