Customizing Icon Footer

Support
#1

I am trying to do two things:

  1. How can I have the bottom footer section narrower? I’ve tried adding CSS to have the padding be only 5px for the top + bottom, but, it doesn’t adjust correctly.

  2. How can I have the titles in the footer widget area be a different color than that of the text?

Also - why are the social icons not available in the widget area so that you can add them to different areas?

Thanks!

#2

Hi There,

Thank you for writing in, 1) Besides of the x-colophon.bottom padding, the x-social-global (social icons) and x-colophon-content (content) has a top and bottom margin, you can adjust that with the custom CSS below.

.x-colophon.bottom .x-social-global {
	margin-top: 0px;
	margin-bottom: 0px;
}

.x-colophon.bottom .x-colophon-content,
.x-colophon.bottom .x-colophon-content p {
	margin-top: 0px;
	margin-bottom: 0px;
}
  1. Use the custom CSS below to change the footer’s widget titles.
/*footer widget title color*/
.x-colophon h4.h-widget {
	color: red;
}
  1. You need to use the icon shortcode (http://demo.theme.co/renew-1/shortcodes/icons/), wrap it on an anchor <a> tag so you can link it to your social pages.

e.g

<a href="SOCIAL PAGE URL HERE">[x_icon type="facebook-square"]</a>

If you need the icons being inline, do not put a line-break on each icon shortcode.

Hope it helps,
Cheers!

#3

Thank you!

#4

You’re welcome! :slight_smile: