I'm making a blog with jekyll that uses an index.html page with links to blog posts, as you see below in the first code sample. The default layout referred to in the front matter is a typical layout file with css styling by Twitter bootstrap included. However, when I click a link to a blog post in index.html, the blogpost is displaying (i.e. the url changes, the blog post content is displayed), however, the front-matter from the blogpost is being ignored, or at least it's appearing that way since none of the css styling is working on the blog post. For example, the css for the Twitter bootstrap navigation bar only shows on the home page, not the blog post.
Can you explain why this might be happening?
index.html
---
layout: default
---
{% for post in paginator.posts %}
<div class="row-fluid">
<!-- <div class="span12"> -->
<h2>{{ post.title }}</h2>
<h4>{{ post.date | date_to_long_string }}</h4>
<p>
Read Post
</p>
<!-- </div> -->
</div>
{% endfor %}
2013-10-15-lorem-ipsum-blog-post
---
title: Lorem Ipsum Dolor Sit Amet
layout: default
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse elemen\
tum leo non felis porttitor vulputate. Nulla ipsum quam, auctor ut hendreri\
t quis, tincidunt eu metus. Quisque ipsum tellus, semper a tempus quis, int\
erdum vel magna. Cras a nisl diam, in accumsan augue. Pellentesque varius n\
ibh eu diam tempor rhoncus.
_layouts/default.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ site.name }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="{{ site.description }}">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<script src="js/respond.min.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".na\
v-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">{{ site.name }}</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li class="active">About</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row-fluid">
<div class="col-lg-9 col-sm-8">
{{ content }}
</div>
<div class="col-lg-3 col-sm-4">
{% include sidebar.html %}
</div>
</div>
</div> <!-- container -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Since your layout file is just a relative file, I would suggest you add the paths of your CSS and javascript from the root. For example
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<script src="js/respond.min.js"></script>
should become
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/custom.css" rel="stylesheet">
<script src="/js/respond.min.js"></script>
Related
I am trying to make two columns with bootstrap - text on the right, and a photo on the left. I want the photo to fill up the entire white screen of the left side, but at 100% width that is how much the image automatically fills. How do I change this?
I am relatively new to HTML+CSS, and this is an assignment so any tips would be helpful.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href="css/style.css" rel="stylesheet">
<link rel="icon" type="image/png" sizes="16x16" href="img\favicon.ico">
<title>Headspace</title>
</head>
<body>
<div id="barAtTop"></div>
<div class="site_title">
<h1>HEADSPACE</h1>
</div>
<div class="motto" style="font-size:1vw;">
<i>"To empower young people to have the confidence and skills to gain meaningful employment."</i>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar" onclick="openDropDown()">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a>Home</a></li>
<li>About us</li>
<li>Contact us</li>
<li>Meet the Team</li>
<li>Join Now</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-6" id="main-page-image">
<img src="img\teenager.jpg" style="max-width:100%;height:auto;">
</div>
<div class="col-sm-6" id="about-headspace">
<h1>ABOUT HEADSPACE</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis vel tortor eu ultrices. Suspendisse id luctus lorem. Donec sed fringilla odio. Morbi tristique luctus euismod. Morbi et lectus sed tortor pulvinar pulvinar cursus id turpis. Vestibulum
eu elit erat.
</p>
</div>
</div>
</div>
</body>
</html>
Your image can't outgrow the parent element it is inside of. So, when you put your image inside of a "col-sm-6", that limits its size to the size of its parent container. The solution would be to put the image inside of a larger parent element.
If I understood the question correct the image is not filling in the col-sm-6 element?
Try changing max-width to width. Example:
<img src="img\teenager.jpg" style="width:100%;height:auto;">
Use a custom row class and style it flexed and stretched to get the column to fill. Then we can simply add object-fit for the image itself.
.card-container {
display: flex;
align-items: stretch;
justify-content: center;
}
#main-page-image {
overflow:hidden;
}
#main-page-image img {
height: 100%;
width: 100%;
object-fit: cover;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row card-container">
<div class="col-xs-6" id="main-page-image">
<img src="http://via.placeholder.com/640x360">
</div>
<div class="col-xs-6" id="about-headspace">
<h1>ABOUT HEADSPACE</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis vel tortor eu ultrices. Suspendisse id luctus lorem. Donec sed fringilla odio. Morbi tristique luctus euismod. Morbi et lectus sed tortor pulvinar pulvinar cursus id turpis. Vestibulum
eu elit erat.
</p>
</div>
</div>
</div>
I am very new to Flask and I have read related questions but I still don't understand how to fix this problem so any help would be greatly appreciated. Please don't duplicate this question.
I have the following file:
index.html
{% extends "bootstrap/base.html" %}
{% block styles %}
<!-- Bootstrap core CSS -->
<link href="/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="/static/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Custom styles for this template -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="/static/css/agency.css">
<link rel="stylesheet" type="text/css" href="/static/css/agency.min.css">
{% endblock %}
{% block navbar %}
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">RFJI Protein Database</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav text-uppercase ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="{{ url_for('upload')}}">Upload File</a>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#">Protein Database</a>
</li>
</li>
</li>
</li>
<div class="wrap">
<div class="search">
<div class="col-lg-11 text-center">
<input type="text" class="searchTerm" placeholder="What are you looking for?">
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</ul>
{% endblock %}
{% block content %}
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
</div>
</div>
</nav>
<header class="masthead">
<div class="container">
<div class="intro-text">
<div class="intro-lead-in">Welcome to the RFJI Protein Database!</div>
<div class="intro-heading text-uppercase">It's Nice To Meet You</div>
<style>
font-family: Arial;
</style>
{% endblock %}
{% block body %}
<!-- Services -->
<section id="services">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-uppercase">Features</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<img src="/static/img/kinase.png" alt="Girl in a onci" style="width:80px;height:90px;">
</span>
<h4 class="service-heading">Search Kinases</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>
<div class="col-md-4">
<img src="/static/img/inhibitor.png" alt="Girl in a onci" style="width:80px;height:90px;">
</span>
<h4 class="service-heading">Search Kinase Inhibitors</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>
<div class="col-md-4">
<img src="/static/img/upload.png" alt="Girl in a onci" style="width:80px;height:90px;">
</span>
<h4 class="service-heading">Import your own dataset</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>
</div>
</div>
</section>
{% endblock %}
The problem is that the Jinja2 engine only displays the Services section but ignores everything else. How can I fix this please?. I have added a image on how I want the website to look like it.
How I want the website to look like
Many Thanks,
Moshi
At a glance, the whole template is a mess.
This should be deleted completely, as it doesn't belong in the middle of the template:
<style>
font-family: Arial;
</style>
There are multiple <body> tags. In the correct syntax there should be only 1 <body> tag, which should probably be part of the base.html template. Towards the end of this file, the corresponding </body> tag should also be present.
Some of the <div> tags are not closed properly.
You really need to go back and rearrange this tempate so that each Jinja2 {% block something %} {% endblock %} section contains a complete set of tags (for example a full bootstrap div container block which is closed properly before the endblock statement.
Template inheritance is described fully in the Jinja2 docs. I assume you've cut and pasted sections of this template from somewhere else which isn't a problem provided you make sure that important components of the source bootstrap template aren't split up in the wrong places.
So I'm doing a footer with bootstrap, it looks great but when I put in this resolution (image below), a blank space showed it up.
Boostrap Footer:
This is what I made:
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<h6>Copyright © 2018</h6>
</div>
<div class="col-sm-6">
<h6>About us</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget sapien dolor. Nam aliquam augue ante, et sodales felis vulputate iaculis.</p>
</div>
</div>
</div>
</footer>
footer{
background: #333;
color: #eee;
font-size: 11px;
padding: 20px;
}
How can I fix that?
With nikhil's approach this is happening
attemp
I am not sure if that's what you want but you can just add style="min-height:100vh" to your page content container and place footer in another container.
This way your footer will always be at the bottom of your page.
Position fixed removes element from the normal flow of the content. Therefore, you need to use bottom: 0; to position the footer at the very bottom.
.postion-b-0 {
bottom: 0;
}
Most of your css code is unnecessary. You need to use only the property above.
.postion-b-0 {
bottom: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<footer class="position-fixed container-fluid bg-dark text-white py-5 postion-b-0">
<div class="row">
<div class="col-6 ">
<h6>Copyright © 2018</h6>
</div>
<div class="col-6">
<h6>About us</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget sapien dolor. Nam aliquam augue ante, et sodales felis vulputate iaculis.</p>
</div>
</div>
</footer>
The columns takes half of the rows in the code above. But if you want full width column on mobile, use the code below.
.postion-b-0 {
bottom: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<footer class="position-fixed container-fluid bg-dark text-white py-5 postion-b-0">
<div class="row">
<div class="col-12 col-sm-6 ">
<h6>Copyright © 2018</h6>
</div>
<div class="col-12 col-sm-6">
<h6>About us</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget sapien dolor. Nam aliquam augue ante, et sodales felis vulputate iaculis.</p>
</div>
</div>
</footer>
this will work:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
}
</style>
</head>
<body>
<div class="footer">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-xs-6 col-md-6 col-lg-6">
<h6>Copyright © 2018</h6>
</div>
<div class="col-sm-6 col-xs-6 col-md-6 col-lg-6">
<h6>About us</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget sapien dolor. Nam aliquam augue
ante, et sodales felis vulputate iaculis.</p>
</div>
</div>
</div>
</div>
</body>
</html>
fiddle:https://jsfiddle.net/rq3eab2v/2/
if you are using bootstrap 4 use col-* instead of col-xs-* ok
I started an online udemy course today and it is using bootstrap templates for their tutorials. but i have a problem because when i reload the site no CSS has been applied (ps the course is very old and I doubt anyone will be able to help me as quick as you guys)
Any help would be greatly appreciated.
This is my folder setup:
This is what is in my CSS folder:
This is the code i have:
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Jumbotron Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="first-site/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="jumbotron.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[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]-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
</div>
<hr>
<footer>
<p>© 2016 Company, Inc.</p>
</footer>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
If your folder structure is like this:
folder-name >
1)css folder
2) js folder
3)images folder
......
5)index.html
then in your link tag , use like wise
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.js"></script
<script src="js/bootstrap.js"></script>
All the <link> and <script> tags in your <head> refer to folders and elements that you don't seem to have in your project.
as of your file structure bootstrap css href is wrong.
correct: <link href="css/bootstrap.min.css" rel="stylesheet">
Use proper file location. try this............
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="image/favicon.ico">
<title>Jumbotron Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/jumbotron.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[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]-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
</div>
<hr>
<footer>
<p>© 2016 Company, Inc.</p>
</footer>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
This link tag is giving an incorrect path
<!-- Bootstrap core CSS -->
<link href="first-site/css/bootstrap.min.css" rel="stylesheet">
You must specify paths relative to index.html.
Replace it by :
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
I can't really be sure how your structure looks, instead of trying to guess it i will suggest you to use a CDN version of Bootstrap
so could you replace this
<link href="first-site/css/bootstrap.min.css" rel="stylesheet">
by this
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
and this
<script src="../../dist/js/bootstrap.min.js"></script>
by this
<script async="async" type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Look!
Your index.html file is trying to access some CSS and JS files.
ok .. here is the basic structure of your directory:
Your index.html which lies in first-site needs to access bootstrap.min.css which is located in css folder.
so you need to change your this line:
<link href="first-site/css/bootstrap.min.css" rel="stylesheet">
with this one:
<link href="css/bootstrap.min.css" rel="stylesheet">
and similarly you need to change all of your <link> lines according to your directory structure just as in above example.
Hope it explained.
I recently purchased a responsive website template and I am pretty confused as to how my blog posts would automatically show blog post snippets(intro) on my blog timeline and homepage. I am using Umbraco cms (6.1.5) and this is my blog post html code:
<!DOCTYPE html>
<!--[if IE 8 ]><html lang="en" class="isie ie8 oldie no-js"><![endif]-->
<!--[if IE 9 ]><html lang="en" class="isie ie9 no-js"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<head>
<!-- Meta Tags -->
<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="<umbraco:Item field="postMetaDescription" runat="server" />">
<!-- Title -->
<title><umbraco:Item field="postTitle" runat="server" /></title>
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.jpg" type="image/x-icon"/>
<!-- Google Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,400italic,700' rel='stylesheet' type='text/css'>
<!-- Stylesheets -->
<link rel='stylesheet' id='twitter-bootstrap-css' href='css/bootstrap.min.css' type='text/css' media='all'/>
<link rel='stylesheet' id='fontello-css' href='css/fontello.css' type='text/css' media='all'/>
<link rel='stylesheet' id='prettyphoto-css-css' href='js/prettyphoto/css/prettyPhoto.css' type='text/css' media='all'/>
<link rel='stylesheet' id='animation-css' href='css/animation.css' type='text/css' media='all'/>
<link rel='stylesheet' id='perfectscrollbar-css' href='css/perfect-scrollbar-0.4.10.min.css' type='text/css' media='all'/>
<link rel='stylesheet' id='jquery-validity-css' href='css/jquery.validity.css' type='text/css' media='all'/>
<link rel='stylesheet' id='jquery-ui-css' href='css/jquery-ui.min.css' type='text/css' media='all'/>
<link rel='stylesheet' id='style-css' href='css/style.css' type='text/css' media='all'/>
<link rel='stylesheet' id='mobilenav-css' href='css/mobilenav.css' type='text/css' media="screen and (max-width: 838px)"/>
<!-- jQuery -->
<script src="scripts/jquery-1.11.1.min.js"></script>
<!--[if lt IE 9]>
<script>
document.createElement("header");
document.createElement("nav");
document.createElement("section");
document.createElement("article");
document.createElement("aside");
document.createElement("footer");
document.createElement("hgroup");
</script>
<![endif]-->
<!--[if lt IE 9]>
<script src="scripts/html5.js"></script>
<![endif]-->
<!--[if lt IE 7]>
<script src="scripts/icomoon.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<link href="css/ie.css" rel="stylesheet">
<![endif]-->
<!--[if lt IE 9]>
<script src="scripts/jquery.placeholder.js"></script>
<script src="scripts/script_ie.js"></script>
<![endif]-->
</head>
<body class="w1170 headerstyle1">
<!-- Marine Content Wrapper -->
<body class="w1170 headerstyle1">
<!-- Marine Content Wrapper -->
<div id="marine-content-wrapper">
<header id="header" class="style6">
<div id="upper-header">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="item left hidden-separator">
<ul id="menu-shop-header" class="menu">
</ul>
</div>
<div class="item right hidden-separator">
<div class="shopping-cart-dropdown">
<div class="cart-menu-item ">
<div class="sc-header">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Main Header -->
<div id="main-header">
<div class="container">
<div class="row">
<!-- Logo -->
<div class="col-lg-4 col-md-4 col-sm-4 logo">
<img class="logo" src="img/marine-logo.png" alt="Marine">
<div id="main-nav-button">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="col-sm-8 align-right">
<!-- Text List -->
<ul class="text-list">
<li>Call Us: +1 800 450 17 08</li>
</ul>
<!-- Social Media -->
<ul class="social-media">
<li><a target="_blank" href="http://facebook.com"><i class="icon-facebook"></i></a>
</li>
<li><a target="_blank" href="http://twiiter.com/google"><i class="icon-twitter"></i></a>
</li>
<li><a target="_blank" href="http://google.com"><i class="icon-google"></i></a>
</li>
<li><a target="_blank" href="http://linkedin.com"><i class="icon-linkedin"></i></a>
</li>
<li><a target="_blank" href="http://instagram.com"><i class="icon-instagram"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /Main Header -->
<!-- Lower Header -->
<div id="lower-header">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="lower-logo">
<img class="logo" src="img/marine-logo.png" alt="Marine">
</div>
<!-- Main Navigation -->
<ul id="main-nav">
<ul class='mainMenu'>
<li><a href='http://www.redflyseo.co.za' title='Home'>HOME</a></li>
 | 
<li><a href='http://www.redflyseo.co.za/seo' title='SEO'>SEO</a></li>
 | 
<li><a href='http://www.redflyseo.co.za/social-media' title='SOCIAL MEDIA'>SOCIAL MEDIA</a></li>
 | 
<li><a href='http://www.redflyseo.co.za/content-marketing' title='CONTENT MARKETING'>CONTENT MARKETING</a></li>
 | 
<li><a href='http://www.redflyseo.co.za/digital-audits' title='DIGITAL AUDITS'>DIGITAL AUDITS</a></li>
 | 
<li><a href='http://www.redflyseo.co.za/sme-business-package' title='SME BUSINESS PACKAGE'>SME BUSINESS PACKAGE</a></li>
 | 
<li><a href='http://www.redflyseo.co.za/blog' title='BLOG'>BLOG</a></li>
 | 
<li><a href='http://www.redflyseo.co.za/contact-us' title='Contact Us'>CONTACT US</a></li>
</ul>
<!-- /Main Navigation -->
</div>
</div>
</div>
<!-- /Lower Header -->
<script type="text/javascript">
//<![CDATA[
(function() {
var shr = document.createElement('script');
shr.setAttribute('data-cfasync', 'false');
shr.src = '//dsms0mj1bbhn4.cloudfront.net/assets/pub/shareaholic.js';
shr.type = 'text/javascript'; shr.async = 'true';
shr.onload = shr.onreadystatechange = function() {
var rs = this.readyState;
if (rs && rs != 'complete' && rs != 'loaded') return;
var site_id = '4703ccf47ac9b99588c7a6fb9d1b4ce2';
try { Shareaholic.init(site_id); } catch (e) {}
};
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(shr, s);
})();
//]]>
</script>
</header>
<!-- /Header -->
<!-- Marine Content Inner -->
<div id="marine-content-inner">
<!-- Main Content -->
<section id="main-content">
<!-- Container -->
<div class="container">
<!-- Container -->
<div class="container">
<div class="page-heading style3 wrapper border-bottom ">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<h1><umbraco:Item field="blogPostTitle" runat="server" /></h1>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<p class="breadcrumbs" xmlns:v=""><span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" href="http://www.redflyseo.co.za">Home</a></span><span class="delimiter">|</span> <span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" href="#">Blog</a></span><span class="delimiter">|</span> <span class="current"><umbraco:Item field="pageName" runat="server" /></span></p>
</div>
</div>
</div>
<div class="row">
<section class="main-content col-lg-9 col-md-8 col-sm-8 small-padding">
<div class="row">
<div id="post-items">
<!-- Post Item -->
<div class="post blog-post blog-post-classic col-lg-12 col-md-12 col-sm-12 margin-top20">
<div class="blog-post-list">
<div class="blog-post-meta">
<span class="post-date">
<span class="post-day"><umbraco:Item field="day" runat="server" /></span><br/>
<umbraco:Item field="monthYear" runat="server" /> </span>
<span class="post-format">
<span class="photo-icon"></span>
</span>
<img alt='' src='<umbraco:Item field="authorPhoto" runat="server" />' class='avatar'/>
<span class="author"><umbraco:Item field="writerName" runat="server" /></span>
</div>
<div class="blog-post-content">
<!-- Post Image -->
<div class="post-thumbnail">
<img src="<umbraco:Item field="blogPhoto" runat="server" />" alt=""/>
<div class="post-hover">
</div>
</div>
<!-- /Post Image -->
<!-- Post Content -->
<div class="post-content">
<ul class="post-meta">
<li>no comments</li>
</ul>
<ul class="social-icons style2 social-media">
<li><a target="_blank" href="#">
<i class="icon-facebook-squared"></i>
</a>
</li>
<li>
<a target="_blank" href="#">
<i class="icon-twitter"></i>
</a>
</li>
<li>
<a href="#">
<i class="icon-google"></i>
</a>
</li>
<li>
<a target="_blank" href="#" >
<i class="icon-pinterest"></i>
</a>
</li>
<li>
<a href="#">
<i class="icon-linkedin"></i>
</a>
</li>
</ul>
<p><umbraco:Item field="content" runat="server" /></p>
</div>
<!-- /Post Content -->
</div>
</div>
<div class="post-author margin-bottom35">
<img alt="" src="img/avatar.png" class="avatar">
<h3>About Jack</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium adipisci architecto aspernatur consequuntur debitis distinctio dolorem, doloremque eius error eum eveniet facere harum impedit incidunt labore magnam modi necessitatibus non optio perspiciatis quas saepe similique tempore temporibus totam unde velit! Animi architecto culpa dolor expedita id illum impedit praesentium quae? Alias amet, exercitationem iure natus obcaecati ratione! Accusantium assumenda, dignissimos eveniet incidunt nesciunt perspiciatis similique. Alias aperiam architecto, autem ea error harum modi nemo nobis obcaecati quas. Accusamus atque aut consequatur consequuntur cumque debitis dolorem esse incidunt iure odio, odit, quia, repellendus saepe. Deserunt id libero magnam sunt voluptatum?</p>
</div>
</div>
<!-- /Post Item -->
</div>
</div><div class="row">
<div class="col-sm-12">
<div id="comments" class="post-comments">
<div id="respond" class="comment-respond">
</form>
</div><!-- #respond -->
</div><!-- #comments -->
</div>
</div>
</section>
<aside class="sidebar col-lg-3 col-md-4 col-sm-4">
<div id="twitter-rss-2" class="widget Twitter_Counter_media">
<div class="social">
<div class="social-item">
<a href="google">
<img alt="" src="img/twitter.png">
<span><span class="bold">9401354</span><br>
Followers</span>
</a>
</div>
<div class="social-item">
<a href="#">
<img alt="" src="img/rss.png">
<span><span class="bold">Subscribe</span><br>
to RSS Feed</span>
</a>
</div>
</div>
</div>
<div id="call-to-action-widget-2" class="widget widget_call_to_action">
<h3></h3>
<div class="info-box">
<h2><umbraco:Item field="callTitle" runat="server" /></h2>
<h4><umbraco:Item field="ndHeader" runat="server" /></h4>
<umbraco:Item field="buttonText" runat="server" />
</div>
</div>
</aside>
</div>
</div>
<!-- /Container -->
</section>
<!-- /Main Content -->
</div>
<!-- /Marine Conten Inner -->
<!-- Footer -->
<footer id="footer">
<!-- Main Footer -->
<div id="main-footer" class="smallest-padding">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3">
<div id="text-2" class="widget widget_text">
<div class="textwidget">
<img src="img/marine-logo-light.png" alt="logo">
<p>
Vivamus orci sem, consectetur ut vestibulum a, mper ac dui. Aenean tellus nisl, commodo eu aliquet ut, pulvinar ut sapien. Proin tate aliquam mi nec hendrerit.
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div id="latest-posts-3" class="widget widget_latest_posts_entries">
<h4>Latest Posts</h4>
<div class="blog-post">
<span class="post-meta">June 11, 2014 | Jack</span>
<a class="post-title" title="Single Blog Post" href="#">Single Blog Post</a>
<p>
Suspendisse ornare tincidunt massa et malesuada. Integer consequat suscipit velit
</p>
</div>
<div class="blog-post">
<span class="post-meta">June 8, 2014 | Jack</span>
<a class="post-title" title="A Simple Text Post" href="#">A Simple Text Post</a>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed eleifend
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div id="text-4" class="widget widget_text">
<h4>Contact</h4>
<div class="textwidget">
<ul class="iconic-list">
<li>
<i class="icons icon-location-7"></i>
Phoenix Inc.<br>
PO Box 21177 <br>
Little Lonsdale St, Melbourne <br>
Victoria 8011 Australia </li>
<li>
<i class="icons icon-mobile-6"></i>
Phone: (415) 124-5678 <br>
Fax: (415) 124-5678 </li>
<li>
<i class="icons icon-mail-7"></i>
support#yourname.com </li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div id="wysija-3" class="widget widget_wysija">
</div>
</div>
<div id="social-media-2" class="widget widget_social_media">
<h4>Follow Us</h4>
<ul class="social-media">
<li class="tooltip-ontop" title="Facebook"><i class="icon-facebook"></i></li>
<li class="tooltip-ontop" title="Twitter"><i class="icon-twitter"></i></li>
<li class="tooltip-ontop" title="Google Plus"><i class="icon-google"></i></li>
<li class="tooltip-ontop" title="Linkedin"><i class="icon-linkedin"></i></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- /Main Footer -->
<!-- Lower Footer -->
<div id="lower-footer">
<div class="container">
<span class="copyright">© 2014 Marine. All Rights Reserved</span>
</div>
</div>
<!-- /Lower Footer -->
</footer>
<!-- /Footer -->
</div>
<!-- /Marine Content Wrapper -->
<!-- JavaScript -->
<script type='text/javascript' src='scripts/bootstrap.min.js'></script>
<script type='text/javascript' src='scripts/jquery-ui.min.js'></script>
<script type='text/javascript' src='scripts/jquery.easing.1.3.js'></script>
<script type='text/javascript' src='scripts/jquery.mousewheel.min.js'></script>
<script type='text/javascript' src='scripts/SmoothScroll.min.js'></script>
<script type='text/javascript' src='scripts/jquery.prettyPhoto.js'></script>
<script type='text/javascript' src='scripts/modernizr.js'></script>
<script type='text/javascript' src='scripts/wow.min.js'></script>
<script type='text/javascript' src='scripts/jquery.sharre.min.js'></script>
<script type='text/javascript' src='scripts/jquery.flexslider-min.js'></script>
<script type='text/javascript' src='scripts/jquery.knob.js'></script>
<script type='text/javascript' src='scripts/jquery.mixitup.min.js'></script>
<script type='text/javascript' src='scripts/masonry.min.js?ver=3.1.2'></script>
<script type='text/javascript' src='scripts/jquery.masonry.min.js?ver=3.1.2'></script>
<script type='text/javascript' src='scripts/jquery.fitvids.js'></script>
<script type='text/javascript' src='scripts/perfect-scrollbar-0.4.10.with-mousewheel.min.js'></script>
<script type='text/javascript' src='scripts/jquery.nouislider.min.js'></script>
<script type='text/javascript' src='scripts/jquery.validity.min.js'></script>
<script type='text/javascript' src='scripts/tweetie.min.js'></script>
<script type='text/javascript' src='scripts/script.js'></script>
</body>
</html>
and this is my blog post timeline code:
<!DOCTYPE html>
<!--[if IE 8 ]><html lang="en" class="isie ie8 oldie no-js"><![endif]-->
<!--[if IE 9 ]><html lang="en" class="isie ie9 no-js"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<head>
<!-- Meta Tags -->
<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="Marine Main 1">
<!-- Title -->
<title>Blog Timeline Style | Marine</title>
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.jpg" type="image/x-icon"/>
<!-- Google Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,800' rel='stylesheet' type='text/css'>
<!-- Stylesheets -->
<link rel='stylesheet' id='twitter-bootstrap-css' href='css/bootstrap.min.css' type='text/css' media='all'/>
<link rel='stylesheet' id='fontello-css' href='css/fontello.css' type='text/css' media='all'/>
<link rel='stylesheet' id='prettyphoto-css-css' href='css/prettyPhoto.css' type='text/css' media='all'/>
<link rel='stylesheet' id='animation-css' href='css/animation.css' type='text/css' media='all'/>
<link rel='stylesheet' id='perfectscrollbar-css' href='css/perfect-scrollbar-0.4.10.min.css' type='text/css' media='all'/>
<link rel='stylesheet' id='jquery-validity-css' href='css/jquery.validity.css' type='text/css' media='all'/>
<link rel='stylesheet' id='jquery-ui-css' href='css/jquery-ui.min.css' type='text/css' media='all'/>
<link rel='stylesheet' id='style-css' href='css/style.css' type='text/css' media='all'/>
<link rel='stylesheet' id='mobilenav-css' href='css/mobilenav.css' type='text/css' media="screen and (max-width: 838px)"/>
<!-- jQuery -->
<script src="scripts/jquery-1.11.1.min.js"></script>
<!--[if lt IE 9]>
<script>
document.createElement("header");
document.createElement("nav");
document.createElement("section");
document.createElement("article");
document.createElement("aside");
document.createElement("footer");
document.createElement("hgroup");
</script>
<![endif]-->
<!--[if lt IE 9]>
<script src="scripts/html5.js"></script>
<![endif]-->
<!--[if lt IE 7]>
<script src="scripts/icomoon.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<link href="css/ie.css" rel="stylesheet">
<![endif]-->
<!--[if lt IE 9]>
<script src="scripts/jquery.placeholder.js"></script>
<script src="scripts/script_ie.js"></script>
<![endif]-->
</head>
<body class="w1170 headerstyle1">
<!-- Marine Content Wrapper -->
<div id="marine-content-wrapper">
<header id="header" class="style6">
<div id="upper-header">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="item left hidden-separator">
<ul id="menu-shop-header" class="menu">
</ul>
</div>
<div class="item right hidden-separator">
<div class="shopping-cart-dropdown">
<div class="cart-menu-item ">
<div class="sc-header">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Main Header -->
<div id="main-header">
<div class="container">
<div class="row">
<!-- Logo -->
<div class="col-lg-4 col-md-4 col-sm-4 logo">
<img class="logo" src="img/marine-logo.png" alt="Marine">
<div id="main-nav-button">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="col-sm-8 align-right">
<!-- Text List -->
<ul class="text-list">
<li>Call Us: +1 800 450 17 08</li>
</ul>
<!-- Social Media -->
<ul class="social-media">
<li><a target="_blank" href="http://facebook.com"><i class="icon-facebook"></i></a>
</li>
<li><a target="_blank" href="http://twiiter.com/google"><i class="icon-twitter"></i></a>
</li>
<li><a target="_blank" href="http://google.com"><i class="icon-google"></i></a>
</li>
<li><a target="_blank" href="http://linkedin.com"><i class="icon-linkedin"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /Main Header -->
<!-- Lower Header -->
<div id="lower-header">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="lower-logo">
<img class="logo" src="img/marine-logo.png" alt="Marine">
</div>
<!-- Main Navigation -->
<ul id="main-nav">
<ul class='mainMenu'>
<li><a href='http://www.redflyseo.co.za' title='Home'>HOME</a></li>
 | 
<li><a href='http://www.redflyseo.co.za/seo' title='SEO'>SEO</a></li>
 | 
<li><a href='http://www.redflyseo.co.za/social-media' title='SOCIAL MEDIA'>SOCIAL MEDIA</a></li>
 | 
<li><a href='http://www.redflyseo.co.za/content-marketing' title='CONTENT MARKETING'>CONTENT MARKETING</a></li>
 | 
<li><a href='http://www.redflyseo.co.za/digital-audits' title='DIGITAL AUDITS'>DIGITAL AUDITS</a></li>
 | 
<li><a href='http://www.redflyseo.co.za/sme-business-package' title='SME BUSINESS PACKAGE'>SME BUSINESS PACKAGE</a></li>
 | 
<li><a href='http://www.redflyseo.co.za/blog' title='Blog'>BLOG</a></li>
 | 
<li><a href='http://www.redflyseo.co.za/contact-us' title='Contact Us'>CONTACT US</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- /Lower Header -->
<script type="text/javascript">
//<![CDATA[
(function() {
var shr = document.createElement('script');
shr.setAttribute('data-cfasync', 'false');
shr.src = '//dsms0mj1bbhn4.cloudfront.net/assets/pub/shareaholic.js';
shr.type = 'text/javascript'; shr.async = 'true';
shr.onload = shr.onreadystatechange = function() {
var rs = this.readyState;
if (rs && rs != 'complete' && rs != 'loaded') return;
var site_id = '4703ccf47ac9b99588c7a6fb9d1b4ce2';
try { Shareaholic.init(site_id); } catch (e) {}
};
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(shr, s);
})();
//]]>
</script>
</header>
<!-- /Header -->
<!-- Marine Content Inner -->
<div id="marine-content-inner">
<!-- Main Content -->
<section id="main-content">
<!-- Container -->
<div class="container">
<section class="full-width dark-blue-bg page-heading position-left-top size-cover" style="background-image: http://placehold.it/1903x90">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<h1><umbraco:Item field="blogName" runat="server" /></h1>
</div>
</div>
</div>
</section>
<script>
var timelinePerPage = 8;
var timelineOffset = 0;
var timelineOffsetNext = ( timelinePerPage * timelineOffset ) + timelinePerPage; // Current
// Offset of page
var currentMonth = null;
var currentYear = null;
var templateUrl = "<umbraco:Item field="path" runat="server" />";
</script>
<section class="full-width-bg normal-padding medium-gray-bg ">
<div class="timeline-container-wrap">
<div class="timeline-date-tooltip">
<span>June 2014</span>
</div>
<div class="row timeline-row">
<div class="masonry-container timeline-container">
<div class="col-lg-6 col-md-6 col-sm-6 masonry-box" data-year="2014" data-month="June">
<div class="blog-post masonry timeline">
<!-- POST FOOTER -->
<div class="post-footer">
<img alt='' src='img/avatar.png' class='avatar'/><span class="post-date">
<span class="post-day">11 june </span>
2014 </span>
<ul class="post-meta">
<li> By Jack </li>
</ul>
</div>
<!-- END POST FOOTER -->
<div class="post">
<div class="post-thumbnail">
<img src="http://placehold.it/528x214" alt="Quotes Time!"/>
<div class="post-hover">
<a class="link-icon" href="#"></a><a class="search-icon prettyPhoto" href="http://placehold.it/870x475"></a>
</div>
</div>
<div class="post-content">
<div class="post-details">
<h4 class="post-title">
<span class="post-format">
<span class="document-icon"></span></span>
Quotes Time!
</h4>
</div>
<p class="latest-from-blog_item_text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis, tincidunt vel, varius vitae, nulla. Sed convallis orci. Duis libero orci, pretium a, convallis quis, pellentesque a, dolor. Curabitur vitae nisi non dolor vestibulum consequat. Proin vestibulum.
</p>
<a class="read-more big" href='blog-single.html' title="Quotes Time!">Read more</a>
</div>
<div class="clear">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- .masonry-container-wrapper -->
<div class="align-center load-more">
<a class="button big blue button-load-more" id="timeline-load-more" href="http://www.redflyseo.co.za/blog">Load More</a>
</div>
</section>
</div>
<!-- /Container -->
</section>
<!-- /Main Content -->
</div>
I would appreciate it if anyone could assist with this matter. I have been researching and been stuck for about a month with displaying blog post snippet on my blog timeline and home page. I deleted some of the footer code as I reached the limited of characters in this post.