How to move sharing buttons to top in Oxygen

jejorge2009 · Member · Jul 11, 2016 at 9:23 pm
Copy link

Add topic to favorites
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: (visible only to logged in users)
thesacredpath · Member · Jul 11, 2016 at 10:16 pm
Copy link
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.
jejorge2009 · Member · Jul 11, 2016 at 10:30 pm
Copy link
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.
thesacredpath · Member · Jul 11, 2016 at 10:43 pm
Copy link
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.
jejorge2009 · Member · Jul 11, 2016 at 10:46 pm
Copy link
Dear @thesacredpath:

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

See:

https://cambiocultural.org/trial/

Any ideas?
thesacredpath · Member · Jul 11, 2016 at 10:51 pm
Copy link
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;
}
```
jejorge2009 · Member · Jul 11, 2016 at 10:54 pm
Copy link
Dear @thesacredpath:

I see your second post just now.

Do you think that by shortening the list of buttons the problem would be solved?
jejorge2009 · Member · Jul 11, 2016 at 10:58 pm
Copy link
Dear @thesacredpath:

Excellent !! Problem solved…

Thank you very much for your help !!
jejorge2009 · Member · Jul 11, 2016 at 11:05 pm
Copy link
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?
thesacredpath · Member · Jul 12, 2016 at 2:27 am
Copy link
Yes, if you shortened the list, just reduce the 150px value as needed.
jejorge2009 · Member · Jul 12, 2016 at 10:09 pm
Copy link
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?
thesacredpath · Member · Jul 13, 2016 at 2:58 am
Copy link
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;
}
```
jejorge2009 · Member · Jul 13, 2016 at 7:16 pm
Copy link
Dear @thesacredpath

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

Many many thanks !!
thesacredpath · Member · Jul 14, 2016 at 8:36 pm
Copy link
You are welcome, and if you have additional questions, please let us know.

No items found.