Homey Community Forum

Homey Web App [CSS customization]

Read the entire thread, I haven’t created anything just copied from other people and consolidated. So no credits to me :wink:

1 Like

Surface pro :wink: works great now

I had planned to do that, just haven’t found the time yet, just hang on :wink:

1 Like

I’ve added all different options to the first post, including remarks on what they do and before and after screenshots.
Added the code to the second post without the screenshots for your convenience to copy.


Please be aware. It seems they’re using something which looks like styled components. This is creating a unique class name which, on next deploy might break all your changes.
It might be better to use attribute selectors like:
[class*="Main"] [class*="Root"] [class*="Center"] { ... }
as it is less likely these names are going to change.

Looking at their source code, I’m quite disappointed in their css coding quality.
It is very outdated and hard to maintain.

I don’t have the time to go in detail. But an example is the fixed width of the cards or the lack of using css grid or overuse of flexbox.


Athom just released an update where you can resize the sidebar:

(found on their Facebook page, and is on Instagram too)


I’ve brought this topic to @Emile’s attention on Slack, good to see this is getting picked up!
Now what else do we want… :thinking::stuck_out_tongue_winking_eye:

(Next to landscape view for flows!)


Why is it hard to maintain?

Sounds like Athom is doing all the layouting manually instead of letting the browser take care of it. Does fit with Athom’s NIH paradigm though :joy:

Een paar dingen die me zijn opgevallen zijn:

  • Naming: css-...Grid doet display: flex, css-...Content is geen content, maar nav

  • Flexbox voor containers

  • Pixels: Units zijn pixels. Hierbij heb ik het vermoeden dat er geen vast afstanden zijn voor bijvoorbeeld witruimtes.

  • inline css met svg-data attributen.

  • gebruik van niet bestaande attributen

  • gebruik van tab-index -1

  • overmatig gebruik van css (display: inline-block; width: 20px; min-width: 20px;

  • Onduidelijke custom properties of met een rare prefix: --lvl, --reach-slider, --tmp-color-white (Dit is natuurlijk smaakgevoelig)

  • Gebruik van !important

1 Like

I would like to see that the favourite devices scale to the screen to have them always in one screen instead of scrolling down, just like in your homeydash :blush: I’ve already shared this idea to them :wink:

1 Like

Did Athom update the app? Seems like the custom settings aren’t working anymore. No more horizontal cards, etc.


They seem to work on it pretty often

Flows in landscape does not work anymore but scripta are now online

Yeh, something was changed, now your CSS code does not work anymore (on Windows- Chrome), what to do now?

My guess: wait until it is released as official. It is a beta so things change without notice

Can people leave feedback on the web app asking for the three column mode to be an official option. Maybe if they get asked often enough they might do it. As the previous css changes are quite simple, IF you know what you are doing :-), it surely can’t be a big effort for Athom to implement.

1 Like

New styleBot css for current webApp:

.css-1hu8qec-sc-Center {
    width: 100%;
  display: flex;    

.css-ppwutp-Section {
    width: 33%;

.css-7hhj7-CardContainer {
  width: 95%;

.css-l8ltv8-CardContainer-DraggableFlowCard {
  width: 95%;

.css-x1hjk3-CardContainer-DraggableFlowCard {
  width: 95%;

Thanks @Adrian_Rockall I’ve added the new css to the first posts.

1 Like