[Resolved] How do i give social icons their unique colour?

[Sean]

Hi,

I have used GP social lightweight widget at my footer for my social links, but the widget only allows me to set one colour for all social links. How do I set the individual colours for each social network?

Thanks

[Leo]

Hi there,

You’d have to use some CSS like this:

.icon-set-lsi_widget-2 .lsi-social-facebook a {
    background-color: #000 !important;
}
.icon-set-lsi_widget-2 .lsi-social-linkedin a {
    background-color: #fff !important;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Sean]

Tried that, doesn’t seem to have worked.

[Leo]

It should – I tested with browser inspect.

Not seeing the code being added?

[Sean]

Maybe it’s because i added the css in the simple css plugin.

[Sean]

I added the code, just no difference, the colours of the facebook and linkedin are still the same.

[Leo]

Simple CSS should work. However, I’m not seeing anything output.

Do you have other code added in there that might have an error?

[Sean]

I don’t think so, here is all the CSS used in the simple css plugin:

.clouds-hero {
    position: relative;
}
.clouds-hero img {
    position: absolute;
    left: 0;
    right: 0;
    top: 75vh;
}
  
@media (min-width: 769px) {
    .page-hero {
        height: 100vh;
    }
}

/* Big tablet to 1200px */
@media only screen and (max-width: 1200px) {
.clouds-hero {
    position: relative;
}
.clouds-hero img {
    position: absolute;
    left: 0;
    right: 0;
    top: 77vh;
}  
     
/* Small tablet to big tablet: from 768px to 1023px */
@media only screen and (max-width: 1023px) {
.clouds-hero {
    position: relative;
}
.clouds-hero img {
    position: absolute;
    left: 0;
    right: 0;
    top: 80vh;
}
    
/* Small phones to small tablets: from 481px to 767px */
@media only screen and (max-width: 767px) {
.clouds-hero {
	position: relative;
}
.clouds-hero img {
    position: absolute;
    left: 0;
    right: 0;
    top: 88vh;
}  

/* Small phones: from 0 to 480px */
@media only screen and (max-width: 480px) {
.clouds-hero {
	position: relative;
}
.clouds-hero img {
    position: absolute;
    left: 0;
    right: 0;
    top: 91vh;
}

.icon-set-lsi_widget-2 .lsi-social-facebook a {
    background-color: #3b5998 !important;
}

.icon-set-lsi_widget-2 .lsi-social-linkedin a {
    background-color: #0077b5 !important;
}

[David]

Each of the media queries starting from /* Big tablet to 1200px */ are missing their enclosing } so the code at the end is not executing.

[Sean]

Great all working! thanks guys!

[Leo]

Glad we could help 🙂

This site is good if you need to check CSS errors: https://jigsaw.w3.org/css-validator/

[Author]

Posts