🗂 Lovelace Text Divider Row

nguedes · June 8, 2022, 9:56am

Hi @BlackCatPeanut
so following the info and links (thanks @Ildar_Gabdullin ) I’ve managed to end in something like this:

With code:

    cards:
      - type: entities        
        entities:          
          - type: custom:text-divider-row
            text: strikethrough
            card_mod: 
              style: |
                .text-divider {
                  
                }
                .text-divider span {
                  color: orange !important;
                  background-color: none !important;
                  padding-left: 32px !important;
                  padding-right: 32px !important;
                }

Which is still with the line dividing the text.Should be a simple formatting line - can anyone help on this?

Thanks!

Vahaldor · August 1, 2022, 9:31am

Can you paste your code here, please?

BlackCatPeanut · August 1, 2022, 10:59am

I’ve gone in a different direction for this card so unfortunately no longer use it as I described before. Sorry

Vahaldor · August 1, 2022, 11:45am

ok, so then could you tell us your method how to get a divider with a title without all the problems we are discussing here? Thank you

Vahaldor · August 1, 2022, 12:22pm

I opened the .js file and hardcoded the background color of my theme. Sure, I could put a var there, but I cannot find what variable is the background from the theme.yaml file. Adding the color in the format #07090e to span worked for me.

      .text-divider span {
        color: var(--divider-color);
        font-size: var(--font-size);
        background: #07090e;
        padding: 1px 1em;
      }

Vahaldor · August 1, 2022, 1:48pm

No, it does not work. I also tried to add

style: |
  .text-divider span {
    background: #07090e !important;
  }

below the type: custom:text-divider-row but the result still inherit something from somewhere and I cannot find where. The inherrited properties are:

.text-divider span {
    color: var(--divider-color);
    font-size: var(--font-size);
    background: var(--background);
    padding: 1px 1em;
}

Ildar_Gabdullin · August 1, 2022, 1:49pm

What do you want to achieve by card-mod?

Vahaldor · August 1, 2022, 4:18pm

I also tried to add the variable

background: #07090e;

to themes yaml but it does not read it. It shows that variable with a different value. Not a programmer but why tracing back the inheritence using developer tools does not backwards influence the css? What are we missing?

Ryan_Grandy · August 1, 2022, 6:41pm

I have a setup which uses the markdown card and lovelace_gen to do the title with divider line and allow the background to be transparent so anything behind shows through. I’m not a code expert so I’m not sure if this is the best way, but it works pretty well for my setup.

I use lovelace_gen so all I have to do is something like:

- !include
  - "../template/headers.yaml"
  - content: "'## House'"

which uses the following code to create different header styles including the one with the divider line.

# lovelace_gen
type: markdown
style:
  .: |
    ha-card {
      box-shadow: none;
      color: {{ color|default('white') }};
      padding: 5px 5px;
      background: none;
    }
    ha-markdown {
      padding-top: {{ tPad|default('0 !important') }};
      padding-bottom: {{ bPad|default('0 !important') }};
      padding-left: {{ sPad|default('0 !important') }};
      padding-right: {{ sPad|default('0 !important') }};
    }
  ha-markdown $: |
      h2 {
        display: grid;
        grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
        align-items: center;
        text-align: center;
        grid-gap: 20px;
        width: 100%;
      }
      h2:before,
      h2:after {
          content: '';
          border-top: 2px solid;
      }
      h4 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
content: {{ content }}

Vahaldor · August 1, 2022, 7:58pm

I am trying figure out how to set it up. Looks interesting but I need to ask you for some detail.
This code is goes below a card ok?

- !include
  - "../template/headers.yaml"
  - content: "'## House'"

Please give us longer code. When I add it under card (according to the docs of the lovelace_gen), !include is not understood.

The code begining # lovelace_gen suppose to be saved as headers.yaml into …/config/www/template/headers.yaml or elsewhere? Thanks.

Vahaldor · August 1, 2022, 8:19pm

I am trying to load t he headers.yaml in configuration.yaml and went to two different errors:

view is not found as an intergration (following the docs for the lovelace_gen, in which the author shows that the yaml files should be called in configuration.yaml)
the 36th row content: {{ content }} returns error when I am checking the configuration before restart

Please, more detailed help will be appreciated!

Ryan_Grandy · August 1, 2022, 8:38pm

An example of a larger block that the include is a part of is below.

      - type: custom:layout-card
        layout_type: custom:masonry-layout
        cards:
          - type: vertical-stack
            cards:
              # Section Pre 1
              - !include
                - "../template/headers.yaml"
                - content: "'## House State'"

All that I have added to configuration.yaml is:

lovelace_gen:

The path below the include should be to the lovelace_gen yaml file. It can be wherever you want it, you just need to reference the correct path.

Vahaldor · August 3, 2022, 8:50am

Sorry, but I am not able to make it work. !include is still not recognized.

What I did:

followed instructions how to install lovelace_gen
added lovelace_gen to the configuration.yaml
I created headers.yaml in …config/www/template/headers.yaml with your code to use the relative path you have in your card code (please confirm this relative path is correct)

Then I create a card but as I said, !include is unknown.

Ildar_Gabdullin · August 3, 2022, 9:22am

Lovelace_gen… Guys, I repeat - what do you want to achieve? A transparent background or something? This may be easily done by card-mod. I already proposed it a couple of days ago, nobody reacted, not going to insist.

platini76 · November 16, 2022, 2:07am

someone knows if there is the possibility to make a vertical divider for cards?

squigglylife · December 21, 2022, 4:41pm

Cant figure out how to change the background color to the theme background color. Been looking at it for hours. It always defaults back to the card color, but I’m using it as a standalone without a ‘card’, so i want it to be the default theme background color. I tried changing the .js but any changes i make don’t seem to take effect no matter what i reload or restart.

Please help

mirekmal · December 21, 2022, 7:39pm

If you make changes directly to .js file, first rename associated.js.gz file to something else. Seems original component is restored during restart from this file. If file name does not match component name changed files used. I’m not sure if this is exact logic, but worked fine for me when I was experimenting with this component.

Henrik1986 · May 6, 2023, 5:23am

Is i possible to use template?
Like this
{{ now().timestamp() | timestamp_custom('%B') }}

mirekmal · May 6, 2023, 8:07am

I do not think it is possible directly, but perhaps custom:config-template-card could help.

BaerHass · June 2, 2023, 9:02pm

For those, who is using a Theme with transparency, there is a workaround.

1. Get the HTML-Card from HACS

2. Create a Card with following Example Code:

type: custom:html-card
content: |
  <div class="separator">Text</div>
style: |
  .separator {
  display: flex;
  align-items: center;
  text-align: center;
  }

  .separator::before,
  .separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #fff;
  }

  .separator:not(:empty)::before {
    margin-right: 1em;
  }

  .separator:not(:empty)::after {
    margin-left: 1em;
  }
  ha-card {
    background: none!important;
    border:none
    }

3. Edit it for your liking.

Result: