Adding CSS to Deform Input Form

Question

I am implement a simple form with Colander and Deform; however, I wish to override the default stylsheet and provide my own. However, I have no idea on how to provide my own styling for the form. Here is the code that I am using:

class Mapping(colander.Schema):
   Firstname = colander.SchemaNode(colander.String(), css_class='deform-widget-with-style')
   Lastname = colander.SchemaNode(colander.String(), css_class='deform-widget-with-style')
   Email = colander.SchemaNode(colander.String(), css_class='deform-widget-with-style')
   date = colander.SchemaNode(colander.Date(), widget = deform.widget.DatePartsWidget(), description = "content date")

class Schema(colander.Schema):
    Age = colander.SchemaNode(colander.Integer(), css_class='deform-widget-with-style')
    Firstname = colander.SchemaNode(colander.String(), css_class='deform-widget-with-style')
    Lastname = colander.SchemaNode(colander.String(), css_class='deform-widget-with-style')
    Email = colander.SchemaNode(colander.String(), css_class='deform-widget-with-style')


form = deform.Form(topList(),buttons=('submit',)).render(controlData)

When I run this, I get a plan, default user form. How can I provide my own templates with styling for the button and input boxes? Any suggestions or answers are greatly appreciated.

Current form:

Desired input field style:

Desired button style:

Does the form render with default bootstrap styles when you omit any css_class properties? — Sascha Gottfried, Oct 06 '17 at 08:19
@SaschaGottfried thank you for your comment. Actually, the form does not render the default bootstrap styles when the css_class properties are omitted. — Ajax1234, Oct 06 '17 at 13:28
If that is the case review your pyramid application on successful integration of deform. There are a couple of pitfalls but as I showed in my answer this is not rocket science and the docs are sufficient. — Sascha Gottfried, Oct 06 '17 at 16:29
Just saw you tagged it with FLASK. All advice on this page is addressing usage in a pyramid application. Are you using FLASK? — Sascha Gottfried, Oct 06 '17 at 16:31
Just found this 6 year old gist on flask/deform setup (https://gist.github.com/aanastasiou/2659299) This is a rather unusual setup. Good luck with it. — Sascha Gottfried, Oct 06 '17 at 16:41
Most probably your problem is related to static assets integration. This has to be made in a flask-y way. But your question lacks all the code samples required for efficient remote debugging. Definitely insufficient for me. — Sascha Gottfried, Oct 06 '17 at 16:43
@SaschaGottfried Thank you so much for all your help! I will move forward with all the links you have provided. Thank you. — Ajax1234, Oct 06 '17 at 16:45

greatgumz · Answer 1 · 2017-10-06T00:18:12.083

1

Your desired input field and submit button look like Bootstrap styles.

I would add bootstrap to your package and then add the appropriate class names, which will add some default styling: In your Paste Deploy configuration file (e.g. development.ini) add deform_bootstrap to the list of pyramid_includes, or add a this line if a pyramid.includes setting does not exist:

[app:main]
...
pyramid.includes = deform_bootstrap

This will put the templates in deform_bootstrap/templates into the deform search path.

Your input should look like

<input class="form-control">

And your button should look like

<button type="button" class="btn btn-primary"></button>

edited Oct 06 '17 at 00:18

answered Oct 05 '17 at 23:26

greatgumz

408
3
17

How do I include bootstrap in my project? – Ajax1234 Oct 05 '17 at 23:52
This advice is rather outdated since these days `deform` (https://github.com/Pylons/deform) ships with built-in Bootstrap 3 styling. – Sascha Gottfried Oct 06 '17 at 08:13

Sascha Gottfried · Answer 2 · 2017-10-06T09:17:08.413

A typical deform example application instructs pyramid to serve static assets, such as JavaScript and CSS files. The application registers deform package assets using config.add_static_view()

def main(global_config, **settings):
    """pserve entry point"""
    session_factory = UnencryptedCookieSessionFactoryConfig('seekrit!')
    config = Configurator(settings=settings, session_factory=session_factory)
    config.include('pyramid_chameleon')
    deform.renderer.configure_zpt_renderer()
    config.add_static_view('static_deform', 'deform:static')
    config.add_route('mini_example', path='/')
    config.add_view(mini_example, route_name="mini_example", renderer="templates/mini.pt")
    return config.make_wsgi_app()

A template rendering a form can refer to the JS/CSS assets provided by deform in head tag. This is basically everything you need to run a deform application with default styling.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Deform Sample Form App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- JavaScript -->
    <script src="static/scripts/jquery-2.0.3.min.js"></script>
    <script src="static/scripts/bootstrap.min.js"></script>
    <tal:loop tal:repeat="js_resource js">
      <script src="${request.static_path(js_resource)}"></script>
    </tal:loop>

    <!-- CSS -->
    <link rel="stylesheet" href="static/css/bootstrap.min.css"
          type="text/css">
    <link rel="stylesheet" href="static/css/form.css" type="text/css">
    <tal:loop tal:repeat="css_resource css">
      <link rel="stylesheet" href="${request.static_path(css_resource)}"
            type="text/css">
    </tal:loop>

  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1>Sample Form</h1>
          <span tal:replace="structure form"/>
        </div>
      </div>
    </div>
  </body>
</html>

A good customization approach would be to override any CSS classes provided by Bootstrap or add your own CSS in your custom application package mypyramidapp. Add CSS and/or JS assets to static or scripts folders - common folders in pyramid applications. You have to register these assets to your pyramid application.

config.add_static_view('static_myapp', 'myapp:static')
config.add_static_view('scripts_myapp', 'myapp:scripts')

Given that you can include your custom CSS files in any template and use common theming approaches to render forms in your custom styles.

I think overriding CSS would be more convinient to start with since you have to pass custom CSS classes to deform widgets using css_class parameter.

I recommend you to refer to these deformdemo example apps - a larger and a mini example to demo deform features and required pyramid application setup.

Adding CSS to Deform Input Form

2 Answers2