Skip to:
Content
Pages
Categories
Search
Top
Bottom

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


  • Craig
    Participant

    @craigheyworth

    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
    Participant

    @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 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.

Viewing 1 replies (of 1 total)

You must be logged in to reply to this topic.