WordPress.org

Ready to get started?Download WordPress

Forums

Jetpack by WordPress.com
[resolved] Move Sharing Label and Dropdown Menu Button to the Right (9 posts)

  1. AndreaK22
    Member
    Posted 1 year ago #

    Hi,

    The sharing label and the little dropdown menu button are on the bottom left side of the project/post. Does anyone know how to move it to the bottom right side? Would it be in the jetpack.css, and if so what code am I looking for to change?

    Many thanks for any suggestions you may have!

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

  2. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    You can customize the look of the sharing buttons with CSS, by targeting the sharedaddy container and its child elements, like so:

    div.sharedaddy .sd-content {
    /* Your custom CSS rules */
    }

    You can add your custom CSS rules to your theme's stylesheet, or to your custom CSS editor under Appearance > Edit CSS in your dashboard.

  3. AndreaK22
    Member
    Posted 1 year ago #

    Hi Jeremy,

    I found this code in the jetpack.css file:

    '#sharedaddy.jetpack-module div.module-image {
    background-position: -710px 5px;
    }'
    So I figured the values were the ones I need to change. I took the code you suggested and entered it in Appearance > Theme Options > General > Custom CSS like this:

    'div.sharedaddy .sd-content {background-position: -210px 5 px;
    }'

    I tried a few different number values, but no visible change. What am I doing wrong? Sorry, I am a kind of a coding newbie...

    Appreciate your help!

    Regards,
    Andrea

  4. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    The .sd-content container doesn't have any background, so you won't see any changes when applying a background rule to that container.

    You could align the buttons to the right and the Share text by adding this rule:

    div.sharedaddy .sd-content ul li {
        float: right;
    }
    div.sharedaddy h3.sd-title {
        text-align: right;
    }

    You might need to adjust the margin and padding to fit your needs, but that should help.

  5. AndreaK22
    Member
    Posted 1 year ago #

    Hi,

    Half way there. The drop-down button moved to the right and is where we want it. Thanks for that!

    BUT: Even though the "Share" text did get right-aligned within its little rectangular container (which I see when I inspect the element with Firebug), the whole text container is still stuck to the left side of the page. I tried applying some margin and padding values, but nothing's moving. I cannot find how to push it to the right closer to the drop-down button. They are now practically on opposite sides of the page. Or, maybe if I knew how to increase the width of the space in which the "Share" text is right-aligned, that could do it...?

    Thanks again,
    Andrea

  6. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    Could you post your site URL here? It might be easier to help if I could test things on your site.

  7. AndreaK22
    Member
    Posted 1 year ago #

    Hi Jeremy,

    Our site is under construction, but I could email you some screenshots, if you could tell me where to send them.

    Thank you,
    Andrea

  8. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    @AndreaK22 I'm afraid screenshots may not be of much help; I would need to make some tests on your site to be able to help.

    If you need more help with customizing the design of your site, you can post in the WordPress job board:
    http://jobs.wordpress.net/

  9. AndreaK22
    Member
    Posted 1 year ago #

    Hi Jeremy,

    I tried the following code and now everything is moved to the right side, where we need it:

    'body #content div.sharedaddy h3 {
    text-align: right;
    width: 95%;
    }

    body div.sharedaddy .sd-content {
    width: 4%;
    }'

    HOWEVER, the design of the footer got a bit messed up (it used to be a section "physically" separated from the main body and you could see the background image showing through). I think this little headache is more for the theme developers than for you, so I contacted them for help. Unless you think otherwise...?

    Many thanks for your quick help before!

    Have a nice weekend,
    Andrea

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic