I want to change the view for my blog. Everything is programmed and I am left with the front-end. I do not however understand styling and bootstrap completely. I want to change the view so that there is a sidebar that displays the archives, tags and other necessary supplementary blog features to improve the navigation. I already have a navigation bar at the top but I want to make a sidebar at the left or right on the side of the articles and main text. Somehow, when I try to use the grid system in my application layout file, the supposed to be sidebar appears at the top of the articles or at the bottom instead of being at its left or right. Here is my main scss file: /customstyling.css.scss
@import "bootstrap-sprockets";
@import "bootstrap";
/* mixins, variables */
/* universal */
html {
overflow-y: scroll;
}
body {
padding-top: 60px;
}
section {
overflow: scroll;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
h1 {
margin-bottom: 10px;
}
}
/* typography */
h1, h2, h3, h4, h5, h6 {
line-height: 1;
}
h1 {
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
}
h2 {
font-size: 1.2em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: #777
}
p {
font-size: 1.1em;
line-height: 1.7em;
}
/*
footer{
position: fixed ;
height: 100px;
bottom: 0 ;
width: 100%
div ul li{
display:block;
vertical-align: top;
width: 50%;
float: left;
}
} */
@mixin box_sizing {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* miscellaneous */
.debug_dump {
clear: both;
float: left;
width: 100%;
margin-top: 45px;
@include box_sizing;
}
/* forms */
input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
margin-bottom: 15px;
@include box_sizing;
}
input {
height: auto !important;
}
#error_explanation {
color: red;
ul {
color: red;
margin: 0 0 30px 0;
}
}
.field_with_errors {
@extend .has-error;
.form-control {
color: $state-danger-text;
}
}
Here is my layouts/apllication.html.erb file( I want the output of <%= yield %> to be at the left or right of the sidebar:
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<%= render 'layouts/shim' %>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<% flash.each do |message_type, message| %>
<div class="alert alert-<%= message_type %>"><%= message %></div>
<% end %>
<%= yield %>
<hr>
<h6>
<% if logged_in? %>
<%= "Logged in as #{current_user.email}" %>
<%= link_to "Log out", logout_path %>
<% else %>
<%= link_to "Log in", login_path %> if you are one of our bloggers
<% end %>
</h6>
</div>
<%= debug(params) if Rails.env.development? %>
</body>
</html>
And here is my articles/index.html.erb, one example of the <%= yield %> contents:
<h1>All Articles</h1>
<ul id="articles">
<% @articles.each do |article| %>
<li>
<h4><%= link_to article.title, article_path(article) %></h4>
<% if article.image.exists? %>
<%= image_tag article.image.url %>
<% end %>
<p>
<%= article.body %></p>
<p><small><strong> Date:</strong> <%= article.created_at.to_s %></p></small>
</li>
<% end %>
</ul>
<h3>Archives </h3>
<% if @posts.to_a.empty? %>
<div class="post">
<p>No articles found...</p>
</div>
<% else %>
<% current_month = 0 %>
<% current_year = 0 %>
<% for article in @posts %>
<% if (article.created_at.year != current_year)
current_year = article.created_at.year %>
<h3 class="archiveyear"><%= article.created_at.year%></h3>
<% end %>
<% if (article.created_at.month != current_month || article.created_at.year != current_year)
current_month = article.created_at.month
current_year = article.created_at.year %>
<h4 class="archivemonth"><%= (Date::MONTHNAMES[article.created_at.month]) %></h4>
<% end %>
<div class="archivepost">
<%= link_to article.title, article_path(article) %> on <%= article.created_at.strftime('%A')%> - <%= article.created_at.strftime('%d') + "th"%>
</div>
<% end -%>
<%end %>
<hr>
<h6>
<% if logged_in? %>
<%= link_to "Create a New Article", new_article_path, class: "new_article" %>
<% end %>
</h6>
. I have tried using the bootstrap grid-system with the sidebar at span3 and the main body contents below the navbar at span8 but the sidebar and body contents did not appear side by side. Instead, one was at the top of the other. Something is wrong, either in my custom styling file or in my articles/index.html.erb and other views. Thanks so much for your help ! Moussa
Assuming you're using the latest version of Bootstrap you need to wrap what you have in a row. Try this:
<div class="row">
<div class="col-md-8">
<!-- paste the regular page contents here -->
</div>
<div class="col-md-3">
<!-- paste the sidebar contents here -->
</div>
</div>
So in your case:
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<%= render 'layouts/shim' %>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<% flash.each do |message_type, message| %>
<div class="alert alert-<%= message_type %>"><%= message %></div>
<% end %>
<div class="row">
<div class="col-md-8">
<%= yield %>
</div>
<div class="col-md-3">
<!-- sidebar content goes here -->
</div>
</div>
<hr>
<h6>
<% if logged_in? %>
<%= "Logged in as #{current_user.email}" %>
<%= link_to "Log out", logout_path %>
<% else %>
<%= link_to "Log in", login_path %> if you are one of our bloggers
<% end %>
</h6>
</div>
<%= debug(params) if Rails.env.development? %>
</body>
</html>
Your indentation is kind of funny, so sorry if I'm off a bit.