Skip to:

Make it more obvious that you've favourited / subscribed to a topic

  • Yeti


    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?

Viewing 1 replies (of 1 total)

  • Tecca


    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 a, #subscription-toggle a {
    		color: #888888;
    		#favorite-toggle a:hover, #subscription-toggle 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 a, #subscription-toggle a

    Take note of “ a” and “ 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 a:before, #subscription-toggle 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.

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.
Skip to toolbar