How To Change CSS Style - More User Readable & Moderation View

FBI

As default, flarum use "grey" color for deleted and awaiting-approved thread lists.
This style is difficult, if you have active forum with many un-approved posts (from spammer or new member).

Well, this tutorial is just an example.
Its my personal style, but it will help moderator and admin eyes to catch more readable parts.

Only 2 variable which are badges change background to a little bit stronger color such "medium-blue" and list background to stronger light-color such "white-smoke" and increase opacity to make title more readable. You may choose other color you like ?

From Beta 6, Login ADMIN - Appearance - Custom Style
Just put or add this css, in to

.DiscussionListItem--hidden {
opacity: 1;
background-color: whitesmoke;
margin: 5px;
border-radius: 10px;}
.Badge {
background: mediumblue;}

Now, you can see this difference between (before and after)

Sample
un-approved post - before

Sample
un-approved post - after

Sample
soft-deleted post - before

Sample
soft-deleted post - after

Enjoy ^-

FBI

Note:

You'll face a problem to see what different of my screenshot above, If you using outdate LCD monitor not IPS or better computer's/laptop's display monitor ?

orpheus

Nice share - thanks ?

FBI

Well,

Even moderator/admin can see those color.
But, maybe the member themselves still fail to catch that color and what the meaning of the "greyed" background. Also, some member/visitor will missed the built-in Flarum's small "Awaiting Approval" notice near the title. And then they thought, the topic has been created, but they never (NEVER) realized that topic is under moderation condition..

So, it is not your fault if want to change the CSS more-more readable sign.

So, background image function will added.

Add or change this from the previous code above:

.DiscussionListItem--unapproved {
opacity: 1;
background-color: whitesmoke;
margin: 5px;
border-radius: 10px;
background-image: url(awaiting.gif);
background-repeat: no-repeat;
background-position: center;
}

You can upload any image as background to assets directory (eg. awaiting.gif).
You may use my simple image below, as your background,

Awaiting

or you can creating more interesting background from Google here ?

Now, the screenshot look like
Sample

SMalt

This improves immensely the overview. Very nice. ?

FBI

One more useful finding,
- flarum will not tell your member, if they're in SUSPEND (banned)
-the only information for suspend's members are reply/new discussion button unavailable to click
- so, this CSS trick will tell you as moderator/admin and banned's members to get more attention

The finding code to modified and place is

.Post--hidden .Post-body {
opacity: 0.5;
background-image: url(removed.jpg);
background-repeat: no-repeat;
background-position: center;
}

don't forget to put removed.jpg images inside /assets directory
you may use this image or finding/creating another one.
removed

Then the screenshoot look like:
Post Sample View, this user their posts was hidden/removed below normal post after click Three-Dots
post

User Profile Sample View, this user see all their posts was hidden/removed after click Three-Dots

FBI

Again, Finding UI that I have to change (my personal taste) ?

As We both know, when you act as user/member or author who start discussion. There wasn't a "eye-catching sign" when your post need to be APPROVAL (under moderation) before displayed. Only small word "awaiting approval" inside 0.5 opacity whole post.

For some user, the lack of sign could make them continue make another posting. They think the posts succesfully created. Actually, not yet..

Well, I decide to trick this by make a small CSS modification.

.Post--unapproved .item-unapproved { font-size: x-large; padding: 5px 15px 5px 15px; border: 3px solid gray; color: red; background-color: yellow; font-variant: small-caps; border-radius: 12px; }

A bigger yellow-box AWAITING APPROVAL font as displaying on screenshot below.
this modification, viewed on both user or moderator...

User View

Eldenroot

Feel free to create a PR or an issue to discuss this. Some of your changes are great, would be nice to see them in Flarum

FBI

Eldenroot Ah, good idea.. Glad to heard that..
I am noobs with Github, but I will try it ?

FBI

Again, this just my personal taste.
As you can see on attachment below, there is words information about time between one to another post. Flarum called post-stream-time-gap (days later, months later, years later....).

User View

In modern discussion, time is important. Before user respon and reply for specific topic, the have to know what the exacly time from previous posts. Yes, the date is in there. But, Time Gaps information could make Flarum different from others.. And users see this "small warning" before commenting.

Well, this is only for big old forum. If you build new forum, I think it is not necessary to have this hack.. ?

Okay,
Here you have to do and add it to custom CSS to make bigger font and attarctive color. You may change others as you like..

.PostStream-timeGap { font-size: 18px; font-style: italic; background-color: cornsilk; opacity: .5; padding-bottom: 5px; padding-top: 5px; padding-left: 15px; }

Now, the mobile version code is here.. (tested on iphone 5)
@media (max-width: 767px){ .PostStream-timeGap { font-size: 18px; font-style: italic; background-color: cornsilk; opacity: .5; } }

Have fun ?