Share Buttons (The Morning After) – How to move them up?

  • Author
    Posts
  • #2131832

    etfalpha
    Member

    Dear CSS Gurus,

    My website is backed by the Morning After Theme.
    Would you be able to let me know what CSS do I need to use in order to move the share buttons from the bottom of a post to the top?
    I would be most grateful for your help!
    Thank you.
    Bart

    The blog I need help with is emergingequity.org.

    #2131942

    You can use absolute positioning to move elements around on the page. Before you make any changes, I would recommend reading this related post:
    http://css-tricks.com/absolute-positioning-inside-relative-positioning/

    I will also help you with an example. When working on CSS, it helps a ton to use a very specific example from your site. In this case, I will use your latest post as the example post:
    http://emergingequity.org/2014/11/11/isis-planning-its-own-currency-gold-and-silver-coins/

    Next, you will want to pick which HTML element to move the sharing buttons inside of. There are a few options in The Morning After theme. You can move them to the top of the content area or you can move it all the way to the top of the main post container.

    Here is an example that sets the “.post_text” container as the relative element and then moves the social buttons container to the top using absolute positioning:

    .post_text {
    	position: relative;
    	padding-top: 89px;
    }
    
    div.sharedaddy .sd-social {
    	position: absolute;
    	top: 0px;
    }

    To use a different container element, such as “#post_content”, just change “.post_text” to “#post_content” like this:

    #post_content {
    	position: relative;
    	padding-top: 89px;
    }
    
    div.sharedaddy .sd-social {
    	position: absolute;
    	top: 0px;
    }

    To learn how to identify CSS elements in your theme on your own, please review http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

    #2131980

    etfalpha
    Member

    Thank you for your help. You are a Star!

    #2132018

    etfalpha
    Member

    Dear designsimply,

    Please can I ask you one more question?
    With respect of the sharing buttons when I select [Show buttons on] ==> [Front Page, Archive Pages, and Search Results] ==> the buttons are not coming up on top of the page … please can you advise with respect of that problem?
    Thank you.

    #2132024

    That is happening because The Morning After theme has some specialized theme options settings, and it looks like the ones you have selected are preventing those buttons from showing up on the home page.

    In order to make the sharing buttons work together with the setting specialized theme options settings, you need to have option for Appearance > Theme Options > General > “Show Full Content Home” checked. So you can try changing that setting and also making a few adjustments to the previous CSS example to see if you like the look. The tradeoff is that you have to have the full content for posts on for the home page to get the buttons to show there. This is true regardless of what CSS is used. You cannot use the customized layout and also have the buttons show.

    Here is a modified CSS example that should take the home page into account if you check that setting I mentioned above:

    .post_text,
    .feat_content,
    #latest_post {
    	position: relative;
    	padding-top:89px
    }
    #latest_post {
    	margin-top: 89px;
    }
    div.sharedaddy .sd-social {
    	position: absolute;
    	top:0
    }
    #2132027

    etfalpha
    Member

    Thank you.

The topic ‘Share Buttons (The Morning After) – How to move them up?’ is closed to new replies.