WordPress.org

Ready to get started?Download WordPress

Forums

Floating Social Bar
Need help customising FSB (5 posts)

  1. sgonzaga
    Member
    Posted 10 months 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

    http://wordpress.org/plugins/floating-social-bar/

  2. Syed Balkhi
    Member
    Plugin Author

    Posted 10 months 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.

    -Syed

  3. sgonzaga
    Member
    Posted 10 months 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
    Member
    Plugin Author

    Posted 10 months 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
    Member
    Posted 8 months 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.

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.