Footer Colour

1924london · Member · Jul 19, 2017 at 6:27 pm
Copy link

Add topic to favorites
Hi there, I would like to change the colour of my footer in my Gateway theme from grey to white. Changing the background doesn’t affect this. Any help? Thanks

The blog I need help with is: (visible only to logged in users)
garysixtyeight · Member · Jul 19, 2017 at 6:34 pm
Copy link
Hi there,

It can be changed by adding the CSS below to the panel in My Sites > Customize > CSS.
```
.footer-wrap {
    background: #ffffff;
}
```
https://en.support.wordpress.com/custom-design/editing-css/

Adding CSS is a feature of the Premium and Business plans only.

I hope this helps :)
1924london · Member · Jul 19, 2017 at 6:47 pm
Copy link
Upgraded my account and it helped instantly! Thank you so much!
garysixtyeight · Member · Jul 19, 2017 at 6:59 pm
Copy link
You’re welcome :)

Widget titles in the footer are invisible because they’re now white text on a white background.

If you’d like to change the colour of widget titles in the footer, please try using:
```
.site-footer .widget-title {
    color: #666;
}
```
1924london · Member · Jul 19, 2017 at 7:00 pm
Copy link
Fantastic! Would you also happen to know how to get my Instagram photos to post the whole length of my 3 footers. The widget will allow me to control columns, but they build down, rather than across. I would like it to look like the instagram display at the bottom of this site: http://www.monikahibbs.com/
garysixtyeight · Member · Jul 19, 2017 at 7:34 pm
Copy link
If you plan on only using one footer widget, please try adding this css to make it span the whole footer area:

.site-footer .widget-area {
width: 100%;
margin-right: 0;
}

If you’d like to have more than 3 images per row, please add some additional images to the widget, let me know how many you’d like per row, and I try working on some css for it.

Thanks :)
1924london · Member · Jul 19, 2017 at 8:23 pm
Copy link
I would love 2 rows with 6 images each, but much smaller. Possible?
garysixtyeight · Member · Jul 19, 2017 at 9:13 pm
Copy link
Please try using the css below.

It should create rows of 6 on desktop screens.

On smaller screens, each image would be a bit squished if there’s 6 per row, so I’ve added another css rule to switch it to 4 per row for narrower screens (mobile devices).
```
.wpcom-instagram-columns-3 img {
    max-width: 23%;
}

@media screen and (min-width: 1083px) {
    .wpcom-instagram-columns-3 img {
        max-width: 14.6%;
     }
}
```
If the css doesn’t work as desired, please let me know.

Thanks :)
1924london · Member · Jul 20, 2017 at 2:25 pm
Copy link
It works! Thank you thank you! Any chance you know how to link your header image to the home page?
garysixtyeight · Member · Jul 20, 2017 at 2:35 pm
Copy link
It works! Thank you thank you!

You’re welcome.

Any chance you know how to link your header image to the home page?

The header image is a background image; it’s not possible to link background images.

It you wanted a clickable image, you’d need to use the site logo option- but that won’t give you the appearance you want, it’d be too small and cropped.

No items found.