Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

How to move Share Icons to Top of Post

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

  2. thesacredpath
    Member

    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.

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

  4. thesacredpath
    Member

    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;
    }

  5. thesacredpath
    Member

    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;
}

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

  7. thesacredpath
    Member

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

  8. 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.

  9. 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 {<br /> color:#444444;<br /> font-size:18px;<br /> font-weight:bold;<br /> }

    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.

  10. thesacredpath
    Member

    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;
}

  11. thesacredpath
    Member

    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

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

  13. thesacredpath
    Member

    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?

  14. thesacredpath
    Member

    On the line on the sharing icons:

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

  15. aimango
    Member

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

  16. thesacredpath
    Member

    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;
}

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags