Homey Web App [CSS customization]

Apps
1

Athom has just released https://my.homey.app as a Beta. It’s obviously impossible to make it so everybody likes it, but luckily it’s possible to inject some custom CSS so you can adjust it to your needs.

To do this you need an extension for you browser, depending on your favourite browser there are some options like StyleBot for example.

(This post is inspired by a previous post made for flow.homey.app by @Dijker)

Let’s start of with a bit of custom css that will make the column with zone and flow names a bit wider and move the contents a bit. Thanks to @matrover for finding the right attribute to change!

Wider selection column

This is no longer needed: @Henk_Renting: “Athom just released an update where you can resize the sidebar” Read the post

/* Moves the content (flows and devices) to the right so wider column doesn't overlap */
.css-1s02xzt-SpaceReserve {
	min-width: calc( 380px + var(--nav-items-width) + var(--nav-margin) * 2 );
}
/* Make selection column wider */
.css-2pyu93-SubNavWrapper {
    min-width: calc(280px + var(--nav-items-width) + var(--nav-margin) * 2);
}

Before
image

After
image

To make very long flow names readable
(Thanks to @Martijn_Hoogenbosch for finding the new style names after Athom’s changes in early march)

/* Make long flow names readable*/
.css-huzgua-sc-ItemLabel {
    white-space: pre-wrap;
}

Before
image

After
image

To get the flows to display in a landscape fashion
(Thanks to @Adrian_Rockall for finding the new style names after Athom’s changes in early march, Thanks to @Rocodamelshekima for the changes in April.)

/* Show flows in landscape */
.css-14scrpd {
    width: 100%;
  display: flex;    
}
.css-1ab8s7t {
    width: 33%;
}

/* Adjust flowcards width for landcape view */
.css-2gc5z4  {
  width: 95%;
}

.css-1rtbrz0 {
  width: 95%;
}


.css-1iuu5lg {
  width: 95%;
}

.css-vvsplf {
  width: 95%;    
}

Before

image
image1828×970 62.5 KB

After

image
image1828×970 80.7 KB

The examples above are done in Edge (for MacOS), for Chrome it may be required to use a div. in front of the actual style(s), like:

div.css-1s02xzt-SpaceReserve {

Remember, the Web App is still in Beta, Athom may make some changes causing these css change to stop working!

15 Likes
2

All changes from the first post:

/* Moves the content (flows and devices) to the right so wider column doesn't overlap */ 
.css-1s02xzt-SpaceReserve {
	min-width: calc( 380px + var(--nav-items-width) + var(--nav-margin) * 2 );
}
/* Make selection column wider */
.css-2pyu93-SubNavWrapper {
    min-width: calc(280px + var(--nav-items-width) + var(--nav-margin) * 2);
}

/* Make long flow names readable*/
.css-huzgua-sc-ItemLabel {
    white-space: pre-wrap;
}

/* Show flows in landscape */
.css-1hu8qec-sc-Center {
    width: 100%;
  display: flex;    
}
.css-ppwutp-Section {
    width: 33%;
}

/* Adjust flowcards width for landcape view */
.css-7hhj7-CardContainer {
  width: 95%;
}
.css-l8ltv8-CardContainer-DraggableFlowCard {
  width: 95%;
}
.css-x1hjk3-CardContainer-DraggableFlowCard {
  width: 95%;
}
8 Likes
3

To get the flows to display in a landscape fashion

/* Show flows in landscape */
.css-14scrpd {
    width: 100%;
  display: flex;    
}
.css-1ab8s7t {
    width: 33%;
}

/* Adjust flowcards width for landcape view */
.css-2gc5z4  {
  width: 95%;
}

.css-1rtbrz0 {
  width: 95%;
}


.css-1iuu5lg {
  width: 95%;
}

.css-vvsplf {
  width: 95%;    
}

Before

image
image1828×970 62.5 KB

After

image
image1828×970 80.7 KB

7 Likes
4

Can someone explain how to use the code in stylebot… for a noob?
Br,
G.

5

How can we stream this to another device without the need to insert the password (Google nest)

1 Like
6

Pretty sure it isn’t intended for that, it is intended as a desktop Web-App for managing like you do on the mobile now.

7

Mmmm… When scaled to 75% it messes the up the boxes a bit. I scale to 75% because i’ve only got a 12,1" screen but with high res. See:

image
image2031×612 38.6 KB

8

Are any of these CSS editors available for any browsers to be used on an Android?

9

Try adding this

.css-1hmn46n-CardContainer {
    width: 95%;
}

.css-1x480y1-CardContainer-DraggableFlowCard {
    width: 95%;    
}

.css-xdp74o-CardContainer-DraggableFlowCard {
    width: 95%;    
}

This should make the flowcharts better fit the column they’re in.

1 Like
10

Tnx, based on @Rocodamelshekima suggestion i’ve also added:

.css-ppwutp-Section {
    width: 33%;
    margin: 30px 40px;
}

Margin to the ppwutp section, now it is just fine, thanks!

1 Like
11

A pic with thumbs up or it didn’t happen! :joy:

12

image
image1362×2424 637 KB

3 Likes
13

How do I implement this?

image
image1910×997 97.8 KB

14

U can find it for Chrome browser here.
When it is added to Chrome browser u can hit the icon in the top right corner of ur browser.

chrome_2020-12-24_10-48-55
In the pop-up hit the 3 dots in the top right corner and check “create new style”.
In the top left corner give it a name, paste the code in the middle screen and hit the save button in the left menu. Then go back to the web app and be amazed!

2 Likes
15

Ah! “Stylish” and not “stylebot”.
Still doing something wrong though!
Any thoughts?

image
image1905×558 38.6 KB

image
image1913×533 35.7 KB

image
image1916×1020 89.3 KB

16

U just picked 1 of the many codes posted here. Just hit “nog een sectie toevoegen” and paste all the codes u see in this topic. Don’t forget to hit the save button.
When u paste all the codes seperately in new sections it’s easy for u to delete one of them or add one without fracking up the others.

Stylish is just one of many extentions and i use Stylish so…

17

I’m using stylebot within Chrome.

Just click the S button, then Open Stylebot (all on the page you want to change. So you already need to be on the flow page).

And just paste the code @DaneedeKruyff has provided in the first post.

And instantly you’ll see the page change. Should be really simple.

4 Likes
18

Worx! Thanx!

19

In case I’m not the only one wondering about using in on Android:
As far as I could find, Yandex Browser seems to be the only one working. Got Stylebot on there.
Sort of works on Kiwi browser as well, but it fail as I open a flow, page goes white🤷

1 Like
20

I’ve the same problem! :thinking:
Or what kind of touchscreens can I use?