Docs

[AlCAt]

Hi,

I’m using the Renew theme and I would like to customize my social media buttons using the images from my media library. Can you help me on this?

Thank you in advance!

[Christopher]

Hi there,

Please provide us with URL and images URL so we can help you with this.

Thanks.

[AlCAt]

This reply has been marked as private.

[Thai]

Hi There,

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

.x-social-global a.instagram {
    background: #f0f0f0 url(http://hopawaywithus.com/wp-content/uploads/2016/10/1471711667_Social-32-Instagram-Outline.png) no-repeat center center;
    background-size: 32px 32px;
}
.x-social-global a.instagram i {
    display: none;
}

Hope it helps 🙂

[AlCAt]

Hi Thai!

Exactly what I needed. Thank you! 🙂

One last question: what if I want to change the default round shape of the social media buttons to a square one?

[Thai]

Hi There,

Please add this CSS:

.x-social-global a {
    border-radius: 10px;
}

Hope it helps 🙂

[AlCAt]

Perfect! Thank you! 🙂

[Thai]

You’re most welcome 🙂

[AlCAt]

This reply has been marked as private.

[Christopher]

Hi there,

I would like to check your site but it’s under construction, please provide us with logon credentials.

Thanks.

[AlCAt]

This reply has been marked as private.

[Paul R]

Hi,

You can try this code instead.

.x-colophon.bottom .x-social-global a {
    height: 30px;
    line-height: 30px;
    width: 30px;
    border-radius: 50%;
    background-size: 15px 15px;
}

You may change the values to adjust the size.

Hope that helps.

[AlCAt]

Hi Paul,

Once again, it worked right away! Props to you guys! 🙂

Could you provide me with the CSS to reduce the space between the buttons?

Also what would be the CSS if I wanted to apply the same to my social media buttons in the top bar?

Thank you.

[Paul R]

Hi,

To adjust the spacing, you can add margin to the code provided above

eg.

.x-colophon.bottom .x-social-global a {
    height: 30px;
    line-height: 30px;
    width: 30px;
    border-radius: 50%;
    background-size: 15px 15px;
    margin: 0 5px;
}

For the topbar, you can add this under Custom > Edit Global CSS in the Customizer.

.x-topbar .x-social-global a {
    height: 30px;
    line-height: 30px;
    width: 30px;
    border-radius: 50%;
    background-size: 15px 15px;
    margin: 0 5px;
}

Hope that helps

[AlCAt]

Perfect! Thank you!

[Author]

Posts