The Support Forums will be in read-only mode for a scheduled maintenance window on 01 September 2016 14:00 UTC - 20:00 UTC. More information.

Floating Social Bar
Need help customising FSB (5 posts)

  1. sgonzaga
    Posted 2 years ago #

    Hi WPBeginner,

    First off, thanks for releasing a great social plugin. I've managed to install it onto my demo site, a sample post here: http://thefreelancepinoy.com/new/uncategorized/image-post/

    I need help though. I'd really like FSB to look like how it does on this post: http://cl.ly/image/1y113u270T2c

    Basically I'd like to match the font of the social share bar label to that of my main content ("Source Sans Pro") and would like to insert dividers/bars in between social buttons.

    For the former, I tried adding this to custom.css of my theme, but itdoesn't work: #fsb-social-bar .fsb-title {font-family: 'Source Sans Pro', Arial, sans-serif;}

    Hope you could assist me, as I've almost no CSS skills to make this happen. Thank you!

    - Stephanie


  2. Syed Balkhi
    Plugin Author

    Posted 2 years ago #

    Hi Stephanie,

    Change your CSS To look like this:

    #fsb-social-bar .fsb-title {font-family: 'Source Sans Pro', Arial, sans-serif !important;}

    Basically any CSS style you want to override, make sure to add an important tag to it. For the borders like SteadyStrength, you would need to target each div individually and add a border-right to it.

    Unfortunatey, we do not provide styling support for the plugin, but it is definitely possible with CSS.


  3. sgonzaga
    Posted 2 years ago #

    Thanks Syed for the tips! I tried adding the code you provided and it worked. Much appreciated.

    To add a border-right to the buttons, which css file/plugin file should I edit? I tried looking through the files via FTP but could only find the admin css file. My theme supports custom css, so should I apply the edits there?

    Hope you could help this one last time. Thanks!

  4. Syed Balkhi
    Plugin Author

    Posted 2 years ago #

    You would simply override the CSS like you did above in your custom.css file. You just need to target each individual div for the respective sharing item (i.e twitter, facebook, etc)

  5. brettfox27
    Posted 2 years ago #

    Could you just provide the code that is used on your site http://www.wpbeginner.com/floating-social-bar/#respond

    It looks great and was what I was expecting and not what I got. Its not bad, but I just don't have css skills or money to pay someone.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Floating Social Bar
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic


No tags yet.