# 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:** 1

<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:** [February 26, 2019, 9:18pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/1 "2019-02-26T21:18:05Z")

</div>

Of course everyone is happy With the new Flow for Web App!  
but some where more happy using a flow editor in three columns.

The nice thing is with a extra CSS file you can customize the way your browser presents it.  
Lucky for me (and you) some Homeys on Slack already shared what they like.

As I am no CSS guru I asked how they did. Thanks to Rob and Bjorn I got some Code.  
The people using Linux with fe Epiphany probably know how to use it.

As I use Chrome most of the time I installed the extension [StyleBot](https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha?hl=en) and added a small css code.  
Opened Flow Web App:

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

Only thing to configure after a default install is the following code for the url: `flow.homey.app`

```
.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;
}

```

If you use FireFox you could use it with [Custom Style Script](https://addons.mozilla.org/en-US/firefox/addon/custom-style-script/).

For what I have tested everything works as normal, but pls remove it before reporting issues with the Flow for Web app to Athom as it will be a problem for them supporting everything with the PBKAC error’s 😉 !!

Have fun!

---

<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:** [February 26, 2019, 9:22pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/2 "2019-02-26T21:22:06Z")

</div>

Here’s another one, but now for the Settings pages on the developer site:

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

```auto
.SimulatorInner {
    width: 975px !important;
}

```

Use it for [https://developer.athom.com/tools/app-settings](https://developer.athom.com/tools/app-settings)

---

<div class="post-metadata">

**Author:** ![Juergen](https://avatars.discourse-cdn.com/v4/letter/j/65b543/32.png) [@Juergen](https://community.homey.app/u/Juergen)\
**Post date:** [February 26, 2019, 9:30pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/3 "2019-02-26T21:30:58Z")

</div>

This is great.  
I hope to see this also for other browsers with an integrated feature… just applying styles should be easy to solve…

---

<div class="post-metadata">

**Author:** ![Priknr1](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/priknr1/32/558_2.png) [@Priknr1](https://community.homey.app/u/Priknr1)\
**Post date:** [February 27, 2019, 8:50am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/4 "2019-02-27T08:50:16Z")

</div>

Thanks so much for this! 😃

---

<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:** [February 27, 2019, 9:23am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/5 "2019-02-27T09:23:59Z")

</div>

Very cool… wish I thought of it first 🤣

---

<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:** [February 27, 2019, 9:38am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/6 "2019-02-27T09:38:18Z")

</div>

If your screen width isn’t enough and this happens with the custom css above:

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

just add

```auto
.Sidebar {
    width: 7%;
    overflow: auto;
}

.Sidebar:hover {
	width: 301px;   
}

```

This will slide in the Flow selection column and widen it when you hover over it to select a flow.

---

<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:** [February 27, 2019, 9:52am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/7 "2019-02-27T09:52:24Z")

</div>

For a dark mode

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

```auto
body {
    background: -webkit-linear-gradient(55deg,#100010,#100010 50%,#100010);
}

```

Possibilities are endless…

---

<div class="post-metadata">

**Author:** ![StyleRemains](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/styleremains/32/474_2.png) [@StyleRemains](https://community.homey.app/u/StyleRemains)\
**Post date:** [February 27, 2019, 11:09am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/8 "2019-02-27T11:09:36Z")

</div>

This is really helpful, not only the flow editor is back but also the look and feel in a horizontal mode. Many thanks for sharing.

---

<div class="post-metadata">

**Author:** ![Eternity](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/eternity/32/102113_2.png) [@Eternity](https://community.homey.app/u/Eternity)\
**Post date:** [February 27, 2019, 3:32pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/9 "2019-02-27T15:32:11Z")

</div>

Thanks for sharing. Love it!

---

<div class="post-metadata">

**Author:** ![Victor\_dB](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/victor_db/32/11332_2.png) [@Victor\_dB](https://community.homey.app/u/Victor_dB)\
**Post date:** [February 27, 2019, 6:32pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/10 "2019-02-27T18:32:59Z")

</div>

Fantastic, really appreciated!

---

<div class="post-metadata">

**Author:** ![cap1](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/cap1/32/11854_2.png) [@cap1](https://community.homey.app/u/cap1)\
**Post date:** [February 27, 2019, 8:46pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/11 "2019-02-27T20:46:31Z")

</div>

Athom read and apply global 🙂

---

<div class="post-metadata">

**Author:** ![SaltoRico](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/saltorico/32/8257_2.png) [@SaltoRico](https://community.homey.app/u/SaltoRico)\
**Post date:** [February 27, 2019, 9:42pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/12 "2019-02-27T21:42:24Z")

</div>

Is there anyone handy enough to apply the iOS shortcuts trick in below link to create an iPad version of this css? Reading it, it may work, but I am not proficient in the code. Can I inspire someone to try?

> **[Hacking around with JavaScript and Shortcuts in iOS 12](https://medium.com/@chrishutchinson/hacking-around-with-javascript-and-shortcuts-in-ios-12-95f8d7190777)**
>
> The launch of iOS 12 brought the release of Shortcuts, a first-party app that allows you to create custom workflows for use by Siri, in…

---

<div class="post-metadata">

**Author:** ![Martin\_B](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/martin_b/32/8091_2.png) [@Martin\_B](https://community.homey.app/u/Martin_B)\
**Post date:** [February 28, 2019, 1:02pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/13 "2019-02-28T13:02:41Z")

</div>

It looks great but have no clue how to do it in fire fox.

---

<div class="post-metadata">

**Author:** ![Jos\_van\_Emmerik](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/jos_van_emmerik/32/9913_2.png) [@Jos\_van\_Emmerik](https://community.homey.app/u/Jos_van_Emmerik)\
**Post date:** [February 28, 2019, 2:16pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/14 "2019-02-28T14:16:11Z")

</div>

🙏 🙏 🙏 🙏

---

<div class="post-metadata">

**Author:** ![bvdbos](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/bvdbos/32/2352_2.png) [@bvdbos](https://community.homey.app/u/bvdbos)\
**Post date:** [February 28, 2019, 2:28pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/15 "2019-02-28T14:28:54Z")

</div>

> **[Stylish - Custom themes for any website – Deze extensie downloaden voor 🦊...](https://addons.mozilla.org/nl/firefox/addon/stylish/)**
>
> Download Stylish - Custom themes for any website voor Firefox. Pas het uiterlijk van websites en de gebruikersinterface aan.

---

<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:** [February 28, 2019, 6:35pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/16 "2019-02-28T18:35:26Z")

</div>

Little enhancement so arguments on flowcards are given their own line instead of displaying everything inline

```auto
.FlowCardArgument {
    display: block;
}

```

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

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

---

<div class="post-metadata">

**Author:** ![cap1](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/cap1/32/11854_2.png) [@cap1](https://community.homey.app/u/cap1)\
**Post date:** [February 28, 2019, 7:51pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/17 "2019-02-28T19:51:26Z")

</div>

Is it possible to fix this issue if a card have many boxes,no scrollbar and a hard time tabbing between settings?

This is for the pushsafer app card

 ![flow](https://us1.discourse-cdn.com/flex025/uploads/athom/original/2X/f/fdf947efcbe3cfb33461969491d4bde11836d4e0.jpeg)

---

<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:** [February 28, 2019, 8:20pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/18 "2019-02-28T20:20:21Z")

</div>

That one looks to me like it needs to be fixed by Athom cause that’s something that should be fixed for everybody and not just the ones running custom CSS.

I suggest reporting this one here: [https://support.athom.com/hc/en/requests/new](https://support.athom.com/hc/en/requests/new)

---

<div class="post-metadata">

**Author:** ![KiJo-DuKa](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/kijo-duka/32/12913_2.png) [@KiJo-DuKa](https://community.homey.app/u/KiJo-DuKa)\
**Post date:** [March 1, 2019, 1:24am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/19 "2019-03-01T01:24:32Z")

</div>

Well, … I am much less then a guru.

I installed the extension ‘stylebot’ and already stuck. Is there a step by step handout to make this css work? This last 30 years I developed myself as a fantastic computer abuser.

Thanks.

---

<div class="post-metadata">

**Author:** ![Jamie](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/jamie/32/5274_2.png) [@Jamie](https://community.homey.app/u/Jamie)\
**Post date:** [March 1, 2019, 3:03am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/20 "2019-03-01T03:03:56Z")

</div>

@DaneedeKruyff idea taken to its natural progression :

```auto
@media screen and (min-width: 1400px) {
  .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;
  }
  .FlowCardArgument {    
    display: block;
  }
}

@media screen and (min-width: 1500px) and (max-width: 1700px) {
  .Sidebar {    
    width: 7%;    
    min-width: 215px;  
    overflow-x: hidden;
  }
  .Sidebar:hover {    
    width: 301px;    
    overflow: auto;
  }
}

@media screen and (max-width: 1500px) {
    .Sidebar {
        width: 50px;
        overflow-x: hidden;
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23ffffff'><polygon points='0,0 50,50 0,100'/></svg>") no-repeat;
        background-size: 12px;
        background-position: center center;
        background-color: hsla(0,0%,100%,.1);
    }
    .Sidebar > div {
        visibility: hidden;
        opacity: 0;
    }

    .Sidebar:hover {
        width: 301px;
        overflow: auto;
        background-image: none;
    }

    .Sidebar:hover > div {
        visibility: visible;
        opacity: 1;
        transition: opacity .5s ease-in-out;
    }
}

```

If your the type of person who REALLY likes their space, you can do the same to the right edit - so it only shows on hover.

```auto
@media screen and (max-width: 1500px) {

    .EditCard.Visible {
        width: 50px;
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23ffffff'><polygon points='50,0 0,50 50,100'/></svg>") no-repeat;
        background-size: 12px;
        background-position: center center;
    }

    .EditCard.Visible > div {
        visibility: hidden;
        opacity: 0;
    }

    .EditCard:hover.Visible {
        width: 340px;
        background-image: none;
    }

    .EditCard:hover.Visible > div {
        visibility: visible;
        opacity: 1;
        transition: opacity .5s ease-in-out;
    }
}

```

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