Hi @fastender
About popup cards, when the code will be stable, I will do a request to @paddy0174 to integrate popups.
Hey @paddy0174 is it possible to also get a Name attribute for the battery card? The actual entity name is too long with the addition of ā Battery Levelā. So I would like to set a custom text underneath the battery %.
Now I know the reason why the power outlet card is not being shown:
tap_action:
action: toggle
type: custom:button-card
group_expand: false
hold_action:
action: none
double_tap_action:
action: none
layout: vertical
size: 20px
color_type: icon
show_name: true
show_state: false
show_icon: true
show_units: true
show_label: true
show_entity_picture: false
show_live_stream: false
card_size: 3
state:
- styles:
icon:
- color: rgba(var(--color-yellow),1)
label:
- color: rgba(var(--color-yellow-text),1)
name:
- color: rgba(var(--color-yellow-text),1)
img_cell:
- background-color: rgba(var(--color-yellow), 0.2)
card:
- background-color: rgba(var(--color-background-yellow),var(--opacity-bg))
value: 'on'
- value: unavailable
styles:
custom_fields:
notification:
- border-radius: 50%
- position: absolute
- left: 38px
- top: 8px
- height: 16px
- width: 16px
- border: 2px solid var(--card-background-color)
- font-size: 12px
- line-height: 14px
- background-color: |
[[[
return "rgba(var(--color-red),1)";
]]]
color: var(--google-grey)
styles:
icon:
- color: rgba(var(--color-theme),0.2)
label:
- justify-self: start
- align-self: start
- font-weight: bold
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
name:
- align-self: end
- justify-self: start
- font-weight: bold
- font-size: 14px
- margin-left: 12px
state:
- justify-self: start
- align-self: start
- font-weight: bold
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
img_cell:
- background-color: rgba(var(--color-theme),0.05)
- border-radius: 50%
- place-self: center
- width: 42px
- height: 42px
grid:
- grid-template-areas: '"i n" "i l"'
- grid-template-columns: min-content auto
- grid-template-rows: min-content min-content
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 12px
custom_fields:
notification: |
[[[
if (entity.state =='unavailable'){
return `<ha-icon icon="mdi:exclamation" style="width: 12px; height: 12px; color: var(--primary-background-color);"></ha-icon>`
}
]]]
template: card_power_outlet
label: |-
[[[
if (entity.state =='on') && (variables.ulm_card_power_outlet_consumption_sensor != '' {
return entity.label + ' ' + variables.ulm_card_power_outlet_consumption_sensor + 'W';
} else {
return entity.label;
}
]]]
variables:
ulm_card_power_outlet_consumption_sensor: sensor.kuehlschrank_current_consumption
entity: switch.kuehlschrank
name: Steckdose PC
default_color: var(--primary-text-color)
color_off: var(--paper-item-icon-color)
color_on: var(--paper-item-icon-active-color)
lock:
enabled: false
duration: 5
unlock: tap
Hey,
if I want to start with this UI now, do I use the instructions of the original implementation, or should I rather use the dev branch of @schumijo or @paddy0174 ?
Use the new one, I donāt know how much easier/better it is but I feel like this is the way to go for the future.
I myself will also switch to this one next weekend.
i think it is the future-proof way to go
Hi paddy0174,
is it possible to use the theme with lovelace_gen integration?
In storage mode?
If it works, could you write instructions for it?
Otherwise great work.
Otherwise great work.
lovelace_gen:
lovelace:
mode: storage
dashboards:
ui-lovelace:
mode: yaml
title: Dashboard
icon: mdi:monitor-dashboard
show_in_sidebar: true
filename: ui-lovelace.yaml
After a lot of trial and error, found a way to do conditional confirmations. Below is the code in case anyone else is interested in adding this to their cards. (no reason not to! 
)
Simply add the confirm_text variable with a message to make the confirmation appear. Or leave out the variable and the button will do a standard toggle. Of course, be sure to change the variable to match your card name.
Add the code below to the card.
variables:
custom_card_mwolter_power_outlet_confirm_text: Toggle the eGPU power?
Add this to the template
tap_action:
action: toggle
confirmation: '[[[ return variables.custom_card_mwolter_power_outlet_confirm_text == null ? false : {"text": variables.custom_card_mwolter_power_outlet_confirm_text} ]]]'
hold_action:
action: more-info
- This is the plan. At least thatās how I understood schumijo.
I hope we can integrate that as an alternative to the ānormalā pop-up window. But as far as I can see for now, this will be āasideā, as the core function for this is not coming from this āthemeā, rather than from a lovelace custom-card.
- That fits in the same category as above, this is not coming from this āthemeā, but it should be some kind of integratable with this āthemeā.
- Iāll take care of that shadow. I did that already, but I canāt find the change anymoreā¦must have been lost. Noted.
- Yeah, capitalized lettersā¦thatās one hell of a thing we do to our language.
I set it to lower case after consulting the Duden. Grammatically correct would be lower case here, as this isnāt the start of a sentence. As I said, I had to look it up and decided to switch to lower case according to the Duden.
But there is an easy way around it. Did you useUI- oryaml-mode? - Animated icons are on my wishlist as well, but I havenāt looked into it yet. My idea is to enable that as a feature on a button-by-button basis. Iāll see, what I can come up with.
-
card_light_slider_collapsei noted.
@CM000n
Looks great for a start. 
Grid size is the way to go with button-card, makes it so flexible and easy to āpush aroundā.
Can I take your code and the picture as an example in the wiki? Looks very structured in the code (=good to explain). If you want Iāll do some writing and send it to you for correction and changes. Or you write something upā¦
@mwolter
Noted. Iāll take a look at it.
@huiz13
A fan card is on the way, if you wouldnāt mind to wait a bit. It is somewhere hidden here in this thread, actually there are two versions o a fan card. As I aid, that is coming.
@schumijo
Looking forward to it, but I wouldnāt say you need to do a request - do it!
@Depechie
Noted, looking into it.
@massaquah
~Whatās not working for you?~
Noted as well, will change it. Sorry, must have slipped in, as ā&&ā is not valid javascript
@lukx
Use the main branch of this repo. This is where future changes are made and released. The dev branch on this repo is to bundle the work of all devs into one and than after a review push it to the main branch and do a release. The dev branches of the developer is to push every change, bundle it and push it to the dev branch. Rather long explanation, just use the main branch and youāre good to go.
@Kabala
Lovelace-gen is on my to-do list, but not yet worked on. I havenāt used lovelace-gen by myself, so need to do a little read up.
@mwolter (again)
Why are you needing a confirmation (genuine question)?
But it is something to think about. If itās ok for you, we could add that to the code, at least as a custom-card, something along the way of what you already did, custom_card_mwolter_power_outlet?
Thatās the idea behind this, everybody can enhance to their own needs, and if willing to share, it goes straight to the repo and into the next release (in theory ).
Iāve seen some of you have created issues on Github (thanks, support is always welcome!), Iāll go take a look at them now, as I wanted to start my daily reading here in this thread.
The button generator finally is ready as well, Iāll update the wiki later today.
1 Like
Hello, Itās easy for users to accidentally press a button when scrolling through the interface, which isnāt much of an issue with lights or fans. This adds an extra layer for certain critical or/and security devices to help prevent the unintended activation of these entities. For instance, I have it on my front door lock, garage door (roll up door) controller and an outlet that powers my PC. None of which would be good to accidentally toggle.
Yes, it is ok to use and/or add the code to the next release.
1 Like
@paddy0174
Of course you are welcome to use my code for documentation. That would make me proud.
You can also always find the latest version of my configuration on my GitHub repo at: homeassistant/lovelace-minimalist.yaml at d2463560bd7519f84190f9cdb6532415a77d4a10 Ā· CM000n/homeassistant Ā· GitHub
Iām happy to read over something if youād like to write something. Unfortunately, I donāt know if I can find the time myself. But we can gladly discuss it in a PM
BTW: It would probably be helpful if @tben
could edit his initial post or a new forum thread is opened for the new theme repo. So that everyone also immediately finds the current repo and your great work and is not confused.
2 Likes
Many thanks for everyone involved in this! Things are shaping up real nice
Made some fan cards with two styles that I can hopefully contribute soon.
I havenāt done any popup yet but Iād imagine I would want to have settings there for also adjusting fan speed, oscillation, oscillation angle and natural mode.
6 Likes
Many thanks for making this easy to install and use. For some reason I canĀ“t get the chip icon to work following the documentation. It just does not show any icon at all. What am I doing wrong? And the link in the documentation This is the icon to show. See icons at the end of this page to read more about the used unicode emojis. does not go anywhere what I can tell ( Template list (use) - UI-Lovelace-Minimalist)
- type: 'custom:button-card'
template: chip_icon_state
variables:
ulm_chip_icon_state_icon: 'š¦'
ulm_chip_icon_state_entity: sensor.indoor_humidity_average
@filikun: Yes, I have also noticed that, and already created a PR for it
Fix āchip_icon_onlyā, āchip_icon_stateā and āchip_icon_double_stateā by CM000n Ā· Pull Request #27 Ā· UI-Lovelace-Minimalist/UI (github.com)
So I could fix it at least with my configuration
1 Like
@filikun and @CM000n
Yes, saw that in another issue at Github, and you both are right. I already commented in the PR from @CM000n and Iāll merge that commit later. Next version will solve the issue, thanks CM000n!
@saxel
Looks great, and the fan card is very cool! Just to mention, there are already two other fan cards here in this thread.
I merged your PRs into the dev branch already, but I have some other stuff on the list for the next release, so will be tomorrow or the day after to merge it from dev to main. Thank a lot, much appreciated!
Can I do anything for one of you to support or easy your development? I made some templates for a readme for custom-cards, see the wiki > developer corner for more. If you need something, let me know!
Thanks again to all contributors, that already made changes and improvements to the āthemeā. Really appreciated!
3 Likes
Hi @paddy0174
To easy development of custom cards, maybe it could be interesting to add some āgenericā templates.
For example, now, it only exists the template ālist_itemsā with 3 items.
Maybe we could add templates for 2 items (like you do in ācard_light_slider_horizontalā), 4 items, 2/3-1/3 size (like I do in my light card posted in this thread), etcā¦ ?
I can create a PR quickly (before starting to work on popups 
)
2 Likes
@schumijo
Go, go, go! I would never ever stop you from doing your great work! If you want to come up with a PR, go for it. But you can also setup a āprojectā on Github, so others can chip in to do some work. Do as you please, Iām all in. If something needs to be done, you tell me what to do!
@all
I just released a new version with a few changes. Special thanks for providing PRs for this release goes to (alphabetically ordered):
- @CM000n
- @saxel
- @schumijo
- and all others that helped in the background! There will be a correct list of contributors in the near future.
This is the changelog for the new
Version 1.0.0-beta.6
Fixed
- Fixed
card_light_slider_*: wrong background in dark theme with state==āonā (fix #18) - Fixed
chip_icon_only,chip_icon_stateandchip_icon_double_state(fix #23) (thanks CM000n) - Fixed missing default icon on
card_media_player(fix #21) (thank you again {and again} schumijo) - Fix wrong variable name in
card_light_slider_collapseandcard_light_slider_horizontalby schumijo (fix #13) (thank you schumijo) - Fix
card_power_outletby saxel with PR #20 (fix #14) (thank you again saxel) - Fix
card_batteryby saxel with PR #17 (thank you saxel) - Fix
chip_power_consumptionby schumijo (fix #16) (thanks schumijo)
Changed
- Changed
covertemplate to support covers without ācurrent_positionā attribute (fix #22) (and again, thanks schumijo!) - Update
custom_card_schumijo_flowerby schumijo with PR #15
Added
- Added
chip_navigate(close #24)
Wiki
- Added CodeGenerator Button
The wiki (and foremost the CodeGenerators) will be updated in the next hours! If youāre using the CodeGenerators, check the version number in the downwards right corner of the wiki. If it is v1.0.0-beta.6, the wiki is updated! If you still see v1.0.0-beta.5, you need to come back a little later and refresh the page. Thanks for understanding!
Cheers Paddy
3 Likes
Added a second language file for german with capitalized first letters. 
Will be in the next release.
1 Like
Hi @Vintage89
You can play with the CSS viewport height.
This is what I am using for popups currently under development. It works perfectly for mobile view.
I will share a first preview of my code in next beta
3 Likes
I really like chips because they make the ui a lot cleaner imho, so I made a climate and motion chip.
The climate chip is specific to my thermostats since the icons change based on preset_mode, so if you want to use it, be sure to change accordingly. Maybe someone got a fancy idea how this could be more modularā¦
I just started using this ui and I love it! My write up could probably be a whole lot cleaner though, just a quick one to get started. Maybe someone wants to āchipā in
custom_chip_climate.yaml
chips_climate:
tap_action:
action: more-info
show_icon: true
show_label: true
show_name: false
show_state: false
state:
- operator: template
value: "[[[ return entity.attributes.preset_mode == 'Normal' ]]]"
styles:
icon:
- color: "#FF8100"
card:
- background-color: "rgba(var(--color-theme),0.2)"
- operator: template
value: "[[[ return entity.attributes.preset_mode == 'Night' ]]]"
styles:
icon:
- color: "#90CAF9"
card:
- background-color: "rgba(var(--color-blue), 0.2)"
- operator: template
value: "[[[ return entity.attributes.preset_mode == 'Holiday' ]]]"
styles:
icon:
- color: "#ef5350"
card:
- background-color: "rgba(var(--color-theme),0.05)"
styles:
icon:
- color: "rgba(var(--color-theme),0.2)"
label:
- justify-self: center
- align-self: center
- padding: 0px 6px
- margin: 2px 0 0 0
- font-weight: bold
- font-size: 14px
img_cell:
- width: 24px
grid:
- grid-template-areas: '"i l"'
card:
- background-color: "rgba(var(--color-blue), 0.2)"
- border-radius: 18px
- box-shadow: var(--box-shadow)
- height: 36px
- width: auto
- padding-left: 6px
- padding-right: 6px
size: 80%
chip_climate:
template: chips_climate
show_icon: true
icon: |
[[[
var icon = 'mdi:fire';
if (entity.attributes.preset_mode == 'Normal'){
var icon = 'mdi:weather-sunny';
} else if(entity.attributes.preset_mode == 'Night'){
var icon = 'mdi:weather-night';
} else if(entity.attributes.preset_mode == 'Holiday'){
var icon = 'mdi:leaf';
}
return icon;
]]]
label: |
[[[
return entity.attributes.current_temperature + 'Ā°';
]]]
custom_chip_motion.yaml
chips_motion:
tap_action:
action: more-info
show_icon: true
show_label: false
show_name: false
show_state: false
state:
- operator: template
value: "[[[ return entity.state == 'on' ]]]"
styles:
icon:
- color: "rgba(var(--color-blue),1)"
card:
- background-color: "rgba(var(--color-blue), 0.2)"
styles:
icon:
- color: "rgba(var(--color-theme),0.2)"
label:
- justify-self: center
- padding: 0px 6px
- font-weight: bold
- font-size: 14px
img_cell:
- width: 24px
grid:
- grid-template-areas: '"i l"'
card:
- border-radius: 18px
- box-shadow: var(--box-shadow)
- height: 36px
- width: auto
- padding-left: 6px
- padding-right: 6px
size: 80%
chip_motion:
template: chips_motion
icon: "mdi:run"
9 Likes