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

Reply and Like links as buttons

Discussion in 'Styling and Customization Questions' started by Morgain, Jan 29, 2012.

  1. Morgain

    Morgain Well-Known Member

    I have successfully tweaked the Like and Reply links into buttons.

    Template = post

     <xen:hook name="post_public_controls" params="{xen:array 'post={$post}'}">
                    <xen:if is="{$post.canLike}">
    <!-- LIKE, REPLY BUTTONS -->
                        <a href="{xen:link posts/like, $post}" class="LikeLink item control {xen:if $post.like_date, unlike, like}" data-container="#likes-post-{$post.post_id}"><span></span><span class="LikeLabel"><input type="submit" class="button" style="background-color: #ff9966;" value={xen:if $post.like_date, {xen:phrase unlike}, {xen:phrase like}}></span></a>
                    <xen:if is="{$canReply}">
                        <a href="{xen:link threads/reply, $thread, 'quote={$post.post_id}'}" data-postUrl="{xen:link posts/quote, $post}" class="ReplyQuote item control reply" title="{xen:phrase reply_quoting_this_message}"><span></span><input type="submit" class="button" style="background-color: #99cc99;" value="{xen:phrase reply} + quote"/></a>
    The Like button shows as a warm peach - nice and inviting.
    Next I get my beloved green for the Reply button and it displays the additional "+ quote" to make it clearer.
    (Note if anyone else wants to do this the Like button becomes a text link Unlike once used. I'm OK with that myself.)

    They don't position over on the right though - Ive tried float, and margin-right. There's still a big space between these buttons and the right hand edge.
    Where's the stuff to push the list of who Likes it over to the right?

    Thank you.
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Style Properties -> Message Elements -> 'Private' Controls Container / 'Public' Controls Container

    They will only go as far as the message content boundary though.
    Morgain likes this.
  3. Shelley

    Shelley Well-Known Member

    Is there any reason why you didn't go about this with css and accomplishing the same effects? eliminating the template edit.

    edit: nevermind. I just read that your shifting buttons around.
    Morgain likes this.
  4. yavuz

    yavuz Well-Known Member

  5. Morgain

    Morgain Well-Known Member

    Perfect Brogan.

    Shelley my css isn't very good. What I normally do is get it to work locally in the template and then work out how to transfer it out to the css.

    Sadly though I tried the Style Properties with float right at the bottom, and margin right in the little box above
    I also tried adding this to EXTRA.css
    .message .publicControls .LikeLink.item
    float: right !important;
    .message .publicControls .ReplyQuote.item
    float: right !important;
    Nothing happens they just SIT there around 200px away from the right edge detracting from signatures.
  6. Brogan

    Brogan XenForo Moderator Staff Member

    For some reason, you have set this class to 80% width: .message .messageMeta
  7. Morgain

    Morgain Well-Known Member

    Yes it was the only way I could get it to stop being so wide.
    But that shouldn't stop items in it going over to the edge?

    Sorry I meant if items are INSIDE its 80% width doesn't matter what the width is.
  8. Morgain

    Morgain Well-Known Member

    I can't see which set of optiopns matches that in
    Style Properties: Message Layout

    I have checked all the likely items on that menu.

Share This Page