Staff notices positioning is ambiguous

UX
7

(I came across this old post while revisiting some other Staff notice confusion…)

I’ve always thought the placement of Staff Notices was potentially ambiguous. Since themes can handle things like colors, borders, and dividers differently, it’s probably hard to solve that way.

An alternative that can be applied globally to all post notices today is some custom CSS to insert a Unicode arrow, either before the avatar:

image

CSS: before avatar 
.post-notice::before {
  content: '🡇';
}

(Or perhaps more properly):

.post-notice::before {
  content: " \1F847";
}

…or before the text content:

image

CSS: before text 
.post-notice p::before {
  content: " \1F847";
  margin-right: .5rem;
}

Ooo — here’s a trick to change the color:

image

CSS: change color 
.post-notice p::before {
  content: " \1F847\fe0e";
  color: yellow;
  margin-right: .5rem;
}

(Appending \fe0e to any Unicode character renders a text version that accepts color. Reference.)

And I decided that the downward arrow doesn’t look right for a notice on the main topic, since it’s more obviously leading the topic. This CSS replaces the arrow with a bullet just for the first post:

image

CSS: different for main topic 
#post_1 .post-notice p::before {
  content: " \29BF\fe0e";
  color: yellow;
  margin-right: .5rem;
}
1 Like