<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> {{title}} </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></style>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="/">Naked Logs</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</div>
{{{yield}}}
</body>
</html>
This mostly worked. I had the navbar with one item ‘Naked Logs’ which takes users to the root of the application, but the time stamp was now obscured by the navbar. I investigated a simple example from Bootstrap website and discovered that I needed a little bit of custom CSS to move the body down in the template. I remembered what Richard had taught me about the public area of the project for static files and created a css folder there and a CSS file for the application:mkdir public/css
touch public/css/nakedlogs.css
I put the CSS that would move the body down into the CSS file:
body {
padding-top: 50px;
}
and added the CSS file to the template:
<head> <meta charset="utf-8"> <title> {{title}} </title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></style> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <link rel="stylesheet" href="/css/nakedlogs.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head>Refreshed the browser and hey presto, the timestamp was back in the client area!
Then it was time to check in and wait for the next instalment from Richard.
No comments:
Post a Comment