I’m sorry but that’s beautiful
1 Like
Until you have to attempt to read the black text on a black background.
1 Like
What are you speaking about? The text on disabled buttons? Whatever you mean, changing colors is the easiest work on the whole project, including font-colors. And when I finished everything it will be even more easy. 90% of the work is studying how I can communicate with the UI-elements without changing a 2nd element.
1 Like
Well I am not going to repeat my counterpoints here, so if you want to, feel free to mention my username when you are done.
1 Like
No worries, I remember everything important. While forums where down I already made some improvements. I will ping you for your opinion when whole theme is done, thx.
@alI: I also already implemented the UI-changes from previous update (audio menu from quick settings). Luckily repos where online for the whole week and I could study that MR. My skills are getting better.
2 Likes
You’re even customizing the drop down settings menu too? I wonder if you can omit certain buttons because I certainly don’t want my smartphone settings to be tampered with. I feel that some settings are best left with authentication requirement.
1 Like
Yes I do, because else it would look incomplete. But I’m not finally sure what you’re trying to say. Can you give me an concrete example?
1 Like
Basically, I am trying to block access to the drop down settings (a.k.a. Quick Settings) menu buttons. With disabled functional buttons, the drop down setting (a.k.a. Quick Settings) menu GUI cannot modify the settings. Any unauthorized access to the menu cannot modify the settings. Of course, it’s probably better (and simpler) for the user session (password) authentication prompt to appear once the drop down settings (a.k.a. Quick Settings) menu is accessed. Then again, it’s even easier if the drop down settings (a.k.a. Quick Settings) menu is entirely disabled until the user session (password) authentication prompt is verification.
An example of such scenarios would be the wifi network connection. I don’t want unauthorized access to the drop down settings (a.k.a. Quick Settings) menu just to tamper with the screen brightness, volume, modem, bluetooth output/input devices, screen rotation, notification alert mode (sound, vibration, and silent mode), and torch mode settings as freely. I have a server role for the device in question. I don’t want people to mess with the required wifi network connection. In fact, I do not want people to know about the wifi network name at all! That would be the very first step to gain access to the wifi network setup of the modem/router. Something must be done about this exposure to risks.
Of course, considering that I would use a lockbox/safe to prevent physical access to the device in question, I usually don’t have to worry about unauthorized access. However, just a moment away would be enough for such access to take a peek at the drop down settings (a.k.a. Quick Settings) menu. I think such design of the drop down settings (a.k.a. Quick Settings) menu needs to be addressed on terms of privacy. I want the drop down settings (a.k.a. Quick Settings) menu to be only enabled after verification of user session (password) authentication prompt.
1 Like
I see. UI-customizations via CSS-manipulations have no power to change functionality.
It can hide the buttons itself or the font (100% transparent colors), but hiding does not disable functionality. An even more invasive way could be to move buttons out of screen space. It won’t be accessible via touch input and nothing can be seen. However, with USB-keyboard it’s possible to access those buttons with some trial and error (because people don’t see what they’re accessing). The danger should not that big since nobody would know about it, but it is not exactly 0%.
Since there is no difference between Top-Panel from lockscreen and after lockscreen, every change via CSS would change both. For example if I change the WLan-Button to transparent, it will be transparent logged out and logged in. The only buttons I could change separately are the lock-button and power-button, because they’re disabled in lockscreen-view (CSS can manipulate disabled state separately, as well as hovered, active and such things).
So for your special need it would be better to fork Phosh and change the code itself. Or maybe better, make a feature request in hope, Purism will add such functionality with access over settings app. It shouldn’t be so hard to implement this, but CSS-hacks are just a dirty and less secure way to solve your needs.
1 Like
Progress update:
Looks even better than before. The green was just the default value green, for demonstration purpose - I know it’s a bad shade.
To change the pink to green I just had to edit one single value. Same can be done with white and black etc. It’s also possible to change single color spaces like “only media player” to another color. All centralized in a single color file (WIP).
Notification lock-screen is my current quest. Media player is already done, notifications creates headaches again and phone calls will create headaches soon (need someone to call me all the time 
). Parallel I will work on those additional widgets. I think they will be easier to modify.
5 Likes
I finally released my work (look at previous post). Sorry that it took that long. A lot of projects, real life and other things that pushed the release away. You can find the whole code on my git repo and install instructions on this page, too.
I predefined 10 colors you can choose. Since I was working with one color and just made “quick applies”, you may find things that look not well. Report them to me and I will update things. Otherwise have fun playing with it. A lot of stuff is easy to customize by your own. I also can add your further customizations to my repo, if you want.
8 Likes
Do you plan on supporting other screen scales?
1 Like
Not yet at least. If someone wants to make that work, I will add it to repository and support it. I rather would take that time to learn how to change things on source code to improve Phosh UI without css (gives new possibilities), especially for landscape which gets not much love. But also not sure if I will do this, because my time is limited and without people who work with me on such a project it’s maybe just to big to realize.
However, I updated my repo (link from previous post) some hours ago. What’s new?
- improved custom color support
- improved default colors (fixed bad contrasts on some elements for all colors - quality should be same for all colors now)
- a lot of bug fixes
- added a free to use high quality background-set
If someone uses this customization, I would be happy to read some feedback. 
(all elements plus free background)
(all default colors)
4 Likes
I really like the colors and themes. More than just a background! I like how there can be element background, text, and border colors (reference: HTML Colors). Maybe you can change the font family? Maybe I am going overboard, but having custom Unicode characters (reference: Miscellaneous Symbols - Wikipedia, Dingbat - Wikipedia, and List of emojis - Wikipedia) might be a good idea. Of course, there could be a image background for sections/buttons?
3 Likes
See my work as basic stuff which can be extended by all such things. Open the file you choose here and change whatever you want. If you want to add a background to a button/box/whatever, just use background-image: [url]; and replace [url] with your local image path. Examples you can find here. I just split it up to give more control, but everything can be done in a single file. Same with fonts: font-family: [family-name];. Look also here for more font-related style code.
If you want to add this to everything on your system (affects also gtk-apps like nautilus), you can write
label {
font-family: [family-name];
}
And replace [family-name] with the actual name you want. Not tested yet, but this should do the job. You can add every font you have installed on your system.
To find the specific elements (for example lockscreen clock or date) I gave some help. First of all categories like “Top-Panel” or “Notifications”, just read the commentaries inside the file. Second a test-color you can use easily. Behind color: (is about font-color) or behind background-color: there is a @[something];. Replace this with /*@[something]*/; and write in front of this @test. The full line would be like this: background-color: @test/*@[something]*/;. Everything between /* */ becomes a commentary and is no code anymore. It’s like a backup to return your change. The @test is usually a half transparent red color (except for red theme) to help debugging elements. It shows easily what change you actually would do at this place, even if multiple elements behind each other are affected.
2 Likes