I cannot figure out why my css file is not working. I added my css, html and settings.py files. Can anyone help? I've tried collectstatic but get an error:
FileNotFoundError: [WinError 3] The system cannot find the path specified: 'D:\\mysite\\dreamboard\\static\\dreamboard\\style.css'
I tried replacing my path in the STATICFILES_DIRS but it still does not work. I'm not sure what to do. It could be the bootstrap? Or something. I want to have a style sheet so I can my form to a popup button. Everything is titled and spelled correctly. Any ideas?
Here are my files:
{% 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">
{% load crispy_forms_tags %}
<link rel="stylesheet" type="text/css" href="{% static 'dreamboard/style.css' %}">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/73cead4581.js" crossorigin="anonymous"></script>
<title>Hello, world!</title>
</head>
<body class="bg-light">
<h1>Hello, world!</h1>
<div class="container">
<div class="row bg-dark">
<div class=" col-sm">
<h1 style="color:white">Dreamboard</h1>
</div>
<div class="col-sm">
<button class="btn-lg btn-primary" type="submit">Add Dream</button>
</div>
</div>
</div>
</div>
<form class="" action="" method="post" autocomplete="off">
{% csrf_token %}
<div class="row">
<div class="col-md-6">
{{form.first_name|as_crispy_field}}
</div>
<div class="col-md-6">
{{form.last_name|as_crispy_field}}
</div>
</div>
{{form.dreamItem|as_crispy_field}}
<br>
<button type="submit" class="d-grid gap-2 col-12 btn btn-success">Submit</button>
</form>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
-->
</body>
</html>
css
.body {
background-color: blue;
}
.title {
color: blue;
}
settings.py
from pathlib import Path
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/3.1/howto/deployment/checklist/
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'wpx1d9%a4(9-c%+$=or6ez+9*d7&)lo!d5(8cu3##3votm)!72'
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
ALLOWED_HOSTS = []
# Application definition
INSTALLED_APPS = [
'dreamboard',
'crispy_forms',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
CRISPY_TEMPLATE_PACK = 'bootstrap4'
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
ROOT_URLCONF = 'mysite.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'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',
],
},
},
]
WSGI_APPLICATION = 'mysite.wsgi.application'
# Database
# https://docs.djangoproject.com/en/3.1/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.postgresql',
'NAME': 'dreams',
'USER': 'postgres',
'PASSWORD': 'password',
'HOST': '127.0.0.1',
'PORT': '5432',
}
}
# Password validation
# https://docs.djangoproject.com/en/3.1/ref/settings/#auth-password-validators
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
# Internationalization
# https://docs.djangoproject.com/en/3.1/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_L10N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = [
"/mysite/dreamboard/static/dreamboard/style.css",
]
I am not sure because I don't think many people use an absolute path to connect to static files. Try creating a new folder named "static", In the same folder where you have the manage.py file. and add this into your settings.py.
BASE_DIR = Path(__file__).resolve().parent.parent
STATIC_DIR = os.path.join(BASE_DIR,"static")
check the settings.py code here
Add the below code directing django to the static file location
# Static files (CSS, JavaScript, Images) #https://docs.djangoproject.com/en/3.1/howto/static-files/
> STATIC_URL = '/static/'
> STATICFILES_DIRS = [
> STATIC_DIR,
> ]
Now link it in the HTML using ,
<link rel="stylesheet" href="{% static 'css/base.css' %}">
(create a folder called css inside the static folder in your base directory)
You have named your class "bg-light", but in your css code it looks like you are trying to target a class in your css file named "body" when you don't have a class name body. If you are tying to access the body tag which it looks like your trying to do then you have to get rid of the "." you have in your ".body{}". You have also done the same thing for your title tag which is ".title". Your not targeting what you think your trying to target.
#Your HTML Code
<body class="bg-light">
#Your css code >>> pay close attention to the "."
.body {
background-color: blue;
}
Try This:
body{
background-color: blue;
}
title{
background-color:blue;
}
Related
I'm all new to Angular, and im currently trying to build a frontend, while learning to use Angular.
I have build a test-app where i am implementing authentication using an API i have writting.
The authentication works fine, however i an strugling wrapping my head around how to implement a specific functionallity.
Almost all of the app is locked behind authentication.
The idea is:
If a user visits any page in the app, while not logged in, the app should redirect the user to the login-page.
All of this works great.
However the login-page needs a totally different layout. No design elements from the "main design" is used on the login page. Even the css class on the body tag is different.
What would be the best way to solve this?
I have tried to do some *ngif in the app.component.html file, however that didnt work as expected.
Im also totally stomped on how to change the body-class in index.html.
I hope this makes any sense.
Im posting some sourcecode below. If more is needed let me know.
app.component.html:
<ng-container *ngIf="accountService.currentUser$ | async">
<app-preloader></app-preloader>
<app-nav></app-nav>
<app-sidebar></app-sidebar>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0">Dashboard</h1>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
<!-- Main content -->
<section class="content">
<div class="container-fluid">
<router-outlet></router-outlet>
</div><!-- /.container-fluid -->
</section>
<!-- /.content -->
</div>
<app-footer></app-footer>
</ng-container>
<ng-container *ngIf="(accountService.currentUser$ | async) === null">
<router-outlet></router-outlet>
</ng-container>
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Client</title>
<base href="/">
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<app-root></app-root>
</body>
</html>
app.routing.module.ts:
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { MainComponent } from './main/main.component';
import { LoginComponent } from './login/login.component';
import { UserComponent } from './user/user.component';
import { AuthGuard } from './_guards/auth.guard';
const routes: Routes = [
{
path: '',
runGuardsAndResolvers: 'always',
canActivate: [AuthGuard],
children: [
{path: '', component: MainComponent},
{path: 'user', component: UserComponent}
]
},
{path: 'login', component: LoginComponent},
{path: '**', component: MainComponent, pathMatch: 'full', canActivate: [AuthGuard]},
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
For this you can create Layout module and create your Inside and Outside layout component and add <router-outlet></router-outlet> in both components and then in your app-routing.module.ts file create route like this
{
path: '',
component: OutsideLayoutComponent,
canActivate: [ExternalAuthGuard],
children: [
{ path: '', loadChildren: './modules/auth/auth.module#AuthModule' },
]
},
{
path: '',
component: InsideLayoutComponent,
canActivate: [AuthGuard],
children: [
{ path: 'ticket', loadChildren: './modules/ticket-retrieval/ticket-retrieval.module#TicketRetrievalModule' }
{ path: 'error', component: GenericErrorPageComponent },
{ path: 'invalid-session', component: InvalidSessionPageComponent },
{ path: 'un-authorized', component: UnAuthorizedComponent }
]
},
You need to create AuthGuard, and authguard will handle user is login or not based on that redirect user to specific page. And base on routes layout will be set.
NOTE: You must have basic understanding of Angular LazyLoding
I get error that my static files can't be full executed in my wep app
This app works correctily on my pc but not on c panel
I am on sharehost so I can't use nginex
How solve this problem
This is my setting:
import os
from pytz import common_timezones
# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/2.2/howto/deployment/checklist/
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'r&94#o%)q8s-=gmxw#8a9o5161%90&2jo$0*&a&57*5$rx)#ar'
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
TEMPLATE_DEBUG = DEBUG
ALLOWED_HOSTS = ["*"]
# Application definition
INSTALLED_APPS = [
#default
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
#local components
'omuser',
'ommessage',
'omformflow',
'omflow',
'omdashboard',
'omformmodel',
'omservice',
'ommission',
]
AUTH_USER_MODEL = 'omuser.OmUser'
LOGIN_REDIRECT_URL = '/home/'
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.locale.LocaleMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
ROOT_URLCONF = 'omflow.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(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',
'django.template.context_processors.i18n',
'django.template.context_processors.static',
'django.template.context_processors.media',
],
},
},
]
WSGI_APPLICATION = 'omflow.wsgi.application'
# Database
# https://docs.djangoproject.com/en/2.2/ref/settings/#databases
# Password validation
# https://docs.djangoproject.com/en/2.2/ref/settings/#auth-password-validators
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
# Internationalization
# https://docs.djangoproject.com/en/2.2/topics/i18n/
LOCALE_PATHS = (
os.path.join(BASE_DIR, 'locale'),
)
LANGUAGES = [
("en", "English"),("zh-hant", "Traditional_Chinese"),("zh-hans", "Simplified_Chinese"),("ja", "Japanese"),("ar","Arabic")
]
LANGUAGE_CODE = 'en'
#TIME_ZONE = 'Africa/Cairo'
TIME_ZONES = [(tz, tz) for tz in common_timezones]
DATE_FORMAT = '%Y-%m-%d'
DATETIME_FORMAT = '%Y-%m-%d %H:%M:%S'
DATETIME_INPUT_FORMATS = '%Y-%m-%d %H:%M:%S'
USE_I18N = True
USE_L10N = False
# USE_TZ = True
SESSION_EXPIRE_AT_BROWSER_CLOSE = True
# SESSION_COOKIE_AGE = 3600
MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads')
FILE_UPLOAD_TEMP_DIR = BASE_DIR
FILE_UPLOAD_MAX_MEMORY_SIZE = 52428800
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.2/howto/static-files/
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)
STATIC_URL = '/static/'
# static url Mapping folder
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'staticfiles'),
#os.path.join(BASE_DIR, 'omuser', 'staticfiles'),
)
# staticfiles_dirs Mapping folder
#STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_ROOT = os.path.join(BASE_DIR, '..', 'static')
LOG_DIR = os.path.join(BASE_DIR, 'logs')
LOG_LEVEL = 'ERROR'
LOGGING = {
'version': 1,
'disable_existing_loggers': False,
'formatters': {
'simple': {
'format': '[%(asctime)s] - %(levelname)-8s - %(message)s',
'datefmt': DATETIME_FORMAT,
},
},
"filters": {
"infofilter": {
"()": "omflow.syscom.default_logger.LowLevelFilter",
"level": 20
},
"warnfilter": {
"()": "omflow.syscom.default_logger.HighLevelFilter",
"level": 30
}
},
'handlers': {
'consoleInfo': {
'class': 'logging.StreamHandler',
'formatter': 'simple',
"filters": ["infofilter"]
},
'consoleError': {
'class': 'logging.StreamHandler',
'formatter': 'simple',
"stream": "ext://sys.stdout",
"filters": ["warnfilter"]
},
'omlogfile': {
'class': 'logging.handlers.TimedRotatingFileHandler',
'filename': os.path.join(LOG_DIR, 'omflow.log'),
'encoding':'utf-8',
'formatter': 'simple',
'when': 'midnight',
'backupCount': 10,
'delay': True
},
'djangolog': {
'class': 'logging.handlers.TimedRotatingFileHandler',
'filename': os.path.join(LOG_DIR, 'djangolog.log'),
'encoding':'utf-8',
'formatter': 'simple',
'when': 'midnight',
'backupCount': 10,
'delay': True
},
},
'loggers': {
'django': {
'handlers': ['consoleInfo','consoleError','djangolog'],
'level': LOG_LEVEL,
'propagate': False
},
'omflowlog': {
'handlers': ['omlogfile'],
'level': LOG_LEVEL,
'propagate': False
},
},
}
DATABASES = {"default": {"ENGINE": "django.db.backends.sqlite3","NAME": os.path.join(BASE_DIR, "db.omflow"),"OPTIONS": {"timeout": 300,}}}
This is my template:
<!DOCTYPE html>
{% load static %}
{% load i18n %}
{% load omflow_tags %}
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
{% include 'base_import.html' %}
<!-- AdminLTE Skins. We have chosen the skin-blue for this starter
page. However, you can choose any other skin. Make sure you
apply the skin class to the body tag so the changes take effect. -->
<link rel="stylesheet" href="{% static 'css/skins/skin-syscom.css' %}">
<!-- AdminLTE App -->
<script src="{% static 'js/adminlte.min.js' %}"></script>
</head>
<!--
BODY TAG OPTIONS:
=================
Apply one or more of the following classes to get the
desired effect
|---------------------------------------------------------|
| SKINS | skin-blue |
| | skin-black |
| | skin-purple |
| | skin-yellow |
| | skin-red |
| | skin-green |
|---------------------------------------------------------|
|LAYOUT OPTIONS | fixed |
| | layout-boxed |
| | layout-top-nav |
| | sidebar-collapse |
| | sidebar-mini |
|---------------------------------------------------------|
-->
<body class="hold-transition skin-syscom sidebar-mini">
<div class="wrapper">
<!-- Main Header -->
<header class="main-header">
{% include 'base_header.html' %}
</header>
<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
{% include 'base_l_aside.html' %}
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
{% block content %}
{% endblock %}
</div>
<!-- /.content-wrapper -->
<!-- Main Footer -->
<footer class="main-footer">
<!-- To the right -->
<div class="pull-right hidden-xs">
{% omflow_version %} {% omflow_version_type %}
</div>
<!-- Default to the left -->
<strong>© 2020 The SYSCOM Group.</strong> {% trans '版權所有.'%}
</footer>
<!-- Add the sidebar's background. This div must be placed
immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->
{% include 'base_component.html' %}
</body>
</html>
And this is suptemplate
{% load static %}
{% load i18n %}
{% load omflow_tags %}
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>OMFLOW</title>
<!-- Tell the browser to be responsive to screen width -->
<link rel="shortcut icon" href="{% static "img/favicon.ico" %}" />
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="{% static 'components/bootstrap/dist/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'plugins/fontawesome-free-5.13.0-web/css/all.css' %}">
<link rel="stylesheet" href="{% static 'plugins/fontawesome-free-5.13.0-web/css/v4-shims.css' %}">
<link rel="stylesheet" href="{% static 'components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css'%}">
<link rel="stylesheet" href="{% static 'plugins/timepicker/bootstrap-timepicker.min.css'%}">
<link rel="stylesheet" href="{% static 'components/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css'%}">
<!-- DataTables -->
<link rel="stylesheet" href="{% static 'components/datatables.net-bs/css/dataTables.bootstrap.min.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/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="{% static 'plugins/iCheck/minimal/blue.css' %}">
<!-- Google Font
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic"> -->
<link rel="stylesheet" href="{% static 'css/jquery-simple-tree-table.css' %}">
<!-- Select2 -->
<link rel="stylesheet" href="{% static 'components/select2/dist/css/select2.css' %}">
<!-- Ion Slider -->
<link rel="stylesheet" href="{% static 'plugins/Ion-Slider/ion.rangeSlider.min.css' %}">
<!-- daterange picker -->
<link rel="stylesheet" href="{% static 'components/bootstrap-daterangepicker/daterangepicker.css' %}">
<link rel="stylesheet" href="{% static 'plugins/CodeMirror/lib/codemirror.css' %}">
<link rel="stylesheet" href="{% static 'plugins/CodeMirror/theme/eclipse.css' %}">
<link rel="stylesheet" href="{% static 'plugins/SweetAlert2/dist/sweetalert2.css'%}">
<link rel="stylesheet" href="{% static 'plugins/select2-to-tree-master/src/select2totree.css' %}">
<link rel="stylesheet" href="{% static 'css/AdminLTE.min.css' %}">
<link rel="stylesheet" href="{% static 'css/omflow.css'%}?version={%omflow_version%}">
<script type="text/javascript" src="{% url 'javascript-catalog' %}"></script>
<!-- jQuery 3 -->
<script src="{% static 'components/jquery/dist/jquery.min.js'%}"></script>
<!-- jQuery UI -->
datetimepicker.min.js'%}"></script>
<script src="{% static 'components/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-hant.js'%}"></script>
<script src="{% static 'components/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-hans.js'%}"></script>
<script src="{% static 'components/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.ja.js'%}"></script>
<!-- DataTables -->
<script src="{% static 'components/datatables.net/js/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'components/datatables.net-bs/js/dataTables.bootstrap.min.js' %}"></script>
<script src="{% static 'js/jquery-simple-tree-table.js' %}"></script>
<!-- Select2 -->
you can find the answer here
404 Static file not found - Django
so add to your urle following
from django.conf.urls.static import static
from .settings import STATIC_URL,STATIC_ROOT
urlpatterns += static(STATIC_URL, document_root=STATIC_ROOT)
I'm linking a css file to my express-handlebars file but I am getting this error:
Refused to apply style from 'http://localhost:4000/cs366/style/draft.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
I have the static directory set, and my css is being applied to home.handlebars, but not fantasyDraft.handlebars
My file directory
project
|-- public
| `-- style
| |-- home.css
| `-- draft.css
|-- Fantasy
| `-- fantasyRouting.js
|-- views
| |-- fantasyDraft.handlebars
| `-- home.handlebars
|-- app.js
`-- connect.js
App.js
const express = require('express');
var exphbs = require('express-handlebars');
const db = require('./connect'); //connnect to db
const path = require('path');
const app = express();
//middleware
app.use(express.urlencoded({extended: false}));
//static folder
app.use(express.static(path.join(__dirname, '/public')))
//handlebars middleware
app.engine('handlebars', exphbs({defaultLayout: null}));
app.set('view engine', 'handlebars');
//home
app.get('/cs366', (req, res) => {
res.render('home');
});
//fantasy
app.use('/cs366/fantasy/start', require('./fantasy/fantasyRouting'));
fantasyRouting.JS - Handles the routes for a part of the application to avoid clutter in app.js
const express = require('express');
const router = express.Router();
router.post('/', (req, res) => {
players = [
{
id: 1,
name: 'Alex Johnson',
position: 'p10',
ovr: 60
},
{
id: 2,
name: 'Carl Erdman',
position: 'p2',
ovr: 76
},
{
id: 3,
name: 'Joe Enslin',
position: 'p1',
ovr: 29
}
]
res.render('fantasyDraft', {
players: players
});
});
module.exports = router;
fantasyDraft.handlebars
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="../style/draft.css">
<title>Document</title>
</head>
<body>
<div class='draft-header'>
<h1>Drafting</h1>
</div>
<div class="tables-container">
<!-- Team table -->
<table id='team-table'>
<th>Name</th><th>OVR</th><th>Postion</th>
<tbody>
</tbody>
</table>
<!-- Draft table -->
<table id='draft-table'>
<th>Name</th><th>OVR</th><th>Postion</th>
<tbody>
{{#each players}}
<tr><td>{{this.name}}</td><td>{{this.ovr}}</td><td>{{this.position}}</td><td><button type='submit' id='draft-player' index={{this.id}}>Draft</button></td></tr>
{{/each}}
</tbody>
</table>
</div>
</body>
</html>
home.handlebars
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="../style/home.css">
<title>Homepage</title>
</head>
<body>
<h1>CS-366 Soccer</h1>
<div class='form-container'>
<form action="/cs366/submit" method="POST">
<input type="text" name='input' placeholder="Enter a player or team">
<button type='submit'>Search</button>
</form>
</div>
<div class='fantasy'>
<p>stuff</p>
<form action="/cs366/fantasy/start" method="POST">
<input type="text" id='season' name='teamName' placeholder="Enter your team name">
<button type='submit' id='season'>Start Season</button>
</form>
</div>
</body>
</html>
It's because of relative path that your html is unable to find the correct css. With express files served as static is relative to express route path not actual folder path.
Since everything inside your public folder is served as static, use absolute path, makes things easier:
<link rel="stylesheet" href="/style/draft.css" />
I have implemented below Grunt configuration for concating two css files into a single css file(common_tfn_bsa.min.css ) in my jsp file.
<!-- build:css ./assets/css/common_tfn_bsa.min.css -->
<link href="./${theme}/css/style.css" rel="stylesheet">
<link href="./${theme}/css/component.css" rel="stylesheet">
<!-- endbuild -->
But while running Grunt task above code is generated as :
concat:
{ generated:
{ files:
[ { dest: '.tmp\\concat\\assets\\css\\common_bom.min.css',
src:
[ '.\\app\\${theme}\\css\\style.css',
'.\\app\\${theme}\\css\\component.css' ] }
]
}
}
What I need is ,the value of ${theme} in generated file so that it can pick the css files from correct location for concat.
Try this:
<!-- build:css(./<%= theme %>) ./assets/css/common_tfn_bsa.min.css -->
<link href="/css/style.css" rel="stylesheet">
<link href="/css/component.css" rel="stylesheet">
<!-- endbuild -->
Im using the 1.8 version of Django and my CSS, JS or images are not working, i really dont know why, my project folder is like
Project
Jetint
Static
CSS
My settings:
DEBUG = True
ALLOWED_HOSTS = []
# Application definition
INSTALLED_APPS = (
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'clients',
'front',
)
MIDDLEWARE_CLASSES = (
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.auth.middleware.SessionAuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
'django.middleware.security.SecurityMiddleware',
)
ROOT_URLCONF = 'jetint.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': ['jetint/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',
],
},
},
]
WSGI_APPLICATION = 'jetint.wsgi.application'
# Database
# https://docs.djangoproject.com/en/1.8/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'bd',
'USER': 'bd',
'PASSWORD': 'xxxx',
'HOST': '',
'PORT': '',
'ATOMIC_REQUESTS': True
}
}
TEMPLATE_DIRS = (BASE_DIR, 'jetint/templates')
# Internationalization
# https://docs.djangoproject.com/en/1.8/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_L10N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.8/howto/static-files/
STATIC_URL = '/static/'
STATIC_ROOT = (
os.path.join(BASE_DIR, '/static/'),
)
STATICFILES_DIRS = (STATIC_ROOT,)
and my base.html
<!DOCTYPE html>
<html lang="en">
<head>
<title> - {% block title-section%}{% endblock %}</title>
<meta charset="utf-8">
<meta name = "format-detection" content = "telephone=no" />
{# <link rel="icon" href="{{ STATIC_URL }}images/favicon.ico"> #}
{# <link rel="shortcut icon" href="{{ STATIC_URL }}images/favicon.ico" /> #}
{% load staticfiles %}
<link rel="stylesheet" href="{{ STATIC_URL }}css/camera.css">
<link rel="stylesheet" href="{{ STATIC_URL }}css/stuck.css">
<link rel="stylesheet" href="{{ STATIC_URL }}css/style.css">
but nothing works, css, js files, or images. please help?
EDIT:
now my html looks like this:
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<title> Jet Internacional - {% block title-section%}{% endblock %}</title>
<meta charset="utf-8">
<meta name = "format-detection" content = "telephone=no" />
{# <link rel="icon" href="{{ STATIC_URL }}images/favicon.ico"> #}
{# <link rel="shortcut icon" href="{{ STATIC_URL }}images/favicon.ico" /> #}
<link rel="stylesheet" href="{% static 'css/camera.css' %">
<link rel="stylesheet" href="{% static 'css/stuck.css' %">
<link rel="stylesheet" href="{{ % static 'css/style.css'%">
<script src="{{ STATIC_URL }}js/jquery.js"></script>
<script src="{{ STATIC_URL }}js/jquery-migrate-1.1.1.js"></script>
<script src="{{ STATIC_URL }}js/script.js"></script>
<script src="{{ STATIC_URL }}js/superfish.js"></script>
<script src="{{ STATIC_URL }}js/jquery.equalheights.js"></script>
<script src="{{ STATIC_URL }}js/jquery.mobilemenu.js"></script>
<script src="{{ STATIC_URL }}js/jquery.easing.1.3.js"></script>
<script src="{{ STATIC_URL }}js/tmStickUp.js"></script>
<script src="{{ STATIC_URL }}js/jquery.ui.totop.js"></script>
<script src="{{ STATIC_URL }}js/camera.js"></script>
<!--[if (gt IE 9)|!(IE)]><!-->
<script src="{{ STATIC_URL }}js/jquery.mobile.customized.min.js"></script>
<!--<![endif]-->
<script src="{{ STATIC_URL }}js/jquery-ui-1.10.3.custom.js"></script>
<script>
$(document).ready(function(){
jQuery('#camera_wrap').camera({
loader: false,
pagination: false ,
minHeight: '200',
thumbnails: false,
height: '25.625%',
caption: false,
navigation: true,
fx: 'mosaic'
});
$().UItoTop({ easingType: 'easeOutQuart' });
$('#stuck_container').tmStickUp({});
});
$(function() {
jQuery( "#accordion" ).accordion({
collapsible: true,
heightStyle: "content",
});
});
</script>
<!--[if lt IE 8]>
{% comment %}<div style=' clear: both; text-align:center; position: relative;'>
<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
</a>
</div>{% endcomment %}
<![endif]-->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<link rel="stylesheet" media="screen" href="css/ie.css">
<![endif]-->
</head>
<body class="page1" id="top">
<!--==============================
header
=================================-->
<header>
<!--==============================
Stuck menu
=================================-->
<section id="stuck_container">
<div class="container">
<div class="row">
<div class="grid_12">
<h1>
<a href="/">
<img src="{% static 'images/logo-rif.png' %}" width="200px;" alt="Logo alt">
</a>
</h1>
<div class="header_socials">
{# Registro #}
</div>
and my settings...
import os
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/1.8/howto/deployment/checklist/
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'm9y8koy5%cm4#_=sk_hjlbl$z%mgj*8dztu13#)^zr(j*g#q0m'
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
ALLOWED_HOSTS = []
# Application definition
INSTALLED_APPS = (
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'clients',
'front',
)
MIDDLEWARE_CLASSES = (
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.auth.middleware.SessionAuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
'django.middleware.security.SecurityMiddleware',
)
ROOT_URLCONF = 'jetint.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': ['jetint/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',
],
},
},
]
WSGI_APPLICATION = 'jetint.wsgi.application'
# Database
# https://docs.djangoproject.com/en/1.8/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'bd',
'USER': 'bd',
'PASSWORD': '...',
'HOST': '',
'PORT': '',
'ATOMIC_REQUESTS': True
}
}
TEMPLATE_DIRS = (BASE_DIR, 'jetint/templates')
# Internationalization
# https://docs.djangoproject.com/en/1.8/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_L10N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.8/howto/static-files/
STATIC_URL = 'jetint/static/'
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'static')
STATICFILES_DIRS = (
os.path.join(os.path.dirname(BASE_DIR), 'static'),
)
Put {% load staticfiles %} at the very top of the html document.
Also try:
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'static')
STATICFILES_DIRS = (
os.path.join(os.path.dirname(BASE_DIR), 'static'),
)
- - - Edit:
Additionally, to call static files in html templates, follow this format:
<link href="{% static 'css/camera.css' %}" rel="stylesheet" media="screen">
I had the same problem, but solved it.
I put this in my settings.py:
STATICFILES_FINDERS = (
"django.contrib.staticfiles.finders.FileSystemFinder",
"django.contrib.staticfiles.finders.AppDirectoriesFinder",
)
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
Then I rebooted the test server.
Put {% load staticfiles %} at the very top of the html document.
Call static file like this :
<link href="{% static 'css/camera.css' %}" rel="stylesheet" media="screen">
In settings try with using any one of STATIC_ROOT or STATICFILES_DIRS.
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'static')
or
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(os.path.dirname(BASE_DIR), 'static'),
)
if BASE_DIR = /home/myUser/Project is your BASE DIR then, just like you added 'jetint' for your template url, you could try adding it to your static like
STATIC_URL = 'jetint/static/'
Or, better yet, make your BASE DIR = /home/myUser/Project/jetint
from django.conf import settings
STATIC_URL = settings.STATIC_URL
def index(request):
return render(request, '*.html', {'STATIC_URL':STATIC_URL})
'''
A bad way
'''
Just add this in your settings.py with 'static' folder in the same place with manage.py
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'))