[Plugin: Floating Social Media Links] Can floating links be moved horizontally on page?

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.

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!

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.

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

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.

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

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!

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 %.

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

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!

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.

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