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
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 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>
I have base.twig like this :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=996">
<meta name="description" content="{{ meta_description }}">
<meta name="author" content="">
<link rel="icon" href="{{ assets_url }}img/ico.png">
<title>{{ meta_title }}</title>
<link rel="stylesheet" href="{{ assets_url }}css/main.css">
<script src="{{ assets_url }}js/jquery-1.11.3.min.js"></script>
<script src="{{ assets_url }}js/plugin.js"></script>
<script src="{{ assets_url }}js/main.js"></script>
</head>
<body>
{% include 'partials/header.twig' %}
</body>
</html>
I tried to import header.twig in base.twig but not working and still getting error message like this :
Fatal error: Uncaught Twig_Error_Syntax: A template that extends another one cannot include contents outside Twig blocks. Did you forget to put the contents inside a {% block %} tag?
And this is header.twig file :
{% extends "base.twig" %}
<!-- my content header is here -->
What did i miss? What's wrong with my code ?, I read in https://twig.sensiolabs.org/doc/2.x/. Please give me solution or something. Thanks.
Just remove extending from header.html.twig. Read the documentation.
Template which extends some parent template cannot be included in the parent, because there is an infinite loop.
If you want to separate part of code, just split it to another twig and include it.
But if you want to create independent template which bases on another then the template have to extends base.html.twig.
E.g. articles.html.twig which extends base.html.twig, which has included header.html.twig.
In code:
base.html.twig
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
{% include 'partials/header.html.twig' %}
{% block body %}
{% endblock %}
</body>
</html>
header.html.twig
<div>
my header
</div>
articles.html.twig
{% extends base.html.twig %}
{% block body %}
<div>
articles content
</div>
{% endblock %}
Now, your rendered articles.html.twig from your controller, should look like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div>
my header
</div>
<div>
articles content
</div>
</body>
</html>
your base.twig should look like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=996">
<meta name="description" content="{{ meta_description }}">
<meta name="author" content="">
<link rel="icon" href="{{ assets_url }}img/ico.png">
<title>{{ meta_title }}</title>
<link rel="stylesheet" href="{{ assets_url }}css/main.css">
<script src="{{ assets_url }}js/jquery-1.11.3.min.js"></script>
<script src="{{ assets_url }}js/plugin.js"></script>
<script src="{{ assets_url }}js/main.js"></script>
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>
and in your header.twig file
{% extends 'base.twig' %}
{% block body %}
// your content goes here
{% endblock %}
i tried it will work fine...
otherwise if you want to include the header in the base file. then just add the
{% include 'partials/header.twig' %}
inside the block body in the base file.
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.