I've got a Rails app that has a couple of 'static' pages and I plan to have more in the future.
Current file structure:
....
/assets/stylesheets/static.scss
....
/controllers/static_controller.rb
....
/views/static/home.html.erb
/views/static/feedback.html.erb
....
My Gemfile contains the 'bootstrap-sass' gem.
I want the home.html.erb view to have a different style from all the other 'static' pages, and specifically the following css:
html {
height: 100%;
background: url(assets/image.jpg) no-repeat center center;
background-size: cover;
font-family: Arial;
}
h1 {
color: black;
font-style: bold;
text-align: center;
}
How can/should this be achieved most efficiently? Would I need to create another controller/view/stylesheet for the home.html.erb?
CODE:
application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title>Batuk</title>
<%= Gon::Base.render_data({}) %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<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">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%= link_to 'BATUK', root_path, class: "navbar-brand" %>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><%= link_to 'Summary', summary_path %></li>
<li><%= link_to 'Statement', statement_path %></li>
<li><%= link_to 'Balances', balances_path %></li>
<li><%= link_to 'Accounts', accounts_path %></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to 'Feedback', feedback_path %></li>
<li><%= link_to 'Sign Out', root_path %></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<%= yield %>
</div>
<%= render 'layouts/footer' %>
</body>
</html>
One way would be to target your controller and action using CSS classes.
In your app/views/layouts/application.html.erb, add controller_name and action_name method calls to generate the CSS classes.
<body class="<%= controller_name %> <%= action_name %>">
CSS
html { height: 100% }
body.home {
height: 100%;
background: url('assets/image.jpg') no-repeat center center;
background-size: cover;
font-family: Arial;
}
.home h1 {
color: black;
font-style: bold;
text-align: center;
}
Create a layout with matching name,for your static_controller, template name should be static.html.erb.
then specify the layout in your controller
class staticController < ApplicationController
layout 'static'
end
Related
My Ruby on Rails application uses BootStrap for easier layout rendering. I define rows and columns:
<div class="container-fluid">
<div class="row">
<div class="col-md-3 left_border">
<ul class="" role="menu">
<li><%= link_to t('Groups'), groups_path %></li>
<li><%= link_to t('Users'), users_path %></li>
<li><%= link_to t('Parameters'), "#" %></li>
</ul>
</div>
<div class="col-md-8 col-md-offset-1">
<%= yield %>
<% flash.each do |key, value| %>
<div class="alert alert-<%= key %>"><%= value %></div>
<% end %>
</div>
</div>
</div>
The left-border class only sets the background color for the element:
.left_border {
background-color: $grayDarker;
}
It works fine, but the first column's background is set for its content only, not for the whole cell. If the <%= yield %> function returns lots of lines, I get a small grey box on the left including the menu, where I'd like to display a full grey column.
Thanks for your help.
I finally switched to the css3 Flexible Box feature, which provides a smart way of designing grids:
1 - I created the classes I needed in my css file
/* flex containers */
.flex-container {
display: -webkit-flex;
display: flex;
background-color: white;
}
.flex-container-v {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
background-color: white;
}
.flex-item {
background-color: white;
margin-left: 10px;
width: 80%
}
.flex-item-border {
background-color: lightgrey;
width: 20%;
}
2 - I organise my display blocks using these classes
<div class="flex-container-v">
<div class="flex-container">
<div class="flex-item-border logo">
<br/>
<%= image_tag("k.png", alt: "KeyMan") %>
<br/>
</div>
<div class="flex-item">
<nav class="top_menu">
<ul>
<% if user_signed_in? %>
<li> <%= t('User') %>: <%= link_to (current_user.first_name + ' ' + current_user.name), edit_user_registration_path %></li>
<li> | <%= link_to t('Sign_out'), destroy_user_session_path, method: "delete" %></li>
<% else %>
<li> <%= link_to t('Sign_in'), new_user_session_path %></li>
<% end %>
<li> | <%= link_to t('Help'), "#" %> </li>
</ul>
</nav>
<h1><%= t('Cryptographic Keys Manager') %></h1> </div>
</div>
...
And it works fine !
I'm trying to add a simple border to some buttons and I can't seem to get it to display.
I have a button module in app/assets/stylesheets/modules/_buttons.scss that I've imported into the application.scss
#import "bootstrap-sprockets";
#import "bootstrap";
//modules
#import "modules/buttons";
button css:
.button {
border: 1x solid;
padding: 1em 1.5em;
}
And then I added the button class to my header file:
<nav class="navbar navbar-default">
<div class="container-fluid">
<a class="navbar-brand" href="#">OpEd</a>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Share your opinion", new_post_path, class: "button" %></li>
<% if user_signed_in? %>
<li><%= current_user.first_name %></li>
<li><%=link_to "Sign out", destroy_user_session_path, method: :delete %></li>
<%else%>
<li><%= link_to "Sign in / Sign up", new_user_session_path, class: "button" %> </li>
<%end%>
</ul>
</div>
</nav>
Why is the border not being displayed?
perhaps try and designate a color in your css file?
Replacing...
border: 1x solid; with
border: 1px solid #e8e8e8;
Let me know of your result!
I'm trying to create a website for a friend of mine (for learning purposes also). And now I'm trying to create a affix navbar with Bootstrap. (BTW I'm coding on cloud9 using ruby on rails).
If I preview my site, the affix navbar works perfectly fine, but after clicking on a certain link in the navbar, the navbar just stays on his position below the banner. Through inspecting the element, I found out that the affix classes don't get appended to the navbar anymore, after clicking one of the links. I've spent some hours trying and fixing but nothing seems to work.
So I really hope that one of you guys can help me out.
Thanks in advance.
The code for my application.html.erb is:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>NL-Renovatie</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body data-spy="scroll" data-target="nav" data-offset="50">
<div class="container-fluid header">
<h1>Bootstrap Affix Example</h1>
<h3>Fixed (sticky) navbar on scroll</h3>
<p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
</div>
<nav class="navbar navbar-inverse navbar-static-top" role="navigation" data-spy="affix" data-offset-top="197">
<div class='container-fluid'>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%= link_to root_path, class: 'navbar-brand' do %>
<i class="fa fa-home fa-lg"aria-hidden="true"></i>
Home
<% end %>
</div>
<div class="collapse navbar-collapse" id="main-nav-collapse">
<ul class="nav navbar-nav navbar-left">
<li id='navbar-button'>
<%= link_to overons_path do %>
<i class="fa fa-users" aria-hidden="true"></i>
Over Ons
<% end %>
</li>
<li id='navbar-button'>
<%= link_to new_contact_path do %>
<i class="fa fa-envelope" aria-hidden="true"></i>
Contact
<% end %>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
<div class="container-fluid">
<% flash.each do |key, value| %>
<%= content_tag :div, value, class: "alert alert-#{key}" %>
<% end %>
<%= yield %>
</div>
</body>
</html>
The code for my application.css.scss is :
#import "bootstrap-sprockets";
#import "bootstrap";
#import "font-awesome-sprockets";
#import "font-awesome";
.affix {
top: 0;
width: 100%;
}
.affix + .container-fluid {
padding-top: 70px;
}
.header {
background-color:#F44336;
color:#fff;
height:200px;
}
The problem was caused by turbolinks. The fix was as following:
In the application.js file I had to remove the following line:
//= require turbolinks
And in the application.html.erb I've set both data-turbolinks-track to false:
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => false %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => false %>
I am trying to get my bootstrap navbar to have a transparent background initially, but solid white when the user scrolls down. I have consulted many SO posts on this and tried the solutions suggested here and here, but to no effect. I am using Rails 4.2.5 and the bootstrap-sass gem for my bootstrap, imported via my application.scss file using:
#import "bootstrap-sprockets";
#import "bootstrap";
I think something is amok with my bootstrap because I can't achieve a transparent navbar by adding transparent as a class to the navigation menu, yet putting in navbar-inverse works to change the color scheme. Also, I have had to use !important in all of my css items on this stylesheet to get them to override bootstrap. Here's my navbar html.erb code:
<nav class="navbar" id="main_navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><%= image_tag 'Flame.png', style: "height: 100%"%></a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li><%= link_to 'Workouts', workouts_path, class:"waves-effect waves-light" %></li>
<!-- <li>Generator</li> -->
<li><%= link_to 'Blog', posts_path, class:"waves-effect waves-light" %></li>
<li><%= link_to 'Weekly WOW', weeklies_path, class:"waves-effect waves-light" %></li>
<li><%= link_to 'Rants', rants_path, class:"waves-effect waves-light" %></li>
<li><%= link_to 'About Us', home_about_path, class:"waves-effect waves-light" %></li>
<% if current_user %>
<li><%= link_to('My Profile', edit_user_registration_path(current_user)) %></li>
<% else %>
<li><%= link_to('Sign In', new_user_session_path) %></li>
<% end %>
</ul>
</div>
</div>
</nav>
I know this post subject may be duplicating others', but I have read dozens of SO posts and none of them have fixed this issue. Any help would be appreciated.
To change the color to white on scroll, you'll need some javascript.
Here's a working fiddle.
$(document).ready(function(){
var scroll_start = 0;
var startchange = $('#startchange');
var offset = startchange.offset();
if (startchange.length){
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if(scroll_start > offset.top) {
$(".navbar-default").css('background-color', '#f0f0f0');
} else {
$('.navbar-default').css('background-color', 'transparent');
}
});
}
});
For the transparent navbar, you can edit some css on the navbar-default
.navbar-default {
background: transparent;
border: none !important;
}
UPDATE: https://jsfiddle.net/p7p9t0a0/3/
using affix as mentioned by #daniel
I am using Twitter bootstrap and Rails and I can't seem to float a navbar item to the right.
I tried using something like this:
<li class="whoami pull-right"> <%= link_to ("Logged in as: " + current_user.name), edit_user_registration_path , :id=>"Edit account"%> </li>
... but the link stayed left and firebug showed "float:left;"
So I tried to overide the css float in bootstrap_and_overrides.css.less and in home.html.erb, but neither worked. Firebug indicated that it found two css float statements, but chose the bootstrap option over mine. So I am left stuck and wondering how to customize the navbar. I am probably doing something wrong here, but I just don't see it.
Here's my code:
application.html.erb:
<!DOCTYPE html>
<html>
<head>
... removed to shorten the length of this post
</head>
<body>
<header>
<%= render 'layouts/navigation' %>
</header>
<div id="main" role="main">
<div class="container">
<div class="content">
<div class="row">
<div class="span12">
<%= render 'layouts/messages' %>
<%= yield %>
</div>
</div>
<footer>
</footer>
</div>
</div> <!--! end of .container -->
</div> <!--! end of #main -->
</body>
</html>
_navigation.html.erb:
<div class="container span12">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<%= link_to "Cases", root_path, :class=>"brand"%>
<% if user_signed_in? %>
<li> <%= link_to "My Cases", cases_path %> </li>
<li> <%= link_to 'Dash', dash_path %> </li>
<% if current_user.has_role? :admin %>
<li> <%= link_to 'Admin', users_path, :id=>"Admin" %> </li>
<% end %>
<li> <%= link_to 'Logout', destroy_user_session_path, :method=>'delete', :id => "Logout" %> </li>
<li class="whoami"> <%= link_to ("Logged in as: " + current_user.name), edit_user_registration_path , :id=>"Edit account"%> </li>
<% else %>
<li> <%= link_to 'Login', new_user_session_path %> </li>
<li> <%= link_to 'Sign up', new_user_registration_path %> </li>
<% end %>
</ul>
</div>
</div>
</div>
</div>
bootstrap_and_overrides.css.less:
#import "twitter/bootstrap/bootstrap";
body {
padding-top: 60px;
}
#import "twitter/bootstrap/responsive";
// Set the correct sprite paths
// ...REMOVED to shorten the length of this post
// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/less.html for their names and documentation
//
// Example:
// #linkColor: #ff0000;
.whoami {
float:right;
}
When I load a page, I see the navbar, but the last item is not floated to the right.
Looks like this:
And there is another screen cap here that shows some more info.
As you can see, firebug found a "float:right;" option, but indicates a "float:left;" option was used instead.
I have a gap in understanding here, but I am not sure where.
Please address responses to:
Use of pull-right and twitter bootstrap navbar formatting
Overriding css
Interpreting firebug output
EDIT:
I've posted my first ever jsfiddle here: http://jsfiddle.net/uCHQs/2/
It represents a copy/paste of a browser 'show source' and what I gather is the relevent css load and served by rails.
Thanks in advance!
Got it.
Getting it to work required filling the container nested in navbar-inner with more than one unordered list of nav elements. This jsfiddle showed me the way http://jsfiddle.net/N6vGZ/4/
This code works:
<div class="container span12">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<%= link_to "Cases", root_path, :class=>"brand"%>
<ul class="nav">
<% if user_signed_in? %>
<li> <%= link_to "My Cases", cases_path %> </li>
<li> <%= link_to 'Dash', dash_path %> </li>
<% if current_user.has_role? :admin %>
<li> <%= link_to 'Admin', users_path, :id=>"Admin" %> </li>
<% end %>
<li> <%= link_to 'Logout', destroy_user_session_path, :method=>'delete', :id => "Logout" %> </li>
</ul>
<ul class="nav pull-right"> <li> <%= link_to ("Logged in as: " + current_user.name), edit_user_registration_path , :id=>"Edit account"%> </li></ul>
<% else %>
<ul class="nav">
<li> <%= link_to 'Login', new_user_session_path %> </li>
<li> <%= link_to 'Sign up', new_user_registration_path %> </li>
</ul>
<% end %>
</ul>
</div>
</div>
</div>
</div>
have you tried being more specific with your CSS?
.navbar ul.nav li.whoami {
float:right;
}
Sometimes if the prior CSS (bootstrap in this case) is very specific, it requires the same level of specificity (or greater) to override it.
Might be helpful to post a jsfiddle. Screenshots are difficult to debug ;)
The code u have written is
class="nav navbar-nav" col-12
The above code can be replaced like this
class="nav navbar-nav col-12"
and also at next insert
class pull-right in your li button
Try commenting out the line
//...REMOVED
<li><span class="glyphicon glyphicon-chevron-right" style="float:right;"></span> Examples</li>
Add new class = "row"
what's happened ..in your code . when it is coming in mobile device then div is append on other div .
this is simple solution .