Share your Lovelace Projects (specifically ios/android versions)

Ok, and how do you do that? How do you serve a different lovelace ui per client ?

You can’t however you can use compact custom header to have different views hide for different user agents. For example if I had 4 views:
Home - lights - devices - ipad

I could make the first 3 views hide on ipad (so it would essentially have a single view) and hide the ipad view for all smartphones.

Only when loading the component it will show all views but after it is done loading it will just look like the tabs don’t exist (they can not be accessed either with other user agents.

Looks really cool, mind sharing your lovelace conf?

Here you go :slight_smile:

1 Like

Just wanted to share my lovelace, using the clear theme and coloured icons from :grinning:

This is how it looks on tablet

And this is on iOS

Thanks everyone for sharing :hearts:


Awesome! Thanks for sharing. Where did you get the icons for your family from?

I got the icons from Bitmoji. Your theme is absolutely awesome :boom::+1:

Thank you :heart:

This is my Panel. Had to up my photography skills and used photos of the actual rooms. Used a combination of Picture Elements, Vertical Stacks including the following custom elements:

  • Banner-Card

  • Card-mod

  • Garbage Collection Card


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

Home Screen:

Some other Examples:


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"
  color_type: label-card
  color: 'rgba(0, 0, 0, 0)'
      - height: 30px
      - padding: 0%
      - 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:


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)


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


# 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!

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

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