Facebook Like button

[Peggy]

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?

<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!

 

[Paul B]

Try adding this to EXTRA.css

.sidebar .sharePage .shareControl {
float: left;
}

 

[Peggy]

OUCH! That, did this -

 

[Paul B]

In that case just add a minimum height too.

.sidebar .sharePage .shareControl {
float: left;
min-height: 60px;
}

Change the height to suit.

 

[Peggy]

Nope that did not work. It looks exactly the same.

 

[Paul B]

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.

 

[Peggy]

Gah! lol. ok

 

[Paul B]

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.

 

[Peggy]

okie doke.

Don't go away!

 

[Paul B]

Don't go away!

When do I ever?

 

[Peggy]

so the float left is going to look like this?

.sidebar .sharePage .shareControl {
float: left;
}

 

[Paul B]

Yes.

 

[Peggy]

Nope, didn't work.

 

[Paul B]

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.

 

[Peggy]

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 -

.sidebar .sharePage .shareControl
{
    margin-top: 1px;
}

.sidebar .sharePage iframe.fb_ltr
{
    _width: 200px !important;
}

.mast .sharePage .secondaryContent
{
    overflow: visible !important;
}

 

[Paul B]

Just increase the min-height value from 60px to whatever you need.

Something around 80px will probably work.

 

[Peggy]

YAYYY that did it! Thanks so much Brogan.