Page 1 of 2
Make font larger in form?
Posted: Tue Mar 09, 2021 6:48 pm
by Olikun
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?
Re: Make font larger in form?
Posted: Tue Mar 09, 2021 7:23 pm
by kev1n
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;
}
: 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;
}
Re: Make font larger in form?
Posted: Tue Mar 09, 2021 7:35 pm
by icoso
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>
Re: Make font larger in form?
Posted: Tue Mar 09, 2021 7:55 pm
by Olikun
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?
Re: Make font larger in form?
Posted: Tue Mar 09, 2021 8:22 pm
by kev1n
Add an Object of type HTML to your form. Then in the HTML tab, add your style.
Re: Make font larger in form?
Posted: Tue Mar 09, 2021 8:32 pm
by Olikun
many thanks
it works out.
The name of the field is now 20px
But the text in the field is still small?
Re: Make font larger in form?
Posted: Tue Mar 09, 2021 11:41 pm
by icoso
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.
Re: Make font larger in form?
Posted: Wed Mar 10, 2021 8:09 am
by kev1n
Re: Make font larger in form?
Posted: Fri Mar 12, 2021 5:17 pm
by Olikun
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.
Re: Make font larger in form?
Posted: Fri Mar 12, 2021 5:27 pm
by kev1n
Label: Code: Select all
<font size="50">Was machst du heute?</font>