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:
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>
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.
Related
I'm looking for a way to change link tags with hreflang depends on region or language used on a site. For example:
I have one blog site written in english and on this site I would like to have:
<link rel="alternate" hreflang="en" href="https://example.com" />
<link rel="alternate" hreflang="de" href="https://example.com/de" />
And for German version:
<link rel="alternate" hreflang="de" href="https://example.com/de" />
<link rel="alternate" hreflang="en" href="https://example.com" />
I could do that with statements like this:
{% if request.build_absolute_uri == "https://example.com" %}
{% if request.build_absolute_uri == "https://example.com/de" %}
but what if I will have more then these two paths and my if statement will grow. Is there a better solution?
This answer is inspired by the django cms language_chooser template tag.
You write your own context processor like this:
from cms.utils.i18n import (
get_language_list
get_language_object,
get_public_languages
)
from django.contrib.sites.models import Site
from django.utils.translation import get_language
def language_list_processor(request):
"""
A context processor that adds the available languages to the global context.
"""
context = {}
site = Site.objects.get_current()
if request.user.is_staff:
languages = get_language_list(site_id=site.pk)
else:
languages = get_public_languages(site_id=site.pk)
language_info = []
for language in languages:
obj = get_language_object(language, site_id=site.pk)
languages_info.append({"code": obj['code'], "name": obj['name']})
context['languages'] = languages_info
context['current_language'] = get_language()
return context
With this context processor in place, you'll be able to access those context variables in your template and loop over them to create your link tags with the respective hreflang.
I´m new in python and django.
My code is below and the problem is that the images do not appear.
I include in the teste.html this tag but it didn´t work src="./assets/images/3ed274bc061c771ef0b153111a6fe932_logocartorio.png"
My path is:
BCcartorio
bccartorio
settings
urls
iddigital
views
urls
templates
iddigital
teste.html
assets
css
images
js
My iddigital.views.py:
from django.shortcuts import render, HttpResponse
def home(request):
return (render(request, "iddigital/teste.html"))
My teste.html:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>teste</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<h1>Welcome</h1>
<button class="btn btn-danger" type="button" name="button">login</button>
<div class="bd-vertical-align-wrapper">
<img class="bd-imagelink-1 bd-own-margins bd-imagestyles " src="./assets/images/3ed274bc061c771ef0b153111a6fe932_logocartorio.png">
</div>
</body>
</html>
It is not a good practice to hard-code the URL of an image as this can cause many unexpected problems(e.g. paths mixup). In order to avoid this Django provides a hassle-free way to manage and serve your static files easily.
First you have to include the django.contrib.staticfiles app in your INSTALLED_APPS and then define in your settings file the STATIC_URL which will serve as the base path that'll be used by Django to find your static files in a template. It is a good practice to have a separate static folder that will contain the assets folder which -in turn- will contain your css, js, images etc sub-folders.
So I'd take the assets folder from that path and put move it in a static folder that would be in the same level as the iddigital and templates ones. In that case your STATIC_URL variable would be equal to '/static/.
Now in the teste.html template you can load your static folder by adding {% load static %} at the top of your file. Your images can now be called as simple as this: <img src="{% static "assets/images/logocartorio.png" %}" class="bd-imagelink-1 bd-own-margins bd-imagestyles"/>
More info on the above can be found at the excellent Djangodocumentation.
I have created documentation for my Django app using apidoc library.
It creates docs using angular. App is running on Heroku.
Docs are working nicely when I open index.html file, but I cannot open them via http://localhost:5000/docs.
Firstly I got this error:
"Variables and attributes may not begin with underscores: '__' "
, which I was able to bypass by putting {% verbatim %} and {% endverbatim %} into the index.html file. (Which I'm not very happy with in the first place and would like to do it some other way).
Then the page is stuck on the loading screen, but when I open it in Chrome I have the following error:
"Uncaught SyntaxError: Unexpected token <" in polyfill.js:1 and
require.min.js:1
And also 3 warnings:
"Resource interpreted as Stylesheet but transferred with MIME type
text/html"
in vendor/bootstrap.min.cs, vendor/prettify.css and css/style.css
We are using apidocs also in other project with Node where it works perfectly, so I think it's an issue with Django. Since the documentation is generated automatically, I would prefer to introduce changes into the app, not docs.
I tried it on Chrome and Safari.
My questions
1. What can I do to make it work?
2. How can I make Django compatible with Angular without putting {%verbatim%} tags into index.html?
Here is my controller:
from django.shortcuts import render
def show_docs(request):
return render(request, 'index.html')
and url_pattern:
from django.conf.urls import include, url
from django.contrib import admin
admin.autodiscover()
import my_app.controller
from django.views.decorators.csrf import csrf_exempt
urlpatterns = [
url(r'^docs/', my_app.controller.show_docs),
]
index.html head:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Loading...</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="vendor/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="vendor/prettify.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen, print">
<link href="img/favicon.ico" rel="icon" type="image/x-icon">
<link href="css/apidoccustom.css" rel="stylesheet" media="screen, print">
<script src="vendor/polyfill.js"></script>
</head>
edit:
Thanks to answer from hubert, I was able to find the source of the problem.
It turns out, that Django doesn't work that good with RequireJS, which is used by api docs.
I had to add the following changes to the generated code to make it work:
Points 1-4 are for index.html, point 5, 6 are for main.js:
Add this line above tag:
{% load static %}
Add "{% static" + " %}" tags to all tags so it looks like this:
<link href="{% static "vendor/bootstrap.min.css" %}" rel="stylesheet" media="screen">
Add the same static tags to tags with polyfill.js and require.min.js:
<script src="{% static "vendor/polyfill.js" %}"></script>
<script data-main="{% static "main.js" %}" src="{% static "vendor/require.min.js" %}"></script>
Add {% verbatim %} at the beginning of and {% endverbatim %} at the end of , BUT BEFORE with require.min.js!
In main.js add following lines to paths at the beginning of the file:
apiProject: './api_project.js',
apiData: './api_data.js',
Change lines:
'./api_project.js',
'./api_data.js',
to:
'api_project',
'api_data',
From this two errors:
"Uncaught SyntaxError: Unexpected token <" in polyfill.js:1 and require.min.js:1
"Resource interpreted as Stylesheet but transferred with MIME type text/html"
I would assume that there is something wrong with loading your static files. Probably you have 404 or 500 on them and django loads then default route.
Check if you have correct routing for static files.
I'm working on an email template, therefor I would like to embed a css file
<head>
<style>{{ embed 'css/TEST.css' content here }}</style>
</head>
instead of linking it
<head>
<link href="{% static 'css/TEST.css' %}" rel="stylesheet" type="text/css">
</head>
Any ideas?
I guess you could use include
<style>{% include "/static/css/style.css" %}</style>
https://docs.djangoproject.com/en/1.9/ref/templates/builtins/#include
But it might be better to load the contents of the css file in your view, and put it in the context of your view to send it to the template
You can use django-compressor package. It will add {% compress %} template tag that can join together bunch of JS or CSS files (or inlined code) and put it into template as new, big file or inlined code. For example to inline one CSS file, you can use:
{% compress css inline %}
<link href="{% static 'css/TEST.css' %}" rel="stylesheet" type="text/css">
{% endcompress %}
You can add more CSS files into one compress tag, they will be concatenated together and wrapped into one <style>tag.
Check usage examples for more details.
On solution would be the use of include:
<head>
<style>{% include "../static/css/TEST.css" %}</style>
</head>
But it is kind of messy!
You have to place a copy or link to your css-file in your templates directory. Or you use a hardcoded link as above, which may break in production.
I wanted to use a third-party html/css example in Django, but it doesn't work.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" type="text/css" href="/static/css/style.css" />
</head>
<body>
EXAMPLE CODE
</body>
</html>
I have used just this example, and commented all other code. Django recognizes the css file, I checked it. However, I don't get a sticky footer and header. They transform in a plain text, just like the main body.
I put this example in the codeacademy engine and it works there as well.
What hidden stones of Django I might be missing?
there is no hidden stones in django. there is no such option as recognize css file for django. Django has nothing to do with css files.
I recommend u to open network panel in browser developer tools console and check, was the css file downloaded successfully by browser or not.
in some case if u use django development server there is manual how to serve static files in development mode
https://docs.djangoproject.com/en/1.2/howto/static-files/
another cases are, misspelled css file name or misspelled/incorrect path to css file
https://docs.djangoproject.com/en/dev/howto/static-files/