Styling Social Icons, overrides? colors?

  • vongoh

    (@vongoh)


    7 years, 10 months ago

    I’m trying to style the lightweight social icons, and I’m trying to find the best way to override those !important declarations in the plugin style.css.

    Specifically:

    This plugin only allows us to set one background color for all the icons. Whereas, Facebook is blue – YouTube should be red – Twitter is a lighter blue.

    What is the best / most permanent solution for doing not only this override, but any overrides we want to make on these icons.

    Because I am assuming if we modify the plugin stylesheet directly – even if it is just to take out those heavy !important declarations – our changes will be wiped out again when we update the plugin. Correct? thanks

    https://wordpress.org/plugins/lightweight-social-icons/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Tom

    (@edge22)

    7 years, 9 months ago

    Hi there,

    Using !important is definitely not preferred, however without them it seems a lot of themes end up applying their styles to the icons.

    You definitely don’t want to alter the core code of the plugin.

    One thing you can do is view the CSS, and then make your CSS more specific and also include !important.

    That way, your code will be more important than the plugin code.

    Let me know if that makes sense or not 🙂

    iOutshine

    (@ioutshine)

    7 years, 9 months ago

    I literally just finished doing this myself 5 minutes ago.

    .lsi-social-icons li.lsi-social-facebook a {
	background-color: #3b5998 !important;
}

.lsi-social-icons li.lsi-social-facebook a:hover {
	background-color: #627aad !important;
}

    Just a quick example using Facebook. You’d do the same with whatever else and their relevant colors. Add it to your theme’s css and you’re good to go.

    Hoping to see a future update of this plugin that makes this easier. Other than that, I think LSI is pretty damn perfect (and legitimately lightweight… which is nice).

    Plugin Author Tom

    (@edge22)

    7 years, 9 months ago

    I’m definitely trying to come up with a way to scrap those !important tags, I’m sure I’ll think of something.

    Thank you for the code! 🙂

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Styling Social Icons, overrides? colors?’ is closed to new replies.