Form Blocks - Change CSS in 5.7
Permalink
Hi, I looked around but didn't seen anything relevant to 5.7.
I am editing the Elemental theme (copied it into Applications, etc) and am working on a form block on the About page. I want to change the style of the submit button. I normally change that in the html of a content block, but I can't seem to access that in a form block. Where would I find this class to change it manually in the code? It specifically uses Bootstraps btn btn-primary classes, but I don't see that in application > themes > themeName > build > bootstrap-3.2.0 > buttons.less. Changing the code here (shown below) doesn't seem to work. Any suggestions on the best practice here? Thanks!
I am editing the Elemental theme (copied it into Applications, etc) and am working on a form block on the About page. I want to change the style of the submit button. I normally change that in the html of a content block, but I can't seem to access that in a form block. Where would I find this class to change it manually in the code? It specifically uses Bootstraps btn btn-primary classes, but I don't see that in application > themes > themeName > build > bootstrap-3.2.0 > buttons.less. Changing the code here (shown below) doesn't seem to work. Any suggestions on the best practice here? Thanks!
.btn-primary { .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border); }
.btn-primary { .button-variant( #a691b8; @btn-primary-bg; @btn-primary-border); }
MrKDilkington is absolutely right that would be the best way to go
One thing to keep in mind though is after modifying a less file, you probably won't see anything until you empty your cache (if your cache is set on). See, the less files are processed and the final css file is saved in the cache and that's what's loaded so you want to make sure your updated less file is processed as well.
Also - shameless plug - if you are stuck dealing with buttons you might want to check out my Buttons Pro add-on specifically designed to save you time on things as soul-sucking as designing buttons :)
You can see it here:http://www.concrete5.org/marketplace/addons/buttons-pro/...
One thing to keep in mind though is after modifying a less file, you probably won't see anything until you empty your cache (if your cache is set on). See, the less files are processed and the final css file is saved in the cache and that's what's loaded so you want to make sure your updated less file is processed as well.
Also - shameless plug - if you are stuck dealing with buttons you might want to check out my Buttons Pro add-on specifically designed to save you time on things as soul-sucking as designing buttons :)
You can see it here:http://www.concrete5.org/marketplace/addons/buttons-pro/...
Thanks guy, I'll give the custom template a go. I appreciate the help and the steer in the right direction. Also, I absolutely don't mind the shameless plug. I'd rather learn how to do things myself, though. Call me a control freak. Cheers!
Totally understand control freakiness. I have a bad case of it myself.
Enjoy your odyssey :)
Enjoy your odyssey :)
A Form block custom template will allow you to customize the classes and formatting.
http://documentation.concrete5.org/developers/working-with-blocks/w...
- make a copy of the Form block's view.php
concrete\blocks\form\view.php
- in your application\blocks folder, create a folder called "form"
- in the new form folder, create a folder called "templates"
- in the new templates folder, paste the copy of view.php
- rename view.php to custom_form.php
application\blocks\form\templates\custom_form.php
Now there will be a new custom template for the Form block.
- in edit mode, click on the Form block and choose Design & Custom Template from the popup menu
- a new menu bar will appear, choose the gear icon "Custom CSS Classes, Block Name, Custom Templates and Reset Styles" on the right side
- from the Custom Template drop-down menu, choose Custom Form.