Social share how to stylize it

[123JH]

HI there,

I am trying to change my social icons to match the rest of the site…This means:

1. the border radius is zero so its a perfect square, with the border color #09275a and the background is white and the social icons are #09275a

and on hover it is

2. the border radius and background is #09275a and the icons are white

See example:

I have tried this code but only achieved half of what I want:
.x-entry-share .x-share {
border-radius: 0;
border: solid 1px #09275a;
}

[mldarshana]

Hi Carolina,

Thanks for writing in! Upon checking your site, I see that you have already achieved those changes.

If you need further assistance, you can reply to this thread or if you have new question, you can open another thread.

Thanks!

[123JH]

Thats what I want…but i have not achieved it because I want it on the classic social share element.

[ruenel]

Hello Carolina,

Do you want something like this?

If that is the case, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-entry-share .x-share {
  background-color: white;
  color: #09275a;
  border-radius: 0;
  border: solid 1px #09275a;
  transition: all 0.5s ease;
}

.x-entry-share .x-share:hover {
  background-color: #09275a;
  color: white;
}

.x-entry-share .tooltip .tooltip-inner{
    background-color: #09275a;
}



.x-entry-share .tooltip.bottom .tooltip-arrow{
    border-bottom-color:#09275a;
}

We would loved to know if this has work for you. Thank you.

[123JH]

Wow!! worked perfectly, will def be saving this for other x theme sites ill be building…such a great theme

[ruenel]

Thanks for letting us know that it has worked for you.

Cheers.