Docs

[skirttheceiling]

Hi,

I followed the instructions, and added snapchat social icon from here:
https://community.theme.co/forums/topic/snapchat-icon/#post-387065

But i was wondering how could I change the color and the style of the icon to match the rest of my renew theme?

My website is skirttheceiling.com

[skirttheceiling]

I’d also like to add a slack icon, if possible with the same style as my other social icons

[Paul R]

Hi,

You can add this under Custom > Edit Global Javascript in the Customizer.

(function($){ 
	$('.x-social-global').append('<a href="#social-link" class="slack" title="slack" target="_blank"><i class="x-icon x-icon-slack"></i></a>');
})(jQuery);

Then add this in Custom > Edit Global CSS in the Customizer.

.x-icon-slack:before {
    content: url('http://placehold.it/30x30');
    vertical-align: middle;
}

.x-social-global a:hover.snapchat {
    background-color: red;
}

.x-social-global a:hover.slack {
    background-color: red;
}

Change http://placehold.it/30×30 with the slack icon url and red with the color that you like.

Hope that helps.

[skirttheceiling]

Thanks, that worked, but on my website in the header, the icons are the color: 545d93, and in the footer the icon becomes black. How do I change the icon to be different colors?

[Rupok]

Hi there,

Thanks for writing back! You can add this under Custom > CSS in the Customizer.

.x-colophon.bottom .x-social-global a {
  color: #545d93!important;
}

Hope this helps.

Cheers!

[skirttheceiling]

Hi sorry,

what do i do to update the top to social icon to 545d9e

[Thai]

Hi There,

Please add the following CSS:

.x-topbar .x-social-global a {
color: #545d9e !important;
}

Hope it helps 🙂

[skirttheceiling]

Hi I tried adding that but it didn’t seem to work

[Prasant Rai]

Hello There,

Please try adding this code:

.x-logobar .x-social-global a {
    color: #1c1212 !important;
}

Let us know how it goes.

Thanks.

[skirttheceiling]

Hi,

I tried adding that too, but nothing changed..

[Prasant Rai]

Hello There,

In that regards would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[Author]

Posts