I'm just full of questions lately. In the Share The Page box on the forum index, I'd like to put the Face book Like button up next to the tweet # box (see screenie). The code is below. How would I edit this to accomplish what I want? Code: <div class="tweet shareControl"> <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-lang="{xen:helper twitterLang, $visitorLanguage.language_code}" data-url="{$url}" {xen:if {$xenOptions.tweet.via}, 'data-via="{$xenOptions.tweet.via}"'} {xen:if {$xenOptions.tweet.related}, 'data-related="{$xenOptions.tweet.related}"'}>{xen:phrase tweet}</a> </div> </xen:if> <xen:if is="{$xenOptions.facebookLike}"> <div class="facebookLike shareControl"> <xen:container var="$facebookSdk">1</xen:container> <fb:like href="{$url}" layout="button_count" action="{$xenOptions.facebookLikeAction}" font="trebuchet ms" colorscheme="@fbColorScheme"></fb:like> </div> Thanks in advance!
In that case just add a minimum height too. Code: .sidebar .sharePage .shareControl { float: left; min-height: 60px; } Change the height to suit.
Gah! The CSS must have changed as I've used that before when someone else asked how to do it. I'll have a look at your site then, give me a few minutes.
Of course an easy fix would be to edit the sidebar_share_page template and change <div class="secondaryContent"> to <div class="secondaryContent" style="min-height: 60px"> You still need the float left in EXTRA.css though.
so the float left is going to look like this? Code: .sidebar .sharePage .shareControl { float: left; }
You sure? I just tested it on my test installation and it worked fine. You need both the float left in EXTRA.css and the template edit.
Yes I did both. Now, I went into the css for that template, and changed the 10px top margin to 1px, and that moved the images up. But now, I need a bottom margin code. This is the code - Code: .sidebar .sharePage .shareControl { margin-top: 1px; } .sidebar .sharePage iframe.fb_ltr { _width: 200px !important; } .mast .sharePage .secondaryContent { overflow: visible !important; }
Just increase the min-height value from 60px to whatever you need. Something around 80px will probably work.
