Footer CSS Styling

[razormicro]

Using Pro with the Integrity layout and the standard Header and Footers (not custom Build versions) I have a couple of small Footer layout and styling questions please.

1. In Footer ‘upper’ section that contains the Widgets - what CSS could I use to adjust the height to make it smaller?
2. In Footer ‘lower’ section containing a Footer Menu and Social Icons - this has a different background color to the the content area and therefore the active links and links hover color settings need to be adjusted compared to the default setting for the whole site. What CSS could I use to adjust this please?

[jade]

Hello @razormicro,

@razormicro

In Footer ‘upper’ section that contains the Widgets - what CSS could I use to adjust the height to make it smaller?

There is a default top and bottom padding for the upper footer area. To adjust that, you may write a CSS that will target the top footer area then adjust the top and bottom padding. To help you get started, please find this block of code you have in the Global CSS:

footer.x-colophon.top {
    max-height: 10px !important;
}

then update it to:

footer.x-colophon.top {
    max-height: 10px !important;
    padding-top: 20px;
    padding-bottom: 20px;
}

@razormicro

In Footer ‘lower’ section containing a Footer Menu and Social Icons - this has a different background color to the the content area and therefore the active links and links hover color settings need to be adjusted compared to the default setting for the whole site. What CSS could I use to adjust this please?

You have these codes added which is causing the footer background colors to be different:

.x-colophon.top, .x-colophon.bottom {
    background-color: #ededed;
    color: ##8C1819;
}

footer.x-colophon.bottom {
    padding: 20px;
    background-color: #ddd;
}

Please change the background color values in the code and make them match.

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

[razormicro]

Thank you, the top Footer section padding adjustment worked great.

On the second question, I was asking about the bottom Footer section containing the Footer Menu and Social Icons - I need to please change the active links and links hover color settings which need to be adjusted compared to the default setting for the whole site. What CSS could I use to adjust this please?

[friech]

Hi @razormicro,

Here are a few selector classes that you can use to target the footer anchors.

/*navigation list items*/
footer .x-nav li:hover a {
	color: yellow;
}

/*social icons*/
footer .x-social-global a:hover {
	color: yellow;
}

/*links inside footer content*/
footer .x-colophon-content a:hover {
	color: yellow;
}

Just remove the :hover pseudo-class if you want to apply the styling on the normal state of the link text.

We provide some Helper Classes here, but please keep in mind that we can not list all the possible combinations of these classes (selector), it’s just impossible. With that said, you need to look for your own selector since we can not provide support for this customization, you can find the proper CSS code selector using the Chrome browser Developer Toolbar.

If you are more interested in having control over all aspects of the footer I suggest that you consider the Pro theme which has a Footer builder and you can use various elements to create a footer.

Kindly check the Elements section of our documentation to learn more on which elements you can use on Pro Header/Footer builders.

Cheers!

[razormicro]

Thank you, that helped.

[friech]

You’re most welcome,

Cheers!