Lets suppose we a have requirement to customize our layout for different controllers, means different controller will have different layout and basically we want to change the style of different controllers views. To override a layout on the basis of controllers we can use following steps...
Step1: First, create the template ( i.e. new_layout.html.erb) inside app/views/layouts
Step2: Create new style(i.e. newstyle.css) inside /public/stylesheets
Step3: Change stylesheet_link_tag according to custom layout css name
Step4: Call the new layout in a required controller and finally we'll get new layout, when perform any action that controller.
Lets we explain each steps
Step1: Create a new layout file into layouts folder(may be its similar to application.html.erb file)
Here we take new layout name is new_layout.html.erb
Path: app/views/layouts/ new_layout.html.erb
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = iso-8859-1" />
<meta http-equiv = "Content-Language" content = "en-us" />
<title>EvonTech Dehardun, India</title>
<%= stylesheet_link_tag "style" %>
</head>
<body id = "evontech">
<div id = "container">
<div id = "header">
<h1>List of services</h1>
<h3>powered by Evontech</h3>
</div>
<div id = "content">
<%= yield -%>
</div>
<div id = "sidebar"></div>
</div>
</body>
</html>
Step2: Create new style(i.e. newstyle.css) inside /public/stylesheets
Path: /public/stylesheets/newstyle.css
body {
font-family: Helvetica, Geneva, Arial, sans-serif;
font-size: small;
font-color: #000;
background-color: #fff;
}
a:link, a:active, a:visited {
color: #CD0000;
}
input {
margin-bottom: 5px;
}
p {
line-height: 150%;
}
div#container {
width: 760px;
margin: 0 auto;
}
div#header {
text-align: center;
padding-bottom: 15px;
}
div#content {
float: left;
width: 450px;
padding: 10px;
}
div#content h3 {
margin-top: 15px;
}
ul#articles {
list-style-type: none;
}
ul# articles li {
line-height: 140%;
}
div#sidebar {
width: 200px;
margin-left: 480px;
}
Step3: Change stylesheet_link_tag according to new custom layout css name (e.i. newstyle) and modified file looks like...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = iso-8859-1" />
<meta http-equiv = "Content-Language" content = "en-us" />
<title>EvonTech Dehardun, India</title>
<%= stylesheet_link_tag "newstyle" %>
</head>
<body id = "evontech">
<div id = "container">
<div id = "header">
<h1>List of services</h1>
<h3>powered by Evontech</h3>
</div>
<div id = "content">
<%= yield -%>
</div>
<div id = "sidebar"></div>
</div>
</body>
</html>
Step4: Call the new layout in a required controller
Here we want to call the new layout in Articles_controller then the modified articles_controller.rb
looks like...
class ArticlesController < ApplicationController
http_basic_authenticate_with name: "admin", password: "admin", except: [:index, :show]
#here we call the custom layout
layout 'new_layout'
def index
@articles = Article.paginate(:page => params[:page])
end
def new
@article = Article.new
end
def edit
@article = Article.find(params[:id])
end
def update
@article = Article.find(params[:id])
if @article.update(article_params)
redirect_to @article
else
render 'edit'
end
end
def create
@article = Article.new(article_params)
if @article.save
redirect_to @article
else
render "new"
end
end
def destroy
@article = Article.find(params[:id])
@article.destroy
respond_to do |format|
format.html { redirect_to ponies_url }
format.json { head :no_content }
format.js { render :layout => false }
end
#redirect_to articles_path
end
def show
@article = Article.find(params[:id])
end
private
def article_params
params.require(:article).permit(:title, :text)
end
end
When the actions of articles_controller calls and redirected to its views then layout “new_layout” is override the default or exists layout.
We can also override a layout on particular action of controllers. For example if we want to override template on only index method then the modify the layout 'new_layout' by layout 'new_layout', only: :index
class ArticlesController < ApplicationController
http_basic_authenticate_with name: "admin", password: "admin", except: [:index, :show]
#here we call the custom layout
layout 'new_layout', only: :index
def index
@articles = Article.paginate(:page => params[:page])
end
0 Comment(s)