Share your Lovelace Projects (specifically ios/android versions)

This is the current state of my constantly changing lovelace setup, viewed from my phone.

Home Screen:

Some other Examples:

4 Likes

how did u managed to get those titles (like sensoren)?
what theme are you using?
since i guess you using the button-card: mind sharing your template?

You are correct the titles are button cards, here is the code:

- type: "custom:button-card"
  name: QUICK LINKS UND INFOS
  color_type: label-card
  color: 'rgba(0, 0, 0, 0)'
  styles:
    card:
      - height: 30px
      - padding: 0%
    name:
      - font-size: 20px
      - font-family: Oswald
      - color: "#ffffff"
      - justify-self: start
      - padding-bottom: 3px

The theme i’m using is an edited version of Clear Theme Dark

1 Like

It could be done much easier with markdown cards though. That is how I use it in my current setup, see screenshot:

2 Likes

The button cards don’t add to much bulk to the config when using button card templates, but I might consider changing over to markdown cards. Thanks for the tip :+1:t2:

Using markdown would be my preference solely because it is a core card.

Config would look something like this:

type: markdown
style: |
  ha-card {
    background: transparant;
    font-family: yourfont;
    font-size: 15px;
  }
content: Livingroom

You can simply template this as well. Saves you a lot of code I think and it will persist even if button card will stop working (for whatever reason, which has happened in the past where button-card got broken for months until @romrider picked it up).

You do need card-mod though!

Edit: though you are right, your code isn’t as excessive, but still I think core cards should be better for this as it is… well it is core :rofl::joy:.

When used in combination with lovelace gen your actual config will be 2 lines for each “headline”. As opposed to decluttering-card which will need 3 lines. (Sounds a bit picky I know srry haha)

2 Likes

thats also a nice idea.
however i have a border around the card now, guess of the theme?!

do you know if there is a way to remove that?

Using markdown? Try this

type: markdown
style: |
  ha-card {
    background: transparant;
    font-family: yourfont;
    font-size: 15px;
    box-shadow: none;
  }
content: Livingroom

Should be enough, if it isn’t you could add border-radius: none;

Though I believe box shadow should be enough.

1 Like

I’m already using card-mod and lovelace gen so I tried your suggestion. You are right, using button card for titles is somewhat overcomplicating things.

- !include
  - ../includes/titles.yaml
  - title: QUICK LINKS & INFOS

titles.yaml

# lovelace_gen
type: markdown
style: |
  ha-card {
    font-size: 20px;
    font-family: Oswald;
    height: 30px;
    background: none;
    margin-top: -0.9em;
    margin-left: -10px;
    margin-bottom: 0.9em;
  }
content: {{ title }}
1 Like

Yes exactly like this!

It’s amazing how it is possible to miss new and better way to do something simply because doing it the old way works!

However….
Is there a way to template the style elements? I can’t get it to work.
e.g.

  default:
    - font-size: 24px
    - background: none
    - box-shadow: none
  card:
    type: markdown
    content: '[[label]]'
    style: |
      ha-card {
        background: '[[ background ]]';
        font-size: '[[ font-size ]]';
        box-shadow: '[[ box-shadow ]]';
      }

Hm, I wonder what the config above card is?

However I don’t think templating like that will work. Looking at the config I assume you use decluttering-card? I believe it is possible with lovelace_gen though.

You can however use jinja inside that area. I myself use it with input_selects and an automation. For example, I can change the entire theme’s border radius and box shadow by flipping a switch (input_select). You can find my repo at https://github.com/jimz011/homeassistant for some examples (warning! There is a lot on the repo!)

Anyways what you are trying to do is (to my knowledge) not possible with decluttering-card. Try it with lovelace_gen maybe like the above example by @aFFekopp.

1 Like

hi, trying to understand what you’re doing here… how is this a card config?

could you please show what is above the first include? thanks!

It’s using :small_blue_diamond: Lovelace_gen - Add abilities to ui_lovelace.yaml. The include is referencing the code in titles.yaml that I have also posted.

Take a look at the Lovelace Gen documentation: Passing arguments to included files

o right, I see.
I dont use lovelace_gen thats why I was surprised by the code you posted. Just so I understand correctly, this is in fact a template using the title QUICK LINKS & INFOS as variable? Which can be done also using a decluttering template I think,

card:
  type: markdown
  style: |
    ha-card {
      font-size: 20px;
      font-family: Oswald;
      height: 30px;
      background: none;
      margin-top: -0.9em;
      margin-left: -10px;
      margin-bottom: 0.9em;
    }
  content: '[[title]]'

in this case?
Cool, thanks for pointing me to Lovelace_gen…

Correct it’s similar to decluttering templates

My main screen from phone

1 Like

Hello!

I’m really inspired by all the ideas that’s been shared within this thread :dizzy: I recently decided to redo my UI and went for a cleaner look. Here is how it looks on our wall mounted tablet:

Different devices are divided into different views

Thanks again to everyone for sharing all the awesome UIs :heart:

10 Likes

I’ve done something simple (mobile only) like this:

7 Likes

Nice @postlund. Simple can be nice you know :stuck_out_tongue:

Any eta on the atv component btw?

Merry Christmas