Device (or user) dependent frontend configuration (e.g. font, font size, layout, etc.) recommendations

Configuration Frontend
1

What method(s) and custom cards/tools (e.g. browser_mod, card_mod, etc.) would you recommend for changing a view based on the device and/or user? I have a dashboard with ~12 views that works for most of my devices, but I’d like to be able to increase the font size (and maybe a few other tweaks) on other devices without having to create (and keep sync’d) another entire dashboard.

2

card-mod + mediaquery

3

@Ildar_Gabdullin Thank you. I looked into media queries and stumbled across layout-cards, but you’re referring to the more broad use of CSS media queries, right?

Are there any examples of using them with card-mod for the basic syntax structure?

I think I get the general idea would be to use viewport width, etc. as conditionals for anything card-mod can affect. Would this approach also work for a USER-dependent parameter?

4

yes

Do not have them. But there are many examples for CSS with mediaqueries in Internet.

Only if the current user is available for using in templates (which may be used with card-mod).

5

Yeah, I get confused with translating the generic CSS for use in card-mod, but that may be because I started with modifying Mushroom Cards’ CSS. Thanks for pointing me in the right direction!

Actually, @Ildar_Gabdullin before I start into this for my entire dashboard, is there a way to make a global change to font size (which I could then manipulate with a media query)? I know CSS is hierarchical and I’ve reviewed your examples here, but would I need to apply those to each.and.every.card or could I insert a card_mod statement at the top of an entire dashboard to alter all text in the dashboard?

6

@Ildar_Gabdullin Sorry to ping you again. I figured out themes are the best way to make a global change for things like font size, but it seems that templates (which I think is where I would place the media queries you recommended) cannot be used in themes. Do you have any recommendations for applying CSS changes higher up in the DOM than at the card level?

7

I guess it is possible only by using themes (as you already learned).
Never specified a font in themes myself.
Check a popular Noctis theme for examples, it has a different font.

I have not tested with media queries in themes, but templates are working in themes - check these examples.

Like this:

  card-mod-row-yaml: |
      ...
      state-badge {
        {% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %}
        animation: spin 5s infinite linear;
        {% endif %}
      }

You can use any jinjia expressions here.

1 Like