Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

extending base.html - styles not applied to pdf #137

Closed
davideghz opened this issue Mar 30, 2017 · 4 comments
Closed

extending base.html - styles not applied to pdf #137

davideghz opened this issue Mar 30, 2017 · 4 comments

Comments

@davideghz
Copy link

davideghz commented Mar 30, 2017 •
edited
Loading

Hi, I'm trying the following w/o any luck:

urls.py

urlpatterns = [
  ...
  url(r'^pdf/$', PDFTemplateView.as_view(template_name='my_template.html',
                                             filename='my_pdf.pdf'), name='pdf'),
]

my_template.html

{% extends "base.html" %}
{% block content %}
<h1 class="test-pdf">lorem ipsum</h1>
{% endblock %}

custom.css

.test-pdf {
  color: red;
}

base.html

{% load static %}
<!doctype html>
<html lang="it">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" type="text/css" media="all" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="{% static 'prj_name/custom.css' %}" />
</head>
<body>
<!--[if lt IE 8]>
            <p class="browserupgrade">
            You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.
            </p>
        <![endif]-->

{% block content %} {% endblock %}

<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="{% static 'smart-selects/admin/js/chainedfk.js' %}"></script>
<script src="{% static 'mrp/custom.js' %}"></script>

</body>
</html>

If I browse http://localhost:8000/pdf/?as=html I can see all the stylings, but I lose them in the pdf (here attached as example). What am I doing wrong? If I inline all stylings, it works fine, but I'd prefer to use my custom.css file.. Thanks!

my_pdf (1).pdf
@unrealsolver
Copy link

Check if the path ({% static 'prj_name/custom.css' %}) is correct.

@davideghz
Copy link
Author

davideghz commented Mar 31, 2017 •
edited
Loading

Hi @unrealsolver, thanks for your answer. Actually I'm wrong, and css is taken into consideration (text is formatted accordingly and bootstrap's formatting is applied as well).

I still get a grey background though; any idea about that? when I call ?as=html I get the correct white bg.
my_pdf (6).pdf

@davideghz
Copy link
Author

davideghz commented Apr 1, 2017 •
edited
Loading

I'm extremely confused .. it seems static assets works fine since images are correctly displayed, external and local css included as well.. just, some css properties works, and other don't.

given in custom.css:
.test-pdf { color: red; font-size: 150px; }

and:
<h1 class="test-pdf">BAR</h1>

I get a big, black (???) text on a grey (???) background ...
test.pdf

@davideghz
Copy link
Author

davideghz commented Apr 1, 2017 •
edited
Loading

damnit, got it working with a bunch of !important in my css everywhere a color is concerned... so my question is: why? are there somewhere-hidden-default stylings for the PDFTemplateView class output? I con't find anything like that in the source..

@johnraz johnraz closed this as completed Apr 8, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@johnraz @unrealsolver @davideghz