Footer - Pro Theme

[SE1217707]

Hello - need assistance. I would like to change the footer to be moved to pro themes. The guide for doing this is currently showing a 404 error message on your website: https://theme.co/docs/header-footer-overview

With that said, here is a screenshot of my website now how the footer stands with what was created in X themes (see first image below). I would like to re-create this (somewhat) in the Pro Footer section.

With that said, I would like to have two columns - the first is the information on the beige part of the screen, and the second is the information on the green part of the screen. Essentially they will now be side by side instead of on top of one another (assuming they will be on top of one another for mobile).

How can I create this in Pro? I am finding the social option only has Facebook instead of the five listed below to be side by side, and it is very skewed of how they are falling in line (see second image below). The text is overlapping, none of the font is showing like it did previously, etc. - note I did not save this edit as I did not want it to be seen on my website in production.

[marc_a]

Hey @SE1217707,

Thanks for reaching out!

The correct link for the Footer overview is this one.

• https://theme.co/docs/footer-builder-overview

Please check all the notes and videos on that page so that you will an idea how the footer builder works.

Hope that helps.

[SE1217707]

Reviewed and am somewhat closer to what I need, but still having issues.

For the First Bar: The contact form is not showing the font in black, and the text is showing as white (see screenshot above as to what it should look like where the background was beige and font was black.

For the Second Bar: the text is pulling to the left when everything is selected to be centered

For the Third Bar: the social media is pulling left and right, when it should be centered.

Please help.

[ruenel]

Hello @SE1217707,

#1: Please use the Form Integration element instead:

#2: in your 2nd Bar Container, set the Horizontal Flexbox alignment to the “Center”:

#3: You have inserted the social icons in each Container on the 3rd Bar. Set the Horizontal Alignment in the Bar element to the “Center”.

Best Regards.

[SE1217707]

Perfect! It worked - may I ask for phone numbers in the header and footer - I changed the color code, but they are still showing up as dark on my phone?

[prakash_s]

Hello @SE1217707,

I checked your site it seems that you have added inline style for the text, I would suggest you go to the Text element —>Chnage the color code.

Hope it helps
Thanks

[SE1217707]

When removing the code on the text, and changing it within the module, it does not actually change the color for the email address. In turn, I need the entire text to show as that color - right now on mobile, everything but the phone number is showing as that color.

[tristup]

Hi @SE1217707,

It is not very clear what exact problem you are having after removing the color from inline. If you want to set the color for all the section at a time, you can set it to the Text element as shown in the screenshot.

If that is not the case and you are trying to point out something else, please provide any screenshot marked with the issue or any video that helps us to recognize the problem.

Thanks

[SE1217707]

So no matter if I change the color through the last screen shot you sent or I use code, on the phone it is still showing as a dark green for the phone number. How can I fix this? (see last screenshot I sent above)

[tristup]

Hi @SE1217707,

I went ahead and remove all the inline style color and set it through the Text element color option and then I found the issue you are trying to point out. It’s the Email ID which is in the anchor tag and taking the default color for that. You need to set the color through the custom CSS code or inline style for that specific part only.

Hope it helps.
Thanks

[SE1217707]

Its still dark font on my phone for the phone number

[ruenel]

Hello @SE1217707,

Are you using an iPhone? Please check out this old thread instead:

• Iphone - phone number color - Support - Themeco Forum

Best Regards.

[SE1217707]

IT WORKED (somewhat)!

The code changed every number in the footer, but one bar is a beige and one bar is a dark green. The first circle on the image below needs to be a dark font, and the bottom circle is perfection. Do you know how to do this same code for the header?

[ruenel]

Hello @SE1217707,

You can remove footer in the CSS code. Check out these other threads:

• Underline links - but not icons etc
• How to remove blue links on telephone numbers in microsoft edge

Best Regards.

[SE1217707]

Could you help further?

Here is the code I used:
footer a[href*=“tel”],
.x-colophon a[href*=“tel”] {
color: #c4c4c4 !important;
}

When removing the word footer - it did change the phone number for all areas (header / footer) - however one of the bars has a beige background, and it is now difficult to see the phone number. Can I specifically change the phone number for each section, i.e. Footer Bar 2, Footer Bar 3, and Header?

[tristup]

Hi @SE1217707,

You can add a specific class to the Footer > Bar and add that class name as the prefix of the CSS code so it will applied to the footer only.

Hope it helps.
Thanks

[SE1217707]

Do you mean this?

bar 1 footer a[href*=“tel”],
.x-colophon a[href*=“tel”] {
color: #c4c4c4 !important;
}

[ruenel]

Hello @SE1217707,

You already removed the footer in your CSS.

This is what I mean when I replied. Clear your plugin caches and your mobile browser’s cache before testing your site again.

Best Regards.