卡模式 - 将CSS样式添加到任何Lovelace卡

Mariusthvdb（Marius） 2021年6月21日，上午9:32 ＃1898

相当。这个：

- 类型：自定义：堆栈中的卡片模式：水平标题：屏幕<<： *标题＃keep：＃background：false＃box_shadow：false＃rumgin：false＃outer_padding：false＃border_radius：false_radius：false Cards： - 类型：自定义：自定义：shutter-card card_mod：样式：|ha-card {boxshadow：无；}实体： - 实体：cover.screen_keuken名称：keuken-类型：自定义：shutter -card entities： - 实体：cover.raamverduistering_stookhok name：stookhok

同样，不需要在堆栈中保留对象吗？

在移动设备上，这是一个非常截止的经验，

当倾斜到景观模式时，情况变得更糟……

Ildar_gabdullin（Ildar Gabdullin） 2021年6月21日，上午9:45 ＃1899

默认值为错误的。

iPhone 5S：

肖像 - 右侧
景观 - 好的

尝试依赖屏幕尺寸使用状态切换。

Davidfw1960（大卫） 2021年6月21日，上午9:55 ＃1900

该建议+1。工作。

Mariusthvdb（Marius） 2021年6月21日，上午9:59 ＃1901

哈，很高兴您喜欢州开关卡，这是新的，并且已经向我建议

不确定您在这里的建议吗？如果在肖像模式下，请使用堆栈中的水平模式，如果在景观中，请使用单卡配置？（我有常规的2列在景观中）

或者

如果台式机，请使用堆栈中的卡片（如果移动移动），请使用不堆叠的卡，鉴于该卡在移动设备上截止的事实，无论您如何看待移动

尝试：

- 类型：自定义：状态开关实体：deviceID状态：'Bredacted设备Safari9'：<<：＆desktop-view类型类型：自定义：stack in Card模式：水平标题：屏幕标题：屏幕<<： *header Keep：background：fackern：false：false：falseBox_Shadow：false Margin：False Outer_Padding：False Border_radius：False Cards： - 类型：自定义：Shutter -Card card_mod：style：|ha-card {boxshadow：无；}实体： - 实体：cover.screen_keuken名称：keuken-类型：自定义：shutter -card entities： - 实体：cover.raamverduistering_stookhok name：stookhok'stookhok'6redacted devices chrome0a'：<<：<<： *desktop -view default default：for All All for All for All All设备-ID包括移动类型：自定义：快门卡标题：屏幕<<： *标题实体： - 实体：cover.screen_keuken name：keuken -entity：cover.raamverduistering_stookhok name：stookhok name：stookhok

我无法工作，移动设备仍然显示水平堆栈……（如果问题仍然存在，将将其移至州卡）

Davidfw1960（大卫） 2021年6月21日，上午11:54 ＃1902

您可以将其设置为屏幕像素而不是用户代理。如果您喜欢……LIDAR在不久前用几张卡帮助我，我可以举一个例子。

Ildar_gabdullin（Ildar Gabdullin） 2021年6月21日，下午12:40 ＃1903

大卫·马里乌斯（Marius） - 设法在iPhone 5s上显示百叶窗以进行肖像和景观取向 - 在这里检查：州开关 - 类固醇上的条件卡 - ＃92 by ildar_gabdullin

1喜欢

阿根图 2021年6月22日，下午4:50 ＃1904

这是我的设置

样式：|.sc-shutter-Label {font-size：14px;左衬里：20px;} .card-header {padding-bottom：0px;} .sc-shutter-Middle {Margin-Left：auto！边缘权利：自动！重要；填充底：10px;填充：20px} .sc-shutter：First-Child .sc-shutter-Middle {padding-top：0px}

Ildar_gabdullin（Ildar Gabdullin） 2021年6月22日，晚上8:46 ＃1905

这张快门卡有一些奇怪的东西 - 会导致故障。

创建1个新视图。
添加带有一些样式的快门卡“哈卡”。
再添加一张带有O样式的快门卡。
第二张卡将具有相同的样式 - 这是错误的。

图片 431×863 22.3 kb

- 标题：测试2路径：Test -2徽章：[]卡： - 类型：自定义：快门卡标题：无样式实体： - 实体：cover.left_living_shutter_shutter name：左shutter buttons_position：left title_position：left title_position：top -entity：cover -entity：cover：cover：cover：cover：cover：cover。.bedroom_shutter名称：右快门buttons_position：left title_position：top-类型：自定义：shutter -card card_mod：样式：|ha-card { -  ha-card-background：rgb（168,240,255）;-HA-CARD-HEADER-COROR：黑色；-  ha-card-header-fontss：16px;-HA-CARD-BORDER-RADIUS：8PX;}标题：我的百叶窗（+样式）实体： - 实体：cover.left_living_shutter名称：左shutter buttons_position：left title_position：top -entity：cover.bedroom_shutter_shutter_shutter_shutter_shutter名称：右shutter buttons_position：left title_position：top title_position：top title_position：top title_position：top title_positi

将第二张卡移至另一个视图。
第二张卡将不带样式显示 - 这是正确的。

同样的故障是较早前提过- 里面大约有2张卡片“垂直堆”：

快门卡

VPC 2021年6月23日，下午3:01 ＃1906

我正在寻找尺寸和放置图标的帮助。我在车库里有一个面板

我希望将车库门图标垂直居中，并将上/向下按钮居中。理想情况下，向上/向下的按钮也可以从右侧边缘进一步进入。有建议吗？

奖励问题……我还有另一张卡片对“打开”，这是红色的。有什么方法只有一张卡根据状态更改颜色？

这是代码

类型：自定义：自动实体卡：类型：实体state_color：true card_mod：样式：|ha-card { -  ha-card-background：绿色；白颜色;字体家庭：db sans cond;线高：2.2;- 卡 - 摩德 - 色彩颜色：白色；}：主机{ -  mdc-icon-size：4vw;字体大小：4VW;}过滤器：包括： -  entity_id：cover.garage_car_door_state状态：封闭式排除：[] stort：stort：stort：friendly_name show_empty：false：false

阿根图 2021年6月24日，下午12:28 ＃1907

jinja2在卡模型中是可能的。

约瑟克 2021年6月24日，下午2:29 ＃1908

你好！。

我刚刚开始学习如何将CSS添加到Lovelace卡中，我相信我的问题很愚蠢，但是当我看到代码时，我喜欢理解所有内容。
我已经在使用一些特殊字符的代码中看到：例如：

|<<：。：[[]] $：

请有人向我解释他们的意思吗？

谢谢。

1喜欢

Ildar_gabdullin（Ildar Gabdullin） 2021年6月24日，下午2:48 ＃1909

|
Yaml Multiline（Google IT）

<<：
YAML锚（Google It）

。：，$：
在卡模型中用于导航

[[]
用于在诸如Custom之类的卡片中定义模板：button卡

约瑟克 2021年6月24日，下午6:56 ＃1910

感谢您的回答。

我仍然不了解使用。：和$：我无法在Google上找到更多信息。
您能告诉我一个解释的链接吗？

Ildar_gabdullin（Ildar Gabdullin） 2021年6月24日，晚上7:15 ＃1911

检查GitHub上的卡模式页面

Greghesp（Greg Hesp） 2021年6月25日，上午8:54 ＃1912

想知道是否有人可以帮助我以自己的主题来帮助我，因为我无法为自己的生命提供文字样式。

以下是我的结构，我想将样式应用于内部的H1标签阴影根在 - 的里面hui grid卡

在我的主题我正在使用卡模式视图yaml这样的选项：

card-mod-view-yaml：>“网格 - 雷奥特$”：hui-grid卡：$：|h1 {line-height：0！填充：1VW 0 0VW 0！字体重量：500！重要；颜色：红色！重要；}

据我所知，这应该有效：
卡模式视图yaml内部的样式Hui视图
网格layout $内部的样式网格布局阴影根
hui grid卡进入hui grid卡
$：进入第一个阴影根
H1将样式应用于H1标签

显然，尽管这无法正常工作，因为您可以看到下面的“办公室”剩下填充，正常字体重量，并且不是红色的。纸牌头课程是由布局卡应用的，但是我的样式甚至没有应用，更不用说被覆盖了（这不重要！

Mariusthvdb（Marius） 2021年6月25日，下午10:06 ＃1913

直到现在，探索实体的卡模型功率，请在这里帮助我。尝试图标和图标颜色：

- 实体：传感器。ha-svg-icon {icon：{％if状态（config.entity）=='backed_up'％} mdi：check-circle {％else％} mdi：artercle-cird-cirvle {％endif％}颜色：{％{％如果状态，则（配置。

根本不起作用（没有图标或颜色集），而另一个卡模式：

- 实体：binary_sensor.snapshots_stale card_mod：样式：hui-generic-entity-row：$：state-badge：$：$：ha-icon：$：| |ha-svg-icon {color：{％if状态（config.entity）=='off'％} green {％else％} red {％endif％}}

表现良好。我在顶级模板中做错了什么？删除图标模板可以使颜色起作用。当然，我也需要图标模板…

使用此方法代替CSS也许更容易：

card_mod：样式：|：host { -  -paper-item-icon-color：{％if状态（config.entity）=='backed_up'％} green {％else％} red {％endif％}}

如何在此处添加图标模板？因为与–Card-Mod-icon：

card_mod：样式：|：host { -  paper-item-icon-color：{％if状态（config.entity）=='backed_up'％} green {％else％} red {％endif％} -card-mod-icon：{％如果状态（配置。

即使单个图标和图标颜色模板现在都起作用，也不起作用，因此进展。现在如何使用这两个模板？
请看看，谢谢！

Ildar_gabdullin（Ildar Gabdullin） 2021年6月26日，上午7:51 ＃1914

您忘了指定分号：
some_css_style：some_value;
这“图标”属性不起作用（我不确定是否有CSS属性“图标”）。
尝试使用“ - 卡 - 摩德 - 元素”。
我写了“尝试使用” - 因为“ - 卡 - 摩德 - 元素”似乎总是不起作用，请检查此示例：

类型：实体实体： - 实体：sensor.test_value名称：“使用：主机” card_mod：样式：|：host { -  -paper-item-icon-color：{％if状态（config.entity）=='backed_up'％} green;{％else％}红色;{％endif％}}  -  entity：sensor.test_value名称：“使用dom，no iCon的更改” card_mod：style：hui-generic-eneric-entity-intity-intity-intity-low：$：state-badge：$：$：ha-icon：$：$：| | | |ha-svg-icon {-card-mod-icon：mdi：alert-circle;颜色：{％如果状态（config.entity）=='backed_up'％} green;{％else％}红色;{％endif％}}  -  entity：sensor.test_value名称：“使用dom，图标更改” card_mod：样式：|：主机{-Card-mod-icon：mdi：alert-circle;}

情况1-使用“ - 纸 - 项目 - 色彩”里面“：主持人”;
案例2-内部变色“ ha-svg-item”，无法通过使用“ - 卡 - 摩德 - 元素”;
情况2-使用“ - 卡 - 摩德 - 元素”里面“：主持人”。
所以“ - 卡 - 摩德 - 元素”效劳于“：主持人”只有在这里。
至于我，到目前为止，我从未使用过“ - 卡 - 摩德 - 元素”…

马里乌斯（Marius），对不起，但我认为您使用自定义UI进行此类操作。
自定义UI仍然可以工作吗？我认为它是弃用的。
而且我看不到任何专门的活动线程。

Mariusthvdb（Marius） 2021年6月26日，上午8:50 ＃1915

嘿，伊尔达，

是的，正如您在上面的帖子中看到的，最后两个模板在他们自己的作品上，实际上，它使用了- 卡德 - 摩德 - 元素：

我无法正常工作的是两个模板。不能做到吗？

这确实有效：

card_mod：样式：|：主机{ -  -paper-item-icon-color：red;- 卡德 - 摩德 - 元素：MDI：主页；}

所以我想我必须用两个模板犯错……

编辑：
等等，我找到了它，检查上面，我突然发现了定界者;

所以：

- 实体：Sensor.snapshot_backup card_mod：样式：|：主机{ - 卡德 - 摩德 - 件：{％if状态（config.entity）=='backed_up'％} mdi：check-circle {％else％} mdi：arter-circle {％endif％};-PAPER-ITEM-ICON-COLOR：{％如果状态（config.entity）=='backed_up'％} green {％else％} red {％endif％};}

好像：

另外，这立即表现出Custom-UI和Card-Mod之间的区别。卡模式mod将卡（当然适当）定制为实体。这就是为什么快照状态的More Info仍然看起来像：

与Custom-UI相比，该实体在More-Info中以其自定义显示…

Custom-UI几乎适用于所有内容，除了Python脚本或某些CC中创建的实体。像在这种情况下一样，该实体是由Google附加组件的快照制作的，或者像以前的风扇一样，由Argonone Active冷却插件制作

如果您对Custom-UI有疑问，请跳到Github仓库，生病很高兴为您提供帮助。您将对EG的简单性和全球功能感到非常满意：

device_tracker。*_ bt：模板：＆bt图标：> if（state =='home'）返回'mdi：bluetooth';返回“ MDI：蓝牙”；icon_color：> if（state =='home'）返回'rgb（0,123,255）';返回“灰色”；

Custom-UI仍然非常有用，并且没有弃用，它根本不受支持

1喜欢

Ildar_gabdullin（Ildar Gabdullin） 2021年6月26日，上午9:01 ＃1916

我告诉你 - 因为你错过了半隆。
相比：

-PAPER-ITEM-ICON-COLOR：{％如果状态（config.entity）=='backed_up'％} green {％else％} red {％endif％}

和

-PAPER-ITEM-ICON-COLOR：{％如果状态（config.entity）=='backed_up'％} green;{％else％}红色;{％ 万一 ％}

或者

-PAPER-ITEM-ICON-COLOR：{％如果状态（config.entity）=='backed_up'％} green {％else％} red {％endif％};

对，就是这样））

1喜欢

Mariusthvdb（Marius） 2021年6月26日，上午9:03 ＃1917

在这里交叉封口。是的，您做到了，我根本没有专注于此，现在看到这是您的第一个讲话……对不起。

供电话语，最好使用JavaScript启用