Social Bar help

Support
#1

Hi guys,

Hope you can help.

On my main page ive added some social icons using the social sharing widget.

I would like to make the icons bigger and the text above it to be white and also bigger (same style as my newsletter bar underneath.

Could you advise how i would go about this ?

Thank you :slight_smile:

#2

Hello @niallalice,

Thanks for asking. :slight_smile:

Can you please share website URL?

Thanks.

#3

Hi there its www.theglowto.com

#4

Hello @niallalice,

Thanks for sharing URL. :slight_smile:

  1. Please assign a class name to social share element. For example I have used socialshare-style. https://www.screencast.com/t/NcPirBtX

  2. Next, add following CSS under X > Launch > Options > CSS:

.x-entry-share.socialshare-style p {color: #fff; font-size: 18px;}

.x-entry-share.socialshare-style a {font-size: 30px; color: #fff;}

You can change class name as per requirement.

Thanks.

#5

Thank you for the reply. I have added this under the section : Customer, Custom CSS. Is this right as i couldn’t find the options you mentioned ?

I did try this but nothing changed unfortunately.

#6

Hi there,

The previous suggestion didn’t work because you didn’t add the class to the social share element.

Kindly follow the instructions on the previous reply.

You should be able to find there class option when you edit the page on Cornerstone and click on the social share element.

#7

Completely missed the class part. Thank you that worked brilliantly.

Do you know how i would space the social icons further apart from each other and have the ability to change the font style to another font style ?

Thanks again

#8

Hi there,

You can simply update the CSS provided by @Prasant and make the changes accordingly.

Please refer to this links:

https://www.w3schools.com/css/css_margin.asp

https://www.w3schools.com/cssref/pr_font_font-style.asp

Basically you will have to add a left and right margin to the CSS for the icons and add the font style for the text above it.

Hope this helps

#9

hi jade,

I have tried referring to the above links as instructed, but couldn’t get the code to work.

Could you provide some assistance if possible.

#10

Hi there,

You can improve your existing CSS to this

.x-entry-share.socialshare-style p {color: #fff; font-size: 18px;     font-family: arial; }

.x-entry-share.socialshare-style a {font-size: 30px; color: #fff; margin: 0 0.3em; }

That should change both font family and icon spacing.

Thanks!