How to change the font and size of Share button text

Posted in: Newspaper
Post count: 436

Have a look at this image from my website tomatoheart.com

Please tell me how can I change the font and size of the text under share button. It’s too small. Is there any way to increase the size of these share buttons.

Thank you in advance 🙂

Post count: 22421

Hello,

The theme has no settings to increase the size of these buttons or the font but it can be done through css.
Try this code:
.td-post-sharing a{
font-size:14px;
}

(the buttons get bigger with a bigger font)
Thank you!

Post count: 436

It worked after adding !important at the end of the code. like this:

.td-post-sharing a{
font-size:14px !important;
}

But it didn’t change the share button at the end of the post. How can I do that too? Thank you.

Post count: 22421

Hi,

It does affect the bottom sharing as well but the effect is not that visible as the padding is different for the bottom sharing. If you want to increase the size of the bottom sharing buttons, you can use this code:
.td-post-sharing-bottom .td-social-sharing-buttons{
height: 40px;
}
.td-post-sharing-bottom .td-social-facebook, .td-post-sharing-bottom .td-social-twitter{
padding: 10px 13px 8px 13px;
}
.td-post-sharing-bottom .td-social-google, .td-post-sharing-bottom .td-social-pinterest{
padding: 10px 10px 8px 9px;
}

If you change the font size you will need to adjust these values for it to position properly though.

Thank you!

Post count: 436

Doesn’t appear to working. Nothing happened. I even tried adding ! important; at the end. still no luck 🙁

Post count: 6535

Hi

The code provided by Bogdan works fine, please check this screen: http://screencast.com/t/Bl88VlTkd If you want a different result just change the values from css.

Thanks!

Post count: 436

Hi Andrel,

I am really sorry but the share button’s image that you share is the default image, that I am actually getting without even using the last code written by Bogdan. Have a look ( link : https://tomatoheart.com/megha-bhandari/sunny-leone-entrepreneur/ )

Though I have used the first code that was shared by Bogdan to increase the font size and that is working perfectly well. I only wanted to get the similar share button at the end of the post too.

Please excuse me if I am doing/understanding something wrong.

Post count: 23312

Hello nano2408,

Try the code that Bogdan provided you and add the !important tag after the value. I have tested this code on my side and works fine.

Thanks.

Post count: 436

Hi Catalin,
I have tried adding !important; previously but it didn’t work 🙁 By the way, I use child theme style.css for modifications and have previously used few codes there and those codes are working well.

Should I try adding these codes under custom CSS section of theme panel?

What result should I expect if it works fine? I mean , Will I get the similar share button at the bottom too as it is at the begining?

Anyways, if you are sure of the codes. I must be doing something wrong. 🙁

Thank you.

Post count: 23312

Hello nano2408,

I have checked again the code and still working. Please check your custom CSS area and please ensure that you have not syntax errors. The proof that our code is working fine you should see here -> http://screencast.com/t/ea6IMRb8t7

Thanks.

Post count: 436

Oh! Now I understood, I was actually looking for the word “SHARE ON FACEBOOK ” , “TWEET ON TWITTER” at the end of the post, but these codes only changes on the size and padding that’s why I couldn’t notice the difference much.

I am really sorry for causing so much troubles again and again for silly things but sometimes you just wasnt to do things right.

Is there any way to change the text inside because by adding the texts, I think it will automatically become bigger. I only want to increase size ( add the texts ) for Facebook and if possible Twitter too… and we do have space on the right. ( Have a look : https://i.imgur.com/sDnELit.jpg )

In simple words:

1. I want to increase the width of Facebook share button on the top below post title. My thoughts are inspired from ViralNova or boredpanda share button which uses full length big facebook share buttons. So, I want to make “FACEBOOK SHARE BUTTON” more prominent. We can leave others buttons as it is ( but only the heights of all buttons should be similar). I know these are only some plays of CSS codes but since I don’t know CSS, you may help please. ( Have a look: https://i.imgur.com/r9yawep.jpg )

2. And then I want the share buttons to look same at the end of the post as it as the beginning.

PS: Don’t we have “Social share/like counting option” by default as with previous themes as well as with Addthis code, It used to show total number of shares or cumulative number of shares.

Post count: 23312

Hello nano,

Please keep in mind that all of these buttons has been designed to be used in post content and all of these dimensions were special defined to fit as expected the layout and if you want to change the structure of them you will break all the site. Also, please notice that is not enough to simply change some values with CSS and please notice that task is not a simple one and it needed more custom work until to achieve good results. As my college mentioned in another topic, we cannot provide custom modification at the moment, sorry! Also, if you are unhappy with our sharing button, please notice that you can disable them from the panel and you can try using a plugin with has another design for sharing buttons which use it. We cannot provide any recommendation in this regard because we have not tested any plugins in this case.

Thanks for your understanding!

Post count: 436

Oh! But why do you appear so angry 🙁 I was only asking for the possible help. If it’s not possible, it’s totally fine.

Anyways. Thank you.

PS: Bring your smile back. I still need a lot of help 🙂

Viewing 13 posts - 1 through 13 (of 13 total)
The forum ‘Newspaper’ is closed to new topics and replies.