Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How override layout in controller in rails?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.46k
    Comment on it

    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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: