Docs

[fderooy]

Hi there!

I was wondering how to enable my site a social icon bar on top of my footer, something like the one you can see at the bottom of this web.

I’d like the social bar to appear across the whole site. Any code ideas to achieve it?

Thanks a lot in advance!

Cheers.

[Rupok]

Hi there,

Thanks for writing in! You can just place a section at bottom and place your social icons within Text element.

Hope this helps.

[fderooy]

Hey Rupok, thanks very much for the responde. I understand what you’re proposing, but what I’m trying to achieve is a “more permanent” solution, or a “more integrated” one. With the option you give, I would have to place a section in every page and post of my site, and add a social icons to it.

Sorry for not being clear enough, but what I’m trying to achieve is somewhat of an additional row above the various widget sections of my footer, that would automatically appear across the entire web independent of every post or page layout. Do I explain myself?

In the example I linked at the beginning of the topic, you can see that the social bar at the bottom, with its icons centered to the middle of the screen, appears everywhere you go in the site, right above the footer menus.

Any help will be very welcomed!

Cheers. 🙂

[Rue Nel]

Hello There,

Thank you for the clarifications! For a permanent solution, since your child theme is already set up, please add the following code in your child theme’s functions.php file

// Add custom content with social icons
// =============================================================================
function custom_section_before_footer() { ?>
  <div class="custom-social-footer">
  	<div class="x-container max width">
  		<div class="x-column x-1-1">
  			<?php x_social_global(); ?>
  		</div>
  	</div>
  </div>
<?php }
add_action('x_before_view_global__footer-widget-areas', 'custom_section_before_footer');
// =============================================================================

And then please add the following css code in your child theme’s style.css file

.custom-social-footer .x-social-global {
    margin: 10px 0;
    text-align: center;
}

.custom-social-footer .x-social-global a {
    margin: 0 1.25%;
    font-size: 21px;
    color: red;
}

Feel free to change the font size and the color of the icons.
Hope this helps. Please let us know how it goes.

[fderooy]

Hi Rue Nel!

Thanks very much for the code. I have entered it in the functions.php and style.css files of my child theme, but the social bar does not appear in the web yet (http://www.sociologialatinoamericana2.ucr.ac.cr/). Did I do something wrong?

Thanks a lot,

Fidel

[Darshana]

Hi there,

Did you set your social profile links under the customizer ?

Let us know.
Thanks!

[fderooy]

Alright! We’re rolling! Now I would like a few more adjustments:

1. Change the icons’ color to black or grey, or something like that (I suppose that if you provide the code, I could adjust de color value to my needs).

2. Center the social icons to the middle of the page.

3. Make the icons bigger.

4. Add a 1px black line above de social bar, maybe with a 10px padding or so.

Again: THANKS SO MUCH for the support. 🙂

Fidel

[Christopher]

Hi there,

Please change color and font-size properties values in following code :

.custom-social-footer .x-social-global a {
    margin: 0 1.25%;
    font-size: 21px;
    color: red;
}

Add this code :

.custom-social-footer {
    text-align: center;
border-top: 1px solid #000;
    padding-top: 10px;
}

Hope it helps.

[fderooy]

Thanks Chris! Works awesome!

Once more: thanks a lot for the help. 🙂

Fidel

[Lely]

You’re welcome Fidel!

Cheers!

[Author]

Posts