There were problems connecting the css file to the project. If you specify styles inside the html file, through - everything works well. But if you refer to a project style file, many styles simply refuse to work.
css file:
.imgsize{
width: 350px;
height:350px;
}
html file:
{% load staticfiles %}
<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/tren.css' %}">
<link rel="shortcut icon" href="{% static 'image/h.png' %}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<title>Hello</title>
</head>
<body>
<div class="der">
<div class="container">
<div class="border border-success rounded bg-light text-dark">
<div class="ml-1">
<img class="imgsize" src="{% static 'image/1.jpg' %}" alt="Картинка"> //This does not work
</div>
</div>
</div>
</div>
</body>
</html>
https://i.stack.imgur.com/alEe3.png
Related
I had such a problem - on the desktop version, the image is displayed correctly. Exactly the same on android devices. But when you visit the site from an ios device, the image is very close and is not displayed as it should be. click to see this
base_page.html
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>{% block title %}Shop{% endblock title %}</title>
<link rel="shortcut icon" type="image/png" href="{% static 'img/favicon.png' %}"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,100;0,400;0,500;1,100&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/all.min.css' %}" />
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}"/>
<link rel="stylesheet" href="{% static 'css/owl.carousel.css' %}" />
<link rel="stylesheet" href="{% static 'css/animate.css' %}" />
<link rel="stylesheet" href="{% static 'css/meanmenu.min.css' %}" />
<link rel="stylesheet" href="{% static 'css/main.css' %}" />
<link rel="stylesheet" href="{% static 'css/responsive.css' %}" />
</head>
<body>
{% block container %}
{% endblock container %}
<script src="{% static 'js/jquery-1.11.3.min.js' %}"></script>
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/jquery.countdown.js' %}"></script>
<script src="{% static 'js/owl.carousel.min.js' %}"></script>
<script src="{% static 'js/jquery.meanmenu.min.js' %}"></script>
<script src="{% static 'js/main.js' %}"></script>
</body>
</html>
page.html
{% extends 'base_page.html' %}
{% load static %}
{% block title %}
Shop
{% endblock title %}
{% block container %}
<div class="hero-area hero-bg">
<div class="container">
<div class="row">
<div class="col-lg-9 offset-lg-2 text-center">
<div class="hero-text">
<div class="hero-text-tablecell">
<p class="subtitle">Новое поступление</p>
<h1>Предзаказ на клавиатуры Varmilo!</h1>
<div class="hero-btns">
Каталог
Контакты
</div>
</div>
</div>
</div>
</div>
</div>
</div>
main.css
.hero-bg {
background-image: url(../img/hero-bg.jpg);
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.hero-area {
height: 100%;
position: relative;
z-index: 1;
}
I am trying to use data-bs-toggle. I am very new in using bootstrap. I am not sure if I am forgetting to add a library.
When I start typing data-bs the only ones that my autocomplete show me is data-bs-target and data-bs-popper and if I add data-bs-toggle does not work it's like is not included in the package.
My code:
header.html
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<title>{% block title %}{% endblock%}</title>
</head>
<body>
{% block body %}{% endblock%}
</body>
</html>
index.html
{% include 'header.html' %}
{% block title %} Home {% endblock %}
{% block body %}
<div class="container">
<div class="row">
<div class="col md 12">
<div class="jumbotron p-3">
<h2>Manage <b>Student </b><button type="button" class="btn btn-success float-right"
data-bs-toggle="modal" data-bs-target="#mymodal">Add new Student</button></h2>
</div>
</div>
</div>
</div>
Not necessarily related to your auto-complete issues, but you have not properly included the Bootstrap libraries. Read through the Introduction and specifically the Starter template.
Your template should look something like the following:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>{% block title %}{% endblock%}</title>
</head>
<body>
{% block body %}{% endblock%}
<!-- bootstrap.js belongs down here ONCE, after ALL the content -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
I am in the process of developing a login page for an authorization management application, the problem that arises is that angular is not able to access some of my files.
here are the errors i get:
however I specified the path of the files as I did for example here :
<link rel="stylesheet" type="text/css" href="../assets/fonts/poppins/Poppins-Bold.ttf">
but it doesn't work.
here is the location of my files :
and here is all my code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login V1</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->
<link rel="icon" type="image/png" href="assets/images/icons/favicon.ico"/>
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="assets/vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="/assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="../assets/fonts/poppins/Poppins-Bold.ttf">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="assets/vendor/animate/animate.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="assets/vendor/css-hamburgers/hamburgers.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="assets/vendor/select2/select2.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="assets/css/util.css">
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
<!--===============================================================================================-->
</head>
<body>
<div class="limiter">
<div class="container-login100">
<div class="wrap-login100">
<div class="login100-pic js-tilt" data-tilt>
<img src="assets/images/img-01.png" alt="IMG">
</div>
<form class="login100-form validate-form">
<span class="login100-form-title">
Member Login
</span>
<div class="wrap-input100 validate-input" data-validate = "Valid email is required: ex#abc.xyz">
<input class="input100" type="text" name="email" placeholder="Email">
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-envelope" aria-hidden="true"></i>
</span>
</div>
<div class="wrap-input100 validate-input" data-validate = "Password is required">
<input class="input100" type="password" name="pass" placeholder="Password">
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-lock" aria-hidden="true"></i>
</span>
</div>
<div class="container-login100-form-btn">
<button class="login100-form-btn">
Login
</button>
</div>
<div class="text-center p-t-12">
<span class="txt1">
Forgot
</span>
<a class="txt2" href="#">
Username / Password?
</a>
</div>
<div class="text-center p-t-136">
<a class="txt2" href="#">
Create your Account
<i class="fa fa-long-arrow-right m-l-5" aria-hidden="true"></i>
</a>
</div>
</form>
</div>
</div>
</div>
<!--===============================================================================================-->
<script src="assets/vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
<script src="assets/vendor/bootstrap/js/popper.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
<script src="assets/vendor/select2/select2.min.js"></script>
<!--===============================================================================================-->
<script src="assets/vendor/tilt/tilt.jquery.min.js"></script>
<script >
$('.js-tilt').tilt({
scale: 1.1
})
</script>
<!--===============================================================================================-->
<script src="assets/js/main.js"></script>
</body>
</html>
can someone please help me? and thank you in advance for your precious help !!
You have to use a relative path from the assets folder.
For example if you put the file in src/assets/css/xyz.css, then I have to access it like this :
< link rel="stylesheet" href="assets/css/xyz.css">
But we are talking about ttf. Your ttf is used in a css or scss like this:
#font-face {
font-family:"Poppins-Bold";
src: url("assets/fonts/poppins/Poppins-Bold.ttf") format("truetype");
}
This path must be relative to the resulting css. If you use scss, then the resulting css is in root, so the relative path begins with 'assets/...'.
If you include css in index.html with this:
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
and the font-face css code is in this file, then the relative should look like this:
#font-face {
font-family:"Poppins-Bold";
src: url("../fonts/poppins/Poppins-Bold.ttf") format("truetype");
}
I have a layout.html where I am setting the general layout for my project and then for each page I want to render different HTML based on the layout.html
For my home page I want to render a slider that provides a welcome message to the page, nice pictures etc, I only want this displayed on the home page.
The issue I am having is that when I I have {% include "slider.html" %} on my layout.html, the slider renders fine, but when I move it to my home.html which extends layout.html the slider is not rendered.
How can I do this so teh slider is only rendered when the user goes to home?
home.html
{% extends "layout.html" %}
{% include "slider.html" %}
{% block content %}
<div class="container clearfix">
<div class="heading-block topmargin-lg center">
<h2>My super blog</h2>
</div>
</div>
{% endblock %}
layout.html
{% load static %}
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="SemiColonWeb" />
<!-- Stylesheets
============================================= -->
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700|Raleway:300,400,500,600,700|Crete+Round:400i" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="{% static 'css/bootstrap.css' %}" type="text/css"/>
<link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/swiper.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/dark.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/font-icons.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/animate.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/magnific-popup.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/style-rtl-vars.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'app/content/responsive.css' %}" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Document Title
============================================= -->
<title>Super blog</title>
</head>
<body class="stretched">
<!-- Document Wrapper
============================================= -->
<div id="wrapper" class="clearfix">
{% include "header.html" %}
<section id="content">
<div class="content-wrap">
<div class="container clearfix">
{% block content %}
{% endblock %}
</div>
</div>
</section>
{% include "footer.html" %}
</div>
<script type="text/javascript" src="{% static 'scripts/jquery.js' %}"></script>
<script type="text/javascript" src="{% static 'scripts/plugins.js' %}"></script>
<script type="text/javascript" src="{% static 'scripts/functions.js' %}"></script>
</body>
slider.html
<section id="slider" class="slider-element slider-parallax swiper_wrapper full-screen clearfix">
<div class="slider-parallax-inner">
<div class="swiper-container swiper-parent">
<div class="swiper-wrapper">
<div class="swiper-slide dark" style="background-image: url('/static/images/typing-on-mac.jpg');">
<div class="container clearfix">
<div class="slider-caption slider-caption-center">
<h2 data-animate="fadeInUp">super blog</h2>
<p class="d-none d-sm-block" data-animate="fadeInUp" data-delay="200">some text</p>
</div>
</div>
</div>
</div>
</div>
<i class="icon-angle-down infinite animated fadeInDown"></i>
</div>
</section>
You need to include it in a {% block %}, since otherwise, it is of course not included in the final content.
If you extend a template, then you can only override the blocks. All content not in the blocks, will be interpreted, but will not be put into the final response.
So you can for example include the content of the {% include %} part in:
{% extends "layout.html" %}
{% block content %}
{% include "slider.html" %}
<div class="container clearfix">
<div class="heading-block topmargin-lg center">
<h2>My super blog</h2>
</div>
</div>
{% endblock %}
before extending i have checked all connections and file paths but after extending my child codes vanises
base.html
<!DOCTYPE html>
{% load staticfiles%}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="{% static '/images/icon.png' %}" />
<title>allgood.com</title>
<link href="{% static "/css/base.css" %}" rel="stylesheet"
type="text/css"/>
</head>
<body>
<div class="header">
<span class="name">allgood</span>
<button class="btn1 ">Resume</button>
<button class="btn2 ">resume</button>
<span class="profileimage"><img src="{%static '/images/profile1.png'
%}" style="width:40px;height:40px"></span>
</div>
</body>
</html>
skills.html
{% extends 'app/base.html' %}
{% block content %}
<p>skills</p>
<p>skills</p>
<p>skills</p>
{% endblock %}
Your base.html file should still include a block section
<!DOCTYPE html>
{% load staticfiles%}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="{% static '/images/icon.png' %}" />
<title>allgood.com</title>
<link href="{% static "/css/base.css" %}" rel="stylesheet"
type="text/css"/>
</head>
<body>
<div class="header">
<span class="name">allgood</span>
<button class="btn1 ">Resume</button>
<button class="btn2 ">resume</button>
<span class="profileimage"><img src="{%static '/images/profile1.png'
%}" style="width:40px;height:40px"></span>
{% block content %}
{% endblock %}
</div>
</body>
</html>