[Resolved] Lightweight Social Icons individual colors

Home Forums Support [Resolved] Lightweight Social Icons individual colors

Home Forums Support Lightweight Social Icons individual colors

  • This topic has 9 replies, 2 voices, and was last updated 1 year ago by Leo.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1186529
    ch1800

    Hello,

    I imagine this has been asked before but was not able to find a relevant ticket so far:

    – How to have different colors for each icon please (by CSS)?
    Facebook is blue and Youtube is red.

    Thanks!

    #1186568
    Leo
    Staff
    Customer Support

    Hi there,

    Any chance you can link us to the site in question?

    You can edit the original topic and use the private URL field.

    Let me know ๐Ÿ™‚

    #1186800
    ch1800

    Thanks Leo, done.
    I forgot this in my initial email.
    This is a temp dev URL and the icons are at footer.

    #1187438
    Leo
    Staff
    Customer Support

    I only see a Facebook icon right now and I don’t believe that’s the color you’d want to change.

    Can you add in YouTube as well?

    Let me know ๐Ÿ™‚

    #1187509
    ch1800

    Sorry about that, the cache was hiding it…
    We have now both of them.

    #1187945
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

    /* LSI Facebook */
    
    .icon-set-lsi_widget-1 .lsi-social-facebook a,
    .icon-set-lsi_widget-1 .lsi-social-facebook a:visited,
    .icon-set-lsi_widget-1 .lsi-social-facebook a:focus {
        background-color: #3b5998 !important;
        color: #fff !important;
    }
    
    /* Facebook Hover */
    
    .icon-set-lsi_widget-1 .lsi-social-facebook a:hover {
        background-color: #3b5998 !important;
        color: #fff !important;
    }
    
    /* LSI Youtube */
    
    .icon-set-lsi_widget-1 .lsi-social-youtube a,
    .icon-set-lsi_widget-1 .lsi-social-youtube a:visited,
    .icon-set-lsi_widget-1 .lsi-social-youtube a:focus {
        background-color: #c4302b !important;
        color: #fff !important;
    }
    
    /* Youtube hover */
    
    .icon-set-lsi_widget-1 .lsi-social-youtube a:hover {
        background-color: #c4302b !important;
        color: #fff !important;
    }
    #1187959
    ch1800

    Excellent as usual, many thanks!

    #1187967
    David
    Staff
    Customer Support
    #1442741
    Nicholas

    this plugin just ignores any css

    #1442810
    Leo
    Staff
    Customer Support

    Most of CSS in LSI has !important added so you will need to be more specific in the CSS selector.

    Please link us to the page in question if you need help with the code.

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.