I have a html block like:
<div id="sidebar">
<ul class="sidebar-menu">
{% for name in name_list %}
{% if name == 'abc' %}
<li class="sub-menu special">...</li>
{% else %}
<li class="sub-menu">...</li>
{% endif %}
{% endfor %}
</ul>
</div>
The css for this block is:
#sidebar {
width: 210px;
height: 100%;
position: fixed;
background: #EFF0F6;
overflow-y: scroll;
}
Now i want to override the background color for list element with class special to black. But i am not able to override it. How to do that?
Note: The templating language is django's templating language.
Just use a more specific selector:
#sidebar .special {
background: #000;
}
Please try this:
ul.sidebar-menu li.special{background-color:#000000}
Related
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 a dropdown in BS4 navbar. The content goes out of the container on mobile device. I want to wrap the text through css.
Following code works:
HTML:
<div class="dropdown-menu" >
{% for department in object.departments.all %}
<a class="dropdown-item text-wrap" href="">
{{ department.name }}</a>
{% endfor %}
</div>
CSS:
.dropdown-menu {
width: 30vw;
}
But following code doesnt work:
HTML:
<div class="dropdown-menu" >
{% for department in object.departments.all %}
<a class="dropdown-item" href="">
{{ department.name }}</a>
{% endfor %}
</div>
CSS:
.dropdown-menu {
width: 30vw;
}
.dropdown-item{
text-wrap:normal;
}
I think you are looking to use the white-space property or possibly to use word-wrap or text-overflow.
I've not heard of the text-wrap property in css.
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
I have this div element in the body of the html page:
<div id="alerts">
{% block alerts %}
{% try %}
{% if alerts is not None %}
{% for alert in alerts %}
<div class="{{alert.get('level', 'alert') }}">
{{ alert.get('content') }}
</div>
{% end %}
{% end %}
{% except NameError %}
{% end %}
{% end %}
</div>
that shows an alert or error in some situations.
But when I scroll down the page, this is not visible. How can show this element in the top of the page in relation with the scrolling of the page itself?
The css is this:
#alerts {
display:none;
top: 0;
left: 0;
width: 100%;
position: absolute;
z-index: 0;
}
Try position:fixed instead of absolute here's more info on positioning just in case: https://developer.mozilla.org/en-US/docs/CSS/position