CSS question

Hello @likocorp

Please, indicate the URL to the web page where the form is inserted, because in the web page not only the styles defined in the plugin are applied to the form’s tags, the styles defined in the theme active are applied too.

Best regards.

thank you for answer.
the main ulr is https://visas2uk.ru
but I still did not opened my calculation form there becasue firstly want to make it visibly bueatiful and then to integrate it into my design.

• This reply was modified 6 years, 1 month ago by likocorp.

Hello @likocorp

I need to check the styles that are applied to the form. You can insert the form in a page protected by password and indicate the URL and password for checking it.

Best regards.

Hello
Sorry for keeping silence for so long but was finishing my form.
Here is the link: https://visas2uk.ru/tipi-viz-v-velikobritaniyu/srochnaya-viza-v-velikobritaniyu/
In the right sidebar there is your calculation form and there is much space between the header and the form itself as you can see on the screen here: https://ibb.co/4mJqDQY
Could you please assist me to decrease it?
And one more CSS question apeared: how to make the final result text more visible – make bold or bigger or other color?
Thank you!

Hello @likocorp

First question, decrease the space at top:

– Enter the following style definition into the “Customize Form Design” attribute in the “Form Settings” tab (https://cff.dwbooster.com/images/documentation/form-settings-tab.png):

#fbuilder .fform{display: none !important;}

Second question, apply some styles to the calculated field.

– Enter a style definition similar to the following one, into the same “Customize Form Design” attribute:

#fbuilder .cff-calculated-field input{
	font-weight:bold !important;
	font-size:1.3em !important;
	color: red !important;
}

Of course, using the css rules and values you want.

Best regards.

Great thanks for your rapid support! Works fine now.
The final question is how to decrease the height of dropdown element in my form?
I write the following css code but seams with wrong element because it does not work.

.cff-calculated-field cff-dropdown-field{
height:30px !important;
}

Thank you!

Hello @likocorp

There are some issues in your style definition.

First, the cff-dropdown-field is a class name, so, so it requires a dot sign in front: .cff-dropdown-field

Second, the element that encapsulate the form has assigned the id fbuilder, so, the correct would be: #fbuilder .cff-dropdown-field

Third, the classes are assigned to the fields containers, and a field is composed by different elements: the label tag (with the label’s text), the entry tag (in the case of a DropDown control a select tag), and a span tag with the instructions for users.

So, if you want to apply the style to the select tag in the DropDown control the correct style definition would be:

#fbuilder .cff-dropdown-field select{
height:30px !important;
}

Note that the select component is not using the dot or sharp signs in front, it is because it is a tag’s name.

Best regards.

Clear, Thank you!
#fbuilder is excess, it works without it properly.
Apreciate your proffesional assistance.
When I decrease the height of the select element the default text desapears. Could you advice if it is possible to decrease the height margin for it so the text even in less hieght be still visible?

• This reply was modified 6 years ago by likocorp.

Hello @likocorp

If you are reducing the tag’s height, you should adjust the padding too, Enter as part of the style definition the css rule:

padding: 0 !important;

Please, if you need additional help customizing your form, I can offer you a custom coding service from my private website:

https://cff.dwbooster.com/customization

Best regards.

It seams now everything is solved! Great thanks to your work!