I am using HTML Twig template for render page in symfony framework, i want to include Bootswatch theme in my base.html.twig file, and then extends this file into test.html.twig file.
I included css CDN link and Javascript CDN links from getbootstrap.com, but it did not working correctly.
please help me to find my mistake.
Here is my code.
base.html.twig
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
<link rel="stylesheet" href="https://bootswatch.com/solar/" > <!-- bootswatch theme CSS link -->
{% block stylesheets %}{% endblock %}
{% block javascripts %}{% endblock %}
</head>
<body>
<!-- getbootstrap JS link -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
{% block body %}{% endblock %}
</body>
</html>
test.html.twig
{% extends 'base.html.twig' %}
{% block title %} Testign Symfony {% endblock %}
{% block body %}
<h1>
Test
</h1>
{% endblock %}
You have the url for the demo page href="https://bootswatch.com/solar/" not the css file.
The bootswatch help page says:
You can also use the themes via CDN at jsDelivr.
So it looks like you use the following for the latest version of the solar theme:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch#4.6.0/dist/solar/bootstrap.css">
Also the javascript should be after your {% block body %} and you should use only bootstrap.bundle.min.js (single file) OR both popper.min.js and bootstrap.min.js (two files) not all three. I recommend using v4.6.0 to match the bootswatch theme version, which still requires jQuery:
<script src="https://cdn.jsdelivr.net/npm/jquery#3.2.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
Here is a working snippet:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch#4.6.0/dist/solar/bootstrap.css">
<h1>test</h1>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.2.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
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 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
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 %}
The question title describes my problem. I'm currently trying to make it work with static files, but I also tried using Bootstrap's CDN and tried using hard coded path to the Bootstrap CSS. Additional infos:
settings.py:
STATIC_PATH = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = (
STATIC_PATH,
)
base.html:
<!DOCTYPE html>
<html lang="en" ng-app="IA">
<head>
{% load staticfiles %}
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="iso-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"/>
<link rel="stylesheet" href="{% static 'css/ionic.min.css' %}"/>
<link rel="stylesheet" href="{% static 'css/ionicons.min.css' %}"/>
</head>
<body ng-controller="LFSTD">
<div class="container">
<div class="jumbotron">
<div class="bar bar-header">
<button class="button button-icon icon ion-navicon" ng-click="toggleLeft()"></button>
<div class="h1 title">
<b>
{% block header_title_block %}{% endblock %}
</b>
</div>
</div>
<div>
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content ng-controller="LFSTD">
<ion-content class="has-header">
<div>
{% block body_block %}{% endblock %}
</div>
</ion-content>
</ion-side-menu-content>
<!--Left menu -->
<ion-side-menu side="left">
<ion-content class="has-header">
<div class="list">
<a class="item item-icon-left" href="{% url 'profile' %}">
<i class="icon ion-person"></i>
Profile
</a>
<a class="item item-icon-left" href="{% url 'lfstd' %}">
<i class="icon ion-person-stalker"></i>
LFSTD
<span class="badge badge-assertive">10</span>
</a>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</div>
</div>
</div>
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="{% static 'js/bootstrap.min.js'%}"></script>
<script src="{% static 'js/ionic.bundle.min.js' %}"></script>
<script src="{% static 'js/ia.js' %}"></script>
</body>
</html>
Anyone has an idea of why Bootstrap ain't loading? The container and the jumbotron divs simply don't modify the look of the page.
The network monitor gives me 304 on both the bootstrap CSS and JS files:
Edit:
Here is my BASEDIR:
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
Working hardcoded URL:
/static/css/bootstrap.min.css
How I call it with static files:
{% static 'css/bootstrap.min.css' %}
URL from view source:
href="/static/css/bootstrap.min.css"
Edit #2, lead to solution:
After playing around with the static files and the templates, I realized that it is AngularJS messing up my CSS. When I remove
ng-app="IA"
From my < html > tag, all formatting (except from angularJS of course) works.
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.