# Homey Web App \[CSS customization\]

**URL:** <https://community.homey.app/t/homey-web-app-css-customization/39682>\
**Category:** Apps\
**Created:** [December 23, 2020, 2:43pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682 "2020-12-23T14:43:00Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![DaneedeKruyff](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/daneedekruyff/32/964_2.png) [@DaneedeKruyff](https://community.homey.app/u/DaneedeKruyff)\
**Post date:** [December 23, 2020, 2:43pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/1 "2020-12-23T14:43:00Z")

</div>

Athom has just released [https://my.homey.app](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](https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha?hl=nl) for example.

(This post is inspired by a [previous post](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765) 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_](https://community.homey.app/t/homey-web-app-css-customization/39682/27)

```auto
/* 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](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/b/c/bc0099edb2fad19209ae4c8ce0099cd2e7c6ab85.png)

After  
 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/4/2/4227e1e4337e98802de940813fd4e33fa77491fd.png)

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

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

```

Before  
 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/e/1/e1d728c0df392929dedaae4f739a16bbcd3c0665.png)

After  
 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/d/2/d2bab1567743139d5328fe2d83d2cf99ccc83567.png)

**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.)

```auto
/* 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](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/5/2/52be1fc6437be2220699b6f2895aca36c57d67de.png)

After

 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/4/0/4007d6e8ee3a76d09723e26ba6abad050d1ab1d8.jpeg)

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:

```auto
div.css-1s02xzt-SpaceReserve {

```

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

---

<div class="post-metadata">

**Author:** ![DaneedeKruyff](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/daneedekruyff/32/964_2.png) [@DaneedeKruyff](https://community.homey.app/u/DaneedeKruyff)\
**Post date:** [December 23, 2020, 3:51pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/2 "2020-12-23T15:51:15Z")

</div>

All changes from the first post:

```auto
/* 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%;
}

```

---

<div class="post-metadata">

**Author:** ![DaneedeKruyff](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/daneedekruyff/32/964_2.png) [@DaneedeKruyff](https://community.homey.app/u/DaneedeKruyff)\
**Post date:** [December 23, 2020, 6:24pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/3 "2020-12-23T18:24:24Z")

</div>

To get the flows to display in a landscape fashion

```auto
/* 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](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/5/2/52be1fc6437be2220699b6f2895aca36c57d67de.png)

After

 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/4/0/4007d6e8ee3a76d09723e26ba6abad050d1ab1d8.jpeg)

---

<div class="post-metadata">

**Author:** ![Jan\_Peeters](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/jan_peeters/32/86660_2.png) [@Jan\_Peeters](https://community.homey.app/u/Jan_Peeters)\
**Post date:** [December 23, 2020, 7:32pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/4 "2020-12-23T19:32:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Pim](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/pim/32/8003_2.png) [@Pim](https://community.homey.app/u/Pim)\
**Post date:** [December 23, 2020, 8:01pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/5 "2020-12-23T20:01:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Dijker](https://avatars.discourse-cdn.com/v4/letter/d/b9bd4f/32.png) [@Dijker](https://community.homey.app/u/Dijker)\
**Post date:** [December 23, 2020, 8:37pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/6 "2020-12-23T20:37:12Z")

</div>

> [@Pim](#):
>
> How can we stream this to another device without the need to insert the password

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.

---

<div class="post-metadata">

**Author:** ![Martijn\_Hoogenbosch](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/martijn_hoogenbosch/32/10647_2.png) [@Martijn\_Hoogenbosch](https://community.homey.app/u/Martijn_Hoogenbosch)\
**Post date:** [December 23, 2020, 8:46pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/7 "2020-12-23T20:46:09Z")

</div>

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](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/a/b/ab74b35c6b778630201e579b27f57fa5ace19a08.png)

---

<div class="post-metadata">

**Author:** ![BSA](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/bsa/32/11685_2.png) [@BSA](https://community.homey.app/u/BSA)\
**Post date:** [December 23, 2020, 10:54pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/8 "2020-12-23T22:54:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![DaneedeKruyff](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/daneedekruyff/32/964_2.png) [@DaneedeKruyff](https://community.homey.app/u/DaneedeKruyff)\
**Post date:** [December 24, 2020, 7:51am UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/9 "2020-12-24T07:51:49Z")

</div>

Try adding this

```auto
.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.

---

<div class="post-metadata">

**Author:** ![Martijn\_Hoogenbosch](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/martijn_hoogenbosch/32/10647_2.png) [@Martijn\_Hoogenbosch](https://community.homey.app/u/Martijn_Hoogenbosch)\
**Post date:** [December 24, 2020, 8:42am UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/10 "2020-12-24T08:42:24Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Rocodamelshekima](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/rocodamelshekima/32/8209_2.png) [@Rocodamelshekima](https://community.homey.app/u/Rocodamelshekima)\
**Post date:** [December 24, 2020, 8:45am UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/11 "2020-12-24T08:45:01Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Martijn\_Hoogenbosch](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/martijn_hoogenbosch/32/10647_2.png) [@Martijn\_Hoogenbosch](https://community.homey.app/u/Martijn_Hoogenbosch)\
**Post date:** [December 24, 2020, 8:57am UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/12 "2020-12-24T08:57:41Z")

</div>

![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/7/8/7862797e11fcc8b4d724d59875590cc31fce4593.jpeg)

---

<div class="post-metadata">

**Author:** ![Jan\_Peeters](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/jan_peeters/32/86660_2.png) [@Jan\_Peeters](https://community.homey.app/u/Jan_Peeters)\
**Post date:** [December 24, 2020, 9:36am UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/13 "2020-12-24T09:36:50Z")

</div>

> [@Martijn\_Hoogenbosch](#):
>
> Margin to the ppwutp section, now it is just fine, thanks!

How do I implement this?

 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/5/d/5d6bc44b2943396ac92b4b48cfec4b6a10d26c62.png)

---

<div class="post-metadata">

**Author:** ![Rocodamelshekima](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/rocodamelshekima/32/8209_2.png) [@Rocodamelshekima](https://community.homey.app/u/Rocodamelshekima)\
**Post date:** [December 24, 2020, 9:48am UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/14 "2020-12-24T09:48:17Z")

</div>

> [@Jan\_Peeters](#):
>
> How do I implement this?

U can find it for Chrome browser [here](https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe).  
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](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/1/b/1bfcf42697ce1a058f7f8e9c41e63ff09c338413.png)  
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!

---

<div class="post-metadata">

**Author:** ![Jan\_Peeters](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/jan_peeters/32/86660_2.png) [@Jan\_Peeters](https://community.homey.app/u/Jan_Peeters)\
**Post date:** [December 24, 2020, 9:58am UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/15 "2020-12-24T09:58:30Z")

</div>

> [@Rocodamelshekima](#):
>
> it 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

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

 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/6/7/6753511b5b6264d6df5bc41b81a12889be3def41.png)

 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/2/f/2fe40ed1090c42ce362cad3f88b8c34c550f9c2b.png)

 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/4/d/4dcfcbb5f79b6fcb2702d125e6b50b5f1973e4c0.png)

---

<div class="post-metadata">

**Author:** ![Rocodamelshekima](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/rocodamelshekima/32/8209_2.png) [@Rocodamelshekima](https://community.homey.app/u/Rocodamelshekima)\
**Post date:** [December 24, 2020, 10:00am UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/16 "2020-12-24T10:00:51Z")

</div>

> [@Jan\_Peeters](#):
>
> Any thoughts?

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.

> [@Jan\_Peeters](#):
>
> Ah! “Stylish” and not “stylebot”.

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

---

<div class="post-metadata">

**Author:** ![Martijn\_Hoogenbosch](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/martijn_hoogenbosch/32/10647_2.png) [@Martijn\_Hoogenbosch](https://community.homey.app/u/Martijn_Hoogenbosch)\
**Post date:** [December 24, 2020, 10:21am UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/17 "2020-12-24T10:21:55Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Jan\_Peeters](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/jan_peeters/32/86660_2.png) [@Jan\_Peeters](https://community.homey.app/u/Jan_Peeters)\
**Post date:** [December 24, 2020, 10:26am UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/18 "2020-12-24T10:26:10Z")

</div>

Worx! Thanx!

---

<div class="post-metadata">

**Author:** ![BSA](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/bsa/32/11685_2.png) [@BSA](https://community.homey.app/u/BSA)\
**Post date:** [December 24, 2020, 9:51pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/19 "2020-12-24T21:51:19Z")

</div>

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🤷

---

<div class="post-metadata">

**Author:** ![Bart\_De\_Worm](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/bart_de_worm/32/9939_2.png) [@Bart\_De\_Worm](https://community.homey.app/u/Bart_De_Worm)\
**Post date:** [December 25, 2020, 12:29pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/20 "2020-12-25T12:29:01Z")

</div>

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

[Next page](https://community.homey.app/t/homey-web-app-css-customization/39682.md?page=2)