{"id":13044,"date":"2024-11-09T10:07:03","date_gmt":"2024-11-09T17:07:03","guid":{"rendered":"https:\/\/smarthomesolver.com\/reviews\/?p=13044"},"modified":"2024-11-09T10:07:04","modified_gmt":"2024-11-09T17:07:04","slug":"home-assistant-kitchen-dashboard-tutorial","status":"publish","type":"post","link":"https:\/\/smarthomesolver.com\/reviews\/home-assistant-kitchen-dashboard-tutorial\/","title":{"rendered":"Home Assistant Kitchen Dashboard Tutorial"},"content":{"rendered":"\n<p>Making the ideal kitchen dashboard isn&#8217;t too difficult, with a few modifications to Home Assistant. I wanted a really good family calendar, big clock, and to keep the dashboard as clutter free as possible. <\/p>\n\n\n\n<p>Here are the community created additions for my dashboard. All of them require <a href=\"https:\/\/hacs.xyz\/docs\/use\/\" target=\"_blank\" rel=\"noreferrer noopener\">HACS<\/a> and if you haven&#8217;t installed it, I highly recommend it! <a href=\"https:\/\/hacs.xyz\/docs\/use\/\" target=\"_blank\" rel=\"noreferrer noopener\">Here are the instructions on how to get it<\/a>. <\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/Clooos\/Bubble-Card\" target=\"_blank\" rel=\"noreferrer noopener\">Bubble Card<\/a> &#8211; Pop up to show and hide more controls for the dashboard<\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/totaldebug\/atomic-calendar-revive\" target=\"_blank\" rel=\"noreferrer noopener\">Atomic Calendar Revive<\/a> &#8211; Very customizable calendar<\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/wassy92x\/lovelace-digital-clock\" target=\"_blank\" rel=\"noreferrer noopener\">Digital Clock<\/a> &#8211; Simple digital clock<\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/thomasloven\/lovelace-card-mod\" target=\"_blank\" rel=\"noreferrer noopener\">Card Mod<\/a> &#8211; Change the style of a specific card on the dashboard<\/p>\n\n\n\n<p>Card Mod allows CSS to change the style of a card on the dashboard. You can change it to any style you like. <\/p>\n\n\n\n<p>I&#8217;ll share my Card Mod code with you. Use it as a starting point, or just use it as is if you like it!<\/p>\n\n\n\n<p>Once you have Card Mod installed, click on the pencil icon to edit your dashboard in the top right, select the card to edit, and the click on SHOW CODE EDITOR. Paste in the code at the bottom and then save it. <\/p>\n\n\n\n<p>Have fun building a Home Assistant dashboard!<\/p>\n\n\n\n<div id=\"toc_container\" class=\"toc_white no_bullets\"><p class=\"toc_title\">Table of Contents<\/p><ul class=\"toc_list\"><li><a href=\"#Atomic_Calendar_Revive\">Atomic Calendar Revive<\/a><\/li><li><a href=\"#Digital_Clock\">Digital Clock<\/a><\/li><li><a href=\"#Warning_banner_for_a_Button_Card\">Warning banner for a Button Card<\/a><\/li><li><a href=\"#Warning_banner_for_a_sensor\">Warning banner for a sensor<\/a><\/li><li><a href=\"#Sensor_for_outdoor_temperature\">Sensor for outdoor temperature<\/a><\/li><\/ul><\/div>\n<h2><span id=\"Atomic_Calendar_Revive\">Atomic Calendar Revive<\/span><\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>card_mod:\n  style: |\n    ha-card {\n      font-size: 18px !important;\n    }\n    .single-event-container  {\n      padding-bottom: 30px !important;\n      padding-top: 10px !important;\n    }\n    .daywrap {\n      padding-top: 40px !important;\n    }\n    .event-right-top {\n      font-size: 24px !important;\n      font-weight: bold;\n      letter-spacing: 1.5px;\n      line-height: 1.2;\n      padding-bottom: 10px;\n    }\n    .event-date-day {\n      font-size: 28px;\n      color: #00FFFF !important;\n      max-width: 60px;\n      line-height: 1.2;\n    }\n    .hours {\n      color: #808080 !important;\n    }<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<h2><span id=\"Digital_Clock\">Digital Clock<\/span><\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>card_mod:\n  style: |\n    ha-card {\n      font-size: 36px !important;\n    }\n    .second-line {\n      font-size: 22px !important;\n    }<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<h2><span id=\"Warning_banner_for_a_Button_Card\">Warning banner for a Button Card<\/span><\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>card_mod:\n  style: |\n    ha-card {\n      font-size: 32px !important;\n      background-color: green;\n      color: black !important;;\n    }\n    .primary {\n      color: black !important;\n      font-size: 32px !important;\n    }<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<h2><span id=\"Warning_banner_for_a_sensor\">Warning banner for a sensor<\/span><\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>card_mod:\n  style: |\n    ha-card {\n      font-size: 18px !important;\n      background-color: red;\n      color: black !important;;\n    }\n    .header {\n      --row-height: 0px;\n    }\n    .name {\n      line-height: 30px !important;\n      color: black !important;\n      font-size: 32px !important;\n    }\n    .measurement {\n      color: black !important;\n    }\n    .info {\n      margin-top: 0px !important;\n      padding-top: 10px !important;\n      \n    }\n    .value {\n      font-size: 56px !important;\n      font-weight: bold;\n      padding: 10px;\n    }\n<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<h2><span id=\"Sensor_for_outdoor_temperature\">Sensor for outdoor temperature<\/span><\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>card_mod:\n  style: |\n    .header {\n      --row-height: 0px;\n    }\n    .name {\n      line-height: 30px !important;\n    }\n    .info {\n      margin-top: 0px !important;\n      padding-top: 10px !important;\n    }\n    .value {\n      font-size: 56px !important;\n      font-weight: bold;\n      padding: 10px;\n      color: #F0E68C;\n    }<\/code><\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Making the ideal kitchen dashboard isn&#8217;t too difficult, with a few modifications to Home Assistant. I wanted a really good family calendar, big clock, and to keep the dashboard as clutter free as possible. Here are the community created additions <a href=\"https:\/\/smarthomesolver.com\/reviews\/home-assistant-kitchen-dashboard-tutorial\/\"><\/p>\n<div class=\"read-more\">\n<p>Read more &#8250;<\/p>\n<\/div>\n<p><!-- end of .read-more --><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v16.1.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Home Assistant Kitchen Dashboard Tutorial | Smart Home Solver<\/title>\n<link rel=\"canonical\" href=\"https:\/\/smarthomesolver.com\/reviews\/home-assistant-kitchen-dashboard-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Home Assistant Kitchen Dashboard Tutorial | Smart Home Solver\" \/>\n<meta property=\"og:description\" content=\"Making the ideal kitchen dashboard isn&#8217;t too difficult, with a few modifications to Home Assistant. I wanted a really good family calendar, big clock, and to keep the dashboard as clutter free as possible. Here are the community created additions Read more &#8250;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/smarthomesolver.com\/reviews\/home-assistant-kitchen-dashboard-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"Smart Home Solver\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-09T17:07:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-09T17:07:04+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"2 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/smarthomesolver.com\/reviews\/#website\",\"url\":\"https:\/\/smarthomesolver.com\/reviews\/\",\"name\":\"Smart Home Solver\",\"description\":\"Smart Home Solver\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/smarthomesolver.com\/reviews\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/smarthomesolver.com\/reviews\/home-assistant-kitchen-dashboard-tutorial\/#webpage\",\"url\":\"https:\/\/smarthomesolver.com\/reviews\/home-assistant-kitchen-dashboard-tutorial\/\",\"name\":\"Home Assistant Kitchen Dashboard Tutorial | Smart Home Solver\",\"isPartOf\":{\"@id\":\"https:\/\/smarthomesolver.com\/reviews\/#website\"},\"datePublished\":\"2024-11-09T17:07:03+00:00\",\"dateModified\":\"2024-11-09T17:07:04+00:00\",\"author\":{\"@id\":\"https:\/\/smarthomesolver.com\/reviews\/#\/schema\/person\/d7a94f002e37d00d768cdbc8bf0afaa3\"},\"breadcrumb\":{\"@id\":\"https:\/\/smarthomesolver.com\/reviews\/home-assistant-kitchen-dashboard-tutorial\/#breadcrumb\"},\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/smarthomesolver.com\/reviews\/home-assistant-kitchen-dashboard-tutorial\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/smarthomesolver.com\/reviews\/home-assistant-kitchen-dashboard-tutorial\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/smarthomesolver.com\/reviews\/\",\"url\":\"https:\/\/smarthomesolver.com\/reviews\/\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/smarthomesolver.com\/reviews\/home-assistant-kitchen-dashboard-tutorial\/\",\"url\":\"https:\/\/smarthomesolver.com\/reviews\/home-assistant-kitchen-dashboard-tutorial\/\",\"name\":\"Home Assistant Kitchen Dashboard Tutorial\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/smarthomesolver.com\/reviews\/#\/schema\/person\/d7a94f002e37d00d768cdbc8bf0afaa3\",\"name\":\"Reed Kleinman\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/smarthomesolver.com\/reviews\/#personlogo\",\"inLanguage\":\"en\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f0b2a85b039ba9da5470ee40dc5ab57a?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f0b2a85b039ba9da5470ee40dc5ab57a?s=96&r=g\",\"caption\":\"Reed Kleinman\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/smarthomesolver.com\/reviews\/wp-json\/wp\/v2\/posts\/13044"}],"collection":[{"href":"https:\/\/smarthomesolver.com\/reviews\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/smarthomesolver.com\/reviews\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/smarthomesolver.com\/reviews\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/smarthomesolver.com\/reviews\/wp-json\/wp\/v2\/comments?post=13044"}],"version-history":[{"count":6,"href":"https:\/\/smarthomesolver.com\/reviews\/wp-json\/wp\/v2\/posts\/13044\/revisions"}],"predecessor-version":[{"id":13051,"href":"https:\/\/smarthomesolver.com\/reviews\/wp-json\/wp\/v2\/posts\/13044\/revisions\/13051"}],"wp:attachment":[{"href":"https:\/\/smarthomesolver.com\/reviews\/wp-json\/wp\/v2\/media?parent=13044"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/smarthomesolver.com\/reviews\/wp-json\/wp\/v2\/categories?post=13044"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/smarthomesolver.com\/reviews\/wp-json\/wp\/v2\/tags?post=13044"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}