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
Related
I'm trying to color the background of readonly input text in my Django templates. I'm being brief in code because the only thing is not working is the color background.
I'm using the field 'rua' as the example. Maybe the problem is with the link of 'my own css' inside the base.html. This file is inside the same folder of the 'style.css':
My forms.py:
'rua': forms.TextInput(attrs={'readonly': 'readonly', 'id': 'rua', 'class': 'readonly'}),
My template:
{% extends "base.html" %}
{% load static %}
{% block content %}
<script src="https://cdn.rawgit.com/igorescobar/jQuery-Mask-Plugin/master/src/jquery.mask.js"></script>
<!-- customer login start -->
<div class="customer_login">
<div class="container">
<div class="row">
<!--register area start-->
<div class="col-lg-6 col-md-6 mx-auto">
<div class="account_form register">
{% if register_edit == 'register' %}
<p>{{ msg }}</p>
<h2>Não tem conta? Registre-se!</h2>
<form method="post" action="{% url 'account:register' %}">
{% else %}
<h2>Altere os dados da sua conta</h2>
<form method="post" action="{% url 'account:edit' %}">
{% endif %}
{% csrf_token %}
<div>{{ user_form.as_p }}</div>
<div>{{ profile_form.as_p }}</div>
<p><button type="submit">Enviar</button></p>
</form>
</div>
</div>
<!--register area end-->
</div>
</div>
</div>
<!-- customer login end -->
<script src="{% static 'js/cadastro.js' %}" type="text/javascript"></script>
{% endblock %}
My base.html
{% load static %}
<!doctype html>
<html class="no-js" lang="pt-br">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Denise Andrade - Store</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="{% static 'img/favicon.ico' %}">
<!-- CSS
========================= -->
<!-- Plugins CSS -->
<link rel="stylesheet" href="{% static 'css/plugins.css' %}">
<!-- Main Style CSS -->
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<!-- My Own Style CSS -->
<link rel="stylesheet" href="{% static 'css/mystyle.css' %}">
<!-- Os dados dentro do link 'https://code.jquery.com/jquery-1.11.3.min.js'
do JQUERY do CardJS foram substituídos dentro do arquivo abaixo 'js/plugins.js'
O arquivo 'js/plugins.js' é responsável por rodar o 'cart' na lateral
-->
<script src="{% static 'js/plugins.js' %}"></script>
</head>
My mystyle.css
// Backgroud color in disabled fields (rua, cidade, uf, etc) # register page
.readonly{
background-color: #f6f6f6;
}
The funny thing is: if I insert the CSS code above inside the template, the code works perfectly. But trying to call 'mystyle.css' it does not work.
Any help?
Thank you
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
7.6 i want to load a javascript file included from my child view after the javsscripts loaded from base.html.twig
for example, here is my base.html.twig
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Benerite | {% block page_title %}{% endblock %}</title>
{% stylesheets
'assets/bower_components/jquery-ui/themes/cupertino/jquery-ui.min.css'
'assets/gentelella-master/css/bootstrap.min.css'
filter='cssrewrite' output='css/compiled/app.css' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
<!--[if lt IE 9]>
<script src="../assets/js/ie8-responsive-file-warning.js"></script>
<![endif]-->
<!-- 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 class="nav-md">
<div class="container body">
<div class="main_container">
{{ include('::_navigation.html.twig') }}
{{ include('::_topnav.html.twig') }}
<!-- page content -->
<div class="right_col" role="main">{% block body %}{% endblock %}</div>
<!-- /page content -->
<!-- footer content -->
<footer>
<div class="">
<p class="pull-right">
<span class="lead"> <i class="fa fa-database"></i> Benerite</span>
</p>
</div>
</footer>
<!-- /footer content -->
</div>
</div>
<div id="custom_notifications" class="custom-notifications dsp_none">
<ul class="list-unstyled notifications clearfix" data-tabbed_notifications="notif-group"></ul>
<div class="clearfix"></div>
<div id="notif-group" class="tabbed_notifications"></div>
</div>
{% javascripts
'assets/bower_components/jquery/dist/jquery.min.js'
'assets/bower_components/jquery-ui/jquery-ui.min.js'
output='js/compiled/main.js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
</body>
</html>
Here is my child form in which i have included a js file at the end
{% extends '::base.html.twig' %}
{% block body -%}
<h1>Privilege edit</h1>
{{ form(edit_form) }}
<ul class="record_actions">
<li>
<a href="{{ path('privilege') }}">
Back to the list
</a>
</li>
<li>{{ form(delete_form) }}</li>
</ul>
<script src="{{my_custom_js file}}"></script>
{% endblock %}
When I load the page, I want the js file render after the js file included from the base.html.twig
Is there any solution for my issue?? please help me
In base template you have two blocks, base and javascripts.
Create one more, somthing like that childs_javascripts after javascripts block.
And in childe template just use childs_javascripts like you use block body
{% block childs_javascripts %}
<script src="{{my_custom_js file}}"></script>
{% endblock %}
Override the block and call parent block with parent() twig function.
base.html.twig
<html>
<head>
...
{% block stylesheets %}
{% stylesheets ... %}...{% endstylesheets %}
{% endblock %}
...
</head>
<body>
...
{% block body %}{% endblock %}
{% block javascripts %}
{% javascripts ... %}...{% endjavascripts %}
{% endblock %}
</body>
</html>
page.html.twig
{% extends 'base.html.twig' %}
{% block body %}
inner content
{% endblock %}
{% block stylesheets %}
{{ parent() }}
{% stylesheets additional styles %}...{% endstylesheets %}
{% endblock %}
{% block javascripts %}
{{ parent() }}
{% javascripts additional scripts %}...{% endjavascripts %}
{% endblock %}
I installed CalendarBundle by following the tutorial on this link: https://github.com/carlescliment/calendar-bundle , but the problem is that the calendar can't be displayed whenever I try to display it. By the way, this is the script of the html.twig file which should display the calendar:
<html>
<head>
<link rel="stylesheet" href="{{ asset('bundles/bladetestercalendar/css/calendar-header.css') }}">
<link rel="stylesheet" href="{{ asset('bundles/bladetestercalendar/css/calendar.css') }}">
<script type="text/javascript" src="{{ asset('bundles/bladetestercalendar/js/jquery-1.9.1.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('bundles/bladetestercalendar/js/calendar.js') }}"></script>
</head>
<body>
<div class="app">
<header class="main-header">
{% block header %}
{% endblock %}
</header>
<div class="main-body">
{% block body %}
{% endblock %}
</div>
<footer class="main-footer">
{% block footer %}
<p>Opensourced by ®Vetaminic</p>
{% endblock %}
</footer>
</div>
</body>
</html>
So, what shall I do to resolve this problem? I have tried to find a solution but it was in vain.
Thanks in advance.
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>