Docs

[smsfthinker]

Hello there,

Can you please help me to add my Instagram feed, and the subscription box to my footer, above the menu (like on this page http://irislillian.com/)?

I would like all these items to display in the footer for all pages.

Currently on the home page (http://blogwithconfidence.com) my Instagram feed is in a field just above the footer and my subscription box is across two lines, whereas I would like it to be inline as on http://irislillian.com/

Thanks in anticipation of your help.

Kind regards,
Helen

[Thai]

Hi Helen,

Please add the following CSS under Customizer > Custom > Global CSS:

.home footer.x-colophon.top {
    display: none;
}
.home .x-subscribe-form {
    max-width: 1000px !important;
    text-align: center;
}
.home .x-subscribe-form fieldset {
    display: inline-block;
}

.home input#x_subscribe_form_email {
    margin-bottom: 0;
    height: 44px;
}
.home .x-subscribe-form input[type="submit"] {
    margin: 0 25px 0;
}

Hope it helps 🙂

[smsfthinker]

Thanks for that,

But I can’t notice any difference apart from the subscribe form being inline.

The footer doesn’t carry across to the bottom of other pages either.

Regards,
Helen

[Thai]

Hey Helen,

The subscribe displays inline on my end:

http://i.imgur.com/vGmC4Bx.png

Could you please send me a screenshot?

Thanks.

[smsfthinker]

Thanks Thai,

Yes the subscribe displays inline for me too.

1. But I would like the subscribe area, and the instagram feed to also be in the footer area so that it displays at the bottom of all my pages.

2. Also, the space between the text above the subscribe box and the box itself is too wide so I’d like that narrowed.

3. Plus I’d like the background colour to the subscription box area to look like http://irislillian.com/

Rgeards,
Helen

[Rad]

Hi there,

1. You should add them on your footer widget area. Go to Admin > Appearance > Customizer > Footer > Footer Widget Areas and select any columns ( column 1 is more appropriate ). Then go to Admin > Appearance > Customizer > Widgets and add your email form widget, and your instagram feed as text widget.

2. It’s due to section’s padding, once you move it to the footer, it well then be removed too.

3. Once it’s added to the footer, add this CSS,

#x-subscribe-form-1794 {
    background-color: #F6F6F6;
    padding: 20px 0px;
}

Hope these helps.

[smsfthinker]

Hi Rad,

I think we’re almost there – but not quite yet. As mentioned above I’m trying to recreate the footer look here http://irislillian.com/

1. The instagram feed is only full width on the homepage footer but I’d like it full width on all pages

2. I’d like the subscription box background to be full width on every page too. Currently it isn’t (even on the homepage).

3. I’d like to change the style of the footer widget title and remove the arrow > form before the text. I’d like it to be black, 15px, italic and centred.

4. Is it possible to link the instagram title @blogconfidence to my Instagram feed https://www.instagram.com/blogconfidence/

5. Is it possible to decrease the space between the subscription and instagram widgets in order to reduce the height of the footer. Currently everything appears unevenly spaced.

6. Can the instagram feed be closer to the menu bar at the bottom (like in http://irislillian.com/.) Currently there is quite a large space.

7. Can I have a thin line at the top of the footer plus an arrow that links to top of page, as shown here http://irislillian.com/

Thanks again for your help,
Helen

[Rue Nel]

Hello Helen,

Thanks for updating in!

1] To make the instagram feed fullwidth in all pages in your site, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

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

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

.x-colophon .h-widget {
    text-align: center;
}

2] To update the susbcription box in all pages, please remove this custom css code

.home footer.x-colophon.top {
    display: none;
}
.home .x-subscribe-form {
    max-width: 1000px !important;
    text-align: center;
}
.home .x-subscribe-form fieldset {
    display: inline-block;
}
.home input#x_subscribe_form_email {
    margin-bottom: 0;
    height: 44px;
}
.home #x-subscribe-form-1794 {
    background-color: #F6F6F6;
    padding: 20px 0px;
}

You will need to replace it with this code instead:

.x-subscribe-form {
    max-width: 1000px !important;
    text-align: center;
}

.x-subscribe-form fieldset {
    display: inline-block;
}

input#x_subscribe_form_email {
    margin-bottom: 0;
    height: 44px;
}
#x-subscribe-form-1794 {
    background-color: #F6F6F6;
    padding: 20px 0px;
}

3] To change the style of the footer widget title and remove the arrow > form before the text and make it to be black, 15px, italic and centered, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-colophon .h-widget {
    color: #000;
    font-size: 15px;
    text-align: center;
    font-style: italic;
}

4] To link the instagram title @blogconfidence to your Instagram feed, please add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

(function($){
  $('.x-colophon #text-8 .h-widget').html('Follow <a href="https://www.instagram.com/blogconfidence/">@blogconfidence</a>');
})(jQuery);

5] To decrease the space between the subscription and instagram widgets in order to reduce the height of the footer, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-colophon .widget_x_email_form .x-section {
    padding: 0px !important;
}

6] To make the instagram feed be closer to the menu bar at the bottom, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-colophon #sb_instagram {
    padding-bottom: 0px !important;
}

7] To have thin line at the top of the footer, please make use of this code:

.x-colophon.top .x-container.max.width {
    border-top: solid 1px #e5e5e5;
    padding-top: 20px;
}

Adding the arrow would require additional modification to the footer. Regretfully this could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!

[Author]

Posts