card -mod -添加css样式到任何lovelace卡片

分享你的项目! 色鬼&前端

Ildar_Gabdullin(Ildar Gabdullin) 2021年1月26日下午1:06# 1344

奇怪，我有另一个结果与最后一个代码:

我需要一些时间来查明这是为什么。

分裂 2021年1月26日下午1:24 # 1345

下次请使用搜索)

非常感谢。
你说的很对，但是要在1300多个帖子中找到一个并不容易。
再次感谢

Ildar_Gabdullin(Ildar Gabdullin) 2021年1月26日晚上9点11分 # 1346

注意，在最后的代码中，“badge-container”后面没有“:”。所以这不是一个“升级”。

Mariusthvdb(马吕斯) 2021年1月26日晚上9:56 # 1347

我是第一个承认的代码仍然有点不熟悉我，但我张贴上面的工作。为了明确我最后发布的内容(在那篇文章中我们多次迭代)，这是我最新的代码:

-实体:传感器。$: ha-state-label-badge: $: | .badge-container /* Badge (State) */ .label-badge {border-style:空格;边框颜色:蓝色;颜色:灰色;背景颜色:黄色;} /* Label of the Badge (Unit) */ .label- Badge .label span {border-style: dot;边框颜色:粉色;颜色:红色;背景颜色:绿色;} /*在Badge (Name)下面*/ .title{颜色:橙色; }

导致:

Schermafbeelding 21-01-26 om 22.56.14

分裂 2021年1月27日上午7:18 # 1348

根据Ildar_Gabdullin的建议，我可以改变实体状态的字体，但这对属性不起作用。你能帮我吗?

Type:实体实体:—entity:传感器。snzb_02_corridoio_temperature名称:温度rilevata图标:mdi:温度计样式:|:主机。text-content {font-size: 30px;粗细:大胆的;颜色:黑色;} -实体:气候。图标:mdi:温度计属性:温度类型:属性样式:|:主机。text-content {font-size: 30px;粗细:大胆的;颜色:黑色;}

Ildar_Gabdullin(Ildar Gabdullin) 2021年4月15日晚上11:18# 1349

带有属性的样式实体卡片:

Type:实体实体:- Type:属性实体实体:sun。secondary_info: last-changed style: | hui-generic-entity-row {font-size: 10px;颜色:红色;} - type:属性实体:sun。sun attribute: azimuth name: Size for attribute secondary_info: last-changed style: | ui-generic-entity-row div {font-size: 10px;颜色:红色;} - type:属性实体:sun。sun attribute: azimuth name: Size for name & sec_info secondary_info: last-changed style: hui-generic-entity-row: $: | .info.pointer {font-size: 10px;颜色:红色;} - type:属性实体:sun。sun attribute: azimuth name: Size for sec_info secondary_info: last-changed style: hui-generic-entity-row: $: | .info.pointer .secondary ha-relative-time { font-size: 10px; color: red; } - type: attribute entity: sun.sun attribute: azimuth name: Size for name (w/o sec_info) style: hui-generic-entity-row: $: | .info.pointer.text-content { font-size: 10px; color: red; } - type: attribute entity: sun.sun attribute: azimuth name: Size for name secondary_info: last-changed style: hui-generic-entity-row: $: .info.pointer: | .secondary ha-relative-time { font-size: var(--mdc-typography-body1-font-size,1rem); color: orange; } .: | .info.pointer { font-size: 10px; color: red; } - type: attribute entity: sun.sun attribute: azimuth name: Colored icon style: | :host { --paper-item-icon-color: orange; }

下面将介绍伟德国际官方app下载苹果版更多的例子在这里。

1像

Ildar_Gabdullin(Ildar Gabdullin) 2021年1月27日上午11:52 # 1350

很奇怪。我看到这个:

我想再说一遍“之后”。“标志集装箱”——你确定一定没有吗?

Mariusthvdb(马吕斯) 2021年1月27日12:53# 1351

不，我不是…
虽然它可以在Safari中工作，但我们的浏览器没有…

把它改为:

-实体:传感器。$: ha-state-label-badge: $: | .badge-container .label-badge {/* Badge (State) */ border-style: dash;边框颜色:蓝色;颜色:灰色;背景颜色:黄色;} /* Label of the Badge (Unit) */ .badge-container .label- Badge .label span {border-style: dot;边框颜色:粉色;颜色:红色;背景颜色:绿色;} /*在Badge (Name)下面*/ .title{颜色:橙色; }

使它在Chrome中工作:

Safari:
Schermafbeelding 21-01-27 om 13.49.49

铬:

Schermafbeelding 21-01-27 om 13.49.57

Firefox:

Schermafbeelding 21-01-27 om 13.51.21

所以Chrome在这里被排除在外。这是令人惊讶的，因为iOS应用程序，本质上是一个Chrome浏览器，显示也很好……

Ildar_Gabdullin(Ildar Gabdullin) 2021年1月27日下午1:15 # 1352

顺便说一下，我用的是Chrome。这就是为什么这种差异…

basti4k(Sebastian) 2021年1月27日晚上7:40# 1353

你好，我如何编辑ha开关?@maxym吗?

CSS:

ha开关{填充:13px 5px;}

padding-switch

这里的yaml:

实体类型:—entity:交换机。test_force_data_refresh name: Erzwingen toggle: true style: .: | "ha-entity-toggle": $: | ha-switch {padding: 3px 5px;}

但它并不奏效

KTibow(负责人肯德尔R) 2021年1月27日晚上8:41 # 1354

经常检查您的缩进，并尝试基本的故障排除。你还用了a

你可以删掉整行。

radekD(Radek Dohnal) 2021年1月28日凌晨4:47# 1355

嗨，我试图颜色我的图标在图片元素取决于实体的状态(“Otevřeno”-红色或“Zavřeno”-绿色)。
我试试这个代码:

- type: picture-elements image: /local/images/myhouse.jpg style: | ha-card{——my-icon-color: {% if is_state('传感器。okno_pracovna'， 'Otevřeno') %}红色{% else %}绿色{% endif %}}元素:- type: state-icon entity: sensor。Okno_pracovna tap_action: action: more-info icon: mdi:window-maximize state_color: true style: '- paper-item-icon-color': var(- my-icon-color) top: 50% left: 27%

但它不工作(图标仍然是蓝色的)。你能告诉我错在哪里吗?

KTibow(负责人肯德尔R) 2021年1月28日下午2:33 # 1356

你确定传感器就是这个状态吗?

Ildar_Gabdullin(Ildar Gabdullin) 2021年1月28日晚上7:56# 1357

我怀疑传感器是为一扇(开着/关着的)窗户准备的。
没有任何窗户/门，所以不能说什么必须是一个确切的值。

georgelza(乔治) 2021年1月30日上午8:04 # 1358

伙计们，我怎么才能检查我是否正确安装了模块。我打开我的ssh终端，进入config目录，创建一个www目录，cd进去，然后运行git clone命令。

我现在试着从样式…开始添加位(意图是隐藏键盘)

类型:alarm-panel实体:alarm_control_panel。- arm_home - arm_away - arm_night style: | #键盘，#alarmCode {display: none !important;}

kongo09(kongo09) 2021年1月30日12:57# 1359

我想修改标准光有三个目标的调光器:

删除更多信息菜单的三个点
使背景透明
让图标保持它的颜色，而不是改变暗淡的水平/亮度

我成功地完成了前两个任务，但第三个任务就难住了。任何建议吗?

类型:光实体:光。Shelly_leo_dimmer风格:| mwc-icon-button。More-info{显示:none;} ha-card {background: none;}

2021 - 01 - 30 - _13 - 37 - 31所示

检查文档，我可以看到a过滤器:在ha-icon-button是造成颜色变化的原因。然而，将它设置为没有一个似乎没有效果:

类型:光实体:光。Shelly_leo_dimmer风格:| mwc-icon-button。More-info{显示:none;} ha-card {background: none;} ha-icon-button {filter: none;}

我觉得我遗漏了一些明显的东西。

KTibow(负责人肯德尔R) 2021年1月30日下午2:50 # 1360

滤镜负责亮度;您还需要设置颜色。

kongo09(kongo09) 2021年1月30日下午2:59 # 1361

我觉得没那么容易。以下是无效的:

类型:光实体:光。Shelly_leo_dimmer风格:| mwc-icon-button。More-info{显示:none;} ha-card {background: none;} ha-icon-button {filter: none;颜色:绿色;}

KTibow(负责人肯德尔R) 2021年1月30日下午3:01 # 1362

使用重要的!

kongo09(kongo09) 2021年1月30日下午3:25# 1363

谢谢，没错，就是这样!

类型:光实体:光。Shelly_leo_dimmer风格:| mwc-icon-button。More-info{显示:none;} ha-card {background: none;} ha-icon-button {filter: none !important;}

2021 - 01 - 30 - _16 - 24 - 23所示

由话语，最好在启用JavaScript的情况下查看