Need help? Check out our Support site, then


Move sharing buttons below post title

  1. 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 alnakhlah.org.

  2. 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);
    }
  3. 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.

  4. 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?

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

  6. 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;
    }
  7. Now the archive page is fine but the sharing buttons are back at the bottom of posts

  8. 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;
    }
  9. I cannot see a difference

  10. 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;
    }
  11. Well, you seemed bored so I was simply trying to challenge you!! :)

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

  12. 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. :)

Topic Closed

This topic has been closed to new replies.

About this Topic