I wondered about that. But the card should be able to fix this as well. No one shows the degree symbol like that.
if the card accepts selectors then try one of the 2 I posted in the previous message
1 Like
@petro is correct, due to the difference in font-size the degrees symbol is halfway up the value.
This is intentional, as this is the same for other sensor cards:
With card-mod you can change the styling of the card to your liking.
Instead of making the degrees symbol larger, you could make the elevation smaller:
style: |
.sensor-1 {
line-height: 18px;
}
.sensor-1 .value {
font-size: 18px !important;
}
You get this result:
Or make the degrees symbol larger with this yaml:
style: |
.sensor-1 .measurement {
font-size: 28px !important;
}
And this result:
As you can see I only changed the look of the second value, this is possible with v1.0.0-alpha2 and higher.
For css reference:
- All indicator-values (the NW) are wrapped in a
indicator-sensorsclass - Each separate indicator value line is wrapped in a
sensor-xclass, with x beeing the index of the sensor- 0 for first sensor displayed, 1 for second and so on.
- Each separate indicator-sensor line is divided in 3 parts, with each its own class
- abbreviation part with class
abbr- only the first indicator-sensor has its values shown by default, if you wish to enable this for the next indicator entities, add for each indicator-sensor you want to show
state_abbreviation: show: true
- only the first indicator-sensor has its values shown by default, if you wish to enable this for the next indicator entities, add for each indicator-sensor you want to show
- value part with class
value- value is hidden by default, if you wish to show the value for a sensor add the following to your yaml
state_value: show: true
- value is hidden by default, if you wish to show the value for a sensor add the following to your yaml
- units part with class
measurement- Measurement is the odd one, but the ha vanilla sensor-card also uses measurement for the units
- units are hidden by default, if you wish to show the value for a sensor add the following to your yaml
state_units: show: true
- abbreviation part with class
- All value-sensor values are wrapped in a
value-sensorsclass - Each separate value-sensor value line is wrapped in a
sensor-xclass, with x beeing the index of the sensor- 0 for first sensor displayed, 1 for second and so on.
- Each separate value line is divided in 2 parts, with each its own class
- value part with class
value - units part with class
measurement- Measurement is the odd one, but the ha vanilla sensor-card also uses measurement for the units
- value part with class
1 Like
Actually itās not the same in any other card and itās not any kind of standard. (I am a Land Surveyor by training)
Iāll try the suggested css to correct this but it shouldnāt be necessary.
Youāre correct, not all cards show the units in smaller font.
The entities-card shows the units same font-size as the value:
However Iām trying to keep the compass-card default layout as close to the default sensor-card (top-left) as possible and this also has a smaller font for the units (unless my dev env is broken).
None of these doā¦
None of those do and itās not any kind of standard I am aware of (outside a sensor/entity card apparently)
Beta 1 for v1.0.0 is out. 
The dynamic styling is working now.
I tried to write up an example on how to configure it: https://github.com/tomvanswam/compass-card/tree/v1.0.0-beta1#dynamic-style--style-band-example
If you have any questions, just ask.
Hi Tom, what am I doing wrong?
Not seeing the indicator change colour with this config:
type: 'custom:compass-card'
indicator_sensors:
- sensor: sensor.bom_hobart_wind_direction
dynamic_style:
sensor: sensor.bom_hobart_wind_speed_kt
bands:
- from_value: 0
color: '#039BE5'
- from_value: 10
color: '#0da035'
- from_value: 20
color: '#e0b400'
- from_value: 30
color: '#e45e65'
value_sensors:
- sensor: sensor.bom_hobart_wind_speed_kt
compass:
north:
show: true
header:
title:
value: Wind Direction
I can get the north symbol to change colour with a similar config, but that is not what Iām after.
Hi @tom_l , the dynamic_style for the indicator is in a indicator object like this:
indicator_sensors:
- sensor: sensor.bom_hobart_wind_direction
indicator: # add this level to change the indicator
dynamic_style:
sensor: sensor.bom_hobart_wind_speed_kt
bands:
- from_value: 0
color: '#039BE5'
- from_value: 10
color: '#0da035'
- from_value: 20
color: '#e0b400'
- from_value: 30
color: '#e45e65'
Edit: corrected yaml example
1 Like
Close, I had to indent sensor and bands under dynamic_style too.
class: top-level-graph
type: 'custom:compass-card'
indicator_sensors:
- sensor: sensor.bom_hobart_wind_direction
indicator:
dynamic_style:
sensor: sensor.bom_hobart_wind_speed_kt
bands:
- from_value: 0
color: '#039BE5'
- from_value: 10
color: '#0da035'
- from_value: 20
color: '#e0b400'
- from_value: 30
color: '#e45e65'
value_sensors:
- sensor: sensor.bom_hobart_wind_speed_kt
compass:
north:
show: true
header:
title:
value: Wind Direction
1 Like
Ah, I was struggeling with the copy paste of your example so I did mess up the indenting 
Itās a great card. Thanks!
2 Likes
How can I adjust the compass card height to match the height of other cards (to match the cards on either side)? See screenshot. (FYI, Iām using the V1.0.0-beta1)
I will answer my own question. Install ācard-modā from HACS and add the following style to the card:
type: 'custom:compass-card'
style: 'ha-card { height: 100%; }'
2 Likes
Hi, wanting to use this card but struggling to get it to show up. Trying to follow steps in Manual:-
1&2) Looks to have downloaded OK to default location - /config/www/community/compass-card
- I donāt have Lovelace Dashboards in my Config folder.
Seems a basic omission but begs potentially silly questions as to why & how to best rectify?
TIA
You can find the lovelace dashboard in the configuration menu in home assistant gui. From step 3 on everything is done on the webpages itself.
Thanks for replying. I was looking in File Editor, of course. Your download was next to another downloaded card yet wasnāt appearing in the cards, unlike the other.
Restarting and looking at it again in the light of day seems to have resolved it!
1 Like
Why i donāt get the sun elevation unit in the card?
This is my card:
- type: custom:compass-card
header:
title:
value: Wind Direction & Sun
indicator_sensors:
- sensor: sensor.cc_climacell_wind_direction_0h
indicator:
dynamic_style:
sensor: sensor.cc_climacell_wind_speed_00m
bands:
- from_value: 0
color: '#039BE5'
- from_value: 10
color: '#0da035'
- from_value: 20
color: '#e0b400'
- from_value: 30
color: '#e45e65'
type: arrow_inward
- sensor: sun.sun
attribute: azimuth
indicator:
type: circle
value_sensors:
- sensor: sensor.cc_climacell_wind_speed_00m
- sensor: sun.sun
attribute: elevation
compass:
north:
show: true
offset: 0
What is your background for that ? and how have you done it ? 