🟣 Rounded - Dashboard guide

[mloTek]

Hi @LE0N ,

could you (or anybody else) share your code for the template sensor for the television card with me, to display the correct source from the media_player source list? Thanks a lot.

[sebbaT]

Try this - I don’t have a suitable bin calendar to test but the rest should work.

type: custom:button-card
template: title_card
entity: sensor.greeting_time
show_icon: false
show_label: true
name: >
  [[[ 

  const emojis = ["!", ".", ". 😉", "! 👍", ". 🤩"];
  const randomEmoji = emojis[Math.floor(Math.random() * emojis.length)];

  return (entity.state) + ', ' + hass.user.name + randomEmoji
  
  ]]]
label: >
  [[[

  const weather = states['weather.buienrader'].state;
  const outdoorTemperature = states['sensor.outdoor_temperature'].state;
  const evBatteryLevel = states['sensor.ev6_ev_battery_level'].state;
  const evRange = states['sensor.ev6_ev_range'].state;
  const binsMessage = states['calendar.bins'].attributes.message;
  const binsStartTime = states['calendar.bins'].attributes.start_time;

  const weatherString = `☁🌡 The weather is ${weather} and it's ${outdoorTemperature}°C outside.`;

  let evStatusString = `<br> 🚗`;

  if (evBatteryLevel === 'unavailable') {
      `<br> 🚗`
  } else if (parseFloat(evBatteryLevel) > 50) {
      evStatusString += ` EV6 battery is almost empty, battery level is ${evBatteryLevel}% (${evRange} KM range)`;
  } else {
     `<br> 🚗`;
  }

  const binsDateString = `<br>♻️ ${binsMessage} on ${new
  Date(binsStartTime).toLocaleDateString('en-US', {
      day: 'numeric',
      month: 'short'
  })}`;

  return weatherString + evStatusString + binsDateString

  ]]]

[jeells102]

Heya,

This is a really simple change. Under the state section and style, just add “background” and then the colour you want. So for example;

        - value: home
          styles:
            card:
              - background: '#CEF595'
            entity_picture:
              - border: 2px solid var(--severity-5)

Hope this helps

[Bully89 (Bas)]

Very much! Thanks a lot

Focused to much on the “background_color”

[MilesTEG]

Hello,
I like very much this theme . I’ll try to implement it

[Still_ill]

Thank you very much! This has definitely helped me with my “2 card layout”. This will help me a lot with the dashboard in the mobile version.

In the meantime I have also realized that it is easier for me to work with rectangular button-cards only. For one thing, it looks better and more uniform, and for another, it makes the layout easier for me.
Unfortunately, I still can’t manage to write the layout in such a way that the height adapts to the tablet… But since I don’t want to annoy you with my constant questions, I’ve created a thread here in the hope that the community will know what to do. If you still don’t mind, I would of course, as always, be very happy about your help =)

[scorpionkoen]

Hey @jeells102, could you please share your code from one of your plug cards? I’d really appreciate it!

[jeells102]

Hey!

Yeah you’ve got it!

type: custom:button-card
entity: switch.media_centre
name: Media Centre
show_icon: false
styles:
  card:
    - border-radius: 25px
    - border-style: none
    - box-shadow: 0px 0px 10px -9px black
    - background-color: |
        [[[
          return states['switch.media_centre'].state === 'on' ? '#CEF595' : '';
        ]]]
  grid:
    - grid-template-areas: '"icon_cells" "n" "button"'
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content
  custom_fields:
    icon_cells:
      - justify-self: start
      - margin-top: 12px
      - margin-left: 15px
  name:
    - font-size: 90%
    - font-weight: bold
    - justify-self: start
    - margin-top: 6px
    - margin-left: 15px
    - color: |
        [[[
          return states['switch.media_centre'].state === 'on' ? 'black' : 'grey';
        ]]]
custom_fields:
  icon_cells: |

    [[[
           var state = states['switch.media_centre'].state;
           if(state == "on")
            return `<ha-icon
            icon="mdi:television-classic"
            style="width: 25px; height: 25px; color: black;">
            </ha-icon>
            `;
           else 
            return `<ha-icon
            icon="mdi:television-classic-off"
            style="width: 25px; height: 25px; color: grey;">
            </ha-icon>
            `;
          ]]]
  button:
    card:
      type: custom:button-card
      entity: switch.media_centre
      show_icon: false
      show_name: false
      styles:
        card:
          - border-style: none
          - margin-top: '-4%'
          - margin-bottom: '-5%'
          - background-color: transparent
        grid:
          - grid-template-areas: '"state icon_cells"'
          - grid-template-columns: min-content 1fr
          - grid-template-rows: min-content
        custom_fields:
          state:
            - justify-self: start
            - align-self: middle
            - font-size: 12px
            - filter: opacity(50%)
            - margin-left: 15px
            - margin-top: 1.6px
          icon_cells:
            - justify-self: end
            - align-self: start
            - margin-right: 15px
            - width: 45px
      custom_fields:
        icon_cells: |
          [[[
           var state = states['switch.media_centre'].state;
           if(state == "on")
            return `<ha-icon
            icon="mdi:toggle-switch"
            style="color: #000000;">
            </ha-icon>
            `;
           else 
            return `<ha-icon
            icon="mdi:toggle-switch-off"
            style="color: grey;">
            </ha-icon>
            `;
          ]]]
        state: |
          [[[
            var state = states['switch.media_centre'].state
            var power = states['sensor.media_centre_power'].state
           if(state == "on")
            return `<span style="color: black;">${power}W</span>
            `;
           else 
            return `<span style="color: grey;">Off</span>
            `;
          ]]]

[Still_ill]

the plugs cards look great. Can you maybe share the code? that would be really nice

[jeells102]

Hey,

I posted my plug card in this post - 🟣 Rounded - Dashboard guide - #382 by jeells102

Take a look there

[Still_ill]

Unbelievable, I’ve probably gone through this whole thread 5 times and must have missed it. It was so close that I almost hit my head on it thank you very much

[Nemu]

Awesome theme and instructions. Love this material design. Combined with bubble card, this is incredible. Created a custom HVAC Button-Card for my Aquara E1 as well.

[mloTek]

How does it look like?

[hellboy-wien]

Hello guys, I just started with the cool theme today and I’m thrilled.
But I have a small problem that I can’t get any further at the moment.
I can no longer click the edit button because it disappears under the “bottom bar”.

And is it possible to use Bubble Card without this offset to the right (I hope you can see it in this bright picture). It’s no longer in the middle.

Thanks for your help

How do I have to adapt the code so that I have the edit button higher up?

I dont know how to fix that:

[nldroid (Rob)]

I think i’ve tried everything in this thread to minimize the margin between cards but i can’t seem to fix it.Whats the easiest way of setting the top and bottom margin for all cards?

In the generated html i see this for example:

<hui-horizontal-stack-card style="margin-bottom: 40px;margin-top: 5px;">

I’ve done nothing fancy. Just copied the examples from Leon…

[nldroid (Rob)]

Ok, found it: masonry-view-card-margin: 10px 20px

[Arroma]

I’ll show you another dashboard that I created by collecting ideas from the community and revisiting them a bit, thanks to all the people who shared their creations!

Thread

GitHub

[CM000n (Simon)]

Hi @Arroma. That looks great! Simple but professional
Is there any way you could share the code for your dashboard/theme with us. GitHub or something similar?
It would be great to be able to try that out for myself

[Arroma]

Proud to see that you are interested!
I added the link to github

[CM000n (Simon)]

Thanks you so much
I will definitely take a look at it and try it out