Locations Page Badge Customisation

Add-ons UIs
, ,
1

Is it possible to change the badge style so a custom badge has the same look as the Alarm badge, but with a different icon.
I know how to change the icon:

image

I have tried adding things like

style:
  color: red

but that did nothing.

I’d like to have the badge shown with a blue circle to look like the red badge on the left
image

Also I’d like to know how it would be possible to change the order in which the badges are shown so the blue circled badge is moved next to the red badge where the open window badge is.

2

Not easily. There is no built in configuration for this. You can however, use the stylesheet property in an oh-location-card so it is possible that you could alter the style directly with css. This is still non-trivial because 1) the alarm badges and the status badges actually use different components (alarms are f7-chips, and the others are just span elements with icons and text inside), so you would need a lot of css changes, 2) there is no unique class or id for the badge elements, they are just in a fixed order so, unless you wanted to change the style of all the badges, your css selector would have to include one of the child position selectors.

It is not. As mentioned above, the order of the badges is hard-coded in the location card even if you define custom badge information.

3

Ok, I’m not at all familiar with css, however:

the others are just span elements…there is no unique class or id for the badge elements, they are just in a fixed order so, unless you wanted to change the style of all the badges, your css selector would have to include one of the child position selectors

Does this mean that since the status badges are dynamically created and removed, the child selector position changes for the particular badge, which would mean that the child position selector also has a dynamic value for the particular badge?

4

No, the badges are only displayed dynamically. They are always present (just with display: none if they are not active) so the fixed order also remains fixed at all times and a child position based selection should be accurate.

5

Alright! Thanks for helping me out and pointing me in all the right directions to do awesome stuff! :grin:

image

For reference and inspiration to others:

component: oh-location-card
config:
  backgroundImage: <myBackgroundImage>
  stylesheet: >
    .location-stats.margin-top span:nth-child(13)
    .padding-right.location-status-badge {
      background: #ff3b30 !important;
      border-radius: 10px !important;
    }  .location-stats.margin-top span:nth-child(13) .padding-right.location-status-badge .glance-label {
      font-size: 13px;
      margin-right: -6px;
    } .location-stats.margin-top span:nth-child(13) .padding-right.location-status-badge .f7-icon-badge.icon.f7-icons.color-white {
      font-size: 15px !important;
      height: 15px !important;
      line-height: 15px !important;
    }
  badges:
    speakers:
      badge:
        icon: f7:exclamationmark_circle_fill
1 Like