Improved forum appearance (CSS based)

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 :slight_smile:

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
  • Redesigned topics list (table-like appearance)
  • Redesigned ‘New/updated topic’ notification (moved it to the top, added slow pulsing effect when visible)
  • 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
  • Made additional color highlighting of user name for MikroTik staff and moderators, as it was on the old forum
Some screenshots







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).


How to apply this mod (Firefox)
  • Open about:support page in the browser

  • Find 'Profile Folder' item on the page - it's a path to your profile, open it

  • 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.

For other browsers this mod can be applied using a browser extension: User JavaScript and CSS
Checked with Chrome and Edge only. Probably works with other browsers (including Firefox), if this extension is available for them.

How to apply this mod (other browsers)
  • Install the extension mentioned above
  • Open extension settings
  • Paste https://forum.mikrotik.com/* into URL pattern field on the top
  • You may also add a Rule name (optional, e. g. "MikroTik forum")
  • Paste CSS code into the editor on the right side (read important notice below!)
  • If you concern about privacy, uncheck "Save to cloud" checkbox
  • Click 'Save' button
  • Reopen the forum pages (though, usually it's not even needed)


Most recent version (r13, 25 Aug 2025): | Update post link
Firefox version: mtForumFF_r13.zip (18.5 KB)
Other browsers version: mtForumOther_r13.zip (18.1 KB)

Previous versions:
r12 (15 Aug 2025): userContent_r12.zip (18.5 KB) | Update post link
r11 (04 Aug 2025): userContent_r11.zip (18.1 KB) | Update post link
r10 (31 Jul 2025): userContent_r10.zip (17.7 KB) | Update post link
r9 (21 Jul 2025): userContent_r9.zip (15.6 KB) | Update post link
r8 (10 Jul 2025): userContent_r8.zip (10.9 KB) | Update post link
r7 (08 Jul 2025): userContent_r7.zip (10.3 KB) | Update post link
r6 (03 Jul 2025): userContent_r6.zip (9.3 KB) | Update post link
r5 (02 Jul 2025): userContent_r5.zip (8.4 KB) | Update post link
r4 (28 Jun 2025): userContent_r4.zip (5.6 KB) | Update post link
r3 (24 Jun 2025): userContent_r3.zip (3.2 KB) | Update post link
r2 (22 Jun 2025): userContent_r2.zip (1.3 KB) | Update post link

r1 (22 Jun 2025): userContent_r1.zip (1.0 KB) | Initial release

3 Likes

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.

Yes, there are few modifications of the root properties in the code. I’ve changed highlighting with them.

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…

Made some little fixes and improvements (updated the code in the first post).

  • Fixed thumbnails were treated as attached images and stretched (own bug).
  • Fixed incorrect borders for period selector on ‘Users’ page (own bug).
  • Fixed unread post dot was overlapped with timestamp in compact mode (site bug).
  • Added borders for ‘All categories’ page.

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…


  • Improved separators visibility in posts, left-side menu, and many other places.
  • Added borders on some pages.
  • Added posts separators for compact mode.
  • Fixed incorrect borders on user’s ‘Bookmarks’ page (own bug).
  • Fixed incorrect borders, when bulk select is turned on (own bug).
  • Improved appearance of reply editor form: added borders for the form itself, for input text box and made some adjustments.
  • Added outside frame for attached images in preview panel, fixed frame offset from edges
  • Added borders for quote blocks, category boxes
  • Added borders for different popup menus.
  • Added dashed outlines for mentions, inline code, link counter badges

  • Added clarification labels for latest topics list on ‘All categories’ page. Bare numbers were confusing sometimes.


  • Fixed ‘updated topics’ popup was overlapped with contents (site bug).


  • Improved user menu appearance: added items separators, fixed overlapped buttons and jumping icons.



  • Fixed avatar flair position for compact mode (site bug).


  • Probably forgot to mention something else

It works fine for me, and it helps, thanks.

Using stylem on Palemoon, it evidences a few errors (maybe irrelevant):


199:14 Unknown pseudo-class or pseudo-element ‘has(’.  Ruleset ignored due to bad selector.
238:17 Unknown property ‘scrollbar-color’.  Declaration dropped.
458:20 Unknown property ‘content-visibility’.  Declaration dropped.

Strange.

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.

GRAZIE. BRAVO!

But I also add/keep from my version this:

[...]
	:root {
		--d-max-width: 100% !important;
		--d-sidebar-width: fit-content !important;
		--topic-body-width: 100% !important;
[...]
	}

	p:last-of-type {
		margin-bottom: 0 !important;
	}
	.cooked {
		line-height: unset !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	.post-menu-area {
		margin: 0 0 0.5em 0 !important;
	}
	.latest-topic-list-item {
		padding: 0.5em !important;
	}

	.regular.contents {
		display: grid !important;
		grid-template-columns: 1fr auto !important;
	}
	.post-controls {
		align-items: flex-end !important;
		flex-direction: column-reverse !important;
		justify-content: unset !important;
	}
	#main-outlet-wrapper {
		grid-template-columns: auto 1fr !important;
	}
[...]

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…

Big update. More fixes and improvements.
Updated the code in the first post: Improved visual appearance (CSS based)

  • 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)

  • Added dashed outlines for keyboard shortcuts
  • Added borders for ‘details’ blocks
  • Improved embedded posts expand/collapse buttons appearance
  • 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)


  • Improved avatars appearance in topics list: increased size a little bit and improved latest poster halo contrast and visibility


  • Increased page width limit to 1600 pixels (screen scaling is not taken into account, i. e. for 150% scale this limit will be equal to 2400 pixels).
  • Adjusted some indents

Some ideas from the code, posted by @rextended:

  • 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.

1 Like

Look, I don’t remember where you live, but if you come to Italy in the Tuscany area you are guaranteed a dinner and good wine!..

1 Like

New big update. Reached almost 1200 lines already :face_with_spiral_eyes:

The first post won't be updated anymore, because the code doesn't fit with current characters count limit.
Instead of updating the code in the first post, will attach a ZIP-archive with CSS files to every update post and also add it to the first post for convenience.

Update file: userContent.zip (8.4 KB)


  • Fixed invisible bottom border for attached images, when they were inside grid (own bug)
  • Fixed incorrect borders around tick, when you click 'copy post link' button (own bug)
  • Fixed left-side menu was touching its scrollbar
  • Fixed some values don't fit in 'categories' list latest column (site issue)
  • Fixed some arrows in tooltip windows
  • Fixed header background on users leaderboard page (own bug)
  • Fixed incorrect 'Topic author' label on embedded replies (own bug)
  • Fixed incorrect background on upper embedded posts (own bug)
  • Fixed highlight color for upper embedded posts collapse button
  • Fixed appearance of 'details' blocks in preview panel (site bug)
  • Fixed nested quote block colors
  • Fixed some incorrect highlighting colors (own bug)
  • Fixed barely visible frame around chosen reaction in reaction popup
  • Partially fixed highlighted item bottom corners in some popup menus (site bug)
  • Reduced padding in categories list
  • Some cosmetic fixes (user menu, 'last visited' line in a topic, highlighted post background and other...)
  • Improved appearance of navigation popup window in a topic (added borders, round corners and fixed close button position)
  • Made less intrusive color for post notices
  • Added frame for banners and fixed incorrect dashed frame for images inside them
  • Reduced 'New/updated topics' notification height for compact mode
  • Reduced left-side menu items height for compact mode
  • Swapped colors of active and hovered item on left sidebar for dark theme
  • Added little margin for attached images, so they won't touch, if they go one after another in a row
  • Reduced banner height on 'All categories' page

  • Now regular font is used in topic lists, while unread/unseen/unvisited topics are highlighted with bold font


  • Added arrows to clearly show current topic location path, instead of stupid useless set of words


  • 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


  • Fully changed appearance of time gaps between posts, reduced their size


  • Add borders and background for 'Link copied' popup, it was invisible, if there is a text on background


  • 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.


And consequences of site update on 1 Jul 2025:

  • Fixed 'last visit' line text was invisible and returned own design
  • Fixed huge avatars in post reply, reply form and quote blocks (1.75 times smaller)
  • Fixed too small gap between items on left-side menu, adjusted for different modes
  • Fixed avatars in topics list were shown in 2 rows
  • Fixed alignment mess in the latest topics list
  • Fixed incorrect avatar size on user card
  • Fixed top and bottom embedded posts mess, improved appearance
  • Returned previous color for unread dots and badges. Green badges doesn't look good together with green 'solved' icons and may confuse.
  • Removed 'solved' topic icon mod, because MT made it much better
  • Removed avatar flair fixing code, MT has fixed its position
1 Like

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.


  • Added image information line to attached images, it will be always visible, not only when hovering.

Few little fixes after site update on 1 Jul 2025:

  • Fixed avatar flair size for user cards
  • Fixed “winners” avatars size on users leaderboard page
1 Like

Another update: userContent.zip (10.3 KB)

  • Fixed incorrect separator on time gap, when it’s followed by some action
  • Added commas to user info panel (that arrives when clicking ‘Expand’ button on user’s page)
  • Improved appearance of reply form popups (added borders, fixed close button overlapped with message, adjusted padding)
  • Improved onboarding banner frame visibility
  • Made dashed outlines and fixed background color for hashtags
  • Some cosmetic fixes for reaction buttons
  • Improved highlighting shadow contrast for attached images when hovered, changed transition effect and made it quicker.
  • Further decreased banner height
  • Fixed unstable avatar sizes because of some strange quirks on backend; removed 75% reduction, it looks bad
  • The above fix also automatically fixes the problem with unstable position of vertical lines in embedded posts.
  • Made topic map panels more or less proportional with avatars
  • Reduced topic footer buttons for compact mode
  • Fixed stupid changing of user’s avatar size in top-right corner together with mode, while nearby buttons remain the same
  • Made some size and padding adjustments for different modes in topics list
  • Fixed alignment and shifting issues, when activating bulk selection column
  • Made some little code optimizations
  • Fixed wrong clarification label in the latest topics list, it actually means replies count, not views :man_facepalming:

New update: userContent.zip (10.9 KB)

  • Fixed last visited line was drawn 1px above post notice separator
  • Fixed dual color separator for hidden posts (site bug)
  • Fixed clipped docs link frame on the left in posts (site bug)
  • Fixed no dashed outlines in some links
  • Fixed emoji popup window was invisible in fullscreen reply form (own bug)
  • Fixed avatars size and alignment of ‘who liked’, when you click ‘show more’ button on the post
  • Fixed avatars size on reaction popup panel (own bug)
  • Fixed bulk selection appearance on user’s ‘Bookmarks’ page (site bug)
  • Improved color for popup menu items that are selected and hovered simultaneously
  • Adjusted some padding on ‘All categories’ page
  • Reduced ‘New/updated’ topic notification popup height for all modes
  • Fixed messy variable posts width, seems it has become dependent on content width (MT broke something on 10 Jul 2025).
  • Added borders for graphviz objects
1 Like

Very very thanks.

Can you align, please, the closing } of :root ?
Thanks…

Oh, didn’t notice. Fixed and updated the post :slight_smile:

1 Like