As a hater of stupid flat designs with low contrast and without borders, wrote some CSS code to improve forum appearance. May be someone will like it too
Brief summarized list of changes
Added outlines and separators wherever possible - for buttons, menus, topics, popups, dialogs, etc.
Improved many colors, that were almost invisible or too bright
Improved shadow/glow visibility for dialogs, popups, hovered attached images
Fixed lots of issues with sizes, gaps, distances, alignment, overlapping, clipping, etc. and adjusted everything for different modes
Revised appearance of some forms and popups
Made smooth hover transition effect for all buttons, menus, etc.
Made round edges for some elements
Added dashed outlines for mentions, inline code, link counter badges and other elements inside posts
Added outside frame for attached images to distinguish them from background content
Added image information line to attached images, it will be always visible, not only when hovering. For old posts (from old forum) and some small images it’s not available.
Replaced stupid relative time with timestamps where possible
Fully changed appearance of time gaps between posts, reduced their size
Increased page width with limit of 1600px (on 100% scale)
Fixed too wide area of scrolling timeline to avoid erroneous scrolling, when clicking on whitespace far from timeline itself (site issue); additionally, added vertical line on the right side to clearly show, where the scrolling area ends
In post edit history window made header always visible, so you don’t have to scroll the whole post up if you need to see a date or switch a view
Restored ‘posters’, ‘replies’ and ‘views’ columns for compact mode
Added clarification labels for latest topics list on ‘All categories’ page - bare numbers are meaningless and confusing
Added punctuation in some places instead of stupid unreadable set of words (e. g. colons for description labels in user card, colons in user info panel, arrows in topic path)
Improved accepted solution appearance and made it more noticable
Added background highlighting of solution posts and topic author’s posts (+ added ‘Topic author’ label near nickname)
Unread/unseen/unvisited topics are highlighted with bold font, while read topics have regular font
Improved avatars appearance in topics list: improved latest poster halo contrast and visibility, removed avatars overlapping
Changed design of ‘last visit’ separator in topics list and between posts
For detailed list of fixes, changes and overall progress read update posts below.
Any suggestions for further improvements are welcome, don’t hesitate to propose anything or report about any artifacts or issues (even unsignificant).
Create chrome folder in your profile path and place unpacked *.css files from archive inside it (in r1-r9 versions there was only one *.css file, starting from r10 there are 2 files)
Open about:config page in the browser (you may be asked to proceed entering configuration page)
Find toolkit.legacyUserProfileCustomizations.stylesheets parameter and change it to true
Additionally find and change layout.css.style-queries.enabled parameter to true for correct appearance of quote blocks
Restart browser
I’m not aware how (if it’s possible) to apply custom CSS styling in other browsers. If you know the ways, let me know and I will add instructions for them too.
check out the “css custom properties”. As far as I saw Discourse theme has a lot of custom properties defined on root element (for colors and widths). Modify these whenever possible.
As far as I understand, there is no way to trim strings in CSS? Was trying to make timestamps for topics list, but there are 2 dates and it’s required to trim them somehow…
More improvements. Updated the code in the first post.
Made consistent colors for all borders (using --primary-medium color variable)
Reduced code size by combining selector and properties where possible
Figured out, how to change colors based on current theme, so dark theme highlighting colors should become better now. Dark theme colors were absolutely crazy. Same color for background, hovered item and selected item. I. e. no difference AT ALL. As I said in another topic, with these stupid designs we will have white text on white background some day…
has is used to draw outside frame for attached images and it checks, if lightbox class contains image, if yes, then it draws a frame. There are also images without lighbox wrapper and it’s used to check them either.
scrollbar-color is used to make scrollbars in reply editor form more visible content-visibility is used to hide original ‘tick’ icon for ‘Solved’ topics
I was doing everything in Firefox, may be some other platforms don’t support something…
Palemoon Is actually more or less Firefox (though it is forked, so not exactly the same)
Likely it is just the Stylem add-on syntax checking, in any case your css code seems to be working overall.
Tried your modifications, will probably add a few of them.
Though, personally I don’t like full-wide layout, it’s probably good for smaller screens, but not for my big-sized screen. May be better to make some width limit in the future, idk yet. I. e. on some Full-HD screen it will be full-wide, but for larger resolution leave blanks…
And it’s a little bit messy. Is it supposed to be like that or these are issues?
The changes are not mine, but I put them back because I use 1920×1080 and this pushes the menus to the side and keeps the discussion centered, instead of having everything centered with sidebars.
But this is a personal preference, I really appreciate it, and thank you so much, for what you did.
For me it’s a practical thing:
I’d rather have multiple 1920x1080 screens than one big panoramic one, which if it breaks you can’t see anything… and it costs a lot more…
Simplified separators visibility improvement mechanism, removed some unneeded code
Fixed ugly overlapped appearance of ‘last visit’ line in topics list for compact and default modes, improved overall appearance of this line for both topics list and posts list (still has some alignment issues, will fix later)
Fixed crossing separators for embedded posts (own bug)
Fixed double separators above first reply in a topic (own bug)
Fixed some categories were without borders (own bug)
Fixed borders for time gaps between posts (own bug)
Fixed no dashed outlines around inline code in some cases (own bug)
Fixed contents was touching scrollbar in reply preview panel
Fixed quote blocks title padding in reply preview panel
Fixed mode selection menu was overlapped by reply form (site bug)
Fixed unneeded borders on quote popup menu (own bug)
Fixed incorrect borders on ‘Deselect all’ button in categories edit window (own bug)
Reduced post actions buttons height for compact mode
Improved visibility of ‘download’ and ‘original image’ buttons in fullscreen image viewer
Improved accepted solution appearance and made it more noticable
Revised sticky avatar mechanism, allows to correctly fill post body and makes 2 following improvements possible:
– Added highlighting of solution post
– Added highlighting of topic author’s posts (+ added ‘Topic author’ label near nickname)
Reduced padding in the latest topics list (but only top and bottom)
Increased vertical text density
Reduced spacing between post contents and actions buttons. Changed values for each mode.
Some fixes because of site update on Jun 27, 2025:
Fixed borders on reactions button
Added borders for reactions popups
Fixed ‘pinned’ icon was touching the line under the first post in cozy and compact modes (not sure, if this appeared after update, but didn’t see this earlier)
Improved user card popup window
– Fixed no frame in window corners (site bug), improved frame visibility
– Added colons to description labels and changed their color, because bare almost same color raw text without any punctuation is afwul and unreadable
Improved users leadership page
– Added borders
– Fixed no spacing between header and first item (site bug)
– Removed strange header background in light theme (also site bug?)
– Fixed header underline, that had a black color and doesn’t take dark theme into account
– Reduced distance between items, as they are wasting too much space
Probably forgot to mention something else, cause there are lots of changes.
Improved topics list appearance
– Restored posters, replies and views columns for compact mode
– Reduced font size for compact mode
– Removed topic excerpt for compact mode
– Got rid of messy misaligned text
In post edit history window made header with user name, date and view switching always visible, so you don’t have to scroll the whole post up if you need to see a date or switch a view. Also changed stupid relative date of revision to normal timestamp.
Some additional fixes and improvements: userContent.zip (9.3 KB)
Fixed incorrect removal of separator above avatar for posts with expanded bottom embedded replies (own bug)
Fixed abnormal vertical lines drawing in bottom embedded replies, when there are multiple replies (own bug)
Fixed reaction counter was causing bigger height of action buttons
Fixed close button position on action success popup
Fixed time gap was overlapped with ‘last visit’ line, if it goes after it.
Fixed incorrect dashed frame for images inside banners (again, wasn’t actually fixed in previous update)
Removed left padding for replies button
Added topic location path arrow to the topic title when scrolled down
Made bold nickname and normal timestamps on user groups activity page
Some cosmetic fixes on users leaderboard page.
Reduced banner height even more for compact mode
Changed ‘last visit’ line font color to almost white for dark theme, should be softer
Aligned ‘show replies’ button with actions buttons, made them same height
Fixed too wide area of scrolling timeline to avoid erroneous scrolling, when clicking on whitespace far from timeline itself (site issue). Additionally, added vertical line on the right side to clearly show, where the scrolling area ends.
