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:
To this:
Simple enough you would think. Any help would be appreciated. Oh and I am on the newest version on 5.7.
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.
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.
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.
@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:
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".
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".
I am going to give this a try. Next thing is to get it into a package...thanks for all your help!
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