2012-01-16 21 views
5

Así que estoy usando un archivo application.html.erb que es básicamente el diseño de cada página en mi sitio web. Pero quiero que la página de inicio tenga un fondo blanco y que el resto de las páginas tengan un fondo diferente. El problema es que si envuelvo todo el archivo de página de inicio en un div, solo ajusta el lugar de "rendimiento" y se muestra como un cuadro con un fondo blanco dentro de un cuadro más grande con un fondo gris. Entonces, ¿cómo puedo cambiar el fondo completo de la página de inicio y dejar el resto?Color de fondo diferente para diferentes páginas en rieles

Gracias!

Respuesta

18

Ampliando la respuesta proporcionada por @muffinista: Puede usar una variable de instancia establecida en el controlador para determinar cuándo colocar la clase 'página de inicio' en la etiqueta de cuerpo. Por lo tanto:

def index 
    @home_page = true 
    # existing code 
end 

y en el diseño:

<body class="<%= @home_page ? 'homepage' : ''%>"> 
<%= yield %> 
</body> 
+0

¡Resuelto! ¡Gracias chicos! –

+0

¿Qué pongo después de la página de inicio? ''? – evan

+0

@evan En la respuesta, si no es una página de inicio, no pone nada allí (de ahí la cadena vacía). Si desea utilizar alguna otra clase para todas las demás páginas, esa clase podría ir allí.No debe poner allí la información de estilo, porque el estilo debe estar en hojas de estilo y porque esa parte del código es específicamente para agregar clases. – MrTheWalrus

1

Considera poner una clase especial en la etiqueta del cuerpo (o tal vez en el envoltorio principal) de tu página de inicio, luego hazlo en CSS. Así que usted puede tener en su página de inicio:

<body class="homepage"> 
    <p>hi!</p> 
</body> 

Luego, en sus otras páginas:

<body> 
    <p>i am not a homepage!</p> 
</body> 

Y en tu CSS:

body { 
// some general css 
} 

body.homepage { 
// some css for homepage elements 
background-color: #000000; 
} 

ACTUALIZACIÓN: se puede utilizar una ayuda semejante esto para hacer la vida más fácil:

def body_class 
    @body_class || '' 
end 

Luego, en sus puntos de vista página de inicio, poner algo como esto en la parte superior:

<% @body_class = "homepage" %> 

Obviamente, esto depende de las características específicas de su aplicación, pero funciona muy bien para mí.

+1

El problema es que la página de inicio no tiene cuerpo. Todo el HTML de la página de inicio corresponde al rendimiento de una plantilla application.html.erb que solo tiene un cuerpo ... ¿Puedo tener un cuerpo dentro de un cuerpo? –

+0

También podría usar 'content_for' para agregar javascript en el encabezado para cambiar la clase de cuerpo si desea modificar esto en la vista. (Forma genérica para modificar el diseño sin modificar el diseño) – alternative

+0

@NosayrYassin Acabo de agregar algunos detalles a mi respuesta sobre cómo hago esto, en resumen, hay un ayudante que hará que esto sea más fácil para usted. Por lo general, esta es la forma en que las personas establecen los títulos de las páginas, etc. – muffinista

1

sólo para añadir a la respuesta aceptada, si es necesario establecer diferentes fondos de múltiples páginas, que tendría sentido y añadir la legibilidad para mover el código para encontrar un fondo adecuado en un parcial:

<body class= <%=render partial: "layouts/background" %> >

_background.html.erb:

<%- if @main_page_background OR @stylish_background %> 
     "main_page_background" 
     <%- elsif @dark_background %> 
     "dark_page_background" 
     <%- else %> 
     "" 
    <% end %> 
Cuestiones relacionadas