Adding a Footer to a Theme

• 

  michaelohleong · Member · Feb 23, 2018 at 4:56 pm

  • Copy link
  • Add topic to favorites

  I’d like to add a fixed footer which contains some arbitrary text, a solid bar of color, and displays on both my home page and regular pages to my website.

  An example of what I’m looking for can be found here: https://www.w3schools.com/howto/howto_css_fixed_footer.asp
  I’d like a footer as displayed in the example.

  I’ve live chatted with someone and they refereed me here.

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Feb 23, 2018 at 7:21 pm

  • Copy link

  Hi there, I see you have entered the code, and you are really close, but CSS is theme specific typically, so we have to adjust your CSS selectors a bit. I’ve modified your code below and added the section so you can add some text to it, which will appear above the WordPress icon. I’ve also enclosed this code in a Media Query since on mobile devices it would take up quite a bit of the screen height and limit the space available for your content. I’ve also adjusted the top and bottom padding on the footer section to make it less tall.

  @media screen and (min-width: 600px) {
    footer#footer {
      position:fixed;
      left:0;
      bottom:0;
      width:100%;
      background-color:red;
      color:#fff;
      text-align:center;
      padding-top: 0.9em;
      padding-bottom: 0.9em
    }
    footer#footer .footer-wrap::before {
      content: "This is some text";
      display: block;
    }
  }

  Replace what you had entered with the above and let me know what you think.

• 

  michaelohleong · Member · Feb 23, 2018 at 8:05 pm

  • Copy link

  I’ve applied and edited the code you’ve provided. It seems to fit perfectly and thanks to your explanation I have grasped how to edit the code nicely. Thanks for your help. Consider this issue resolved!

• 

  michaelohleong · Member · Feb 23, 2018 at 8:06 pm

  • Copy link

  I do apologize for the double post, but I forgot to ask is there anyway to get it on the mobile version where it doesn’t take up so much screen space?

  As you can see I edited the footer to be thinner on the desktop view. I was wondering if I can add it to the mobile view as well and edit the size like I did for the desktop version

• 

  thesacredpath · Member · Feb 23, 2018 at 8:53 pm

  • Copy link

  I see you have changed to position relative instead of fixed, and if you have decided against that, let’s use the following instead.

  footer#footer {
    position:relative;
    bottom:0;
    width:100%;
    background-color:#ff9d00;
    color:black;
    text-align:center;
    padding-top:.1em;
    padding-bottom:.1em
  }
   footer#footer .footer-wrap::before {
    content:"© CoinCounseling.org 2018";
    display:block
  }

  I also noticed there is quite a bit of padding on the bottom of the content-wrapper section. You can add the following as well and adjust the padding so that it has less whitespace.

  .content-wrapper {
    padding-bottom: 0.5em;
  }

• 

  michaelohleong · Member · Feb 23, 2018 at 9:15 pm

  • Copy link

  The footer still doesn’t appear on the mobile version. I’m not sure what I’m doing wrong.

• 

  thesacredpath · Member · Feb 23, 2018 at 10:31 pm

  • Copy link

  Replace what I had previously given you with the code right above your latest reply.

• 

  michaelohleong · Member · Feb 23, 2018 at 11:06 pm

  • Copy link

  Thanks! The footer looks good on mobile now!
  Greatly appreciate your help! You’re the best!

• 

  thesacredpath · Member · Feb 23, 2018 at 11:39 pm

  • Copy link

  You are welcome, and thanks.