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

<div class="post-metadata">

**Author:** ![BartP](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/bartp/32/13031_2.png) [@BartP](https://community.homey.app/u/BartP)\
**Post date:** [March 1, 2019, 11:54am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/21 "2019-03-01T11:54:51Z")

</div>

@DaneedeKruyff could it be that drag and drop (moving a card to ELSE) is not working when you apply this custom CSS? It all works fine here except that apparently, but I could be doing something wrong too maybe.

---

<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 1, 2019, 12:50pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/22 "2019-03-01T12:50:09Z")

</div>

> [@BartP](#):
>
> could it be that drag and drop (moving a card to ELSE) is not working when you apply this custom CSS?

I have the first + [Block](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/16) + [Black](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/7) and everything works in Chrome on Windows.

> [@BartP](#):
>
> ut I could be doing something wrong too maybe.

Try a long press/Click before moving…

---

<div class="post-metadata">

**Author:** ![BartP](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/bartp/32/13031_2.png) [@BartP](https://community.homey.app/u/BartP)\
**Post date:** [March 1, 2019, 12:52pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/23 "2019-03-01T12:52:24Z")

</div>

Awesome! Thanks @Dijker that ‘long press’ did the trick. Guess I was indeed doing something wrong, being a bit impatient and hasty 😉

---

<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:** [March 1, 2019, 7:00pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/24 "2019-03-01T19:00:50Z")

</div>

Enhanced the dark mode a bit

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

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

.FlowCard {
    background: -webkit-linear-gradient(55deg,#060006,#505050 30%,#605050);
}

.FlowCard>.Content>.Delay, 
.FlowCard>.Content>.Duration, 
.FlowCard>.Content>.Title>.Text {
 	color: white;   
}
.FlowCardArgument {
    color: white;
}

.AddCard.Visible>.Inner {
    background: -webkit-linear-gradient(55deg,#070007,#606060 70%,#605050);
}

input.SearchInput {
    background: -webkit-linear-gradient(55deg,#403030,#606060 80%,#040004);
}

.AddCard>.Inner>.Search>.SearchInput {
    color: white;
}

```

---

<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:** [March 1, 2019, 7:14pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/25 "2019-03-01T19:14:15Z")

</div>

A new feature got added 👍

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

You can now see the number of times a flow was triggered by hovering your mouse over the flow name. This number represents the times the flow was triggered since the update to V2 or since it was created (on V2).  
Flows started by using the **Test** button are not counted.

---

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

</div>

Follow the instructions on that page and paste the code below

```auto
const fixFlowApp = document.createElement("style");

fixFlowApp.innerText = `
  body {
    background: -webkit-linear-gradient(55deg,#050005,#404040 50%,#505050);
}

.FlowCard {
    background: -webkit-linear-gradient(55deg,#060006,#505050 30%,#605050);
}

.FlowCard>.Content>.Delay, 
.FlowCard>.Content>.Duration, 
.FlowCard>.Content>.Title>.Text {
 	color: white;   
}
.FlowCardArgument {
    color: white;
}

.AddCard.Visible>.Inner {
    background: -webkit-linear-gradient(55deg,#070007,#606060 70%,#605050);
}

input.SearchInput {
    background: -webkit-linear-gradient(55deg,#403030,#606060 80%,#040004);
}

.AddCard>.Inner>.Search>.SearchInput {
    color: white;
}

body {
    zoom: .5;
}

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

document.head.appendChild(fixFlowApp);

completion();

```

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

---

<div class="post-metadata">

**Author:** ![Bjorn\_Andersson](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/bjorn_andersson/32/13731_2.png) [@Bjorn\_Andersson](https://community.homey.app/u/Bjorn_Andersson)\
**Post date:** [March 2, 2019, 8:12am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/27 "2019-03-02T08:12:03Z")

</div>

Nice.

---

<div class="post-metadata">

**Author:** ![Ruud\_Verrijk](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/ruud_verrijk/32/903_2.png) [@Ruud\_Verrijk](https://community.homey.app/u/Ruud_Verrijk)\
**Post date:** [March 2, 2019, 10:29am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/28 "2019-03-02T10:29:30Z")

</div>

Fantastic. Thanks!

---

<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:** [March 3, 2019, 6:30pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/29 "2019-03-03T18:30:02Z")

</div>

Little addition for the dark theme so the dialog to add a card is also dark

```auto
.AddCard.Visible>.Inner {
    background: -webkit-linear-gradient(55deg,#070007,#606060 70%,#605050);
}

input.SearchInput {
    background: -webkit-linear-gradient(55deg,#403030,#606060 80%,#040004);
}

.AddCard>.Inner>.Search>.SearchInput {
    color: white;
}

```

Before

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

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

---

<div class="post-metadata">

**Author:** ![PhilS](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/phils/32/12941_2.png) [@PhilS](https://community.homey.app/u/PhilS)\
**Post date:** [March 3, 2019, 7:10pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/30 "2019-03-03T19:10:25Z")

</div>

Great! I will switch to the dark mode. Beautiful!

---

<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 4, 2019, 10:40am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/31 "2019-03-04T10:40:52Z")

</div>

Is there any way to accomplish this in Safari??

---

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

</div>

> [@DaneedeKruyff](#):
>
> Little addition for the dark theme so the dialog to add a card is also dark

Great!

Small request 😉  
Would it be possible to make the enabled / disabled flows esier to identify? I find it difficut to see the difference, especially if a flow is selected.

Thanks!

---

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

</div>

Hi Ernst,

Just play around with this value to see what suits you best

```auto
.FlowFolder.Disabled>.FoldersItem>.FoldersItemInner>.Title {
    opacity: .2;
}

```

---

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

</div>

Yippee!

---

<div class="post-metadata">

**Author:** ![victoroos](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/victoroos/32/8344_2.png) [@victoroos](https://community.homey.app/u/victoroos)\
**Post date:** [March 5, 2019, 1:16pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/35 "2019-03-05T13:16:31Z")

</div>

use stylish if you want for chrome!

> **[Stylish - Custom themes for any website](https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe)**
>
> Customize any website to your color scheme in 1 click, thousands of user styles with beautiful themes, skins & free backgrounds.

---

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

</div>

For the people who hate the telephone simulator in the app settings of the Homey developer page.  
Here the chrome css, tested with stylebot extension for the transformation into a tablet 😀  
[https://developer.athom.com/tools/app-settings](https://developer.athom.com/tools/app-settings)

```
/* Make all elements invisible to hide the simulator selector */

.Page.PageToolsSettings {
    visibility: hidden;
}

/* But still show the phone itself and flexible resize and realign */

.Page.PageToolsSettings .Simulator {
    visibility: visible;
    width: 150%;
    margin-left: -50%;
}

/* Finetune the layout of the screen */

.Page.PageToolsSettings .Simulator .SimulatorInner {
    width: 98%;
    margin-left: 1%;
    margin-right: 1%;
}

/* Now the phone is a tablet :) */

```

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

---

<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:** [March 10, 2019, 4:46pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/37 "2019-03-10T16:46:10Z")

</div>

> [@StyleRemains](#):
>
> Here the chrome css for the transformation into a tablet

That is nice! Thank you!

---

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

</div>

Thanks for the enhancements, guys. Bought a new second Homey today that was already 2.0. Must say this is awesome and makes re-creating my flows so much easier. 👍👏👊

---

<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:** [March 12, 2019, 8:53pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/39 "2019-03-12T20:53:42Z")

</div>

> [@PetervdK](#):
>
> a new second Homey today that was already 2.0

So was it new and therefor was 2.0 ofc or was it 2nd hand with 2.0 on it??

---

<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:** [March 12, 2019, 8:58pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/40 "2019-03-12T20:58:24Z")

</div>

2nd hand early 2016 model (purchase date nov 2018) and already 2.0 on it. So it’s running next to my 1.5 now to make sure everything is/stays running while moving to 2.0.

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

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