Where do I find the CSS code for reputation badges?

[#ESY]

 

This thing right there. I want to edit the CSS in order to replace that green "+" with that skull, or at least put that skull above the number of posts. Where can I edit that? I've looked in my theme's code for a while but couldn't find anything that might help.

 

Thanks.

[Meddysong]

You won't find it in CSS because which symbol to put there is determined by the number of points the user has. You have to amend templates instead.

You'll need to replace fa-plus-circle in core > front > global > reputationBadge:

<i class='fa {{if $author->pp_reputation_points > 0}}fa-plus-circle{{elseif $author->pp_reputation_points < 0}}fa-minus-circle{{else}}fa-circle{{endif}}'></i>

 

[#ESY]

1 hour ago, Meddysong said:

You won't find it in CSS because which symbol to put there is determined by the number of points the user has. You have to amend templates instead.

You'll need to replace fa-plus-circle in core > front > global > reputationBadge:

<i class='fa {{if $author->pp_reputation_points > 0}}fa-plus-circle{{elseif $author->pp_reputation_points < 0}}fa-minus-circle{{else}}fa-circle{{endif}}'></i>

 

So I have to make an if statement for every level of reputation, right? A bit too complicated and if I want to change one level, I have to edit the code too, so I won't be doing that.

Instead, can I move that image (the skull) above the number of posts? If so, how?-

[Meddysong]

No, there's nothing complicated. All that that code is saying is that if the number of points is over one, then use the fa-plus-circle icon. If it's less than one, then do the fa-minus-circle icon. And if it's zero, just use fa-circle icon. You don't have to worry about arbitrary numbers. It's just a case of positive, negative and zero.

In your case do you just want to have the skull in every situation rather than skull for one, something else for negative, something else for zero?

If so, then it's easy; you could just delete all of that and put a direct link to your image in instead.

 

 

 

[#ESY]

2 minutes ago, Meddysong said:

No, there's nothing complicated. All that that code is saying is that if the number of points is over one, then use the fa-plus-circle icon. If it's less than one, then do the fa-minus-circle icon. And if it's zero, just use fa-circle icon. You don't have to worry about arbitrary numbers. It's just a case of positive, negative and zero.

In your case do you just want to have the skull in every situation rather than skull for one, something else for negative, something else for zero?

If so, then it's easy; you could just delete all of that and put a direct link to your image in instead.

 

 

 

I want something like this:

 

And from what I understood, I'd have to make an if statement for every level, and if I ever want to edit any reputation level, then I'd have to edit the if statements too. First of all, how can I change that "+" image? How can I put a link to my image? I'd have to put the image on my server and replace the fa-plus-circle icon with the path to my uploaded file?

And second of all, can I move those images above the number of posts?

[Meddysong]

Ah, I see. You're using the pips, which show the number of posts not the user's reputation. So it's not that you need to replace the reputation badge; you need to remove it.

If you go to core > front > global > reputationBadge, you should be able to see the things you need to remove. What you remove depends on what you want to keep.

You want to lose the badge, right? What about the reputation score (the number next to the badge)?

If you do that, though, bear in mind that it's the number of posts which will determine which icon is shown, not the user's reputation.

 

[#ESY]

12 minutes ago, Meddysong said:

Ah, I see. You're using the pips, which show the number of posts not the user's reputation. So it's not that you need to replace the reputation badge; you need to remove it.

If you go to core > front > global > reputationBadge, you should be able to see the things you need to remove. What you remove depends on what you want to keep.

You want to lose the badge, right? What about the reputation score (the number next to the badge)?

If you do that, though, bear in mind that it's the number of posts which will determine which icon is shown, not the user's reputation.

 

 

The pips show the reputation level. And that badge appears lower than it should. Being connected to the reputation a user has, it should be near the reputation, not after the number of posts. I want to put that badge a little bit higher, above the number of posts and under the reputation number.

I want that badge here: 

If I'd want to lose the badge, I could simply remove it from the "Reputation" tab in ACP, but I don't want it removed. I want it higher.

[Meddysong]

Ah yes, it seems you're correct. Sorry - I've learned something new today!

I can't answer now, I'm afraid, because I have to run out the door. Maybe tomorrow

[#ESY]

Ok, thanks very much though and I'll be waiting!  

[Meddysong]

OK, got it. You need to edit the template forums > front > topic > postContainer.

It seems to me that this bit is what embeds the image you use:

				{{if $comment->author()->reputationImage()}}
					<li class='ipsPad_half ipsResponsive_hidePhone'>
						<img src='{file="$comment->author()->reputationImage()" extension="core_Theme"}' title='{{if $comment->author()->reputation()}}{$comment->author()->reputation()}{{endif}}' alt=''>
					</li>
				{{endif}}

So you'd need to move the location of that within the template above "<li class='ipsResponsive_hidePhone'>{template="reputationBadge" group="global" app="core" params="$comment->author()"}</li>"

If you also wanted to get rid of the green badge, reputation score etc, you'd need to edit reputationBadge as before.

[#ESY]

Awesome! It's exactly what I wanted to do, thank you so much!