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

Make Like and Reply buttons bigger

Booth

Well-known member
#1
How do I make the Like and Reply buttons bigger? I'd also like them to show up as a proper rounded button.

We have several elderly members on our forum and the small Like and Reply buttons would be better if they stood out a bit more.
 

Jake Bunce

XenForo moderator
Staff member
#2
Here is a quick template change which highlights both buttons:

Admin CP -> Appearance -> Templates -> post

Change the first line from this code:

Code:
			<div class="publicControls">
				<a href="{xen:link threads/post-permalink, $thread, 'post={$post}'}" class="item muted postNumber" title="{xen:phrase permalink}">#{xen:calc '{$post.position} + 1'}</a>
				<xen:if is="{$post.canLike}">
					<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">{xen:if $post.like_date, {xen:phrase unlike}, {xen:phrase like}}</span></a>
				</xen:if>
				<xen:if is="{$canReply}"><span class="item">
					<a href="{xen:link threads/reply, $thread, 'quote={$post.post_id}'}" data-postUrl="{xen:link posts/quote, $post}" class="ReplyQuote control reply" title="{xen:phrase reply_quoting_this_message}"><span></span>{xen:phrase reply}</a>
				</span></xen:if>
			</div>
...like so:

Code:
			<div class="publicControls importantMessage">
				<a href="{xen:link threads/post-permalink, $thread, 'post={$post}'}" class="item muted postNumber" title="{xen:phrase permalink}">#{xen:calc '{$post.position} + 1'}</a>
				<xen:if is="{$post.canLike}">
					<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">{xen:if $post.like_date, {xen:phrase unlike}, {xen:phrase like}}</span></a>
				</xen:if>
				<xen:if is="{$canReply}"><span class="item">
					<a href="{xen:link threads/reply, $thread, 'quote={$post.post_id}'}" data-postUrl="{xen:link posts/quote, $post}" class="ReplyQuote control reply" title="{xen:phrase reply_quoting_this_message}"><span></span>{xen:phrase reply}</a>
				</span></xen:if>
			</div>
Screen shot 2010-10-26 at 10.47.56 AM.png
 

Shelley

Well-known member
#3
Interesting. I added to the css and did it individually using the .publicControls .item rather than it being wrapped around the post# like & reply. It's giving me an idea though the way you have shown it.
 

Allan

Well-known member
#5
Here is a quick template change which highlights both buttons:

Admin CP -> Appearance -> Templates -> post

Change the first line from this code:

Code:
<div class="publicControls">
<a href="{xen:link threads/post-permalink, $thread, 'post={$post}'}" class="item muted postNumber" title="{xen:phrase permalink}">#{xen:calc '{$post.position} + 1'}</a>
<xen:if is="{$post.canLike}">
<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">{xen:if $post.like_date, {xen:phrase unlike}, {xen:phrase like}}</span></a>
</xen:if>
<xen:if is="{$canReply}"><span class="item">
<a href="{xen:link threads/reply, $thread, 'quote={$post.post_id}'}" data-postUrl="{xen:link posts/quote, $post}" class="ReplyQuote control reply" title="{xen:phrase reply_quoting_this_message}"><span></span>{xen:phrase reply}</a>
</span></xen:if>
</div>
...like so:

Code:
<div class="publicControls importantMessage">
<a href="{xen:link threads/post-permalink, $thread, 'post={$post}'}" class="item muted postNumber" title="{xen:phrase permalink}">#{xen:calc '{$post.position} + 1'}</a>
<xen:if is="{$post.canLike}">
<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">{xen:if $post.like_date, {xen:phrase unlike}, {xen:phrase like}}</span></a>
</xen:if>
<xen:if is="{$canReply}"><span class="item">
<a href="{xen:link threads/reply, $thread, 'quote={$post.post_id}'}" data-postUrl="{xen:link posts/quote, $post}" class="ReplyQuote control reply" title="{xen:phrase reply_quoting_this_message}"><span></span>{xen:phrase reply}</a>
</span></xen:if>
</div>
View attachment 5141
Don't work now :(