Move sharing icons to top of blog posts

  • Unknown's avatar
    samtavaria · Member ·

    Does anyone know how to move all of the sharing icons (fb, Pinterest, email, woprdpress, g+) to the top of blog posts?

    Thanks!

    The blog I need help with is: (visible only to logged in users)

  • staff-jeanpierreac · Staff ·

    Hi!

    You have 4 widget areas in this theme (pictorico https://wordpress.com/themes/pictorico/) in which you can put your widgets (https://en.support.wordpress.com/widgets/). You should not put widgets outside these areas.
    I hope this helps you.

  • Unknown's avatar
    samtavaria · Member ·

    Thanks Raul but your response doesn’t answer my questions. I asked whether or not I could move the icons to the top of posts. From the customization tools, all I can see is those icons are automatically placed in the footer. I don’t know what 4 areas you’re referring to.

    I also asked, that if it possible move them to the top of my posts, how do I do that?

    Thanks

  • staff-jeanpierreac · Staff ·

    Hi again.

    Sorry for that lack of understanding.

    I think you could have two options to do that. But, in my opinion both are unfeasible or at least not very recommendable.

    First: You can customize this sharing bar in your setting>sharing menu. But there is nothing about position. :(

    Second: You can try to alter the normal item flow in the page with a CSS position statement. It is tricky and not very predictable. In any case, let’s explain you how (You should need to adjust it to your need/layout)…

    Your ‘Share this’ section is inside an area (a div) called #jp-post-flair, where you could find ‘Reblog’ and ‘Like’ buttons… etc. And this is the last ‘son’ of the .entry-content div.

    For instance in http://blog.shaadishop.co/2015/05/16/norcal-vendor-spotlight-rubys-beauty-studio/, that means your .entry-content has your logo, the “Presents NorCal Vendor Spotlight: Ruby’s Beauty Studio Bridal Hair and Makeup” title, pictures, text, and at the end the #jp-post-flair. The natural position of an element follows the order in which it is added to the container. In this case, .entry-content is the container and your logo, text, pictures and sharing bar are the elements inside.

    How to alter this order? You can set an absolute position for #jp-post-flair, to start at the very beginning of .entry-content. That will cause overlapping of the sharing section and your logo/title, so you will also need to push a little bit down the other content in .entry-content.
    Here it is the CSS code:

    article .entry-content #jp-post-flair {
    position:absolute;
    top:0px;
    left:0px;
}

article .entry-content {
    position: relative;
    padding-top: 350px;
}

    Remember this is not predictable. We have pushed 350px down the article content to save enough place for #jp-post-flair but… what if this #jp-post-flair needs more/less space because of a change?

    I hope this helps you.

  • The topic ‘Move sharing icons to top of blog posts’ is closed to new replies.