• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
  • This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

facebook style thumbs up and down

iXanon

Active member
#42
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:
Code:
.likesSummary .LikeText {
  background: url("/styles/default/xenforo/icons/like.gif") no-repeat;
  padding-left: 20px;
  padding-bottom: 1px;
}
 

Attachments

#43
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.
 

Brogan

XenForo moderator
Staff member
#44
Not with CSS, no.

You would have to edit the template and use different classes/code for the first post and subsequent posts.
 
#45
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?
 

Brogan

XenForo moderator
Staff member
#46
Change the likes_summary template to this:
Code:
<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:
Code:
.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.
 
#47
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?
 
#49
Oops! :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?

Code:
.LikeThumb {
background: transparent url('@imagePath/path/to/image') no-repeat;
}
 
#50
Can anyone help with the above post? Tried using the code below and it's still not working. :(

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

Jake Bunce

XenForo moderator
Staff member
#51
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:

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"):

Code:
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;
}