How to change social icon color

  • Resolved mitchpowell

    (@mitchpowell)


    7 years, 4 months ago

    I just want to know how to change out the social icon colors. It appears to be a sprite, and I don’t know what code to use to replace the dark grey one with a white one.

    And is it possible to have them change color on hover or focus?

    Sorry if this question was asked, but the search function for this forum turned up no results.

    Thanks for a great plugin. I just need it lighter in some places.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author templateinvaders

    (@templateinvaders)

    Hello Mitch,

    Currently you can add the next CSS rule into “Template Custom CSS” section under the TI Wishlist -> Style Options or into style.css file of your child-theme:

    .tinv-wishlist .social-buttons li a.white {
    background-image: url(../img/social_white.png);
    }

    We’ll improve this in feature updates also.

    Kind Regards,
    Konstantin.

    Thread Starter mitchpowell

    (@mitchpowell)

    Thank you, Konstantin, but I can’t seem to make it work correctly.

    I’ve located line 1019 of ‘public.css,’ but this specifies ‘.tinv-wishlist .social-buttons li a’ and if I use background-image ‘social_white.png’ there, nothing shows up on the front end.

    Lines 1036 and 1040 seem to specify a light versus a dark theme, but I cannot figure out where to specify that I want the light theme.

    Thread Starter mitchpowell

    (@mitchpowell)

    I’m using my child theme rather than “Template Custom CSS” section, and I’m caching and refreshing my view properly, I believe.

    Thread Starter mitchpowell

    (@mitchpowell)

    Hi Konstantin,
    I see where unchecking the “Use Theme Style” opens up options where the social icon color can be changed to the ‘dark’ color scheme, however, that change made many other elements white also. So I reversed that condition.

    Pasting your code above directly into Template Custom CSS field and refreshing the page, no changes occur.

    If I uncheck “Use Theme Style,” and twiddle the options near the “Table” section in regard to the social icons, how might I set those options to match my site color scheme?

    Thank you, I’m not finding how to customize this, but continue exploring. I’d also like to make the social icon table a little larger too.

    Mitch

    • This reply was modified 7 years, 4 months ago by mitchpowell.
    Plugin Author templateinvaders

    (@templateinvaders)

    Hi again,

    It was a small mistake in the rule and I’m sorry for that. Simply remove the .white class from the rule provided above and it should work as expected.

    These solutions you may use in case of “Use Theme style” option is enabled in your Style Options section:

    – If you put the rule into “Template Custom CSS” section under the TI Wishlist -> Style Options, it should be:

    .tinv-wishlist .social-buttons li a {
background-image: url(../img/social_white.png);
}

    – If you put the rule into style.css file of your child-theme, you should set the absolute path for this image and the rule will look like this:

    .tinv-wishlist .social-buttons li a {
background-image: url(//domain/wp-content/plugins/ti-woocommerce-wishlist/asset/img/social_white.png);
}

    If you still have an issues please contact us via chat and our staff will be able to assist you https://templateinvaders.com/help

    Cheers

    Thread Starter mitchpowell

    (@mitchpowell)

    Thank you, Konstantin.

    I fiddled around to make things work much the way I like, but I may yet use your suggestions.

    I’m having trouble now, understanding default wish lists and the sharing on social platforms of products and product categories of not-logged-in users (guests.)

    Perhaps I’d best contact you via chat and close this topic. I’m seeing that your pro version offers much more functionality so I may need to do that.

    Plugin Author templateinvaders

    (@templateinvaders)

    Hi Mitch,

    We have just released a new plugin update and now you can change the icons from dark to white in “Social Networks Sharing Options” in your admin panel. It’s not mandatory to use solutions provided above.

    You can also use our live chat if you have any issues or concerns regarding our plugin: https://templateinvaders.com/help

    Cheers

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How to change social icon color’ is closed to new replies.