将CSS添加到变形输入表单

2024-03-29 14:53:36 发布

您现在位置:Python中文网/ 问答频道 /正文

我用Colander和Deform实现了一个简单的表单;但是,我希望覆盖默认的stylsheet并提供自己的样式表。但是,我不知道如何为表单提供我自己的样式。以下是我正在使用的代码:

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)

当我运行这个程序时,我得到一个计划,默认用户表单。如何为按钮和输入框提供我自己的模板?如有任何建议或答案,我们将不胜感激。在

当前形式:

My user form

所需输入字段样式:

enter image description here

所需按钮样式:

enter image description here


Tags: 表单stringstyleemailschemawith样式firstname
2条回答

所需的输入字段和提交按钮看起来像引导样式。在

我会将bootstrap添加到您的包中,然后添加适当的类名,这将在粘贴部署配置文件(例如。开发.ini)将deform_bootstrap添加到棱锥体的列表中,或者如果金字塔。包括设置不存在:

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

这将把deform_bootstrap/templates中的模板放入deform搜索路径。在

你的input应该是

^{pr2}$

你的button应该是

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

典型的deform example application指示pyramid为静态资产提供服务,例如JavaScript和CSS文件。应用程序使用config.add_static_view()注册deform包资产

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()

呈现表单的模板可以引用head标记中的JS/CSS assets provided by ^{}。这基本上就是运行具有默认样式的变形应用程序所需的一切。在

^{pr2}$

一个好的定制方法是覆盖Bootstrap提供的任何CSS类,或者在自定义应用程序包mypyramidapp中添加自己的CSS。将CSS和/或JS资产添加到staticscripts文件夹-金字塔应用程序中的常见文件夹。你必须注册金字塔资产。在

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

假设您可以在任何模板中包含自定义CSS文件,并使用常见的主题化方法以自定义样式呈现表单。在

我认为重写CSS会更方便,因为您必须使用css_class参数将自定义CSS类传递给deform小部件。在

我建议您参考这些deformdemo示例应用程序-一个larger和一个mini示例来演示deform功能和所需的金字塔应用程序设置。在

相关问题 更多 >