[Support request] Footer Customization

Home Forums Support Footer Customization

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1356056
    Desmond

    I want to achieve this: https://optimization-my.d.pr/CkWcih

    1. I am using the Element footer hook for this part. How do I float the 2 buttons to the right side?

    2. How do I add the separating lines? Do I add border top & bottom to the footer main?

    3. How do I add the icons to the Address, phone and Emai1? I saw guides to add FA to menu items, but not to HTML text

    #1356304
    David
    Staff
    Customer Support

    Hi there,

    1. You can use Auto Margins to force the footer-btn-1 over like so:

    .footer-btn-1 {
        margin-left: auto;
    }

    2. This CSS:

    .footer-container, 
    .footer-widgets-container {
        border-bottom: 1px solid #fff;
    }

    3. You can include them in your HTML exactly the same way you would in a menu item eg.

    <i class="fa fa-home" aria-hidden="true"></i> More HTML

    #1357298
    Desmond

    OK, great. It worked!

    For number 3, how do I get it floating on the left of the information, similar to https://optimization-my.d.pr/CkWcih

    #1357551
    David
    Staff
    Customer Support

    I would use a HTML Widget instead of a text widget – it’s less likely that WP will insert unnecessary <p> tags.

    Then create my markup like this:

    <div class="info-widget">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" id="svg-replaced-0" class="style-svg replaced-svg svg-replaced-0"><path d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"></path></svg>
        <div class="info-content">
            <strong>CLAPAM (PPM 007-14-01101993)</strong><br>
            Box # 611, Lot 4.46A, 4th Floor<br>
            Wisma Central, Jalan Ampang<br>
            50450 Kuala Lumpur</p>
        </div>
    </div>

    And this CSS for alignment:

    .info-widget {
        position: relative;
        padding-left: 30px;
    }
    
    .info-widget svg {
        position: absolute;
        left: 0;
        top: 0;
    }
    #1358588
    Desmond

    Great, that worked perfectly!

    Pardon my ignorance, how do I get the SVG codes for the phone and envelope too? Is it using the ones from Font Awesome?

    #1358774
    David
    Staff
    Customer Support

    Yeah you can download the free SVG icons here:

    https://fontawesome.com/how-to-use/on-the-desktop/setup/getting-started

    Then simply open them in a text editor / IDE to get the <SVG> code OR open them in this site:

    https://jakearchibald.github.io/svgomg/

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.