Reply and Like links as buttons

Morgain

Well-known member
I have successfully tweaked the Like and Reply links into buttons.

Template = post

Rich (BB code):
 <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>
                <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>
                </xen:if>
                </xen:hook>
            </div>

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.
 
Style Properties -> Message Elements -> 'Private' Controls Container / 'Public' Controls Container

They will only go as far as the message content boundary though.
 
I have successfully tweaked the Like and Reply links into buttons.

Template = post

Rich (BB code):
 <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>
                <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>
                </xen:if>
                </xen:hook>
            </div>

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.

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.

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.
 
Here is how it's done with css: http://xenforo.com/community/threads/whisper-2.23729/page-2#post-293365

tngKy.png
 
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
Code:
.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.
 
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.
 
Top Bottom