Docs

[sargentaiden]

Hey there!

I’m looking to have a footer section with a newsletter opt-in and social media icons side-by-side that looks like the one on this site: https://pgcbasketball.com/

When I try to do it, it looks unprofessional and tacky.

I’d also like to remove the white bar at the bottom of my site: https://performancehoops.ca/ That white bar is not padding or a gap and I can’t get it to go away even when I disable footer sections.

Thank you in advance!

[sargentaiden]

Also, my header links pop down when you hover a menu title, but the pop down covers up the menu title… I’m not certain what I did to make this happen. I know I did something though; I’ve made a lot of changes to my site over the past week.

[Nico]

Hi There,

Thanks for writing in.

1. Would you mind sharing us the details on how you did it. You could do it with 2 columns. 1st column is for the newsletter while the other column is for your social media icons.

2. Not sure which white bar are you trying to remove however you could try this code if this is correct. add this in your Customizer > custom > CSS:

.page-id-178 .x-container.offset {
margin-bottom:-22px;
}

3. Add this in your customizer > custom > CSS:

.x-navbar .desktop .x-nav > li ul{
top: 38px;
}

Let us know how it goes.

Thanks.

[sargentaiden]

Hi Nico,

1. I added the “Email Form” in WordPress to the Footer.

2. Thank you! Resolved.

3. Thank you again! Resolved.

[sargentaiden]

How do I make a footer into two columns?

[Christopher]

Hi there,

Please enable footer widget areas from Customize -> Footer.

Hope it helps.

[sargentaiden]

Hey!

So I’ve got the email opt-in newsletter form as a footer now: performancehoops.ca

But there is a white bar below it between it and the social media footer that I want to remove, and a top slightly gray portion that has the word “Subscribe” in it that I want to remove.

I would also like to make the email opt-in form look more like one in the footer for this site: pgcbasketball.com

Thank you in advance!

[sargentaiden]

Regarding the format of the newsletter opt-in form, I want to be able to change all the fonts in terms of colour, size, font-family, and emphasis/bold; and move the subscribe button up to the right of the “Enter Your Email” input.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

footer.x-colophon.top {
    padding-bottom: 0;
}
@media (min-width:500px){
input.submit.x-btn.x-btn-flat.x-btn-rounded {
    margin-top: 0;
}
.x-subscribe-form fieldset {
    float: left;
}
.x-subscribe-form fieldset:first-of-type {
    width: 71%;
    margin-right: 8px;
}
}

.x-subscribe-form-163 h1 {
    color: #ffffff;
    font-family: cursive;
    font-weight: 400;
    line-height: 1;
    font-size: 20px;
    width: 100%;
    float: left;
}

input#x_subscribe_form_email {
    font-size: 14px;
    color: red;
}

Hope that helps.

[sargentaiden]

Thank you! It did. But there is still a slightly gray section right above the email opt-in footer.

[sargentaiden]

As you can see on my site, I’ve added a second footer that is in a second column with social icons. How do I alter the font of this second footer and get the background to be the same colour as Footer 1?

[Christopher]

Hi there,

Please update this :

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

To:

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

Thanks.

[sargentaiden]

Beauty!

As you can see on my site, I’ve added a second footer that is in a second column with social icons. How do I alter the font of this second footer and get the background to be the same colour as Footer 1?

[Christopher]

Please update previous code to :

footer.x-colophon.top {
    padding: 0;
    background-color: #363031;
}

Hope it helps.

[sargentaiden]

It worked! Thank you very much.

[Author]

Posts