CSS Font Theme Overwritten by Appery

[Illya Stepanov]

Hi Bahar - how you implement this font in your app?

[Michael4771079]

Hi Bahar,
I had a prob with themeroller, it turned out I was using themeroller 1.4, Maryna pointed out that my theme should be 1.3 release, I changed it in themeroller and all was sorted, hope this helps, if not don't blame me

[Kateryna Grynko]

Hi,

To make a style more important add this to your CSS code:pre!important/pre

[bahar.wadia]

Katya, you are the queen. That works!

Is there a generic class for the Label component. For example Button is .ui-btn. What is it for Label. I can't seem to find it. I hate the though of going through my entire app and add a Class name to all the labels.

Thank you so much. I have been trying to resolve this for months.

[Kateryna Grynko]

Hi Bahar,

To access all the Label components in your app you can select by attribute instead of class:pre[data-role="appery-label"]/pre

[bahar.wadia]

I tried applying the following CSS with "appery-label".

.appery-label{
font-family:"robotolight" !important;
font-weight:100
}

The above does not work.

However when I add my own Class name (eg. My-Label) to the label it works.

.My-Label{
font-family:"robotolight" !important;
font-weight:100
}

How do I get ".appery-label to work ?

[Maryna Brodina]

Hello! You have pre.appery-label{ ... }/pre and that means style for all elements with this class, but there is no such class for label. Try this way pre[data-role="appery_label"]{
font-family:"robotolight" !important;
font-weight:100 !important;
}/pre

[bahar.wadia]

Works like a charm. Awesome!

Also where can I find a list of "data-role" for Appery specific components ?

[Maryna Brodina]

There is no such list. You can inspect element you need in dev console to find out its data-role.

[bahar.wadia]

Thank you for the response.

As a suggestion...it would be great if you could publish such a list.

Thanks