Archived topic

Footer Customization

5 replies · Started by Desmond on July 8, 2020

Viewing posts 1–6 of 6

July 8, 2020 at 12:43 am #1356056

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

July 8, 2020 at 4:43 am #1356304

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

July 8, 2020 at 8:57 pm #1357298

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

July 9, 2020 at 2:10 am #1357551

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

July 9, 2020 at 8:09 pm #1358588

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?

July 10, 2020 at 2:23 am #1358774

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/

This archived topic is closed to new replies.

Start building better websites today.