WordPress.org

Ready to get started?Download WordPress

Forums

Floating Social Media Links
[resolved] Can floating links be moved horizontally on page? (12 posts)

  1. jono_hooper
    Member
    Posted 1 year ago #

    This is a great plugin for several reasons but I was hoping there would be a way of displaying the floating links at a particular horizontal location (x,y) on the page, as there can be done vertically.
    I tried adding margin-left: 200px; under #fsml_ff in the floating-social-media-links/fsml-base.css page but with no success. I'm fairly new to these plugins but know CSS alright. Is there an oversight on my part?
    I appreciate any help on this.
    Thanks.

    http://wordpress.org/extend/plugins/floating-social-media-links/

  2. Nick Halsey
    Member
    Plugin Author

    Posted 1 year ago #

    You're on the right track. Horizontal positioning will depend on whether it's set to be on the right or left of the page. If it's on the right, you can either use right: [x][un] or margin-right: [x][un]. If it's on the left you should switch the rights for lefts.

    In terms of where to add the code, however, putting it in that file won't work because the values are overwritten in a <style> tag in the frame output. In fact, I would recommend putting the CSS in <style> tags in you theme's footer.php file, right after <?php wp_footer() ?>. This way, you don't need to worry about losing the edits when updating the plugin, and you also overwrite the styles added in the plugin output.

    Just remember that the horizontal positioning is relative to the browser window, and will display quite differently depending on window size.

  3. jono_hooper
    Member
    Posted 1 year ago #

    Hey there,
    Thanks for your reply.
    Ok, so I see what you're saying but I get a bit lost when you said
    "I would recommend putting the CSS in <style> tags in you theme's footer.php file, right after <?php wp_footer() ?>." I'm using margin-left: 100px; just to get it to move position for the moment. I put it into style tags just below <?php wp_footer() ?> in my theme's footer but have had a blank as to how to reference/link it to the floating links file so it knows it's to move it across the page.
    I hope this makes sense.
    I appreciate your help!

  4. Nick Halsey
    Member
    Plugin Author

    Posted 1 year ago #

    Once it's in the footer.php, it should be working, without linking to anything else. I'm guessing you've got something that looks like this:

    <?php wp_footer() ?>
    <style type="text/css">
    fsml_ff { margin-left: 100px; }
    </style>

    If that's (basically) it, could you share a link to your site and I'll see what's happening? Or it may be working without you noticing, but I doubt that.

  5. jono_hooper
    Member
    Posted 1 year ago #

    Ah, great! I copied your code but it didn't work. Then I realised the # beside fsml_ff was missing. Now it works! See http://www.dogandselwyntoo.com/wordpress/ if you wish.
    Thanks again for all your help. I really appreciate it!
    Jono

  6. Nick Halsey
    Member
    Plugin Author

    Posted 1 year ago #

    Great! Yeah I just noticed I missed the #, good catch. Keep in mind that you can also use % instead of px, which might help reduce the chances of the frame overlapping the main page content in smaller windows, while also still keeping it farther to the right than in the default position.

  7. jono_hooper
    Member
    Posted 1 year ago #

    Ah yes, I'll change to % now.
    Thanks.

  8. koenjo
    Member
    Posted 1 year ago #

    hi guys, I'm having the same problem as described above, and I've tried your solution but unfortunately its not working for me :(
    I'm using wordpress 3.5, maybe someone knows what the solution would be for me?

    Thank you!

  9. Nick Halsey
    Member
    Plugin Author

    Posted 1 year ago #

    Hi, if you can provide a link to your site, I'll take a look and see what the issue is. The code above had a small error, as noted, the correct code is:

    <?php wp_footer() ?>
    <style type="text/css">
    #fsml_ff { margin-left: 5%; }
    </style>

    Which is in footer.php and <?php wp_footer() ?> should already be there. The value for the margin can be adjusted, but I strongly recommend using a %.

  10. koenjo
    Member
    Posted 1 year ago #

    hi, thanks for your answer.
    I am deeply ashamed at this moment, I forgot the # and the code works fine indeed :D

    But now I have a new question: is it possible to set the widget a few pixels or % left from the content in place of a few pixels/% from the left site of the screen?
    Because if my site is now open on a smaller screen, 5% margin puts the social media bar on my text in the content area.

    I hope I have clearly stated my question.

    In any case, thank you!

  11. Nick Halsey
    Member
    Plugin Author

    Posted 1 year ago #

    My fault for forgetting the # the first time it was posted!

    It is probably possible to position the frame relative to your content, but doing so well requires some theme customization and general tinkering. Here's what I would try:

    Set the first FSML general option to display "On Customized Pages".
    At the very end of your theme's header.php file, add <?php floating_social_media_links(); ?>. Open the element inspector in chrome (or the counterparts in other browsers) and play with the css until you can get it to position relative to the page wrapper. You'll definitely want to add #fsml_ff{ position: relative; margin-left: -[framewidth]; } and it's hard to say exactly how much more you'll need. You will also probably need to adjust exactly where <?php floating_social_media_links() ?> is in the html.

    Alternately, you could use some javascript/jQuery to change the frame's horizontal position. This route will actually be easier, if you're JS-fluent and can figure out the proper logic (you'll want to find the width of the content, width of the page, width of the frame, set the 'left' property, on both load and resize). No need to make any of the changes above if using the javascript route.

  12. koenjo
    Member
    Posted 1 year ago #

    thank you for your answer. :)
    I gonna try it and will let you know the results!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic