Compact messages style

Hello,

Discourse default message style at 2022-01 - is too bulky, distracting and space wasting for my opinion. I suggest 2 corrections:

  1. Message controls can be placed more compact and accurate - look at my sketch, most of all I like design v2 and v4.
  2. Suppose some buttons must be displayed always anyway for mobile as: [Likes, Edit, Answer, …more], but for desktop (Win/Mac/Lx) its possible to display always only [Likes, Edit] and show other controls only on mouse rollover on each message.

PS Placing Likes at other side of message (extremely faar faar away :smiley:) is conscious decision - it will significantly lower “likes for nothing”, “likes for smile”, “likes for joking”, “likes for wow I see you again”, “likes because of your own good mood”, etc useless nonobjective likes which now used too often without any real sense.

Can anyone help to make such style, please?

1 Like

Hi, @GVG !
I have these ideas to solve your problem:

FAQ

1. initial solution

  • You can change the Discourse style with userstyles.

2. why use user styles?

3. how can this solve my problem?

  • You can set a css style to make this message compact in Discourse.

4. pros?

  • There are already custom styles of compact messages, you can adapt to Discourse if you want
  • Usertyles is easy for you to do, implement
  • If this is attractive and viable, perhaps Discourse adopts this style as official.
  • This works directly in the browser and you can share this style with others

5. cons?

  • If you disable visual style, you have no compact message
  • Knowledge in css and js is required to manipulate the site

6. idea? my opinion?

  • I think your idea can be applied using usertyles or creating a custom theme for the Discourse

7. Do you have any less complicated ideas?

  • Make a theme and customize that theme with whatever you need, like this compact message idea.

8. references?

Without having to move icons and menus (plus, there are other elements that aren’t displayed in your screenshots, like the edit counts, the mention to who we replied to, etc…), you can still work on margins as a start:

Default:

.post-menu-area {
    margin: 20px 0;
}

Custom:

.post-menu-area {
    margin: 0;
}

Comparison:

Moving icons and action buttons isn’t always trivial and could require more in-depth work.

2 Likes

@Canapin what do you think of my userstyles idea? do you think it’s bad? is this idea good?

  • I would like to know your opinion, because from this code we can make a custom userstyles for Discourse

Userstyles only work client-side and generally per-site (I use userstyles and created some).

If someone would like to suggest improvements to the overall appearance of Discourse, any suggestion can be made in ux, and if nobody creates a theme component or include wanted changes in Discourse, any user can make his own solution I guess. Whether it’s a theme component if they’re admin or a client-side solution if they’re not, with their own CSS from whatever browser plugin floats their boat.

But then, this is not really a Discourse-oriented discussion anymore I guess.


@GVG take a look at this related discussion, it could be interesting to you:

2 Likes

NO, your message looks like a classic spam-advertising of your web-service.

Thanks, but: a) make margins smaller I can do by myself; b) it’s NOT enough, because those active elements waste and creates too much space. So the main goal - is to remove message control button from their current place to another place where they will waste much less space.

@GVG

NO, your message looks like a classic spam-advertising of your web-service.

    1. sorry :frowning: my intention was to do some client-side customizations of Discourse with userstyles - this would work if you don’t need to create a theme. I think your idea is very valid - I just wanted to help you with an mvp - minimum value product - wanted everyone to feel the ux experience with user styles without necessarily having to develop some plugin or theme
    1. I thought about it as it was something I do a lot of websites when I want to customize
    1. The links they post were references to what I researched, read
    1. If that didn’t help you, I apologize. I made a mistake.

@Canapin

  1. I found what you said very interesting, but
  • my intention was to do some client-side customizations of Discourse with userstyles - this would work if you don’t need to create a theme.
  • I just wanted to help with an mvp - minimum value product - wanted everyone to feel the ux experience with user styles without necessarily having to develop some plugin or theme
  • For example, there is this repository called refined github, it’s a place where you post improvements to github - there’s even an extension in browser to make this possible.
    1. My idea would be similar to this idea of this repository. Perhaps, we could create a refined-discourse - a userstyles.css file that contains various visual enhancements like an mvp. So the community can see what is best and what makes sense.
    2. That would be really cool, seeing the adjustments that need to be made even without necessarily having to implement or create a theme or plugin.
    3. Thought of this as I thought the idea of ​​compact messages was really good, I thought of this, we can customize this with userstyles - That would be an easy way
    4. This would be what I call the wizard of oz experience. - You wouldn’t need to spend a lot of time developing your idea if you make a userstyles.css
    • Wizard of Oz experiment: In the field of human–computer interaction, a Wizard of Oz experiment is a research experiment in which subjects interact with a computer system that subjects believe to be autonomous , but which is actually being operated or partially operated by an unseen human being.
      • People could see the improved ux/ui without having to have a theme or plugin
      • For those who use userstyles it may seem like it’s a theme or plugin - but the truth is it’s not
      • this looks like an idea for an mvp - minimal value product
  1. Is this a bad idea?
  • was the last question, if you can be happy with your view or point of view on this
  • I want more feedback ;D

reference

Have you thought about how this would work for longer posts? Then you read it and have to scroll up to like it and scroll down again to read the next post.

2 Likes

Logically agree, it’s a good contra, but not very good, because:

  • Most of all I like style v4 - when message controls appears at the right of the post, so vertically they can be placed “as lower as possible - at message end and screen bottom”. Controls panel can even dynamically vertically fly at each message vertical place most close to current mouse position! :wink: So this is not a problem.
  • Most users who write and read big posts - for answers use the exact text quotes, or always can answer to topic itself - thus “Answer” button is not very necessary.
  • As I say previously about “for mobile” - because of absent of right side free space and touchscreens - main controls buttons still must be displayed always and at standard places - seems it’s the best design for a vertically narrow mobile screens.
  • You always can prefer v3 where main message controls stay at bottom or something similar.

So if you prefer to keep message controls at the bottom - it’s OK, but I still ask to help to minimize all free vertical space above&under them and display controls (except Likes/Edit) only on mouse rollover (for desktops).

1 Like

No need for any third-party stuff to try customizing Discourse without hassle.

You can do it here https://theme-creator.discourse.org/. That’s what it’s made for.

you can create themes from your profile menu: https://theme-creator.discourse.org/my/themes

All the forum components appearances are referenced here: https://theme-creator.discourse.org/styleguide/

And for the post style itself: https://theme-creator.discourse.org/styleguide/organisms/post

CSS modifications from your newly created themes are applied in real-time, no need to reload the pages.

More info:


Can you elaborate? Do you ask us to be creative and suggest other ideas, or write CSS for you?

2 Likes