Добавление CSS для деформации формы ввода

Я реализую простую форму с помощью Colander и Deform; однако я хочу переопределить таблицу стилей по умолчанию и предоставить свою собственную. Тем не менее, я понятия не имею, как обеспечить собственный стиль для формы. Вот код, который я использую:

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)

Когда я запускаю это, я получаю план, пользовательскую форму по умолчанию. Как я могу предоставить свои собственные шаблоны со стилем для кнопки и полей ввода? Любые предложения или ответы с благодарностью.

Текущая форма:

Моя форма пользователя

Желаемый стиль поля ввода:

Желаемый стиль кнопки:

Источник

2 ответа

Типичный пример приложения деформации инструктирует пирамиду обслужить статические активы, такие как файлы JavaScript и CSS. Регистрирует приложение deform пакетные активы с помощью 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()

Шаблон, отображающий форму, может ссылаться на ресурсы JS/CSS, предоставленныеdeform в head тег. Это в основном все, что вам нужно для запуска деформированного приложения со стилем по умолчанию.

<!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>

Хорошим подходом к настройке будет переопределение любых классов CSS, предоставляемых Bootstrap, или добавление своего собственного CSS в свой пакет приложения. mypyramidapp, Добавить CSS и / или JS-активы в static или же scripts папки - общие папки в приложениях пирамиды. Вы должны зарегистрировать эти активы в своем приложении пирамиды.

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

Учитывая, что вы можете включить свои собственные CSS-файлы в любой шаблон и использовать общие подходы к тематике для визуализации форм в ваших пользовательских стилях

Я думаю, что переопределение CSS было бы более удобным для начала, так как вы должны передать пользовательские классы CSS, чтобы деформировать виджеты, используя css_class параметр.

Я рекомендую вам обратиться к этим примерным приложениям deformdemo - большему и мини- примеру для демонстрации функций деформации и требуемой настройки приложения пирамиды.

Источник

Желаемое поле ввода и кнопка отправки выглядят как стили Bootstrap.

Я бы добавил bootstrap в ваш пакет, а затем добавил соответствующие имена классов, что добавит некоторый стиль по умолчанию: в вашем конфигурационном файле Paste Deploy (например, development.ini) добавьте deform_bootstrap в список pyramid_include, или добавьте эту строку, если пирамида Параметр.include не существует:

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

Это поместит шаблоны в deform_bootstrap/templates в путь поиска deform.

Ваш input должен выглядеть так

<input class="form-control">

И ваш button должен выглядеть так

<button type="button" class="btn btn-primary"></button>
Источник
Другие вопросы по тегам