WordPress.org

Ready to get started?Download WordPress

Forums

Jetpack by WordPress.com
[resolved] How I can move sharing button back to left side. (31 posts)

  1. seriousleast
    Member
    Posted 1 year ago #

    I just update jetpack to 1.6 and when I reload pages again all my sharing button move away from the left side. This just ruin my web design. I try to input some Sharing label but did not help anything. I try to change css but nothing work. Could someone help me. If not, I must delete it and downgrade to 1.5 again.

    YwY

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

  2. Antonio Max
    Member
    Posted 1 year ago #

    On your CSS add:

    .sharing {
    padding: 0 !important;
    margin: 0 !important;
    }

  3. mikeotgaar
    Member
    Posted 1 year ago #

    If Antonio's fix doesn't work, try this

    Line 121 to 124 in jetpack/modules/sharedaddy/sharing.css locate this block of code

    div.sharedaddy .sd-content {
    	width: 82.125%; /* 530px / 640px */
    	float: right;
    	margin: 0;

    Change the width setting to 100%; (you can leave the rest unchanged.)

  4. seriousleast
    Member
    Posted 1 year ago #

    Thank both of you so much.

    I just found about mikeotgaar post above by myself too. But wordpress did not email that to me early. So I confirm change width to 100% solve my problem. Now my website look nice again.

  5. Placeholder
    Member
    Posted 1 year ago #

    Ooh, thanks! That was driving me crazy.

    Also, to get rid of that annoying grey line they added in 1.6.1 (between your content and the sharing buttons), comment it out in jetpack/modules/sharedaddy/sharing.css beginning at line 108:

    div.sharedaddy div.sd-block {
    /* border-top: 1px solid #ddd;
    border-top: 1px solid rgba(0,0,0,.13); */
    padding: 10px 0 5px;
    margin: 0;
    width: 100% !important;
    }

  6. Brandon Moeller
    Member
    Posted 1 year ago #

    This helped me a lot. Thanks everyone!

  7. joachimschlosser
    Member
    Posted 1 year ago #

    Thanks for the tips. It still did not float right again, so I added this to the same css file:

    div.sharedaddy {
    	float: right;
    }
  8. jnordstrom
    Member
    Posted 1 year ago #

    Hi All,

    I would like to remove the space for the “Share” text and center align the share buttons.

    I would be really appreciated if someone could give me a hand with the CSS.

    Here is a link the shows the layout issue: http://www.humanoidplatform.com

    James

  9. seriousleast
    Member
    Posted 1 year ago #

    @jnordstrom

    Does this close to the layout you want ?
    http://ruzzme.files.wordpress.com/2012/09/147.jpg

    If you want the layout like in the picture.

    1. Use css editor adjust width first. Default is 82.125%. You can change it more than 100% but I think it harder for align.

    2. I think you should remove print button, may be Email button too. I don't think someone will print. Goole Plus button should be in same line now.

    3. Now adjust the margin for move button set to center. I adjust the second one (Right margin), from 0px to 20px.

    4. Play and Test :D

    CSS File that you need is sharing.css, should be line 121.
    Hope this can help, Sorry for my english :D

  10. jnordstrom
    Member
    Posted 1 year ago #

    Perfect thank you so much for your help.

  11. Chris Brennan
    Member
    Posted 1 year ago #

    Is there a way to make these CSS edits in my main CSS file rather than in the sharedaddy/sharing.css file? I'm concerned that I would have to re-implement them every time I update the plugin if I commit them directly to the sharing.css file.

    I basically just want to add some space between the end of the article and the sharing buttons. Should I use margins for that?

  12. seriousleast
    Member
    Posted 1 year ago #

    1. I think take a note what we need to do every time when we update will be easier. I have a same problem but not too bad if we know what to do.

    2. Yes, you can use top margin. try with "div.sharedaddy div.sd-block" it work with me.

  13. charles_i
    Member
    Posted 1 year ago #

    I've tried the above code snippets and none of them work. Neither the alignment nor the line (which doesn't bother me). Any idea how I can move the icons to the left and put more space between them? http://blog.stratamp.com/

    I have tried every possible combination of classes or id's in the source code of the page. The only one that does anything is the individual anchor class name - which is numbered, so it can't be used because it only affects one set of icons on the page.

  14. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    @charles_i Try adding the following code to your custom CSS:

    div.sharedaddy .sd-content {
        float: left !important;
    }
    
    div.sharedaddy .sd-content ul li {
        margin: 0 25px 5px 0 !important;
    }
  15. charles_i
    Member
    Posted 1 year ago #

    Brilliant! Thanks. I thought I tried every combination I could but I didn't have that second one with the ul li written like that.

    Charles

  16. fizx
    Member
    Posted 1 year ago #

    Any idea how to put the social icons on top of the post as well as on the bottom of content ?

    Thank you

  17. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    @fizx You can add extra sharing buttons by adding the following code inside the loop, in your theme:

    <?php echo sharing_display(); ?>

    You can read more about it here:
    http://wordpress.org/support/topic/share-buttons-position-above-other-plugins?replies=5

    If you experience issues with that code, could you please start a new thread, since your question is different from the previous ones?

  18. fizx
    Member
    Posted 1 year ago #

    Thank you for quick reply and i made a thread please look here..

    http://wordpress.org/support/topic/jetpack-social-icons-on-top-of-the-post?replies=1#post-3735630

    Thank you

  19. PedrGon
    Member
    Posted 1 year ago #

    Hi

    I'm trying to align the sharing block to the left, but none of the solutions indicated above seem to work. The buttons move a little bit to the left, but I still have lots of space between the Share This title and the first button.

    Also the buttons that were already clicked, and therefore show a counter, have more space to the right than the ones without a counter. I would also like to change that.

    Could you please advise?

    Thanks very much

  20. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    @PedrGon Could you post your site URL, so I can have a look?

  21. aalabbas
    Member
    Posted 1 year ago #

    Hi,

    I have the same problem. My website is in Arabic and the sharing buttons appear in the mid left section (plz see the site http://www.ahmedalabbas.com/2013/02/23/%D8%AF%D8%B9%D8%A7%D8%A1/#respond).

    How can I make them to the right?

    Thanks,

  22. seriousleast
    Member
    Posted 1 year ago #

    @aalabbas

    Add "float: right;" into "div.sharedaddy .sd-content ul" in "sharing.css line 128".

    div.sharedaddy .sd-content ul {
    	margin: 0;
    --->    float:right
    }

    You should get something like this.

  23. aalabbas
    Member
    Posted 1 year ago #

    @seriousleast

    Thanks, I did that but it is still not working. I think this is because the sharing.css is inactive. The below message appears

    "Editing jetpack/modules/sharedaddy/sharing.css (inactive)"

    Do you know how to activate it?

    Thanks,

  24. seriousleast
    Member
    Posted 1 year ago #

    @aalabbas

    I don't sure about why it inactive.
    But I just open your web and buttons already align right side.

  25. aalabbas
    Member
    Posted 1 year ago #

    @seriousleast

    You are right, it wasn't working on google chrome but it's working now n explorer! Thanks a lot

  26. Wil
    Member
    Posted 1 year ago #

    I added

    remove_filter( 'the_content', 'sharing_display', 19 );
    remove_filter( 'the_excerpt', 'sharing_display', 19 );

    to my functions.php but the sharedaddy buttons are still being shown.

    Debug code shows that the remove_filter functions are returning false.

    Any ideas why?

  27. Wil
    Member
    Posted 1 year ago #

    I'm using genesis, and echoing the share buttons manually doesn't seem to work.

    It's almost as if the jetpack stuff isn't being loaded at that point.

    The following should, but doesn't work

    function lc_add_jetpack_share_buttons(){
    	if ( function_exists( 'sharing_display' ) ) {
        	echo sharing_display();
    	}
    }
    add_action( 'genesis_before_post_content', 'lc_add_jetpack_share_buttons' );
  28. seriousleast
    Member
    Posted 1 year ago #

    I think you should create your new thread. You question nothing like my first question.

  29. Wil
    Member
    Posted 1 year ago #

    yeah - sorry about that @seriousleast.

    You can ignore the issues as I solved it anyway.

  30. greigner
    Member
    Posted 1 year ago #

    Thanks mikeotgaar! That worked very well for me.

    Appreciate the time you took to post.

    -grant

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic