How to move sharing buttons to top in Oxygen

  • Author
    Posts
  • #2686034

    jejorge2009
    Member

    Dear all:

    I’d like to move all sharing buttons (social media, print, email, etc) to the top of posts AND pages.

    How do I do that customizing CSS?

    Thanks in advance !!

    The blog I need help with is cambiocultural.org.

    #2686164

    Hi there, I’m not seeing any sharing buttons on your posts. The following I worked up off of our Oxygen demo site.

    div.sharedaddy .sd-sharing {
        position: absolute;
        top: 0;
    }
    .single .hentry {
        padding-top: 100px;
    }

    Let me know if this does what you are wanting.

    #2686165

    jejorge2009
    Member

    Dear @thesacredpath:

    Thanks !!

    My sharing buttons are there, just above the tertiary menu / footer.

    For sure, given the length of most pages, they are really hard to be found. That’s why I need to move them to the top !!

    I’m going to try your recommendation and I will tell you how it worked.

    #2686166

    Ah yes, I see them now. You may have to increase the top padding in the second rule to make room for them at the top since you have quite a few. The demo site had only a few on it.

    #2686167

    jejorge2009
    Member

    Dear @thesacredpath:

    It is a pity, but now the buttons overlap with titles.

    See:

    https://cambiocultural.org/trial/

    Any ideas?

    #2686168

    Sorry, I targeted only blog posts. Let’s change it to this instead. I’ve adjusted the padding so that there is no overlap now.

    div.sharedaddy .sd-sharing {
        position: absolute;
        top: 0;
    }
    .hentry {
        padding-top: 150px;
    }

    #2686169

    jejorge2009
    Member

    Dear @thesacredpath:

    I see your second post just now.

    Do you think that by shortening the list of buttons the problem would be solved?

    #2686170

    jejorge2009
    Member

    Dear @thesacredpath:

    Excellent !! Problem solved…

    Thank you very much for your help !!

    #2686172

    jejorge2009
    Member

    Ah !! I shortened the list and now there is too much space in relation to the title. Perhaps it is needed less than 150 px?

    #2686176

    Yes, if you shortened the list, just reduce the 150px value as needed.

    #2686197

    jejorge2009
    Member

    Dear @thesacredpath

    I note that the “like” (“me gusta”) button did not move to the top. It stays at the bottom. Why does it happen?

    #2686198

    Hi, we can move those also. I moved only the sharing buttons to the top since I thought that was all you wanted to move. There is something to consider though. As people click the “like” button, their gravatars will be added in a grid by the like button. If you get a lot of likes on a post, it will push those gravatars down and over the top of the title/date line, and possible down over the top of the content. Since you had mentioned moving the sharing buttons, I didn’t voice that concern. Here would be the code to move it all to the top. Replace what I had give with this.

    #jp-post-flair {
        position: absolute;
        top: 0;
    }
    .hentry {
        padding-top: 175px;
    }

    #2686199

    jejorge2009
    Member

    Dear @thesacredpath

    You have give me a very helpful advice, I’m going to think this now.

    Many many thanks !!

    #2686202

    You are welcome, and if you have additional questions, please let us know.

The topic ‘How to move sharing buttons to top in Oxygen’ is closed to new replies.