Perfect, thanks alot.
Lots of changes, with templates and custom CSS seeming to be the biggest ones.
- v0.15.0 —
- Added custom HTML templates.
- Added custom CSS for cells and rows (also works in templates), “card_mod” is no longer needed!
- Added new domains. The existing list of domains (input_boolean, input_number, input_select, input_button, input_datetime, input_text) that the editor considers as “input controls” has been expanded with new ones: switch, number, select, button, datetime, date, time, text.
- Added REL and REL_SHORT tokens in the “Date/Time format & Text override” field, they return a localized description of the time elapsed (full and short).
- Added support for “mode” variable for input_number. Now you can render a box in addition to the slider.
- Added ability to hide values next to the slider (input_number).
- Improved “Nothing” behavior in “Tap & Hold Actions”.
- Fixed separator width when breakpoint hides column.
- Improved clickable area on “Show control” and “Use unit from entity” labels.
I’ve added two new sections to the readme: templates and examples.
I don’t have any plans for new features (unless someone suggests something interesting). I’ll try to focus on preparing additional examples for now.
I’m waiting for your feedback!
1 Like
I haven’t found it so far but is there a way to display live video on the card such as from a Ring camera? So far I only see how to display the URL.
No, you can display icons, text, entities (state!), attributes, or input controls.
I don’t have a camera I could connect to HA, and without it, it would be difficult to add this functionality.
However, if your camera allows you to display video via an iframe, you can try embedding the iframe in the FCC template.
Thanks for responding! Not sure if you’re interested in adding the feature but here is an example of a card that will show the live view when you add a Camera Entity to the card.
how can I change the the space between icon and value?
1 Like
Custom CSS can be added to a cell/row/entire table. You can also use negative values.
td ha-state-icon {
margin-right: 150px;
}
In your web browser, press F12 and then find the “inspect” tool. In Chrome, it looks like this:
This will help you know which names/classes to use.
that helps a lot…
thank you
1 Like
I was supposed to focus on adding examples, but for now I’ve added one more functionality:
- v0.16.0 —
- Added advanced copy and paste of table configuration.
is there a default possibility to change only the icon color if i show icon and value is selected?? Or only via the Custom CSS section?
Also is there a way to use as color a attribute? Something like:
"{{state_attr('sensor.co2', 'color') }}"
“Content color” – this sets the color for the entire cell content. If you want to set a different color for the icon and text, place them in two cells or use custom CSS:
td ha-state-icon{
color: red !important;
}
The Flex Cells Card doesn’t support Jinja.
any other method to archive to get the color from an attribute? JS?
Something like this:
template:
- sensor:
- name: "Copy of X - icon color from Y"
unique_id: "copy_of_x_icon_color_from_y"
state: "{{ states('sensor.x') }}"
attributes:
friendly_name: "{{ state_attr('sensor.x', 'friendly_name') }}"
icon: "{{ state_attr('sensor.x', 'icon') }}"
icon_color: >
{% set c = state_attr('sensor.y', 'color') %}
{{ c if c is not none else 'grey' }}
But this is just an example, I don’t know if it can be achieved this way.
this i already have but i want to use the color attribute for a any kind of color in the card (background, content, etc.)
You can’t use color from an attribute this way. You can use HTML formats and variables from this link: frontend/src/resources/theme/color/color.globals.ts at be319503f78f4e8fcd34a5f1058636e8f97646ca · home-assistant/frontend · GitHub
hmm ok, to bad… but maybe in any future release 
thank you
Not icon_color, but hs_color. Below is a working example I’ve tested. The icon color depends on the light state:
template:
- sensor:
- name: "Color Test"
unique_id: sensor_color_test
state: "{{ states('sensor.atc_sypialnia_temperature') }}"
unit_of_measurement: "°C"
icon: "{{ state_attr('sensor.atc_sypialnia_temperature', 'icon') or 'mdi:thermometer' }}"
attributes:
hs_color: >-
{% set light_state = states('light.zarowka_hue_sypialnia') %}
{% if light_state == 'on' %}
[120, 100] # green
{% else %}
[0, 100] # red
{% endif %}
friendly_name: "Color Test"
device_class: "{{ state_attr('sensor.atc_sypialnia_temperature', 'device_class') }}"
state_class: "{{ state_attr('sensor.atc_sypialnia_temperature', 'state_class') }}"
how can I change the background and border-radius of the whole card.
narmaly I do it this way
card_mod:
style: |
ha-card {
--ha-card-border-width: 1px;
border-radius: 5px !important;
border: 0.1px outset black !important;
box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.66) !important;
background-color: rgba(0,0,0,0);
}
Edit:
found it out. .card works
card_mod:
style: |
.card {
--ha-card-border-width: 1px;
border-radius: 5px !important;
border: 0.1px outset black !important;
box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.66) !important;
background-color: rgba(0,0,0,0);
}
There’s no need to use card_mod. I’ve covered that in the “templates section”. Here’s how it works:
This is where you can write styles for the entire card. There’s also “custom CSS” for rows and cells.
If you have any cool CSS, templates, or configurations for the FCC, please share them in show-and-tell category.
Below is a simple example that I borrowed from this site https://codepen.io/t_afif/pen/qBvXXBe
<style>
.fcc-template-card{
border-color: transparent!important;
background-color: transparent !important;
padding: 0 !important;
}
.testClass {
--s: 20px;
--w: 200px;
width: round(var(--w),4*var(--s));
aspect-ratio: 1;
padding: var(--s);
border: var(--s) solid #0000;
box-sizing: border-box;
background: conic-gradient(#CD8C52,#5E9FA3,#CD8C52) border-box;
border-radius: calc(3.5*var(--s));
mask:
radial-gradient(calc(sqrt(2)*var(--s)),#000 calc(100% - 1px),#0000),
conic-gradient(#000 0 0) content-box,
radial-gradient(calc(sqrt(2)*var(--s)),#0000 100%,#000 calc(100% + 1px))
var(--s) var(--s) padding-box;
mask-size: calc(var(--s)*4) calc(var(--s)*4);
}
</style>
<div class="testClass">
<fcc/>
</div>
