Docs

[MattHoll]

Hello.

At the bottom of our page, I have a social sharing set of icons. In the footer under that is our social media network with the same icons in the same color.

I would like to customize that footer and change the colors of the icons and also give a title to that area so that above those, it says “our social media network” or something like that. As it is now, it’s confusing. I couldn’t find a solution with my search of the forum.

Our page is here.

http://www.hrvatskohomebrewprvenstvo.beer/

Any help is greatly appreciated.

[MattHoll]

To be clear, this is just turning on footer social in appearance/customization and not a widget. No color controls or title controls there so figure it’s gotta be CSS, which I can’t find on the forum. So, any help is appreciated. Thanks!

[MattHoll]

Figured out this for coloring those social icons, but still need to figure out the hover colors and how to put a title for the footer.

footer.x-colophon .x-social-global a i {
color: rgb(224, 192, 84);
font-size: 35px;
}

Any help with hover colors on those social icons and a title above them is appreciated. Thanks!

[Darshana]

Hi there,

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

.page-id-700 #x-section-13 {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

.x-colophon.bottom .x-social-global a:hover i {
    color: #ff0000 !important;
}

Hope that helps.

[MattHoll]

Thanks!

There’s a little line there though. In order to solver this, I created a section above the footer and colored the background the same as the footer. But it is as if these a little padding there or something between that section, section 13, and the footer.

I tried reducing the padding-top in the footer to 0 but that didn’t work.

.x-colophon.bottom {
border-top: 0;
padding-top:0;
background-color: rgba(38, 48, 89, 0.9);
}

And the padding in section 13, which is above that footer is also 0:

.page-id-700 #x-section-13 {
padding-bottom: 0 !important;
padding-top: 10px !important;
}

But there is still a little 1 or 2 pixel line there that is just barely a different color. Any help in getting rid of that?

Thanks.

[MattHoll]

I tried border: none and margin: none with no luck.

[MattHoll]

And I have this in the style box for the custom header.

margin: 0 auto 5px !important;

[Christopher]

Hi there,

Home page has 11 sections, are you referring to another page?

Please remove extra curly bracket :

  
          .hide_all{
            border-style:hidden;
          }
      }

Find this code and close curly bracktet:

/* Toggle Icon Hover Color */
.x-accordion-heading .x-accordion-toggle:hover:before {

You don’t need to add CSS to remove padding, simply adjust section’s padding under its settings.

Hope it helps.

[MattHoll]

I deleted the extra curly brace on the first one.

The second one was already correct. Looks like this:

.x-accordion-heading .x-accordion-toggle:hover:before {
color: rgb(242, 117, 85) ;
}

The little border line is still there.

Thanks for any help.

[MattHoll]

I now have this and still have a little line there as if borders are turned on for the custom headline above the footer, but they are not.

/* Footer Socials */
footer.x-colophon .x-social-global a i {
color: rgb(224, 192, 84);
font-size: 35px;
}

.x-colophon.bottom .x-social-global a:hover i {
color: rgb(242, 117, 85) !important;
}

[Christopher]

Hi,

Please update your code to :

.x-colophon.bottom {
    border-top: 0;
    background-color: rgba(38, 48, 89, 0.9);
    box-shadow: none;
}

Hope it helps.

[MattHoll]

Prefect! Thanks!

[Thai]

You’re most welcome 🙂

[MattHoll]

Is there a way to build the title of the social footer into the actual footer?

For the home page, I used a custom headline in a section above the footer. But the thing is, that doesn’t propagate throughout the site and is not on each blog post. And I don’t want to have to manually drop that in for every element. It’s not on any of the other pages or anything and I would like that title actually inside of the footer if at all possible.

Is there a way to do that?

The site is here:

http://www.hrvatskohomebrewprvenstvo.beer/

On the homepage you can see what I did but if you click on the blog posts, the title is not there or on any other page. Would like the title “our social media network” actually inside of the footer.

Any help is appreciated.

Thanks!

-Matt

[Rue Nel]

Hello Matt,

Thanks for updating in! To resolve your issue and place the “our social media network” directly in the footer, please follow these steps:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php

// =============================================================================
// VIEWS/INTEGRITY/WP-FOOTER.PHP
// -----------------------------------------------------------------------------
// Footer output for Integrity.
// =============================================================================

?>

  <?php x_get_view( 'global', '_header', 'widget-areas' ); ?>
  <?php x_get_view( 'global', '_footer', 'scroll-top' ); ?>
  <?php x_get_view( 'global', '_footer', 'widget-areas' ); ?>

  <?php if ( x_get_option( 'x_footer_bottom_display' ) == '1' ) : ?>

    <footer class="x-colophon bottom" role="contentinfo">
      <div class="x-container max width">

        <?php if ( x_get_option( 'x_footer_menu_display' ) == '1' ) : ?>
          <?php x_get_view( 'global', '_nav', 'footer' ); ?>
        <?php endif; ?>

        <?php if ( x_get_option( 'x_footer_social_display' ) == '1' ) : ?>
       
          <h2 class="h-custom-headline cs-ta-center" style="color: hsl(51, 34%, 82%);margin: 0 auto 5px !important;"><span>our social media network</span></h2>

          <?php x_social_global(); ?>
        <?php endif; ?>

        <?php if ( x_get_option( 'x_footer_content_display' ) == '1' ) : ?>
          <div class="x-colophon-content">
            <?php echo do_shortcode( x_get_option( 'x_footer_content' ) ); ?>
          </div>
        <?php endif; ?>

      </div>
    </footer>

  <?php endif; ?>

<?php x_get_view( 'global', '_footer' ); ?>

3] Save the file named as wp-footer.php
4] Upload this file to your server in the child theme’s folder
wp-content/themes/x-child/framework/views/integrity/

We would loved to know if this has work for you. Thank you.

[Author]

Posts