Nothing. It is fine as is.
1 Like
What are all these transparancies doing? I have only two set for the lock screen and the app grid backgrounds (as shown in the original phosh backgroundcustomization tutorial.)
1 Like
You’re speaking about the linear-gradient? The picture itself is without all those black lines. The “black” is the default background color (you also could change with background-color: white; for example) and the transparencies make the picture transparent to show the background color behind. That results in the gradient black lines on the picture above.
Edit @ASwyD2:
I will post some day, mine not finished yet.
2 Likes
Ok, but which rgba value controls what?
Why are there two rgba’s in the tutorial backgrounds, and five or six in yours?
1 Like
You need minimum 2 rgba-values. One for top and one for bottom. The distance between all values are the same. So if you have 7 values, first will be top (0%), last will be bottom (100%) and the rest will be 16.7%, 33.3% 50%, 66.7% and 83.3%. It’s up to you how many you want to use. It interpolates only between neighbor points.
And btw: I explained it, because I also know, but ASwyD2 have it done.
2 Likes
The (.9) in the middle makes the line in the middle; the more it has, the more you can do stuff with it.
So if ‘you’ want you can make lines where ever you want using multiple rgba values
Edit: see @Ick 's customizations here
It explains more of what I am trying to tell you 
1 Like
Thanks. It had been a while since I worked with css’s. I’m back now.
Nice to be able to set these things this way.
2 Likes
Is there an easy (cli) way to check the installed phosh version?
1 Like
Studying this page (and others) for some weeks (when I have time for). It just seams that we cannot use conditions for our customizations, which is sad because I would like to change things between landscape and portrait mode.
However, something I found out is to make this code more easy:
And here my code:
background-image: linear-gradient(rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.0) 33.3%, rgba(0, 0, 0, 0.9) 50%, rgba(0, 0, 0, 0.0) 66.7%, rgba(0, 0, 0, 0.0) 83.3%, rgba(0, 0, 0, 1.0) 100%)
url('file:///home/purism/Pictures/Backgrounds/MyTopPanelBackground.jpg');
It’s not just 1 rgba less, but also gives the possibility to adjust the lines to something irregular. If I want to push up the black mid lane, I just need to lower the numbers 33.3%, 50% and 66.7% with same value. If I want to stretch the gradient, I need to decrease 33.3% and increase 66.7%. It’s much more flexible this way.
It’s already a powerful tool to create a lot of cool themes. But to get really useful we need conditions like on Firefox custom *.css files.
2 Likes
I see what you mean. And there are more interesting options - such as circular gradients.
For now, I will stick to two values for a simple gradient. But, no doubt, I will do some more customization along the way (like fonts and stuff).
2 Likes
Nice👍 Thanks for the input.
1 Like
I was working further and tried something more fancy. First of all a result that’s not final:
I put the keypad on the left side and a bit more down to unlock my device more easily with my left hand. That feels much better in my opinion.
But I’ve got a problem. The text-label “Zugangscode eingeben” cannot be chance without changing other things, too. I was looking for hours inside code and inside documentations, tried to find solutions by other people, but it seems to be a problem of the code itself. Without a name="name" property or a style class it seems I have no access to this element. I also tried to do it via label ID, but didn’t find any way.
If someone knows more, please tell me. Otherwise I think the code have to be updated and I’m not sure if this will ever happens.
2 Likes
Ha! Got it!
There is a “work around” way to get access to (hopefully) every element of UI. I got access to the text-label from above screenshot by this line:
phosh-lockscreen box:nth-child(2) > label:nth-child(1)
And behind that the typical modifications.
It’s a bit tricky because it’s not clear what child I need. Sometimes I get 2 children modified. That was the reason I had to go a longer way for the label above. Without box-child defined I got 2 labels modified, without label-child defined I get 2 boxes modified, but the combination of both (used inner hierarchy) gave me access to the right element.
There is still a lot to do, but now it will become much easier.
5 Likes
You are so going so much deeper than I can at the present and I applaud you for it. Thank you👍
2 Likes
Oh, new user interface changes! Now the interface and background image can align in a more transitive or composite design.
Still, I have some concerns about messing with the user interface. We could actually mess up on something so backup files and installation is a good idea. Maybe we can put a development and stable stage for these user interface customizations?
Once the work is stable enough, don’t forget to add the code somewhere!
3 Likes
That’s one of the reasons I didn’t share any code yet. Especially the “padding” and “margin” values (as well as the transparent color) can be dangerous as you see on screenshot above. I could not push any button to unlock my device. Luckily I have an usb-keyboard I could plug in to unlock it.
I backup on my SD-card, so even if I have to reflash the phone, I can restore everything.
I finished the login-screen and really like the result. It was ugly to have free unused space after I moved the keypad to the left, so I worked on the double lined borders (was not easy that everything fits with exact pixel precision). Another way would be to add an additional background image that gives an even more fancy border or something else. The Cycle around the key “9” is a touch feedback. Wrong passwords will be marked as red dots for a second.
Next I want to redesign the notification and media player widgets for lock-screen and quick-settings-screen. Quick settings itself are already nearly done, but want to share all in one.
No worries, I will. And it also will be easy to change colors for everything on an extra file (easy to change color-themes with just linking to another color-file).
2 Likes
I’m sorry but that’s beautiful
2 Likes
Until you have to attempt to read the black text on a black background.
1 Like