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

<div class="post-metadata">

**Author:** ![ktd](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/ktd/32/11761_2.png) [@ktd](https://community.homey.app/u/ktd)\
**Post date:** [August 22, 2019, 8:24am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/61 "2019-08-22T08:24:49Z")

</div>

This also work with the beta/dev of the new Microsoft Edge that are built on Chromium.  
Thanks for sharing the methode and CSS @Dijker.

---

<div class="post-metadata">

**Author:** ![Le\_Cactus](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/le_cactus/32/9727_2.png) [@Le\_Cactus](https://community.homey.app/u/Le_Cactus)\
**Post date:** [August 23, 2019, 10:30pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/62 "2019-08-23T22:30:42Z")

</div>

Ow? How? Please elaborate on how you got that to work , I would like that too 😮  
TIA

---

<div class="post-metadata">

**Author:** ![ArnoP](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/arnop/32/13709_2.png) [@ArnoP](https://community.homey.app/u/ArnoP)\
**Post date:** [August 24, 2019, 12:49pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/63 "2019-08-24T12:49:20Z")

</div>

Did you read the first topic in this thread?

---

<div class="post-metadata">

**Author:** ![Le\_Cactus](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/le_cactus/32/9727_2.png) [@Le\_Cactus](https://community.homey.app/u/Le_Cactus)\
**Post date:** [August 24, 2019, 1:58pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/64 "2019-08-24T13:58:35Z")

</div>

Of course… I was reffering to the CSS hack in Edge Beta version 🙄

---

<div class="post-metadata">

**Author:** ![ArnoP](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/arnop/32/13709_2.png) [@ArnoP](https://community.homey.app/u/ArnoP)\
**Post date:** [August 24, 2019, 2:42pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/65 "2019-08-24T14:42:07Z")

</div>

I don’t use Edge a lot let alone the Beta of it, but since it’s based on Chromium it might just support the same plugins as Chrome and other Chromium based browsers do…

---

<div class="post-metadata">

**Author:** ![ktd](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/ktd/32/11761_2.png) [@ktd](https://community.homey.app/u/ktd)\
**Post date:** [August 24, 2019, 10:48pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/66 "2019-08-24T22:48:57Z")

</div>

In the beta version of Edge you can download extensions from Chrome web store so you can download and install Stylebot and then just copy & paste the code from the first post.

---

<div class="post-metadata">

**Author:** ![Le\_Cactus](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/le_cactus/32/9727_2.png) [@Le\_Cactus](https://community.homey.app/u/Le_Cactus)\
**Post date:** [August 24, 2019, 11:26pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/67 "2019-08-24T23:26:54Z")

</div>

Thanks, didn’t know that. Thanks 👍

---

<div class="post-metadata">

**Author:** ![Manney](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/manney/32/15537_2.png) [@Manney](https://community.homey.app/u/Manney)\
**Post date:** [October 9, 2019, 8:17am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/68 "2019-10-09T08:17:22Z")

</div>

Hi, Danee?!

I really like the appearance of your dark version but some text is displayed in dark color and hard to read.

Do you know where to change that?

Thanks in advance! ![card](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/3/d/3d7c64afef965710ca20130d9ae05648ee49ef75.png)

---

<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:** [October 9, 2019, 8:19am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/69 "2019-10-09T08:19:31Z")

</div>

~~I’ll have to look into that, will let you know when I find it.~~

Think this will fix that:

```auto
.FlowCard>.Content>.TitleFormatted>.Text>.TextNode {
	color: #ccc;    
}

```

---

<div class="post-metadata">

**Author:** ![Manney](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/manney/32/15537_2.png) [@Manney](https://community.homey.app/u/Manney)\
**Post date:** [October 9, 2019, 8:34am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/70 "2019-10-09T08:34:53Z")

</div>

Thanks, that helps a lot!

And do you know what the parameter for the “title” of the card is?

In this case the “Aanwezigheid”

---

<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:** [October 9, 2019, 8:40am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/71 "2019-10-09T08:40:19Z")

</div>

Think that would be

```auto
.FlowCard>.Content>.Owner {
	color: #ccc;
}

```

---

<div class="post-metadata">

**Author:** ![Manney](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/manney/32/15537_2.png) [@Manney](https://community.homey.app/u/Manney)\
**Post date:** [October 9, 2019, 9:04am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/72 "2019-10-09T09:04:57Z")

</div>

Danee, you’re the man!!

Thanks !!!

---

<div class="post-metadata">

**Author:** ![Manney](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/manney/32/15537_2.png) [@Manney](https://community.homey.app/u/Manney)\
**Post date:** [October 9, 2019, 11:01am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/73 "2019-10-09T11:01:42Z")

</div>

As we keep on tweaking. 😆

Is there any code to adjust the flow tree color (activated and deactivated)?  
 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/c/a/ca83286f38b2f8f0dedbbd46dc554ec07b20f4a9.png)

Oh yeah, and selected. 😬

---

<div class="post-metadata">

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

</div>

The thing i’m really missing is a way to see the current variables/tags and their values,  
does anyone if it is possible to copy this small button to the top bar?  
(like it used to be in the old flow editor)

 ![2019-11-14%2010_29_35-Homey%20Flow](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/3/f/3f69d5aa1f2523026c3890d2ab94bc19e703d1bb.jpeg)

---

<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:** [June 2, 2020, 6:48pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/75 "2020-06-02T18:48:37Z")

</div>

A bit late, but for those that are interested i have changed the look&feel of the HomeyScript editor.  
It is quick&dirty but if you like you can play with it and modify.

 ![Schermafbeelding 2020-06-02 om 20.45.18](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/1/0/102cf46452dbbf3d2f35d457e2a8d9ad144a3992.png)

CSS:

```
.hs-console {
border: none;

```

}

.hs-console-header {  
background: #444;  
box-shadow: none;  
}

.hs-console-inner .hs-scrollbar {  
backkground: 222;  
}

.hs-editors-wrap {  
background: #171717;  
border: none;  
}

.hs-files {  
background: #222;  
}

.hs-header {  
background: #222;  
}

.monaco-editor, .monaco-editor-background, .monaco-editor .inputarea.ime-input {  
background-color: #171717;  
}

.monaco-scrollable-element {  
background: #171717;  
}

body {  
background: #222;  
}

.hs-actions {  
background: #222;  
border: none;  
}

.hs-editor {  
transition: unset;  
}

.hs-editor .hs-console {  
height: 40%;  
}

.hs-editor .hs-console-inner {  
background: #171717;  
}

.hs-editor .hs-monaco {  
bottom: 40%;  
}

.hs-file {  
font-size: 12px;  
}

.hs-header, .hs-sidebar, .hs-console {  
background: #222;  
}

.hs-sidebar {  
overflow: hidden;  
width: 350px;  
}

.monaco-editor .view-overlays .current-line {  
border: 1px solid #282828;  
background: #282828;  
}

.monaco-editor .lines-content .cigr {  
opacity: 0.45  
;  
}

.monaco-editor .lines-content .cigr:nth-of-type(1) {  
background-color: #cc99ff;  
}

.monaco-editor .lines-content .cigr:nth-of-type(2) {  
background-color: #ffcccc;  
}

.monaco-editor .lines-content .cigr:nth-of-type(3) {  
background-color: #99ff66;  
}

.monaco-editor .lines-content .cigr:nth-of-type(4) {  
background-color: #66ffff;  
}

.monaco-editor .lines-content .cigr:nth-of-type(5) {  
background-color: #ffff66;  
}

.monaco-editor .lines-content .cigr:nth-of-type(6) {  
background-color: #0099cc;  
}

.monaco-editor .lines-content .cigr:nth-of-type(7) {  
background-color: #ff6600;  
}

.monaco-editor .lines-content .cigr:nth-of-type(8) {  
background-color: #00cc99;  
}

.monaco-editor .lines-content .cigr:nth-of-type(9) {  
background-color: #0066ff;  
}

.monaco-editor .lines-content .cigr:nth-of-type(10) {  
background-color: #00cc00;  
}

.mtk7 {  
color: #444;  
}

.hs-sidebar:before {  
background: #333;  
}

.hs-file.hs-active {  
border-top-color: #333;  
border-bottom-color: #333;  
margin-right: 0px;  
background: #333;  
}

---

<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:** [October 3, 2020, 7:50am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/76 "2020-10-03T07:50:34Z")

</div>

@Fire69, I meant by this the visual sequence

---

<div class="post-metadata">

**Author:** ![M\_a\_r\_c\_o](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/m_a_r_c_o/32/146_2.png) [@M\_a\_r\_c\_o](https://community.homey.app/u/M_a_r_c_o)\
**Post date:** [November 14, 2020, 11:37am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/77 "2020-11-14T11:37:16Z")

</div>

The CSS for the flow editor gives me a white screen now, in firefox and chrome on the Mac.  
Something is changed 😉

---

<div class="post-metadata">

**Author:** ![Tomm](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/tomm/32/10625_2.png) [@Tomm](https://community.homey.app/u/Tomm)\
**Post date:** [November 14, 2020, 11:55am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/78 "2020-11-14T11:55:20Z")

</div>

Yep, same problem here…

---

<div class="post-metadata">

**Author:** ![Robert\_Zwetsloot](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/robert_zwetsloot/32/12399_2.png) [@Robert\_Zwetsloot](https://community.homey.app/u/Robert_Zwetsloot)\
**Post date:** [November 14, 2020, 10:24pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/79 "2020-11-14T22:24:55Z")

</div>

??? no problemo in Chrome overhere: Versie 86.0.4240.198 (Officiële build) (64-bits), stylebot v3, a change is unlikely or?

---

<div class="post-metadata">

**Author:** ![M\_a\_r\_c\_o](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/m_a_r_c_o/32/146_2.png) [@M\_a\_r\_c\_o](https://community.homey.app/u/M_a_r_c_o)\
**Post date:** [November 18, 2020, 7:41pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/80 "2020-11-18T19:41:29Z")

</div>

Nope, here with same versions on OSX version 10.14.6 only a white screen!

[2020-11-18\_20-44-32|690x291](https://community.homey.app/uploads/short-url/8slX5WKzRxI1rmT41KfVF7toSmN.png)

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

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