ok, so please forgive me if I missed it reading the full thread (thought is was being reported and fixed in a later update), but why am I losing the chevrons after each window resize? HA 0.92.1.
Is there a way to hide tabs from a device but still let them be able them to access those pages?
My use case is putting live camera views on hidden pages (panel mode, so full screen) but sending the URL for that tab to a tablet when motion is detected. It all works fine until I hide the tab and then the device cannot view that tab, it just goes to the first tab.
That worked…thankyou very much!
Tried searching but did not see any mention of this. When CCH loads and I switch to another tab, the cards go up into the header some. Any ideas?
When CCH Loads on the main config page:
When I select the office tab:
This usually happens when CCH isn’t included on every view.
You were incredibly fast and your right, I didnt have it every view. I must have misunderstood that it was required when I saw the note about only using the “main config”. Ill go ahead and add to all of them and I am sure it will fix it. Thanks for the quick response, much appreciated!
1 Like
Add the card to every view, first view is the only one where you setup your config and must be set as main_config: true
Thanks, I did and it cleared it up! Again much appreciated! Love this custom header
Could someone let me know what I’ve done wrong here, I’m having a total mind block.
I have downloaded the two files into my www/custom_ui folder, added;
- url: /local/custom_ui/compact-custom-header.js
type: js
- url: /local/custom_ui/compact-custom-header-editor.js
type: js
under my resources, and then added this;
views:
# View tab title.
- title: Home
# Unique path for direct access /lovelace/${path}
# path: example
# Optional background (overwrites the global background).
background: rgb(5, 29, 66)
# Each view can have a different theme applied. Theme should be defined in the frontend.
# theme: dark-mode
# The cards to show on this view.
cards:
- type: custom:compact-custom-header
- type: entity-filter
entities:
- switch.livingroom_lamp
- switch.livingroom_lamp_2
Remove this, it’s not needed
- url: /local/custom_ui/compact-custom-header-editor.js
type: js
Also, this needs to be type: module not js:
- url: /local/custom_ui/compact-custom-header.js
type: module
Thanks Mayker, great card.
I didn’t want to raise an issue for this as I am pretty sure it isn’t one and is just down to my config.
Can anyone see why my tab colour and icon doesn’t change to green when sensor.cycle1_running is Running?
main_config: true
background: var(--primary-background-color)
active_tab_color: yellow
tab_indicator_color: yellow
notify_indicator_color: yellow
notify_text_color: black
menu: show
notifications: show
voice: clock
options: show
clock_format: 24
clock_date: true
date_locale: en-gb
exceptions:
- conditions:
user_agent: Mobile
config:
notifications: show
voice: hide
conditional_styles:
- entity: notifications
condition:
state: false
button:
notifications:
hide: true
- entity: sensor.cycle1_running
condition:
state: Running
tab:
3:
color: green
off_icon: mdi:flower
on_icon: mdi:fountain
- entity: sensor.cycle2_running
condition:
state: Running
tab:
3:
color: green
off_icon: mdi:flower
on_icon: mdi:fountain
Multiple conditions for styling one item isn’t supported yet. Use the solution I posted to your issue for now.
1 Like
Hi,
Thanks for the nice sharing!
I have implemented your custom header into my HA.
However, I found out one small issue.
When viewing from Mobile Phone, I can’t swipe left or right to switch between these multiple icon tabs, which is slightly inconveniences for mobile app users.
I still need to click these icons in order to access another icon tab content.
Is there any ways to implement swipe left or right for access icon previous/next tab contents?
Thanks.
Have a look at:
Didn’t realize someone else had already had something to this effect. Looks like his option refreshes the page on each swipe.
I’ve actually been working on implementing this into CCH for a while now so expect it in a future update.
3 Likes
Also looks like his option uses the same code from stackoverflow I’m using heh. Not sure if I should still implement what I have into CCH or give him a hand with his project.
Actually, if anyone wants to check it out I added swipe navigation to the dev branch. Currently it has a few known bugs and I could use some testers to find others:
- After interacting with a view swipe navigation stops working for a few seconds.
- If using chevrons on the header the tabs don’t scroll correctly to show current tab
- Currently no way to override browsers default swipe actions
- Feature doesn’t have a toggle yet, so it’s always on
Edit:
I’ve since removed this branch and I just submit a PR to @themoffatt 's project listed above, will post an update if they pull it. Until then you can find my fork of the project here:
4 Likes
Thanks for sharing on this.