facebook style thumbs up and down

[DRE]

It would be better if the unlike button was only reserved for a post groans feature.

 

[Oblivion Knight]

It would be better if the unlike button was only reserved for a post groans feature.

Agreed, which is why I went for the Facebook approach..

..and the EXTRA.css code is:

.likesSummary .LikeText {
  background: url("/styles/default/xenforo/icons/like.gif") no-repeat;
  padding-left: 20px;
  padding-bottom: 1px;
}

 

[Tejstar]

Is there a way that I could modify the CSS to only include these images on the first post of every thread?

Any help would be much appreciated.

 

[Paul B]

Not with CSS, no.

You would have to edit the template and use different classes/code for the first post and subsequent posts.

 

[Tejstar]

Thanks for the reply Brogan. I take it editing the template would be a complicated process? Any pointers about where I would need to start?

 

[Paul B]

Change the likes_summary template to this:

<xen:if is="{$message.likes}">
    <xen:require css="likes_summary.css" />
    <div class="likesSummary secondaryContent">
        <xen:if is="{$post.position} == 0">
            <span class="LikeText LikeThumb">
                <xen:likes number="$message.likes" users="$message.likeUsers" url="$likesUrl" liked="$message.like_date" />
            <xen:else />
            <span class="LikeText">     
                <xen:likes number="$message.likes" users="$message.likeUsers" url="$likesUrl" liked="$message.like_date" />
            </xen:if>
        </span>
    </div>
</xen:if>

Then add the class to EXTRA.css:

.LikeThumb {
background: transparent url('@imagePath/path/to/image') no-repeat;
}

You will need to add some padding/width to push the text over a bit.

 

[Tejstar]

Brogan - thanks for your help. Would I need to do anything else apart from your suggestion above?

I added the code above but I can still the like images in all posts. I'm currently using the above in addition to the code in the first post of this thread. Any idea what I'm doing wrong?

 

[Paul B]

Well you would need to remove the other code if you only want the image on the first post.

 

[Tejstar]

Oops!

My link for the like image is located in 'mydomain.com/images/like.png'. How would I adapt the code you stated for my like image? Sorry for my noobness! Also, would I need to use similar code for the unlike image?

.LikeThumb {
background: transparent url('@imagePath/path/to/image') no-repeat;
}

 

[Tejstar]

Can anyone help with the above post? Tried using the code below and it's still not working.

.LikeThumb {
background: transparent url('@imagePath/fire.png') no-repeat;
}

 

[Jake Bunce]

Is there a way that I could modify the CSS to only include these images on the first post of every thread?

Any help would be much appreciated.

I was able to get that working with the following edits:

Admin CP -> Appearance -> Templates -> post

Add the red code:

			<div class="publicControls">
				<a href="{xen:link threads/post-permalink, $thread, 'post={$post}'}" title="{xen:phrase permalink}" class="item muted postNumber hashPermalink OverlayTrigger" data-href="{xen:link posts/permalink, $post}">#{xen:calc '{$post.position} + 1'}</a>
				<xen:hook name="post_public_controls" params="{xen:array 'post={$post}'}">
				<xen:if is="{$post.canLike}">
					<a href="{xen:link posts/like, $post}" class="LikeLink item control {xen:if '{$post.position} == 0', 'firstPostLike'} {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}">
					<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>{xen:phrase reply}</a>
				</xen:if>
				</xen:hook>
			</div>

Admin CP -> Appearance -> Templates -> EXTRA.css

Add this code (from the first post, but modified to use "firstPostLike"):

a.firstPostLike.like {
background: url(styles/default/xenforo/icons/like.gif) no-repeat;
padding-left: 20px;
padding-bottom: 1px;
}

a.firstPostLike.unlike {
background: url(styles/default/xenforo/icons/unlike.gif) no-repeat;
padding-left: 20px;
padding-bottom: 1px;
}

 

[Tejstar]

Your tagline 'Probably knows the answer' is very apt.

Many thanks for your help, that worked a treat! Big thumbs up!