Make font larger in form?

Questions related to using nuBuilder Forte.

Make font larger in form?

Unread postby Olikun » Wed Mar 10, 2021 3:18 am

Hi,

I come from Germany and use the google translator :)

I think nubuilder is great.

Can someone tell me how to make the font larger on a form?
Olikun
 
Posts: 48
Joined: Wed Mar 10, 2021 3:15 am
nuBuilder Version: 4.5

Re: Make font larger in form?

Unread postby kev1n » Wed Mar 10, 2021 3:53 am

Hi,

Modify the styles in core/css/nubuilder4.css:

E.g. set the font-size to 14px for labels:


Code: Select all
label {
   text-align:right;
   position:absolute;
   font-size: 14px;
}


Edit: It's better to overwrite styles in the Header (under Setup --> Header). Add this between the <style> tags:

Code: Select all

label {
   text-align:right;
   position:absolute;
   font-size: 14px;
}
kev1n
nuBuilder Team
 
Posts: 1625
Joined: Mon Oct 15, 2018 2:13 am
nuBuilder Version: 4.5

Re: Make font larger in form?

Unread postby icoso » Wed Mar 10, 2021 4:05 am

If you put your style changes in the Setup screen it over-rides the style in the nubuilder4.css file and therefore the changes you've made to the styles will be in the database and not possibly get over written by an updated file from nubuilder.

The Setup Screen is accessed from the Setup page when you log in as an admin click the Setup button on the screen.

You can use this same screen to define your own styles for other objects (such as HTML Objects) that you might put of your forms.

For Example you can put this in the Setup screen.:

Code: Select all
<style>
label {
  text-align: right;
  position: absolute;
  font-size: 16px
}

#label_formTitle {
  font-size: 16px;
  color: red;
  font-weight:bold;
}

#formTitle {
  font-size: 16px;
  color: red;
}

</style>
icoso
 
Posts: 150
Joined: Mon Feb 08, 2021 7:39 am
nuBuilder Version: 4.5

Re: Make font larger in form?

Unread postby Olikun » Wed Mar 10, 2021 4:25 am

Thanks for the quick responses.

I tried it.
It works, but when I paste it under setup everything becomes bigger, including the text of the settings (see picture)

Can I just paste it directly into the form?


Image

Image
Olikun
 
Posts: 48
Joined: Wed Mar 10, 2021 3:15 am
nuBuilder Version: 4.5

Re: Make font larger in form?

Unread postby kev1n » Wed Mar 10, 2021 4:52 am

Add an Object of type HTML to your form. Then in the HTML tab, add your style.
Attachments
html_style_form.png
html_style_form.png (25.74 KiB) Viewed 238 times
kev1n
nuBuilder Team
 
Posts: 1625
Joined: Mon Oct 15, 2018 2:13 am
nuBuilder Version: 4.5

Re: Make font larger in form?

Unread postby Olikun » Wed Mar 10, 2021 5:02 am

many thanks :)

it works out.
The name of the field is now 20px

But the text in the field is still small?


Image
Olikun
 
Posts: 48
Joined: Wed Mar 10, 2021 3:15 am
nuBuilder Version: 4.5

Re: Make font larger in form?

Unread postby icoso » Wed Mar 10, 2021 8:11 am

Olikun, If you're using firefox you can right click any element (field, label, etc) and choose inspect element (q). In Chrome right-click Inspect. From there you can see the class or id of each element. You can then find that class id in the nubuilder4.css or create a style for it in the setup screen.
icoso
 
Posts: 150
Joined: Mon Feb 08, 2021 7:39 am
nuBuilder Version: 4.5

Re: Make font larger in form?

Unread postby kev1n » Wed Mar 10, 2021 4:39 pm

Code: Select all
input {
    font-size: 20px;
}
kev1n
nuBuilder Team
 
Posts: 1625
Joined: Mon Oct 15, 2018 2:13 am
nuBuilder Version: 4.5

Re: Make font larger in form?

Unread postby Olikun » Sat Mar 13, 2021 1:47 am

icoso wrote:Olikun, If you're using firefox you can right click any element (field, label, etc) and choose inspect element (q). In Chrome right-click Inspect. From there you can see the class or id of each element. You can then find that class id in the nubuilder4.css or create a style for it in the setup screen.


Hello icoso,

Can you give me an example
I don't know what code to use

I have created a Word field in the "Home" area.

The sentence should be displayed larger.

Image
Olikun
 
Posts: 48
Joined: Wed Mar 10, 2021 3:15 am
nuBuilder Version: 4.5

Re: Make font larger in form?

Unread postby kev1n » Sat Mar 13, 2021 1:57 am

Label:
Code: Select all
<font size="50">Was machst du heute?</font>
kev1n
nuBuilder Team
 
Posts: 1625
Joined: Mon Oct 15, 2018 2:13 am
nuBuilder Version: 4.5

Next

Return to General

Who is online

Users browsing this forum: absalom, GlenMcCabe and 21 guests