Using Rails to assign a page-specific CSS class within a shared layout

Is there a way to apply unique CSS classes to specific tags within a common layout?

In my application.html.erb layout file, the application.css.scss is loaded using

<%= stylesheet_link_tag "application". . . %>
, which then includes all CSS files in the directory (including custom.css.scss).

I have four static pages and one common layout. However, I want the Home page to have different styling such as a full-page background and navigation with different colors.

This is what my application.html.erb layout looks like:

<DOCTYPE! html>
<html>
  <head>
    ·
    ·
  </head>
  <body>
    <header>
      ·
      ·
    </header>
    ·
    <%= yield %>
    ·
  </body>
</html>

And here's my home.html.erb file:

<div>
  This content is unique to the Home page
</div>

I'm looking for a way to add classes to the <body> and <header> tags specifically on the Home page only.

What would be the most effective approach to achieve this?

(I considered creating a separate layout for the Home page along with a dedicated CSS file, but I'm hoping there's a better solution available).

Answer №1

Utilizing the content_for method would be the ideal solution for this scenario.

In your main layout file, application.html.erb:

<DOCTYPE! html>
<html>
  <head>
    ·
    ·
  </head>
  <body class="<%= content_for :body_class %>">
    <header class="<%= content_for :header_class %>">
      ·
      ·
    </header>
    ·
    <%= yield %>
    ·
  </body>
</html>

In your specific view file, home.html.erb:

<% content_for :body_class, 'class1' %>
<% content_for :header_class, 'class2' %>

<div>
  Customized content exclusively for this page
</div>

Using content_for is a more efficient and flexible approach compared to using conditional statements and checking the current controller with action.

Read more about content_for method here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating an intricate table layout using AngularJS and the ngRepeat directive

I'm attempting to create a table similar to the one shown in the image below using HTML5. In this table, there is a multi-dimensional matrix with Class A and Class B highlighted in yellow. Each class has three modes (highlighted in blue), and each mo ...

The required keys [:id] are not included in the route matches

As a beginner in Rails, I've encountered similar issues that I can't seem to resolve. Here are my routes: resources :users do resources :items end My model setup is as follows: class Item < ActiveRecord::Base belongs_to :user end cl ...

Display scrollable content at the bottom

I am currently working on creating a chat application using JavaScript (AngularJS without jQuery) and I am wondering if it is possible to have a scrollable div load to the bottom automatically. While I am familiar with the scrollTo JS property, I do not f ...

The HTML/CSS authentication system is experiencing technical difficulties and is not functioning as intended

I came across this code on codepen.io and tried to implement it using the provided HTML and CSS. However, I encountered some errors during implementation. While the code works perfectly in the CodePen compiler, it doesn't seem to be error-free. One i ...

Utilizing Typescript to pass props to a material-ui button enclosed in styled-components

After setting up my react project using the typescript template, I decided to style the material-ui Button component using the 'styled' method from the styled-components library as shown below: import React from 'react'; import styled f ...

Create a DIV element that completely fills the vertical space available

My webpage is currently looking quite empty, with only one DIV element present: <div style="height: 20%; min-height: 10px; max-height: 100px; width: 100%; background-color: blue;"></div> I' ...

Applying jQuery .animate() to elements without specifying position: absolute

My goal is to create a website where clicking on an image triggers a dropdown menu. The jQuery method I'm using is as follows: function main() { $('#arrow').click(function() { $('.hidden').animate({ top: &a ...

Ways to expand flexbox to occupy the entire container

I have a scenario where I want two flexboxes in a container to fill the entire height of the container. The left flexbox should display an image that fills its entire space, while the right flexbox contains other content. However, I'm facing difficult ...

Managing Custom CSS Files in Sencha Touch 2 Production Build

Currently, I am in the process of working on a mobile website using Sencha Touch 2. To develop the production build, I utilized Sencha Cmd v3. Upon testing the production version, I noticed that although my custom CSS files are present in the folder struct ...

Material UI Paper component does not extend to full viewport height

My React component includes a Material UI <Paper> component that acts as a background. This <Paper> is nested inside a <ThemeProvider>, which in turn is nested within a <div>, and then further nested inside the <body>. I have ...

Utilize text wrapping to ensure a fixed maximum height for content display

I am in need of a div that contains text spanning multiple lines, with both a fixed width and a maximum height. Currently, I have applied the CSS property overflow: hidden;. However, my issue arises when the last line of text exceeds the maximum height of ...

Is there a way to modify the color scheme of the hamburger icon

I'm experiencing difficulties changing the color of a hamburger icon. I've searched for the specific code responsible for the color change, but I haven't been able to locate it. Ideally, I want the color to be white, but on small screens, i ...

I'm looking for a Visual Studio add-in that can identify and flag any unused CSS classes or IDs within the entire solution

Exactly as the headline suggests. If not, what are some reliable online services you've tried for decluttering oversized stylesheets? ...

Is there a framework available to animate Pseudo CSS elements?

Recently, I was working on developing a bar chart that utilized pseudo CSS elements (::before, ::after). While I successfully created bars that look visually appealing, I encountered a challenge when attempting to animate the height changes. Whenever I us ...

Troubles with caching on Amazon S3

Just starting out in web development and I'm working on updating HTML and CSS files stored on Amazon S3. Our website's backend is hosted on Heroku, while the front-end is on Amazon S3. Whenever I make changes to a CSS file, I can immediately see ...

I can't seem to figure out the source of this unexpected padding/margin on my website

After creating a website for a church using Foundation, SASS, and Compass, I noticed a horizontal scroll issue when resizing the window. Adding overflow-x: hidden; seemed to fix it, but there was still about 20px of padding on the right side when testing ...

Position Bootstrap Modal in the center horizontally

I am working on an Angular project and struggling to center my Bootstrap 3 Modal horizontally on the screen. Despite trying various solutions like using text-align: center and align = "center", I have been unsuccessful. Can someone guide me on how to prope ...

Positioning Problems with Popups

I have been facing an issue with the positioning of a popup in my trivia game. Despite trying multiple solutions, I have not been able to achieve consistency. Here is a snippet of the HTML code: <div class="logo"> <img src="css/rio-40.png"/& ...

Turn off the background when the automatic popup box appears

I have implemented a popup box that automatically appears after 5 seconds when the site is loaded. However, if I click outside of the popup box, it closes. I want to disable the background when the popup box is displayed. If I remove the two lines of code ...

Curved divs display outlines on more compact dimensions

Check out this relevant Codesandbox There seems to be a recurring issue in my application where rounded divs display edges when they are of smaller sizes. Refer to the image below for a visual representation. What could be causing this problem and how can ...