Social media menu change color

Support
#1

Hi together,

I want to change the color of my social media menu and change the form like on my other site. Unfortunately the code doesnt work.

body footer.x-colophon.bottom .x-social-global a {
  color: #444;
}

body footer.x-colophon.bottom .x-nav li a {
  color: #151515;
}

body footer.x-colophon.bottom .x-colophon-content p, body footer.x-colophon.bottom .x-colophon-content a {
  color: #151515;
}

On my other site

it works and looks nice. So what did I wrong? Basically I want to have the menu like on my other site but without the hoover instead I want to have the colors of the social media icons like in my picture.

Thanks

#2

Hello @patsorules,

Thanks for writing in!

Your ASA Punity site is using Renew stack while Siemutternatur site is using Integrity. If you want some circles around your social icons, you will have to use this custom css:

body footer.x-colophon.bottom .x-social-global a {
  color: #444;
  border-radius: 50%;
  background-color: #e5e5e5;
  width: 40px;
  height: 40px;
  margin: 0 1.25%;
  font-size: 21px;
  line-height: 40px;
}

body footer.x-colophon.bottom .x-social-global a:hover {
  background-color: #3f729b;
}



body footer.x-colophon.bottom .x-nav li a {
  color: #151515;
}

body footer.x-colophon.bottom .x-colophon-content p, body footer.x-colophon.bottom .x-colophon-content a {
  color: #151515;
}

Just to manage your expectations, this isn’t specifically a theme issue, but rather, your customisation of it. So whilst I have happily provided you with some guidance above on how to get it working, we cannot provide theme customisation as a general rule, or support custom code solutions provided. Therefore, you might find it helpful to check out the following:

CSS Selector Reference
How to find the css selector in chrome

#3

Hi Ruenel,

I dont want to have round circles, I just want to have color in the social media icons and to change one of the social media items to Instagram.

I appreciate your code. But the code is changing all the colors at the hover to the same color.
Basically I just want that the Icons are all in color x and when I go with the mouse to Facebook it should be blue, at youtube red and at instagram like the pink you already put in.

#4

Hi @patsorules,


.x-colophon.bottom .x-social-global a {
    color: yellow; /*Default color*/
}
.x-colophon.bottom .x-social-global a.facebook:hover {
    color: blue;
}
.x-colophon.bottom .x-social-global a.instagram:hover {
    color: pink;
}
.x-colophon.bottom .x-social-global a.youtube:hover {
    color: red;
}

Change all the values accordingly.

To change which social icons will show, please go to Theme Options > Social. Add only link for certain social icons. Please leave it blank if you don’t want to show it.

Again for guidance to check the class of icons, see the following:

#5

Thank you. Which part is here for the hover effect. So when I want to delete the hover effect and make it static what I have to delete of the code?

Other question: Is there any widget to display the social media menu in the sidebar as well?

#6

Hello @patsorules,

The CSS code for the active social link is:

.x-colophon.bottom .x-social-global a {
    color: yellow; /*Default color*/
}

And the rest of the code given by @Lely is for the hover state:

.x-colophon.bottom .x-social-global a.facebook:hover {
    color: blue;
}
.x-colophon.bottom .x-social-global a.instagram:hover {
    color: pink;
}
.x-colophon.bottom .x-social-global a.youtube:hover {
    color: red;
}

Regretfully the social icons can only be displayed in the topbar or on the footer. Adding social icons in the sidebar will require you to install a 3rd party plugin: https://wordpress.org/plugins/search/social/

Best Regards.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.