How to highlight this button?

sharonyue

捕获.JPG

I found most of the users neglect this button (also neglect the bookmark). Is it possible to modify it to some text in CSS? Thanks.

gotwf

@sharonyue I have noticed this as well. Which surprised me given the ubiquity of that icon in UI design these days. I could also say the same for the adaptive horizontal rule collapsable menu icon visible when in portrait or narrow windows. Yep. That icon IS also ubiquitous, especially smart phone side. But once again, while discoverable, not otherwise obvious. Go figure. Anyways, maybe a FAQ entry, maybe a "How To" or some "Getting Started" announcement. And/or accept the reality that no matter how easy you make it there are still those who're just not going to get it. Nor even try at it much.

As for highlighting the icon, I personally enjoy how generally understated NodeBB's UI is. Not a bunch of stuff competing for "click me" attention. It is very discoverable w/minimal effort. It's all there and. for the most part, stays out of my way. Yet.... I still have users "discovering things" several months after signing up. even among pretty active posters. Why? Because they're stupid? I think not. I suspect more a matter of habit. Folks are busy so they opt for lowest hanging fruit.

Speaking of UI design, one thing that maybe could be clearer is the two "Reply" buttons: one for the post itself and another for the thread. Both sporting the same label so that was source of minor confusion at launch. Communities are pretty good at teaching/sharing knowledge, however, so it did not take long for that one to percolate thru the new user base.

Sorry this is no help to your actual question and more of a "me too". I decided not to sweat it and let some responsibility remain with the user. Balance can be elusive.

P.S.; Not a dev but would seem this involves styling fa-ellipsis-v ?? Clue bats welcome.

oplik0

.moderator-tools .fa-ellipsis-v:before{
  content: "some text";
}

This will replace these three dots, but if you want to keep them you can also do

.moderator-tools .fa-ellipsis-v:after{
  content: "some text";
}

Note though, that in the second case it will look ugly without any additional styling - I'd recommend adding at least padding-left or margin-left.

You can of course style these pseudoelements in any way you want to. So for example you can create this menu that no one will miss:

by using this css:

.moderator-tools .fa-ellipsis-v:before{
  content: "menu";
  margin-left: -10px;
  color: #FF00FF;
  background-color: #FFFF00;
  font-size: 2rem;
  border-radius: 3px;
  font-weight: bolder;
  text-transform: capitalize;
  font-family: "Comic Sans MS", cursive, sans-serif;
}

sharonyue

@gotwf said in How to highlight this button?:

Yet.... I still have users "discovering things" several months after signing up. even among pretty active posters. Why? Because they're stupid? I think not. I suspect more a matter of habit. Folks are busy so they opt for lowest hanging fruit.

Thanks for the comments. I agree with that. In UI design, we believe if you do not wish users to use some function, just make it unconspicuous . Lets take an example. Nodebb has a bookmark module, which can be used by clicking that icon. But I found almost no one is using it (as the admin I can see that). I think the reason is that, yes, Folks are busy so they opt for lowest hanging fruit. as you've said. And most of the users are not aware that there is a icon he/she can click!

That is the reason why I want to highlight the icon.

@oplik0 I tried the first option, the layout is not well-arranged. But thank you at least it can be done in CSS.. Do you think if you can develop a theme to do some minor modification on pernala? https://community.nodebb.org/topic/14729/how-to-remove-mark-unread/3 I also want to remove these buttons, looks no one is using it but they are there.

oplik0

Well, you could probably try throwing more css at it to fix it
But yes, a custom theme might be a good solution. The easiest way to do so would be forking Persona and modifying it. Removing buttons is easy and you could also just move bookmark button to not be hidden under the dropdown like this:

(but better looking, since this was just a quick edit with dev tools)

However, if you just want to make minor modification I recommend looking into nodebb-plugin-customize - it allows you to just modify specific templates without the need to fork the whole theme and maintain it when you want to update.

sharonyue

@oplik0 That picture looks terrific! Actually I know nothing about nodebb programming... so it looks I cannot do it by myself. Anyway the design is not urgent.

oplik0

As I said, it was just a quick edit in devtools I literally just copied the icon from the dropdown outside to a span with a class of one of the other buttons without even bothering to change the color.
If you want I can try to move the icon outside the dropdown properly

As for knowing about NodeBB programming, there isn't much required to know to modify a theme. It's HTML + a pretty easy templating engine. And if you're not adding new elements just knowing HTML should be enough since you already have ready to use benchpress parts of the template that you can move/copy.

sharonyue

@oplik0 I am suddenly aware that, even I put a very highlighted button for bookmark. When the user want to access their bookmarks, it is still very difficult for where it is. So I think it would require lots of efforts at the final stage. Now it is not necessary, Anyway thank you.

gotwf

@sharonyue It is cool such exists, as NodeBB's builtin bookmarks will take you to that bookmarked post. Bookmarking via browser bookmarks are close enough and already "wired" into users subconscious though so I, too, find very few folks utilizing NodeBB's builtin bookmarks. Heh, very recently I had a user who DID need more precise bookmark though and they were quite happy to learn their request had already been built in. Which leads to.....

NodeBB has a wealth of stuff available from the "user" page. Getting to THAT page is not always obvious for lower tech types. The ah-ha experience is kind of cool to watch once they do though.

As mentioned up post, I appreciate the understated elegance of NodeBB's Persona theme. So it is a sticky wicket indeed to balance that minimalism with more explicit cues. I favor erring on the side of "caution" and reluctant to tweak much. Your mileage obviously varies.

sharonyue

Hello guys, I am still thinking how to highlight this buttom. I found almost none of the users have used it... They dont know how to edit the their thread.. sad Every time if the post is not well-arranged, I need to edit them by myself..

alt text