How to move Share Icons to Top of Post

  • Author
    Posts
  • #797247

    aimango
    Member

    By default the ‘Share this’ icons are at the bottom. I am wondering what I can add in the Custom CSS to move it to the top.

    Also – is it possible for them to appear both at the bottom and the top?

    Thanks.

    The blog I need help with is aimango.wordpress.com.

    #797413

    Bottom and top, no.

    This will do it.

    .entry {
    position: relative;
    padding-top: 70px;
    }
    
    div.sharedaddy {
    position: absolute;
    top: 15px;
    }
    
    div.sharedaddy div.sd-block {
    border-top: none !important;
    }

    One suggestion though: Most people want to share something after they have read it, not before, and having the share buttons at the top mean they have to scroll all the way back up to the top to get at the share buttons.

    #797435

    aimango
    Member

    Thanks for the help. Is it also possible to move over the buttons closer to the “Share this:” text, and is it possible to modify the Share this text?

    #797438

    The share this text can be changed at settings > sharing toward the bottom.

    For the space inbetween the text and the buttons, add this to your CSS and you can adjust the right padding to suit your needs. The buttons will float depending on the text you choose for the “share this.” It would not have floated before.

    `div.sharedaddy h3, #content div.sharedaddy h3, #main div.sharedaddy h3, #primary div.sharedaddy h3 {
    padding-right: 10px;
    width: auto;
    }

    div.sharedaddy .sd-content {
    float: left;
    width: auto;
    }

    #797439

    I missed a code tag, use this instead for copy/paste.

    div.sharedaddy h3, #content div.sharedaddy h3, #main div.sharedaddy h3, #primary div.sharedaddy h3 {
    padding-right: 10px;
    width: auto;
    }
    
    div.sharedaddy .sd-content {
    float: left;
    width: auto;
    }
    #797459

    aimango
    Member

    Thanks for the help so far!

    This is irrelevant to the Share, but how do you change how far separated your primary and secondary widget areas are?

    #797460

    What site are you talking about? The one linked to your username, http://aimango.wordpress.com/ , does not have two widget areas.

    #797494

    aimango
    Member

    My apologies. This is the site I’m talking about. As you can see – a gap between the Facebook and Twitter widgets as FB is in the primary, Twitter is in the secondary.

    Also – I am not sure what stripped the Twitter widget styling, can you guide me into fixing it up? The bullet is not aligned with the other bullets in Archives.

    #797495

    aimango
    Member

    And also do you know what heading tag corresponds to the Twitter Widget? I had this for widget title, which was applied to my first 2 widgets:
    .widget-title {
    color:#444444;
    font-size:18px;
    font-weight:bold;
    }

    But it doesnt seem to apply to the Twitter widget. Or is it possible to just remove the Twitter Widget title completely? If I leave the title blank on the widget settings, it just uses “Twitter Updates” as defualt.

    Thanks so much in advance.

    #797497

    This (most of it) has to do with the design of the facebook likebox and that is controlled by facebook. If you add the following to your custom CSS, it will fix things. It specifically targets the likebox widget. The -15px seems about right, but you can adjust it if you wish.

    #facebook-likebox-3 {
    margin-bottom: -15px;
    }
    #797498

    The title of the twitter widget is a link, so you have to apply your styles also to those links if you want it styled the same as non-link widget titles. Use this selector to do that:

    .widget-title a

    #797500

    aimango
    Member

    Hmm.. using that selector still does not change the twitter widget title.

    Do you also knw how to hide the line above the share settings?

    Thanks

    #797502

    You have custom fonts appled to the “lookout and “archives” widgets which is not getting applied to the twitter widget title since it is a “link.” Did you want the twitter widget title to match the others?

    #797503

    On the line on the sharing icons:

    div.sharedaddy div.sd-block {
    border-top: none;
    }
    #797518

    aimango
    Member

    Oh okay. Yes I want the Twitter title to match the others.

    #797519

    Add this to the bottom of your custom CSS:

    h3.widget-title a {
    font-weight: 400;
    font-family: proxima-nova-1,proxima-nova-2,"Helvetica Neue",Arial,Helvetica,"Nimbus Sans L",sans-serif;
    font-style: normal;
    font-variant: normal;
    color: #444444;
    }

The topic ‘How to move Share Icons to Top of Post’ is closed to new replies.