Move sharing buttons below post title

• 

  raph972 · Member · May 11, 2013 at 4:41 am

  • Copy link
  • Add topic to favorites

  Is it possible to move the sharing buttons below the title instead of having them at the end of the post?
  Some of my posts are very long, so it is particularly inconvenient to have the sharing buttons at the end.

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

• 

  thesacredpath · Member · May 11, 2013 at 5:16 am

  • Copy link

  In most themes, this is problematic, but this theme was done right. Add the following to your CSS and see what you think.

  .entry-content {
  position: relative;
  padding-top: 70px;
  }
  
  .post div.sharedaddy div.sd-sharing {
  position: absolute;
  top: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.13);
  }

• 

  thesacredpath · Member · May 11, 2013 at 5:18 am

  • Copy link

  Also in the future if you could post CSS related questions in the CSS forum, it would help those of us who help with the CSS to answer your questions sooner. We volunteers don’t always have the time to look through the main forums in search of CSS questions and look in the CSS forum first. It will most times speed up getting a solution. Thanks.

• 

  raph972 · Member · May 11, 2013 at 5:25 am

  • Copy link

  I usually do post in the CSS forum; this time, I simply wasn’t sure if CSS was the way to do it.

  It looks great in the posts, but the archive page looks terrible (http://alnakhlah.org/category/archives/) with a big space between post titles and excerpts. Do you see a way to remedy this?

• 

  thesacredpath · Member · May 11, 2013 at 5:27 am

  • Copy link

  Let me take a look. We might have to adjust the archives pages separately using more specific selectors.

• 

  thesacredpath · Member · May 11, 2013 at 5:29 am

  • Copy link

  That was easy (I think). Remove what I gave originally and add this. This specifically targets the single post pages and leaves the archives, categories and tags pages alone.

  .single.entry-content {
      padding-top: 70px;
      position: relative;
  }
  
  .single.post div.sharedaddy div.sd-sharing {
      border-bottom: 1px solid rgba(0, 0, 0, 0.13);
      position: absolute;
      top: 0;
  }

• 

  raph972 · Member · May 11, 2013 at 5:37 am

  • Copy link

  Now the archive page is fine but the sharing buttons are back at the bottom of posts

• 

  thesacredpath · Member · May 11, 2013 at 5:55 am

  • Copy link

  Well, that was a challenge. Give this a try. This seems to work.

  .single div.entry-content {
      padding-top: 70px;
      position: relative;
  }
  
  .single.post div.sharedaddy div.sd-sharing {
      border-bottom: 1px solid rgba(0, 0, 0, 0.13);
      position: absolute;
      top: 0;
  }

• 

  raph972 · Member · May 11, 2013 at 6:02 am

  • Copy link

  I cannot see a difference

• 

  thesacredpath · Member · May 11, 2013 at 6:07 am

  • Copy link

  Sorry, Firebug and Firefox blew up on me and then there was a Firebug update. I’ve rebooted. This will do it. No, really it will!!! Why are you snickering??? :)

  .single div.entry-content {
      padding-top: 70px;
      position: relative;
  }
  .single div.post div.sharedaddy div.sd-sharing {
      border-bottom: 1px solid rgba(0, 0, 0, 0.13);
      position: absolute;
      top: 0;
  }

• 

  raph972 · Member · May 11, 2013 at 6:11 am

  • Copy link

  Well, you seemed bored so I was simply trying to challenge you!! :)

  Worked perfectly, now I can go sleep at peace. Thanks!

• 

  thesacredpath · Member · May 11, 2013 at 6:21 am

  • Copy link

  You are welcome and sorry it too so long. Some of the newer themes are kind of challenging.

  Thanks for keeping me from getting bored. :)