I want the color of the header to change depending on the page.

What do you want to do
I want to change the color of the letter in the header when I move the page (this color on page A).Page B looks like this color.)

Current State
I have written the header using the following code.If I want to change this background-color from page to page, how should I write it?

I'm not sure if I write like a conditional branch or give a different class.Please tell me who it is.

_header.html.erb

<header> 
   <nav> 
     <nav class="navbar navbar-expand-md sticky-top navbar-dark" style="background-color:#ff9933;"> 
       <a class="navbar-brand" href="/">xxx</a> 
       <Button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#bs-navi"aria-controls="bs-navi"aria-expanded="false"aria-label="Toggle navigation"> 
         <span class="navbar-toggler-icon">/span> 
       </button> 
  
       <div class="collapse navbar-collapse" id="bs-navi"> 
         <ul class="navbar-nav"> 
           <%if user_signed_in?%> 
             <lic class="nav-item active"> 
               <%=link_to "write a letter", new_post_path, class: 'nav-link', data: {"turbolinks"=>false}%> 
             </li> 
             <lic class="nav-item active"> 
               <%=link_to "Read Letter", notifications_path, class: 'nav-link'%> 
             </li> 
             <lic class="nav-item active"> 
               <%=link_to 'Edit Account', edit_user_registration_path, class: 'nav-link'%> 
             </li> 
             <lic class="nav-item active"> 
               <%=link_to "logout", destroy_user_session_path, method::delete, class:'nav-link'%> 
             </li> 
           <%else%> 
             <lic class="nav-item active"> 
               <%=link_to "New Registration", new_user_registration_path, class: 'nav-link'%> 
             </li> 
             <lic class="nav-item active"> 
               <%=link_to "login", new_user_session_path, class: 'nav-link'%> 
             </li> 
           <%end%> 
         </ul> 
       </div> 
     </nav> 
   </nav> 
 </header>

ruby-on-rails ruby html5 bootstrap scss

2022-09-30 16:39

1 Answers

I think you can change it like this!

Reference:
How to browse to the Controller or Action name from the Rails 4.x View

_header.html.erb

<navclass="navbar navbar-expand-md sticky-top navbar-dark" style="background-color:<%=background_color(controller)%>">">

application_heler.rb

def background_color(controller)
    case controller.controller_name
    when 'posts'
      '#ff9933'
    when 'user_sessions'
      '#ff0000'
    end
  end

2022-09-30 16:39

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656