『瀚思彼岸』» 智能家居技术论坛

 找回密码
 立即注册
查看: 2193|回复: 59

[UI界面] card-mod使用分享

  [复制链接]

7

主题

149

帖子

1250

积分

金牌会员

Rank: 6Rank: 6

积分
1250
金钱
1101
HASS币
0
发表于 2024-11-16 21:29:06 | 显示全部楼层 |阅读模式
本帖最后由 hungheo 于 2024-11-16 23:34 编辑

主要分为 标签的路径查找 和  全局主题配置
一、路径查找:
1、复制JS路径
F12选择要查找的标签,然后右键“复制JS路径”
游客,如果您要查看本帖隐藏内容请回复

2、JS路径转card-mod路径
     这个网页可以将JS路径直接转换成card-mod的路径:https://matt8707.github.io/card-mod-helper/
2.1、路径有#shadowRoot的情况
     插件作者说明了:标签中的#shadowRoot替换成了$符号,所以转换成了下图:
游客,如果您要查看本帖隐藏内容请回复

看网页结构,知道tile card的结构是从hui-tile-card开始的,遇到的所有$都要逐级加进去,最后,指向class="slider-track-background"的div标签,这个就是要修改的

编写card-mod
游客,如果您要查看本帖隐藏内容请回复

这样整个路径就搞定了!

这里只是简单的修改下背景颜色
效果如下图:
游客,如果您要查看本帖隐藏内容请回复

2.2、路径没有#shadowRoot的情况
这里相对简单些,用 > 符号连接上下div标签就可以,如果遇到不是div标签的用 # 符号连接
游客,如果您要查看本帖隐藏内容请回复

这简单修改下ha-card标签下,clas=“container”的div标签的属性
游客,如果您要查看本帖隐藏内容请回复

ps:
    关于修改CSS属性,具体可以问AI或者百度,也可以参照这篇帖子:https://bbs.hassbian.com/thread-24285-1-1.html

分享一个browser-mod card的card-mod这设置:
card_mod:
  style:
    .: |
      :host {
        --ha-card-border-width: 0; 
      }
      .div:focus {
        outline: none; 
      }
      ha-dialog > div.content > div.container {
        background: none !important; /*取消弹出窗口内容的背景,*/
      }
      ha-dialog {
        --vertical-align-dialog: center !important;  /*窗口 居中*/
      }
      @media (max-width: 450px), (max-height: 500px) {
        ha-dialog {
          --mdc-dialog-min-height: none !important;  /*手机界面 窗口 居中*/
        }
      }
    ha-dialog$: |
      .mdc-dialog__scrim{
          backdrop-filter: blur(20px) !important; /*背景模糊*/
        }
      div.mdc-dialog__surface { 
        background: none !important;  /*取消弹出窗口标题、下部按钮的背景,*/
      }
前后效果对比:

屏幕截图 2024-11-16 221931.png          屏幕截图 2024-11-16 222023.png










评分

参与人数 3金钱 +32 收起 理由
z741554038 + 10 早点看到就好 不用费这么多时间设置 T T.
flyice + 10 高手,这是高手!
隔壁的王叔叔 + 12 大佬,大佬,膜拜!

查看全部评分

回复

使用道具 举报

7

主题

149

帖子

1250

积分

金牌会员

Rank: 6Rank: 6

积分
1250
金钱
1101
HASS币
0
 楼主| 发表于 2024-11-16 22:43:15 | 显示全部楼层
本帖最后由 hungheo 于 2024-11-16 23:08 编辑

二、全局主题配置
接着上面分享的browser-mod的card-mod设置,这只是一个tile卡片的设置,如果有很多个browser-mod而且样式都是一样的,就可以在主题文件中配置好,全局生效
card-mod插件作者关于主题文件中的配置说明:https://github.com/thomasloven/lovelace-card-mod/wiki/Card-mod-Themes#navigating-the-shadowdom

1、主题文件中的定义:
定义card-mod作用的主题名,theme命名要与主题名称相同,基本格式如下:
---
hungheo: #主题名称
  card-mod-theme: hungheo #card mod 作用的主题名称

#这两个保持一致

2、应用card-mod全局变量,变量格式为"card-mod-<thing>-yaml:"

名称中间的thing替换成想修改的区域标签名称

常用的有 root、view、more-info、card、row、glance、badge等等

其中:
#card-mod-root-yaml 对应的网页标签是:
<hui-root class="undefined">...</hui-root>

#card-mod-view-yaml 对应的网页标签是:
<hui-view class="undefined">...</hui-view> 

#card-mod-more-info-yaml  对应的网页标签是:
<ha-dialog class="undefined">...</ha-dialog>

#card-mod-card-yaml 对应的网页标签是:
<ha-card class="名称">...</ha-card>

3、根据自己需求修改下主题文件:
注意:1、如果加入了card-mod全局配置的,切换主题时,需要重载一下主题才能生效
2、全局设置会把ha自带的样式也修改掉


分享下我自己用的


---
hungheo:
  ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
  ha-card-border-width: 0
  ha-card-border-radius: "12px"
  ha-dialog-border-radius: "0px" #弹出窗口 背景板倒角
  mdc-select-fill-color: "rgba(255, 255, 255, 0.2)" #选择框背景色
  dialog-backdrop-filter: blur(20px)
  card-mod-theme: hungheo
  card-mod-root: |  
    .header {
      display: none;
    }
    #view {
      padding: 0 !important;
      height: 100vh !important;
    }
  card-mod-view-yaml: |
    "*:first-child$": |
      #columns .column > * {
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 5px;
      }
  card-mod-more-info-yaml: | 
    .: |
      ha-dialog > div:focus {
        outline: none;
      }
      ha-dialog {
        --vertical-align-dialog: center !important; 
      }
      ha-dialog > div.content > div.container {
        background: none !important;
      }
      @media (max-width: 450px), (max-height: 500px) {
        ha-dialog {
          --mdc-dialog-min-height: none !important; 
        }
      }
    ha-dialog$: |
      div.mdc-dialog__surface { 
        background: none !important; 
      }     
  modes:
    light:
      custom-background-color: "#f5f4f1"
      custom-card-background-color: "#fffefb" 
      custom-icon-color: "#3b3c3d"
      #main
      primary-background-color: "var(--custom-background-color)"

      text-color: "#1d1c1c"
      primary-text-color: "var(--text-color)"
      text-primary-color: "var(--text-color)"
      sidebar-text-color: "var(--text-color)"
      #card
      state-icon-color: "var(--custom-icon-color)"
      state-inactive-color: "var(--custom-icon-color)"
      state-active-color: "#71c4ef"
      card-background-color: "var(--custom-card-background-color)"
      ha-card-background: "var(--custom-card-background-color)"
      #header
      app-header-background-color: "var(--custom-background-color)"
      
      #sidebar
      sidebar-icon-color: "var(--custom-icon-color)"
      sidebar-background-color: "var(--custom-background-color)"
    dark:
      ha-card-background: "rgba(255, 255, 255, 0.2)" #卡片背景色
      mush-rgb-disabled: "255,255,255"
      rgb-primary-text-color: "255,255,255"

效果:
浏览器界面:

屏幕截图 2024-11-16 230128.png

手机APP界面:

微信图片_20241116230719.jpg       微信图片_20241116230726.jpg














回复

使用道具 举报

0

主题

42

帖子

204

积分

中级会员

Rank: 3Rank: 3

积分
204
金钱
162
HASS币
0
发表于 2024-11-17 00:51:16 | 显示全部楼层
学习一下
回复

使用道具 举报

0

主题

141

帖子

1257

积分

金牌会员

Rank: 6Rank: 6

积分
1257
金钱
1116
HASS币
0
发表于 2024-11-17 02:02:23 | 显示全部楼层
这个学习了啊
回复

使用道具 举报

1

主题

44

帖子

236

积分

中级会员

Rank: 3Rank: 3

积分
236
金钱
192
HASS币
0
发表于 2024-11-17 04:45:44 | 显示全部楼层
谢谢分享,感谢楼主!
回复

使用道具 举报

2

主题

55

帖子

218

积分

中级会员

Rank: 3Rank: 3

积分
218
金钱
163
HASS币
0
发表于 2024-11-17 15:08:44 | 显示全部楼层
学习一下,看哪个好用
回复

使用道具 举报

5

主题

161

帖子

4114

积分

论坛元老

Rank: 8Rank: 8

积分
4114
金钱
3948
HASS币
30
发表于 2024-11-17 17:37:41 | 显示全部楼层
先收藏,再实践!
回复

使用道具 举报

0

主题

21

帖子

190

积分

注册会员

Rank: 2

积分
190
金钱
169
HASS币
0
发表于 2024-11-18 08:01:39 | 显示全部楼层
学习学习!
回复

使用道具 举报

0

主题

21

帖子

190

积分

注册会员

Rank: 2

积分
190
金钱
169
HASS币
0
发表于 2024-11-18 08:03:02 | 显示全部楼层
谢谢分享,感谢楼主!
回复

使用道具 举报

13

主题

637

帖子

3288

积分

论坛元老

HomeAssistant

Rank: 8Rank: 8

积分
3288
金钱
2646
HASS币
20
发表于 2024-11-18 13:53:50 | 显示全部楼层
大佬你好,请问tile card的name和状态可以修改颜色吗?可以的话,能否帮忙给个示例代码
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2025-1-23 03:12 , Processed in 0.134219 second(s), 35 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表