My css file is working but i can't add bacgorund image. I try 3 way but don't work.
This is my style.css
.first-info{
width: 100%;
height: 300px;
background-image: url( "{% static 'img/bg.jpg' %}");
}
This is my base.html ( img is working)
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}VPW{% endblock %}</title>
<link href="{% static 'css/style.css' %}" rel="stylesheet">
<link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
<link href="{% static 'css/font-awesome.css' %}" rel="stylesheet">
<script href="{% static 'js/bootstrap.js' %}"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container-fluid">
<div class="row head">
<div class="col-md-12">
<div class="col-md-4">
</div>
<div class="col-md-4 logo">
<img src="{% static 'img/logo1.png' %}">
</div>
<div class="col-md-4">
</div>
</div>
</div>
</div>
<div id="content">
{% block content %}
{% endblock %}
</div>
</body>
</html>
And this is my main.html where i have class first-info.
{% extends "shop/base.html" %}
{% load static %}
{% block title %}VPW{% endblock %}
{% block content %}
<div class="container-fluid">
<div class="row first-info">
<div class="col-md-4">
<div class="box">
Lorem Ipsum
</div>
</div>
<div class="col-md-4">
<div class="box">
</div>
</div>
<div class="col-md-4">
<div class="box">
</div>
</div>
</div>
</div>
{% endblock %}
I try change in css background-image: url( "{% static 'img/bg.jpg' %}"); to background-image: url( "img/bg.jpg"); but don't work it
This is the expected behaviour. Django templating engine populates all the variables while rendering the html template. It will not populate values in your css file which is included in your html.
Your base.html because {% static 'img/logo1.png' %} is replaced into something like /static/img/logo1.png and browser is able to find the image, loads it and renders it.
If you want to make your background-image dynamic you can either .
You can add css class either directly in template i.e.
{% extends "shop/base.html" %}
{% load static %}
{% block title %}VPW{% endblock %}
<style>
.first-info{
width: 100%;
height: 300px;
background-image: url( "{% static 'img/bg.jpg' %}");
}
</style>
{% block content %}
<div class="container-fluid">
<div class="row first-info">
<div class="col-md-4">
<div class="box">
Lorem Ipsum
</div>
</div>
<div class="col-md-4">
<div class="box">
</div>
</div>
<div class="col-md-4">
<div class="box">
</div>
</div>
</div>
</div>
{% endblock %}
Or use a inline css directly in your html tag.
<div class="row first-info" style="background-image: url({% static 'img/bg.jpg' %})" >
Or
Just hardcode the complete path in your css file. But it removes the dynamic behaviour i.e. your static path. I am assuming it is just /static/
.first-info{
width: 100%;
height: 300px;
background-image: url( '/static/img/bg.jpg' );
}
Try this:
background-image:url('{{ STATIC_URL }}/img/bg.jpg');
Late answer, but I wanted to share this with someone trying to dynamically load a background image. My example is rendering a database request generated in views.py. The request contains three elements: background.photo, background.title and background.body.
Although not necessary, I wanted to apply opacity to the photo; however, using opacity property applies the effect to all children of the element in the DOM, so I used rgba to isolate the effect to the photo. The text is overlaid without being affected by the opacity of the photo. To make the text stand out, I used a horizontal gradient to darken the photo on the left.
{% extends 'base_layout.html' %}
{% block content %}
<div class="background-image" style="background: url({{ background.photo.url }} ) no-repeat; background-size: 100%;">
<div class="container">
<h2 class="title-text">{{ background.title }}</h2>
<p class="body-text">{{ background.body }}</p>
</div>
</div>
{% endblock %}
And the css:
.container{
background: linear-gradient(to right, rgba(0,0,0,1), rgba(255,255,255,0));
}
.background-image{
margin: 1em;
border-style: solid;
border-width: 1px;
border-color: #ff0080;
}
.title-text{
font-family: serif;
color: #ff0080;
margin: 0;
padding: .5em 1em;
}
.body-text{
font-family: serif;
color: #ff0080;
margin: 0;
padding: 1.5em 4em;
}
Django is not processing .css file includes just renders html templates.
Your CSS is static file and url should there be included through processing of some kind of management command if you want it to be extensible.
Othewise just use path of url
Just replace in static with '..'.
It will solve:
background:url('../images/Course.jpg');
Images must be in static/app/images/ and .css files must be located in static/app/content/.
Further in the .css file write like this:
#home {
background: url(../images/1.jpg);
}
This just worked for me:
<style="background-image: url({% static 'images/cover.jpg' %})">
Source:
https://simpleit.rocks/python/django/call-static-templatetag-for-background-image-in-css/
.bgded{
background-image: url( "{% static 'images/ur.jpg' %}");
}
.wrapper {
display: grid;
}
Add this
Related
I wanted to put elements in my nav menu in a row, so I used bootstrap 5.0 row class, but they still land one below another.
I am doing a Flask project, so I am using Jinja to some extent.
base.html
<body>
<div class = "container">
{% block body %}
{% endblock %}
</div>
</body>
panel.html
{% block body %}
<nav class="navbar sticky-top">
<div class="fixed-top" style="width: 100%; max-width: 100%; height: 100px; background-color: #2E2E2E;">
<nav class="container-wide navbar navbar-expand-lg">
<div class = "row">
<a id="rbf-main" style="font-size:40px" href= "{{ url_for ('home') }}">RBF</a>
<a class ="rbf-link" href= "{{ url_for ('home') }}">Remove more Big Files</a>
</div>
</nav>
</div>
</nav>
{% endblock %}
Your elements in the row have to get "col-" classes.
Bootstrap is based on a 12 column layout, so if you want to have your rbf-main and rbf-link in one row, they should both have classes like that.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class = "row">
<a class="col-12 col-sm-6" id="rbf-main" style="font-size:40px" href= "{{ url_for ('home') }}">RBF</a>
<a class="col-12 col-sm-6 rbf-link" href= "{{ url_for ('home') }}">Remove more Big Files</a>
</div>
The elements share one row at viewport size sm. You can use any other viewportsize.
This is probably a silly question, but can you put a <div> stage around Django's {% block content %}?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'property/style.css' %}">
{% block head %}
{% endblock %}
</head>
<body>
<div class = "row">
<div class = "column left">
{% block left %}
{% endblock %}
</div>
<div class = "column center">
{% block center %}
{% endblock %}
<div class = "column right">
{% block right %}
{% endblock %}
</div>
</div>
</body>
<HTML>
and my CSS
* {
box-sizing: border-box;
}
body {
color: var(--text_color);
background-color: var(--background_color);
font-family: var(--font);
font-size: var(--font_size);
}
.column {
float: left;
padding: var(--padding);
height: 300px;
}
.left, .right {
width: 25%;
}
.center {
width: 50%;
}
.row:after {
content: "";
display: table;
clear: both;
}
I am trying to make each {% block %} be a column without having to write the <div> for each template. However, my HTML output is stacking them on top of each other instead of side by side.
**edit: Post the rendererd HTML document, so we know what Django has done to it.
Yes you can do that... But your problem is that a ending </div> tag is missing:
<div class = "row">
<div class = "column left">
{% block left %}
{% endblock %}
</div>
<div class = "column center">
{% block center %}
{% endblock %}
</div>
<div class = "column right">
{% block right %}
{% endblock %}
</div>
</div>
Checkout this structure.
While practicing Django, I want to mess around with CSS. In this case, I am creating a login page. The login form is currently appearing at the top-left corner of the page. How to I modify to make it right in the center? I am not good with CSS and could use some pointers.
Here are my django files. I try to manipulate the panel-default but it does not work.
base.html
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
<link href="{% static "css/base.css" %}" rel="stylesheet">
</head>
<body>
<div id="header">
<span class="logo">My Page</span>
</div>
<div id="content">
{% block content %}
{% endblock %}
</div>
</body>
</html>
login.html (which extends the base.html)
{% extends "base.html" %}
{% block title %}Log-in{% endblock %}
{% block content %}
<div class="panel panel-default">
<h1>Log-in</h1>
<form method="post">
{{ form.as_p }}
{% csrf_token %}
<p><input type="submit" value="Log in"></p>
</form>
</div>
{% endblock %}
base.css
#import url(http://fonts.googleapis.com/css?family=Muli);
body {
margin:0;
padding:0;
font-family:helvetica, sans-serif;
}
.panel-default{
position: absolute;
top: 50%;
left: 50%;
}
#header {
padding:10px 100px;
font-size:14px;
background:#12c064;
color:#fff;
border-bottom:4px solid #1cdf78;
overflow:auto;
}
Add to .panel-default this CSS- transform: translate(-50%, -50%)
and if you didn't give the parent element of .panel-default CSS position: relative; yet, please do it first.
Align the panel to the center this way:
.panel{
margin: 0px auto;
}
If it doesn't work, then wrap your login form with div tags and align the new div to the center using the the margin property above.
I have the following HTML structure with CSS formatting.
What I want is the outer div using flex but the inner div not using flex but float style (by the reasons of the sortable drag-drop widget does not work under display as flex).
Specifically, the structure is as below:
<div id="a" style="display:flex;min-height: 100%;overflow:auto;padding-bottom: 150px;">
<div id="b" align="left" style="padding: 10px">
<div id="multi" style="display: NOT flex;"></div>
<div id="p" style=" float:left;"></div>
<div id="q" style=" float:left;"></div>
</div>
</div>
</div>
So, to be precise, I want flex for a. Particularly for div multi, p and q. I don't want flex, so that they can be side-by-side in the layout. Could anyone suggest how to do that? Many thanks.
The following is my working example run by Django on Python 3.5 for Michael_B's advice:
The template listing the RubaXa Sortable's widget for category ranking. What I want to do specifically is to list the blocks and Group A/B side by side, however, the Group A and B can be dragged to the block side for sorting/grouping:
{% extends "admin_content.html" %}
{% load static %}
{% block header_extra%}
<link rel="stylesheet" href="{% static 'django_tables2/themes/paleblue/css/screen.css' %}" />
{% include "fancybox/fancybox_css.html" %}
<!-- AngularJS -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<!-- Sortable.js -->
<script src="http://rubaxa.github.io/Sortable/Sortable.js"></script>
<!-- ng-sortable.js -->
<script src="http://rubaxa.github.io/Sortable/ng-sortable.js"></script>
<!-- app.js -->
<script src="http://rubaxa.github.io/Sortable/st/app.js"></script>
<link href="/static/app.css" rel="stylesheet" type="text/css">
{% endblock %}
{% block admin_right%}
<div id="multi" >
<div class="tile__list" style="float:left; min-height:100%; min-width=1200px">
{% for field in table %}
<p style="background-color:#C6DDF4; margin: 5px; padding: 10px 15px; cursor: move;"><font size="2px">{{ field.NewsPaper }}, {{ field.Section}}, {{field.Title}}</font></p>
{% endfor %}
</div>
<div class="layer tile" >
<div class="tile__name" style=" float:left;">Group A</div>
<div class="tile__list">
</div>
</div>
<div class="layer tile" >
<div class="tile__name" style=" float:left;">Group B</div>
<div class="tile__list">
</div>
</div>
</div>
</div>
<script id="jsbin-javascript">
angular.module('demo', ['ng-sortable'])
.controller('DemoController', ['$scope', function ($scope) {
$scope.firstList = ['foo 1', 'foo 2', 'foo 3'];
$scope.secondList = ['bar 1', 'bar 2'];
$scope.sortableOptions = {
group: 'ng',
animation: 200
}
}]);
var el = document.getElementById('multi');
var sortable = Sortable.create(el, {
animation: 150,
handle: ".tile__name",
draggable: ".tile"
});
[].forEach.call(document.getElementById('multi').getElementsByClassName('tile__list'), function (el){
Sortable.create(el, {
group: 'blocks',
animation: 150
});
});
</script>
{#{% load django_tables2 %}#}
{#{% render_table table %}#}
{% endblock %}
And this template is further extend to another template of "admin_content.html" which use display flex in div:
{% extends "main.html" %}
{% load static %}
{% block header_extra%}{% endblock %}
{% block content_main%}
<div style="display:flex;min-height: 100%;overflow:auto;padding-bottom: 150px;">
<nav class="w3-sidenav w3-border" style="width:15%;padding:0px;background:transparent;">
<a class="w3-border-bottom" href="#">Function A</a>
<a class="w3-border-bottom" href="#">Function B</a>
<a class="w3-border-bottom" href="#">Function C</a>
<a class="w3-border-bottom" href="#">Function D</a>
<a class="w3-border-bottom" href="#">Function E</a>
</nav>
<div align="left" style="display:flex; padding: 10px;">
{% block admin_right%}{% endblock %}
</div>
</div>
{% endblock %}
I'm trying to use tamplates for the site. I have base.html
<!DOCTYPE html>
<html>
{% load staticfiles %}
<head>
<title>{% block title %}{% endblock %}</title>
{% block url %}{% endblock %}
<link rel = "stylesheet" href="{% static "app/css/base.css" %}"/>
</head>
<body link="#FFFFFF" alink="#fefefe" alink="#FFFFFF" vlink="#FFFFFF">
<div class="page-wrap">{% block content %}{% endblock %}</div>
<footer class="site-footer">
footer information
</footer>
</body>
</html>
base.css
* {
margin: 0%;
}
html, body {
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.page-wrap {
min-height: 100%;
margin-bottom: -100px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
height: 100px;
}
.site-footer {
width: 100%;
background: #222222;
opacity: 1;
}
The footer at the index.html is working correctly, but on the other's html footer is standing under divs, and don't stick to footer. Is it possible to fix it? Thank u!
UPD:
There seems a little bag at the index.
{% extends "app/base.html" %}
{% load staticfiles %}
{% block title %}Feedbacker{% endblock %}
{% block url %}
{% endblock %}
{% block content %}
<div id="content">
{% if user.is_authenticated %}
<div id="usDescr"> Welcome, {{user.username}} </div>
<p class="myBtn"><a href="/my" >My Cab</a></p>
{% else %}
<header class = "descr">
header information
</header>
<div class="login-card">
login box
</form>
</div>
</div>
{% endif %}
{% endblock %}
If I'm stay not logged in footer works correctly, but if I log in and content changes to the {% if user.is_authenticated %} footer will leave his palce and stay under div = "Content"
It was pretty small error - I used {% endblock %} on the one up line