I have an issue with pdf creation on Snappy pdf Bundle: it seems not to load the css file I try to import.
I even tried by using an absolute url but it doesn't work either.
this is my code:
{% block body %}
{# Layout for PDF files #}
<p>Cliente: {{ cliente.nome }}</p>
{% endblock %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"> </script>
<link rel="stylesheet" type="text/css" href="{{ asset('main.css') }}">
<link rel="stylesheet" href="{{ asset('base.min.css') }}"/>
<link rel="stylesheet" href="{{ asset('fancy.min.css') }}"/>
<link rel="stylesheet" href="{{ asset('./main1.css') }}"/>
Related
I have a page where css isn't applied. i have a folder inside templates called animal and it contains 2 files adopt.html.twig and index.html.twig and the base.html.twig. Why css isn't applied to adopt.html.twig?.
My code is:
adopt.html.twig
{% extends 'base.html.twig' %}
{% block title %}Adopt an animal!{% endblock %}
{% block body %}
<ul>
<li class="articleItem">
<img src="/dog.png" alt="article icon">
<h4>Thanks ! </h4>
<p>{{ animal.name }} is your new Compagnon </p>
<button class="button">Go back</button>
<button class="button">See adoptions</button>
</li>
</ul>
{% endblock %}
base.html.twig
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="css/styles.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</head>
<body>
{% block head %}
{% include 'partials/header.html.twig' %}
{% endblock %}
{% block body %}{% endblock %}
{% block footer %}
{% include 'partials/footer.html.twig' %}
{% endblock %}
</body>
</html>
</html>
Your css/style.css is linked relative to current URL. So it works on mainpage but not for any subpage URL (In Symfony this means any controller with #Route other than /).
So if You open https://your.domain.tld/, browser would read style.css from https://your.domain.tld/css/style.css. But if You open https://your.domain.tld/adopt/, browser try to read style.css from https://your.domain.tld/adopt/css/style.css.
In Symfony this could be fixed by using
<link href="{{ asset('css/styles.css') }}" rel="stylesheet" />
instead of:
<link href="css/styles.css" rel="stylesheet">
Please, read Creating and Using Templates: Linking to Assets
I'm trying to override FOSUser Template and add some html items to my pages, I got this error :
Unexpected token "end of template" of value "" ("end of statement block" expected).
here is the base.html.twig page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other
head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
{% block stylesheets %}{% endblock %}
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
{% stylesheets
"css/myStyle.css"
%}
<link rel="stylesheets" href="{{ asset_url }}">
<title>{% block title %}Hello!{% endblock %}</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">
</script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
</script>
<![endif]--> </head>
<body>
{% block topnav %}
{% include '::topnav.html.twig' %}
{% endblock %}
<div class="container">
{% block content %}{% endblock %} </div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
{% block javascripts %}{% endblock %}
this is the layout.html.twig page :
{% extends '::base.html.twig' %}
{% block content %}
<div>
{% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
{{ 'layout.logged_in_as'|trans({'%username%':
app.user.username}, 'FOSUserBundle') }} |
<a href="{{ path('fos_user_security_logout') }}">
{{ 'layout.logout'|trans({}, 'FOSUserBundle') }}
</a>
{% else %}
<a href="{{ path('fos_user_security_login') }}">{{
'layout.login'|trans({}, 'FOSUserBundle') }}</a>
{% endif %}
</div>
{% if app.request.hasPreviousSession %}
{% for type, messages in app.session.flashbag.all() %}
{% for message in messages %}
<div class="flash-{{ type }}">
{{ message }}
</div>
{% endfor %}
{% endfor %}
{% endif %}
<div>
{% block fos_user_content %}
{% endblock fos_user_content %}
</div>
{% endblock %}
Your style sheet must be declared as follow
{% stylesheets
'path/to/style.css' %}
<link rel="stylesheet" href="{{ asset_url }}"/>
{% endstylesheets %}
your endstylesheets is missing
Have a look there
https://symfony.com/doc/current/assetic/asset_management.html#including-css-stylesheets
Refer to official documentation :
How to override templates : http://symfony.com/doc/master/bundles/FOSUserBundle/overriding_templates.html
How to override FormType : http://symfony.com/doc/master/bundles/FOSUserBundle/overriding_forms.html
I am in the process of converting a Python3/Flask back-end (with many jinja2 templates) to a PHP5.6/Twig1 backend. However, while many of the templates transfer nicely to the Twig (since the syntax is very similar), I'm having difficulty figuring out how to replace the url_for function from Jinja.
I'm confused as to how this is solved, since it would seem that the url would be dependent on the location of the template (and since I have my templates organized into different directories, the amount of ".."s I use would have to vary based on where the template is (or it could depend on the .php file that's rendering the template, and that has the same problems...)
Here's an example template:
<!DOCTYPE html>
<html lang="en">
<!-- begin -->
<head>
<title>{% block title %}{% endblock %} | Business Name</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="{{ url_for('static', filename="img/favicon.ico") }}">
<link rel="stylesheet" href="{{ url_for('static', filename="css/bootstrap.min.css") }}">
<link rel="stylesheet" href="{{ url_for('static', filename="css/bootstrap-theme.min.css") }}">
<link rel="stylesheet" href="{{ url_for('static', filename="css/font-awesome.min.css") }}">
<link rel="stylesheet" href="{{ url_for('static', filename="css/base.css") }}">
{% block css %}{% endblock %}
</head>
<body>
<header>
{% include "templates/header.html" %}
</header>
<main>
{% block main %}{% endblock %}
</main>
<footer class="container-fluid" style="position:fixed">
{% include "templates/footer.html" %}
</footer>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
{% block js %}
{% endblock %}
</body>
<!-- end -->
</html>
You would like to use the Bootstrap in Symfony2.
However, in the rental server that I owe, less command can not be used.
So from http://getbootstrap.com/, was placed css you have downloaded, font, etc..
However, glyphicon does not appear.
Will're something wrong way of setting?
MyBudle
+ Resources
+ Public
+ Css
+ Fonts
+ Js
page.html.twig
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
{% block stylesheets %}
{% stylesheets '#LouteBundle/Resources/public/css/*' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
{% block javascripts %}
{% javascripts '#LouteBundle/Resources/public/js/*' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
{% stylesheets
output='fonts/glyphicons-halflings-regular.eot'
'#LouteBundle/Resources/public/fonts/glyphicons-halflings-regular.eot'
%}
{% endstylesheets %}
{% stylesheets
output='fonts/glyphicons-halflings-regular.svg'
'#LouteBundle/Resources/public/fonts/glyphicons-halflings-regular.svg'
%}
{% endstylesheets %}
{% stylesheets
output='fonts/glyphicons-halflings-regular.ttf'
'#LouteBundle/Resources/public/fonts/glyphicons-halflings-regular.ttf'
%}
{% endstylesheets %}
{% stylesheets
output='fonts/glyphicons-halflings-regular.woff'
'#LouteBundle/Resources/public/fonts/glyphicons-halflings-regular.woff'
%}
{% endstylesheets %}
</head>
use glyphicon
<body>
<nav class="navbar navbar-inverse" role="navigation" id="top">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">
<span class="glyphicon glyphicon-home"></span>
</a>
I'm using Bootstrap with Django, as well as css from the admin (for a date widget). My problem is that on the pages where I have the date widget, the admin css overrides the bootstrap css so the whole page looks different. How can I fix that?
base.html
<head>
{% block extra_head %}
{% endblock %}
<link href="{{ STATIC_URL }}bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="{{ STATIC_URL }}bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
</head>
template with date widget
{% extends "base.html" %}
{% load adminmedia %}
{% block extra_head %}
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}admin/css/base.css"/>
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}admin/css/widgets.css"/>
<script type="text/javascript" src="/admin/jsi18n/"></script>
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/core.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/admin/RelatedObjectLookups.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/jquery.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/jquery.init.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/actions.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/calendar.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/admin/DateTimeShortcuts.js"></script>
<script type="text/javascript">window.__admin_media_prefix__ = "{% filter escapejs %}{% admin_media_prefix %}{% endfilter %}";</script>
{% endblock %}
Put bootstrap css inside {% block extra_head %}{% endblock %}. Don't worry as long as you didn't call {{block.super}}, bootstrap will not be activated.
<head>
{% block extra_head %}
<link href="{{ STATIC_URL }}bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="{{ STATIC_URL }}bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
{% endblock %}
</head>
To activate the bootsrap in other template, just simply put {{block.super}}:
{% extends "base.html" %}
{% block extra_head %}
{{block.super}}
//other css here
{% endblock %}
UPDATE:
To override the admin existing css. In your bootstrap css, you must put !important so that it will force your template to follow bootstrap design
Sample:
<p>This red text <strong style="color: red;">should be blue</strong></p>
<style>
strong { color: blue !important; }
</style>