Tweet Tweet

[Ryan Kent]

I am trying to add a twitter "Follow Us" bird to the "Share This Page" box. Right now the box looks rather empty. I believe I found the correct template, sidebar_share_page. I was hoping to find code providing a path to an image file, and then I would add similar code for the bird image I wish to add. The code I located is:

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

How can I add my image plz?

 

[Paul B]

This thread should help: http://xenforo.com/community/threads/social-site-icons-in-footer-share-this-page.12889/

 

[Ryan Kent]

that thread was a great help! I am almost set, but my birdy needs a lift. I am pretty sure this is a CSS issue but I've tried everything I can think of and can't find the right adjustment. This issue happens on both the portal page (XenPorta) and on the forums page so it seems the issue is something in the extras.css. The image is 100x100.

The css code is:

/* CSS for Tweet bird image on Share This Page modules */
.socialicons li {
float: left;
}
.socialicons img {
height: 100px;
width: 100px;
margin-right:5px;
}

 

[Peggy]

I use him, but in my side column. lovemyjrt.com
Looks like you may need to reduce the size of the image to get him to fit where you're putting him.

 

[Ryan Kent]

actually I just checked and the image I am using is a bit smaller then yours. The image is 100x100

If I change the CSS from it's current 100x100 setting to 110x110 then the box expands too much, he fits in the box but does not line up properly.

 

[GofD]

try setting the image margin-top to -20px or so...see what happens?

 

[Ryan Kent]

Thanks for the suggestion. Using the 1st option posted where I used 100x100 as the dimensions adjusting the margins had no effect at all. Using the 2nd option the bird moved up higher, but in the 2nd example his position is perfect. In that case what's needed is for the tweet/fb icons to move higher and the box to adjust smaller.

 

[GofD]

If you can post a url where it can be seen, it would be helpful. Hard to say without seeing it.

 

[Ryan Kent]

of course! my apologies and thank you for having a look www.terapvp.com

 

[GofD]

Try this:

.socialicons img {
    height: 80px;
    margin-right: 5px;
    margin-top: -15px;
    width: 80px;
}

 

[Peggy]

of course! my apologies and thank you for having a look www.terapvp.com

Looking very good.

 

[Ryan Kent]

That works GofD!! Thank you so much.

The only issue now is the image is down to 80x80 and the text is a bit hard to read. I have a friend who is great with photoshop who probably can sharpen the text. Thanks again for taking the time to share your experience!

 

[GofD]

You're welcome.