diff --git a/README.md b/README.md index ae5047e..4cbba36 100644 --- a/README.md +++ b/README.md @@ -102,7 +102,7 @@ card_mod: _The class names are only indications of what types of cards they were intended for, but the classes can be applied to any card you like. I cannot guarantee how well they will work outside of their intended uses, however._ The classes are as follows: -1. `header`, `header-right`, and `header-contained` - top blue bar (in Default theme) meant for Markdown cards with one `H1` line that will start a section +1. `header`, `header-right`, `header-contained`, `header-open` - top blue bar (in Default theme) meant for Markdown cards with one `H1` line that will start a section @@ -114,12 +114,27 @@ The classes are as follows: type: markdown card_mod: class: header -content: '# Climate' +content: '# header' + +type: markdown +card_mod: + class: header-right +content: '# header-right' + +type: markdown +card_mod: + class: header-contained +content: '# header-contained' + +type: markdown +card_mod: + class: header-open +content: '# header-open' ```
YAML Result -image +image
@@ -133,22 +148,32 @@ content: '# Climate' ```yaml -type: weather-forecast -entity: weather.home +type: markdown card_mod: class: middle +content: '# middle' + +type: markdown +card_mod: + class: middle-right +content: '# middle-right' + +type: markdown +card_mod: + class: middle-contained +content: '# middle-contained' ``` -image +image 3. `middle-blank` - special case for Mushroom Cards (@csanner please confirm) -4. `footer`, `footer-right`, and `footer-contained` - bottom gray bar (in Default theme) meant for the last card in a section +4. `footer`, `footer-right`, `footer-contained`, `footer-open` - bottom gray bar (in Default theme) meant for the last card in a section @@ -157,15 +182,30 @@ card_mod:
YAML Result ```yaml -type: media-control -entity: media_player.living_room_tv_2 +type: markdown card_mod: class: footer +content: '# footer' + +type: markdown +card_mod: + class: footer-right +content: '# footer-right' + +type: markdown +card_mod: + class: footer-contained +content: '# footer-contained' + +type: markdown +card_mod: + class: footer-open +content: '# footer-open' ``` -image +image
@@ -222,7 +262,7 @@ card_mod: -7. `button-lozenge` and `button-lozenge-right` - pill-shaped button; only works on standard button cards; also works on button cards in a horizontal-stacks and grids up to two columns wide; more columns get glitchy and is not advised +7. `button-lozenge` `button-lozenge-right` - pill-shaped button; only works on standard button cards; also works on button cards in a horizontal-stacks and grids up to two columns wide; more columns get glitchy and is not advised @@ -236,20 +276,29 @@ show_icon: true type: button tap_action: action: toggle -entity: switch.lightsaber -icon: '' +entity: switch.speakers +icon: mdi:speaker-multiple card_mod: class: button-lozenge + +show_name: true +show_icon: true +type: button +tap_action: + action: toggle +entity: switch.lightsaber +card_mod: + class: button-lozenge-right ```
YAML Result -image +image
-8. `button-bullet` and `button-bullet-right` - similar to the lozenge, but with a squared-off side; same column restrictions apply +8. `button-bullet` `button-bullet-right` - similar to the lozenge, but with a squared-off side; same column restrictions apply @@ -263,20 +312,65 @@ show_icon: true type: button tap_action: action: toggle -entity: switch.speakers -show_state: true -icon: mdi:speaker-multiple +entity: light.bedroom_tree card_mod: class: button-bullet + +show_name: true +show_icon: true +type: button +tap_action: + action: toggle +entity: switch.counter_lights +card_mod: + class: button-bullet-right ```
YAML Result -image +image
+9. `bar` `bar-right` `bar-large` `bar-large-right` - standalone header-type bar; only intended for and tested with Markdown cards + + + + + + + + +
YAML Result
+ +```yaml +type: markdown +content: '# bar' +card_mod: + class: bar + +type: markdown +content: '# bar-large' +card_mod: + class: bar-large + +type: markdown +content: '# bar-right' +card_mod: + class: bar-right + +type: markdown +content: '# bar-large-right' +card_mod: + class: bar-large-right +``` + + +image +
+ + ### Make your own color themes Custom themes can be created down at the bottom of `lcars.yaml`. Or, search for "===THEMES", which will take you right there. To create your own theme, copy the LCARS Default section to the bottom of the file and change the `lcars-ui-*` and `lcars-card-*` variables to your liking, using the color references at the top of the file, [The LCARS website](https://www.thelcars.com/colors.php), or define your own. @@ -331,6 +425,7 @@ cards: ## Acknowledgements - Thanks to @JHuckins for color theming support and testing! - Thanks to @csanner for the new classes and additional fixes and tweaks! +- Thanks to @Anthrazz for the bar classes! ## Links **Discord:** https://discord.gg/gGxud6Y6WJ