[Styling Module] Card Text Styling

[navypixel]

Module post template

Card Text Styling

Version: v1.0
Creator: NavyPixel

Important

Supported cards:

• Button
• Calendar
• Climate
• Cover
• Media Player
• Pop Up
• Select

Customize only the text styling for .bubble-name and .bubble-state.
Includes color, font size, font weight, and opacity for each.

Configure this module via the editor or in YAML, for example:

---

🧩 Get this Module

To use this module, simply install it from the Module Store (from the editor of any card > Modules), or copy and paste the following configuration into your /www/bubble/bubble-modules.yaml file.

card_text_style:
    name: "Card Text Styling"
    version: "v1.0"
    creator: "NavyPixel"
    link: "https://github.com/Clooos/Bubble-Card/discussions/1556"

    supported:
        - button
        - calendar
        - climate
        - cover
        - media-player
        - pop-up
        - select

    description: |
        Customize only the text styling for .bubble-name and .bubble-state.
        Includes color, font size, font weight, and opacity for each.
        
        <br><br>
        <code-block><pre>
        card_text_style: 
            name: YOUR_VALUE
        </pre></code-block>

    code: |
        ${(() => {
          // .bubble-name Styling
          let bubbleName = card.querySelector(".bubble-name");
          if (bubbleName && this.config.card_text_style.name) {
            const nameCfg = this.config.card_text_style.name;
            if (nameCfg.color) bubbleName.style.setProperty("color", `var(--${nameCfg.color}-color)`, "important");
            if (nameCfg.font_size) bubbleName.style.setProperty("font-size", nameCfg.font_size, "important");
            if (nameCfg.font_weight) bubbleName.style.setProperty("font-weight", nameCfg.font_weight, "important");
            if (nameCfg.opacity !== undefined) bubbleName.style.setProperty("opacity", nameCfg.opacity, "important");
          }
        
          // .bubble-state Styling
          let bubbleState = card.querySelector(".bubble-state");
          if (bubbleState && this.config.card_text_style.state) {
            const stateCfg = this.config.card_text_style.state;
            if (stateCfg.color) bubbleState.style.setProperty("color", `var(--${stateCfg.color}-color)`, "important");
            if (stateCfg.font_size) bubbleState.style.setProperty("font-size", stateCfg.font_size, "important");
            if (stateCfg.font_weight) bubbleState.style.setProperty("font-weight", stateCfg.font_weight, "important");
            if (stateCfg.opacity !== undefined) bubbleState.style.setProperty("opacity", stateCfg.opacity, "important");
          }
        })()}
        

    editor:
      - name: name
        type: expandable
        title: Name Text Adjustments
        icon: mdi:format-font
        schema:
          - name: color
            label: Text Color
            selector:
              ui_color: {}
          - name: font_size
            label: Font Size (e.g. 16px)
            selector:
              text: {}
          - name: font_weight
            label: Font Weight (e.g. normal, bold, 600)
            selector:
              text: {}
          - name: opacity
            label: Text Opacity
            selector:
              number:
                min: 0
                max: 1
                step: 0.1
                mode: slider
      - name: state
        type: expandable
        title: State Text Adjustments
        icon: mdi:format-size
        schema:
          - name: color
            label: Text Color
            selector:
              ui_color: {}
          - name: font_size
            label: Font Size (e.g. 14px)
            selector:
              text: {}
          - name: font_weight
            label: Font Weight (e.g. normal, bold, 400)
            selector:
              text: {}
          - name: opacity
            label: Text Opacity
            selector:
              number:
                min: 0
                max: 1
                step: 0.1
                mode: slider
      

---

Screenshot:

Before posting your module

• I've replaced all lines starting with ->
• I've updated the unsupported cards above the description and under the unsupported property
• I've added a screenshot
• I've chosen a unique your_module_key
• I really enjoyed working on this module ❤️

[robertofabrizi]

Can you make it conditional on any entity state? For example, i want black if the entity behind something is off, and white if something else is on (which in turn changes the button color, so blacl text is unreadable). Thank you!

[cokeiill]

      .bubble-name-container{
        color: ${state === 'on'? '#7e5039' : '#white' } !important;
      }

Add this code to styles: | to achieve it

[robertofabrizi]

That is what im currently doing but I'd like to switch to a full module customization instead

[systems-monitor]

Any suggestion why text at larger sizes is getting clipped? 32px

[Morphy99]

Is it possible to use this with sub-buttons? I tried ticking sub-button under edit module but I guess there's more to it than that.