Footer for Website

How can I get a nice looking footer for my website like the one seen here. http://www.elegantthemes.com/demo/?theme=Divi I mean there are several examples I can point you to so it does not have to look exactly like this one.

I did not pay attention that Spirit did not have a similar footer when I installed it.

I can't spend tons of time on coding so if you can please tell me the quickest way to get this done. It will be on all the pages of the website.

Thanks

  • Rupok

    Hi Dave, hope you had a wonderful day.

    Please correct me if I'm wrong, but you need 4 column list style in your footer, right? Well, you can easily do that by dragging 4 widget elements and selecting text element for those. I've already done that for you and created a basic list on 4th widget. I hope you can do this on other three widgets too. Please check the attached screenshot for reference.

    Please let us know if you have any confusion or if you are stuck at any point. We will be glad to help.

    Have a nice day. Cheers!
    Rupok

  • Dave

    Thanks but it looks horrible on mobile phone and tablet view.

    Won't be necessarily four columns that was just an example. Not sure if the 4th column will remain but i guess it's a matter of just deleting it.

    I managed to add my own texts and hopefully the coding is correct.

    Also need a background color maybe a dark brown so I guess that means also changing all the footer text colors to a more lighter one.

  • Rupok

    Hi Dave, hope you had a wonderful day.

    it looks horrible on mobile phone and tablet view

    I just checked your site from mobile and it seems ok to me. Please check the attached screenshot for reference.

    I managed to add my own texts and hopefully the coding is correct.

    Yes, your coding seems perfect.

    need a background color maybe a dark brown so I guess that means also changing all the footer text colors to a more lighter one

    You can do that with following custom CSS Code:

    #upfront-region-footer {
      background: #835c3b none repeat scroll 0 0;
    }
    #upfront-region-footer a {
      color: #ffffff;
    }
    #module-1453357589878-1163 p {
      color: #ffffff;
    }

    You can change color code from "#835c3b" and "#ffffff" to any color you want. You can use this code in Global Theme CSS section in Upfront Editor. Please check the attached screenshot for reference.

    Please let us know if you still have any confusion. We will be glad to help.

    Have a nice day. Cheers!
    Rupok

  • Dave

    You can change color code from "#835c3b" and "#ffffff" to any color you want. You can use this code in Global Theme CSS section in Upfront Editor. Please check the attached screenshot for reference.

    The css code you provided did not work. Also left the colors exactly as your example as a test before changing to any new desired colors. No go.

    I also assume this should work on Mobile and Tablet so it's also Global as in it will work on those devices as well and not just on all pages on the website. I see the codes there as well.

    I just checked your site from mobile and it seems ok to me. Please check the attached screenshot for reference.

    Yes because I experimented with it till it seem to work.

    Another thing and I asked this question before but do not recall an answer.
    Do I stay COMPLETELY out of the editor until you fixed problems or can I continue working in other areas of the website?

    I rather be working on something else while you guys are trying to fix something in another area otherwise I am SERIOUSLY behind on the project.

    For example. Been waiting 2/3 days now for an answer on this one. Someone was helping me with Top Menu trying to make that background transparent but now I don't even see the menu at all on the website. Not in any browser or on my mobile phone. I couldn't wait forever for a reply so I tried to fix the problem myself but I did ask questions first before proceeding. How long do I wait for reply?

    This ticket
    https://premium.wpmudev.org/forums/topic/menu-background#post-1122698

    Two days waiting still no reply and again menu disappeared completely from the website. I need the background transparent on all pages and make the menu appear again. I see it in the Upfront Editor but not on the website. Also my social icons are gone which were showing right of the menu.

  • Rupok

    Hi Dave, hope you had a wonderful day.

    The css code you provided did not work

    Yeah, I saw the same. So I logged in with Upfront Editor and created a preset for footer text widget and added the following custom CSS code for that preset:

    .textwidget {
      background: #835c3b none repeat scroll 0 0 !important;
      padding: 10px;
    }
    .textwidget a {
        color: #ffffff;
    }

    It's working now. Can you please check and confirm?

    Do I stay COMPLETELY out of the editor until you fixed problems or can I continue working in other areas of the website?

    You can continue working in other areas of the website.

    Original Menu and Social icons which only show now in the Upfront Editor but not on the website. Menu color background should not be showing. Should be transparent.

    I went to your site and it seems like what you are trying to achieve is already done. Please check the attached screenshot for reference.

    Am I missing something?

    I'm looking forward to hear from you and resolve this issue as soon as possible.

    Have a nice day. Cheers!
    Rupok

  • Dave

    Yeah, I saw the same. So I logged in with Upfront Editor and created a preset for footer text widget and added the following custom CSS code for that preset:

    .textwidget {
    background: #835c3b none repeat scroll 0 0 !important;
    padding: 10px;
    }
    .textwidget a {
    color: #ffffff;
    }

    Still no changes

    Still no changes not in any browsers or cell phone, Edge, MS Firefox, Chrome all latest versions. Also I checked for your code but did not see it in upfront.

    Upfront is showing a different code.

    #upfront-region-footer {
      background: #835c3b none repeat scroll 0 0;
    }
    #upfront-region-footer a {
      color: #ffffff;
    }
    #module-1453357589878-1163 p {
      color: #ffffff;
    }

    I even changed it to your suggested code and it still did not work.

    I changed it back to what was originally there btw.

    As far as the menu/icons with invisible background it is showing on the home page only not on other pages. I also see a double menu in Upfront

  • Rupok

    Hi Dave, hope you had a wonderful day.

    I can see the issue. This is really weird. Because inside your Upfront Editor, the background color and everything is working absolutely fine. But it's not reflecting in front-end. Please check the attached screenshot for reference.

    I'm really curious why this could be happening. Do you have any caching plugin installed or is there any caching enabled in your server? Can you please disable all plugins and check if the issue is still there? Can you please do a plugin conflict test just to make sure no other plugin is causing this? To know more about plugin conflict test, you can check this guide: http://premium.wpmudev.org/manuals/using-wpmu-dev/getting-support/

    Please let us know the result. I'm looking forward to hear from you and resolve this issue as soon as possible.

    Have a nice day. Cheers!
    Rupok

  • Dave

    First of all I want the entire footer area to have that same color as well not just inside the footer text widget.

    There is no cahing plugin installed.

    I followed that troubleshooting chart and it still did not work at all.

    My deadline is soon approaching for this client and all I have to show for it is bunch of website problems.

    I would appreciate it if i could get the footer color changed in the entire area and not just in the footer text area.

    I also have another problem someone is helping me with and so far no solution at all.

    I really don't understand why all these problems since i read that Upfront should be able to build my website with no problem and to be honest this seem iike a small problem that should have been fixed a long time ago.

    I have very little time left and do not want to blow this project with my client.

  • Rupok

    Hi Dave, hope you had a wonderful day.

    Our Upfront developers had a look on your site and found that there was some sort of invalid user style being saved and erroring out. They have fixed it and now all custom CSS are working. Please check the attached screenshot for reference.

    Now this is working. I've added the following custom CSS Code in Global Theme CSS section:

    /* Edit by WPMU DEV Staff */
    #upfront-region-container-footer .upfront-region-container-bg {
      background: #8a3900 none repeat scroll 0 0 !important;
    }
    .upfront-region-container-bg.upfront-image-lazy.upfront-image-lazy-bg a {
      color: #ffffff !important;
    }
    .upfront-region-container-bg.upfront-image-lazy.upfront-image-lazy-bg p {
      color: #d7d7d7 !important;
    }

    Please let us know if this is not exactly what you are looking for. We will be glad to help further.

    Have a nice day. Cheers!
    Rupok

  • Dave

    Look very awesome Rupok thanks.

    The problem now is that the main text content now appears to have changed to a much lighter color to the point it is barely visible. Same for all the other pages on the website.

    But in Upfront it looks like this. Again though this is just one example for the home page but it should be the same color for all pages where it has changed

    .

    I am not skilled at the browser inspector but I tried to find it changing colors as I go but could not.

    I also checked the code you added but the problem appears not to be in there either.

    I also noticed that your footer background color change does not show up in the Upfront Editor. Is this some sorta glitch?

    Also I changed the footer background from "Contained" to "100%" because I wanted it to cover the entire footer area. Hopefully i did not mess that up.

    "Sign up for" and "DC" portion have also changed text color

    but in Upfront it looks like it should

    [image pos="5"]

    Please let me know how to fix these.

    Thanks

    That is beyond my knowledge but with your instructions i am sure i could fix these problems myself if it's accessible to me.

  • Dave

    I have no clue what you mean by Open Access my site it working here. I do have Maintenance plugin enabled but all your support staff is able to get in anyway tmk. Otherwise not sure if that is what you mean or exactly how your system works or what you mean by Open Access.

    If it has to do with Maintenance plugin turned on and I need to turn it off please first explain to me how to keep my site out search engines and bots and especially my client who can easily access it as well.

    It appears the reason for maintenance plugin is for just that to keep the world out while under constructiuon otherwsie why open it up to the world? I am confused again if that's what you mean.

    And if this is a maintenance plugin issue don't you have access to quickly turn it on/off as needed?

  • Nithin

    Hi Dave,

    Hope you are doing good today. :slight_smile:

    Sorry for any confusion, I checked you website, and there was a CSS error in the global theme CSS which have been corrected, instead of adding the above CSS, you could easily change the background color of your footer by editing the footer region, you can also add some CSS tweaks to the footer by clicking the Edit region CSS link.

    /* WPMU DEV Staff edit */
    .upfront-region-center a {
        color: #ffffff !important;
    }
    .upfront-region-center p {
        color: #ffffff;
    }

    I have made the changes as seen in the screenshot, and have added the following CSS, your footer should now work fine. Please clear your browser cache, and check whether it works.

    Please let us know if you still need any further assistance. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.