Forums

change font size of field name on form

sifaka 13 Dec, 2018
Is there an easy way to change the font size of the field names on the form? to make the labels' text larger? Thanks
healyhatman 13 Dec, 2018
Sure is, with CSS!
div.field label:first-of-type { font-size: 25px !important; }
sifaka 13 Dec, 2018
Answer
Thank you. I want to change the size of the text of the names of the
field_checkboxes20
field_secicon23
and
the acceptable file type extensions. jpg,png,gif,pdf,doc,docx,txt,zip,xls
could you tell me how to do that? the css class names for those?

the calss name ".ui.form .grouped.fields>label" doesn't look valid
GreyHead 14 Dec, 2018
Hi sifaka,

If you post a link to your form it would be easier to see what you need.

Bob
healyhatman 14 Dec, 2018
In the advanced tab under extra attributes just add class:my class

Then your CSS is just
.myClass { font-size:blahblah}
For the file extensions, just add the extensions you want. Open up the settings of your file field and your file upload action should be pretty obvious.
GreyHead 14 Dec, 2018
1 Likes
Hi sifaka,

For the filetype instructions this works
div.field small {
font-size: larger;
}
and for the checkbox labels
div.checkbox label {
font-size: larger !important;
}
Basically use your web-browser tools to see exactly what selector and style you need to use.

Bob
sifaka 16 Dec, 2018
What is the right css code for this?:
.ui.form .grouped.fields>label
I can't come up with a set of words that alters the font.
it is for the "select the...." text.
thanks
healyhatman 16 Dec, 2018
Works for me, on the site you linked.
healyhatman 16 Dec, 2018
I mean I manually added the rule in Chrome dev tools and it worked so you're probably not putting it in properly
sifaka 16 Dec, 2018
.ui.form .grouped.fields>label {
font-size: 20px !important;
}
How about that?
healyhatman 16 Dec, 2018
Yes it works. Looks terrible with the giant font and inconsistent capitalisation, but yes it works.
sifaka 17 Dec, 2018
Healyhatman, Do you know why it didn't work on my machine?
The edit to the custom.css file did not show up until much later after the file was saved. It took something like half a day. What font do recommend? thank you
healyhatman 17 Dec, 2018
Sounds like you forgot to clear your cache.

I recommend the standard font or at least a normal sized one.
sifaka 21 Dec, 2018
Are the form labels showing up in larger, 14pt type on your computer? I've cleared my cache. Everything is showing up nicely except for the
your name, your email, your mobile phone,
etc. fields.

are they showing up 14pt large here for you?
http://enlaceslanguagesolutions.com/index.php/en/request-an-on-site-interpreter
This is the css. .ui.form .field>label should do it. I have it in there.div.field label:first-of-type { font-size: 14px !important; }

div.field small {
font-size: 14pt !important
}
div.checkbox label {
font-size: 14pt !important;
}
.ui.form .grouped.fields>label {
font-size: 14pt !important;
}

.ui.checkbox input.hidden+label {
font-size: 14pt !important;
}

.navbar-inverse .brand, .navbar-inverse .nav>li>a {
font-size: 14pt !important;
}

.ui.form .field>label {
font-size: 14pt !important;
}
sifaka 02 Jan, 2019
How can I make the custom message (on successful sending of the form) show up in larger font size? I am trying this but it doesn't work.
.semanticui-body p:last-child {
font-size: 14pt !important;
}

.semanticui-body p:first-child{
font-size: 14pt !important;
}

.semanticui-body p {
font-size: 14pt !important;
}

http://sifaka.x10.mx/joomla30/index.php/en/document-translations
GreyHead 02 Jan, 2019
Hi sifaka,

I don't see a thank you message after I submit your form :-(

Bob
sifaka 02 Jan, 2019
You have to click on the submit a document for translation link
GreyHead 02 Jan, 2019
Hi sifaka,


I did that, submitted the form and was returned to the same page with no obvious thank you message.

Bob
healyhatman 02 Jan, 2019
Instead of .semanticui-body try .ui.form
This topic is locked and no more replies can be posted.