adjusting the footer

Shapely
1

Hi,
I would like to adjust the footer a bit. Can someone please help me with the custom CSS to achieve the following? (I’m using Shapely 1.1.2)

  • Reduce the height of the footer such that the height is just enough for one line of text.
    I tried to do this with the following CSS code, but the code doesn’t reduce the height sufficiently from height < 10px.
footer#colophon {
padding-top: 20px;
}
  • footer has the same background color as header
  • footer has the same font and font color as header
    I actually had a working CSS code for this, but it doesn’t work anymore after 1.1.2 update.
footer#colophon, footer#colophon a {
    color: #0e1015;
    background: #fff;
    font-family: Raleway, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

Thanks in advance!

2

Hello Vinnie,

I hope you are doing well today.

You can use the following CSS code to change the footer by going to Appearance > Customize > Additional CSS and pasting it there.

/*Footer font color*/
.footer .footer-credits {
    color: #000;
    font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/*Footer background color*/
.bg-dark {
    background: #fff;
}

/*Footer padding*/
footer {
    padding: 1px 0;
}

Best Regards,
Support

3

Thanks a lot for the quick reply!
It solved most of the problems, but there are still a few points that need to be fixed:

  • The background of the footer is now white, but the text in the footer is still in white. (See: vinnieko.com)
  • I would like to have a horizontal line between the footer and the ‘main’ part of the website, just like between the header and the ‘main’ part.
  • Is there a way to vertically center-align the text in the footer, just like in the header?

Thank you in advance for your reply,

4

Hello Vinnie,

The color attribute can be changed to any color you need. Please delete the previous footer background color CSS code with the following:

/*Footer background color*/
.bg-dark {
    background: black;
    border-top: 1px solid gray;
}

Best Regards,
Support

5

Hi,
Thanks a lot for the code. Now I have a horizontal line between the footer and the ‘body’. However, the horizontal line is significantly thicker than the one between the header and the ‘body’. I tried to thin down the line (between the footer and the ‘body’) by using:

/*Footer background color*/
.bg-dark {
    background: black;
    border-top: 0.5px solid gray;
}

But, the thickness doesn’t get any thinner from “1px”. Any idea how to fix this?

Further, I’m afraid some of my previous issues are not yet solved:
– The background of the footer is now white, but the text in the footer is still in white. (See: vinnieko.com There is a text in white in the footer.)
– Is there a way to vertically center-align the text in the footer, just like in the header?

Thank you again for your help,

6

Hey there,
Thank you for keeping in touch.

You can use the following CSS bellow which I think covers all your queries…the border won’t get thinner than that, however I changed to color so it now looks identical to the border under the menu.

/*color footer text*/
div.copyright-text {
    color: #000;
}
/*center footer text*/
.site-info.col-sm-6 {
  width:100%
}
/*footer border color*/
.bg-dark {
    border-top: 0.1px solid #e5e5e5;
}

Best Regards,
Support

7

Thanks a lot! It solved all the issues except vertical centering of the footer text. Have a nice day!