New design for the Linux Mint Forums (2024-03: now a UserCSS ready to use!)

[SebastJava]

2024-03-09 UPDATE: Now re-designed and re-engineered into a user.css.

You can now install it on your computer and try it! You are just a few mouse clicks away from a whole new user experience...

• README !
• new repository

---

I wasn't satisfied with the current look on the https://forums.linuxmint.com. I know I am not the only one thinking this design could be better. I have read quite a few comments about this, and there are some users who also took the time to tweak the CSS and share their work. But I went one big step further. I learned about phpBB, downloaded it, created a new theme following the phpBB recommended methods and structure, tested it on a local server, uploaded it onto the web, etc. It is all done right, on both front end and back end.

Compare:
https://forums.linuxmint.com/index.php (current, official)
https://sebastjava.com/forums/ (complete redesign, temporary showcase until 2024-01-21)
https://github.com/SebastJava/prosilver-lm (source code)

I am convinced these forums needs a big design update. Please read Whats-Wrong-With-Minty

This redesign includes many things, including hidden things such as the user control panel. I had talked to the team before, so I had some constraints on mind.

• Most of those colors are not mine, they are taken from the official https://linuxmint.com/.
• I think the contents font could be made 1 px bigger, but I felt this would not be welcomed, so the text is left unchanged. But at least I replaced the generic "sans-serif" with the Ubuntu font.

---

This is a community we build together. Please be welcoming and open minded.

Well, to tell you the truth, I am getting a bit tired. And I probably won't be able to work seriously before mid-September, anyway. Also, I had a lot of trouble in getting quick feedback from the team, to keep evolving on a daily basis. I just had to go on my own, alone, for the most part. And most of my work got rejected, in the past. And I got many negative feedbacks, from those https://forums.linuxmint.com.

But I am still curious to hear from you. And you could, at least, consider all this work here as one out of many attempts from the forums users to get a refreshed, new look.

But you could go much further than that. This Prosilver-lm is ready to be installed. You could test it for real: Installation instructions.

As I said, I had a lot of trouble in communicating with the team. I would get some feedback, try to answer the various requests, and then get totally ignored for weeks. So, if you find this Prosilver-lm to be interesting but you'd like to bring some changes, you can just fork it and modify it to your needs.

P.S.: I had also invested a lot of my spare time on those LM-forums-signatures

[mjkim0727]

I think Mint Forums Website needs Ubuntu WebFont for another OS.

[SebastJava]

I would tend to agree. My only concern is about the extra time needed to download the fonts. The LM team is currently highly focused on reliability and speed: https://forums.linuxmint.com/viewtopic.php?t=392410

• So, how many extra milliseconds do you think this Ubuntu WebFont would take ?
• We could try to find a replacement for the more generic "Verdana, Helvetica, Arial, sans-serif" as well.
• Would it be possible to easily, safely combine both local and remote options, something like:

h1,h2,.postbody h3,h4,.content,.content p,dl.faq,fieldset.polls,textarea,.message-box textarea,a.forumtitle,a.topictitle {
	font-family: Ubuntu, UbuntuURL=https://fonts.google.com/specimen/Ubuntu?query=Ubuntu, sans-serif; }

I know this doesn't work. I am just asking if we could do something approximately like this.

...Yes, it would be much better if we could make sure we get the same good looking fonts across all platforms. The forums are one of the entrance door for many users. Lots of them are still on Windows, Mac, or on their phone, and some are having problems, and they are trying to get help on the forums. So, it would be really important to have well designed and well working forums.

[Secret-chest]

The site hasn't got webfonts either. But if you use a Google font with swap then it won't delay the display of the page and won't cause server load.

[SebastJava]

This FreshMint is intended to be small. The smaller it is, the easier it is to review. And it's less difficult to manage in future updates. Also, I haven't got any official approval so far, so i want to keep it basic before i move onto the next step.

But i agree with you. It would be better with web fonts. To get the same look across all systems. And to get to choose the right fonts. But i find the base Prosilver theme is very very big. There is a different CSS style for every single element, or almost. There are 18 CSS files, totaling 127.2 KB, in this Prosilver theme. So, if you search for "font-family", you will find there are many CSS selectors affected, and they spread across 9 different CSS files. So... that's quite a few hours of work. It is a bit more complex than expected.

On second thought, it could be made into a separate, independent UserCSS. Something like "FreshMint-fonts.user.css". You can have more than one UserCSS installed and activated, on the same website.

I am not there yet. I have other things to do. I could work on this sometime later.

[SebastJava]

I could just try with a wildcard (*) and see what happens... For all the fonts.

[SebastJava]

The site hasn't got webfonts either.

@Secret-chest
I started testing some web font(s). Full story: Currently testing a font override

[Secret-chest]

What I don't like is that linuxmint is one word. In the logo it works ok, but here it is linuxmint forums which is kinda weird.

[SebastJava]

I was asked to share some common things with the main website.

The logo, there on https://linuxmint.com/, is just one word, all lowercase: "linuxmint". Also, the color gradient is the same, except for the angle (0 deg).

I still think it would be nice and coherent to keep this "linuxmint". But on the blog, it spells "The Linux Mint Blog". There is no standard !? I should think about this later. And create some variations, some real images to show here... Later !

Another quick idea: "linuxmint" in lowercase and "FORUMS" in small caps.

[rcalixte]

When in doubt, opt for simple?

[Secret-chest]

Keep the different forum styling, but stick them together so it becomes linuxmintғᴏʀᴜᴍs

[Secret-chest]

And you could change it back to ubuntu, I feel it feels a lot better with the text and more human and minty.

[SebastJava]

I got a bit tired of that Ubuntu font. I like this https://fonts.google.com/specimen/Exo+2 That's the one i used for that logo. It is very okay to have a font that is a bit different than the rest, for the logo and/or the big titles. And that Exo2 is just a bit different, not too much. To me it feels both "modern" and "classic", combined in the same font.

At the base, I had to search for a new font for technical reasons. I needed some variable weight font. To get the same line weight for both "linuxmint" and "FORUMS". This "FORUMS" is a small caps created by reducing the font size, and then re-adjusting the font weight accordingly. I needed a variable font weight for that. This Exo2 offers infinite font weight possibilities.

[alexeymuranov]

IMO we need not a forum, but some Q&A like StackExchange or AskUbuntu.

[SebastJava]

Sorry, I don't have time for this now. Maybe later. Maybe I should somewhat restart and go one little chunk at a time. To get things approved one by one. Sometime later. Here I wanted to go fast, all on my own, and make tons of changes.

Now my sebastjava.com/forums is off, all erased. I will build another website later. But this work on the future forums is still available at https://github.com/SebastJava/prosilver-lm

Maybe one day I will try to keep it small, and just start with the much obvious, much needed. I would start with:

1. Grouped headerbar and navbar. Those two boxes on top of every page: the logo, the search box, the quick links, the Board index link, etc. All these should be just one box, to make it less "boxy".
2. The "Linux Mint Forums" sitting next to the top logo should be made of professional typography, with good vertical and horizontal alignments. In other words, the logo + "Linux Mint Forums" should be just one SVG file.

Something like this:

And then, I would try to select colors that are not so far from the Linux Mint main website, for everything. The entire page. All the pages. But I would have to look carefully at all the contrasts, for all those little characters, everywhere. Doing things in accordance with https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html Using quick simple tools like https://colorable.jxnblk.com/ Contrasts are more critical on the forums, because the text is so small in there. And, of course, I would have to select colors that are not too vibrant where things gets more serious. The logo and page header can be vibrant, attractive. Like this one here. But the rest should be a bit more "serious".

And, finally, I would try to make things a bit less "boxy". It is currently all made of boxes into boxes into boxes...

P.S.: I did not forget your feedback. I am still thinking about it. Again, I might restart later. Or just go ahead and create your own! This is all long overdue. Every time I look at https://forums.linuxmint.com/ it is very obvious to me that those forums need a "design update". I mean, much more than just updating the logo as was done recently. At least they finally did that.

[SebastJava]

I'm thinking of starting from scratch with a new approach.

My process was complex and rigid. I had my own phpBB demo on the web, and there was only one possible version.

I plan to make it less complex and more flexible. I suppose you would prefer small CSS additions, to make updates less complex and hazardous.

• A modular approach: headerbar+navbar, colors, quotes, codeblocks, etc.
• 2 or 3 versions for each module, in small CSS blocks, accompanied by simple screenshots.
• Provide a real daily experience on https://forums.linuxmint.com/ You could get an automatic CSS override using your Firefox's Web Developer Tools (Ctrl+Shift+I) or use an add-on like Stylus or CSS Override. And you could also do your own experiments...

I don't have time for that right now. That's for sometime later this year...

[SebastJava]

What I don't like is that "linuxmint" is one word. — @Secret-chest
Why not stick with "Linux Mint Forums" that the original has? — @rcalixte

The main website was done not so long ago and does it that way: "linuxmint". Sometimes, we need to stay coherent.

This "linuxmint", with no space and all lower case, was @clefebvre's idea, as i remember. I kind of like it. It echoes what you usually find "under the hood". And it also reflects a certain "low profile" attitude in the community...

Meanwhile, as a designer, I am not always so "low profile". Sometimes I can change the rules, to draw attention...

before:

after:

P.S.: SOMETHING BIG is coming up. Probably sometime later this week...

[anaximeno]

It's looking great!

[SebastJava]

@clefebvre @xenopeek

FreshMint

A new theme for the Linux Mint Forums!
Not just screenshots... Not just a showcase...

Start using this new theme today and improve your user experience!

It works on Firefox and Chrome.
It works on your computer.
It works on Android too.

And it would work on all browsers and all systems if the Linux Mint team chose to install this FreshMint on their servers...

Everything got redesigned

The page header is the first thing people will see and thus it is very important. Extra care was taken on this page header. But there is much more than this here. Everything was looked at and readjusted.

• a communicative design
• sufficient contrasts
• colors that echo the main website

And then the extra coding was reduced to very little. So it shouldn't pose too much trouble when the time comes to update the phpBB engine.

Installation: Stylus extension + UserCSS

Once installed, you will be able to test all the forums on a daily basis. And there's more...

You can, with a click of the mouse, change the colors as you wish!
Read all about this new FreshMint

[SebastJava]

Installation

Userstyle manager

First, you need a userstyle manager that supports installing UserCSS.

• Stylus for Firefox or Chrome (recommended).
• xStyle for Firefox or Chrome.

UserCSS file

Next, open FreshMint.user.css here in your web browser.

Stylus will then open a new tab showing some basic information & options:

• Click on the "Install style" button.
• Click on the "Check for updates" checkbox.

Once installed, you will be redirected to Stylus editor page with the newly installed/updated UserCSS loaded. Close this if you don't want or need to modify the style.

Now you can see and feel your new Linux Mint Forums!

[SebastJava]

I started working on a dark variant: FreshMint-dark...
First, I should add more variables, and make all those variable names more clear and concise.

[SebastJava]

@clefebvre @xenopeek

FreshMint.user.css and FreshMint-dark.user.css

version 2.2.0

Installation

Userstyle manager

First, you need a userstyle manager that supports installing UserCSS.

• Stylus for Firefox or Chrome (recommended).

UserCSS file

Next, open FreshMint.user.css or FreshMint-dark.user.css here in your web browser.

Stylus will then open a new tab showing some basic information & options:

• Click on the "Install style" button.
• Click on the "Check for updates" checkbox.

Once installed, you will be redirected to Stylus editor page with the newly installed/updated UserCSS loaded. Close this if you don't want or need to modify the style.

Now you can see and feel your new Linux Mint Forums!

Experiment with your own colors in a mouse click

README and learn all about it. Or check the source code.

[SebastJava]

version 2.3.0:

• FreshMint.user.css: button colors
• FreshMint-dark.user.css: rules colors

README and learn all about it. Or check the source code.

Also available on:
https://userstyles.world/style/14785/freshmint
https://userstyles.world/style/15109/freshmint-dark

[SebastJava]

@xenopeek Please don't be offended if I put all team member names in green. That's because it didn't work at all with FreshMint-dark. And then, I admit that I didn't like seeing colors other than black, white, gray, green and blue.

[SebastJava]

Those colors are hard coded in the phpBB. I could change them easily if I had access to your servers. Else, I could only make them all green, in these user.css.

[SebastJava]

The forums.linuxmint.com/images/ranks/*.gif are bothering me. I am pretty sure you agree this orange color doesn't fit here. I made new ones. Two different colors for you to choose from. My custom, preferred one is #0ABA7F. I also included a #69B53F version. You might prefer this second choice, this #69B53F is copied from the top-left corner of the top banner on the main https://linuxmint.com/ Else, just tell me the exact #HEX value you want.

So, could we please replace those 12 ranks images with some green ones? Here are my current offers. Ready to upload. PNG and GIF versions included:
https://github.com/SebastJava/FreshMint/tree/main/ranks-0ABA7F
https://github.com/SebastJava/FreshMint/tree/main/ranks-69B53F

[SebastJava]

version 2.4.0 changelog:

• FreshMint.user.css: "button BG hover", "button BG active" "#69B53F"
• FreshMint.user.css: inline code and codebox colors
• FreshMint-dark.user.css: inline code and codebox colors

README and learn all about it.

Also available on:
https://userstyles.world/style/14785/freshmint
https://userstyles.world/style/15109/freshmint-dark

[SebastJava]

Post Scriptum: I'm on vacation right now. Thank you for your positive comments. It is much appreciated and it is always a pleasure to answer you. Do not hesitate if you have any other questions or comments. I will respond promptly, if needed. But, if you have issues or feature requests, it won't be done right away. I am taking at least 30 days of vacation...

[SebastJava]

version 2.5.0 changelog:

• FreshMint.user.css: button colors (+gradients)
• page-header height = 150 px (±1 px)
• rules BG color: #E61B4E
• "unread" icons color: #69B53F
• etc.

The two first images on top of this page will now always show the latest screenshots.

README and learn all about this FreshMint.

Also available on:
https://userstyles.world/style/14785/freshmint
https://userstyles.world/style/15109/freshmint-dark

[SebastJava]

version 2.6.0 changelog:

• rules styled like quotes (12px border on the left and subtle background color)

The two first images on top of this page will now always show the latest screenshots.

FreshMint (light) is the main and most refined version.
FreshMint-dark is a bit more experimental.

README and learn all about this FreshMint.

Also available on:
https://userstyles.world/style/14785/freshmint
https://userstyles.world/style/15109/freshmint-dark

[SebastJava]

version 2.6.1 changelog:

• 4 square corners on rules box
• inline-code border color and CSS order

The two first images on top of this page will now always show the latest screenshots.

FreshMint (light) is the main and most refined version.
FreshMint-dark is a bit more experimental.

README and learn all about this FreshMint.

Also available on:
https://userstyles.world/style/14785/freshmint
https://userstyles.world/style/15109/freshmint-dark

[SebastJava]

FreshMint-dark version 3.1.0

codename: "éclipse"

• Darker, more bluish colors. These blue-green tones provide better contrast and are less stressful on the eyes.
• Everything is now 100% dark, including the posting pages.
• Nice looking gray buttons.
• Tinted icons to reduce glare and enhance meaning.

The two first images on top of this page will now always show the latest screenshots.

README and learn all about this FreshMint.

Also available on:
https://userstyles.world/style/14785/freshmint
https://userstyles.world/style/15109/freshmint-dark

[SebastJava]

FreshMint and FreshMint-dark version 3.2.0

• Darker, more bluish colors on the light version. These blue-green tones provide better contrast and are less stressful on the eyes.
• Flat colors on page header and forum categories.
• Background image on page header.

The two first images on OP will now always show the latest screenshots.

README for quick and easy installation instructions and more. This Readme file is now completely "unfolded", no longer having hidden details sections.

Also available on:
https://userstyles.world/style/14785/freshmint
https://userstyles.world/style/15109/freshmint-dark