[Plugin: Topsy Retweet Button] CSS Help? Float Topsy button top and right, above post images?

  • gaplauche

    (@gaplauche)


    14 years ago

    I’m wondering if someone can tell me what css code I need to use to place the Topsy button where I want it to be in WordPress. Currently I have the button set to float right. The problem I’m having is that when an image is inserted into a post at the top and also set to float or align right, the image and the Topsy button display side by side (see this post for example). I want the Topsy button to display on top, above the image. How do I do that?

    http://wordpress.org/extend/plugins/topsy/

Viewing 5 replies - 1 through 5 (of 5 total)
  • topsylabs

    (@topsylabs)

    14 years ago

    You say, “See this post for example”. Can you provide a link to it? The example would be helpful.

    Just at a blind guess, though, can you set the image to “float: right; clear: right”? That might do what you want.

    Kai @ Topsy

    Thread Starter gaplauche

    (@gaplauche)

    14 years ago

    Sorry, I thought I had included the link. Here it is: http://www.libertarianstandard.com/2010/04/07/net-neutrality-developments/

    Thanks for the suggestion. I tried it but it didn’t work. It would also be tough to get everyone on this group blog to remember to add that css to every image they insert on the top right of their posts. Styling the Topsy button from the admin panel once would be the ideal solution.

    topsylabs

    (@topsylabs)

    14 years ago

    Sorry, I may not have been clear enough. I mean that the “clear: right;” styling should be applied to the image (in this instance, the darkowl_blue_earth PNG), not the Topsy button.

    I’ve done some experiments with Firebug (a Firefox extension that lets a user tweak a page’s CSS and HTML on the fly and see the results immediately in their browser screen), and it looks like simply adding “clear: right;” to the .right and .alignright images should fix the problem.

    A line like this in your custom.css should do it:

    img.alignright, img.right { clear: right; }

    …although you’ll probably also want to add some top margin. (Or maybe just give all .topsy_widget_data divs a bit more bottom margin…)

    kai @ topsy

    Thread Starter gaplauche

    (@gaplauche)

    13 years, 11 months ago

    That did the trick. Thanks!

    I added “margin-top: 1em;” to the image css you provided and “margin-bottom: 1em;” into the css fields in Topsy Settings.

    topsylabs

    (@topsylabs)

    13 years, 11 months ago

    Wonderful! Glad to hear it’s working for you.

    kai @ topsy

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘[Plugin: Topsy Retweet Button] CSS Help? Float Topsy button top and right, above post images?’ is closed to new replies.

Tags