Mixing
Django include template along with its css
up vote
0
down vote
favorite
I am trying to include a template - header.html into the main.html file. The header.html has its own css file. I have one choice- to link the css into the head of header.html and then include it. But it makes the code looks messier with many html tags in the same document. For instance, if I need to include another footer.html, again additional html tags will come to the main.html.
Another option is to simply put all the styles into one main.css file and include that in the base.html. But again it makes main.css harder to edit.
Is there any better solutions?
Thanks
django inheritance django-templates include
asked 1 hour ago
jeff
131112
add a comment |
up vote
0
down vote
favorite
I am trying to include a template - header.html into the main.html file. The header.html has its own css file. I have one choice- to link the css into the head of header.html and then include it. But it makes the code looks messier with many html tags in the same document. For instance, if I need to include another footer.html, again additional html tags will come to the main.html.
Another option is to simply put all the styles into one main.css file and include that in the base.html. But again it makes main.css harder to edit.
Is there any better solutions?
Thanks
django inheritance django-templates include
asked 1 hour ago
jeff
131112
One way is to make reusable class and id. It will take time first but can be helpful afterwards. Make similar kind of class for both header and footer. Add the common css file to static folder and import into base html. For body add extend tag.
– Bidhan Majhi
24 mins ago
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I am trying to include a template - header.html into the main.html file. The header.html has its own css file. I have one choice- to link the css into the head of header.html and then include it. But it makes the code looks messier with many html tags in the same document. For instance, if I need to include another footer.html, again additional html tags will come to the main.html.
Another option is to simply put all the styles into one main.css file and include that in the base.html. But again it makes main.css harder to edit.
Is there any better solutions?
Thanks
django inheritance django-templates include
asked 1 hour ago
jeff
131112
I am trying to include a template - header.html into the main.html file. The header.html has its own css file. I have one choice- to link the css into the head of header.html and then include it. But it makes the code looks messier with many html tags in the same document. For instance, if I need to include another footer.html, again additional html tags will come to the main.html.
Another option is to simply put all the styles into one main.css file and include that in the base.html. But again it makes main.css harder to edit.
Is there any better solutions?
Thanks
django inheritance django-templates include
django inheritance django-templates include
asked 1 hour ago
jeff
131112
asked 1 hour ago
jeff
131112
asked 1 hour ago
jeff
131112
asked 1 hour ago
jeff
131112
asked 1 hour ago
jeff
131112
131112
One way is to make reusable class and id. It will take time first but can be helpful afterwards. Make similar kind of class for both header and footer. Add the common css file to static folder and import into base html. For body add extend tag.
– Bidhan Majhi
24 mins ago
add a comment |
One way is to make reusable class and id. It will take time first but can be helpful afterwards. Make similar kind of class for both header and footer. Add the common css file to static folder and import into base html. For body add extend tag.
– Bidhan Majhi
24 mins ago
One way is to make reusable class and id. It will take time first but can be helpful afterwards. Make similar kind of class for both header and footer. Add the common css file to static folder and import into base html. For body add extend tag.
– Bidhan Majhi
24 mins ago
One way is to make reusable class and id. It will take time first but can be helpful afterwards. Make similar kind of class for both header and footer. Add the common css file to static folder and import into base html. For body add extend tag.
– Bidhan Majhi
24 mins ago
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
Make a folder as templates under root directory of your project and add below line in settings.py file to define the template path.
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')], #mainly this line
'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',
],
},
},
]
and
STATIC_URL = '/static/'
STATIC = os.path.join(BASE_DIR, 'static')
After it make base.html file and enter all the js and css file over here. That will reflect to all the project.
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0" />
<title>Test </title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="description" content="Test">
<link rel="shortcut icon" type="image/png" href="{% static 'images/small.png' %}"/>
<link rel="stylesheet" href="{% static 'css/lightbox.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/responsive.css' %}" type="text/css" />
<!-- more css files -->
</head>
<body>
{% block pagecontent %}
{% endblock %}
</body>
<script type="text/javascript" src="{% static 'js/asset/jquery-2.1.3.min.js' %}"></script>
<script src="static 'custom.js' %}"></script>
<!-- more js files -->
</html>
answered 52 mins ago
Anoop Kumar
14713
Screenshots aren't any more useful in answers than they are in questions. Post code here as text.
– Daniel Roseman
39 mins ago
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
Make a folder as templates under root directory of your project and add below line in settings.py file to define the template path.
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')], #mainly this line
'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',
],
},
},
]
and
STATIC_URL = '/static/'
STATIC = os.path.join(BASE_DIR, 'static')
After it make base.html file and enter all the js and css file over here. That will reflect to all the project.
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0" />
<title>Test </title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="description" content="Test">
<link rel="shortcut icon" type="image/png" href="{% static 'images/small.png' %}"/>
<link rel="stylesheet" href="{% static 'css/lightbox.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/responsive.css' %}" type="text/css" />
<!-- more css files -->
</head>
<body>
{% block pagecontent %}
{% endblock %}
</body>
<script type="text/javascript" src="{% static 'js/asset/jquery-2.1.3.min.js' %}"></script>
<script src="static 'custom.js' %}"></script>
<!-- more js files -->
</html>
answered 52 mins ago
Anoop Kumar
14713
Screenshots aren't any more useful in answers than they are in questions. Post code here as text.
– Daniel Roseman
39 mins ago
add a comment |
up vote
0
down vote
Make a folder as templates under root directory of your project and add below line in settings.py file to define the template path.
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')], #mainly this line
'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',
],
},
},
]
and
STATIC_URL = '/static/'
STATIC = os.path.join(BASE_DIR, 'static')
After it make base.html file and enter all the js and css file over here. That will reflect to all the project.
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0" />
<title>Test </title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="description" content="Test">
<link rel="shortcut icon" type="image/png" href="{% static 'images/small.png' %}"/>
<link rel="stylesheet" href="{% static 'css/lightbox.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/responsive.css' %}" type="text/css" />
<!-- more css files -->
</head>
<body>
{% block pagecontent %}
{% endblock %}
</body>
<script type="text/javascript" src="{% static 'js/asset/jquery-2.1.3.min.js' %}"></script>
<script src="static 'custom.js' %}"></script>
<!-- more js files -->
</html>
answered 52 mins ago
Anoop Kumar
14713
Screenshots aren't any more useful in answers than they are in questions. Post code here as text.
– Daniel Roseman
39 mins ago
add a comment |
up vote
0
down vote
up vote
0
down vote
Make a folder as templates under root directory of your project and add below line in settings.py file to define the template path.
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')], #mainly this line
'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',
],
},
},
]
and
STATIC_URL = '/static/'
STATIC = os.path.join(BASE_DIR, 'static')
After it make base.html file and enter all the js and css file over here. That will reflect to all the project.
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0" />
<title>Test </title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="description" content="Test">
<link rel="shortcut icon" type="image/png" href="{% static 'images/small.png' %}"/>
<link rel="stylesheet" href="{% static 'css/lightbox.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/responsive.css' %}" type="text/css" />
<!-- more css files -->
</head>
<body>
{% block pagecontent %}
{% endblock %}
</body>
<script type="text/javascript" src="{% static 'js/asset/jquery-2.1.3.min.js' %}"></script>
<script src="static 'custom.js' %}"></script>
<!-- more js files -->
</html>
answered 52 mins ago
Anoop Kumar
14713
Make a folder as templates under root directory of your project and add below line in settings.py file to define the template path.
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')], #mainly this line
'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',
],
},
},
]
and
STATIC_URL = '/static/'
STATIC = os.path.join(BASE_DIR, 'static')
After it make base.html file and enter all the js and css file over here. That will reflect to all the project.
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0" />
<title>Test </title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="description" content="Test">
<link rel="shortcut icon" type="image/png" href="{% static 'images/small.png' %}"/>
<link rel="stylesheet" href="{% static 'css/lightbox.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/responsive.css' %}" type="text/css" />
<!-- more css files -->
</head>
<body>
{% block pagecontent %}
{% endblock %}
</body>
<script type="text/javascript" src="{% static 'js/asset/jquery-2.1.3.min.js' %}"></script>
<script src="static 'custom.js' %}"></script>
<!-- more js files -->
</html>
answered 52 mins ago
Anoop Kumar
14713
edited 29 mins ago
answered 52 mins ago
Anoop Kumar
14713
answered 52 mins ago
Anoop Kumar
14713
answered 52 mins ago
Anoop Kumar
14713
14713
Screenshots aren't any more useful in answers than they are in questions. Post code here as text.
– Daniel Roseman
39 mins ago
add a comment |
Screenshots aren't any more useful in answers than they are in questions. Post code here as text.
– Daniel Roseman
39 mins ago
Screenshots aren't any more useful in answers than they are in questions. Post code here as text.
– Daniel Roseman
39 mins ago
Screenshots aren't any more useful in answers than they are in questions. Post code here as text.
– Daniel Roseman
39 mins ago
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53371577%2fdjango-include-template-along-with-its-css%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
One way is to make reusable class and id. It will take time first but can be helpful afterwards. Make similar kind of class for both header and footer. Add the common css file to static folder and import into base html. For body add extend tag.
– Bidhan Majhi
24 mins ago