STYLING CONFIGURATION

Style configuration can be done in yaml, raw edit mode, or from your HA theme.

NAME DESCRIPTION
background Change the header's background color or image. Uses any CSS that can be used with the CSS background-color property, background-image property, or background property. Examples: background: "#000" or even background: url("paper.gif").
all_buttons_color Set all buttons to one color. Acts as a fallback, if set to red and a button is set to blue with button_color then all buttons will be red except for that button.
button_color Set the color of a single button. See example below.
all_tabs_color Set all tabs to one color. Acts as a fallback, if set to red and one tab is set to blue with tab_color then all tabs will be red except for that one tab.
tab_color Set the color of a single tab. See example below.
notify_indicator_color Sets the color of the new notification indicator.
notify_text_color Sets the color of the number of new notifications inside the indicator.
active_tab_color Sets the color of the current tab's icon.
conditional_styles Dynamically change styles depending on an entity's state, see Conditional Styling.


Notes on styling config:


Example


cch:
  # background image with transparency and background color transparent
  background: transparent url("https://goo.gl/M3Dsf2")
  all_buttons_color: green # color of all buttons unless set in button_color
  button_color:
    menu: rgb(255,192,203)
    notifications: yellow
    voice: white
    options: red
  all_tabs_color: red # color of all tabs unless set in tab_color
  tab_color:
    0: green
    1: red
    2: blue
  tab_indicator_color: yellow # indicator under current tab
  notify_indicator_color: "#00FFFF" # the notifications indicator
  notify_text_color: brown # number inside notifications indicator
  chevrons: false
  options: clock
  clock_am_pm: true
  clock_date: true
  clock_format: 12
  date_locale: en-gb

Advanced Styling

You can add custom CSS for buttons, tabs, header, time, date and view. Since this is directly editing the CSS of elements it could require a good bit of trial and error on the user’s part, not all elements will react the same or as expected.
The config options are as follows: header_css:, tab_css:, button_css:, time_css:, date_css, and view_css:. view_css: is the entire container under the header. It is mainly useful to adjust the padding between the header and view to account for any custom css to the header that changes it’s height.

Example:

cch:
  tab_indicator_color: transparent
  background: black
  header_css: "border-bottom: 1px dashed pink;"
  view_css: "padding-top:63px;"
  button_css:
    menu: "margin-top: 17px; border-radius: 10px; padding-bottom: 20px; background: red; border: 1px dashed pink;"
    options: "margin-top: 129px; border-radius: 0 0 10px 10px; padding-bottom: 20px; background: red;border: 1px dashed pink;"
  tab_css:
    0: "margin-left:15px;"
    1: "border-right:1px dashed pink"
  time_css: 'font-size: 19pt;font-weight:300'
  date_css: 'font-weight:300'

Theme Variables

You can also style CCH from your HA theme's YAML to make it easier to share and lighter on your lovelace config. All styling options are available with the exception of single tab colors. Options set in the Lovelace config will override the themes values.

Example:

  cch-background: url("https://goo.gl/M3Dsf2")
  cch-all-buttons-color: blue
  cch-button-color-menu: green
  cch-button-color-notifications: yellow
  cch-button-color-voice: black
  cch-button-color-options: red
  cch-all-tabs-color: red
  cch-tab-indicator-color: yellow
  cch-active-tab-color: blue
  cch-notify-indicator-color: "#00FFFF"
  cch-notify-text-color: brown