Change Social Media Icons?

[tamertrad]

Hi X Theme,
How can I change the top header & footer social media icons used in “Renew” X theme to the ones in “Integrity” X theme template?
Thank you!

[ruenel]

Hello Tamer,

Thanks for writing in!

The Social Media icons in Renew stack is using a different styling than what you are seeing in Integrity. In Renew, it is using a built in CSS styling which follows:

.x-social-global a {
    display: inline-block;
    text-align: center;
    background-color: rgba(255,255,255,0.2);
    border-radius: 100em;
}

.x-colophon.bottom .x-social-global a {
    margin: 0 1.25%;
    width: 54px;
    height: 54px;
    font-size: 21px;
    line-height: 54px;
}

.x-social-global a:hover {
    background-color: #ccc;
}

.x-social-global a:hover.facebook {
    background-color: #3b5998;
}

.x-social-global a:hover.twitter {
    background-color: #00abf0;
}
.x-social-global a:hover.google-plus {
    background-color: #d84b35;
}

Feel free to use and modify the code above in your Integrity stack.

We are unable to provide CSS code for the customization as it is outside of our support scope. The points above will be a good starting point and if you are interested you can learn more about CSS selectors and details here .

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
• CSS Media Queries - https://goo.gl/L3ZHNg