CSS help – how to move the share button to top

• 

  chinaspoon · Member · Apr 27, 2016 at 2:46 pm

  • Copy link
  • Add topic to favorites

  Hi all,

  I am the owner of http://cnspoon.com, using wordpress.com. I am wondering if I could move the share button to the top of the page after the title, want to see if it is doable via CSS. Thank you all in advance!

• 

  thesacredpath · Member · Apr 27, 2016 at 11:25 pm

  • Copy link

  Hi there, Bindery is a responsive designed theme that adjusts to the screen/window width from large desktop monitors all the way down to phones. I’ve looked at the HTML and CSS in Bindery, and moving the sharing buttons to the top of the content area really isn’t going to be possible due to the way the HTML is structured. We have to use position: absolute; to do that, and that means that the sharing icons would basically float free of all other elements on the web page so we really couldn’t keep them contained with the content. In some themes, the HTML is structured so that we can, but not in Bindery.

• 

  chinaspoon · Member · Apr 29, 2016 at 12:29 am

  • Copy link

  Thanks, i think the “float free” option is not bad in this case, could you tell me how to do it? Thanks

• 

  thesacredpath · Member · Apr 29, 2016 at 2:10 am

  • Copy link

  You can give this a try. The problem, as you will see when you save this and then visit your site and look at a post and narrow and widen the browser window is that at times the sharing buttons will be on top of the title, and sometimes on top of the content. It is nearly impossible to add enough controlling CSS to stop this given the structure of Bindery.

  .single article {
      position: relative;
  }
  .single div.sharedaddy .sd-block {
      position: absolute;
      top: 760px;
  }
  .singular .entry-title {
      padding-bottom: 80px;
  }

  Things I can’t easily control, or have no control over:
  1. Post title length. It can vary from one line to multiple lines and there isn’t anyway to account for this and control it in the CSS.
  2. The resizing of the featured post image, which has an affect on the location of the title and content below it.
  3. The width of a viewers browser window. The featured image keeps changing dimensions, basically from near infinity on width clear down to phones and at wide browser window widths, the icons are on top of the image, and at phone size widths, they are obscuring the post content.

  I could go on with things I can’t control.

  I wish I had a magic wand for Bindery, but there really isn’t one. To do it right, it would take a restructuring of the single post HTML structure, and we can’t do that with CSS.

• 

  chinaspoon · Member · May 2, 2016 at 12:16 pm

  • Copy link

  Thanks a lot, how can I restructure the single post HTML structure?

• 

  thesacredpath · Member · May 3, 2016 at 12:26 am

  • Copy link

  Not at WordPress.com. We cannot edit the theme php script files here.

• 

  chinaspoon · Member · May 12, 2016 at 2:28 pm

  • Copy link

  Is it possible to have a float sharing panel to the left of the page and is vertical? (for this theme of course)

• 

  thesacredpath · Member · May 12, 2016 at 8:58 pm

  • Copy link

  @chinaspoon, due to the way the HTML is structured we can’t really do this and have it work smoothly and reliably, and we would have to limit the move to about 850px and wider screens since we run out of room on the left and they would overlap the content. We could add some padding to the left and perhaps keep them there till around 600px, but the problem is the featured image and header area do not remain a constant height, so it is difficult to position them.

  This is just my thought, but in general it seems to make sense that the sharing buttons are at the bottom of posts and pages since when someone reads through an article on a site, they would typically share after reading when they are at the bottom of the article. That is one of the main reasons the sharing buttons are at the bottom of posts and pages by design.