Donât forget to mention your cool Phosh blog post that shows how to change the GUI interactivelyâŚ
It shows a great way to explore the CSS!
Donât forget to mention your cool Phosh blog post that shows how to change the GUI interactivelyâŚ
It shows a great way to explore the CSS!
I also played a little bit around with backgrounds and will make a follow up tutorial. Why? Because I made a seamless picture for a full-screen-background image.
It just has one downside. On Landscape it doesnât match anymore, because images get scaled to double length each direction. Not sure, but I donât think there is a way to fix this yet.
However, who want to get that advanced background, here is the guide:
First of all you have to find a picture that is big enough (and that will be not easy to find). It has to be 720 x 2832 pixel minimum. You also can try to find something half as big in both dimensions: 360 x 1418 pixel. But it will be a bit less sharp and you have to half all the numbers I will tell. As long as the dimensions are correctly also every other size would be okay, but it will make things even more hard to get it work.
I used stable diffusion to let my graphics card generate that image from my screenshots.
Okay, now we have to edit that gtk.css file from amaroks first post.
/*
* Set a background for the lockscreen.
*/
phosh-lockscreen, .phosh-lockshield {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
url('file:///home/purism/Pictures/MyLockScreenBackground.jpg');
background-size: cover;
background-position: center;
}
/*
* Set a background for the app grid.
*/
phosh-app-grid {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
url('file:///home/purism/Pictures/MyBackground.jpg');
background-size: cover;
background-position: center;
}
/*
* Set a background for the top panel.
*/
phosh-top-panel {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
url('file:///home/purism/Pictures/MyTopPanelBackground.jpg');
background-size: cover;
background-position: center;
}
/*
* Set a background for the app-grid slider.
*/
phosh-home {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
url('file:///home/purism/Pictures/MyHomeBackground.jpg');
background-size: cover;
background-position: center;
}
As before, you are able to change directory and rgba-values. I myself created a folder âBackgroundsâ in ~/Pictures and can setup new images just with replacing them.
That was the easy part. The next part needs precision, time and gimp (or something similar). We have to cut that one big picture into 4 pieces of the exact length and position. Each part has to be 720 x 1440 pixel (doesnât matter how much will be displayed later) or any scale of 1:2 relation. But like I said before, itâs easier to have same numbers as I say.
Not cut parts in following positions:
Top panel image (also top of the image): pixel 1 - 1440
lockscreen image: 1392 - 2832
App-grid slider image: 1416 - 2856
App-grid image: 1446 - 2886
Wait: Did I say the image should be 2832 pixel high and I tell you to cut 2 images even longer than this? No worries, you can fill the bottom with what ever you want, it will be out of the screen and not be displayed. But it is important to get that length for the correct position and scale.
Now just name and copy all images to the directory as you wrote in your script. Finish your setup with one command sudo systemctl restart phosh
(like amarok told before) or just restart your L5.
I guess you also can combine it with the real background (you can change in gnome settings), but I havenât tried yet. But for those who just want the simple backgrounds like in the first tutorial, I also edited 2 other images to fit better to phoshs design (including better view in landscape mode):
Just note that you are very-limited to put any wallpaper on background on mobile otherwise will look very-bad overall, i really recommend do not change the wallpaper in background on phosh to keep the good limited look. I just say⌠and i really nervous for the future phosh & âopensourced-@guido.guntherâ ui desing. @dos
@Ick Could you post pictures in all the sizes you used so we can try it out before doing all the work? (Lazy me)
Man, that is incredible. I need to try that. Thanks!
As you wish. But I created new pictures for that purpose to give you higher quality (and without mistakes). I also made a little mistake about the lockscreen picture (has to be 4 pixel above, I will edit my tutorial). Here the images (CC-BY-SA 4.0):
Full resolution picture, that you can try to cut by yourself:
Top panel image:
Lockscreen image:
App-grid slider image:
App-grid background image:
Have fun using it.
@carlosgonz:
Not sure if you want to say that L5 looks bad with (my) custom backgrounds or if you just think about guido.gunthers transparency backgrounds, that will be released sooner or later. Even if I would create a totally bad result I used it to get more familiar with Linux since I used a Linux PC many years ago (and was less into system as Iâm getting right now).
Thanks.
I had been trying to find the phosh-top-panel
values for the top panel so I could put a background on so thanksđ
The top panel is just the top of the image (first 1440 pixel - or did you use another scale?). More difficult is to find the positions for the other 3 backgrounds. Is it just few pixels higher or lower, you will see it. You also can see a movement from lock-screen to app-screen if there is just a pixel difference in the height. It took me some time to find the right spot (made screenshots and measured plus adjust with gimp).
I guess you didnât see the scrollbar in my tutorial above - there are additional lines to write into gtk.css.
Edit:
Oh wait, I wrote phoshâhome, but it should be phosh-home. If that was the problem for you, than it was my fault.
I will do this fun-looking project to shake the rust off my Linux skill set after 2 decades of tech-burnout recovery! Just being part of getting Linux on mobile and carrying it around in my pocket is exciting to me!
Are you speaking about adding keyboard to seamless background collection? That will be a bit more complicated since it will depend on screen scale i guess. I will give a look into it. Since I already modify my squeekbord (for functionality purpose), I already know how to do it. But there are some issues I cannot solve - for example hit the app search bar will move your background to the top while your keyboard is below. On the other hand, if you open your keyboard in any app the âMyHomeBackground.jpgâ will be below.
And what is âthe drawerâ?
That would be best
Where the open apps sit above the grid
Just a quick hint: I will update the tutorial soon. When I was creating it, I just copied amarokâs text to gtk.css and edited it not that much. More work was done on images itself. But I was reading documents a lot and found a nice way to let the UI know how to display images. That results in not oversized images like before. Why does the HomeBackground need to be over one megapixel, if it could also just be an image with 0,15 megapixel (maximum pixel depends on max screen scaling that is default 200%, because area becomes bigger).
But Iâm not done with everything yet, will optimize a bit more.
That was also my main focus.
Okay, I was not sure. First I have to find that element in code. However, here we have the exact same issue like with keyboard. Below that section is the app grid, above it is the home slider. Maybe we also can use a blurry image. That breaks the seamless design a bit, but could also match very well in it. Another option would be creating a loop image, but that is something for even more experienced people in image editing. Also possible would be some like a fading effect (to background color for example) to break that hard edge.
I have to think about it.
Squeekboard:
Squeekboard in front of top panel (opened board via search bar and drag down the panel):
And the OverviewBackground (yep, in code itâs called âoverviewâ):
But itâs all not optimized yet, so HowTo comes later. If youâre asking how I was able to fit the image perfectly inside the overview: I used my basic knowledge of gimp to manipulate the picture. Some artists could do it much better, but it should be enough for us.
What did you figure out here?
That I have more control about the image position, scaling, attachment etc.
Nice work!
Note that phosh will load lockscreen and overview wallpapers by default in a future version. Some groundwork already landed for 0.28.0 and hereâs the other merge requests:
That shouldnât stop anyone from following this great tutorial and I can understand that everyone ones a colourful lockscreen and overview right now.
I already read your post from one year ago (after I started with modifying ). Nice to hear that it still makes process, looking forward to it. As I said before, those little projects help me to learn more about Linux and its systems.
But if you donât mind, I got a question about transparency:
Does it mean that I will still be able to use the current backgrounds or will the background be removed in a way I cannot change it with even deeper changes? I ask not because I prefer the current system over the next one, but maybe to do some fancy art stuff on top of both.