# Homey Flow for Web - three Column view \[CSS customization\]

**URL:** <https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765>\
**Category:** Developers\
**Created:** [February 26, 2019, 9:18pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765 "2019-02-26T21:18:05Z")\
**Posts on this page:** 20\
**Page:** 3

<div class="post-metadata">

**Author:** ![FantomNotaBene](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/fantomnotabene/32/129_2.png) [@FantomNotaBene](https://community.homey.app/u/FantomNotaBene)\
**Post date:** [March 13, 2019, 10:50am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/41 "2019-03-13T10:50:49Z")

</div>

Awesome! Thank you so much!

---

<div class="post-metadata">

**Author:** ![Stefan\_Gorissen](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/stefan_gorissen/32/7101_2.png) [@Stefan\_Gorissen](https://community.homey.app/u/Stefan_Gorissen)\
**Post date:** [March 14, 2019, 11:04am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/42 "2019-03-14T11:04:11Z")

</div>

I think I’m doing something wrong. I can’t get this to work.

If I insert the code into “Stylish” I get the following errors:

> Code 1  
> warning 7 : 5 Expected (inline | block | list-item | inline-block | table | inline-table | table-row-group | table…  
> warning 8 : 5 Unknown property ‘flex-wrap’.  
> warning 11 : 5 Unknown property ‘flex’.  
> warning 14 : 5 Unknown property ‘flex’.  
> warning 19 : 5 Unknown property ‘flex’.

Can somebody point me in the right direction?

---

<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:** [March 14, 2019, 3:48pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/43 "2019-03-14T15:48:12Z")

</div>

For what I have seen Stylish was not updated and therefore generated errors for valid properties  
I switched to CSS (on Chrome for Windows)  
(Advised by some CSS Guru’s )

---

<div class="post-metadata">

**Author:** ![Stefan\_Gorissen](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/stefan_gorissen/32/7101_2.png) [@Stefan\_Gorissen](https://community.homey.app/u/Stefan_Gorissen)\
**Post date:** [March 14, 2019, 4:08pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/44 "2019-03-14T16:08:22Z")

</div>

Thanks! It works like a charm!

---

<div class="post-metadata">

**Author:** ![Erik\_M\_Madsen](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/erik_m_madsen/32/18191_2.png) [@Erik\_M\_Madsen](https://community.homey.app/u/Erik_M_Madsen)\
**Post date:** [March 15, 2019, 7:54am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/45 "2019-03-15T07:54:01Z")

</div>

> [@Dijker](#):
>
> I switched to CSS

You got a link?

Stylish is not validating very good

---

<div class="post-metadata">

**Author:** ![KonradWalsh](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/konradwalsh/32/147_2.png) [@KonradWalsh](https://community.homey.app/u/KonradWalsh)\
**Post date:** [March 15, 2019, 8:08am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/46 "2019-03-15T08:08:30Z")

</div>

Its called Stylebot

> **[Stylebot](https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha?hl=en)**
>
> Change the appearance of websites instantly. Preview and install styles created by other users on stylebot.me

---

<div class="post-metadata">

**Author:** ![Erik\_M\_Madsen](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/erik_m_madsen/32/18191_2.png) [@Erik\_M\_Madsen](https://community.homey.app/u/Erik_M_Madsen)\
**Post date:** [March 15, 2019, 9:23am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/47 "2019-03-15T09:23:19Z")

</div>

Thanks Konrad 🙂

---

<div class="post-metadata">

**Author:** ![JvDis](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/jvdis/32/4146_2.png) [@JvDis](https://community.homey.app/u/JvDis)\
**Post date:** [March 17, 2019, 10:18am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/48 "2019-03-17T10:18:55Z")

</div>

Hi!,

This is an awesome feature @Dijker introduced and has been perfected by others!

I noticed that testing a flow does not always work when using the adapted CSS. Clicking on test when input variables need to be given (e.g. with a temperature update), the dialog that opens is underneath the ‘WHEN’ column

 ![test%20button](https://us1.discourse-cdn.com/flex025/uploads/athom/original/2X/a/ab8b51031bb227e0ae1620e4ef9cdb0fe33cad38.jpeg)

I fixed this by explicitly setting the z-index on the dialog. It’s a bit dirty, but it works.

```
.TestDialog {
    z-index: 99;
}
```

---

<div class="post-metadata">

**Author:** ![Ruud](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/ruud/32/64214_2.png) [@Ruud](https://community.homey.app/u/Ruud)\
**Post date:** [March 27, 2019, 3:35pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/49 "2019-03-27T15:35:18Z")

</div>

I just put a video online for people who aren’t that handy with computers and also want to make this change. thanks for this idea Geurt ([Linkje](https://youtu.be/oW93EigL7vQ) naar video)

---

<div class="post-metadata">

**Author:** ![tb1962](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/tb1962/32/7888_2.png) [@tb1962](https://community.homey.app/u/tb1962)\
**Post date:** [April 6, 2019, 12:22pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/50 "2019-04-06T12:22:41Z")

</div>

When you have, like me a larger screen and larger flows. you may like this setup

![flow%20for%20web](https://us1.discourse-cdn.com/flex025/uploads/athom/original/2X/7/79db79fa18507af77a601661f8c923bc6b7ef865.jpeg)

edit: the order of the cards is from left to right and top to bottom. But if you want to change order, you have to move the card to the top (or bottom). TThat may feel un naturaly but i can’t change that.

**css:**

.AddFlowCardButton {  
bottom: 0;  
position: absolute;  
}

.EditCard {  
margin-right: 0;  
}

.FlowCardArgument {  
display: block;  
}

.FlowInner {  
display: flex;  
flex-wrap: wrap;  
}

.FlowInner \> input {  
flex: 0 0 100%;  
}

.Folder\>.Children {  
border-left: 1px solid hsla(0,0%,100%,.1);  
margin-left: 20px;  
}

.FoldersItem\>.FoldersItemInner\>.Title {  
-moz-user-select: none;  
-webkit-user-select: none;  
color: #fff;  
flex-grow: 1;  
font-size: 13px;  
font-weight: 400;  
margin: 1px;  
overflow: hidden;  
text-overflow: ellipsis;  
user-select: none;  
white-space: nowrap;  
}

.FoldersItemInner .Icon {  
flex: 0 0 20px;  
}

.Sidebar {  
overflow: auto;  
width: 450px;  
}

.Sidebar\>.Content {  
right: 0;  
width: unset;  
}

.SimulatorInner {  
width: 975px ;  
}

@media screen and (max-width: 1500px) {  
.EditCard.Visible {  
width: 340px;  
background: url(“data:image/svg+xml;utf8,”) no-repeat;  
-webkit-background-size: 12px;  
background-size: 12px;  
background-position: center center;  
}  
.EditCard.Visible \> div {  
visibility: hidden;  
-webkit-opacity: 0;  
opacity: 0;  
}  
.EditCard:hover.Visible {  
width: 340px;  
background-image: none;  
}  
.EditCard:hover.Visible \> div {  
visibility: visible;  
-webkit-opacity: 1;  
opacity: 1;  
-o-transition: opacity .5s ease-in-out;  
-webkit-transition: opacity .5s ease-in-out;  
transition: opacity .5s ease-in-out;  
}  
}

@media screen and (min-width: 1400px) {  
.FlowInner {  
display: -webkit-flex;  
display: flex;  
flex-wrap: wrap;  
}  
.FlowInner \> input {  
-ms-flex: 0 0 100%;  
-webkit-flex: 0 0 100%;  
flex: 0 0 100%;  
}  
.FlowTypeGroup {  
-webkit-flex: 1;  
-ms-flex: 1;  
flex: 1;  
padding-bottom: 70px;  
position: relative;  
}  
.FoldersItemInner .Icon {  
-ms-flex: 0 0 20px;  
-webkit-flex: 0 0 20px;  
flex: 0 0 20px;  
}  
.FlowCardArgument {  
display: block;  
}  
}

.FlowTypeGroup:last-of-type {  
flex-grow: 3;  
flex-flow: column;  
display: flex;  
flex-direction: column;  
}

.Flow .FlowCards {  
display: flex;  
flex-direction: column;  
margin: 10px;  
width: 100%;  
}

.FlowCard {  
margin: 10px;  
}

.FlowGroupSeparator:not([style\*=transition]):last-child {  
visibility: visible;  
}

.FlowGroupSeparator {  
width: 100%;  
}

.FlowCards \> div {  
display: flex;  
flex-direction: column;  
flex-flow: wrap;  
}

.FlowTypeGroup\>.FlowCards\>.AddFlowCardButton, .FlowTypeGroup\>.FlowCards\>.AddFlowCardButton:active {  
align-self: center;  
}

---

<div class="post-metadata">

**Author:** ![MrHaugen](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/mrhaugen/32/9543_2.png) [@MrHaugen](https://community.homey.app/u/MrHaugen)\
**Post date:** [April 11, 2019, 10:48am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/51 "2019-04-11T10:48:14Z")

</div>

I have a problem with flow names being cut off in the left pane. Anyone have a tip on how one could do one of the following?

1. Word wrap the flow names in the left pane? Like:  
–\> Looooooooooong flow name that goes  
… on over two lines. (… representing empty space to tab after the flowicons)
2. Increase the width of the left pane to enable more of the flow names.

---

<div class="post-metadata">

**Author:** ![Fire69](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/fire69/32/8758_2.png) [@Fire69](https://community.homey.app/u/Fire69)\
**Post date:** [April 11, 2019, 1:15pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/52 "2019-04-11T13:15:12Z")

</div>

> [@tb1962](#):
>
> the order of the cards is from left to right and top to bottom. But if you want to change order, you have to move the card to the top (or bottom). TThat may feel un naturaly but i can’t change that.

That doesn’t really matter, all the actions are performed at the same time (normally…)

---

<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:** [April 11, 2019, 2:14pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/53 "2019-04-11T14:14:07Z")

</div>

This will prevent the shortening of the flow names and let it span multiple lines:

```auto
.FoldersItem>.FoldersItemInner>.Title {
	white-space: normal !important;
}

```

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

---

<div class="post-metadata">

**Author:** ![MrHaugen](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/mrhaugen/32/9543_2.png) [@MrHaugen](https://community.homey.app/u/MrHaugen)\
**Post date:** [April 12, 2019, 6:51am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/54 "2019-04-12T06:51:21Z")

</div>

Thank you. That’s SO much better!  
Are there any documentation of this stuff, or do you just hack what source code you brows and try/fail? 🙂

---

<div class="post-metadata">

**Author:** ![Ruud](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/ruud/32/64214_2.png) [@Ruud](https://community.homey.app/u/Ruud)\
**Post date:** [May 15, 2019, 10:38am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/55 "2019-05-15T10:38:11Z")

</div>

Today I made my own version of the css code of @Dijker. I’ve changed the background. I think he is very successful if I say so myself.

 ![flow%20editor](https://us1.discourse-cdn.com/flex025/uploads/athom/original/2X/4/4b47cca945a29de194e2563cb80a2f59b89eb7b7.jpeg)

**Here is my code**

```
.AddFlowCardButton {
bottom: 0;
position: absolute;
}

.FlowInner {
display: flex;
flex-wrap: wrap;
}

.FlowInner > input {
flex: 0 0 100%;
}

.FlowTypeGroup {
flex: 1;
padding-bottom: 70px;
position: relative;
}

.FoldersItemInner .Icon {
flex: 0 0 20px;
}

.FoldersItem>.FoldersItemInner>.Title {
white-space: normal ;
}

body {
background: url(https://in04.hostcontrol.com/resources/92174d6ec1ea91/7e57aefa92.JPEG);
background-attachment: fixed;
background-repeat: auto;
background-size: cover;
}
```

---

<div class="post-metadata">

**Author:** ![AWBoonen](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/awboonen/32/5095_2.png) [@AWBoonen](https://community.homey.app/u/AWBoonen)\
**Post date:** [May 29, 2019, 8:42pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/56 "2019-05-29T20:42:38Z")

</div>

So for the people liking the initial css, I’ve done some tweaks which forces a 3 column layout, even if your screen is not wide enough.  
A scrollbar will appear to allow you to scroll to the right.  
Next to that I’ve looked at some comments mentioned here and embedded that.  
I’ve also given the value a grey background and different font family.

Please note that the initial code of Athom is ugly at best, so everything here is merely a hack :-(.

Enjoy:

```auto
* {
    box-sizing: border-box;
}

.AddFlowCardButton {
    bottom: 0;
    position: absolute;
    width: auto;
    left: 40px;
    right: 40px;
}

.FlowInner {
    display: flex;
    flex-wrap: nowrap;
    padding-top: 60px;
    position: relative;
}

.FlowInner > input {
    flex: 0 0 100%;
}

.FlowTypeGroup {
    flex: 1;
    padding-bottom: 70px;
    position: relative;
    margin-right: 20px;
}

.FoldersItemInner .Icon {
    flex: 0 0 20px;
}

.Flow .FlowCards {
    width: auto;
    flex: 1;
}

.FlowCard {
    width: auto;
    margin-bottom: 20px
;
}

.Flow .Name {
    position: absolute;
    top: 20px;
}

.Viewport {
    overflow: auto;
}

.FlowCardArgument {
    font-family: 'lucida console', monospace;
    font-size: .85em;
    display: inline-block;
    padding: 0 3px;
    background-color: #eee;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.FlowCardDroptoken {
    display: block;
}

.FlowCardIcon {
    flex: 0 0 40px;
    height: 40px;
    padding: 5px;
    border-radius: 10px
;
}

.FoldersItem .FoldersItemInner .Title {
    white-space: normal;
}

.FoldersItem .FoldersItemInner {
    align-items: center;
}

```

---

<div class="post-metadata">

**Author:** ![Madd33n](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/madd33n/32/9859_2.png) [@Madd33n](https://community.homey.app/u/Madd33n)\
**Post date:** [June 20, 2019, 3:02pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/57 "2019-06-20T15:02:19Z")

</div>

Yes - sadly not for free but spending 3,50€ for a better view is worth it 🙂  
Search for the Safari extension Cascadea. Easy set up - ready to go within 1 Minute due to the published css code from the community members!

---

<div class="post-metadata">

**Author:** ![copiis](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/copiis/32/171978_2.png) [@copiis](https://community.homey.app/u/copiis)\
**Post date:** [July 14, 2019, 8:44am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/58 "2019-07-14T08:44:40Z")

</div>

Seems like it doesent work anymore. Athom changed something on the flowsite?

---

<div class="post-metadata">

**Author:** ![PetervdK](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/petervdk/32/20669_2.png) [@PetervdK](https://community.homey.app/u/PetervdK)\
**Post date:** [July 14, 2019, 8:50am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/59 "2019-07-14T08:50:19Z")

</div>

Still working here (with Chrome)…

---

<div class="post-metadata">

**Author:** ![copiis](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/copiis/32/171978_2.png) [@copiis](https://community.homey.app/u/copiis)\
**Post date:** [July 14, 2019, 8:53am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/60 "2019-07-14T08:53:48Z")

</div>

> [@AWBoonen](#):
>
> - { box-sizing: border-box; } .AddFlowCardButton { bottom: 0; position: absolute; width: auto; left: 40px; right: 40px; } .FlowInner { display: flex; flex-wrap: nowrap; padding-top: 60px; position: relative; } .FlowInner \> input { flex: 0 0 100%; } .FlowTypeGroup { flex: 1; padding-bottom: 70px; position: relative; margin-right: 20px; } .FoldersItemInner .Icon { flex: 0 0 20px; } .Flow .FlowCards { width: auto; flex: 1; } .FlowCard { width: auto; margin-bottom: 20px ; } .Flow .Name { position: absolute; top: 20px; } .Viewport { overflow: auto; } .FlowCardArgument { font-family: ‘lucida console’, monospace; font-size: .85em; display: inline-block; padding: 0 3px; background-color: #eee; border-radius: 5px; border: 1px solid #ccc; } .FlowCardDroptoken { display: block; } .FlowCardIcon { flex: 0 0 40px; height: 40px; padding: 5px; border-radius: 10px ; } .FoldersItem .FoldersItemInner .Title { white-space: normal; } .FoldersItem .FoldersItemInner { align-items: center; }

Ah okay, i had the wrong url

[Previous page](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765.md?page=2)

[Next page](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765.md?page=4)