Adding CSS to Deform Input Form

Question

Adding CSS to Deform Input Form

849 views Asked by Ajax1234 At 05 October 2017 at 22:52

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:

Original Q&A

There are 2 answers

**greatgumz** · Answer 1 · 2017-10-05T23:26:38+00:00

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>

**Sascha Gottfried** · Answer 2 · 2017-10-06T09:10:55+00:00

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.

TechQA.

Adding CSS to Deform Input Form

There are 2 answers

Related Questions in PYTHON

Related Questions in FLASK

Related Questions in DEFORM

Related Questions in COLANDER

Popular Questions

Popular Tags

Trending Questions