change the style of footer like header

Shapely
1

Hi,

Thanks for this simple, but beautiful theme.

I would like to change the style of footer like header.
I want:

  • footer has the same background color as header
  • footer has the same font and font color as header
  • add a horizontal border between header and ‘body’ (just like the horizontal border under header)

What would be the custom CSS code to achieve this?

2

Hi @vinnie,

I hope you are well today and thank you for your question.

– footer has the same background color as header – footer has the same font and font color as header

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other

footer#colophon, footer#colophon a {
    color: #0e1015;
    background: #fff;
    font-family: Raleway, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
– add a horizontal border between header and ‘body’ (just like the horizontal border under header)

I am not sure i understood the border you mentioned here so could you please describe it a bit more in detail by sharing the screenshot of it?

Best Regards,
Movin

3

Hi Movin,

Thanks a lot for your code.

There is one problem remaining: the custom copyright text is still in white.
(The text I typed in via: Admin Area -> Appearance -> Customize -> Footer -> Copyright Text)
How can I change the color of custom copyright text to the same color as the text in header?

Below, a screenshot to illustrate what I meant by ‘the border between header and body’.
I would like have the same line between the footer and the body.

Thanks in advance,

4
There is one problem remaining: the custom copyright text is still in white. (The text I typed in via: Admin Area -> Appearance -> Customize -> Footer -> Copyright Text) How can I change the color of custom copyright text to the same color as the text in header?

Use the below CSS code instead to achieve this.


footer#colophon .copyright-text,
footer#colophon, footer#colophon a {
    color: #0e1015;
    background: #fff;
    font-family: Raleway, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
Below, a screenshot to illustrate what I meant by ‘the border between header and body’. I would like have the same line between the footer and the body.

To achieve this use following CSS code.

footer#colophon {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
5

Hi Movin,

Your code works great. I really appreciate your help.
Have a nice day!

6

You are most welcome here :slight_smile: