1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Tweet Tweet

Discussion in 'XenForo Questions and Support' started by Ryan Kent, Mar 1, 2011.

  1. Ryan Kent

    Ryan Kent Well-Known Member

    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:

    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>
    
    How can I add my image plz?
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

  3. Ryan Kent

    Ryan Kent Well-Known Member

    PortalTweet.JPG
    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:
    Code:
    /* CSS for Tweet bird image on Share This Page modules */
    .socialicons li {
    float: left;
    }
    .socialicons img {
    height: 100px;
    width: 100px;
    margin-right:5px;
    }
     
  4. Peggy

    Peggy Well-Known Member

    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.
     
  5. Ryan Kent

    Ryan Kent Well-Known Member

    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.

    PortalTweet2.JPG
     
  6. GofD

    GofD Well-Known Member

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

    Ryan Kent Well-Known Member

    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.
     
  8. GofD

    GofD Well-Known Member

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

    Ryan Kent Well-Known Member

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

    GofD Well-Known Member

    Try this:

    Code:
    .socialicons img {
        height: 80px;
        margin-right: 5px;
        margin-top: -15px;
        width: 80px;
    }
     
    Oracle likes this.
  11. Peggy

    Peggy Well-Known Member

    Looking very good.
     
  12. Ryan Kent

    Ryan Kent Well-Known Member

    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 likes this.
  13. GofD

    GofD Well-Known Member

    You're welcome. :D
     

Share This Page