It’s quite possible the load order is not loaded correctly. Try a full hard reload (refresh cache etc). In regards to the look, see the theme examples on the readme.
So I was able to get this working relatively consistent. I was also able to get the honeycomb shape theme for the buttons. The only thing left I am trying to figure out is how to get my button card to also look like the honeycomb ?
Thanks,
Can you share a screenshot of what you want changed and the code you have at the moment ?
So I’m just trying to get the card itself to be honeycomb shaped (inside red square):
As for the code, I don’t have any. Wasn’t sure if this was some sort of change I need to make inside my theme.yaml file for my current Theme or what.
You cannot alter the shape of the custom button card.
Or I misunderstood your question perhaps ?
Could you share what it is that you would like it to look like ?
Yeah, this is from the Github for this integration. It looks as though the button cards themselves are honeycomb shaped, and then when clicked on, the honeycomb buttons open:
Well I don’t think you will find that in any of the ‘examples’ because I don’t see it unless @Sian will share that with us?
But, don’t stress you can do your own.
Grab yourself a hexagon PNG.
I got it from here and modified it for an ON state as well just for some testing.
honey.png
hex_1
Place these 2 files in config/www/images/ directory.
Done.
Almost 
Just a simple example to get you started.
Probably other ways of doing it better, but hey it works 
Paste this into a Manual card.
square: false
columns: 3
type: grid
cards:
- type: custom:button-card
entity: light.kitchen_3_lights
entity_picture: /local/images/hex.png
show_entity_picture: true
name: 3 Lights
state:
- value: 'on'
color: black
entity_picture: /local/images/hex_1.png
- value: 'off'
color: black
entity_picture: /local/images/honey.png
styles:
entity_picture:
- width: 200%
- height: 100%
card:
- filter: opacity(100%)
- box-shadow: unset
- background-color: unset
- background: none
- type: custom:button-card
entity: light.kitchen_3_lights
entity_picture: /local/images/honey.png
show_entity_picture: true
name: RoboVac
tap_action:
action: call-service
service: honeycomb
service_data:
size: 300
active: true
buttons:
- type: custom:button-card
name: Clean Bathroom
tap_action:
action: toggle
entity: script.clean_living_room
styles:
icon:
- color: violet
position: 0
- type: custom:button-card
name: Clean Bathroom
tap_action:
action: toggle
entity: script.clean_bathroom
styles:
icon:
- color: red
position: 1
- type: custom:button-card
name: Clean Hallway
tap_action:
action: toggle
entity: script.hallway
styles:
icon:
- color: orange
position: 2
- type: custom:button-card
name: Clean Kitchen
tap_action:
action: toggle
entity: script.clean_kitchen
styles:
icon:
- color: green
position: 3
- type: custom:button-card
name: Clean Meals
tap_action:
action: toggle
entity: script.clean_meals
styles:
icon:
- color: aqua
position: 4
- type: custom:button-card
name: Go to Bin
tap_action:
action: toggle
entity: script.goto_bin
styles:
icon:
- color: white
position: 5
styles:
entity_picture:
- width: 200%
- height: 100%
card:
- filter: opacity(100%)
- box-shadow: unset
- background-color: unset
- background: none
- type: custom:button-card
entity: light.kitchen_2_lights
entity_picture: /local/images/honey.png
show_entity_picture: true
name: 2 Lights
state:
- value: 'on'
color: black
entity_picture: /local/images/hex_1.png
- value: 'off'
color: black
entity_picture: /local/images/honey.png
show_state: true
styles:
entity_picture:
- width: 200%
- height: 100%
card:
- filter: opacity(100%)
- box-shadow: unset
- background-color: unset
- background: none
You should hopefully get something like this ?
Just an example of what’s possible. Do share how you go.
Take care my friend and all the best 
1 Like
try ensuring the following styles are in your current theme.yml:
--honeycomb-menu-icon-color: some color
--honeycomb-menu-icon-active-color: some color
--honeycomb-menu-background-color: some color
--honeycomb-menu-active-background-color: some color
--honeycomb-menu-disabled: some color
can anybody help me?
Logger: frontend.js.latest.202209070
Source: components/system_log/init.py:227
First occurred: 17:42:30 (1 occurrences)
Last logged: 17:42:30
webpack:///./src/honeycomb-menu.js?:347:16 Uncaught TypeError: Cannot read properties of undefined (reading ‘shade’)
This is likely do to incompatible web browser. I get that error if I try to use the honeycomb on my phone using the HA app. I can verify I have no issues in Chrome or Fully Kiosk Browser.
Tks @neofraz03 for the help. I tried several browsers, without success in all. Chrome, Edge, App HA, Brave…
1 Like
hmm… I know that when I was having those issues, I rebooted my host machine running HASS, and then it started working better. I believe that @Sian said above that it seems something wasn’t loaded in the correct order, and a reboot resolved it for me. I also cleared my cache and cookies from my browser and relaunched it.
Can you share the code you have at the moment perhaps ?
All good. Glad you go it working 
hi friends i am triying to use HoneyComb menu over a Picture element.
I an doing something like:
type: custom:swipe-card
cards:
- type: picture-elements
elements:
- type: custom:button-card
icon: mdi:lightbulb
style:
top: 25%
left: 50%
width: 5%
tap_action:
action: call-service
service: honeycomb
service_data:
active: true
buttons:
- type: custom:button-card
name: encender
tap_action:
action: toggle
entity: light.cocina_luz_barra
styles:
icon:
- color: red
position: 0
- type: image
entity: light.estancia01_habitacion1
style:
top: 61.5%
left: 53%
width: 31%
state_image:
'on': /local/floorplan/planta0HabJugON.png
'off': /local/floorplan/transparent.png
tap_action:
action: toggle
- type: image
entity: light.bano01_banoabajo
style:
top: 56.5%
left: 74%
width: 24%
state_image:
'on': /local/floorplan/planta0banoOn.png
'off': /local/floorplan/transparent.png
tap_action:
action: toggle
image: /local/floorplan/planta0day_off.png
- type: picture-elements
elements:
- type: state-icon
entity: switch.jardin_riego_switch_1
style:
top: 10%
left: 18.2%
width: 24%
image: /local/floorplan/planta0day_off.png
I have no problem with the images but the honeycomb menu dont show.
¿anyone know the reason?
Hi, there
recently I’ve integrated Honeycomb into my Home Assistant Dashboard (using a mix of standard lovelace cards and mushroom cards. Honeycomb works great using (even in Kiosk-Mode) on a Chrome browser. But with my mobile app I instantly get the message at the bootom of the screen:
error calling service honeycomb/undefined required key not provided @ data [‘service’]
Any helpful tips on how to resolve this?
I know according to GitHub this is still in Alpha Phase and errors are to expected, but maybe there is already a fix for that.
regards
I had the same issue and solution found above helped.
Instead of using
tap_action:
action: more-info
use below:
tap_action:
action: more-info
tap_action: none
hold_action: none
double_tap_action: none
Where exactly should this go when I have themes from HACS installed? There’s no theme.yaml. I have
frontend:
themes: !include_dir_merge_named themes
I use the Mushroom or Default theme.
Not sure where to put this and should I include or exclude styles{}?
styles {
--honeycomb-menu-icon-color: var(--paper-item-icon-color);
--honeycomb-menu-icon-active-color: var(--paper-item-icon-active-color);
--honeycomb-menu-background-color: var(--paper-card-background-color);
--honeycomb-menu-active-background-color: var(--paper-card-active-background-color, var(--paper-card-background-color));
--honeycomb-menu-disabled: #9a9a9a6e;
}
If the menu is showing and you’re happy with the colours etc then just ignore it otherwise you might want to look at the themes documentation for Home Assistant