Style sheets refusing to load on the browser - python

I have downloaded an html template online. And I have gone ahead and pasted the index.html to my templates folder, and the assets to my static files, and I have placed the '{% load static %)' tag inside my index file.
Here is a snippet of the index.html
{% load static %}
<!DOCTYPE html>
<html class="no-js" lang="zxx">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>ClassiGrids - Classified Ads and Listing Website Template.</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" type="image/x-icon" href="{% static 'assets/images/favicon.svg' %}" />
<!-- Place favicon.ico in the root directory -->
<!-- Web Font -->
<link
href="https://fonts.googleapis.com/css2?family=Jost:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<!-- ========================= CSS here ========================= -->
<link rel="stylesheet" href="{% static 'assets/css/bootstrap.min.css' %}" />
<link rel="stylesheet" href="{% static 'assets/css/LineIcons.2.0.css' %}" />
<link rel="stylesheet" href="{% static 'assets/css/animate.css' %}" />
<link rel="stylesheet" href="{% static 'assets/css/tiny-slider.css' %}" />
<link rel="stylesheet" href="{% static 'assets/css/glightbox.min.css' %}" />
<link rel="stylesheet" href="{% static 'assets/css/main.css' %}" />
</head>
<body>
<!--[if lte IE 9]>
<p class="browserupgrade">
You are using an <strong>outdated</strong> browser. Please
upgrade your browser to improve
your experience and security.
</p>
<![endif]-->
<!-- Preloader -->
<div class="preloader">
<div class="preloader-inner">
<div class="preloader-icon">
<span></span>
<span></span>
</div>
</div>
</div>
<!-- /End Preloader -->
I have also edited the settings to show where my template files are located
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [BASE_DIR/ 'templates'],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
However, the site is still appearing in plain html on the browser. What could I have missed?


It appears that I forgot to edit the settings to include the static files, by importing the operating system
from pathlib import Path
import os
and adding the static files directory at the bottom
STATIC_URL = 'static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)

Related

CSS Referencing many stylesheet and scalability

I'm having some problem with my multiples stylesheet references. Basically the classes defined on style.css are not acting on my index.html. Might be that as there are multiple stylesheet someone of these are overwriting the file style.css?
Last time I was having a similar problem and I asked a question here but after a couple of hours the file was working fine... Now I have restarted and all but still style.css still do nothing...
myapp/static/style.css
h1 {
color: blue;
text-align: center;
}
.box {
width:30%;
height:30%;
background-color: blue;
}
On my layout.html have been defined multiples stylesheet references on the following way
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-
scalable=no">
<!-- Estilos de la master -->
<link rel="stylesheet" href="{% static 'myapp/style.css' %}" type="text/css" >
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}"
type="text/css">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'js/sss/sss.css' %}" type="text/css" media="all">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!-- Estilos de los recursos adicionales -->
<link rel="stylesheet" href="{% static 'fontawesome/web-fonts-with-css/css/fontawesome-
all.min.css' %}">
<!-- Librerías adicionales -->
<script src="{% static 'js/jquery.min.js'%}"></script>
<script src="{% static 'js/sss/sss.min.js' %}"></script>
<!-- Librerías de plugins -->
<!-- Archivo personalizado de Javascript -->
<script src=" {% static 'js/codejs.js' %}"></script>
<title>{% block title %}{% endblock %}</title>
</head>
and finally my index.html:
{% extends "myapp/layout.html" %}
{% load static %}
{% block body %}
<h1> Hola Mundo</h1>
<div class="box">Hello world1</div>
<div style="width:30%; height:30%; background-color: red;">Hello world2</div>
{% endblock %}

Page not found (404) jquery django python

jquery does not load - Page not found (404)
base.html
{% load static %}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="{% static 'bootstrap-5.0.0/css/bootstrap.css' %}" rel="stylesheet">
<link href="{% static 'css/style.css' %}" rel="stylesheet">
<!-- jQuery -->
<script src="{% static 'jquery/jquery.js' %}"></script>
</head>
setting.py
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'ServiceCRM3/static'),]
static folder created
the script is in the path static / jquery / jquery.js
bootstrap picks up ok in the same folder
the server restarted
what's wrong?

Django Can't Resolve Style ine fil static

Hello i can't resolve static file (vendor,bootstrap,css,js) i can t see the picture with color just baisc formular need help to resolve this i followed the documentation step by step but this step didnt work
this is my code html :
<!DOCTYPE html>
<html lang="en">
<head>
{% load static %}
<title>Login V9</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->
<link rel="icon" type="image/png" href="{{ static
'AppStage/images/icons/favicon.ico' }}"/>
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="{% static
'AppStage/vendor/bootstrap/css/bootstrap.min.css' %}">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="{% static
'AppStage/fonts/font-awesome-4.7.0/css/font-awesome.min.css' %}">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="{% static
'AppStage/fonts/iconic/css/material-design-iconic-font.min.css' %}">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="{% static
'AppStage/vendor/animate/animate.css' %}">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="{% static
'AppStage/vendor/css-hamburgers/hamburgers.min.css' %}">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="{% static
'AppStage/vendor/animsition/css/animsition.min.css' %}">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="{% static
'AppStage/vendor/select2/select2.min.css' %}">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="{% static
'AppStage/vendor/daterangepicker/daterangepicker.css' %} ">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="{% static
'AppStage/css/util.css' %} ">
<link rel="stylesheet" type="text/css" href="{% static
'AppStage/css/main.css' %} ">
<!--===============================================================================================-->
</head>
<body>
<div class="container-login100" style="background-image: url('images/paul.jpg');">
<div class="wrap-login100 p-l-55 p-r-55 p-t-80 p-b-30">
<form class="login100-form validate-form">
<span class="login100-form-title p-b-37">
Sign In
</span>
<div class="wrap-input100 validate-input m-b-20" data-validate="Enter username or email">
<input class="input100" type="text" name="username" placeholder="matricule">
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input m-b-25" data-validate = "Enter password">
<input class="input100" type="password" name="pass" placeholder="password">
<span class="focus-input100"></span>
</div>
<div class="container-login100-form-btn">
<button class="login100-form-btn">
Sign In
</button>
</div>
</form>
</div>
</div>
<div id="dropDownSelect1"></div>
<!--===============================================================================================-->
<script src="{% static
'AppStage/vendor/jquery/jquery-3.2.1.min.js' %}"></script>
<script src="{% static
'AppStage/vendor/animsition/js/animsition.min.js' %}"></script>
<script src="{% static
'AppStage/vendor/bootstrap/js/popper.js' %}"></script>
<script src="{% static
'AppStage/vendor/bootstrap/js/bootstrap.min.js' %}"></script>
<!--===============================================================================================-->
<script src="{% static
'AppStage/vendor/select2/select2.min.js' %}"></script>
<!--===============================================================================================-->
<script src="{% static
'AppStage/vendor/daterangepicker/moment.min.js' %}"></script>
<script src="{% static
'AppStage/vendor/daterangepicker/daterangepicker.js' %}"></script>
<!--===============================================================================================-->
<script src="{% static
'AppStage/vendor/countdowntime/countdowntime.js' %}"></script>
</body>
</html>
this is the file views.py
from django.shortcuts import render
from django.http import HttpResponse
from django.template import loader
# Create your views here.
def Authenti(request):
template = loader.get_template('authentification/index.html')
return HttpResponse(template.render(request=request))
the picture of hearchi of my project
[1]: https://zupimages.net/up/19/29/dkik.png"tooltip"

first link is wrong
<link rel="icon" type="image/png" href="{% static 'AppStage/images/icons/favicon.ico' %}"/>
use path for image,
.container-login100 {
background: url("/AppStage/images/paul.jpg")
}

Django 1.11.7 - staticfiles_dir issue

I'm developing with django first time. I have read what is : STATIC_ROOT / STATICFILES_DIR / STATIC_URL, I know what purpose for each of them.
I have a problem which I keep getting 404 on browser trying to get the css files.
setting.py
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
PROJECT_DIR = os.path.dirname(os.path.abspath(__file__))
STATIC_URL = '/static/'
STATIC_ROOT = '%s/online_static/' % (BASE_DIR)
STATICFILES_DIRS = ['%s/bootstrap/' % (PROJECT_DIR),]
index.html
<head>
{% load staticfiles %}
<meta charset="UTF-8">
<title>{% block title%}Default title{% endblock title %}</title>
<meta name="description" content="{% block metadescription%}{% endblock metadescription %}">
<meta name="keywords" content="{% block metakeywords%}{% endblock metakeywords %}">
<meta name="author" content="alme7airbi9357#gmail.com">
<!-- Bootstrap core CSS -->
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" type="text/css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="{% static 'css/shop-homepage.css' %}" rel="stylesheet" type="text/css">
<!-- Bootstrap core JavaScript -->
<script src="{% static 'vendor/jquery/jquery.min.js' %}"></script>
<script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
</head>
what I did
after setting this params I have run the python manage.py collectstatic
Note : DEBUG = False

As per the Django Docs, follow the configuration steps for static : https://docs.djangoproject.com/en/1.11/howto/static-files/

Trying to fix css paths in Django

I'm working locally on a django project with bootstrap . The structure screenshot is above:
I have the following in index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Landing Page - Start Bootstrap Theme</title>
<!-- Bootstrap Core CSS -->
{% load staticfiles %}
<link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet" />
<!-- Custom CSS -->
<link href="{% static "css/landing-page.css" %}" rel="stylesheet" />
<!-- Custom Fonts -->
<link href="{% static "font-awesome-4.2.0/css/font-awesome.min.css" %}" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
In my settings.py I have:
STATIC_URL = '/static/'
TEMPLATE_DIRS = (
os.path.join(BASE_DIR, 'templates'),
When I open "http://onetwentyseven.0.0.1:8000/index/", I see the html but the bootstrap css styling is not present. in dev tools I see:
How can I fix the CSS paths?

This seems to be a syntax error. If you move the css directory from static>app1>css to static>css. It should work just fine

Categories

Resources