Personalize the Footer

Support
#1

Hi Support Team!

I want to personalize my footer (Im using X Theme).

How can I do it? For example, I want to change the color, the height, etc.

Also I added 4 columns for widgets. When I selected these ones (calendar, search button, etc.) they display vertically. How I can fix this error (I want to see them horizontally, as it’s usual).

Thank you very much for your help.

#2

Hello Jorge,

Thanks for writing in!

Please add following CSS under X > Theme Options > CSS:

footer.x-colophon.top .h-widget {
    color: #000;
}

footer.x-colophon.top a {
    color: #000;
}

You need to add the widgets into their respective footer widget areas. As you have enabled 4 widget areas under Appearance > Widgets you should see widgets as shown in following screenshot. I checked the website and it seems that you are adding all widgets in under footer widget area. Please segregate the widgets into other 3 widget areas and that should fix the issue you are facing.

Thanks.

#3

Hi @Prasant

First, thank you very much for your response. About the footer widget areas, I could fix it (I didn’t check it when I added the widgets).

About the CSS code, I can’t see the differences when I add this code in global CSS (X> Theme options> CSS). How can I change other features as height, or where can I find the different codes to customize this section of my website?

Kind regards.

#4

Hi Jorge,

Regretfully the standard footer has limited options, please navigate to Theme Options > Footer to see those options. Height is not one of the options, unfortunately, because height is usually relative to your contents. You can change your Footer Background Color under Theme Options > Renew.

The space that you’re seeing on top and bottom footer content is the top and bottom padding (see the green area on the following screenshot).

If you want to get rid of that or adjust that padding, please add this to your Theme Options > CSS

.x-colophon.bottom {
	padding-top: 0;
	padding-bottom: 0;
}

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Hope it helps,
Cheers!

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.