Hi all,

Currently in bbpress, I have it so you can favourite and subscribe to topics. However, when the user does so, it literally changes the ‘favourite’ to ‘favourited’, and I don’t think this is obvious enough for my user base.

How can I modify this to either, add a tick icon for posts you’ve favourited, or give a alert box informing you you’ve successfully favourited / subscribed etc.

It would also be nice, if the user could see at a glance that they’re favourited or subscribed to a topic from the forum it’s self. So while scrolling through new topics, they can see ones that they’ve already favourited etc.

Can’t seem to find anything on this online :-/

any ideas?

[@tecca Participant 11 years, 5 months ago]

You can change this through your bbpress.css file fairly easily. The IDs/classes you’re looking for will be similar to this:

#favorite-toggle, #subscription-toggle {
	text-decoration: none;
	padding: 0 6px;
	font-weight: bold;
	}
	#favorite-toggle a {
		color: #d7be4c;
	}
	#favorite-toggle a:hover {
		color: #dfca66;
	}
	#favorite-toggle span.is-favorite a, #subscription-toggle span.is-subscribed a {
		color: #888888;
		}
		#favorite-toggle span.is-favorite a:hover, #subscription-toggle span.is-subscribed a:hover {
			color: #555555;
		}

#subscription-toggle a {
	color: #39c696;
	}
	#subscription-toggle a:hover {
		color: #4cd4a5;
	}

That’s an older version of what I was using — in there you can see that these elements will change the color based on whatever you set them to:

#favorite-toggle span.is-favorite a, #subscription-toggle span.is-subscribed a

Take note of “span.is-favorite a” and “span.is-subscribed a”. Those are the important ones that will allow you to change the color and style.

If you’d like to add a check mark, you can do something like:

#favorite-toggle span.is-favorite a:before, #subscription-toggle span.is-subscribed a:before {
	content: "✓";
		}

In the above, I added the “:before” pseudo elements to indicate that “before the word, add this content.” The content is the checkmark. Alternatively, you can also use the “:after” pseudo element and add things that way. Both work.