Make font larger in form?

[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?

[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;
}

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;
}

[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>

[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?

[kev1n]

Add an Object of type HTML to your form. Then in the HTML tab, add your style.

[Olikun]

many thanks

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

But the text in the field is still small?

[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.

[kev1n]

Code: Select all

input {
    font-size: 20px;
}

[Olikun]

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.

[kev1n]

Label:

Code: Select all

<font size="50">Was machst du heute?</font>