Footer Customization

Support
#1

Hey guys… thanks for the help so far.
I opened a ticket a while back… as I was trying to customize the footer of the theme. I received @RueNel last reply and the code supplied did help. I now have a footer with the 3 blocks. (in a child theme) However, when I try and apply my css code It makes things worse.

https://demo.tutorialzine.com/2015/01/freebie-5-responsive-footer-templates/footer-distributed-with-address-and-phones.html
This is where I got the original css from for the footer.

If you need any further info please let me know.

Also… I know you guys are busy so it takes a little time to reply, where can I turn on a notification so I know when you have replied so I don’t take too long to log in and check?

I really appreciate your help. You guys and the theme are amazing.

#2

Hi there,

Thanks for writing in.

There is a tracking button on this thread, please switch it to Watching to get the notifications.

About the main issue, you can’t use that CSS since that site isn’t using X theme. What CSS do you like to implement, like how it should look? If it’s just making it full-width, then please add this CSS

.x-colophon .x-container {
width: 100%;
max-width: 100%;
}

Thanks!

#3

Hi, thanks for your response.
Ok, I’ve dumped that CSS… Is there any way I can get it to look like the example?

Full width… 3 Columns… and its own background color. Could this all go into a container and then place that container in the Footer area?

Thanks again guys.

#4

Hi,

Do you mean different background color for each column?

To achieve that, you can add this in Theme Options > CSS

.footer-left {
   background-color:red;
}

.footer-center {
   background-color:blue;
}

.footer-right {
   background-color:red;
}

If you would like to change the background of the whole footer you can add this css

.x-colophon.bottom {
      background-color:yellow;
}

I would like to check how your footer currently looks like but your site is under maintenance mode.

#5

Thanks for the reply.
I would only use one background color… one for each column would be a bit to busy.

#6

Hi There,

Thanks for the credentials but it did not work, it says Invalid username.

To have a 3 column footer widget areas, please navigate to X > Theme Options > Footer and set the FOOTER WIDGET AREAS to Three.

You can change the entire footer widget areas with this CSS code.

footer.x-colophon.top {
      background-color: red;
}

You can add this on X > Theme Options > CSS

Cheers!

#7

I have changed the credentials, so they will work this time. I have also left a note in the footer area… I hope this explains what i am trying to do?

#8

Hi,

Please change the css code that reads

.x-colophon.bottom {
      background-color:yellow;
}

to this

.x-colophon.bottom {
      background-color:yellow !important;
}

You can change the background of the inner container by changing the background of .footer-distributed

eg.

.footer-distributed{
	background-color: yellow;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
	box-sizing: border-box;
	width: 100%;
	text-align: left;
	font: bold 16px sans-serif;

	padding: 60px 60px;
	margin-top: 80px;
}

Hope that helps.

#9

Thanks so much… That’s pretty much what I need.
Just need to see if I can format the text inside the box now.

Thanks again guys… Awesome support.

#10

You’re most welcome! And yes, you can always format the text.

#11

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