django admin printer friendly stylesheet - css

Has anyone got or know if a printer friendly css file is available for the Django Admin site?

If you want to add in a print CSS stylesheet for the admin, add this to your admin/base_site.html template:
{% block extrastyle %}
{{block.super}}
<link rel="stylesheet" href="/path/to/your/print.css" type="text/css" media="print" charset="utf-8">
{% endblock %}

If you're looking to output the contents of the admin site, I would suggest exporting it as a CSV file first and then printing from spreadsheet software.
I have used this in the past and recommend it: https://django-import-export.readthedocs.org/en/latest/

Related

How to get the CSS rules that a Django Template would use?

Let's just say I have a basic class-based view like:
from django.views.generic import TemplateView
class HomePage(TemplateView):
template_name = "homepage.html"
and in homepage.html of course we load some CSS, apocryphally:
{% extends "base.html" %}
{% load static %}
{% block CSS %}
<link rel="stylesheet" type="text/css" href="{% static 'css/default.css' %}" />
<link rel="stylesheet" type="text/css" href="some CDN based CSS file' %}" />
{% endblock %}
Now I'd like the view to read/load the CSS that will be sent to the client.
If we could just find the source files, we could parse them with cssutils.
And of course it's technically possible to find and parse the template file too, but Django already implements that and has a template loader. Is there any way short of rendering the template into a string, and trying to parse the HTML to extract CSS rules? And even if that's the path we need to pursue, is there a package that will given rendered HTML, and return the CSS rules?
An interesting problem that arises from the need, server-side, to extract some CSS information, notably colours.

Twig js, if url contains ‘batch’

I’m new to a project using Twig js. I’ve been playing around with a template trying to get it to work but with no luck.
Is there anyway of writing.
If url contains ‘batch-‘ then load these 2 CSS files, else load this 1 CSS file?
Any help is greatly appreciated,
Thanks in advance
In order to do that you'll have to pass the url that you want to check to the template and then you'll be able to add the following:
{% if 'batch-' in url %}
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css">
{% else %}
<link rel="stylesheet" href="style1.css">
{% endif %}

How to serve different CSS file when user change language in Django i18n translation

I am using Django i18n translation system and there are two languages:
LANGUAGES = (
('fa', _('Persian')),
('en', _('English')),
)
Persian is Right-To-Left and I want to serve another CSS file when user change language to persian.
Or maybe there is a better way to change LTR to RTL when user change the language?
I am using nginx with wsgi on a Ubuntu vps.
One possible way:
I assume you have 2 css files for example static/css/fa.css and static/css/en.css
In template, when you link your css you can do it like this:
<link type="text/css" href="{% trans 'static/css/en.css' %}">
In your Persian translation file you put then something like this:
msgid "static/css/en.css"
msgstr "static/css/fa.css"
Alternatively, if the only thing you want from css is to change LTR to RTL you could do in your template:
{%load i18n%}
{%get_current_language as LANGUAGE_CODE%}
{%get_language_info for LANGUAGE_CODE as lang%}
....
{% if lang.bidi %}
<!-- Some HTML code for RTL -->
{% else %}
<!-- Some HTML code for LTR -->
{% endif %}
I assume you have following file and directory structure:
/static/fa/css/default.css
/static/en/css/default.css
And then I would go with:
{% get_static_prefix %}{% get_current_language %}"/css/default.css"

Flask-Bootstrap custom theme

I made a flask app with flask-bootstrap. I am using virtualenv as well. Where would I find the stylesheet that I edit to customize the colors? Or is there another way to have custom colors?
Add you custom colors to a css file, e.g. mystyle.css, put it under the static folder, then add your custom css file to your template.
{% block styles %}
{{super()}}
<link rel="stylesheet" href="{{url_for('.static', filename='mystyle.css')}}">
{% endblock %}
Check the documentation here: Adding a custom CSS file:

How to include CSS file in Symfony 2 and Twig?

I'm playing around with Symfony2, and I have problems including CSS and JS files in Twig template.
I have a bundle named Webs/HomeBundle inside which I have HomeController with indexAction that renders a twig template file:
public function indexAction()
{
return $this->render("WebsHomeBundle:Home:index.html.twig");
}
So this is easy. Now what I want to do, is to include some CSS and JS files inside this Twig template. Template looks like this:
<!DOCTYPE html>
<html>
<head>
{% block stylesheets %}
<link href="{{ asset('css/main.css') }}" type="text/css" rel="stylesheet" />
{% endblock %}
</head>
<body>
</body>
</html>
The file I would like to include, main.css file is located in:
Webs/HomeController/Resources/public/css/main.css
So my question is basically, how the hell do I include simple CSS file inside Twig template?
I'm using Twig asset() function and it just doesn't hit the right CSS path. Also, I run this command in console:
app/console assets:install web
This created a new folder
/web/bundles/webshome/...
this is just linking to the
src/Webs/HomeController/Resources/public/
right?
Questions
Where do you place your asset files, JS, CSS, and images? Is it OK to put them in Bundle/Resources/public folder? Is that the right location for them?
How do you include these asset files in your Twig template using asset function? If they are in public folder, how can I include them?
Should I configure something else?
You are doing everything right, except passing your bundle path to asset() function.
According to documentation - in your example this should look like below:
{{ asset('bundles/webshome/css/main.css') }}
Tip: you also can call assets:install with --symlink key, so it will create symlinks in web folder. This is extremely useful when you often apply js or css changes (in this way your changes, applied to src/YouBundle/Resources/public will be immediately reflected in web folder without need to call assets:install again):
app/console assets:install web --symlink
Also, if you wish to add some assets in your child template, you could call parent() method for the Twig block. In your case it would be like this:
{% block stylesheets %}
{{ parent() }}
<link href="{{ asset('bundles/webshome/css/main.css') }}" rel="stylesheet">
{% endblock %}
And you can use %stylesheets% (assetic feature) tag:
{% stylesheets
"#MainBundle/Resources/public/colorbox/colorbox.css"
"%kerner.root_dir%/Resources/css/main.css"
%}
<link type="text/css" rel="stylesheet" media="all" href="{{ asset_url }}" />
{% endstylesheets %}
You can write path to css as parameter (%parameter_name%).
More about this variant: http://symfony.com/doc/current/cookbook/assetic/asset_management.html
The other answers are valid, but the Official Symfony Best Practices guide suggests using the web/ folder to store all assets, instead of different bundles.
Scattering your web assets across tens of different bundles makes it
more difficult to manage them. Your designers' lives will be much
easier if all the application assets are in one location.
Templates also benefit from centralizing your assets, because the
links are much more concise[...]
I'd add to this by suggesting that you only put micro-assets within micro-bundles, such as a few lines of styles only required for a button in a button bundle, for example.
In case you are using Silex add the Symfony Asset as a dependency:
composer require symfony/asset
Then you may register Asset Service Provider:
$app->register(new Silex\Provider\AssetServiceProvider(), array(
'assets.version' => 'v1',
'assets.version_format' => '%s?version=%s',
'assets.named_packages' => array(
'css' => array(
'version' => 'css2',
'base_path' => __DIR__.'/../public_html/resources/css'
),
'images' => array(
'base_urls' => array(
'https://img.example.com'
)
),
),
));
Then in your Twig template file in head section:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
{% block head %}
<link rel="stylesheet" href="{{ asset('style.css') }}" />
{% endblock %}
</head>
<body>
</body>
</html>

Resources