Button Blocks and Radial Chart Workarounds?

Ask for Help
1

Finally getting around to rebuilding our Classic App in the new Apps interface. Still much to be desired but it’s beginning to shape up. We’re BIG on user interface layout so a couple of styling questions in hopes that there is a resolve.

Question 1. Should there be a Button Block Accent setting of “ALL” so that we can ensure all of the buttons are the accent color vs. just Left, Right or None? Old Classic Apps allowed this. Is there a way to set a button’s color with CSS code in Pages?

Button Block Options

Classic Buttons all same color…
Classic Buttons

Pages Button Bar ONLY allowing one to be accent color…
Pages Buttons

Question 2. Is there a way to"Show Total in Center" OR “collapse” the legend on the new Radial Chart in the new Apps/Pages like we could on the Classic App Donut Charts?

The new Radial Chart would greatly benefit from an “i” info button to toggle the legend.

Classic Donut Chart…

Classic Donut Chart

New Radial Chart…

New Radial Chart
New Radial Chart431×631 31.2 KB

2

Yes.

image

a[aria-label="Call"] {
background-color: gold;
color: black;
}

button[aria-label="Email"] {
background-color: red;
color: white;
}

button[aria-label="Email"] svg {
color: white;
}

There was an a[aria-label…] there because that button was assigned to an “Open link” action. You can modify it to a or button as needed.

No, I would suggest using Quickcharts or Chart.js.

2 Likes
3

Thanks ThinhDinh for your response. We used to be able to drop that code in a RichText field in Classic, but that’s NOT the case in the new Pages / Apps right? So where did you place that code? I both Legacy Business and Legacy Pro plans.

4

In new apps, it’s different, you must have Business/Enterprise and paste that code in Settings > Appearance > Custom CSS.

image
image606×870 71.2 KB

1 Like
5

Ahh, I see. Thanks. :heart:

1 Like
6

You can also give a class name to your components, so make sure you always use stable class names.

7

Will this type of tab notification still work in the new Pages / Apps?


button[aria-label="Announcements"]::before {
  content: "{count}";
  position: absolute;
  font-size: 11px;
  font-weight: 800;
  color: white;
  padding: 3px;
  top: 4px;
  right: 50px;
  z-index: 1;
  height: 20px;
  width: 20px;
  background-color: red;
  border-radius: 50%;
}
8

Looks like you’re using a template column to dynamically have the count there, so no, it won’t work. We can only have static CSS.

9

Yep that gave us a nice visual count indicator on one of our icons in the Classic App but now no way to do that in the new Pages / Apps.

Indicator

1 Like