This doesn’t seem to work.
- type: grid
view_layout:
grid-area: footer
square: false
columns: 3
cards:
- type: horizontal-stack
card_mod:
style:
hui-grid-card:nth-child(9) $: |
#root {
margin-top: -20vh;
}
cards:
- type: picture-elements
image: /local/xboxavatar/background128.png
elements:
- type: image
entity: binary_sensor.chezpaul
state_image:
'on': /local/xboxavatar/paul.png
'off': /local/xboxavatar/blank.png
style:
overflow: visible
left: 15%
top: 10%
height: 20%
width: 20%
Haha, same problem as @odiv it seems.
I tried it after type:grid and after type: picture-elements too.
Also tried this:
card_mod:
style:
hui-grid-card:nth-child(9):
$: |
#root {
margin-top: -30vh;
}
Same result.
Okay, read my answer and it’ll work
Testing me… 
#################################################
# #
# SWIPE CARD MARGIN #
# #
#################################################
$swipe-card$:
.: |
div {
height: 100%;
}
hui-horizontal-stack-card$:
.: |
hui-conditional-card {
margin: 0 !important;
}
hui-grid-card:nth-child(9):
$: |
#root {
margin-top: -10vh;
}
Getting closer but still doesn’t do anything… 
I’m sorry, it seems over my pay grade. I added it to themes.yaml but I’m not sure what card_mod needs to say at this point in ui-lovelace. It shouldn’t say anything since it’s in the theme now? At least that’s how I see it.
Maybe I got that wrong too.
That’s correct 
but you your indentation is wrong
My fault for adding swipe-card in the middle of everything
@chezpaul2 I understand we must to use like this:
type: custom:mod-card
card:
type: vertical-stack # for example
...
card_mod:
style: |
ha-card {
...
}
It is right @Mattias_Persson?
This indentation? It’s the same as yours… seems to fit with what’s already there in themes yaml
Tried this too:
hui-grid-card:nth-child(9)$:
.: |
#root {
margin-top: -20vh;
}
Or maybe you’re telling me it doesn’t go in swipe card section…
- copy this
#################################################
# #
# SWIPE CARD MARGIN #
# #
#################################################
$swipe-card$:
.: |
div {
height: 100%;
}
hui-horizontal-stack-card$:
.: |
hui-conditional-card {
margin: 0 !important;
}
hui-grid-card:nth-child(9):
$: |
#root {
margin-top: -5vh;
}
-
paste it in
themes.yaml -
don’t change
hui-grid-cardindentation
edit:
check if child(9) is actually 9 with https://matt8707.github.io/card-mod-helper/
You can use mod-card or themes
yes, I had checked that it was child(9).
And yes, it now works with that indentation.
Thanks Mattias!
This is really cool, @Mattias_Persson.
Would it be possible to get a couple of hints as to how one can get this working?
I’ve tried, but both my rpi and AppDaemon seems to complain about something.
I’m obviously a novice here. From what I can tell from the logs, there might be something obvious - I’m just not able to find it on my own. 
/config/appdaemon/apps/jwst.py:
File "/usr/lib/python3.9/site-packages/appdaemon/app_management.py", line 770, in read_app
importlib.reload(self.modules[module_name])
KeyError: 'jwst'
During handling of the above exception, another exception occurred:
Traceback (most recent call last):
File "/usr/lib/python3.9/site-packages/appdaemon/app_management.py", line 993, in check_app_updates
await utils.run_in_executor(self, self.read_app, mod["name"], mod["reload"])
File "/usr/lib/python3.9/site-packages/appdaemon/utils.py", line 337, in run_in_executor
response = future.result()
File "/usr/lib/python3.9/concurrent/futures/thread.py", line 52, in run
result = self.fn(*self.args, **self.kwargs)
File "/usr/lib/python3.9/site-packages/appdaemon/app_management.py", line 775, in read_app
self.read_app(file)
File "/usr/lib/python3.9/site-packages/appdaemon/app_management.py", line 784, in read_app
self.modules[module_name] = importlib.import_module(module_name)
File "/usr/lib/python3.9/importlib/__init__.py", line 127, in import_module
return _bootstrap._gcd_import(name[level:], package, level)
File "<frozen importlib._bootstrap>", line 1030, in _gcd_import
File "<frozen importlib._bootstrap>", line 1007, in _find_and_load
File "<frozen importlib._bootstrap>", line 986, in _find_and_load_unlocked
File "<frozen importlib._bootstrap>", line 680, in _load_unlocked
File "<frozen importlib._bootstrap_external>", line 850, in exec_module
File "<frozen importlib._bootstrap>", line 228, in _call_with_frames_removed
File "/config/appdaemon/apps/jwst.py", line 8, in <module>
r.html.render(sleep=0.5) #js
File "/usr/lib/python3.9/site-packages/requests_html.py", line 586, in render
self.browser = self.session.browser # Automatically create a event loop and browser
File "/usr/lib/python3.9/site-packages/requests_html.py", line 727, in browser
self.loop = asyncio.get_event_loop()
File "/usr/lib/python3.9/asyncio/events.py", line 642, in get_event_loop
raise RuntimeError('There is no current event loop in thread %r.'
RuntimeError: There is no current event loop in thread 'ThreadPoolExecutor-0_2'.
Sorry, don’t know much about AppDaemon
Hi @Mattias_Persson my TV has a different state than just on . Where can I add these entity states for icon_monitors?
Is anyone using Apex Charts to embed charts into the square buttons on the dashboard? - I’m looking at placing a button for each room on my dashboard that will show the temperature with a chart graphing the recent history… not sure exactly where to start embedding that though!
Hi Mattias, thats just awsome, but for me as I`m kind of new to this, its hard to follow and edit. I did all the changes above but the buttons dont work, here is no popup? And how do I add all my smart devices to the dashboard?
In the ui-lovelace.yaml file you have all the button-cards. There you have to put the entity that represents each device.
Example
- type: custom:button-card
entity: switch.1000447232
name: Luz Balcon
template:
- base
- icon_spot
All the files that are in the include and popup folders have to be configured with your entities and data that you want to show.
It is a fairly complex code but super verbose so with time you will understand how it works
Hi, i figurt some things out, but how can I see, why the popup isnt working? Is there a description for the template, what means base, light and so on?
And do I have to change something here?:
homeassistant:
packages: !include_dir_named include #theme
And how can I create such cards?
Hi, wie sieht denn dein template “thermostat” aus?
I dont use this anymore, sorry. I dont have my Thermostat on the Dashboard. Less is more 