[HeisenbergwwParticipant]

Wanting to change the text in my footer to a different color, How could I do this?

[DarshanaModerator]

Hi there,

Thanks for writing in! To assist you with this request, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[HeisenbergwwParticipant]

This reply has been marked as private.

[RupokMember]

Hi there,

Thanks for the URL. You can add this under Custom > CSS in the Customizer.

/* widget title */ 
.x-colophon .h-widget {
	text-shadow: none;
	color: #fff;
}

/* widget title icon*/ 
.x-colophon .widget_text .h-widget::before {
	color: #fff;
	opacity: 1;
}

/* widget text */ 
.x-colophon .textwidget {
	text-shadow: none;
	color: #fff;
}

Hope this helps.

Cheers!

[HeisenbergwwParticipant]

Sweet thanks so much! What if I wanted one widget area text a different color than the others?

[LelyModerator]

Hi There,

We can update above CSS to this:

/* widget title first column */ 
.x-colophon.top .x-column:first-child  .h-widget {
	text-shadow: none;
	color: #fff;
}

/* widget title icon  first column */ 
.x-colophon.top .x-column:first-child  .widget_text .h-widget::before {
	color: #fff;
	opacity: 1;
}

/* widget text first column */ 
.x-colophon.top .x-column:first-child  .textwidget {
	text-shadow: none;
	color: #fff;
}

/* widget title second column */ 
.x-colophon.top .x-column:nth-child(2)  .h-widget {
	text-shadow: none;
	color: #fff;
}

/* widget title icon  second column */ 
.x-colophon.top .x-column:nth-child(2)  .widget_text .h-widget::before {
	color: #fff;
	opacity: 1;
}

/* widget text second column */ 
.x-colophon.top .x-column:nth-child(2)  .textwidget {
	text-shadow: none;
	color: #fff;
}

/* widget title third column */ 
.x-colophon.top .x-column:nth-child(3)  .h-widget {
	text-shadow: none;
	color: #fff;
}

/* widget title icon  third column */ 
.x-colophon.top .x-column:nth-child(3)  .widget_text .h-widget::before {
	color: #fff;
	opacity: 1;
}

/* widget text third column */ 
.x-colophon.top .x-column:nth-child(3)  .textwidget {
	text-shadow: none;
	color: #fff;
}

Feel free to update the colors.
Hope this helps.

[HeisenbergwwParticipant]

Awesome that worked great! How can I make add buttons with links into the widget? And have a little spacing in between text and button within the widget?

[ThaiModerator]

Hi There,

Please add the following CSS also:

div#text-5 .x-btn {
    margin-top: 15px;
}

Hope it helps 🙂

[HeisenbergwwParticipant]

Thanks! How can I make each column the same look as the first one. Right now only the first column is changed. I want to add 2 more widget areas in the prefooter….. Also I dont want so much padding on my pre-footer, how can I reduce the size of the padding?

[Nabeel AModerator]

Hi again,

You can update the previous code with the following code:

.x-colophon.top .x-column .h-widget {
	text-shadow: none;
	color: #fff;
}
.x-colophon.top .x-column .widget_text .h-widget::before {
	color: #fff;
	opacity: 1;
}

.x-colophon.top .x-column .textwidget {
	text-shadow: none;
	color: #fff;
}

To reduce the padding, you can add the following code:

.x-colophon.top {
    padding: 2% 0 !important;
}

Let us know how this goes!

[HeisenbergwwParticipant]

How can I change or hide this pre-footer on mobile devices??

[Rue NelModerator]

Hello There,

To hide the footer widget area in smaller screens, please add the following css code in the customizer, Appearance > Customize > Custom > Edit Global CSS

@media(max-width: 979px){
  .x-colophon.top {
    display: none;
  }
}

Hope this helps. Kindly let us know.

[HeisenbergwwParticipant]

What if I wanted one widget to remain but hide the others?

[DarshanaModerator]

Hi there,

Which widget you want to keep? So that we can assist you with a possible workaround.

Thanks!

[Author]

Posts