So I have built a 'web app' using ruby 2.1.5 on rails 4.2.0.
What I want now is a single-page landing-page. I don't want this landing page to be influenced by any other existing css files that I have in my stylesheets layout.
The landing page (ideally) uses a css file named freelancer.css and the rest of my site uses default.css.
So in short; how can I specifically call a stylesheet for a single view/controller while escaping the rest of my css/scss files for the rest of my app.
The landing page has its own controller named Welcome.
class WelcomeController < ApplicationController
def index
render layout: false
end
end
I have defined a custom route.
authenticated :user do
root 'pages#home', as: "authenticated_root"
end
root 'welcome#index'
And my Welcome controller's index is as such.
<head>
<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="">
<meta name="author" content="">
<%= favicon_link_tag 'notes.png' %>
<title>Balern Edu.</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<script src='assets/moment.min.js'></script>
<script src='assets/fullcalendar.js'></script>
<link rel='stylesheet' href='assets/fullcalendar.css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
My application.css.scss file:
*
*= require_self
*= require 'masonry/transitions'
*= require font-awesome
*= require_tree .
*/
#import 'bootstrap';
#import 'bootstrap/theme';
#import 'chosen';
#import 'image-select';
Instead of using render layout: false, you can use layout: "welcome" at the top of your WelcomeController, where the layout page is called welcome.html.erb. There, you can call whatever stylesheets you want.
You can include css or JavaScript file only for custom page putting this code in your custom view:
<% content_for :head do %>
<%= javascript_include_tag "posts" %>
<% stylesheet_link_tag "posts" %>
<% end %>
Also you need to put this code in application.html.erb:
<head>
<%= yield :head %>
</head>
Related
I'm trying to add a title tag to my website using ROR.
After adding the desired changes to ... in aplication.html.erb, then commiting and deploying it, I still do not see the complete title tag present with the changes I just made when I view the website on search results.
Why is this the case and is there anything I am forgetting to include?
<!DOCTYPE html>
<html>
<head>
<title>Website Name - Desired title tag added here but doesn't show in search results</title>
<%= 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">
<%= render 'shared/user_info' %>
</head>
<body>
<div id="body-interior">
<%= render 'shared/header' %>
<div class="container">
<% flash.each do |name, msg| %>
<%= content_tag(:div, msg, class: "alert alert-info") %>
<% end %>
<%= yield %>
</div>
<%= render 'shared/footer' %>
</div>
<%= render 'shared/final_scripts' %>
</body>
</html>
Thanks!
When you say search results, I assume you mean search engines like Google? If so, you need to know that changes like these won't be recognized instantly by Google. The changes should be visible as soon as Google (or any other robot) crawls the page in question again.
As far as I know you can force this process with Google's Webmaster Tools.
I am trying to render different CSS depending on the page. I did some research
How does one load a CSS framework in Rails 3.1?
https://github.com/rails/rails/issues/1981
and of course the rails guide on the asset pipeline.
What I want is for the index(home page) to render one css file(welcome.css.scss) and the others to render users.css.scss.
Right now when you navigate to the page it renders the welcome.css.scss and then when I hit sign in it is still rendering welcome.css.scss. But after refreshing the page it will then render the user.css.scss
I updated my assets.rb file:
Rails.application.config.assets.precompile += %w( welcome.css )
Rails.application.config.assets.precompile += %w( users.css )
Then I created a welcome.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Blocmarks</title>
<%= stylesheet_link_tag "welcome" %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
and a users.html.erb file
<!DOCTYPE html>
<html>
<head>
<title>Blocmarks</title>
<%= stylesheet_link_tag 'users' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
I removed the require from the application.css.scss. The only thing in the file at this time is #import 'bootstrap';
and of course I have a welcome and a user.css.scss.
Results from the console:
-Navigate to the home page
Started GET "/" for 127.0.0.1 at 2014-10-25 13:04:11 -0500
ActiveRecord::SchemaMigration Load (0.3ms) SELECT "schema_migrations".* FROM "schema_migrations"
Processing by WelcomeController#index as HTML
Rendered welcome/index.html.erb within layouts/welcome (13.0ms)
Completed 200 OK in 471ms (Views: 446.7ms | ActiveRecord: 0.0ms)
Navigate to the users/sign-in
Started GET "/users/sign_up" for 127.0.0.1 at 2014-10-25 13:04:57 -0500
Processing by Devise::RegistrationsController#new as HTML
Rendered devise/shared/_links.erb (2.7ms)
Rendered devise/registrations/new.html.erb within layouts/devise (615.4ms)
Completed 200 OK in 896ms (Views: 890.9ms | ActiveRecord: 0.9ms)
Refresh the users/sign page:
Started GET "/users/sign_up" for 127.0.0.1 at 2014-10-25 13:06:02 -0500
Processing by Devise::RegistrationsController#new as HTML
Rendered devise/shared/_links.erb (0.8ms)
Rendered devise/registrations/new.html.erb within layouts/devise (7.4ms)
Completed 200 OK in 308ms (Views: 306.3ms | ActiveRecord: 0.0ms)
I also created a gist with the full console results to show what it is GETting first:
https://gist.github.com/tjperry07/b3093c0b7f16b5e000b0
This is happening because of rails turbolinks. It makes following links in your web application faster. Instead of letting the browser recompile the JavaScript and CSS between each page change, it keeps the current page instance alive and replaces only the body and the title in the head.
If you look at guides or turbolinks docs. It's clearly stated that
If using the turbolinks gem, which is included by default in Rails 4, then include the 'data-turbolinks-track' option which causes turbolinks to check if an asset has been updated and if so loads it into the page
FIX:
Replace your stylesheet tags with these:
<%= stylesheet_link_tag "welcome", media: "all", "data-turbolinks-track" => true %>
<%= stylesheet_link_tag "users", media: "all", "data-turbolinks-track" => true %>
I am new to HTML and Ruby i have create one application , i put all my styles in application.HTML.ERB file. It contains header footer styles which automatically applies to all HTML files in my project. Now i want to remove the default style for my show.HTML page. And also i don't need any header and footer for show.HTML page. How can i do this please any one help me.
application.HTML.ERB
<!DOCTYPE html>
<html>
<head>
<title>Contact</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<header>
<div class="al" >
<div class = "logo">
<img src="/data/contact.png" width="50px" height = "50px"/>
</div>
<div class="con">
Contact Book
</div>
</div>
</header>
</head>
<body>
<%= yield %>
</body>
<footer>
<p align="center"> All text and design #2014 Report Bee Edusys Ltd.
</p>
</footer>
</html>
You should make a different "layout" file, next to your application.html.erb file, then specify that layout in the action, like so:
render :action => "show", :layout => "my_new_layout"
If you have shared sections that you want in both layouts you can move them into partials then render the partial in each layout.
see http://guides.rubyonrails.org/layouts_and_rendering.html
If u want to use separate layout for one action in controller, Otherwise we can send layout while rendering a template
Try this
layout nil # no layout default is application
layout 'application', :except => :show # inheriting application except one action "show"
I am trying to add some social tags. Specifically Tweet as well as current number of tweets, Facebook recommend and current number of recommendations etc).
I have set up a partial app/views/aplication/_ogmeta.html.erb
currently only has one line
<meta property="og:title" content="<%= meta.title ? DrillInvestor %>">
// also need type, image, and url
Which I reference in app/views/layout/application.html.erb
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<% ogdata = content_for?(:ogdata) ? yield(:ogdata) : {} %>
<%= render( partial: "ogmeta", locals: {meta: ogdata} ) %>
<title><%= content_for?(:title) ? yield(:title) : "Drill Investor" %></title>
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script><![endif]-->
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
Getting syntax error, unexpected ')', expecting ':'
from the line
I believe you're missing the return value of when meta.title is nil in your ternary operator.
<meta property="og:title" content="<%= meta.title ? DrillInvestor %>">
It should be something like:
<meta property="og:title" content='<%= meta.title ? meta.title : "DrillInvestor" %>'>
Tristian Smith suggested the following:
1- Change app/views/appllication/_ogmeta.html.erb to
<meta property="og:title" content='<%= meta[:title] || "DrillInvestor" %>'>
2- change app/views/layouts/application.htl.erb to
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<% ogdata = content_for?(:ogdata) ? yield(:ogdata) : Hash.new %>
<%= render "ogmeta", meta: ogdata %>
<title><%= content_for?(:title) ? yield(:title) : "Drill Investor" %></title>
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script><![endif]-->
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
thanks
Pierre
I'm very new to RoR and have been following along with Michael Hartl's tutorial and have now been stuck on the part that introduces the Bootstrap framework. All gems are being updated and installed.
locales/application.rb
require File.expand_path('../boot', __FILE__)
# Pick the frameworks you want:
require "active_record/railtie"
require "action_controller/railtie"
require "action_mailer/railtie"
require "sprockets/railtie"
# require "rails/test_unit/railtie"
# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(:default, Rails.env)
module SampleApp
class Application < Rails::Application
# Settings in config/environments/* take precedence over those specified here.
# Application configuration should go into files in config/initializers
# -- all .rb files in that directory are automatically loaded.
# Set Time.zone default to the specified zone and make Active Record auto-convert to this zone.
# Run "rake -D time" for a list of tasks for finding time zone names. Default is UTC.
# config.time_zone = 'Central Time (US & Canada)'
# The default locale is :en and all translations from config/locales/*.rb,yml are auto loaded.
# config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s]
# config.i18n.default_locale = :de
config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
end
end
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= stylesheet_link_tag "default", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "default", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
<%= render 'layouts/shim' %>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<%= yield %>
<%= render 'layouts/footer' %>
</div>
</body>
</html>
home.html.erb
<% provide(:title, 'Home') %>
<div class="center hero-unit">
<h1>Welcome to the Sample App</h1>
<h2>
This is the home page for the
Ruby on Rails Tutorial
sample application.
</h2>
<%= link_to "Sign up now!", '#', class: "bttn btn-large btn-primary" %>
</div>
<%= link_to image_tag("rails.png", alt: "Rails"), 'http://rubyonrails.org/' %>
custom.css.scss
#import "bootstrap";
/* universal */
html {
overflow-y: scroll;
}
border-style: {
padding-top: 60px;
}
section {
overflow:auto;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
}
.center h1 {
margin-bottom: 10px;
}
Something that I've gathered is most likely incorrect is the fact that the source code of /home.html.erb does not make any references to /styles/bootscrap.css . Should I have a bootstrap.css file along with my other stylesheets? If so it's not mentioned in the tut.
<head>
<title>Ruby on Rails Tutorial Sample App | Home</title>
<link data-turbolinks-track="true" href="/stylesheets/default.css" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/javascripts/default.js"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="n2QVul+/didf2xA6jj3QelpDZdOrUpgaWcDp1XFQACM=" name="csrf-token" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<! [endif]
This is what /static_pages/home looks like for me :
my home
vs. the one from the tutorial : tutorial home
I can't think of anything else to include but if I've missed something I'll be sure to follow up quickly. Thanks!
In application.html.erb,
it should be "application", not "default".
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
https://github.com/railstutorial/sample_app_rails_4/blob/master/app/views/layouts/application.html.erb