Styling & Themes - Multiple Fonts & Blocky Buttons

Forum to discuss the new web client version of Servoy.

Styling & Themes - Multiple Fonts & Blocky Buttons

Postby john1598360627 » Fri Dec 17, 2021 3:17 am

MULTIPLE FONTS?

I was trying to implement another font via style class. However, the main theme (custom_servoy_theme_properties.less)'s font-family property is always overriding any type of font I try to implement elsewhere.

In my example, I was trying to implement the google font 'Lato' using a font-face but nothing was happening. Until, I placed it in that main font-family and then suddenly everything changed to 'Lato'.

Is this intended, that only one font-family can be applied per theme? Or is there another way of having multiple fonts applied overriding the theme's default.

How to have these co-exist, and not get overwritten by the main theme font.
Code: Select all
.font-arial{
   
   font-family: Arial, sans-serif;
   font-size: 1.2rem;
   
   color: black;
}

.font-different{
   
   font-family: 'Lato', sans-serif;
   font-size: 1.2rem;

   color: black;
}


BLOCKY BUTTONS?

I was curious on why Servoy's default buttons are always blocky? With labels I seem to have more control.

1st row - Servoy Buttons
2nd Row - Labels I did
Screenshot 2021-12-16 155752.png


I have the same amount of padding and radius of border for both the buttons and labels, and yet the buttons are blocky. What's going on with that? Is there a way to make the Servoy Buttons not blocky, or will I have to use labels as a button to if I prefer that style?

Also for whatever reason, I can't get rid of borders for buttons, but I can for labels. Not sure why that is either.
You do not have the required permissions to view the files attached to this post.
john1598360627
 
Posts: 169
Joined: Tue Aug 25, 2020 3:03 pm

Re: Styling & Themes - Multiple Fonts & Blocky Buttons

Postby john1598360627 » Wed Jan 12, 2022 2:37 am

I'm still curious about this!
john1598360627
 
Posts: 169
Joined: Tue Aug 25, 2020 3:03 pm

Re: Styling & Themes - Multiple Fonts & Blocky Buttons

Postby paronne » Wed Jan 12, 2022 2:02 pm

Hi John,

i believe you are using the Servoy Default (Legacy) Label & Button elements in your form instead of the Label & Button from the Bootstrap Component.
Tried to replicate your setup in a sample.

The label element has a property "transparent" which is set to true by default, making the label background transparent.

About the font style: the Default Label & Button are bit different compared to the Bootstrap Button & Label in their HTML template.

the resulting HTML of a Legacy button will be something like

Code: Select all
<button class="svy-button font-arial">
     <div>
         <span/>
         <span>My Text</span>
     </div>
</button>


your class font-arial will be applied to the button element, however the theme will apply the Theme's family in the span because of the Theme's rule:

Code: Select all
*, body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}


In general, there is not a problem to apply multiple fonts in the CSS. However is not expected since often UI/UX designs try to enfornce constiently the same font across all UI.
The rule of the Theme indeed try to apply the set font family to all Elements.

To apply your font also in the inner span of your Label/Button you need to make sure the CSS rule is applied also to the inner span of your button/label.

Code: Select all
.font-arial,
.font-arial.svy-button *,
.font-arial.svy-label * {
   
   font-family: Arial, sans-serif;
   font-size: 1.2rem;
   
   color: black;
}

.font-different,
.font-different.svy-button *,
.font-different.svy-label * {
   
   font-family: 'Lato', sans-serif;
   font-size: 1.2rem;

   color: black;
}


Hope it clarifies for you.
Regards,
Paolo
paronne
 
Posts: 202
Joined: Fri Nov 02, 2012 3:21 pm

Re: Styling & Themes - Multiple Fonts & Blocky Buttons

Postby john1598360627 » Thu Jan 13, 2022 1:51 am

i believe you are using the Servoy Default (Legacy) Label & Button elements in your form instead of the Label & Button from the Bootstrap Component.
Tried to replicate your setup in a sample.


I'm using Button that is under "Buttons & Text". The buttons I'm using say they are 'bootstrapcomponents-button'. Is this Legacy and there's a new Bootstrap button?


To apply your font also in the inner span of your Label/Button you need to make sure the CSS rule is applied also to the inner span of your button/label.


Hmmm, interesting. AH, I see now. So I have to wrap the different font into the body. I will try and replicate that.
john1598360627
 
Posts: 169
Joined: Tue Aug 25, 2020 3:03 pm

Re: Styling & Themes - Multiple Fonts & Blocky Buttons

Postby paronne » Thu Jan 13, 2022 3:41 pm

Hi John,

The 'bootstrapcomponents-button' & 'bootstrapcomponents-label' are the Boostrap components.
The Legacy Button & label are under the group 'Servoy Default'.

I assumed you were using the Legacy elements since you were not able to change the font of your button.
In my sample, using your style i can change the font for the Bootstrap button; not sure why doesn't happen for you.
To change it also for the Bootstrap Label i need to adjust the CSS like this:

Code: Select all
.font-arial,
.font-arial.svy-button *,
.font-arial.svy-label *,
.font-arial .bts-label-text {
   
   font-family: Arial, sans-serif;
   font-size: 1.2rem;
   
   color: black;
}

.font-different,
.font-different.svy-button *,
.font-different.svy-label *,
.font-different .bts-label-text {
   
   font-family: 'Lato', sans-serif;
   font-size: 1.2rem;

   color: black;
}


Note the ".font-arial .bts-label-text" used to target the boostrap label span within the element with styleClass font-arial.

Regards,
Paolo
paronne
 
Posts: 202
Joined: Fri Nov 02, 2012 3:21 pm

Re: Styling & Themes - Multiple Fonts & Blocky Buttons

Postby john1598360627 » Tue Jan 18, 2022 10:59 pm

paronne wrote:Hi John,

The 'bootstrapcomponents-button' & 'bootstrapcomponents-label' are the Boostrap components.
The Legacy Button & label are under the group 'Servoy Default'.

I assumed you were using the Legacy elements since you were not able to change the font of your button.
In my sample, using your style i can change the font for the Bootstrap button; not sure why doesn't happen for you.
To change it also for the Bootstrap Label i need to adjust the CSS like this:

Code: Select all
.font-arial,
.font-arial.svy-button *,
.font-arial.svy-label *,
.font-arial .bts-label-text {
   
   font-family: Arial, sans-serif;
   font-size: 1.2rem;
   
   color: black;
}

.font-different,
.font-different.svy-button *,
.font-different.svy-label *,
.font-different .bts-label-text {
   
   font-family: 'Lato', sans-serif;
   font-size: 1.2rem;

   color: black;
}


Note the ".font-arial .bts-label-text" used to target the boostrap label span within the element with styleClass font-arial.

Regards,
Paolo


I did this and it worked, thanks!
john1598360627
 
Posts: 169
Joined: Tue Aug 25, 2020 3:03 pm


Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 2 guests