Cant move facebook plugin with changing margin numbers using CSS?

  • ianizaguirre

    #7444

    I am trying to move my Facebook Comments Plugin. I can move it on firebug but I guess I cant find the right Id?

    I am using this:

    #fbSEOComments{
    margin-top: 110px;
    margin-bottom: 0px;
    }

    It does not work. I have tried different things but it just wont move to margin top 110px.

    Any suggestions?

    Thank You

    ianizaguirre

    #38206

    I have this on firebug which is where I thought Id do what I did above which is not working :

    <fb:comments class="fb_iframe_widget" colorscheme="light" width="500px" num_posts="10" href="http://iamdentistry.com/inspiring-media/" fb-xfbml-state="rendered" style="margin-top: 110px;">

    I don’t know what to do

    Mod

    Kenneth John Odle

    #38207

    Can you link to a page where this plugin shows?

    How are you trying to move it? Up, down, right, left?

    ianizaguirre

    #38208

    Thanks for helping me.

    The plugin shows any page comments show, so for here for example: plugin at the bottom

    I am trying to move the plugin down and it works in firebug as margin top 110px perfectly.

    In Firebug when I move it down and it looks perfect this is the code that is edited:

    <fb:comments class="fb_iframe_widget" colorscheme="light" width="500px" num_posts="10" href="http://iamdentistry.com/inspiring-media/" fb-xfbml-state="rendered" style="margin-top: 110px;">

    I just cant figure it out because using #fbSEOComments as my Div Id does not work when it is supposed to.

    ( I am moving the plugin 110px down and the comments textbox up so the words can be above. Moving the comments textbox works fine but the face book plugin just wont move)

    Mod

    Kenneth John Odle

    #38209

    The colon (:) indicates a pseudo-class.

    I think you are one level too deep. Try this:

    div#fbSEOComments {margin-top: 110px !important;}

    ianizaguirre

    #38210

    please read post below ( you can delete this comment)

    ianizaguirre

    #38211

    ok what you gave worked but it acts differently then me doing it in firebug. With the code you gave me the plugin goes behind the comment section making me have to add more code which is fine. In firebug to fix this I have these:

    which I made margin top 140 px to move the comment form down so the plugin shows:

    <li id="comment-3" class="comment even thread-even depth-1 clearfix" style="margin-top: 140px;">

    and

    I made margin top -15px for the #of comments:

    <h4 class="comments gutter-left current" style="margin-top: -15px;">2 comments</h4>

    I am new to this and only have become familiar with doing the code for DIV ids (so far) but these don’t seem to have it in fire bug. How do I make the code for these two things? Thanks for helping me you have helped me so much and I really appreciate it

    ianizaguirre

    #38212

    I figured it out 🙂 But now there is a new problem , after I added:

    /* puts comment replys below face book comment plugin*/
    #comments_list {
    margin-top: 180px;
    }
    /* puts number of comments words form below face book comment plugin*/
    #comments {
    margin-top: -30px;
    }

    I noticed that it works perfectly on pages and blog posts that already have at least one comment BUT it is messed up with pages and blog posts that have no comments (the leave a reply box half covers the plugin) So I added this :

    /* moves comment form below face book comment plugin*/
    #commentform {
    margin-top: 150px;
    }

    This Looks perfect now with blog posts and pages that have no comments BUT it looks like it is way to far down on pages and blog posts that due have comments.

    Is there something I can add so that this :

    /* moves comment form below face book comment plugin*/
    #commentform {
    margin-top: 150px;
    }

    ONLY activates on pages and blog posts that have no comments?

    ianizaguirre

    #38213

    I can fix this by me putting one comment on every article but before I resort to that can a conditional statement be made? like if no comments then:

    /* moves comment form below face book comment plugin*/
    #commentform {
    margin-top: 150px;
    }

    if comments then don’t do it?

    Admin

    Syahir Hakim

    #38214

    If you have a child theme, you can add a function into the functions.php file so that it adds a nocomments class to the <body> element of posts/pages that don’t have comments yet. Then you can use that class to write CSS codes that will only be applied to posts/pages that have that class.

Viewing 10 posts - 1 through 10 (of 17 total)

You must be logged in to reply to this topic.