# 1724

谢谢你这么多,真的是把我的头发在这一个。

# 1725

我是超级新手,只是想减少我的名片的字体的大小。已经在一些卡片,但不能看到在这个水平工作卡。codef我现在只是应用在2卡的堆栈。我还想控制水平叠加卡本身的字体大小(标题)。

感谢任何帮助让我开始…

类型:水平叠加标题:客厅卡片:类型:按钮tap_action:行动:实体:切换场景。living_room_hang名称:挂icon_height幕:“4 px”——类型:光实体:光。living_room_fireplace double_tap_action:行动:切换名称:壁炉card_mod:风格:| ha-card{字体大小:10 px;}-类型:衡量实体:传感器。living_room_trisensor_temperature_measurement分钟:0马克斯:100姓名:临时card_mod:风格:| ha-card{字体大小:8 px;}-类型:光实体:光。living_room_walls double_tap_action:行动:切换名称:墙壁
# 1726 
类型:“自定义:mod-card”风格:hui-vertical-stack-card美元:| .card-header{字体大小:10 px !重要;}卡:类型:垂直堆栈标题:改变字体卡片:# # # # # # # # # # # # # # # # # # #
# 1727

谢谢!我尝试了各种各样的组合,但似乎无法得到正确格式化或添加到我的代码。

那么这“自定义:mod-card”类型片段去顶部的卡片在我水平堆栈代码?

同时我将花更多的时间了解自定义:mod-card符合所有这些…

# 1728

卡mod延伸现有的卡片。它允许样式的html实体内卡。你用它通过添加每个卡片样式属性的定义。

然而有时card-mod无法到达一些外html对象(样式允许将样式应用于儿童项目虽然一些卡片外card-mod对象不可用)。mod-card创建一个容器,里面你的卡。这样你的整个卡变成mod-card的子元素,允许从mod-card风格水平

# 1729

使用的一些伟德国际官方app下载苹果版例子“::”,“::”&“内容”:
注意:可以使用许多浪子卡(我希望)。

注意:
不要忘记添加”card_mod:“关键字之前风格:“(新card-mod 3)。

前缀和后缀:
图像

类型:实体实体:实体:太阳。太阳-实体:sun.sunstyle: hui-generic-entity-row: | .text-content { color: red; } .text-content::before { content: "XXX - "; color: magenta; } .text-content::after { content: " (elevation {{state_attr(config.entity,'elevation')}})"; color: orange; } - entity: sensor.iphone_5s_battery_level style: hui-generic-entity-row: | .text-content { color: red; } .text-content::before { content: "Level: "; color: red; } .text-content::after { content: " ({{states('sensor.iphone_5s_battery_state')}})"; color: magenta; }

+无证功能“secondary_info”:
图像

类型:实体实体:实体:太阳。太阳secondary_info:真正的风格:hui-generic-entity-row: $: | info .secondary{颜色:红色;info .secondary}:{前内容:“海拔:”;颜色:红色;info .secondary}:{后内容:“{{state_attr (config.entity“海拔”)}}”;颜色:红色;}

“非法”意味着你也可以使用“secondary_info: bla_bla_bla”而不是“secondary_info:真正的“,它将创建一个" div "元素。

数学操作:
图像

类型:实体实体:实体:传感器。cleargrass_1_co2风格:hui-generic-entity-row: | .text-content{颜色:红色;之前}.text-content:{内容:“{{州(config.entity) | int / 10}}(分裂),”;颜色:红色;}

更换一个值:
图像
对于实体卡设置透明色的元素保持状态:

类型:实体实体:实体:sensor.network_throughput_in_eth0_mbits名称:网络吞吐量-实体:sensor.network_throughput_in_eth0_mbits名称:网络吞吐量风格:hui-generic-entity-row: | .text-content::{后内容:“{{(config.entity) |浮* 1024}}KBit / s”;颜色:var (——primary-text-color);}.text-content{颜色:透明;}

但看卡我要设定一个零字体大小:
图像

类型:看实体:实体:sensor.network_throughput_in_eth0_mbits名称:网络吞吐量-实体:sensor.network_throughput_in_eth0_mbits名称:网络吞吐量风格:|:主机div:没有(. name)::{后内容:“{{(config.entity) |浮* 1024}}KBit / s”;字体大小:var (——mdc-typography-body1-font-size 1 rem);}:主机div:不(. name){字体大小:0 px;}

为“multiple-entity-row”棘手得多:
图像
原始值必须是透明的和放在下一行的高度必须设置为0 px:

类型:实体实体:类型:“自定义:multiple-entity-row”风格:|:主机.entities-row div.entity: nth-child (1) div::{之前颜色:橙色;内容:{%如果is_state (“sun.sun”、“above_horizon”) - - - - - - %}”起床喜洋洋\“{% -其他- %}”睡好\“{% - endif %};行高:var (1.5——mdc-typography-body1-line-height,快速眼动);}:主机.entities-row div.entity: nth-child (1) div{颜色:透明;行高:0 px;}实体:太阳。太阳实体:实体:太阳。阳光的名字:xxx风格:宽度:60 px -实体:太阳。阳光的名字:xxx风格:宽度:60像素单元:”图标:“切换:假show_state:假state_header:“state_color:假的

内徽章“图像元素”名片:
这个技巧可能是有用的因为没有显示任何文本的可能性(顺便说一句,实体的名称徽章显示在顶部的观点这种可能性存在——“名称”属性)。
图像

类型:图像元素形象:/地方/图片/ blue.jpg风格:| ha-card{高度:130 px !重要;}元素:类型:state-badge实体:传感器。左cleargrass_1_co2风格:前:18%:10%——类型:state-badge实体:传感器。左cleargrass_1_co2风格:前:18%:30% card_mod:风格:ha-state-label-badge:美元:ha-label-badge:美元:.badge-container: | .title{颜色:透明;行高:0 px !重要;之前}.title:{颜色:var (——primary-text-color);内容:“新名称\”;行高:正常;}

自定义:multiple-entity-row:
如何显示“上次调整”项目:

这里描述

自定义:mini-graph-card:
牌上如何显示额外的信息:

这里描述

任何卡片,一个标题:
如何添加一个小标题:

这里描述

更多的例子伟德国际官方app下载苹果版描述在这里。

2喜欢
100%的模板化色鬼配置
100%的模板化色鬼配置
100%的模板化色鬼配置
# 1730

我试图使用风格markdown-card card-mod的帮助下。
但无论我在,没有什么会改变markdown-card的格式。
我做错了什么?

类型:减价风格:| ha-card{字体大小:20 px;字体类型:流沙;高度:30 px;背景:无;}ha-markdown{填充:0 px 0 px 0 px 8 px !重要;border-left: 3 px固体var(——强调色);}内容:“修改”
1像
# 1731

样式垂直堆栈(水平)卡。

标题样式:
图像
方法# 1:

类型:“自定义:mod-card”风格:| ha-card {——ha-card-header-color:红色;——ha-card-header-font-size: 10 px;}卡:类型:垂直堆栈标题:改变字体的标题卡:-类型:实体实体:-实体:太阳。太阳-实体:sun.sun- type: entity entity: sun.sun

方法# 2:

类型:“自定义:mod-card”风格:hui-vertical-stack-card美元:| .card-header{字体大小:10 px !重要;颜色:红色!重要;}卡:类型:垂直堆栈标题:改变字体的标题卡:-类型:实体实体:-实体:太阳。太阳-实体:sun.sun- type: entity entity: sun.sun

彩色的头:
图像

类型:“自定义:mod-card”风格:hui-vertical-stack-card美元:| .card-header {background:绿色;}卡:类型:垂直堆栈标题:标题卡:-类型:实体实体:-实体:太阳。太阳-实体:sun.sun- type: entity entity: sun.sun

彩色的背景:
图像

类型:“自定义:mod-card”风格:| ha-card{背景颜色:红色;}卡:类型:垂直堆栈标题:彩色背景卡:-类型:实体实体:-实体:太阳。太阳-实体:sun.sun- type: entity entity: sun.sun

使用一个图像的背景:
图像
注:

  1. 的”——ha-card-background”变量用于风格子卡。
  2. 背景图像拉伸以适应名片的大小。
类型:“自定义:mod-card”风格:| ha-card{背景图片:url(/地方/图片/ blue_low_2.jpg);background-size: 100% - 100%;——ha-card-background: rgba(50, 50岁,50岁,0.3);}卡:类型:垂直堆栈标题:图像背景卡:-类型:实体实体:-实体:太阳。太阳-实体:sun.sun- type: entity entity: sun.sun

使用一个图像的标题:
图像

类型:“自定义:mod-card”风格:hui-vertical-stack-card美元:| .card-header{背景图片:url(/地方/图片/ blue_low_2.jpg);background-size: 100% - 100%;}卡:类型:垂直堆栈标题:图像背景卡:-类型:实体实体:-实体:太阳。太阳-实体:sun.sun- type: entity entity: sun.sun

更多的垂直叠加样式:
例子# 1:

图像
图像 500×517 32 KB

注意:”——vertical-stack-card-margin”变量是用于定义利润为孩子卡片。

类型:“自定义:mod-card”风格:| ha-card{边框样式:固体;边框宽度:5 px;border - radius: 10 px;背景图片:线性渐变(到右,红、橙、黄、绿、蓝、靛、紫);——ha-card-header-color:白色;——ha-card-header-font-size: 40像素;身高:500 px !重要;——vertical-stack-card-margin: 0 px 20 px 190 px 20 px;——ha-card-background: rgba(50, 50岁,50岁,0.3);}卡:类型:垂直堆栈标题:标题卡:-类型:实体实体:-实体:太阳。太阳-实体:sun.sun - type: entity entity: sun.sun

例子# 2:

图像
图像 497×513 28.3 KB 

类型:“自定义:mod-card”风格:hui-vertical-stack-card美元:| hui-entities-card {——ha-card-background: rgba(50岁,50岁,50岁,0.7);——vertical-stack-card-margin: 0 px 200 px 190 px 20 px;}hui-entity-card {——ha-card-background: rgba(50岁,50岁,50岁,0.1);——vertical-stack-card-margin: 0 px 20 px 0 px 200 px;}:| ha-card{边框样式:固体;边框宽度:5 px;border - radius: 10 px;背景图片:线性渐变(到右,红、橙、黄、绿、蓝、靛、紫);——ha-card-header-color:白色;——ha-card-header-font-size: 40像素; height: 500px !important; } card: type: vertical-stack title: Some title cards: - type: entities entities: - entity: sun.sun - entity: sun.sun - type: entity entity: sun.sun

更多的水平叠加样式:
例子# 1:
图像

类型:“自定义:mod-card”风格:hui-horizontal-stack-card美元:| hui-entities-card {margin-left: 10 px !重要;margin-bottom: 10 px !重要;——ha-card-background: rgba(50, 50岁,50岁,0.1);}hui-entity-card {margin-right: 10 px !重要;margin-bottom: 10 px !重要;——ha-card-background: rgba(50, 50岁,50岁,0.7);}:| ha-card {background: lightblue;}卡:类型:水平叠加标题:标题卡:-类型:实体实体:-实体:太阳。太阳-实体:sun.sun- entity: sun.sun - type: entity entity: sun.sun

例子# 2:
图像

类型:“自定义:mod-card”风格:hui-horizontal-stack-card美元:| hui-entities-card {margin-left: 10 px !重要;margin-right: 10 px !重要;margin-bottom: 10 px !重要;宽度:150%;flex:复原!重要;}mini-graph-card {margin-right: 10 px !重要;margin-bottom: 10 px !重要;flex:复原!重要;}:| ha-card {background: lightblue;——ha-card-background: rgba(50, 50岁,50岁,0.1); } card: type: horizontal-stack title: Some title cards: - type: entities entities: - entity: sun.sun - entity: sun.sun - entity: sun.sun - type: 'custom:mini-graph-card' entities: - sensor.cleargrass_1_co2 hours_to_show: 12 points_per_hour: 60 show: name: false icon: false

更多的例子伟德国际官方app下载苹果版描述在这里。

# 1732

你需要shadow-root,我认为。

# 1733

我怎么做呢?
没有什么工作。是减价牌甚至改写?

# 1734

这就是我和你的代码:

图像
图像 972×325 11.3 KB

这是你希望的么?
如果是的,可能是你没有安装card-mod。
如果没有,是什么错了吗?

# 1735

现在工作,谢谢。
验证代码的帮我看别处。
似乎有问题我hac github的关键。
谢谢你的帮助。

# 1736

使用的例子“card-mod”为“multiple-entity-row“显示“上次调整”项目:

这里描述

# 1737

人来说,我真的需要帮助:

谁能帮我吗?

# 1738

我认为这是所有浏览器相关的电脑你正在查看它,不影响哈除了查询哈这一观点的数据…

# 1739

与此同时试图创建粘卡(学分@ASNNetworks)。
这两个粘卡——顶部和底部:

图像
图像 640×1136 87 KB 

类型:垂直叠加卡:类型:一眼风格:|:主持人{z - index: 999;位置:粘性;位置:-webkit-sticky;上图:var (——header-height);}ha-card{边框样式:固体;border - radius: 15 px;}实体:实体:太阳。太阳-实体:sun.sun- entity: sun.sun - entity: sun.sun - type: glance entities: - entity: sun.sun - type: glance entities: - entity: sun.sun - type: glance entities: - entity: sun.sun - type: entities entities: - entity: sun.sun - entity: sun.sun - entity: sun.sun - entity: sun.sun - entity: sun.sun - entity: sun.sun - entity: sun.sun - entity: sun.sun - entity: sun.sun - entity: sun.sun - entity: sun.sun - entity: sun.sun - type: glance style: | :host { z-index: 999; position: sticky; position: -webkit-sticky; bottom: 0; } ha-card { border-style: solid; border-radius: 15px; } entities: - entity: sun.sun - entity: sun.sun - entity: sun.sun - entity: sun.sun

请注意,“ha-card”样式用于粘卡本身(边界、背景等),”:主机”样式用于subcontainer主容器内使它粘(如果这不是true-CSS-language抱歉)。
重复运行相同的测试——这段代码复制并粘贴到唯一卡到一些观点。

上卡我必须设置:

上图:var (——header-height);

运行在桌面(铬、Win10x64 1920 x1200)和在iPhone 5 s。

2喜欢
# 1740

嗨
我用卡模我的图标不同状态的改变颜色,但我有一个问题。

当我切换状态与Chrome个人电脑没问题,当我做苹果的Safari或旅行在我的iphone的颜色不会改变,直到我刷新。
这是结果(Mac) iPhone safari和HA的同伴macOS):

捕捉d 'ecran 10.27.37勒2021-04-16
捕捉d 'ecran 10.27.37勒2021-04-16 934×364 23.1 KB
捕捉d 'ecran 10.27.49勒2021-04-16
捕捉d 'ecran 10.27.49勒2021-04-16 1824×322 32.1 KB

# 1741

检查在这里

# 1742

不错的工作,但我不认为我的代码有什么问题吗?
你代码与我分享我的灯吗?

# 1743

这不是关于灯,这是关于实体。