Help lining up the sharedaddy buttons on the same line – Oxygen theme

• 

  nboufawaz · Member · Mar 16, 2014 at 8:09 am

  • Copy link
  • Add topic to favorites

  Hi there, I successfully moved the sharedaddy to the top of the post, and managed top the share icons/buttons on the right hand side, thanks to this forum. I’m very new CSS.

  However, now the WordPress Like button is displaying one line below the rest. Is there a way to make them appear on the same line?

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

• 

  designsimply · Member · Mar 16, 2014 at 5:01 pm

  • Copy link

  There is certainly more than one way to do that. Here’s one possible way, but it depends on the current custom CSS you’ve already added. If you make changes to the other rules, you may also have to adjust this example. Give it a try:

  .single #content div.sharedaddy {
  	clear: none;
  }
  
  .single div.sharedaddy.sd-like-enabled .sd-like .post-likes-widget {
  	margin-top: -21px;
  }

• 

  nboufawaz · Member · Mar 17, 2014 at 9:48 pm

  • Copy link

  Thanks for your response designsimply! I tried entering what you suggested in with the other code I have in the CSS revisions sheet but nothing happened. I’m so new to CSS that I’m at a loss of where to start to fix it. I’m sure I’ve used far too many rules to do something I could have done in a more simple way. Would someone mind having a look at the code and letting me know how to fix it? My aim was to move the share buttons up to the top of the page, line up the 3 icons (FB, P and T) to the right, leave the WP Like Widget on the left, remove the title and the line that was appearing above them, and finally, line everything up so it shows on the same line. I don’t know where I’ve gone wrong.

  .single .entry-content {
  	position: relative;
  	padding-top: 100px;
  }
  
  .single #jp-post-flair {
  	position: absolute !important;
  	top: -5px;
  	width: 100%;
  }
  
  .single div.sharedaddy .sd-content {
  	width: 100%;
  	text-align: right;
  }
  
  .single div.sharedaddy .sd-content ul {
  	display: inline-block;
  }
  
  .single div.sharedaddy div.sd-block {
  	border-top: none !important;
  }
  
  .single div.sharedaddy h3, #content div.sharedaddy h3, #main div.sharedaddy h3, #primary div.sharedaddy h3 {
  	padding-right: 10px;
  	width: auto;
  }
  
  .single div.sharedaddy .sd-content {
  	float: right;
  	width: auto;
  }
  
  .sinlge #content div.sharedaddy {
  	clear: none;
  }
  .single div.sharedaddy .sd-like-enabled .sd-like .post-likes-widget {
  	margin-top: -5px
  }
  
  .single div.sharedaddy .sd-title {
  	display: none;
  }

• 

  designsimply · Member · Mar 17, 2014 at 11:21 pm

  • Copy link

  My aim was to move the share buttons up to the top of the page, line up the 3 icons (FB, P and T) to the right, leave the WP Like Widget on the left, remove the title and the line that was appearing above them, and finally, line everything up so it shows on the same line.

  That’s a lot! :) But I think you’re on the right track.

  Let’s take it one step at a time. I checked your custom CSS, and I see you’ve already made some modifications since the last time you posted your CSS here. Here’s another example that might work better for moving the likes to the top left. When you add the CSS, put it at the bottom of all of your other CSS:

  .single div.sharedaddy.sd-like-enabled .sd-like {
  	max-width: 70%;
  	position: absolute;
  	top: 0;
  	left: 0;
  }

• 

  nboufawaz · Member · Mar 18, 2014 at 5:47 am

  • Copy link

  Thanks designsimply! You’re a genius! I aspire to get somewhat good at this CSS thing one day. Take care!

• 

  designsimply · Member · Mar 18, 2014 at 6:05 am

  • Copy link

  I think you’re well on your way! :)