"Configure Roles" is eluding me

Anvil Q&A
1

Trying to follow the bits here I’m finding about roles, they all seem to suggest following this:

Theme - Assets - Configure Roles

I do not see ‘configure roles’ anywhere

2

Please see the documentation and let us know if they are unclear.

https://anvil.works/docs/client/themes-and-styling

3

I’m trying to follow these instructions.

First bullet above: I go to assets, and I see nothing anywhere that says “Configure roles…” so I’m stuck right there.

In ‘theme.css’ - I created this:

.anvil-role-qspeer {
  font-size: 13px;
  line-height: 24dp;
}

I go into the properties section of my label control, and I do not see this new role as an option.

4

That thread is 2 years old which may explain the differences. Please read the docs on Roles (I think you just need to click “Roles”).

https://anvil.works/docs/client/themes-and-styling

5

so when I click ‘Roles’ - I see a plus sign, and an input box for a role name. I add my role name, click “+” and nothing happens or has any affect

Not sure what or where I’m supposed to do here - the only option I see is to delete existing roles, or change their assignment

image
image1937×835 83.6 KB

7

Have you tried clicking “enter” ? (not the plus icon)

8

I have no idea anymore I’ve tried so many things, so far spent four days on simple formatting stuff. I have two options in HTML: Custom, and Standard Page. I have it set to custom HTML now.

9

Try clicking enter instead of clicking the plus icon.

2 Likes
10

That worked… love this platform but that… is not exactly intuitive

11

If you have a specific suggestion to improve Anvil, I’d encourage you to make a feature request.

2 Likes
12

… and… now the ‘text’ role that I applied to reduce the padding on my labels is no longer available. so frustrating

13

Please keep further comments on this thread instead of commenting on the really old FR.

1 Like
14

Roles should not disappear unless they were accidentally deleted from the “Roles” interface, restricted to a specific component that you are not targeting, or have a malformed CSS name (i.e., they are not in the form .anvil-role-my_role).

Are those details correct in your app? I could look at a clone if you have one you can share.

2 Likes
15

OK, I think I have it all working together…

1 Like
16

Glad to hear it! Good luck with the rest of the development.

17

What is the difference between these two entries, what are they each for? I copied these from ‘text’

.anvil-role-peertext {
  font-size: 14px;
  border-width: .1px;
  border-top-style: solid
}
.anvil-role-peertext > .label-text, .anvil-role-text .link-text {
  padding-top: 0;
  padding-bottom: 0;
  border-color: red
}
18

I’m trying to get a top border only, in a light blue, but can’t figure that out.

19

If you search Google for “CSS top border only” does something helpful come up that you can try?

20

Ah, that worked, there are other CSS styles that I was trying and did not work, have to pay attention to detail in this, thanks for persisting!

21

also worth noting that you can have multiple roles which is in beta right now.

You have to set this at runtime in the __init__ method like:

self.label.role = ['text', 'qspeer']

Linked feature request:

Multiple "roles"

2 Likes