Change Social Icons on Home Page

Support Forums for LiveMesh Themes & Plugins Forums Squash Theme Support Change Social Icons on Home Page

This topic is: resolved

Tagged: 

This topic contains 1 reply, has 2 voices, and was last updated by Livemesh livemesh 6 years, 1 month ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1289
    DB34000
    DB34000
    Member

    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.

    #1309
    Livemesh
    livemesh
    Keymaster
    Post count: 1011

    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.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.