Form block styling - use theme styles

Permalink
I am trying to apply a class to the form input fields but am stuck on how to go about it. I was trying the method of adding a custom template, but couldn't identify where the class gets applied and what file to copy to get this done.

This is what I want to change:

This:
<input id="Question6" class="form-control" type="text" value="" name="Question6">


To this:
<input id="Question6" class="form-input-field" type="text" value="" name="Question6">


Simple enough you would think. Any help would be appreciated. Oh and I am on the newest version on 5.7.

shondy
 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi shondy,

To clarify, you want to change the "form-control" class to "form-input-field"?

Is there a reason why you can't use the "form-control" class as the selector for styling?

To change the class, I think you need to override mini_survey.php.
concrete\blocks\form\mini_survey.php
shondy replied on at Permalink Reply
shondy
I thought about that but didn't want to have to hack away at the built-in styles. I am prepared to do that if the alternative is somehow more complicated.

I did try to use the mini_survey.php as the basis for the template file, but that didn't work, and I don't know enough to set this type of thing up. I added it to the "application/blocks/form folder and made the changes, but it didn't affect anything.
MrKDilkington replied on at Permalink Reply
MrKDilkington
@shondy

You can scope/namespace the CSS to target the "form-control" class, when it is a child of the form block "ccm-block-type-form", and on a theme page "ccm-page" and not the dashboard.

Example:
.ccm-page .ccm-block-type-form .form-control {
    color: red;
}

I don't believe you can use the mini_survey.php as a custom template for the Form block. The mini_survey.php is a class that needs to be imported into view.php and must be overridden.

- copy mini_survey.php
concrete\blocks\form\mini_survey.php
- paste mini_survey.php into application\blocks\form
application\blocks\form\mini_survey.php
- open mini_survey.php and change the namespace
from:
namespace Concrete\Block\Form;
to:
namespace Application\Block\Form;
- copy view.php
concrete\blocks\form\view.php
- paste view.php into application\blocks\form\templates
application\blocks\form\templates\view.php
- change the filename of view.php to custom_form_class.php
application\blocks\form\templates\custom_form_class.php
- open custom_form_class.php and change the namespace of MiniSurvey
from:
use \Concrete\Block\Form\MiniSurvey;
to:
use Application\Block\Form\MiniSurvey;

You should now have a custom template for the form block available called "Custom Form Class" that replaces the "form-control" class with "form-input-field".
shondy replied on at Permalink Reply
shondy
I am going to give this a try. Next thing is to get it into a package...thanks for all your help!