How can the floating social box be styled?

Hello,

How can the floating social box be styled? Out of the box it looks really dated, I'd like to style it up more and ideally use my own graphics for the links.

Also, the link images and counters are all different widths, some are cut off at the edge of the box and some break out of the box.

I'd also like to add a regular share button for facebook rather than (or as well as) a like button?

Please can someone advise as it can't be used like this, looks really unprofessional.

Thanks!

  • Tyler Postle
    • CGO

    Hey Jon,

    Hope you're doing well today!

    There are some dimension options you can try out in the settings; however, it looks like we just need to increase the width, which we can do like this:

    #content > div#wdsb-share-box {
    width: 100px;
    }

    Adjust width as needed. You can place this into the custom CSS box inside the floating social settings :slight_smile:

    if you still need further style changes could you grant support access? or link to a page where the bar is displayed so I can see the current styling on your site.

    You can grant support access via admin dashboard - WPMU DEV > Support > Support Access > Grant Access.

    As for new images, I will mark that as a feature request, I agree it would be awesome to be able to add in your own icons.

    In the meantime, let us know if you have any further questions!

    All the best,
    Tyler

  • Jon
    • Site Builder, Child of Zeus

    Hi Tyler,

    thanks for this. Makes sense. though I just quickly tried it and didn't do anything (I tried with different selectors too).

    I've actually removed them now as I noticed on some of my pages it was causing my responsive grid to mess up. If you see the screen shots, on my home page the 2 col responsive grid works well, on my internal category pages it seems to ignore the nth rule to stop the left col having left margin, but only on the first item?

    .excerptpost:nth-child(odd),
    #blog-archives .excerptpost:nth-child(odd),
    #dr_listing_list .dr_listing:nth-child(odd)  { margin-left: 0;clear:both }

    Any ideas? Thanks!

  • Tyler Postle
    • CGO

    My apologies here fro the delay Jon!

    Thanks for the further information you've provided. Do you mind sending your WP login into me through our private contact form? That will assign it directly to me then I can help get this sorted for you asap.

    You can send that through our private contact form: https://premium.wpmudev.org/contact/

    Send in:

    Subject: "Attn: Tyler Postle"
    -WordPress admin username
    -WordPress admin password
    -login url
    -link back to this thread for reference
    -any other relevant urls

    Select "I have a different question" for your topic - this and the subject line ensure that it gets assigned to me :slight_smile:

    https://premium.wpmudev.org/contact/

    Alternatively, you can grant support access again. I'll keep an eye out for your response :slight_smile:

    Look forward to hearing back!

    All the best,
    Tyler

  • Tyler Postle
    • CGO

    Hey Jon,

    Thanks for the access, that works :slight_smile:

    I've just added this CSS to your floating social CSS field:

    #wdsb-share-box.wdsb-has_message {
      background-color: transparent;
      width: 110px;
    }
    
    #wdsb-service-facebook, #wdsb-service-twitter {
      width: 55px !important;
    }

    I checked your listing pages and they all seemed fine, I didn't see any that were distorted at all.

    If there are any let us know and we'll take another look. Hope you don't mind that I left the floating social bar active :slight_smile:

    All the best,
    Tyler

  • Jon
    • Site Builder, Child of Zeus

    Hi Tyler,

    thanks I've now got a facebook share button working using the advice off that thread. Trouble is though, it's just a share button to a single url I set in the FB developer area when what I need (and should be part of the plugin surely!) is to have whatever page the share button is clicked on is the page that is shared.

    Any ideas?

    Also, how can I force the inline version to be fixed to the bottom of the browser window? I've tried adding the following code:

    #wdsb-share-box.wdqs-inline
    {
      position: absolute;
      width: 100%;
      display: block;
      bottom:0;
      min-height: 65px;
    }

    but it does nothing.

    I really want it like this great plugin handles it (resize that demo page):

    https://simplesharebuttons.com/

    Thanks!

  • Tyler Postle
    • CGO

    Hey Jon,

    Apologies for the delay. It looks like you have started using another plugin here?

    Unfortunately, it would take some custom development to include a share link as you have now. It's definitely on the to-do list. I'm glad you found a solution that suits your needs in the meantime :slight_smile:

    If you do still need any further assistance here just let us know.

    All the best,
    Tyler

  • Jon
    • Site Builder, Child of Zeus

    Hi Tyler,
    yes had to go with the one Ive used before. I'd take a serious look at that plugin when thinking about improvements for the WPMUDEV one as it is much nicer. The floating socials plugin just doesn't have the features (facebook share should surely have been the very first one to be included!) and does look very dated on the front end.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.