No problem ! Hope you like it 
Here comes the code:
- I am still trying to adapt your things
The neon.theme looks fine.
Your code is not complete. I think you missed some bits 
How to change the position on molten card light ?
I test on ipad and it’s necessary to resize the card but the molten is not center of new position button card light …
And another problem I configure de light.xxxxxxx but the view iss not good
the light is sonoff TX 2 gang 5a gang to on and 1 gang to off)
thank’s for your help @danieljarhult
Hello!
To move the light behind the “lightcard” take a look at my code at line 21.
- type: 'custom:button-card'
icon: 'mdi:checkbox-blank-circle'
color: auto
entity: light.fasad
show_name: false
styles:
card:
- background: transparent
- height: 400px
- width: 400px
icon:
- width: 250px
- filter: blur(30px)
state:
- value: 'off'
styles:
icon:
- display: none
style:
top: 275px
left: 330px
Use the style parameter to move it.
About the light slider, if your light is dimmable try to add displayType: slider.
Like this:
entity: light.fasad
icon: 'ios:lightbulb'
hideState: null
sliderColor: var(--accent-color)
brightnessHeight: 140px
displayType: slider
brightnessWidth: 50px
fullscreen: true
sliderThumbColor: var(--accent-color)
sliderTrackColor: '#3a3c55'
style:
top: 190px
left: 65px
height: 400px
For lightcard is OK very thank’s @danieljarhult
but for light is OK and not OK
The light is the sonof TX and is no the possible on sonoff to use slider for brightness
but the bulb is the philips hue bulb
And my question is, it’s possible to use the icon bulb (1) to on/off the light and use the slider for brightness the hue and the color panel circle ?
Hello that is not possible. But you kan do like this as a workaround wich will look and work the same.
- Hide the state and icon and just keep the slider for your hue light.
- Add an icon to the “salon” text (custom button) and make it a toggable button for your sonof tx entity.
I started creating a mobile version as well. It’s far from finished, but here is a little sneak peek:
7 Likes
That is awesome great work 
i am doing a mobile interface aswell but it will be something completly different from neon.
Really curious to see what that looks like :). Keep us posted.
1 Like
Dude this is amazing. I want to be like you when I grow up…in my 30s btw
Ha Thanks !
really cool.
Is there a chance to get your code?
The UI should be fairly scalable as is, however, I am not an expert on CSS
Alright, I am fairly new to this and a little stupid. how do I load your code into my dashboard after having changed entities and such? when I do I get either nothing at all or only see half the cards. Thanks and sorry for my stupidity
Hello! Don´t ever feel stupid for asking a question.
In lovelace, choose to add a card. Press show code-editor in the bottom left and paste my code. That should be it. Make shure you have put the view in panel mode and that you have followed my instructions in the first post.
If you send me a picture on how it looks it would be a little easier to help you out !
trying to use the referenced swipe-card to swipe through a few picture elements cards, but one of those cards contains light-popup-cards which have vertical sliders. Once wrapped in a swipe-card, I can no longer use the slide ability of the popup cards contained within…anyone have any ideas?
Hi @danieljarhult,
I tried to put your real cool cards in a grid-card.
Therefore I had to adjust this line:
card:
- height: 220px
- width: 150px ```
to
- height: 220px
- min-width: 150px
to get it shown correctly in the grid-card.
But now the card has more width then your original version and the graph isn’t shown the full width.
I am not a css crack - do you have a tip for me, how I could reduce the width.
Here is the complete Code of the grid-card:
1 Like
First of all, thanks @danieljarhult for sharing your code, it is awesome and now im playing with it, i can´t imagine how hard was assemble everything. so Thanks.
i´m facing an issue, that circle card keeps moving around, once and while, does anyone have a hint on this?
there is my code
- type: 'custom:circle-sensor-card'
entity: sensor.geracao_somada
stroke_width: 10
max: -2500
min: 0
name: Geração
gradient: true
color_stops:
'-1': '#FF0000'
'-500': '#ffa500'
'-2500': '#00FF00'
fill: '#3a3c55'
font_style:
color: 'rgba(255, 255, 255, 0.4)'
font-size: 16px
stroke_color: '#d580fc'
style:
top: 0px # i changed top and left positioning to match correct position after it moved, but then it moves again to where it was originally
left: 0px
width: 150px
in lovelace it shows like this:
then i correct the position. and after a couple of hits to the page with no issues, circles move again.
any hint on what it could be? i´m using the same browser (chrome), and the only changes are that, not always but sometimes it happens after i´m messing with other entities, not related to circle card.
Hi! I am not really shure what you mean but Try to keep the original width and then you can use empty/transparent button cards to fill up the spaces between my Cards.