After I added a lots of thing to my blog I wanted to add a template but to do that it seemed like I need to override. So I created a new app that is exact replica of the first one. in the new one I would add the template and then copy and paste a bunch of code into the new one. But When I did that I was caught in an error. which was really hard to fix. After I imported the template I added a static bar/code to everything that has images, js, videos and others. But still there was no change. I hope someone can help me. If anything else is needed please do ask. I am really sorry for pasting the entire code. If I edit the code I might miss something important. There is a million difference between how it should look and not. but I cant seem to work it out.
Here's how mine should looks:
https://www.free-css.com/assets/files/free-css-templates/preview/page252/scenic/
views.py:
from django.shortcuts import render
def home(request):
return render(request,'home.html',{})
Code:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Scenic HTML Template</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="{% static 'myblog/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'myblog/css/font-awesome.min.css/' %}">
<link rel="stylesheet" href="{% static 'myblog/css/magnific-popup.css' %}">
<link rel="stylesheet" href="{% static 'myblog/css/owl.theme.css' %}">
<link rel="stylesheet" href="{% static 'myblog/css/owl.carousel.css' %}">
<!-- MAIN CSS -->
<link rel="stylesheet" href="{% static 'myblog/css/tooplate-style.css' %}">
</head>
<body>
<!-- PRE LOADER -->
<div class="preloader">
<div class="spinner">
<span class="sk-inner-circle"></span>
</div>
</div>
<!-- MENU -->
<div class="navbar custom-navbar navbar-fixed-top" role="navigation">
<div class="container">
<!-- NAVBAR HEADER -->
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
</button>
<!-- lOGO -->
<a href="home.html" class="navbar-brand">Scenic</a>
</div>
<!-- MENU LINKS -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#home" class="smoothScroll">Home</a></li>
<li><a href="#about" class="smoothScroll">Studio</a></li>
<li><a href="#team" class="smoothScroll">Our People</a></li>
<li><a href="#contact" class="smoothScroll">Let's talk</a></li>
</ul>
</div>
</div>
</div>
<!-- HOME -->
<section id="home" class="parallax-section">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-12">
<div class="home-text">
<h1>Your Website has a video background!</h1>
<p>Feel free to download and use HTML templates from Tooplate</p>
<ul class="section-btn">
<a href="#about" class="smoothScroll"><span data-hover="Discover More">Discover More</span></a>
</ul>
</div>
</div>
</div>
</div>
<!-- Video -->
<video controls autoplay loop muted>
<source src="{% static 'myblog/videos/video.mp4' %}" type="video/mp4">
Your browser does not support the video tag.
</video>
</section>
<!-- ABOUT -->
<section id="about" class="parallax-section">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-10 col-sm-12">
<div class="about-info">
<h3>Introducing Scenic</h3>
<h1>This template is designed for you. Sed ornare, tortor nec placerat lacinia, leo quam rutrum leo, eget posuere ipsum sem eu justo. Integer nunc libero.</h1>
</div>
</div>
</div>
</div>
</section>
<!-- PROJECT -->
<section id="project" class="parallax-section">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
<!-- PROJECT ITEM -->
<div class="project-item">
<a href="{% static 'myblog/images/project-image1.jpg' %}" class="image-popup">
<img src="{% static 'myblog/images/project-image1.jpg' %}" class="img-responsive" alt="">
<div class="project-overlay">
<div class="project-info">
<h1>Beautiful Women</h1>
<h3>Click to pop up!</h3>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-6 col-sm-6">
<!-- PROJECT ITEM -->
<div class="project-item">
<a href="{% static 'myblog/images/project-image2.jpg' %}" class="image-popup">
<img src="{% static 'myblog/images/project-image2.jpg' %}" class="img-responsive" alt="">
<div class="project-overlay">
<div class="project-info">
<h1>Nulla efficitur quam</h1>
<h3>Sed ligula accumsan</h3>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-6 col-sm-6">
<!-- PROJECT ITEM -->
<div class="project-item">
<a href="{% static 'myblog/images/project-image3.jpg' %}" class="image-popup">
<img src="{% static 'myblog/images/project-image3.jpg' %}" class="img-responsive" alt="">
<div class="project-overlay">
<div class="project-info">
<h1>Large Sea Wave</h1>
<h3>Nam feugiat dui in nisi</h3>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-6 col-sm-6">
<!-- PROJECT ITEM -->
<div class="project-item">
<a href="{% static 'myblog/images/project-image4.jpg' %}" class="image-popup">
<img src="{% static 'myblog/images/project-image4.jpg' %}" class="img-responsive" alt="">
<div class="project-overlay">
<div class="project-info">
<h1>Lorem ipsum dolor</h1>
<h3>Mollis aliquam faucibus urna</h3>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- TEAM -->
<section id="team" class="parallax-section">
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8 col-sm-12">
<!-- SECTION TITLE -->
<div class="section-title">
<h1>Meet Our People</h1>
</div>
</div>
<div class="clearfix"></div>
<div id="owl-team" class="owl-carousel">
<div class="col-md-4 col-sm-4 item">
<div class="team-item">
<img src="{% static 'myblog/images/team-image1.jpg' %}" class="img-responsive" alt="">
<div class="team-overlay">
<ul class="social-icon">
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-linkedin"></a></li>
</ul>
</div>
</div>
<p>Catherine Jann</p>
<h3>Head Designer</h3>
</div>
<div class="col-md-4 col-sm-4 item">
<div class="team-item">
<img src="{% static 'myblog/images/team-image2.jpg' %}" class="img-responsive" alt="">
<div class="team-overlay">
<ul class="social-icon">
<li><a href="#" class="fa fa-instagram"></a></li>
<li><a href="#" class="fa fa-github"></a></li>
<li><a href="#" class="fa fa-facebook"></a></li>
</ul>
</div>
</div>
<p>Luke Wara</p>
<h3>Speciality Focus</h3>
</div>
<div class="col-md-4 col-sm-4 item">
<div class="team-item">
<img src="{% static 'myblog/images/team-image3.jpg' %}" class="img-responsive" alt="">
<div class="team-overlay">
<ul class="social-icon">
<li><a href="#" class="fa fa-instagram"></a></li>
<li><a href="#" class="fa fa-dribbble"></a></li>
<li><a href="#" class="fa fa-behance"></a></li>
</ul>
</div>
</div>
<p>Mono Mana</p>
<h3>Art director</h3>
</div>
<div class="col-md-4 col-sm-4 item">
<div class="team-item">
<img src="{% static 'myblog/images/team-image1.jpg' %}" class="img-responsive" alt="">
<div class="team-overlay">
<ul class="social-icon">
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-linkedin"></a></li>
</ul>
</div>
</div>
<p>Cherry Lynn</p>
<h3>Marketing Manager</h3>
</div>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="container">
<div class="row">
<div class="col-md-5 col-sm-6">
<h2>Digital Studio</h2>
<p>321 Donec et justo id risus, Malesuada pharetra,<br> Tristique vestibulum,<br> Lorem ipsum dolor</p>
</div>
<div class="col-md-3 col-sm-12">
<h2>About Us</h2>
<p>Sed vestibulum posuere ante, eget blandit metus. Morbi sodales feugiat erat, et placerat sapien suscipit ut.</p>
<ul class="social-icon">
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-facebook"></a></li>
<li><a href="#" class="fa fa-instagram"></a></li>
<li><a href="#" class="fa fa-linkedin"></a></li>
</ul>
</div>
<div class="clearfix"></div>
<div class="col-md-12 col-sm-12">
<div class="copyright-text">
<p>Copyright © 2018 Company Name
| Design: Tooplate</p>
</div>
</div>
</div>
</div>
</footer>
<!-- SCRIPTS -->
<script src="{% static 'myblog/js/jquery.js' %}"></script>
<script src="{% static 'myblog/js/bootstrap.min.js' %}"></script>
<script src="{% static 'myblog/js/jquery.parallax.js' %}"></script>
<script src="{% static 'myblog/js/owl.carousel.min.js' %}"></script>
<script src="{% static 'myblog/js/jquery.magnific-popup.min.js' %}"></script>
<script src="{% static 'myblog/js/magnific-popup-options.js' %}"></script>
<script src="{% static 'myblog/js/modernizr.custom.js' %}"></script>
<script src="{% static 'myblog/js/smoothscroll.js' %}"></script>
<script src="{% static 'myblog/js/custom.js' %}"></script>
</body>
</html>
settings.py:
from pathlib import Path
import os
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'myblog',
]
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
[1]: https://i.stack.imgur.com/7UNSE.png [1]:
[1]: https://i.stack.imgur.com/olYzg.png [1]:
[1]: https://i.stack.imgur.com/z5vFL.png [1]: