Hey you Guys and Gals,
I’m using the Rounded Theme for my dashboard and I want to use a custom button card from the Minimalist Theme. The documentation from that provides the code for the Card as well as the needed template code.
The thing is, in don’t want to use minimalist and just need this single card.
How can I implement only this card instead of installing this whole theme?
Thanks in advance!
I already have the custom button card 
But the thing is, that the code for said card is this:
type: "custom:button-card"
template:
- card_input_datetime
entity: input_datetime.YOUR_INPUT_DATETIME_ENTITY
variables:
ulm_card_input_datetime_name: "YOUR_NAME"
and the code for the needed template within the card is this:
custom_card_input_datetime.yaml
---
card_input_datetime:
show_name: false
show_icon: false
variables:
ulm_card_input_datetime_name: "n/a"
triggers_update: "all"
styles:
grid:
- grid-template-areas: "'item1' 'item2'"
- grid-template-columns: "1fr"
- grid-template-rows: "min-content min-content"
- row-gap: "12px"
card:
- border-radius: "var(--border-radius)"
- box-shadow: "var(--box-shadow)"
- padding: "12px"
custom_fields:
item1:
card:
type: "custom:button-card"
template:
- "icon_info"
- "ulm_translation_engine"
- "input_datetime"
tap_action:
action: "more-info"
entity: "[[[ return entity.entity_id ]]]"
name: "[[[ return variables.ulm_card_input_datetime_name ]]]"
item2:
card:
type: "custom:button-card"
template: "list_3_items"
custom_fields:
item1:
card:
type: "custom:button-card"
template: "widget_icon"
tap_action:
action: "call-service"
service: "input_datetime.set_datetime"
service_data:
entity_id: "[[[ return entity.entity_id ]]]"
time: >
[[[
var timestamp = entity.attributes.timestamp
let unix_timestamp = timestamp - 4500;
// Create a new JavaScript Date object based on the timestamp
// multiplied by 1000 so that the argument is in milliseconds, not seconds.
var date = new Date(unix_timestamp * 1000);
// Hours part from the timestamp
var hours = date.getHours();
// Minutes part from the timestamp
var minutes = "0" + date.getMinutes();
// Seconds part from the timestamp
var seconds = "0" + date.getSeconds();
// Will display time in 10:30:23 format
var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
return formattedTime;
]]]
icon: "mdi:arrow-down"
item2:
card:
type: "custom:button-card"
template: "widget_text"
entity: "[[[ return entity.entity_id ]]]"
tap_action:
action: "call-service"
service: "input_datetime.set_datetime"
service_data:
entity_id: "[[[ return entity.entity_id ]]]"
time: >
[[[
var timestamp = entity.attributes.timestamp
let unix_timestamp = timestamp - 3540;
// Create a new JavaScript Date object based on the timestamp
// multiplied by 1000 so that the argument is in milliseconds, not seconds.
var date = new Date(unix_timestamp * 1000);
// Hours part from the timestamp
var hours = date.getHours();
// Minutes part from the timestamp
var minutes = "0" + date.getMinutes();
// Seconds part from the timestamp
var seconds = "0" + date.getSeconds();
// Will display time in 10:30:23 format
var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
return formattedTime;
]]]
hold_action:
action: "call-service"
service: "input_datetime.set_datetime"
service_data:
entity_id: "[[[ return entity.entity_id ]]]"
time: >
[[[
var timestamp = entity.attributes.timestamp
let unix_timestamp = timestamp - 3660;
// Create a new JavaScript Date object based on the timestamp
// multiplied by 1000 so that the argument is in milliseconds, not seconds.
var date = new Date(unix_timestamp * 1000);
// Hours part from the timestamp
var hours = date.getHours();
// Minutes part from the timestamp
var minutes = "0" + date.getMinutes();
// Seconds part from the timestamp
var seconds = "0" + date.getSeconds();
// Will display time in 10:30:23 format
var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
return formattedTime;
]]]
item3:
card:
type: "custom:button-card"
template: "widget_icon"
tap_action:
action: "call-service"
service: "input_datetime.set_datetime"
service_data:
entity_id: "[[[ return entity.entity_id ]]]"
time: >
[[[
var timestamp = entity.attributes.timestamp
let unix_timestamp = timestamp - 2700;
var date = new Date(unix_timestamp * 1000);
var hours = date.getHours();
var minutes = "0" + date.getMinutes();
var seconds = "0" + date.getSeconds();
var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
return formattedTime;
]]]
icon: "mdi:arrow-up"
input_datetime:
tap_action:
action: "more-info"
show_last_changed: true
widget_text:
tap_action:
action: "toggle"
template:
- "ulm_translation_engine"
show_icon: false
show_label: true
show_name: false
label: "[[[ return variables.ulm_translation_state ]]]"
styles:
grid:
- grid-template-areas: "'l'"
card:
- box-shadow: "none"
- padding: "0px"
- background-color: "rgba(var(--color-theme),0.05)"
- border-radius: "14px"
- place-self: "center"
- height: "42px"
state:
- color: "rgba(var(--color-theme),0.9)"
size: "20px"
color: "var(--google-grey)"
I already made a yaml doc called custom_card_input_datetime.yaml and paste it in my Themes folder but nothing happed.
Can you add a simple button card to your dashboard?
type: custom:button-card
entity: light.pc_lights
yes I can 
So basically you want to mimic the Minimalist custom button card look and still have the Rounded Themes active?
Thats correct. I just want that specific card for my HA Alarmclock. I know, theres also the Timepicker custom card but I don’t like the look of it,
Ok that’s clearer, it’s late for me 
In general, the theme settings will not override the Custom:Button Card like other cards because it’s Javascript based.
I’ll take a look…
That’s completely okay for me that it won’t override the Colors for example. So that this card not look like Alien in between the other already existing cards 
You can easily match the Button Card to the colors to your theme. Can you snip a picture of one of your cards?
These are all button cards for one of my tablets. Matching should be straightforward.
I built it with multiple cards. We can start here and make adjustments.
I did not test the functions of the tap_action code.
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-entity-card
entity: input_datetime.datetime
icon_color: '#4ea8bb'
name: Alarm
secondary_info: last-changed
- type: custom:layout-card
fill_container: true
layout_type: grid
layout_options:
grid-template-columns: 1fr 1fr 1fr
grid-template-rows: auto
margin: 0px 30px 0px 0px
cards:
- type: custom:button-card
entity: input_datetime.datetime
icon: mdi:minus
show_state: false
show_icon: true
show_name: false
styles:
card:
- height: 60px
- width: 100px
- left: 20px
- border: none
- border-radius: 24px
- background: '#4ea8bb'
- padding: 8px
icon:
- color: black
tap_action:
action: call-service
service: input_datetime.set_datetime
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
time: |
[[[
var timestamp = entity.attributes.timestamp
let unix_timestamp = timestamp - 4500;
// Create a new JavaScript Date object based on the timestamp
// multiplied by 1000 so that the argument is in milliseconds, not seconds.
var date = new Date(unix_timestamp * 1000);
// Hours part from the timestamp
var hours = date.getHours();
// Minutes part from the timestamp
var minutes = "0" + date.getMinutes();
// Seconds part from the timestamp
var seconds = "0" + date.getSeconds();
// Will display time in 10:30:23 format
var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
return formattedTime;
]]]
- type: custom:button-card
entity: input_datetime.datetime
show_state: true
show_icon: false
show_name: false
styles:
card:
- height: 100%
- width: 100px
- left: 20px
- border: none
- border-radius: 24px
- background: '#4ea8bb'
- font-weight: bold
state:
- color: black
tap_action:
action: call-service
service: input_datetime.set_datetime
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
time: |
[[[
var timestamp = entity.attributes.timestamp
let unix_timestamp = timestamp - 3540;
// Create a new JavaScript Date object based on the timestamp
// multiplied by 1000 so that the argument is in milliseconds, not seconds.
var date = new Date(unix_timestamp * 1000);
// Hours part from the timestamp
var hours = date.getHours();
// Minutes part from the timestamp
var minutes = "0" + date.getMinutes();
// Seconds part from the timestamp
var seconds = "0" + date.getSeconds();
// Will display time in 10:30:23 format
var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
return formattedTime;
]]]
hold_action:
action: call-service
service: input_datetime.set_datetime
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
time: |
[[[
var timestamp = entity.attributes.timestamp
let unix_timestamp = timestamp - 3660;
// Create a new JavaScript Date object based on the timestamp
// multiplied by 1000 so that the argument is in milliseconds, not seconds.
var date = new Date(unix_timestamp * 1000);
// Hours part from the timestamp
var hours = date.getHours();
// Minutes part from the timestamp
var minutes = "0" + date.getMinutes();
// Seconds part from the timestamp
var seconds = "0" + date.getSeconds();
// Will display time in 10:30:23 format
var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
return formattedTime;
]]]
- type: custom:button-card
entity: input_datetime.datetime
icon: mdi:plus
show_state: false
show_icon: true
show_name: false
styles:
card:
- height: 100%
- width: 100px
- left: 20px
- border: none
- border-radius: 24px
- background: '#4ea8bb'
- padding: 8px
icon:
- color: black
tap_action:
action: call-service
service: input_datetime.set_datetime
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
time: |
[[[
var timestamp = entity.attributes.timestamp
let unix_timestamp = timestamp - 4500;
// Create a new JavaScript Date object based on the timestamp
// multiplied by 1000 so that the argument is in milliseconds, not seconds.
var date = new Date(unix_timestamp * 1000);
// Hours part from the timestamp
var hours = date.getHours();
// Minutes part from the timestamp
var minutes = "0" + date.getMinutes();
// Seconds part from the timestamp
var seconds = "0" + date.getSeconds();
// Will display time in 10:30:23 format
var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
return formattedTime;
]]]
card_mod:
style: |
ha-card {
border-radius: 24px;
border: none;}
Thank you very much for your work and effort! But I had found a way to implement this card to HA.
The code for the card is ist obvious. The Template code that is needed however, needs to be past in the YAML code of the DASHBOARD -.- and that BEFORE the views: row.
did you ever find the
ulm_translation_engine
template?
Im confronted with the same challenge and can not find it in the Repo at all…
it’s such a clutter of nested templates, there is no easy search but system wide string search… and still it’s not there
so for now Im stuck with this in default theme
I admit to have only c&p the files, and didnt ‘install’ anything, as its basically a set of templates for custom:button-card
