Forums

mikeman

on
http://heavybug.com/

i finally got the social buttons on top of the banner, now im trying to fill in that little space with a like button.. i pasted the code in just like i did with the social buttons but it is being stubborn on is underneath.. how could i get the button to the right of the twitter image, preferably center of the twitter pic

thanks!

seb_z_lite

ok, your div .textwidget is not wide enough. I put it at 150px, floated right the like button and put a margin-top of -55px. The best would be to float everything or position relative on the div and the elements could be abs.positioned. There's different ways.

thomas

Yeah, that "like" button is notoriously difficult to style.

Float the social network anchors (<a>'s) to the left. Then, increase the width of the div or the li that contains your social buttons to about 170 px. This should be wide enough for your like button to move up while keeping the Twitter button in place. Then add about 20 px of top margin to the like button's iframe.

thomas

@seb_z_lite has some good suggestions. Absolute positioning will probably give you the most control.

mikeman

ehh man im stupid. . could you provide your instructions in a little more detail im having a hard time following, im trying to do this with google chrome element inspector and all im doing is messing things up :-/

if i restyle the text widget, wont that style all text widgets site wide even ones that dont need to be?

thanks

mikeman

i had been working on putting all the images in a div, including the like button.. it works fine until i put in in wordpress.... if you view source look for social-box youll see it, but its burried somewhere visually..

mikeman

ok so i was doing it half-arse.. and i changed it up and now i got it working, but now im doing something else wrone, on different resolution monitors the #social-box is further to the right than its supposed to be.

how could i fix that without having to do resolution specific styles?

this is whats putting my #social-box together now via functions.php thematic


<?php
function my_div()
{
     echo '<div id="social-box" style="width: 128px;z-index:999;margin:0 auto;width:170px;padding:0px;position:absolute; top:4px;left:231px;z-index: 999;">
  <div id="bbox" style="float: left;height: 64px;width: 64px;"><img src="http://heavybug.com/wp-content/uploads/2011/09/YouTube.png&quot; /></div>
  <div id="bbox" style="float: left;height: 64px;width: 64px;"><img src="http://heavybug.com/wp-content/uploads/2011/09/Facebook.png&quot; /></div>
  <div id="bbox" style="float: left;height: 64px;width: 64px;"><img src="http://heavybug.com/wp-content/uploads/2011/09/Twitter.png&quot; /></div>
  <div id="bbox" style="float: left;height: 64px;width: 64px;"><div style="padding-top:18px;padding-left:11px;"><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fheavybug.com%2F&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;action=like&amp;colorscheme=lightk&amp;font=verdana&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe></div></div>
</div>';
}
add_action('thematic_header', 'my_div');

treehouse : what would you like to learn today?

Forums

[Solved] how can i float this fb like button...