I'm using bootstrap-sass in my rails app which works fine however one particular page 'welcome' I want the body to have have different color.
If I open the welcome.scss file in the assets and add
html, body {background:#000000;}
I get no change and the bootstrap white overrides the change I expect to happen.
How do I get it to change for that page.
It was my understanding that the page css only loads in when you are on that page - am I wrong and would it just be the same as writing in the Application.scss file?
It was my understanding that the page css only loads in when you are on that page
The CSS which loads is dependent entirely upon the stylesheet_link_tag in your layout:
#app/views/layouts/application.html.erb
<%= stylesheet_link_tag :application %>
The way in which you load this determines the stylesheets which load each page.
--
For example, the standard Rails way to load your stylesheets is to use the "sprockets" files & directives to append the required files into your application.css sheet. Although this works in any other sheet, it's mainly used with application.
Since you're using bootstrap (which tells you the following):
#app/assets/stylesheets/application.css
/*
*= require bootstrap_and_overrides
*/
... you'll need to make sure you know which files you want to load. Specifically, your assertion that page-specific CSS being loaded is false; you either hard-code the loads, or put the code into a single file (EG application):
#app/views/layouts/application.html.erb
<%= stylesheet_link_tag :application, controller_name #=> loads controller CSS page each time you load a new controller %>
--
For you, I would do the following:
#app/views/layouts/application.html.erb
<body class="welcome if action_name == 'welcome'">
Then you'd be able to use the following:
#app/assets/stylesheets/application.css
body.welcome {background:#000000;}
If you wanna customize the style for a specific controller or action you can follow this:
Add controller name/ action name (if needed) to layout file, application.html.erb is in my example:
<!DOCTYPE html>
<html>
<head>
<!-- My header template -->
</head>
<body class="<%= controller_name %>_body action_<%= action_name %>">
<!-- My body template -->
</body>
</html>
Add css in a suitable file. Eg: controler_name = 'home', action = 'index'. So my css will be (Notice that I don't use action = 'index' here to css, it may be needed in your case)
body {
background: NORMAL_COLOR;
&.home-body {
background: SPECIAL_COLOR;
}
}
If you are loading that css file only in that particular page, then it will be applicable only to that page. Otherwise it will apply to all of the pages.
So in nutshell, it is same as writing in Application.scss.
css classes applied in same order as you defined in declaring them. So to apply welcome.scss you need to declare it after bootstrap css file.
Further you can make use of !important
This is how you can define page specific css files in <head> section:
In your application.html.erb you can define
<% if content_for?(:head) %>
<%= yield(:head) %>
<% else %>
# default css file
<% end %>
And in your pages (welcome page for this particular instance), you can define your respective css file like this:
<% content_for :head do %>
<link rel="stylesheet" href="/assets/welcome.scss">
<% end %>
Hope it helps!
Related
I know thas it sounds a little weird. I need to generate an html file based on an html.erb template which has many variables. I will give an oversimplified example.
In my viwes/pages/home.html.erb I have:
<html>
<h1> <%= #name %> </h1>
</html>
In my pages_controller.rb:
def home
#name = 'Michaela'
end
When the home funcion is called, it will render the home.html.erb and in the browser, the content will be showed as if it was opnening an .html file that looks like the following:
<html>
<h1> Michaela </h1>
</html>
What I need is to generate an plain html file with that content, after #name has been defined, so if instad of being hardcoded, it´s inputted by the user, the .html file defines it´s content accroding to that user input.
As Maxence recommended, I used the render_to_string helper to finally store the generated html into a variable, and manipulate it in that way.
I written html code for the pdf page .. i want to add some styles to that page so i added below link tag to include style.css.scss in that page.
<%= wicked_pdf_stylesheet_link_tag "application"%>
<%= wicked_pdf_stylesheet_link_tag "pdf"%>
But it is not working because i created one more folder like frontend under assets/stylesheets and copied total css files in that folder .. May be this is the reason it is working. If it is the reason can you please clarify me how to include stylesheet link_tag to wicked_pdf??
Try to create a separate layout for PDFs e.g pdf.html.erb in view/layout. Here i'm assuming there will be pdf.css.scss in assets/stylesheets.
<%= wicked_pdf_stylesheet_link_tag 'pdf' %>
The in your controller you have you specified layout.
layout: 'pdf.html.erb'
See Example wicked_pdf
Try with stylesheet link tag like
<%= wicked_pdf_stylesheet_link_tag 'frontend/your_file_name' %>
It will help you. Thanks
I'm looking to have two different footers, and have one appear on specific pages. The site has a lot of pages, so I don't want to just hardcode each footer into each page.
In rails, how can I put in logic to have which footer appears on which page? Is there an 'if' statement I can put directly on the _footer partial that displays the footer by page?
Thanks in advance for your help!
Your going to want to have two different layouts. If you show me some of your code i will be about to help you out a little more.
You can crate two different layouts( add .erb file to direcroty layouts in views ) or can create two partial and use them when you want, for example:
In your Controller add
class Controller
...
# You may use class or instrance variable
def your_method
# your logic...
#footer_variable = true
end
in your layout file add
<%= if #footer_variable %>
<%= render 'optional_footer' %>
<%= else %>
<%= render 'footer' %>
<%= end %>
and add to your layout's directory file footer.html.erb with your normal footer and optional_footer.html.erb
Optional Footer
<div>
<span>I'm your optional footer</span>
</div>
Normal Footer
<div>
<span>I'm your normal footer</span>
</div>``
If instance variable will be availiable in layout it will ber rendered optional footer otherwise normal footer( from your layout )
I am trying to include a css file in a layout file on a rails site and my tag contained in the header is not being interpreted, it is instead displaying on the page. I put the tag in the section. The link tag is shown below. I assign page_style and it is correctly inserted on the page but the page displays the second tag below instead of interpreting the tag.
<%= "<link rel=\"stylesheet\" type=\"text/css\" href=\"/stylesheets/#{#page_style}.css\">" if !#page_style.nil? %>
<link rel="stylesheet" type="text/css" href="/stylesheets/standard.css">
In Rails (3 and up), strings are HTML-escaped before being shown, so your < are being encoded as <, etc.
You can add .html_safe to your string like this:
<%= "<link rel=\"stylesheet\" type=\"text/css\" href=\"/stylesheets/#{#page_style}.css\">".html_safe if !#page_style.nil? %>
However, it would be a bit more Rails-y if you rewrote it to use the stylesheet_link_tag helper like this:
<%= stylesheet_link_tag(#page_style) if #page_style.present? %>
I don#t really see where you started the Rails-command.
Usually basic Rails starts the following:
<% if #page_style.nil? %>
// Do something here
<% end %>
You may want to add 'binding.pry' within your controller right after #page_style was used. Within your server-tab it then should open up your rails console where you can check the output of #page_style (and even apply the #page_style.nil? operation and check its outcome).
i'n a mine rails app i'm changing the html part of a page (localhost:3000/feeds), in the file index.html.erb i set the background this way
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type="text/css">
body
{
background-image:url("../../assets/images/wwi.jpg");
}
</style>
</head>
</html>
the directory are set this way:
->app
->assets
->images
->wwi.jpg
->views
->feeds
->index.html.erb
but when i start the rails server and the go to localist:3000/feeds there's no background (i had no problem for background-color)
You are not using rails asset pipeline by writing your css inside views. If you look at docs it says
Asset pipeline concatenate assets, which can reduce the number of requests that a browser makes to render a web page. Web browsers are limited in the number of requests that they can make in parallel, so fewer requests can mean faster loading for your application
*So you should use it and for that first of all remove all the styles from your layout or views and you need to include rails application.css in your layout file by
<%= stylesheet_link_tag "application", media: "all" %>
This tag will make rails use look for your styles inside assets/stylesheets/application.css. Now you need to require the style.css.erb you just made to include your styles by
*= require style
Now inside your style.css.erb you can have your style like this:
body{
background-image: url(<%= asset_path 'wwi.png' %>)
}
Update:
If you want to use sass instead then your file would be style.css.scss and can use rails image-url helper, so you can do:
body{
background-image: image-url('wwi.png');
}
For more details refer to rails asset pipeline
When using the assets pipeline, path should be relative to the root
background-image:url("/assets/wwi.jpg");
images is assumed.
Also you can use the assets helper
<%= asset_path 'wwi.png' %>
I recommend you read the documentation of the assets pipeline
http://guides.rubyonrails.org/asset_pipeline.html