2

I've been working on a magento theme, which inherits from Magento/blank, found at http://murkyapparel.com.

As you can see, the footer looks a bit of a mess. I might make some changes, so here is a screenshot for reference:

current footer image

What I'd like, is something like this:

desired footer image

Or, this:

another desired footer image

(Excuse the messy photoshopping... I'm being lazy)

I know that I can use the before="-" and after="-" attributes to re-arrange the order, but the comodo seal is always placed after the (broken) link to my website and isn't aligned properly.

I've tried editing the float and display attributes inline, using chrome's code inspector, through each possible combination of before and after attributes, but I can't find any configuration that will work.

The relevant blocks in my default.xml file are as follows:

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

The jcf_ad_link.phtml file is currently as follows (tested with all possible options for the display option within the style attribute, so decided to remove it entirely whilst I (or somebody here) work(s) out the problem):

Website designed by Joshua Flood

The secure_seal.phtml looks like this:

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

There are no custom CSS styles for either block anywhere else. I know it's not quite magento standard, but I'm planning to convert the majority of my theme's blocks into separate modules so I just want to get the basic layout sorted first and ensure it's all working properly.

The _extends.lessfile within my custom theme contains the following styles for the footer:

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

There is no other custom styling applied to the footer or elements contained within it.

Thanks in advance!

1

replace your less with this update:

.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;
        }
    }
}

Note: remove your all inline css.

| improve this answer | |
  • Accepted and upvoted, because your answer works well. I would like my link list to display inline, though, so I've replaced my existing footer styles within your solution. I also removed all inline styles, which aligned the .jcf_ad_link to the left of the site seal, but it was to the left of, not below, the footer links. I've decided to stick with right-alignment because it looks clean enough. Perhaps you could update the question and remove the suggestion to align left, simply advising to remove all inline CSS in order to achieve right-alignment in order to make the answer more accessible. – Joshua Flood Sep 15 '18 at 7:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.