API tools faq
paste
Advertisement
pqpxoxa

Home Assistant | Mobile Welcome Card

pqpxoxa
Mar 21st, 2025
564
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
YAML 6.79 KB | None | 0 0
raw download clone embed print report
  1. type: custom:button-card
  2. name: Welcome Sam
  3. show_label: true
  4. label: >-
  5.   [[[ const now = new Date(); const options = { weekday: "short", day:
  6.   "2-digit", month: "short" }; return now.toLocaleString("en-GB",
  7.   options).replace(",", "") + "  " + now.toLocaleTimeString("en-GB", {
  8.   hour: "2-digit", minute: "2-digit", hour12: true }); ]]]
  9. styles:
  10.   card:
  11.     - background-color: transparent
  12.     - padding: 1px
  13.     - border-style: none
  14.     - margin-top: "-15px"
  15.   grid:
  16.     - grid-template-areas: " \"n ps pn\" \"l ps pn\""
  17.     - grid-template-columns: 68% 16% 16%
  18.     - grid-template-rows: 1fr min-content
  19.     - gap: 0px 0px
  20.   name:
  21.     - font-size: 54px
  22.     - justify-self: left
  23.     - letter-spacing: "-2.5px"
  24.     - font-weight: bold
  25.     - padding-left: 6px
  26.     - padding-top: 5px
  27.   label:
  28.     - font-size: 22px
  29.     - justify-self: left
  30.     - letter-spacing: "-1px"
  31.     - font-weight: 400
  32.     - padding-left: 10px
  33. custom_fields:
  34.   ps:
  35.     card:
  36.       type: custom:button-card
  37.       color: transparent
  38.       entity: person.CHANGE_1
  39.       show_entity_picture: true
  40.       tap_action:
  41.         action: none
  42.       show_name: false
  43.       show_icon: true
  44.       styles:
  45.         card:
  46.           - background-color: "#4b5975"
  47.           - border-radius: 50px
  48.           - width: 55px
  49.           - height: 55px
  50.           - border-style: none
  51.           - padding: 8px
  52.           - box-shadow: >-
  53.               rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 2px 13px
  54.               -1px, rgba(0, 0, 0, 0.2) 0px -3px 5px inset !important;
  55.           - overflow: visible
  56.         icon:
  57.           - width: 38px
  58.           - height: 38px
  59.         custom_fields:
  60.           box:
  61.             - position: absolute
  62.             - left: 14%
  63.             - top: 84%
  64.             - transform: translate(-50%, -50%)
  65.             - z-index: 9999
  66.             - overflow: visible
  67.             - width: 18px
  68.             - height: 18px
  69.       custom_fields:
  70.         box:
  71.           card:
  72.             type: custom:button-card
  73.             icon: mdi:home
  74.             entity: person.CHANGE_1
  75.             show_name: false
  76.             state:
  77.               - styles:
  78.                   card:
  79.                     - background-color: transparent
  80.                     - border-style: none
  81.                     - border-radius: 50px
  82.                     - display: flex
  83.                     - justify-content: center
  84.                     - align-items: center
  85.                     - width: 20px
  86.                     - height: 20px
  87.                     - overflow: visible
  88.                   icon:
  89.                     - width: 14px
  90.                     - height: 14px
  91.                     - background-color: green
  92.                     - color: white
  93.                     - border-radius: 50%
  94.                     - padding: 2px
  95.                     - display: flex
  96.                     - justify-content: center
  97.                     - align-items: center
  98.                     - z-index: 9999
  99.                 value: "home"      
  100.               - styles:
  101.                   card:
  102.                     - background-color: transparent
  103.                     - border-style: none
  104.                     - border-radius: 50px
  105.                     - display: flex
  106.                     - justify-content: center
  107.                     - align-items: center
  108.                     - width: 20px
  109.                     - height: 20px
  110.                     - overflow: visible
  111.                   icon:
  112.                     - width: 14px
  113.                     - height: 14px
  114.                     - background-color: red
  115.                     - color: white
  116.                     - border-radius: 50%
  117.                     - padding: 2px
  118.                     - display: flex
  119.                     - justify-content: center
  120.                     - align-items: center
  121.                     - z-index: 9999              
  122.                 operator: default  
  123.   pn:
  124.     card:
  125.       type: custom:button-card
  126.       color: transparent
  127.       entity: person.CHANGE_2
  128.       show_entity_picture: true
  129.       tap_action:
  130.         action: none
  131.       show_name: false
  132.       show_icon: true
  133.       styles:
  134.         card:
  135.           - background-color: "#4b5975"
  136.           - border-radius: 50px
  137.           - width: 55px
  138.           - height: 55px
  139.           - border-style: none
  140.           - padding: 8px
  141.           - box-shadow: >-
  142.               rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 2px 13px
  143.               -1px, rgba(0, 0, 0, 0.2) 0px -3px 5px inset !important;
  144.           - overflow: visible
  145.         icon:
  146.           - width: 38px
  147.           - height: 38px
  148.         custom_fields:
  149.           box:
  150.             - position: absolute
  151.             - left: 14%
  152.             - top: 84%
  153.             - transform: translate(-50%, -50%)
  154.             - z-index: 9999
  155.             - overflow: visible
  156.             - width: 18px
  157.             - height: 18px
  158.       custom_fields:
  159.         box:
  160.           card:
  161.             type: custom:button-card
  162.             icon: mdi:home
  163.             entity: person.CHANGE_2
  164.             show_name: false
  165.             state:
  166.               - styles:
  167.                   card:
  168.                     - background-color: transparent
  169.                     - border-style: none
  170.                     - border-radius: 50px
  171.                     - display: flex
  172.                     - justify-content: center
  173.                     - align-items: center
  174.                     - width: 20px
  175.                     - height: 20px
  176.                     - overflow: visible
  177.                   icon:
  178.                     - width: 14px
  179.                     - height: 14px
  180.                     - background-color: green
  181.                     - color: white
  182.                     - border-radius: 50%
  183.                     - padding: 2px
  184.                     - display: flex
  185.                     - justify-content: center
  186.                     - align-items: center
  187.                     - z-index: 9999
  188.                 value: "home"      
  189.               - styles:
  190.                   card:
  191.                     - background-color: transparent
  192.                     - border-style: none
  193.                     - border-radius: 50px
  194.                     - display: flex
  195.                     - justify-content: center
  196.                     - align-items: center
  197.                     - width: 20px
  198.                     - height: 20px
  199.                     - overflow: visible
  200.                   icon:
  201.                     - width: 14px
  202.                     - height: 14px
  203.                     - background-color: red
  204.                     - color: white
  205.                     - border-radius: 50%
  206.                     - padding: 2px
  207.                     - display: flex
  208.                     - justify-content: center
  209.                     - align-items: center
  210.                     - z-index: 9999              
  211.                 operator: default  
Tags: HomeAssistant
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!