[Stacy CParticipant]

Hi,
I set up my footer with social media icons using the customize area. It was really easy and they look great. I would like to semi-copy the same to one of my sidebars. I tried using the <div class=”x-social-global”> around my HTML in my widget but doesn’t look right. I am using the widget “text” and just adding the HTML there. Do I have to create a new CSS class to achieve this, or is there some easy way to keep all the same styles as the style in the footer?

My website is: http://thezengirl.com/dev
The footer on all the pages displays the social media icons with the circle background.
This is the page where I am trying to add the social media icons in the sidebar (at the bottom of the right sidebar, facebook/twitter/instagram): http://www.thezengirl.com/dev/blog/

[ZeshanMember]

Hi Stacy,

Thanks for writing in!

I copied the following HTML from your website’s footer, you can simply add this in your sidebar “Text” widget (replace with your previous HTML):

<div class="x-social-global">
  <a href="https://www.facebook.com/TheZenGirl" class="facebook" title="Facebook" target="_blank"><i class="x-icon-facebook-square"></i></a>
  <a href="https://twitter.com/TheZenGirl" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square"></i></a>
  <a href="https://plus.google.com/u/0/+StacyConlon/posts" class="google-plus" title="Google+" target="_blank"><i class="x-icon-google-plus-square"></i></a>
  <a href="https://www.linkedin.com/in/stacyconlon" class="linkedin" title="LinkedIn" target="_blank"><i class="x-icon-linkedin-square"></i></a>
  <a href="https://instagram.com/thezengirl/" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram"></i></a>
  <a href="https://www.pinterest.com/thezengirl/" class="pinterest" title="Pinterest" target="_blank"><i class="x-icon-pinterest-square"></i></a>
</div>

After that, add following CSS under Custom > CSS in the Customizer to match the styling of your footer social icons:

.x-sidebar .x-social-global {
    margin: 20px 0
}
.x-sidebar .x-social-global a {
    margin: 0 1.25%;
    width: 54px;
    height: 54px;
    font-size: 21px;
    font-size: 2.1rem;
    line-height: 54px
;
    color: #664375;
    background-color: rgba(102, 67, 117, 0.2);
}
.x-sidebar .x-social-global a.foursquare {
    font-size: 20px;
    font-size: 2rem
}
.x-sidebar .x-nav {
    margin: 20px 0;
    text-align: center
}
.x-sidebar .x-nav li {
    margin: 0;
    display: inline-block
}
.x-sidebar .x-nav li:before {
    content: "/";
    float: left;
    margin: 0 0.55em 0 0.45em;
    opacity: 0.35
}
.x-sidebar .x-nav li:first-child:before {
    content: none
}
.x-sidebar .x-nav li a {
    display: inline;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 1
}
.x-sidebar .x-nav li a:hover {
    background-color: transparent;
    opacity: 0.35
}
.x-sidebar .x-colophon-content {
    margin: 20px 0;
    letter-spacing: 1px;
    opacity: 1
}

You might need to style the sidebar social icons as per your preference, as the custom development is outside the scope of support, regretfully we won’t be able to assist you with further sidebar social icon styling.

Hope this helps.

Thank you.

[FelixiusParticipant]

This reply has been marked as private.

[LelyModerator]

Ooops! No problem.

[Author]

Posts