How to style the form block in 5.7?

Permalink
Hi,
The form block is driving me nuts. I have overridden the block with my own template trying to get the text input fields to make some type of sense when it comes to their sizes. By default, the ".field-text" size spans 100% of a container and the the email field is tiny. I'd like to style how these appear. What's the easiest way to do this?
Thanks

binomonkey
 
MrKDilkington replied on at Permalink Reply 2 Attachments
MrKDilkington
Hi binomonkey,

This CSS will make the e-mail input and textarea look like the text input.
textarea,
input[type="email"] {
    width: 100%;
    padding: 10px;
}

Also, your theme is set up to handle custom layout presets. The following code will add a "Form" preset that you can use for a custom layout. What it will do is make a custom layout that uses a smaller percentage of the page width (currently it uses 100%). Please see attached screenshot to see what I am describing.
array(
    'handle' => 'form',
    'name' => 'Form',
    'container' => '<div class="row"></div>',
    'columns' => array(
        '<div class="col-sm-8 col-sm-push-2 col-lg-6 col-lg-push-3"></div>'                    
    )
)

For more information on custom layout presets.
"Adding Complex Custom Layout Presets in Your Theme"
http://www.concrete5.org/documentation/developers/5.7/designing-for...
binomonkey replied on at Permalink Reply
binomonkey
<code>
public function getThemeAreaLayoutPresets()
{
$presets = array(
array(
'handle' => 'left_sidebar',
'name' => 'Left Sidebar',
'container' => '<div class="row"></div>',
'columns' => array(
'<div class="col-sm-4 sidebar sb-header"></div>',
'<div class="col-sm-8"></div>'
),
),
array(
'handle' => 'right_sidebar',
'name' => 'Right Sidebar',
'container' => '<div class="row"></div>',
'columns' => array(
'<div class="col-sm-8"></div>',
'<div class="col-sm-4 sidebar sb-header"></div>'
)
),
array(
'handle' => 'intro_desc_breadcrumb',
'name' => 'Intro desc. & breadcrumb',
'container' => '<div class="row"></div>',
'columns' => array(
'<div class="col-sm-4"></div>',
'<div class="col-sm-4"></div>',
'<div class="col-sm-4"></div>'
)
),
array(
'handle' => 'form',
'name' => 'Form',
'container' => '<div class="row"></div>',
'columns' => array(
'<div class="col-sm-8 col-sm-push-2 col-lg-6 col-lg-push-3"></div>'
)
)

);
return $presets;
};
</code>
binomonkey replied on at Permalink Reply
binomonkey
Thanks MrKDilkington,

I posted my code in the previous reply.
My theme is set to use the provider interface:
use Concrete\Core\Area\Layout\Preset\Provider\ThemeProviderInterface;

However, none of the presets show in the layout dropdown.

Oh and please help a novice trying to put a code snippet in a post reply. The instructions below say to "(Enclose code samples in
[/code].)" So I tried <code>"my code"</code>, [code]"my code"
and it says invalid token.

Cheers
binomonkey replied on at Permalink Reply
binomonkey
got it! saw your post helping another user having the same problem.

I had to enable this class:
// Ready For 5.7.5
class PageTheme extends \Concrete\Core\Page\Theme\Theme implements ThemeProviderInterface {