[diatonicnerdsParticipant]

Sorry if this is an obvious question or if it was already answered. I tried searching but couldn’t find the answer.

Currently on my website http://www.jeffpenny.com I have the social media links at the top of my footer. Then, just below them is my email subscription form. Then underneath that is the site info. Is there a way to split the footer so that I can have the form on the left half of the footer and the icons/text on the right?

[Prasant RaiModerator]

Hello There,

Thanks for writing in!

To have subscription form on left and social icons on right, kindly use following CSS under Custom > CSS in the Customizer:

footer.x-colophon.bottom .x-social-global {
    float: right;
    width: 35%;
}

div#mc_embed_signup {
    float: left;
    width: 50%;
    clear: both;
}

p.footer-copyright {
    clear: both;
}

After that kindly navigate to Appearance > Customize > Footer > Footer Content and replace the existing code with the following:

<p class="footer-copyright" style="letter-spacing: 2px; text-transform: uppercase; opacity: 0.5; filter: alpha(opacity=50);clear: both;">Contents © Jeff Penny 2015 - All Rights Reserved<br><a href="http://www.jeffpenny.com">Jeff Penny Music</a></p>

Let us know how it goes.

Thanks.

[diatonicnerdsParticipant]

Thank you I really like that! But sorry, now I have another question I didn’t consider at first. Now on the right I have the social icons above a blank space. Is there a way I could put an image under those social icons?

[RupokMember]

Hi there,

Thanks for updating. Yes you can place your image as HTML in the footer content. You can also enable the Footer Widget Areas and manage the widget contents easily. TO do this go to Customize > Footer > Footer Widget Areas and select the widget numbers you want to show. See – http://prntscr.com/8zkra7

Then place the content from Appearance > Widgets – http://prntscr.com/8zkrh3

Hope this helps.

Cheers!

[diatonicnerdsParticipant]

When I use the “Customize > Footer > Footer Widget Areas” method, the content appears at the top of the footer, above everything else. When I do it as regular HTML in the footer content it ends up on the bottom. I want it in the new area to the right of the footer, underneath the social icons, that we just created.

[RadModerator]

Hi there,

In that case, please follow this,

Remove the clear: both; from this css.

div#mc_embed_signup {
    float: left;
    width: 50%;
    clear: both;
}

Then add this css,

.footer-copyright {
width: 50%;
float: right;
clear: none !important;
}

Hope this helps.

[diatonicnerdsParticipant]

Thanks, it is almost perfect. Is there anyway I can center that image vertically? I tried adding a gap above it but that lowered the email subscription form as well.

I actually have one other question for you as well. Thank you for all of the help. On my homepage I have a button that had an icon on the left and a word on the right. But now there is just a blank space and then the word. I have tried selecting numerous icons but none of them show up. Do you know what is causing this?

[Rue NelModerator]

Hello There,

Please check your custom html content. You may have inserted an invalid code:

<img src="http://www.jeffpennymusic.com/wp-content/uploads/2014/12/jeff-penny-music-logo-largeforweb.jpg" height="300" width="300" <p="" class="footer-copyright" style="letter-spacing: 2px; text-transform: uppercase; opacity: 0.5; filter: alpha(opacity=50);clear: both;">

The correct code should be this:

<img src="http://www.jeffpennymusic.com/wp-content/uploads/2014/12/jeff-penny-music-logo-largeforweb.jpg" height="300" width="300" /> <p class="footer-copyright" style="letter-spacing: 2px; text-transform: uppercase; opacity: 0.5; filter: alpha(opacity=50);clear: both;">

If that doesn’t work out, to assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look? 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.

To do this, you can make a post with the following info:
– Link to your site

– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thank you.

[diatonicnerdsParticipant]

I am a little confused. The image is showing up just fine. I am just trying to figure out how I can lower it a little on the page. When I tried I ended up lowering everything on the footer, when all I want to move is the picture.

[ZeshanMember]

Hi there,

In that case, please try adding this CSS code under Custom > CSS in the Customizer:

.x-colophon .x-colophon-content > img {
    padding-top: 50px;
}

Hope this helps. 🙂

Thank you!

[diatonicnerdsParticipant]

Awesome thank you! I have one last question and then I’ll stop bothering you. I have a callout on my front page. There is a red button that used to have a Button Icon on the left and the word About on the right. However, now the icon no longer shows up and there is just a blank space before the word About. I have tried choosing numerous different Button Icons and none of them seem to display. Do you know why this is happening?

[FriechModerator]

Hi There,

On your admin dashboard navigate to Settings > Cornerstone and Enable the Legacy Font Classes.

Hope it helps, Cheers!

[diatonicnerdsParticipant]

I don’t have a setting called Cornerstone. Am I supposed to? I don’t know what that is.

[diatonicnerdsParticipant]

Nevermind, after searching a while I figured out what Cornerstone is, installed it and everything is working correctly now! Thank you for all the help.

[FriechModerator]

Glad you sorted things out.

Cheers!

[Author]

Posts