Hide icons in config-template-card when off

Configuration Frontend
1

Hi,

I have a floor-plan based upon the config-template-card.
There are too many icons and I need to reduce :wink:

Now I want to hide the icon of the smoke-detector as long as no smoke has been detected.

How can I do this? I know GIYF, but I don’t find any documentation or help for that.

2

General suggestion:
post a SHORT version of the problematic card with MINIMAL number of entities and w/o unrelated things if you are looking for a help.

If by “floor plan” you mean a stock Picture elements card - then conditional elements (see Docs for this card) can be used to hide/show an element conditionally (i.e. this is unrelated to config-template-card).
If you placed a whole Picture elements card inside config-template-card (CTC) due to some reasons - this is a BAD practice; use CTC for a particular element (check Docs for CTC).
All CTC-related questions better to discuss in the main thread. Also, check if you really need CTC to achieve your goals.

3

Thanks for you answer.

Here is the relevant parts of the code of my card.
ATM the smoke-detector is shown always - I want to hide it when state is “no smoke”

type: custom:config-template-card
entities:
  - sun.sun
  - binary_sensor.rauchmelder_eg_flur_smoke
card:
  type: picture-elements
  image: /local/floorplan/EG-dunkel.png
  style: |
    ha-card:first-child {
      background: rgba(42, 46, 48, 1)
    }          
  elements:
    - type: image
      action: none
      entity: sun.sun
      state_image:
        above_horizon: /local/floorplan/EG-Tag.png
        below_horizon: /local/floorplan/transparent.png
      tap_action:
        action: none
      hold_action:
        action: none
      style:
        top: 50%
        left: 50%
        width: 100%
        height: 100%
    - type: state-icon
      entity: binary_sensor.rauchmelder_eg_flur_smoke
      title: Rauchmelder-EG
      state_color: true
      style:
        left: 50.0%
        top: 22.0%
        "--iron-icon-stroke-color": "#969696"
        border-radius: 20%
        text-align: center
4
  1. This is not a short code - it still contains unrelated things like “image” element & card-mod code (which is not working). Not critical, but suggest to not post unrelated things.
  2. Already told you about using picture-elements (PE) inside CTC - wrong practice.
  3. You placed PE inside CTC - but not using any CTC functionality, i.e. it is unclear why CTC is used.
  4. Check for “conditional elements” in Docs for PE: it will allow you to show the “state-icon” element dependently on an entity’s state.
5

Thanks. Conditional was the solution.