So my footer is transparent on every page. I don't know why it is but it is.
I would like to keep it transparent on the home page, but have a white bg on every other page. Any suggestions on the best way to go about this would be awesome. I have tried using many different bootstrap methods, but it always changes the bg on the home page as well, and pushes the footer to the top of the page??
I'm using rails 4.2.
_footer.html.erb
<body class="footer">
<nav class="navbar navbar-fixed-bottom">
<div class="container-fluid">
<div class="collapse navbar-collapse" >
<ul class="nav navbar-nav"></ul>
<form class="navbar-form navbar-left">
<ul class="nav navbar-nav navbar-left">
<li><%= link_to "Privacy", privacy_path %></li>
<li><%= link_to "Terms", terms_path %></li>
<li><%= link_to "About", about_path %></li>
</ul>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
styles.css.scss (haven't input anything for the footer)
$navbar-default-bg: white;
$btn-default-bg: white;
#import 'bootstrap';
body {
color: black;
padding-bottom: 50px;
}
.searchbox > div {
text-transform: lowercase;
margin:0 auto;
padding-bottom: 15px;
width:600px;
}
.hb{
a {
color:white;
}
.privacycolor{
color:white;
}
.termscolor{
color:white;
}
.aboutcolor{
color:white;
}
.logincolor {
color:white;
}
.signupcolor {
color:white;
}
.navbar-brand{
color:white;
}
color:white;
background-size: cover;
background-image: asset-data-url("boom1.jpg")
}
.innercover{
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.ab {
.featurette-heading {
margin-top: 150px;
}
}
.progress{
height: 24px;
}
.mcds {
.well {
background-color: white;
}
.jumbotron {
color:white;
background-size: cover;
background-image: asset-data-url("doi.jpg")
}
.row {
margin-bottom: 25px;
}
}
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title> Check it out </title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= render 'layouts/header'%>
<div class="container">
<%= yield %>
</div>
<%= render 'layouts/footer'%>
</body>
</html>
If you need any other pages please let me know. Many thanks.
Related
I'm creating a website, and I want a footer at the bottom of the website.
Here is my html:
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<p class="text-muted">Copyright ©2015 Chalford Sports & Social Club | All rights reserved</p>
</div>
</div>
I used the basic CSS of bootstrap.
.navbar-fixed-top, .navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
How can i do ?
Your html should be like
<body>
<div id="wrap">
<div class="container">
</div>
</div>
<div id="footer">
<div class="container">
this is footer
</div>
</div>
</body>
and your css be like
html,
body {
height: 100%;
}
#wrap {
min-height: 100%;
height: auto;
margin: 0 auto -60px;
padding: 0 0 60px;
}
#footer {
height: 60px;
background-color: #f5f5f5;
}
Just a concept. Play with the classes as you like.here is fiddle
I have been working with Michael Hartl's tutorial and I am almost finished. However, I got near the end and am have a problem styling the micropost section of the "user/show/" page. I would like all the microposts to be under one another. Currently they are showing like this:
custom.css.scss
.microposts {
list-style: none;
padding: 0;
li {
padding: 10px 0;
border-top: 1px solid #e8e8e8;
}
.user {
margin-top: 5em;
padding-top: 0;
}
.content {
display: block;
margin-left: 60px;
img {
display: block;
padding: 5px 0;
}
}
.timestamp {
color: $gray-light;
display: block;
margin-left: 60px;
}
.gravatar {
float: left;
margin-right: 10px;
margin-top: 5px;
}
}
aside {
textarea {
height: 100px;
margin-bottom: 5px;
}
}
span.picture {
margin-top: 10px;
input {
border: 0;
}
}
microposts.html.erb
<li id="micropost-<%= micropost.id %>">
<%= link_to gravatar_for(micropost.user), micropost.user %>
<span class="user"><%= link_to micropost.user.name, micropost.user %></span>
<span class="content"><%= micropost.content %></span>
<span class="timestamp">
Posted <%= time_ago_in_words(micropost.created_at) %> ago.
</span>
</li>
show.html.erb
<% provide(:title, #user.name) %>
<div class="row">
<aside class="col-md-4">
<section class="user_info">
<h1>
<%= gravatar_for #user %>
<%= #user.name %>
</h1>
</section>
</aside>
<div class="col-md-8">
<% if #user.microposts.any? %>
<h3>Microposts (<%= #user.microposts.count %>)</h3>
<ol class="microposts">
<%= render #microposts %>
</ol>
<%= will_paginate #microposts %>
<% end %>
</div>
</div>
If someone could please help me, it would be highly appreciated. Thank you in advance!
You need to clear the floats. Try adding clear: both; to your .microposts .li SASS
.microposts {
list-style: none;
padding: 0;
li {
padding: 10px 0;
border-top: 1px solid #e8e8e8;
clear: both;
}
JSFIDDLE DEMO
I've been trying to reference a image in my scss file by passing the code:
background-image: asset-url("bg.jpg", image) no-repeat center center fixed;
I've also tried:
background-image: image-url("bg.jpg") no-repeat center center fixed;
However when I run rails s I get the following error:
ActionController::RoutingError (No route matches [GET] "/assets/images/bg.jpg"):
And yes, I'm certain that my image is on app/assets/images.
How can I manage to solve this problem?
View File (Downloaded from Startup Bootstrap):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Stylish Portfolio Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<%= stylesheet_link_tag "bootstrap", "custom" %>
</head>
<body>
<!-- Side Menu -->
<a id="menu-toggle" href="#" class="btn btn-primary btn-lg toggle"><i class="fa fa-bars"></i></a>
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<a id="menu-close" href="#" class="btn btn-default btn-lg pull-right toggle"><i class="fa fa-times"></i></a>
<li class="sidebar-brand">Start Bootstrap
</li>
<li>Home
</li>
<li>About
</li>
<li>Services
</li>
<li>Portfolio
</li>
<li>Contact
</li>
</ul>
</div>
<!-- /Side Menu -->
<!-- Full Page Image Header Area -->
<div id="top" class="header">
<div class="vert-text">
<h1>Start Bootstrap</h1>
<h3>
<em>We</em> Build Great Templates,
<em>You</em> Make Them Better</h3>
Find Out More
</div>
</div>
<!-- /Full Page Image Header Area -->
<!-- Intro -->
<div id="about" class="intro">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h2>Subtle Sidebar is the Perfect Template for your Next Portfolio Website Project!</h2>
<p class="lead">This template really has it all. It's up to you to customize it to your liking! It features some fresh photography courtesy of <a target="_blank" href="http://join.deathtothestockphoto.com/">Death to the Stock Photo</a>.</p>
</div>
</div>
</div>
</div>
<!-- /Intro -->
<!-- Services -->
<div id="services" class="services">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 text-center">
<h2>Our Services</h2>
<hr>
</div>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-2 text-center">
<div class="service-item">
<i class="service-icon fa fa-rocket"></i>
<h4>Spacecraft Repair</h4>
<p>Did your navigation system shut down in the middle of that asteroid field? We can repair any dings and scrapes to your spacecraft!</p>
</div>
</div>
<div class="col-md-2 text-center">
<div class="service-item">
<i class="service-icon fa fa-magnet"></i>
<h4>Problem Solving</h4>
<p>Need to know how magnets work? Our problem solving solutions team can help you identify problems and conduct exploratory research.</p>
</div>
</div>
<div class="col-md-2 text-center">
<div class="service-item">
<i class="service-icon fa fa-shield"></i>
<h4>Blacksmithing</h4>
<p>Planning a time travel trip to the middle ages? Preserve the space time continuum by blending in with period accurate armor and weapons.</p>
</div>
</div>
<div class="col-md-2 text-center">
<div class="service-item">
<i class="service-icon fa fa-pencil"></i>
<h4>Pencil Sharpening</h4>
<p>We've been voted the best pencil sharpening service for 10 consecutive years. If you have a pencil that feels dull, we'll get it sharp!</p>
</div>
</div>
</div>
</div>
</div>
<!-- /Services -->
<!-- Callout -->
<div class="callout">
<div class="vert-text">
<h1>A Dramatic Text Area</h1>
</div>
</div>
<!-- /Callout -->
<!-- Portfolio -->
<div id="portfolio" class="portfolio">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 text-center">
<h2>Our Work</h2>
<hr>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-2 text-center">
<div class="portfolio-item">
<%= image_tag "portfolio-1.jpg" %>
<h4>Cityscape</h4>
</div>
</div>
<div class="col-md-4 text-center">
<div class="portfolio-item">
<%= image_tag "portfolio-2.jpg" %>
<h4>Is That On Fire?</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-2 text-center">
<div class="portfolio-item">
<%= image_tag "portfolio-3.jpg" %>
<h4>Stop Sign</h4>
</div>
</div>
<div class="col-md-4 text-center">
<div class="portfolio-item">
<%= image_tag "portfolio-4.jpg" %>
<h4>Narrow Focus</h4>
</div>
</div>
</div>
</div>
</div>
<!-- /Portfolio -->
<!-- Call to Action -->
<div class="call-to-action">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h3>The buttons below are impossible to resist.</h3>
Click Me!
Look at Me!
</div>
</div>
</div>
</div>
<!-- /Call to Action -->
<!-- Map -->
<div id="contact" class="map">
<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&aq=0&oq=twitter&sll=28.659344,-81.187888&sspn=0.128789,0.264187&ie=UTF8&hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&t=m&z=15&iwloc=A&output=embed"></iframe>
<br />
<small>
</small>
</iframe>
</div>
<!-- /Map -->
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<ul class="list-inline">
<li><i class="fa fa-facebook fa-3x"></i>
</li>
<li><i class="fa fa-twitter fa-3x"></i>
</li>
<li><i class="fa fa-dribbble fa-3x"></i>
</li>
</ul>
<div class="top-scroll">
<i class="fa fa-circle-arrow-up scroll fa-4x"></i>
</div>
<hr>
<p>Copyright © Company 2013</p>
</div>
</div>
</div>
</footer>
<!-- /Footer -->
<!-- JavaScript -->
<%= javascript_include_tag "jquery-1.10.2.js" %>
<%= javascript_include_tag "bootstrap.js" %>
<!-- Custom JavaScript for the Side Menu and Smooth Scrolling -->
<script>
$("#menu-close").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
</script>
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
</script>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
</body>
</html>
CSS File:
html,
body {
height: 100%;
width: 100%;
}
.vert-text {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.vert-text h1 {
padding: 0;
margin: 0;
font-size: 4.5em;
font-weight: 700;
}
/* Side Menu */
#sidebar-wrapper {
margin-right: -250px;
right: 0;
width: 250px;
background: #000;
position: fixed;
height: 100%;
overflow-y: auto;
z-index: 1000;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-nav li {
line-height: 40px;
text-indent: 20px;
}
.sidebar-nav li a {
color: #999999;
display: block;
text-decoration: none;
}
.sidebar-nav li a:hover {
color: #fff;
background: rgba(255,255,255,0.2);
text-decoration: none;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 55px;
line-height: 55px;
font-size: 18px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#menu-toggle {
top: 0;
right: 0;
position: fixed;
z-index: 1;
}
#sidebar-wrapper.active {
right: 250px;
width: 250px;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
.toggle {
margin: 5px 5px 0 0;
}
/* Full Page Image Header Area */
.header {
display: table;
height: 100%;
width: 100%;
position: relative;
background-image: image-url("bg.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* Intro */
.intro {
padding: 50px 0;
}
/* Services */
.services {
background: #7fbbda;
padding: 50px 0;
color: #ffffff;
}
.service-item {
margin-bottom: 15px;
}
i.service-icon {
border: 3px solid #ffffff;
border-radius: 50%;
display: inline-block;
font-size: 56px;
width: 140px;
height: 140px;
line-height: 136px;
vertical-align: middle;
text-align: center;
}
/* Callout */
.callout {
color: #ffffff;
display: table;
height: 400px;
width: 100%;
background-image: image-url("callout.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* Portfolio */
.portfolio {
padding: 50px 0;
}
.portfolio-item {
margin-bottom: 25px;
}
.img-portfolio {
margin: 0 auto;
}
/* Call to Action */
.call-to-action {
color: #ffffff;
background: #0a5175;
padding: 50px 0;
}
.call-to-action .btn {
margin: 10px;
}
/* Map */
.map {
height: 500px;
}
/* Footer */
footer {
padding: 100px 0;
}
.top-scroll {
margin-top: 50px;
}
.top-scroll a {
text-decoration: none;
color: inherit;
}
i.scroll {
color: #333333;
}
i.scroll:hover {
color: #0a5175;
}
/* Responsive */
#media (max-width: 768px) {
.header {
background-image: image-url("bg.jpg") no-repeat center center scroll;
}
.callout {
background-image: image-url("callout.jpg") no-repeat center center scroll;
}
.map {
height: 75%;
}
}
Run bundle exec rake assets:precompile to precompile yours assets. image-url("bg.jpg") literally becomes url(/assets/bg.jpg), which would yield a broken link in your case.
I am new to Rails. I am using Aptana Studio 3 to write a small application.
In the Views folder, I added a new .html.erb page and added a jQuery navigation menu bar. This page also has a banner. I want to keep this as a base page (like Master Page in .NET) for all the other pages.
I want all the other pages to automatically show the banner and menu bar on top.
How to do this? I am using Rails 3.2.
Edited
Code of application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title></title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<script type="text/javascript" src="..\Libraries\jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('li.headlink').hover(
function() { $('ul', this).css('display', 'block'); },
function() { $('ul', this).css('display', 'none'); });
});
</script>
<style type="text/css" rel="stylesheet">
/* General */
#cssdropdown, #cssdropdown ul { list-style: none; }
#cssdropdown, #cssdropdown * { padding: 0; margin: 0; }
/* Head links */
#cssdropdown li.headlink { width: 220px; float: left; margin-left: -1px; border: 1px black solid; background-color: #e9e9e9; text-align: center; }
#cssdropdown li.headlink a { display: block; padding: 15px; }
/* Child lists and links */
#cssdropdown li.headlink ul { display: none; border-top: 1px black solid; text-align: left; }
#cssdropdown li.headlink:hover ul { display: block; }
#cssdropdown li.headlink ul li a { padding: 5px; height: 17px; }
#cssdropdown li.headlink ul li a:hover { background-color: LightBlue; color:Black }
/* Pretty styling */
body { font-family: verdana, arial, sans-serif; font-size: 0.8em;}
#cssdropdown a { color: white; } #cssdropdown ul li a:hover { text-decoration: none; }
#cssdropdown li.headlink { background-color: Blue;}
#cssdropdown li.headlink ul { background-position: bottom; padding-bottom: 10px; }
</style>
</head>
<body>
<%= yield %>
<div id="divMain">
<div id="divHeader">
<img src="..\Images\W.png">
</div>
<div id="divMenu">
<ul id="cssdropdown">
<li class="headlink">
Task
<ul>
<li>Add New</li>
</ul>
</li>
<li class="headlink">
Reports
<ul>
<li>Report</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="content"><%= content_for?(:content) ? yield(:content) : yield %></div>
</body>
</html>
Code of Content.html.erb
<% content_for :stylesheets do %>
<div id="divLogin">
</div>
<% end %>
<% content_for :MainContent do %>
<div id="divMain">
</div>
<% end %>
<%= render :partial => "layouts\application.html.erb" %>
Rails uses layouts as master templates. As default will you have one master layout template called application, which you can find in app/views/layouts/application.html.erb. If you look at this file will you see something like:
# app/views/layouts/application.html.erb
<html>
<head>
...
</head>
<body>
...
<div id="content">
# Your page content will be inserted here:
<%= yield %>
</div>
...
</body>
</html>
As default will this be rendered for all pages, and the content of each page (fx your new.html.erb) would be rendered in the yield block.
This means that application.html.erb is the right place to but generel layout stuff, like menus and banners that should appear on all pages.
If you want to have something that varies a bit for each page (fx different banners) can you add a special <%= yield(:banner) if content_for?(:banner) %> in your application.html.erb file. You will then be able to add a block in each of your pages for a banner like this:
# app/views/some_resource/some_page.html.erb
<% content_for(:banner) do %>
# insert page specifik banner here
<% end %>
# normal content for page
...
I hope this answers your question?
You can also read more about layouts (fx how to use more then one layout) on http://guides.rubyonrails.org/layouts_and_rendering.html
Edit: correct way to implement content.html.erb
The content of content.html.erb should be:
# What is this? This has nothing to do with stylesheets?
<% content_for :stylesheets do %>
<div id="divLogin">
</div>
<% end %>
<div id="divMain">
</div>
So no content_for :MainContent block and don't render the ´application.html.erb´ layout template (it's not even a partial, so you can't do this).
You can use nested layouts as described here.
Watch from 5:18,
from what I've read I think thats kind of what you may be looking for.
Hope it helps.
Railscast #328
Also here is a link to Twitter's bootstrap navbar which you may want to look into. It will show a banner and navigation bar on all pages and is fairly easy to set up.
http://twitter.github.io/bootstrap/components.html#navbar
One of the best sources for this topic is the beginning of the book The Rails View. Here is the link: The Rails View
This really helps with the content_for helper method, which will become your friend instantly once you know how to use it.
Hello I am making a footer:
<div id="footer">
<ul>
<li id="qualifications">
<h4>Professional qualifications</h4>
<p>Name<br>
Chartered Veterinary Physiotherapist<br>
Chartered Physiotherapist<br>
BSc HONS MCSP<br>
Post Grad Dip (vet phys) ACPAT CAT A
</p>
</li>
<li id="logos">
<h4>head
</h4>
<img src="/" />
</li>
<li id="contact">
<h4>Contact and referal</h4>
<p>Contact</p>
<p><a id="referal">Referal Form</a></p>
</li>
</ul>
</div> <!---footer---->
I want the footer div to be 100% width so I can colour it. I want the ul to be 960px wide and the li elements to lign up next to on another in a inline-block. css:
#footer {
background-color:#666666;
#footer ul {
width:960px;
margin-left: auto ;
margin-right: auto ;
}
#footer li {
width: 320px;
display:inline-block;
}
But the li elements knock the last one underneath the first two and ther's odd spacing at the top.
Any help would be great!
reduce the number lines in professional qualification...
reduce the width of li...
and always use float left to solve the alignment problems
<!--<html>
<head>
<link rel="stylesheet" href="so.css"/>
</head><body>
<div id="header"></div>
<div id="footer">
<ul>
<li id="qualifications">
<h4>Professional qualifications</h4>
<p>Name<br>
Chartered Veterinary Physiotherapist<br>
</p>
</li>
<li id="logos">
<h4>head
</h4>
<img src="/" />
</li>
<li id="contact">
<h4>Contact and referal</h4>
<p>Contact</p>
<p><a id="referal">Referal Form</a></p>
</li>
</ul>
</div></body></html>-->
#header{
height:80%;
width:100%;
}
#footer {
background-color:#666666;
width:100%;
height:20%;
}
#footer ul {
width:960px;
margin-left: auto ;
margin-right: auto ;
height:100%;
}
#footer li {
width: 300px;
display: inline-block;
height: 100%;
float: left;
}
You can use this code
body {
margin: 0;
padding: 0;
}
#footer {
background-color: #666666;
clear: both;
width: 100%;
float: left;
margin: 0;
padding: 30px 0;
}
#footer ul {
width:960px;
margin: 0 auto;
padding: 0;
text-align: left;
}
#footer li {
width: 320px;
display:inline-block;
float: left;
}
<div id="footer">
<ul>
<li id="qualifications">
<h4>Professional qualifications</h4>
<p>Name<br>
Chartered Veterinary Physiotherapist<br>
Chartered Physiotherapist<br>
BSc HONS MCSP<br>
Post Grad Dip (vet phys) ACPAT CAT A
</p>
</li>
<li id="logos">
<h4>head</h4>
<img src="/" />
</li>
<li id="contact">
<h4>Contact and referal</h4>
<p>Contact</p>
<p><a id="referal">Referal Form</a></p>
</li>
</ul>
</div>