关于下面这段代码的问题

cxhua

首先请看下面的代码：

          - color_thresholds:
              - color: '#4dd2ff'
                value: 17
              - color: '#01a4db'
                value: 20
              - color: '#fccd68'
                value: 23
              - color: '#fd8524'
                value: 26
              - color: '#ff1a1a'
                value: 30
            entities:
              - sensor.living_binary_temperature
              - sensor.airhumidifier_temperature
            icon: mdi:home-thermometer-outline
            update_interval: 600
            show:
              icon: true
              legend: false
              name: false
            style: |
              :host {
               left: 8.6%;
               top:  74%;
               width: 17.5%;
               overflow: hidden;
               height: 15%;
               background: none  !important;
               box-shadow: none !important;
              }
              .header {
               font-size: 10%;
               position: absolute !important;
               width: 5% !important;
               padding: 0 !important;
               right: 20% !important;
               top: 15% !important;
              }
              ha-card {
               background: none  !important;
               padding: 0 !important;
              }
              .icon > ha-icon {
               width:10% !important;
               height:10% !important;
              }
              .state__time{
               font-size:0.9vw !important;
               margin-top: 0.2vw;
               font-weight: 300 !important;
               opacity: 0.4 !important;
              }
              .states {
               font-size: 100% !important;
               padding: 1vw 0vw 0vw 0vw  !important;
               margin: auto !important;
               width: 68%;
              }
            tap_action:
              action: navigate
              navigation_path: /lovelace-floor/weather
            type: custom:mini-graph-card
          - backdrop: false
            entity: weather.adelaide
            name: ' '
            style: |
              :host {
              left: 8.4%;
              top:  20.5%;
              width: 13%;
              height: 6% !important;
              overflow: hidden;
              height: 11%;
              background: none  !important;
              box-shadow: none !important;
              font-size: 100% !important;
              }
              ha-card {
              background: none  !important;
              box-shadow: none !important;
              flex-flow: row-reverse !important;
              padding: 0 !important;
              }
              .weather__info--add{
              display : none !important;
              }
              .weather__info{
              flex-grow: 1;
              min-height: 0 !important;
              height: 5%;
              margin-left: 2%;
              }
              .weather__icon{
              margin-right:0.5% !important;
              margin-top: -3%;
              width: 2vw !important;
              height: 2vw !important;
              flex: 0 0 2vw !important;
              }
            tap_action:
              action: navigate
              navigation_path: /lovelace-floor/weather
            type: custom:simple-weather-card

复制代码

这段代码是大神关于在侧边栏添加天气的，在上部添加室外天气，在下部添加室内天气，我按照教程做出来效果如下：

                               
登录/注册后可看大图

下面是我的几个问题：
1、两个天气控件都有不适配的问题，具体请看我的这个求助：https://bbs.hassbian.com/thread-19414-1-1.html；
2、天气中的文字颜色不会调，之所以上面用蓝色背景而不是透明，就是因为透明根本看不清，其实从下面的这个温度也能看出来，这样放大截图出来还好，实际上也看不清，在“font-size="语句附近添加过以下语句：
fontcolor=
font-color=
color=
...
等号的右边填写过white等颜色单词，也填写过rgba(255, 255, 255, 0.0)这种表达式，好像都没有效果，应该是我的方法有问题，那正确的方法是什么呢？
PS：好像改了代码中的font-size也没有什么效果。
3、其它的语句都是style下面直接写，像这样：
            style:
              background-color: rgba(255, 255, 255, 0.0)
              border-radius: 55%
              border-width: 20%
              border-color: rgb(138, 138, 138)
              height: 9.8%
              left: 12.45%
              top: 91.9%
              width: 5.8%
这组语句多了：HOST，像这样：
            style: |
              :host {
               left: 8.6%;
               top:  74%;
               width: 17.5%;
               overflow: hidden;
               height: 15%;
               background: none  !important;
               box-shadow: none !important;
              }
是什么意思呢？有没有相关的教程啊？
4、可否有大神愿意讲讲整段代码各个参数的意思和用法，或者给个教程的链接，谢谢！
PS：就是关于用代码编写仪表盘有什么相关的比较系统的教程，像学程序设计语言一样，而不是某一个例子。

louis_lee

想搞好HA前端卡片，请先学习css/html，根据需要再学js/ts

cxhua

louis_lee 发表于 2023-2-3 11:22
想搞好HA前端卡片，请先学习css/html，根据需要再学js/ts

CSS的内容我大概知道一些，所以也知道是用什么color，或者size什么的，但我的主要问题是怎么用这些东西。比如说吧，很多的卡片直接写就行，有的却需要用大括号什么的，中间还有什么head，ha-card什么的，所以我想知道类似于什么时候直接写？什么时候要加大括号之类的？怎么加？大括号里都有什么部分可以定义？每个部分管哪里？比如说上面的这个卡片，标题哪里修改？温度哪里修改？等等......这些东西好像插件的官方文档里也没有。另外就是YAML，都有哪些？每个里可以有哪些内容？表示什么？类似这些内容从哪里可以学习到？有没有比较系统的教程或者是文档，我主要想问这个。

louis_lee

那先看https://developers.home-assistant.io/docs/frontend，了解相关架构，有问题翻HA fronted代码仓库。

cxhua

louis_lee 发表于 2023-2-4 19:01
那先看https://developers.home-assistant.io/docs/frontend，了解相关架构，有问题翻HA fronted代码仓库。 ...

谢谢，我想要的应该就是这个，但是...有中文的吗？