How place sharing buttons on the top of the post?

  • bookingmom · Member ·

    HI there!
    Is it possible to move sharing buttons for Facebook, Twitter, etc.. to the top of the page through the use of CSS?
    The blog I need help with is bookingmom.com.
    I’d like to have sharing buttons right on the top of each post.
    Thanks a lot!
    Katherine

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

  • designsimply · Member ·

    You can move elements on a web page with CSS using what is called absolute positioning. To get a good feel for what that means, I would recommend checking out this page which has a really good explanation of it: http://css-tricks.com/absolute-positioning-inside-relative-positioning/

    Here is a link to the latest post on your blog for reference:
    http://bookingmom.com/2014/06/25/otdykh-s-detmi-sicilia-club-med-camarina/

    To move the social media buttons from the bottom of posts to the top right of posts in the Bromley theme, add the following CSS to your Appearance > Customize > CSS editor:

    .main .entry {
	position: relative;
}

.main .sharedaddy div.sharedaddy .sd-block {
	position: absolute;
	padding: 0;
	top: -12px;
	right: 0px;
}

.main .sharedaddy div.sharedaddy .sd-title {
	display: none;
}

@media screen and (max-width: 860px) {
	.main .entry {
		padding-top: 50px;
	}
	.main .sharedaddy div.sharedaddy .sd-block {
		right: auto;
	}
}

    I used “right: 0px” to move them to the right because I thought the buttons looked nice to the right of the ratings. If you’d rather have them on the left, remove the “right: 0px” line and add some top padding to the “.main .entry” section.

    I added the @media section at the bottom because the ratings were overlapping with the buttons on mobile screens. You always have to be mindful of mobile when you are editing CSS. See http://en.support.wordpress.com/custom-design/custom-css-media-queries/ for more details.

  • bookingmom · Member ·

    Many thanks for your help!!! It’s exactly what I wanted to get!!! Great!!!

  • designsimply · Member ·

    Awesome! Your blog looks great! I like what you’ve done with Bromley.

  • bookingmom · Member ·

    Thank you! :))) We’ll add an English version soon, so finally it will be also understandable for non-Russian speakers :))) It’s a blog for Travelers with Kids.

    One more question on sharing buttons – is it possible to either DUPLICATE sharing buttons, so they would be placed both on the top and on the bottom of the post OR create them like on the additional invisible layer and freeze their position on the screen, so when you scroll the post down, the buttons stay on the same position and you can push it any moment of reading…?

  • thesacredpath · Member ·

    Hi there, there is no way to duplicate the sharing buttons above and below the post. To “fix” the sharing buttons is something that is difficult to do since “fixed” positioning would place the icons in relationship to the browser window viewport instead of the .entry (content) area. Even if you could, the icons would then float above the content and interfere with reading.

    You might try the following though. Modify the existing rule you have to look like this 

    .main .sharedaddy div.sharedaddy .sd-block {
    left: 10px;
    padding: 0;
    position: fixed;
    top: 260px;
    width: 50px;
}

    and then add the following below the other rules 

    .singular .main-content {
    padding-left: 50px;
}

    The icons will float fixed just outside the left edge of the content.

  • bookingmom · Member ·

    Wow, it’s even better then I expected! Thank you very much!!! Good solution!

  • thesacredpath · Member ·

    You are welcome.

  • The topic ‘How place sharing buttons on the top of the post?’ is closed to new replies.