Change Social Icons on Home Page

[DB34000]

Hello,
I want to change the social icons in the header to country flag icons, but only on the home page, not the other pages. Do you have an idea how I can do this?

Thank you, I really appreciate the support that you give to this great theme.

[livemesh]

If you just want to change the icons and not the URLs(my guess is you want to change both), you can just specify a different background image like this in the Custom CSS tab in theme options panel –

.home .social-container a { background: url("https://www.livemeshthemes.com/squash/wp-content/uploads/2013/08/country-flags.png") no-repeat transparent; }
.home .social-container .rss-feed a { background-position: -683px 0; }
.home .social-container .facebook a { background-position: 0 0; }
.home .social-container .twitter a { background-position: -170px 0px; }
.home .social-container .linkedin a { background-position: -554px 0px; }
......

If you want to change the URL as well, safest and easiest way is to do it through JQuery/JS. Changing PHP code is simply not worth it – can break the design specially since the theme is responsive. You can have code which looks something like this inserted into js/main.js file –

$('.home .social-container .rss-feed a').attr("href", "http://www.usa.org/");
$('.home .social-container .facebook a').attr("href", "http://www.uk.org/");
$('.home .social-container .twitter a').attr("href", "http://www.spain.org/");

If you do not care about having social icons in other pages, then you can change the URLs for the icons in the theme options panel under Header tab. Hope this helps.

[Author]

Posts